2021-01-01 17:52:14 +01:00
|
|
|
import haptics from '@components/haptics'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2022-04-30 23:47:52 +02:00
|
|
|
import { useAppDispatch } from '@root/store'
|
2021-04-01 00:27:12 +02:00
|
|
|
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
2022-02-13 22:14:16 +01:00
|
|
|
import { countInstanceEmoji } from '@utils/slices/instancesSlice'
|
2022-05-13 00:04:15 +02:00
|
|
|
import { getSettingsStaticEmoji } from '@utils/slices/settingsSlice'
|
2021-01-01 17:52:14 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2021-05-23 23:19:37 +02:00
|
|
|
import React, { RefObject, useCallback, useContext, useEffect } from 'react'
|
2021-04-09 21:43:12 +02:00
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import {
|
|
|
|
AccessibilityInfo,
|
|
|
|
findNodeHandle,
|
2022-05-13 00:04:15 +02:00
|
|
|
Image,
|
2021-04-09 21:43:12 +02:00
|
|
|
Pressable,
|
|
|
|
SectionList,
|
|
|
|
View
|
|
|
|
} from 'react-native'
|
2021-03-27 00:02:32 +01:00
|
|
|
import FastImage from 'react-native-fast-image'
|
2022-05-13 00:04:15 +02:00
|
|
|
import { useSelector } from 'react-redux'
|
2021-04-01 00:27:12 +02:00
|
|
|
import validUrl from 'valid-url'
|
|
|
|
import updateText from '../../updateText'
|
|
|
|
import ComposeContext from '../../utils/createContext'
|
2020-12-03 22:03:06 +01:00
|
|
|
|
2021-04-09 21:43:12 +02:00
|
|
|
export interface Props {
|
|
|
|
accessibleRefEmojis: RefObject<SectionList>
|
|
|
|
}
|
|
|
|
|
|
|
|
const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
|
2021-05-23 23:19:37 +02:00
|
|
|
const { composeState, composeDispatch } = useContext(ComposeContext)
|
|
|
|
const { reduceMotionEnabled } = useAccessibility()
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors } = useTheme()
|
2021-05-23 23:19:37 +02:00
|
|
|
const { t } = useTranslation()
|
2022-04-30 23:47:52 +02:00
|
|
|
const dispatch = useAppDispatch()
|
2020-12-03 22:03:06 +01:00
|
|
|
|
2022-05-13 00:04:15 +02:00
|
|
|
const staticEmoji = useSelector(getSettingsStaticEmoji)
|
|
|
|
|
2021-04-09 21:43:12 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const tagEmojis = findNodeHandle(accessibleRefEmojis.current)
|
|
|
|
if (composeState.emoji.active) {
|
|
|
|
tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
|
|
|
|
}
|
|
|
|
}, [composeState.emoji.active])
|
|
|
|
|
2020-12-10 19:19:56 +01:00
|
|
|
const listHeader = useCallback(
|
|
|
|
({ section: { title } }) => (
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText
|
|
|
|
fontStyle='S'
|
|
|
|
style={{
|
|
|
|
position: 'absolute',
|
|
|
|
left: StyleConstants.Spacing.L,
|
|
|
|
color: colors.secondary
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{title}
|
|
|
|
</CustomText>
|
2020-12-10 19:19:56 +01:00
|
|
|
),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
|
|
|
const listItem = useCallback(
|
2021-05-23 23:19:37 +02:00
|
|
|
({ index, item }: { item: Mastodon.Emoji[]; index: number }) => {
|
|
|
|
return (
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
key={index}
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginLeft: StyleConstants.Spacing.M
|
|
|
|
}}
|
|
|
|
>
|
2021-05-23 23:19:37 +02:00
|
|
|
{item.map(emoji => {
|
|
|
|
const uri = reduceMotionEnabled ? emoji.static_url : emoji.url
|
|
|
|
if (validUrl.isHttpsUri(uri)) {
|
|
|
|
return (
|
|
|
|
<Pressable
|
|
|
|
key={emoji.shortcode}
|
|
|
|
onPress={() => {
|
2022-02-13 22:14:16 +01:00
|
|
|
haptics('Light')
|
2021-05-23 23:19:37 +02:00
|
|
|
updateText({
|
|
|
|
composeState,
|
|
|
|
composeDispatch,
|
|
|
|
newText: `:${emoji.shortcode}:`,
|
|
|
|
type: 'emoji'
|
|
|
|
})
|
2022-02-13 22:14:16 +01:00
|
|
|
dispatch(countInstanceEmoji(emoji))
|
2021-05-23 23:19:37 +02:00
|
|
|
}}
|
|
|
|
>
|
2022-05-13 00:04:15 +02:00
|
|
|
{staticEmoji ? (
|
|
|
|
<Image
|
|
|
|
accessibilityLabel={t(
|
|
|
|
'common:customEmoji.accessibilityLabel',
|
|
|
|
{
|
|
|
|
emoji: emoji.shortcode
|
|
|
|
}
|
|
|
|
)}
|
|
|
|
accessibilityHint={t(
|
|
|
|
'screenCompose:content.root.footer.emojis.accessibilityHint'
|
|
|
|
)}
|
|
|
|
source={{ uri }}
|
|
|
|
style={{
|
2022-06-02 00:28:42 +02:00
|
|
|
width: 36,
|
|
|
|
height: 36,
|
2022-05-13 00:04:15 +02:00
|
|
|
padding: StyleConstants.Spacing.S,
|
|
|
|
margin: StyleConstants.Spacing.S
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<FastImage
|
|
|
|
accessibilityLabel={t(
|
|
|
|
'common:customEmoji.accessibilityLabel',
|
|
|
|
{
|
|
|
|
emoji: emoji.shortcode
|
|
|
|
}
|
|
|
|
)}
|
|
|
|
accessibilityHint={t(
|
|
|
|
'screenCompose:content.root.footer.emojis.accessibilityHint'
|
|
|
|
)}
|
|
|
|
source={{ uri }}
|
|
|
|
style={{
|
2022-06-02 00:28:42 +02:00
|
|
|
width: 36,
|
|
|
|
height: 36,
|
2022-05-13 00:04:15 +02:00
|
|
|
padding: StyleConstants.Spacing.S,
|
|
|
|
margin: StyleConstants.Spacing.S
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
2021-05-23 23:19:37 +02:00
|
|
|
</Pressable>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
})}
|
2020-12-10 19:19:56 +01:00
|
|
|
</View>
|
2021-05-23 23:19:37 +02:00
|
|
|
)
|
|
|
|
},
|
|
|
|
[composeState]
|
2020-12-10 19:19:56 +01:00
|
|
|
)
|
|
|
|
|
2020-12-03 22:03:06 +01:00
|
|
|
return (
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
flexWrap: 'wrap',
|
|
|
|
justifyContent: 'space-around',
|
2022-06-02 00:28:42 +02:00
|
|
|
height: 280
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
|
|
|
>
|
2020-12-03 22:03:06 +01:00
|
|
|
<SectionList
|
2021-04-09 21:43:12 +02:00
|
|
|
accessible
|
|
|
|
ref={accessibleRefEmojis}
|
2020-12-03 22:03:06 +01:00
|
|
|
horizontal
|
2021-03-18 23:32:31 +01:00
|
|
|
keyboardShouldPersistTaps='always'
|
2021-01-22 01:34:20 +01:00
|
|
|
sections={composeState.emoji.emojis || []}
|
2021-05-23 23:19:37 +02:00
|
|
|
keyExtractor={item => item[0].shortcode}
|
2020-12-10 19:19:56 +01:00
|
|
|
renderSectionHeader={listHeader}
|
|
|
|
renderItem={listItem}
|
2021-03-29 23:53:49 +02:00
|
|
|
windowSize={2}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
export default React.memo(ComposeEmojis, () => true)
|