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 @@ -1,7 +1,8 @@ // @flow import * as React from 'react'; -import Animated from 'react-native-reanimated'; +import Animated, { type SharedValue } from 'react-native-reanimated'; +import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; @@ -33,9 +34,16 @@ +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, + +showEmojiKeyboard: SharedValue, }; function MultimediaMessageTooltipButton(props: Props): React.Node { - const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const { + navigation, + progress, + isOpeningSidebar, + setHideTooltip, + showEmojiKeyboard, + } = props; const windowWidth = useSelector(state => state.dimensions.width); @@ -94,6 +102,20 @@ ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + const innerMultimediaMessage = React.useMemo( + () => ( + + ), + [item, navigation.goBackOnce, verticalBounds], + ); + const { messageInfo, threadInfo, reactions } = item; const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; @@ -124,6 +146,7 @@ return ( { + sendReaction(emoji.emoji); + setHideTooltip(true); + }, + [sendReaction, setHideTooltip], + ); + + const onCloseEmojiPicker = React.useCallback(() => { + showEmojiKeyboard.value = false; + navigation.goBackOnce(); + }, [navigation, showEmojiKeyboard]); + return ( - - - - + <> + + + + + + {reactionSelectionPopover} + {innerMultimediaMessage} + {inlineEngagement} - {reactionSelectionPopover} - - {inlineEngagement} - + ); } -const ConnectedMultimediaMessageTooltipButton: React.ComponentType = React.memo( - MultimediaMessageTooltipButton, -); - -export default ConnectedMultimediaMessageTooltipButton; +export default MultimediaMessageTooltipButton; diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js --- a/native/chat/reaction-selection-popover.react.js +++ b/native/chat/reaction-selection-popover.react.js @@ -2,14 +2,17 @@ import * as React from 'react'; import { View, TouchableOpacity, Text } from 'react-native'; +import type { SharedValue } from 'react-native-reanimated'; import type { SetState } from 'lib/types/hook-types'; +import SWMansionIcon from '../components/swmansion-icon.react'; import { useStyles } from '../themes/colors'; import type { ViewStyle } from '../types/styles'; type ReactionSelectionPopoverProps = { +setHideTooltip: SetState, + +showEmojiKeyboard: SharedValue, +reactionSelectionPopoverContainerStyle: ViewStyle, +sendReaction: (reaction: string) => mixed, }; @@ -19,6 +22,7 @@ ): React.Node { const { setHideTooltip, + showEmojiKeyboard, reactionSelectionPopoverContainerStyle, sendReaction, } = props; @@ -44,6 +48,11 @@ [sendReaction, setHideTooltip], ); + const onPressEmojiKeyboardButton = React.useCallback(() => { + showEmojiKeyboard.value = true; + setHideTooltip(true); + }, [setHideTooltip, showEmojiKeyboard]); + const defaultEmojis = React.useMemo(() => { const defaultEmojisData = ['❤️', '😆', '😮', '😠', '👍']; @@ -60,7 +69,16 @@ styles.reactionSelectionItemEmoji, ]); - return {defaultEmojis}; + return ( + + {defaultEmojis} + + + + + + + ); } const unboundStyles = { @@ -85,6 +103,18 @@ reactionSelectionItemEmoji: { fontSize: 18, }, + emojiKeyboardButtonContainer: { + backgroundColor: 'reactionSelectionPopoverItemBackground', + justifyContent: 'center', + alignItems: 'center', + padding: 8, + borderRadius: 20, + width: 40, + height: 40, + }, + icon: { + color: 'modalForegroundLabel', + }, }; export default ReactionSelectionPopover; 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 @@ -1,7 +1,8 @@ // @flow import * as React from 'react'; -import Animated from 'react-native-reanimated'; +import Animated, { type SharedValue } from 'react-native-reanimated'; +import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; @@ -31,9 +32,16 @@ +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, + +showEmojiKeyboard: SharedValue, }; function RobotextMessageTooltipButton(props: Props): React.Node { - const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const { + navigation, + progress, + isOpeningSidebar, + setHideTooltip, + showEmojiKeyboard, + } = props; const windowWidth = useSelector(state => state.dimensions.width); @@ -122,6 +130,7 @@ return ( { + sendReaction(emoji.emoji); + setHideTooltip(true); + }, + [sendReaction, setHideTooltip], + ); + + const onCloseEmojiPicker = React.useCallback(() => { + showEmojiKeyboard.value = false; + navigation.goBackOnce(); + }, [navigation, showEmojiKeyboard]); + return ( - - - - + <> + + + + + + {reactionSelectionPopover} + + {inlineEngagement} - {reactionSelectionPopover} - - {inlineEngagement} - + + ); } 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 @@ -1,7 +1,8 @@ // @flow import * as React from 'react'; -import Animated from 'react-native-reanimated'; +import Animated, { type SharedValue } from 'react-native-reanimated'; +import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; @@ -33,9 +34,16 @@ +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, + +showEmojiKeyboard: SharedValue, }; function TextMessageTooltipButton(props: Props): React.Node { - const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const { + navigation, + progress, + isOpeningSidebar, + setHideTooltip, + showEmojiKeyboard, + } = props; const windowWidth = useSelector(state => state.dimensions.width); @@ -137,6 +145,7 @@ return ( { + sendReaction(emoji.emoji); + setHideTooltip(true); + }, + [sendReaction, setHideTooltip], + ); + + const onCloseEmojiPicker = React.useCallback(() => { + showEmojiKeyboard.value = false; + navigation.goBackOnce(); + }, [navigation, showEmojiKeyboard]); + return ( {inlineEngagement} + ); } diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -112,6 +112,7 @@ +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, + +showEmojiKeyboard: SharedValue, }; type TooltipProps = { ...Base, @@ -512,6 +513,7 @@ progress: position, isOpeningSidebar, setHideTooltip, + showEmojiKeyboard, }; const itemsStyles = [styles.items, styles.itemsFixed]; @@ -571,6 +573,7 @@ } else { this.props.setHideTooltip(true); } + this.props.showEmojiKeyboard.value = false; }; onPressEntry = (entry: TooltipEntry) => {