Partially fixed #113

2025-06-05 22:19:13 +02:00 · 2021-05-09 21:59:03 +02:00
parent 006edd5c87
commit 0b659913dc
62 changed files with 2308 additions and 703 deletions
--- a/src/components/Emojis/List.tsx
+++ b/src/components/Emojis/List.tsx
@ -0,0 +1,122 @@
+import { EmojisContext } from '@components/Emojis'
+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'
+
+const EmojisList = React.memo(
+  () => {
+    const { reduceMotionEnabled } = useAccessibility()
+    const { t } = useTranslation()
+
+    const { emojisState, emojisDispatch } = useContext(EmojisContext)
+    const { theme } = useTheme()
+
+    const listHeader = useCallback(
+      ({ section: { title } }) => (
+        <Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
+      ),
+      []
+    )
+
+    const listItem = useCallback(
+      ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
+        return (
+          <View key={index} style={styles.emojis}>
+            {item.map(emoji => {
+              const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
+              if (validUrl.isHttpsUri(uri)) {
+                return (
+                  <Pressable
+                    key={emoji.shortcode}
+                    onPress={() =>
+                      emojisDispatch({
+                        type: 'shortcode',
+                        payload: `:${emoji.shortcode}:`
+                      })
+                    }
+                  >
+                    <FastImage
+                      accessibilityLabel={t(
+                        'common:customEmoji.accessibilityLabel',
+                        {
+                          emoji: emoji.shortcode
+                        }
+                      )}
+                      accessibilityHint={t(
+                        'screenCompose:content.root.footer.emojis.accessibilityHint'
+                      )}
+                      source={{ uri }}
+                      style={styles.emoji}
+                    />
+                  </Pressable>
+                )
+              } else {
+                return null
+              }
+            })}
+          </View>
+        )
+      },
+      []
+    )
+
+    const listRef = useRef<SectionList>(null)
+    useEffect(() => {
+      layoutAnimation()
+      const tagEmojis = findNodeHandle(listRef.current)
+      if (emojisState.active) {
+        tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
+      }
+    }, [emojisState.active])
+
+    return emojisState.active ? (
+      <SectionList
+        accessible
+        ref={listRef}
+        horizontal
+        keyboardShouldPersistTaps='always'
+        sections={emojisState.emojis}
+        keyExtractor={item => 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