import { useAccessibility } from '@utils/accessibility/AccessibilityManager' import { StyleConstants } from '@utils/styles/constants' 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, StyleSheet, Text, View } from 'react-native' import FastImage from 'react-native-fast-image' import validUrl from 'valid-url' import EmojisContext from './helpers/EmojisContext' const EmojisList = React.memo( () => { const { reduceMotionEnabled } = useAccessibility() const { t } = useTranslation() const { emojisState, emojisDispatch } = useContext(EmojisContext) const { colors } = useTheme() const listHeader = useCallback( ({ section: { title } }) => ( {title} ), [] ) 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 ( emojisDispatch({ type: 'shortcode', payload: `:${emoji.shortcode}:` }) } > ) } else { return null } })} ) }, [] ) const listRef = useRef(null) useEffect(() => { layoutAnimation() const tagEmojis = findNodeHandle(listRef.current) if (emojisState.active) { tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis) } }, [emojisState.active]) return emojisState.active ? ( item[0].shortcode} renderSectionHeader={listHeader} renderItem={listItem} windowSize={4} /> ) : null }, () => true ) const styles = StyleSheet.create({ group: { position: 'absolute', ...StyleConstants.FontStyle.S }, emojis: { flex: 1, flexWrap: 'wrap', marginTop: StyleConstants.Spacing.M, marginRight: StyleConstants.Spacing.S }, emoji: { width: 32, height: 32, padding: StyleConstants.Spacing.S, margin: StyleConstants.Spacing.S } }) export default EmojisList