Page MenuHomePhorge
Files F32322635

D6455.1765301633.diff
No OneTemporary
Actions

Size
12 KB
Referenced Files
None
Subscribers
None

D6455.1765301633.diff
View Options

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<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
};
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(
+ () => (
+ <InnerMultimediaMessage
+ item={item}
+ verticalBounds={verticalBounds}
+ clickable={false}
+ setClickable={noop}
+ onPress={navigation.goBackOnce}
+ onLongPress={navigation.goBackOnce}
+ />
+ ),
+ [item, navigation.goBackOnce, verticalBounds],
+ );
+
const { messageInfo, threadInfo, reactions } = item;
const nextLocalID = useSelector(state => state.nextLocalID);
const localID = `${localIDPrefix}${nextLocalID}`;
@@ -120,6 +142,7 @@
<ReactionSelectionPopover
reactions={reactions}
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -132,33 +155,47 @@
reactions,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ const reactionInput = emoji.emoji;
+ const viewerReacted = reactions.get(reactionInput)?.viewerReacted;
+ const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
+
+ sendReaction(reactionInput, action);
+ setHideTooltip(true);
+ },
+ [reactions, sendReaction, setHideTooltip],
+ );
+
+ const onCloseEmojiPicker = React.useCallback(() => {
+ showEmojiKeyboard.value = false;
+ navigation.goBackOnce();
+ }, [navigation, showEmojiKeyboard]);
+
return (
- <Animated.View style={messageContainerStyle}>
- <SidebarInputBarHeightMeasurer
- sourceMessage={item}
- onInputBarMeasured={onInputBarMeasured}
- />
- <Animated.View style={headerStyle}>
- <MessageHeader item={item} focused={true} display="modal" />
+ <>
+ <Animated.View style={messageContainerStyle}>
+ <SidebarInputBarHeightMeasurer
+ sourceMessage={item}
+ onInputBarMeasured={onInputBarMeasured}
+ />
+ <Animated.View style={headerStyle}>
+ <MessageHeader item={item} focused={true} display="modal" />
+ </Animated.View>
+ {reactionSelectionPopover}
+ {innerMultimediaMessage}
+ {inlineEngagement}
</Animated.View>
- {reactionSelectionPopover}
- <InnerMultimediaMessage
- item={item}
- verticalBounds={verticalBounds}
- clickable={false}
- setClickable={noop}
- onPress={navigation.goBackOnce}
- onLongPress={navigation.goBackOnce}
+ <EmojiPicker
+ onEmojiSelected={onEmojiSelected}
+ open={showEmojiKeyboard.value}
+ onClose={onCloseEmojiPicker}
/>
- {inlineEngagement}
- </Animated.View>
+ </>
);
}
-const ConnectedMultimediaMessageTooltipButton: React.ComponentType<Props> = React.memo<Props>(
- 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,16 +2,19 @@
import * as React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
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 = {
+reactions: $ReadOnlyMap<string, MessageReactionInfo>,
+setHideTooltip: SetState<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
+reactionSelectionPopoverContainerStyle: ViewStyle,
+sendReaction: (
reaction: string,
@@ -25,6 +28,7 @@
const {
reactions,
setHideTooltip,
+ showEmojiKeyboard,
reactionSelectionPopoverContainerStyle,
sendReaction,
} = props;
@@ -54,6 +58,11 @@
[reactions, sendReaction, setHideTooltip],
);
+ const onPressEmojiKeyboardButton = React.useCallback(() => {
+ showEmojiKeyboard.value = true;
+ setHideTooltip(true);
+ }, [setHideTooltip, showEmojiKeyboard]);
+
const defaultEmojis = React.useMemo(() => {
const defaultEmojisData = ['❤️', '😆', '😮', '😠', '👍'];
@@ -70,7 +79,16 @@
styles.reactionSelectionItemEmoji,
]);
- return <View style={containerStyle}>{defaultEmojis}</View>;
+ return (
+ <View style={containerStyle}>
+ {defaultEmojis}
+ <TouchableOpacity onPress={onPressEmojiKeyboardButton}>
+ <View style={styles.emojiKeyboardButtonContainer}>
+ <SWMansionIcon name="plus" style={styles.icon} size={18} />
+ </View>
+ </TouchableOpacity>
+ </View>
+ );
}
const unboundStyles = {
@@ -95,6 +113,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<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
};
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);
@@ -118,6 +126,7 @@
<ReactionSelectionPopover
reactions={reactions}
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -130,21 +139,49 @@
reactions,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ const reactionInput = emoji.emoji;
+ const viewerReacted = reactions.get(reactionInput)?.viewerReacted;
+ const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
+
+ sendReaction(reactionInput, action);
+ setHideTooltip(true);
+ },
+ [reactions, sendReaction, setHideTooltip],
+ );
+
+ const onCloseEmojiPicker = React.useCallback(() => {
+ showEmojiKeyboard.value = false;
+ navigation.goBackOnce();
+ }, [navigation, showEmojiKeyboard]);
+
+ console.log('showEmojiKeyboard robotext');
+ console.log(showEmojiKeyboard);
+
return (
- <Animated.View style={messageContainerStyle}>
- <SidebarInputBarHeightMeasurer
- sourceMessage={item}
- onInputBarMeasured={onInputBarMeasured}
- />
- <Animated.View style={headerStyle}>
- <Timestamp time={item.messageInfo.time} display="modal" />
+ <>
+ <Animated.View style={messageContainerStyle}>
+ <SidebarInputBarHeightMeasurer
+ sourceMessage={item}
+ onInputBarMeasured={onInputBarMeasured}
+ />
+ <Animated.View style={headerStyle}>
+ <Timestamp time={item.messageInfo.time} display="modal" />
+ </Animated.View>
+ {reactionSelectionPopover}
+ <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
+ {inlineEngagement}
</Animated.View>
- {reactionSelectionPopover}
- <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
- {inlineEngagement}
- </Animated.View>
+ <EmojiPicker
+ onEmojiSelected={onEmojiSelected}
+ open={showEmojiKeyboard.value}
+ onClose={onCloseEmojiPicker}
+ />
+ </>
);
}
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<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
};
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);
@@ -133,6 +141,7 @@
<ReactionSelectionPopover
reactions={reactions}
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -145,8 +154,26 @@
reactions,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ const reactionInput = emoji.emoji;
+ const viewerReacted = reactions.get(reactionInput)?.viewerReacted;
+ const action = viewerReacted ? 'remove_reaction' : 'add_reaction';
+
+ sendReaction(reactionInput, action);
+ setHideTooltip(true);
+ },
+ [reactions, sendReaction, setHideTooltip],
+ );
+
+ const onCloseEmojiPicker = React.useCallback(() => {
+ showEmojiKeyboard.value = false;
+ navigation.goBackOnce();
+ }, [navigation, showEmojiKeyboard]);
+
return (
<MessageListContextProvider threadID={threadID}>
<SidebarInputBarHeightMeasurer
@@ -170,6 +197,11 @@
</MessagePressResponderContext.Provider>
{inlineEngagement}
</Animated.View>
+ <EmojiPicker
+ onEmojiSelected={onEmojiSelected}
+ open={showEmojiKeyboard.value}
+ onClose={onCloseEmojiPicker}
+ />
</MessageListContextProvider>
);
}
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<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
};
type TooltipProps<Base> = {
...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<RouteName>) => {

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 9, 5:33 PM (8 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5856190
Default Alt Text
D6455.1765301633.diff (12 KB)

Event Timeline