diff --git a/native/avatars/emoji-avatar-creation.react.js b/native/avatars/emoji-avatar-creation.react.js --- a/native/avatars/emoji-avatar-creation.react.js +++ b/native/avatars/emoji-avatar-creation.react.js @@ -90,6 +90,11 @@ ); }, [saveAvatarCallLoading, styles.loadingContainer]); + const alreadySelectedEmojis = React.useMemo( + () => [pendingEmoji], + [pendingEmoji], + ); + return ( @@ -132,6 +137,8 @@ onEmojiSelected={onEmojiSelected} emojiKeyboardOpen={emojiKeyboardOpen} onEmojiKeyboardClose={onEmojiKeyboardClose} + selectMultipleEmojis={false} + alreadySelectedEmojis={alreadySelectedEmojis} /> ); diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -152,6 +152,8 @@ [sendReaction, dismissTooltip], ); + const alreadySelectedEmojis = React.useMemo(() => [], []); + return ( <> @@ -171,6 +173,7 @@ onEmojiSelected={onEmojiSelected} emojiKeyboardOpen={emojiPickerOpen} onEmojiKeyboardClose={dismissTooltip} + alreadySelectedEmojis={alreadySelectedEmojis} /> ); diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -135,6 +135,8 @@ [sendReaction, dismissTooltip], ); + const alreadySelectedEmojis = React.useMemo(() => [], []); + return ( <> @@ -153,6 +155,7 @@ onEmojiSelected={onEmojiSelected} emojiKeyboardOpen={emojiPickerOpen} onEmojiKeyboardClose={dismissTooltip} + alreadySelectedEmojis={alreadySelectedEmojis} /> ); diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -149,6 +149,8 @@ [sendReaction, dismissTooltip], ); + const alreadySelectedEmojis = React.useMemo(() => [], []); + return ( ); diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js --- a/native/components/emoji-keyboard.react.js +++ b/native/components/emoji-keyboard.react.js @@ -1,8 +1,12 @@ // @flow import AsyncStorage from '@react-native-async-storage/async-storage'; +import _flatMap from 'lodash/fp/flatMap.js'; +import _flow from 'lodash/fp/flow.js'; +import _keyBy from 'lodash/fp/keyBy.js'; import * as React from 'react'; import EmojiPicker, { useRecentPicksPersistence } from 'rn-emoji-keyboard'; +import emojisData from 'rn-emoji-keyboard/src/assets/emojis.json'; const STORAGE_KEY = 'EMOJI_KEYBOARD_RECENT'; @@ -36,6 +40,7 @@ initialization: initializationCallback, onStateChange: onStateChangeCallback, }; +const keyedEmojiData = _flow(_flatMap('data'), _keyBy('emoji'))(emojisData); export type EmojiSelection = { +emoji: string, @@ -50,22 +55,45 @@ +onEmojiSelected: (emoji: EmojiSelection) => mixed, +emojiKeyboardOpen: boolean, +onEmojiKeyboardClose: () => mixed, + +selectMultipleEmojis?: boolean, + +alreadySelectedEmojis: $ReadOnlyArray, }; function EmojiKeyboard(props: Props): React.Node { - const { onEmojiSelected, emojiKeyboardOpen, onEmojiKeyboardClose } = props; + const { + onEmojiSelected, + emojiKeyboardOpen, + onEmojiKeyboardClose, + selectMultipleEmojis, + alreadySelectedEmojis, + } = props; + + const [currentlySelected, setCurrentlySelected] = React.useState< + $ReadOnlyArray, + >(() => alreadySelectedEmojis.map(emoji => keyedEmojiData[emoji].name)); + + const handleOnEmojiSelected = React.useCallback( + (emoji: EmojiSelection) => { + if (!selectMultipleEmojis) { + setCurrentlySelected([emoji.name]); + } + onEmojiSelected(emoji); + }, + [onEmojiSelected, setCurrentlySelected, selectMultipleEmojis], + ); useRecentPicksPersistence(useRecentPicksPersistenceArgs); return ( ); }