✨ EmojiPicker component (#10249)

src/view/shell/Composer.web.tsx

@@ -1,4 +1,3 @@
-import {useCallback, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
@@ -6,11 +5,6 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {useA11y} from '#/state/a11y'
 import {useModals} from '#/state/modals'
 import {type ComposerOpts, useComposerState} from '#/state/shell/composer'
-import {
-  EmojiPicker,
-  type EmojiPickerPosition,
-  type EmojiPickerState,
-} from '#/view/com/composer/text-input/web/EmojiPicker'
 import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
 import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
 
@@ -41,25 +35,6 @@ function Inner({state}: {state: ComposerOpts}) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
-  const [pickerState, setPickerState] = useState<EmojiPickerState>({
-    isOpen: false,
-    pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
-  })
-
-  const onOpenPicker = useCallback((pos: EmojiPickerPosition | undefined) => {
-    if (!pos) return
-    setPickerState({
-      isOpen: true,
-      pos,
-    })
-  }, [])
-
-  const onClosePicker = useCallback(() => {
-    setPickerState(prev => ({
-      ...prev,
-      isOpen: false,
-    }))
-  }, [])
 
   FocusGuards.useFocusGuards()
 
@@ -104,13 +79,11 @@ function Inner({state}: {state: ComposerOpts}) {
             onPost={state.onPost}
             onPostSuccess={state.onPostSuccess}
             mention={state.mention}
-            openEmojiPicker={onOpenPicker}
             text={state.text}
             imageUris={state.imageUris}
             openGallery={state.openGallery}
           />
         </View>
-        <EmojiPicker state={pickerState} close={onClosePicker} />
       </DismissableLayer.DismissableLayer>
     </FocusScope.FocusScope>
   )