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)