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

Fix emoji picker position

src/components/General/CreateAvatar/CreateAvatar.tsx

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

src/components/General/EmojiPickerDialog.tsx

@@ -6,6 +6,7 @@ import EmojiPicker, {
   Categories,
 } from 'emoji-picker-react'
 import { Stack } from 'tamagui'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
 
@@ -14,7 +15,27 @@ type EmojiPickerProps = {
   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 (
     <Stack position="absolute" zIndex={1} left={100} top={-150}>
       <EmojiPicker
@@ -22,7 +43,7 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
         autoFocusSearch={false}
         theme={Theme.AUTO}
         height={'50vh'}
-        width={'50vw'}
+        width={getEmojiPickerWidth()}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}
@@ -54,4 +75,5 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
     </Stack>
   )
 }
+
 export default EmojiPickerDialog