Merge pull request #39 from nimbus-gui/rd.fix-emoji-picker-position

Fix emoji picker position
This commit is contained in:
Radoslav Dimchev 2024-01-24 20:26:45 +02:00 committed by GitHub
commit a1287ce577
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 13 deletions

View File

@ -2,11 +2,12 @@ import { useEffect, useRef, useState } from 'react'
import { XStack, YStack } from 'tamagui' import { XStack, YStack } from 'tamagui'
import { Avatar, Text } from '@status-im/components' import { Avatar, Text } from '@status-im/components'
import { ReactionIcon } from '@status-im/icons' import { ReactionIcon } from '@status-im/icons'
import './CreateAvatar.css' import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
import LabelInputField from '../LabelInputField' import LabelInputField from '../LabelInputField'
import ColorPicker from '../ColorPicker/ColorPicker' import ColorPicker from '../ColorPicker/ColorPicker'
import EmojiPickerDialog from '../EmojiPickerDialog' import EmojiPickerDialog from '../EmojiPickerDialog'
import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react' import './CreateAvatar.css'
const CreateAvatar = () => { const CreateAvatar = () => {
const [chosenColor, setChosenColor] = useState('#2A4AF5') const [chosenColor, setChosenColor] = useState('#2A4AF5')
@ -14,16 +15,17 @@ const CreateAvatar = () => {
const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600') const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
const emojiRef = useRef<HTMLDivElement | null>(null) const emojiRef = useRef<HTMLDivElement | null>(null)
function changeEmoji(emojiData: EmojiClickData) { const changeEmoji = (emojiData: EmojiClickData) => {
setSelectedEmoji(emojiData.unified) setSelectedEmoji(emojiData.unified)
} }
useEffect(() => { const handleClickOutside = (event: any) => {
function handleClickOutside(event: any) {
if (emojiRef.current && !emojiRef.current.contains(event.target)) { if (emojiRef.current && !emojiRef.current.contains(event.target)) {
setIsEmojiDialogOpen(false) setIsEmojiDialogOpen(false)
} }
} }
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside) document.addEventListener('mousedown', handleClickOutside)
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside) document.removeEventListener('mousedown', handleClickOutside)
@ -32,9 +34,7 @@ const CreateAvatar = () => {
return ( return (
<YStack> <YStack>
<XStack> <LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="100%" />
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="95%" />
</XStack>
<XStack space={'$3'} justifyContent={'space-between'}> <XStack space={'$3'} justifyContent={'space-between'}>
<YStack> <YStack>
<Text size={13} weight="semibold" color={'#647084'}> <Text size={13} weight="semibold" color={'#647084'}>

View File

@ -6,6 +6,7 @@ import EmojiPicker, {
Categories, Categories,
} from 'emoji-picker-react' } from 'emoji-picker-react'
import { Stack } from 'tamagui' import { Stack } from 'tamagui'
import { useWindowSize } from '../../hooks/useWindowSize'
type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE' type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
@ -14,7 +15,27 @@ type EmojiPickerProps = {
changeEmoji: (emojiData: EmojiClickData) => void changeEmoji: (emojiData: EmojiClickData) => void
} }
function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) { const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
const windowSize = useWindowSize()
const getEmojiPickerWidth = () => {
if (windowSize.width < 505) {
return '67vw'
} else if (windowSize.width < 640) {
return '73vw'
} else if (windowSize.width < 780) {
return '78vw'
} else if (windowSize.width < 1000) {
return '82vw'
} else {
return '40vw'
}
}
if (windowSize.width === 0) {
return null
}
return ( return (
<Stack position="absolute" zIndex={1} left={100} top={-150}> <Stack position="absolute" zIndex={1} left={100} top={-150}>
<EmojiPicker <EmojiPicker
@ -22,7 +43,7 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
autoFocusSearch={false} autoFocusSearch={false}
theme={Theme.AUTO} theme={Theme.AUTO}
height={'50vh'} height={'50vh'}
width={'50vw'} width={getEmojiPickerWidth()}
emojiVersion="1" emojiVersion="1"
lazyLoadEmojis={false} lazyLoadEmojis={false}
previewConfig={{ showPreview: false }} previewConfig={{ showPreview: false }}
@ -54,4 +75,5 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
</Stack> </Stack>
) )
} }
export default EmojiPickerDialog export default EmojiPickerDialog