Differential D7067 Diff 23735 native/chat/multimedia-message-tooltip-button.react.js

Changeset View

Standalone View

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

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
		import { StyleSheet, View } from 'react-native';
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 { getAvatarForUser } from 'lib/shared/avatar-utils.js';
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 { InnerMultimediaMessage } from './inner-multimedia-message.react.js';		import { InnerMultimediaMessage } from './inner-multimedia-message.react.js';
import { MessageHeader } from './message-header.react.js';		import { MessageHeader } from './message-header.react.js';
import { useSendReaction } from './reaction-message-utils.js';		import { useSendReaction } 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 { useAnimatedMessageTooltipButton } from './utils.js';		import { useAnimatedMessageTooltipButton } from './utils.js';
		import Avatar from '../components/avatar.react.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';

/* eslint-disable import/no-named-as-default-member */		/* eslint-disable import/no-named-as-default-member */
const { Node, Extrapolate, interpolateNode } = Animated;		const { Node, Extrapolate, interpolateNode } = Animated;
/* eslint-enable import/no-named-as-default-member */		/* eslint-enable import/no-named-as-default-member */
▲ Show 20 Lines • Show All 121 Lines • ▼ Show 20 Lines	function MultimediaMessageTooltipButton(props: Props): React.Node {
const onEmojiSelected = React.useCallback(		const onEmojiSelected = React.useCallback(
emoji => {		emoji => {
sendReaction(emoji.emoji);		sendReaction(emoji.emoji);
dismissTooltip();		dismissTooltip();
},		},
[sendReaction, dismissTooltip],		[sendReaction, dismissTooltip],
);		);

		const avatarInfo = React.useMemo(
		() => getAvatarForUser(item.messageInfo.creator),
		[item.messageInfo.creator],
		);

		const avatar = React.useMemo(() => {
		if (item.messageInfo.creator.isViewer) {
		return null;
		}
		return (
		<View style={styles.avatarContainer}>
		<Avatar size="small" avatarInfo={avatarInfo} />
		</View>
		);
		}, [avatarInfo, item.messageInfo.creator.isViewer]);

return (		return (
<>		<>
<Animated.View style={messageContainerStyle}>		<Animated.View style={messageContainerStyle}>
<SidebarInputBarHeightMeasurer		<SidebarInputBarHeightMeasurer
sourceMessage={item}		sourceMessage={item}
onInputBarMeasured={onInputBarMeasured}		onInputBarMeasured={onInputBarMeasured}
/>		/>
<Animated.View style={headerStyle}>		<Animated.View style={headerStyle}>
<MessageHeader item={item} focused={true} display="modal" />		<MessageHeader item={item} focused={true} display="modal" />
</Animated.View>		</Animated.View>
		{avatar}
{reactionSelectionPopover}		{reactionSelectionPopover}
{innerMultimediaMessage}		{innerMultimediaMessage}
{inlineEngagement}		{inlineEngagement}
</Animated.View>		</Animated.View>
<EmojiPicker		<EmojiPicker
onEmojiSelected={onEmojiSelected}		onEmojiSelected={onEmojiSelected}
open={emojiPickerOpen}		open={emojiPickerOpen}
onClose={dismissTooltip}		onClose={dismissTooltip}
/>		/>
</>		</>
);		);
}		}

		const styles = StyleSheet.create({
		avatarContainer: {
		bottom: 0,
		left: -32,
		position: 'absolute',
		},
		});

export default MultimediaMessageTooltipButton;		export default MultimediaMessageTooltipButton;