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 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 { 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 { | 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 { 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 15 Lines | function MultimediaMessageTooltipButton(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 55 Lines • ▼ Show 20 Lines | function MultimediaMessageTooltipButton(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 |