tooot/src/components/Emojis.tsx

149 lines
3.9 KiB
TypeScript
Raw Normal View History

2021-05-09 21:59:03 +02:00
import EmojisButton from '@components/Emojis/Button'
import EmojisList from '@components/Emojis/List'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { useEmojisQuery } from '@utils/queryHooks/emojis'
2022-02-13 22:14:16 +01:00
import { getInstanceFrequentEmojis } from '@utils/slices/instancesSlice'
2021-05-09 21:59:03 +02:00
import { chunk, forEach, groupBy, sortBy } from 'lodash'
import React, {
Dispatch,
MutableRefObject,
SetStateAction,
useCallback,
useEffect,
useReducer
} from 'react'
2022-02-13 22:14:16 +01:00
import { useTranslation } from 'react-i18next'
2021-05-09 21:59:03 +02:00
import FastImage from 'react-native-fast-image'
2022-02-13 22:14:16 +01:00
import { useSelector } from 'react-redux'
2021-05-23 23:19:37 +02:00
import EmojisContext, { emojisReducer } from './Emojis/helpers/EmojisContext'
2021-05-09 21:59:03 +02:00
const prefetchEmojis = (
2022-02-13 22:14:16 +01:00
sortedEmojis: {
title: string
data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
}[],
2021-05-09 21:59:03 +02:00
reduceMotionEnabled: boolean
) => {
const prefetches: { uri: string }[] = []
let requestedIndex = 0
sortedEmojis.forEach(sorted => {
sorted.data.forEach(emojis =>
emojis.forEach(emoji => {
if (requestedIndex > 40) {
return
}
prefetches.push({
uri: reduceMotionEnabled ? emoji.static_url : emoji.url
})
requestedIndex++
})
)
})
try {
FastImage.preload(prefetches)
} catch {}
}
export interface Props {
enabled?: boolean
value?: string
setValue:
| Dispatch<SetStateAction<string | undefined>>
| Dispatch<SetStateAction<string>>
selectionRange: MutableRefObject<{
start: number
end: number
}>
2021-05-11 21:38:48 +02:00
maxLength?: number
2021-05-09 21:59:03 +02:00
}
const ComponentEmojis: React.FC<Props> = ({
enabled = false,
value,
setValue,
selectionRange,
2021-05-11 21:38:48 +02:00
maxLength,
2021-05-09 21:59:03 +02:00
children
}) => {
const { reduceMotionEnabled } = useAccessibility()
const [emojisState, emojisDispatch] = useReducer(emojisReducer, {
enabled,
active: false,
emojis: [],
shortcode: null
})
useEffect(() => {
if (emojisState.shortcode) {
addEmoji(emojisState.shortcode)
emojisDispatch({
type: 'shortcode',
payload: null
})
}
}, [emojisState.shortcode])
const addEmoji = useCallback(
(emojiShortcode: string) => {
if (value?.length) {
const contentFront = value.slice(0, selectionRange.current?.start)
const contentRear = value.slice(selectionRange.current?.end)
const whiteSpaceRear = /\s/g.test(contentRear.slice(-1))
const newTextWithSpace = ` ${emojiShortcode}${
whiteSpaceRear ? '' : ' '
}`
2021-05-11 21:38:48 +02:00
setValue(
[contentFront, newTextWithSpace, contentRear]
.join('')
.slice(0, maxLength)
)
2021-05-09 21:59:03 +02:00
} else {
2021-05-11 21:38:48 +02:00
setValue(`${emojiShortcode} `.slice(0, maxLength))
2021-05-09 21:59:03 +02:00
}
},
[value, selectionRange.current?.start, selectionRange.current?.end]
)
2022-02-13 22:14:16 +01:00
const { t } = useTranslation()
2021-05-09 21:59:03 +02:00
const { data } = useEmojisQuery({ options: { enabled } })
2022-02-13 22:14:16 +01:00
const frequentEmojis = useSelector(getInstanceFrequentEmojis, () => true)
2021-05-09 21:59:03 +02:00
useEffect(() => {
if (data && data.length) {
2022-02-13 22:14:16 +01:00
let sortedEmojis: {
title: string
data: Pick<Mastodon.Emoji, 'shortcode' | 'url' | 'static_url'>[][]
}[] = []
2021-05-09 21:59:03 +02:00
forEach(
groupBy(sortBy(data, ['category', 'shortcode']), 'category'),
(value, key) => sortedEmojis.push({ title: key, data: chunk(value, 5) })
)
2022-02-13 22:14:16 +01:00
if (frequentEmojis.length) {
sortedEmojis.unshift({
title: t('componentEmojis:frequentUsed'),
data: chunk(
frequentEmojis.map(e => e.emoji),
5
)
})
}
2021-05-09 21:59:03 +02:00
emojisDispatch({
type: 'load',
payload: sortedEmojis
})
prefetchEmojis(sortedEmojis, reduceMotionEnabled)
}
}, [data, reduceMotionEnabled])
return (
<EmojisContext.Provider
value={{ emojisState, emojisDispatch }}
children={children}
/>
)
}
2021-05-12 15:40:55 +02:00
export { ComponentEmojis, EmojisButton, EmojisList }