Differential D7010 Diff 23561 native/chat/robotext-message-tooltip-button.react.js

Changeset View

Standalone View

native/chat/robotext-message-tooltip-button.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import Animated from 'react-native-reanimated';		import Animated from 'react-native-reanimated';
import EmojiPicker from 'rn-emoji-keyboard';		import EmojiPicker from 'rn-emoji-keyboard';

import { localIDPrefix } from 'lib/shared/message-utils.js';		import { localIDPrefix } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';		import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';

import { TooltipInlineEngagement } from './inline-engagement.react.js';		import { TooltipInlineEngagement } from './inline-engagement.react.js';
import { InnerRobotextMessage } from './inner-robotext-message.react.js';		import { InnerRobotextMessage } from './inner-robotext-message.react.js';
import {		import { useSendReaction } from './reaction-message-utils.js';
useSendReaction,
useReactionSelectionPopoverPosition,
} from './reaction-message-utils.js';
import ReactionSelectionPopover from './reaction-selection-popover.react.js';		import ReactionSelectionPopover from './reaction-selection-popover.react.js';
import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';		import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
import { Timestamp } from './timestamp.react.js';		import { Timestamp } from './timestamp.react.js';
import { useAnimatedMessageTooltipButton } from './utils.js';		import { useAnimatedMessageTooltipButton } from './utils.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useTooltipActions } from '../tooltip/tooltip-hooks.js';		import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
import type { TooltipRoute } from '../tooltip/tooltip.react.js';		import type { TooltipRoute } from '../tooltip/tooltip.react.js';
Show All 14 Lines	function RobotextMessageTooltipButton(props: Props): React.Node {
const windowWidth = useSelector(state => state.dimensions.width);		const windowWidth = useSelector(state => state.dimensions.width);

const [sidebarInputBarHeight, setSidebarInputBarHeight] =		const [sidebarInputBarHeight, setSidebarInputBarHeight] =
React.useState<?number>(null);		React.useState<?number>(null);
const onInputBarMeasured = React.useCallback((height: number) => {		const onInputBarMeasured = React.useCallback((height: number) => {
setSidebarInputBarHeight(height);		setSidebarInputBarHeight(height);
}, []);		}, []);

const { item, verticalBounds, initialCoordinates, margin } = route.params;		const { item, verticalBounds, initialCoordinates } = route.params;

const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({		const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
sourceMessage: item,		sourceMessage: item,
initialCoordinates,		initialCoordinates,
messageListVerticalBounds: verticalBounds,		messageListVerticalBounds: verticalBounds,
progress,		progress,
targetInputBarHeight: sidebarInputBarHeight,		targetInputBarHeight: sidebarInputBarHeight,
});		});
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines	function RobotextMessageTooltipButton(props: Props): React.Node {

const sendReaction = useSendReaction(		const sendReaction = useSendReaction(
messageInfo.id,		messageInfo.id,
localID,		localID,
threadInfo.id,		threadInfo.id,
reactions,		reactions,
);		);

const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({
initialCoordinates,
verticalBounds,
margin,
});

const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);		const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
const openEmojiPicker = React.useCallback(() => {		const openEmojiPicker = React.useCallback(() => {
setEmojiPickerOpen(true);		setEmojiPickerOpen(true);
}, []);		}, []);

const reactionSelectionPopover = React.useMemo(() => {		const reactionSelectionPopover = React.useMemo(() => {
if (!canCreateReactionFromMessage) {		if (!canCreateReactionFromMessage) {
return null;		return null;
}		}

return (		return (
<ReactionSelectionPopover		<ReactionSelectionPopover
navigation={navigation}		navigation={navigation}
route={route}		route={route}
openEmojiPicker={openEmojiPicker}		openEmojiPicker={openEmojiPicker}
reactionSelectionPopoverContainerStyle={
reactionSelectionPopoverPosition
}
sendReaction={sendReaction}		sendReaction={sendReaction}
/>		/>
);		);
}, [		}, [
navigation,		navigation,
route,		route,
openEmojiPicker,		openEmojiPicker,
canCreateReactionFromMessage,		canCreateReactionFromMessage,
reactionSelectionPopoverPosition,
sendReaction,		sendReaction,
]);		]);

const tooltipRouteKey = route.key;		const tooltipRouteKey = route.key;
const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);		const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);

const onEmojiSelected = React.useCallback(		const onEmojiSelected = React.useCallback(
emoji => {		emoji => {
Show All 30 Lines