mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Fix emoji state
This commit is contained in:
xmflsct
@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { chunk } from 'lodash'
|
||||
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
|
||||
import React, { useContext, useEffect, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
AccessibilityInfo,
|
||||
@ -21,191 +21,188 @@ import FastImage from 'react-native-fast-image'
|
||||
import validUrl from 'valid-url'
|
||||
import EmojisContext from './helpers/EmojisContext'
|
||||
|
||||
const EmojisList = React.memo(
|
||||
() => {
|
||||
const dispatch = useAppDispatch()
|
||||
const { reduceMotionEnabled } = useAccessibility()
|
||||
const { t } = useTranslation()
|
||||
const EmojisList = () => {
|
||||
const dispatch = useAppDispatch()
|
||||
const { reduceMotionEnabled } = useAccessibility()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { emojisState } = useContext(EmojisContext)
|
||||
const { colors, mode } = useTheme()
|
||||
const { emojisState } = useContext(EmojisContext)
|
||||
const { colors, mode } = 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 addEmoji = (shortcode: string) => {
|
||||
if (emojisState.targetIndex === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
const listItem = useCallback(
|
||||
({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginRight: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{item.map(emoji => {
|
||||
const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
|
||||
if (validUrl.isHttpsUri(uri)) {
|
||||
return (
|
||||
<Pressable
|
||||
key={emoji.shortcode}
|
||||
onPress={() => {
|
||||
addEmoji(`:${emoji.shortcode}:`)
|
||||
dispatch(countInstanceEmoji(emoji))
|
||||
}}
|
||||
style={{ padding: StyleConstants.Spacing.S }}
|
||||
>
|
||||
<FastImage
|
||||
accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
|
||||
emoji: emoji.shortcode
|
||||
})}
|
||||
accessibilityHint={t(
|
||||
'screenCompose:content.root.footer.emojis.accessibilityHint'
|
||||
)}
|
||||
source={{ uri }}
|
||||
style={{ width: 32, height: 32 }}
|
||||
/>
|
||||
</Pressable>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
},
|
||||
[emojisState.targetProps]
|
||||
const {
|
||||
value: [value, setValue],
|
||||
selection: [selection, setSelection],
|
||||
ref,
|
||||
maxLength
|
||||
} = emojisState.inputProps[emojisState.targetIndex]
|
||||
|
||||
const contentFront = value.slice(0, selection.start)
|
||||
const contentRear = value.slice(selection.end)
|
||||
|
||||
const spaceFront = /\s/g.test(contentFront.slice(-1)) ? '' : ' '
|
||||
const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' '
|
||||
|
||||
setValue(
|
||||
[contentFront, spaceFront, shortcode, spaceRear, contentRear].join('').slice(0, maxLength)
|
||||
)
|
||||
|
||||
const listRef = useRef<SectionList>(null)
|
||||
useEffect(() => {
|
||||
const tagEmojis = findNodeHandle(listRef.current)
|
||||
if (emojisState.targetProps) {
|
||||
layoutAnimation()
|
||||
tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
|
||||
}
|
||||
}, [emojisState.targetProps])
|
||||
const addedLength = spaceFront.length + shortcode.length + spaceRear.length
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const searchLength = useRef(0)
|
||||
useEffect(() => {
|
||||
if (
|
||||
(search.length === 0 && searchLength.current === 1) ||
|
||||
(search.length === 1 && searchLength.current === 0)
|
||||
) {
|
||||
layoutAnimation()
|
||||
}
|
||||
searchLength.current = search.length
|
||||
}, [search.length, searchLength.current])
|
||||
setSelection({ start: selection.start + addedLength })
|
||||
ref?.current?.setNativeProps({
|
||||
selection: { start: selection.start + addedLength }
|
||||
})
|
||||
}
|
||||
|
||||
return emojisState.targetProps ? (
|
||||
const listItem = ({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginRight: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{item.map(emoji => {
|
||||
const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
|
||||
if (validUrl.isHttpsUri(uri)) {
|
||||
return (
|
||||
<Pressable
|
||||
key={emoji.shortcode}
|
||||
onPress={() => {
|
||||
addEmoji(`:${emoji.shortcode}:`)
|
||||
dispatch(countInstanceEmoji(emoji))
|
||||
}}
|
||||
style={{ padding: StyleConstants.Spacing.S }}
|
||||
>
|
||||
<FastImage
|
||||
accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
|
||||
emoji: emoji.shortcode
|
||||
})}
|
||||
accessibilityHint={t(
|
||||
'screenCompose:content.root.footer.emojis.accessibilityHint'
|
||||
)}
|
||||
source={{ uri }}
|
||||
style={{ width: 32, height: 32 }}
|
||||
/>
|
||||
</Pressable>
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const listRef = useRef<SectionList>(null)
|
||||
useEffect(() => {
|
||||
const tagEmojis = findNodeHandle(listRef.current)
|
||||
if (emojisState.targetIndex !== -1) {
|
||||
layoutAnimation()
|
||||
tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
|
||||
}
|
||||
}, [emojisState.targetIndex])
|
||||
|
||||
const [search, setSearch] = useState('')
|
||||
const searchLength = useRef(0)
|
||||
useEffect(() => {
|
||||
if (
|
||||
(search.length === 0 && searchLength.current === 1) ||
|
||||
(search.length === 1 && searchLength.current === 0)
|
||||
) {
|
||||
layoutAnimation()
|
||||
}
|
||||
searchLength.current = search.length
|
||||
}, [search.length, searchLength.current])
|
||||
|
||||
return emojisState.targetIndex !== -1 ? (
|
||||
<View
|
||||
style={{
|
||||
paddingBottom: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
paddingBottom: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
paddingVertical: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
alignSelf: 'stretch',
|
||||
justifyContent: 'center',
|
||||
paddingRight: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
alignSelf: 'stretch',
|
||||
justifyContent: 'center',
|
||||
paddingRight: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
<Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
||||
</View>
|
||||
<TextInput
|
||||
style={{
|
||||
flex: 1,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryDefault,
|
||||
paddingVertical: StyleConstants.Spacing.S
|
||||
}}
|
||||
onChangeText={setSearch}
|
||||
autoCapitalize='none'
|
||||
clearButtonMode='always'
|
||||
keyboardAppearance={mode}
|
||||
autoCorrect={false}
|
||||
spellCheck={false}
|
||||
/>
|
||||
<Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
||||
</View>
|
||||
<SectionList
|
||||
accessible
|
||||
ref={listRef}
|
||||
horizontal
|
||||
keyboardShouldPersistTaps='always'
|
||||
sections={
|
||||
search.length
|
||||
? [
|
||||
{
|
||||
title: 'Search result',
|
||||
data: chunk(
|
||||
emojisState.emojis
|
||||
.filter(e => e.type !== 'frequent')
|
||||
.flatMap(e =>
|
||||
e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
|
||||
),
|
||||
2
|
||||
)
|
||||
}
|
||||
]
|
||||
: emojisState.emojis
|
||||
}
|
||||
keyExtractor={item => item[0]?.shortcode}
|
||||
renderSectionHeader={({ section: { title } }) => (
|
||||
<CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
|
||||
{title}
|
||||
</CustomText>
|
||||
)}
|
||||
renderItem={listItem}
|
||||
windowSize={4}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
|
||||
<TextInput
|
||||
style={{
|
||||
flex: 1,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border,
|
||||
...StyleConstants.FontStyle.M,
|
||||
color: colors.primaryDefault,
|
||||
paddingVertical: StyleConstants.Spacing.S
|
||||
}}
|
||||
onChangeText={setSearch}
|
||||
autoCapitalize='none'
|
||||
clearButtonMode='always'
|
||||
keyboardAppearance={mode}
|
||||
autoCorrect={false}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</View>
|
||||
) : null
|
||||
},
|
||||
() => true
|
||||
)
|
||||
<SectionList
|
||||
accessible
|
||||
ref={listRef}
|
||||
horizontal
|
||||
keyboardShouldPersistTaps='always'
|
||||
sections={
|
||||
search.length
|
||||
? [
|
||||
{
|
||||
title: 'Search result',
|
||||
data: chunk(
|
||||
emojisState.emojis
|
||||
.filter(e => e.type !== 'frequent')
|
||||
.flatMap(e =>
|
||||
e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
|
||||
),
|
||||
2
|
||||
)
|
||||
}
|
||||
]
|
||||
: emojisState.emojis
|
||||
}
|
||||
keyExtractor={item => item[0]?.shortcode}
|
||||
renderSectionHeader={({ section: { title } }) => (
|
||||
<CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
|
||||
{title}
|
||||
</CustomText>
|
||||
)}
|
||||
renderItem={listItem}
|
||||
windowSize={4}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
) : null
|
||||
}
|
||||
|
||||
export default EmojisList
|
||||
|
||||
Reference in New Issue
Block a user