mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-21 15:48:25 +00:00
Merge pull request #39 from nimbus-gui/rd.fix-emoji-picker-position
Fix emoji picker position
This commit is contained in:
commit
a1287ce577
@ -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'}>
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user