Page MenuHomePhabricator
Files F3256339

D6455.diff
No OneTemporary
Actions

D6455.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}`;
@@ -124,6 +146,7 @@
return (
<ReactionSelectionPopover
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -135,33 +158,43 @@
reactionSelectionPopoverPosition,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ sendReaction(emoji.emoji);
+ setHideTooltip(true);
+ },
+ [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,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<boolean>,
+ +showEmojiKeyboard: SharedValue<boolean>,
+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 <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 = {
@@ -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<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);
@@ -122,6 +130,7 @@
return (
<ReactionSelectionPopover
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -133,21 +142,42 @@
reactionSelectionPopoverPosition,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ sendReaction(emoji.emoji);
+ setHideTooltip(true);
+ },
+ [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}>
- <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);
@@ -137,6 +145,7 @@
return (
<ReactionSelectionPopover
setHideTooltip={setHideTooltip}
+ showEmojiKeyboard={showEmojiKeyboard}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
@@ -148,8 +157,22 @@
reactionSelectionPopoverPosition,
sendReaction,
setHideTooltip,
+ showEmojiKeyboard,
]);
+ const onEmojiSelected = React.useCallback(
+ emoji => {
+ sendReaction(emoji.emoji);
+ setHideTooltip(true);
+ },
+ [sendReaction, setHideTooltip],
+ );
+
+ const onCloseEmojiPicker = React.useCallback(() => {
+ showEmojiKeyboard.value = false;
+ navigation.goBackOnce();
+ }, [navigation, showEmojiKeyboard]);
+
return (
<MessageListContextProvider threadID={threadID}>
<SidebarInputBarHeightMeasurer
@@ -173,6 +196,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
Sat, Nov 16, 8:46 PM (20 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2503194
Default Alt Text
D6455.diff (11 KB)

Event Timeline