diff --git a/src/components/Emojis.tsx b/src/components/Emojis.tsx index a6393082..d6e7c3ba 100644 --- a/src/components/Emojis.tsx +++ b/src/components/Emojis.tsx @@ -7,7 +7,7 @@ import { getInstanceFrequentEmojis } from '@utils/slices/instancesSlice' import { chunk, forEach, groupBy, sortBy } from 'lodash' import React, { PropsWithChildren, RefObject, useEffect, useReducer, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Keyboard, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native' +import { Keyboard, KeyboardAvoidingView, TextInput, View } from 'react-native' import FastImage from 'react-native-fast-image' import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context' import { useSelector } from 'react-redux' @@ -74,14 +74,14 @@ const ComponentEmojis: React.FC = ({ if (data && data.length) { let sortedEmojis: EmojisState['emojis'] = [] forEach(groupBy(sortBy(data, ['category', 'shortcode']), 'category'), (value, key) => - sortedEmojis.push({ title: key, data: chunk(value, 5) }) + sortedEmojis.push({ title: key, data: chunk(value, 4) }) ) if (frequentEmojis.length) { sortedEmojis.unshift({ title: t('componentEmojis:frequentUsed'), data: chunk( frequentEmojis.map(e => e.emoji), - 5 + 4 ), type: 'frequent' }) @@ -125,7 +125,9 @@ const ComponentEmojis: React.FC = ({ { } = emojisState.inputProps[emojisState.targetIndex] const contentFront = value.slice(0, selection.start) - const contentRear = value.slice(selection.end) + const contentRear = value.slice(selection.end || selection.start) const spaceFront = value.length === 0 || /\s/g.test(contentFront.slice(-1)) ? '' : ' ' const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' ' diff --git a/src/screens/Compose/Root/Actions.tsx b/src/screens/Compose/Root/Actions.tsx index 8ac5b960..5d3af943 100644 --- a/src/screens/Compose/Root/Actions.tsx +++ b/src/screens/Compose/Root/Actions.tsx @@ -157,32 +157,19 @@ const ComposeActions: React.FC = () => { return colors.secondary } }, [emojisState.emojis.length, emojisState.targetIndex]) - // useEffect(() => { - // const showSubscription = Keyboard.addListener('keyboardWillShow', () => { - // composeDispatch({ type: 'emoji/shown', payload: false }) - // }) - - // return () => { - // showSubscription.remove() - // } - // }, []) const emojiOnPress = () => { + analytics('compose_actions_emojis_press', { + current: emojisState.targetIndex !== -1 + }) if (emojisState.targetIndex === -1) { Keyboard.dismiss() + const focusedPropsIndex = emojisState.inputProps?.findIndex(props => props.isFocused.current) + if (focusedPropsIndex === -1) return + emojisDispatch({ type: 'target', payload: focusedPropsIndex }) + } else { + emojisDispatch({ type: 'target', payload: -1 }) + return } - const focusedPropsIndex = emojisState.inputProps?.findIndex(props => props.isFocused.current) - if (focusedPropsIndex === -1) return - emojisDispatch({ type: 'target', payload: focusedPropsIndex }) - // Keyboard.dismiss() - // analytics('compose_actions_emojis_press', { - // current: composeState.emoji.active - // }) - // if (composeState.emoji.emojis) { - // composeDispatch({ - // type: 'emoji', - // payload: { ...composeState.emoji, active: !composeState.emoji.active } - // }) - // } } return ( diff --git a/src/screens/Compose/Root/Footer/Emojis.tsx b/src/screens/Compose/Root/Footer/Emojis.tsx deleted file mode 100644 index eb6ee6b2..00000000 --- a/src/screens/Compose/Root/Footer/Emojis.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import haptics from '@components/haptics' -import CustomText from '@components/Text' -import { useAppDispatch } from '@root/store' -import { useAccessibility } from '@utils/accessibility/AccessibilityManager' -import { countInstanceEmoji } from '@utils/slices/instancesSlice' -import { getSettingsStaticEmoji } from '@utils/slices/settingsSlice' -import { StyleConstants } from '@utils/styles/constants' -import { useTheme } from '@utils/styles/ThemeManager' -import React, { RefObject, useCallback, useContext, useEffect } from 'react' -import { useTranslation } from 'react-i18next' -import { - AccessibilityInfo, - findNodeHandle, - Image, - Pressable, - SectionList, - View -} from 'react-native' -import FastImage from 'react-native-fast-image' -import { useSelector } from 'react-redux' -import validUrl from 'valid-url' -import updateText from '../../updateText' -import ComposeContext from '../../utils/createContext' - -export interface Props { - accessibleRefEmojis: RefObject -} - -const ComposeEmojis: React.FC = ({ accessibleRefEmojis }) => { - const { composeState, composeDispatch } = useContext(ComposeContext) - const { reduceMotionEnabled } = useAccessibility() - const { colors } = useTheme() - const { t } = useTranslation() - const dispatch = useAppDispatch() - - const staticEmoji = useSelector(getSettingsStaticEmoji) - - useEffect(() => { - const tagEmojis = findNodeHandle(accessibleRefEmojis.current) - if (composeState.emoji.active) { - tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis) - } - }, [composeState.emoji.active]) - - const listItem = useCallback( - ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => { - return ( - - {item.map(emoji => { - const uri = reduceMotionEnabled ? emoji.static_url : emoji.url - if (validUrl.isHttpsUri(uri)) { - return ( - { - haptics('Light') - updateText({ - composeState, - composeDispatch, - newText: `:${emoji.shortcode}:`, - type: 'emoji' - }) - dispatch(countInstanceEmoji(emoji)) - }} - > - {staticEmoji ? ( - - ) : ( - - )} - - ) - } else { - return null - } - })} - - ) - }, - [composeState] - ) - - return ( - - item[0].shortcode} - renderSectionHeader={({ section: { title } }) => ( - - {title} - - )} - renderItem={listItem} - windowSize={2} - /> - - ) -} - -export default React.memo(ComposeEmojis, () => true)