Rewrite emoji component logic to be more generic

src/components/Emojis/Button.tsx

@@ -2,49 +2,41 @@ import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
-import { Pressable, StyleSheet } from 'react-native'
+import { Keyboard, Pressable } from 'react-native'
 import EmojisContext from './helpers/EmojisContext'
 
-const EmojisButton = React.memo(
-  () => {
-    const { colors } = useTheme()
-    const { emojisState, emojisDispatch } = useContext(EmojisContext)
+const EmojisButton: React.FC = () => {
+  const { colors } = useTheme()
+  const { emojisState, emojisDispatch } = useContext(EmojisContext)
 
-    return emojisState.enabled ? (
-      <Pressable
-        disabled={!emojisState.emojis || !emojisState.emojis.length}
-        onPress={() =>
-          emojisDispatch({ type: 'activate', payload: !emojisState.active })
+  return (
+    <Pressable
+      disabled={!emojisState.emojis || !emojisState.emojis.length}
+      onPress={() => {
+        const targetProps = emojisState.inputProps?.find(props => props.ref.current?.isFocused())
+        if (!targetProps) {
+          return
         }
-        hitSlop={StyleConstants.Spacing.S}
-        style={styles.base}
-        children={
-          <Icon
-            name={
-              emojisState.emojis && emojisState.emojis.length
-                ? emojisState.active
-                  ? 'Type'
-                  : 'Smile'
-                : 'Meh'
-            }
-            size={StyleConstants.Font.Size.L}
-            color={
-              emojisState.emojis && emojisState.emojis.length
-                ? colors.primaryDefault
-                : colors.disabled
-            }
-          />
+        if (emojisState.targetProps === null) {
+          Keyboard.dismiss()
         }
-      />
-    ) : null
-  },
-  () => true
-)
-
-const styles = StyleSheet.create({
-  base: {
-    paddingLeft: StyleConstants.Spacing.S
-  }
-})
+        emojisDispatch({ type: 'target', payload: targetProps })
+      }}
+      hitSlop={StyleConstants.Spacing.S}
+      style={{ alignSelf: 'flex-end', padding: StyleConstants.Spacing.Global.PagePadding }}
+      children={
+        <Icon
+          name={emojisState.emojis && emojisState.emojis.length ? 'Smile' : 'Meh'}
+          size={24}
+          color={
+            emojisState.emojis && emojisState.emojis.length
+              ? colors.primaryDefault
+              : colors.disabled
+          }
+        />
+      }
+    />
+  )
+}
 
 export default EmojisButton

src/components/Emojis/List.tsx

@@ -7,13 +7,7 @@ import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useContext, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  AccessibilityInfo,
-  findNodeHandle,
-  Pressable,
-  SectionList,
-  View
-} from 'react-native'
+import { AccessibilityInfo, findNodeHandle, Pressable, SectionList, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
 import EmojisContext from './helpers/EmojisContext'
@@ -27,6 +21,33 @@ const EmojisList = React.memo(
     const { emojisState, emojisDispatch } = useContext(EmojisContext)
     const { colors } = useTheme()
 
+    const addEmoji = (shortcode: string) => {
+      if (!emojisState.targetProps) {
+        return
+      }
+
+      const inputValue = emojisState.targetProps.value
+      const maxLength = emojisState.targetProps.maxLength
+      const selectionRange = emojisState.targetProps.selectionRange || {
+        start: emojisState.targetProps.value.length,
+        end: emojisState.targetProps.value.length
+      }
+
+      if (inputValue?.length) {
+        const contentFront = inputValue.slice(0, selectionRange.start)
+        const contentRear = inputValue.slice(selectionRange.end)
+
+        const whiteSpaceRear = /\s/g.test(contentRear.slice(-1))
+
+        const newTextWithSpace = ` ${shortcode}${whiteSpaceRear ? '' : ' '}`
+        emojisState.targetProps.setValue(
+          [contentFront, newTextWithSpace, contentRear].join('').slice(0, maxLength)
+        )
+      } else {
+        emojisState.targetProps.setValue(`${shortcode} `.slice(0, maxLength))
+      }
+    }
+
     const listItem = useCallback(
       ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
         return (
@@ -46,20 +67,14 @@ const EmojisList = React.memo(
                   <Pressable
                     key={emoji.shortcode}
                     onPress={() => {
-                      emojisDispatch({
-                        type: 'shortcode',
-                        payload: `:${emoji.shortcode}:`
-                      })
+                      addEmoji(`:${emoji.shortcode}:`)
                       dispatch(countInstanceEmoji(emoji))
                     }}
                   >
                     <FastImage
-                      accessibilityLabel={t(
-                        'common:customEmoji.accessibilityLabel',
-                        {
-                          emoji: emoji.shortcode
-                        }
-                      )}
+                      accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
+                        emoji: emoji.shortcode
+                      })}
                       accessibilityHint={t(
                         'screenCompose:content.root.footer.emojis.accessibilityHint'
                       )}
@@ -80,19 +95,19 @@ const EmojisList = React.memo(
           </View>
         )
       },
-      []
+      [emojisState.targetProps]
     )
 
     const listRef = useRef<SectionList>(null)
     useEffect(() => {
-      layoutAnimation()
       const tagEmojis = findNodeHandle(listRef.current)
-      if (emojisState.active) {
+      if (emojisState.targetProps) {
+        layoutAnimation()
         tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
       }
-    }, [emojisState.active])
+    }, [emojisState.targetProps])
 
-    return emojisState.active ? (
+    return emojisState.targetProps ? (
       <SectionList
         accessible
         ref={listRef}
@@ -101,15 +116,13 @@ const EmojisList = React.memo(
         sections={emojisState.emojis}
         keyExtractor={item => item[0].shortcode}
         renderSectionHeader={({ section: { title } }) => (
-          <CustomText
-            fontStyle='S'
-            style={{ position: 'absolute', color: colors.secondary }}
-          >
+          <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
             {title}
           </CustomText>
         )}
         renderItem={listItem}
         windowSize={4}
+        contentContainerStyle={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}
       />
     ) : null
   },

src/components/Emojis/helpers/EmojisContext.tsx

@@ -1,28 +1,27 @@
-import { createContext, Dispatch } from 'react'
+import { createContext, Dispatch, RefObject, SetStateAction } from 'react'
+import { TextInput } from 'react-native'
+
+type inputProps = {
+  ref: RefObject<TextInput>
+  value: string
+  setValue: Dispatch<SetStateAction<string>>
+  selectionRange?: { start: number; end: number }
+  maxLength?: number
+}
 
 export type EmojisState = {
-  enabled: boolean
-  active: boolean
   emojis: {
     title: string
     data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
   }[]
-  shortcode: Mastodon.Emoji['shortcode'] | null
+  targetProps: inputProps | null
+  inputProps: inputProps[]
 }
 
 export type EmojisAction =
-  | {
-      type: 'load'
-      payload: NonNullable<EmojisState['emojis']>
-    }
-  | {
-      type: 'activate'
-      payload: EmojisState['active']
-    }
-  | {
-      type: 'shortcode'
-      payload: EmojisState['shortcode']
-    }
+  | { type: 'load'; payload: NonNullable<EmojisState['emojis']> }
+  | { type: 'target'; payload: EmojisState['targetProps'] }
+  | { type: 'input'; payload: EmojisState['inputProps'] }
 
 type ContextType = {
   emojisState: EmojisState
@@ -32,12 +31,12 @@ const EmojisContext = createContext<ContextType>({} as ContextType)
 
 export const emojisReducer = (state: EmojisState, action: EmojisAction) => {
   switch (action.type) {
-    case 'activate':
-      return { ...state, active: action.payload }
     case 'load':
       return { ...state, emojis: action.payload }
-    case 'shortcode':
-      return { ...state, shortcode: action.payload }
+    case 'target':
+      return { ...state, targetProps: action.payload }
+    case 'input':
+      return { ...state, inputProps: action.payload }
   }
 }