Changeset View
Changeset View
Standalone 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 { avatarOffset } from './chat-constants.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: -avatarOffset, | |||||
position: 'absolute', | |||||
}, | |||||
}); | |||||
export default MultimediaMessageTooltipButton; | export default MultimediaMessageTooltipButton; |