diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js index 3ee5c08a5..25847cd62 100644 --- a/native/chat/multimedia-message.react.js +++ b/native/chat/multimedia-message.react.js @@ -1,262 +1,262 @@ // @flow import type { LeafRoute, NavigationProp, ParamListBase, } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native'; import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { messageKey } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils'; import type { MediaInfo } from 'lib/types/media-types'; import { ChatContext, type ChatContextType } from '../chat/chat-context'; import { OverlayContext } from '../navigation/overlay-context'; import type { OverlayContextType } from '../navigation/overlay-context'; import { ImageModalRouteName, MultimediaMessageTooltipModalRouteName, VideoPlaybackModalRouteName, } from '../navigation/route-names'; import { fixedTooltipHeight } from '../navigation/tooltip.react'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types'; import { type VerticalBounds } from '../types/layout-types'; import type { LayoutCoordinates } from '../types/layout-types'; import ComposedMessage from './composed-message.react'; import { InnerMultimediaMessage } from './inner-multimedia-message.react'; import { getMediaKey, multimediaMessageSendFailed, } from './multimedia-message-utils'; import { getMessageTooltipKey } from './utils'; type BaseProps = { ...React.ElementConfig, +item: ChatMultimediaMessageInfoItem, +focused: boolean, +toggleFocus: (messageKey: string) => void, +verticalBounds: ?VerticalBounds, }; type Props = { ...BaseProps, +navigation: NavigationProp, +route: LeafRoute<>, +overlayContext: ?OverlayContextType, +chatContext: ?ChatContextType, +canCreateSidebarFromMessage: boolean, +canCreateReactionFromMessage: boolean, }; type State = { +clickable: boolean, }; class MultimediaMessage extends React.PureComponent { state: State = { clickable: true, }; view: ?React.ElementRef; setClickable = (clickable: boolean) => { this.setState({ clickable }); }; onPressMultimedia = ( mediaInfo: MediaInfo, initialCoordinates: LayoutCoordinates, ) => { const { navigation, item, route, verticalBounds } = this.props; navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ name: mediaInfo.type === 'video' ? VideoPlaybackModalRouteName : ImageModalRouteName, key: getMediaKey(item, mediaInfo), params: { presentedFrom: route.key, mediaInfo, item, initialCoordinates, verticalBounds, }, }); }; visibleEntryIDs() { const result = []; if ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ) { result.push('sidebar'); } if (this.props.canCreateReactionFromMessage) { result.push('react'); } if (!this.props.item.messageInfo.creator.isViewer) { result.push('report'); } return result; } onLayout = () => {}; viewRef = (view: ?React.ElementRef) => { this.view = view; }; onLongPress = () => { const visibleEntryIDs = this.visibleEntryIDs(); if (visibleEntryIDs.length === 0) { return; } const { view, props: { verticalBounds }, } = this; if (!view || !verticalBounds) { return; } if (!this.state.clickable) { return; } this.setClickable(false); const { item } = this.props; if (!this.props.focused) { this.props.toggleFocus(messageKey(item.messageInfo)); } this.props.overlayContext?.setScrollBlockingModalStatus('open'); view.measure((x, y, width, height, pageX, pageY) => { const coordinates = { x: pageX, y: pageY, width, height }; const multimediaTop = pageY; const multimediaBottom = pageY + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const belowMargin = 20; const belowSpace = fixedTooltipHeight + belowMargin; const { isViewer } = item.messageInfo.creator; const aboveMargin = isViewer ? 30 : 50; const aboveSpace = fixedTooltipHeight + aboveMargin; let margin = belowMargin; if ( multimediaBottom + belowSpace > boundsBottom && multimediaTop - aboveSpace > boundsTop ) { margin = aboveMargin; } const currentInputBarHeight = this.props.chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0; this.props.navigation.navigate<'MultimediaMessageTooltipModal'>({ name: MultimediaMessageTooltipModalRouteName, params: { presentedFrom: this.props.route.key, item, initialCoordinates: coordinates, verticalBounds, - location: 'fixed', + tooltipLocation: 'fixed', margin, visibleEntryIDs, chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); }); }; canNavigateToSidebar() { return ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ); } render() { const { item, focused, toggleFocus, verticalBounds, navigation, route, overlayContext, chatContext, canCreateSidebarFromMessage, canCreateReactionFromMessage, ...viewProps } = this.props; return ( ); } } const styles = StyleSheet.create({ expand: { flex: 1, }, }); const ConnectedMultimediaMessage: React.ComponentType = React.memo( function ConnectedMultimediaMessage(props: BaseProps) { const navigation = useNavigation(); const route = useRoute(); const overlayContext = React.useContext(OverlayContext); const chatContext = React.useContext(ChatContext); const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage( props.item.threadInfo, props.item.messageInfo, ); const canCreateReactionFromMessage = useCanCreateReactionFromMessage( props.item.threadInfo, props.item.messageInfo, ); return ( ); }, ); export default ConnectedMultimediaMessage; diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js index 89b47a235..ed078a512 100644 --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -1,228 +1,228 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View } from 'react-native'; import { messageKey } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import { useCanCreateSidebarFromMessage } from 'lib/shared/thread-utils'; import { ChatContext } from '../chat/chat-context'; import { KeyboardContext } from '../keyboard/keyboard-state'; import { OverlayContext } from '../navigation/overlay-context'; import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names'; import type { NavigationRoute } from '../navigation/route-names'; import { fixedTooltipHeight } from '../navigation/tooltip.react'; import { useStyles } from '../themes/colors'; import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types'; import type { VerticalBounds } from '../types/layout-types'; import { AnimatedView } from '../types/styles'; import { inlineEngagementCenterStyle } from './chat-constants'; import type { ChatNavigationProp } from './chat.react'; import { InlineEngagement } from './inline-engagement.react'; import { InnerRobotextMessage } from './inner-robotext-message.react'; import { Timestamp } from './timestamp.react'; import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils'; type Props = { ...React.ElementConfig, +item: ChatRobotextMessageInfoItemWithHeight, +navigation: ChatNavigationProp<'MessageList'>, +route: NavigationRoute<'MessageList'>, +focused: boolean, +toggleFocus: (messageKey: string) => void, +verticalBounds: ?VerticalBounds, }; function RobotextMessage(props: Props): React.Node { const { item, navigation, route, focused, toggleFocus, verticalBounds, ...viewProps } = props; let timestamp = null; if (focused || item.startsConversation) { timestamp = ( ); } const styles = useStyles(unboundStyles); let inlineEngagement = null; if (item.threadCreatedFromMessage || item.reactions.size > 0) { inlineEngagement = ( ); } const chatContext = React.useContext(ChatContext); const keyboardState = React.useContext(KeyboardContext); const key = messageKey(item.messageInfo); const onPress = React.useCallback(() => { const didDismiss = keyboardState && keyboardState.dismissKeyboardIfShowing(); if (!didDismiss) { toggleFocus(key); } }, [keyboardState, toggleFocus, key]); const overlayContext = React.useContext(OverlayContext); const viewRef = React.useRef>(); const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage( item.threadInfo, item.messageInfo, ); const canCreateReactionFromMessage = useCanCreateReactionFromMessage( item.threadInfo, item.messageInfo, ); const visibleEntryIDs = React.useMemo(() => { const result = []; if (item.threadCreatedFromMessage || canCreateSidebarFromMessage) { result.push('sidebar'); } if (canCreateReactionFromMessage) { result.push('react'); } return result; }, [ item.threadCreatedFromMessage, canCreateSidebarFromMessage, canCreateReactionFromMessage, ]); const openRobotextTooltipModal = React.useCallback( (x, y, width, height, pageX, pageY) => { invariant( verticalBounds, 'verticalBounds should be present in openRobotextTooltipModal', ); const coordinates = { x: pageX, y: pageY, width, height }; const messageTop = pageY; const messageBottom = pageY + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const belowMargin = 20; const belowSpace = fixedTooltipHeight + belowMargin; const { isViewer } = item.messageInfo.creator; const aboveMargin = isViewer ? 30 : 50; const aboveSpace = fixedTooltipHeight + aboveMargin; let margin = 0; if ( messageBottom + belowSpace > boundsBottom && messageTop - aboveSpace > boundsTop ) { margin = aboveMargin; } const currentInputBarHeight = chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0; props.navigation.navigate<'RobotextMessageTooltipModal'>({ name: RobotextMessageTooltipModalRouteName, params: { presentedFrom: props.route.key, initialCoordinates: coordinates, verticalBounds, visibleEntryIDs, - location: 'fixed', + tooltipLocation: 'fixed', margin, item, chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); }, [ item, props.navigation, props.route.key, verticalBounds, visibleEntryIDs, chatContext, ], ); const onLongPress = React.useCallback(() => { if (keyboardState && keyboardState.dismissKeyboardIfShowing()) { return; } if (visibleEntryIDs.length === 0) { return; } if (!viewRef.current || !verticalBounds) { return; } if (!focused) { toggleFocus(messageKey(item.messageInfo)); } invariant(overlayContext, 'RobotextMessage should have OverlayContext'); overlayContext.setScrollBlockingModalStatus('open'); viewRef.current?.measure(openRobotextTooltipModal); }, [ focused, item, keyboardState, overlayContext, toggleFocus, verticalBounds, viewRef, visibleEntryIDs, openRobotextTooltipModal, ]); const onLayout = React.useCallback(() => {}, []); const contentAndHeaderOpacity = useContentAndHeaderOpacity(item); return ( {timestamp} {inlineEngagement} ); } const unboundStyles = { sidebar: { marginTop: inlineEngagementCenterStyle.topOffset, marginBottom: -inlineEngagementCenterStyle.topOffset, alignSelf: 'center', }, }; export { RobotextMessage }; diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js index 566af94e3..dc59068ad 100644 --- a/native/chat/text-message.react.js +++ b/native/chat/text-message.react.js @@ -1,268 +1,268 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View } from 'react-native'; import { messageKey } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import { threadHasPermission, useCanCreateSidebarFromMessage, } from 'lib/shared/thread-utils'; import { threadPermissions } from 'lib/types/thread-types'; import { ChatContext, type ChatContextType } from '../chat/chat-context'; import { MarkdownContext } from '../markdown/markdown-context'; import { OverlayContext, type OverlayContextType, } from '../navigation/overlay-context'; import type { NavigationRoute } from '../navigation/route-names'; import { TextMessageTooltipModalRouteName } from '../navigation/route-names'; import { fixedTooltipHeight } from '../navigation/tooltip.react'; import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types'; import type { VerticalBounds } from '../types/layout-types'; import type { ChatNavigationProp } from './chat.react'; import ComposedMessage from './composed-message.react'; import { InnerTextMessage } from './inner-text-message.react'; import { MessagePressResponderContext, type MessagePressResponderContextType, } from './message-press-responder-context'; import textMessageSendFailed from './text-message-send-failed'; import { getMessageTooltipKey } from './utils'; type BaseProps = { ...React.ElementConfig, +item: ChatTextMessageInfoItemWithHeight, +navigation: ChatNavigationProp<'MessageList'>, +route: NavigationRoute<'MessageList'>, +focused: boolean, +toggleFocus: (messageKey: string) => void, +verticalBounds: ?VerticalBounds, }; type Props = { ...BaseProps, // Redux state +canCreateSidebarFromMessage: boolean, +canCreateReactionFromMessage: boolean, // withOverlayContext +overlayContext: ?OverlayContextType, // ChatContext +chatContext: ?ChatContextType, // MarkdownContext +isLinkModalActive: boolean, }; class TextMessage extends React.PureComponent { message: ?React.ElementRef; messagePressResponderContext: MessagePressResponderContextType; constructor(props: Props) { super(props); this.messagePressResponderContext = { onPressMessage: this.onPress, }; } render() { const { item, navigation, route, focused, toggleFocus, verticalBounds, overlayContext, chatContext, isLinkModalActive, canCreateSidebarFromMessage, canCreateReactionFromMessage, ...viewProps } = this.props; let swipeOptions = 'none'; const canReply = this.canReply(); const canNavigateToSidebar = this.canNavigateToSidebar(); if (isLinkModalActive) { swipeOptions = 'none'; } else if (canReply && canNavigateToSidebar) { swipeOptions = 'both'; } else if (canReply) { swipeOptions = 'reply'; } else if (canNavigateToSidebar) { swipeOptions = 'sidebar'; } return ( ); } messageRef = (message: ?React.ElementRef) => { this.message = message; }; canReply() { return threadHasPermission( this.props.item.threadInfo, threadPermissions.VOICED, ); } canNavigateToSidebar() { return ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ); } visibleEntryIDs() { const result = ['copy']; if (this.canReply()) { result.push('reply'); } if ( this.props.item.threadCreatedFromMessage || this.props.canCreateSidebarFromMessage ) { result.push('sidebar'); } if (this.props.canCreateReactionFromMessage) { result.push('react'); } if (!this.props.item.messageInfo.creator.isViewer) { result.push('report'); } return result; } onPress = () => { const visibleEntryIDs = this.visibleEntryIDs(); if (visibleEntryIDs.length === 0) { return; } const { message, props: { verticalBounds, isLinkModalActive }, } = this; if (!message || !verticalBounds || isLinkModalActive) { return; } const { focused, toggleFocus, item } = this.props; if (!focused) { toggleFocus(messageKey(item.messageInfo)); } const { overlayContext } = this.props; invariant(overlayContext, 'TextMessage should have OverlayContext'); overlayContext.setScrollBlockingModalStatus('open'); message.measure((x, y, width, height, pageX, pageY) => { const coordinates = { x: pageX, y: pageY, width, height }; const messageTop = pageY; const messageBottom = pageY + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const belowMargin = 20; const belowSpace = fixedTooltipHeight + belowMargin; const { isViewer } = item.messageInfo.creator; const aboveMargin = isViewer ? 30 : 50; const aboveSpace = fixedTooltipHeight + aboveMargin; let margin = belowMargin; if ( messageBottom + belowSpace > boundsBottom && messageTop - aboveSpace > boundsTop ) { margin = aboveMargin; } const currentInputBarHeight = this.props.chatContext?.chatInputBarHeights.get(item.threadInfo.id) ?? 0; this.props.navigation.navigate<'TextMessageTooltipModal'>({ name: TextMessageTooltipModalRouteName, params: { presentedFrom: this.props.route.key, initialCoordinates: coordinates, verticalBounds, visibleEntryIDs, - location: 'fixed', + tooltipLocation: 'fixed', margin, item, chatInputBarHeight: currentInputBarHeight, }, key: getMessageTooltipKey(item), }); }); }; } const ConnectedTextMessage: React.ComponentType = React.memo( function ConnectedTextMessage(props: BaseProps) { const overlayContext = React.useContext(OverlayContext); const chatContext = React.useContext(ChatContext); const markdownContext = React.useContext(MarkdownContext); invariant(markdownContext, 'markdownContext should be set'); const { linkModalActive, clearMarkdownContextData } = markdownContext; const key = messageKey(props.item.messageInfo); // We check if there is an key in the object - if not, we // default to false. The likely situation where the former statement // evaluates to null is when the thread is opened for the first time. const isLinkModalActive = linkModalActive[key] ?? false; const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage( props.item.threadInfo, props.item.messageInfo, ); const canCreateReactionFromMessage = useCanCreateReactionFromMessage( props.item.threadInfo, props.item.messageInfo, ); React.useEffect(() => clearMarkdownContextData, [clearMarkdownContextData]); return ( ); }, ); export { ConnectedTextMessage as TextMessage }; diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js index 5a075a88b..0ca4b038e 100644 --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -1,882 +1,885 @@ // @flow import { useActionSheet, type ShowActionSheetWithOptions, } from '@expo/react-native-action-sheet'; import type { RouteProp } from '@react-navigation/native'; import * as Haptics from 'expo-haptics'; import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform, TouchableOpacity, Keyboard, } from 'react-native'; import Animated, { SlideInDown, SlideOutDown, runOnJS, useSharedValue, type SharedValue, } from 'react-native-reanimated'; import { useDispatch } from 'react-redux'; import { type ServerCallState, serverCallStateSelector, } from 'lib/selectors/server-calls'; import { localIDPrefix } from 'lib/shared/message-utils'; import type { SetState } from 'lib/types/hook-types'; import type { Dispatch } from 'lib/types/redux-types'; import { createBoundServerCallsSelector, useDispatchActionPromise, type DispatchActionPromise, type ActionFunc, type BindServerCall, type DispatchFunctions, } from 'lib/utils/action-utils'; import { ChatContext, type ChatContextType } from '../chat/chat-context'; import CommIcon from '../components/comm-icon.react'; import { SingleLine } from '../components/single-line.react'; import SWMansionIcon from '../components/swmansion-icon.react'; import { type InputState, InputStateContext } from '../input/input-state'; import { type DimensionsInfo } from '../redux/dimensions-updater.react'; import { useSelector } from '../redux/redux-utils'; import { useStyles } from '../themes/colors'; import { type VerticalBounds, type LayoutCoordinates, } from '../types/layout-types'; import type { LayoutEvent } from '../types/react-native'; import { AnimatedView, type ViewStyle, type TextStyle } from '../types/styles'; import type { AppNavigationProp } from './app-navigator.react'; import { OverlayContext, type OverlayContextType } from './overlay-context'; import type { TooltipModalParamList } from './route-names'; /* eslint-disable import/no-named-as-default-member */ const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated; /* eslint-enable import/no-named-as-default-member */ export type TooltipEntry> = { +id: string, +text: string, +onPress: ( route: TooltipRoute, dispatchFunctions: DispatchFunctions, bindServerCall: BindServerCall, inputState: ?InputState, navigation: AppNavigationProp, viewerID: ?string, chatContext: ?ChatContextType, reactionMessageLocalID: ?string, ) => mixed, }; type TooltipItemProps = { +spec: TooltipEntry, +onPress: (entry: TooltipEntry) => void, +containerStyle?: ViewStyle, +labelStyle?: TextStyle, +styles: typeof unboundStyles, }; type TooltipSpec = { +entries: $ReadOnlyArray>, +labelStyle?: ViewStyle, }; export type TooltipParams = { ...CustomProps, +presentedFrom: string, +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, - +location?: 'above' | 'below' | 'fixed', + +tooltipLocation?: 'above' | 'below' | 'fixed', +margin?: number, +visibleEntryIDs?: $ReadOnlyArray, +chatInputBarHeight?: number, }; export type TooltipRoute> = RouteProp< TooltipModalParamList, RouteName, >; export type BaseTooltipProps = { +navigation: AppNavigationProp, +route: TooltipRoute, }; type ButtonProps = { ...Base, +progress: Node, +isOpeningSidebar: boolean, }; type TooltipProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +serverCallState: ServerCallState, +viewerID: ?string, +nextReactionMessageLocalID: number, // Redux dispatch functions +dispatch: Dispatch, +dispatchActionPromise: DispatchActionPromise, // withOverlayContext +overlayContext: ?OverlayContextType, // withInputState +inputState: ?InputState, +chatContext: ?ChatContextType, +showActionSheetWithOptions: ShowActionSheetWithOptions, +actionSheetShown: SharedValue, +hideTooltip: boolean, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, +exitAnimationWorklet: (finished: boolean) => void, +styles: typeof unboundStyles, }; function createTooltip< RouteName: $Keys, BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, >( ButtonComponent: React.ComponentType>, tooltipSpec: TooltipSpec, ): React.ComponentType { class TooltipItem extends React.PureComponent> { render() { let icon; const { styles } = this.props; if (this.props.spec.id === 'copy') { icon = ; } else if (this.props.spec.id === 'reply') { icon = ; } else if (this.props.spec.id === 'report') { icon = ( ); } else if (this.props.spec.id === 'sidebar') { icon = ( ); } else if (this.props.spec.id === 'more') { icon = ( ); } return ( {icon} {this.props.spec.text} ); } onPress = () => { this.props.onPress(this.props.spec); }; } class Tooltip extends React.PureComponent< TooltipProps, > { backdropOpacity: Node; tooltipContainerOpacity: Node; tooltipVerticalAbove: Node; tooltipVerticalBelow: Node; tooltipHorizontalOffset: Value = new Value(0); tooltipHorizontal: Node; tooltipScale: Node; constructor(props: TooltipProps) { super(props); const { overlayContext } = props; invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; this.backdropOpacity = interpolateNode(position, { inputRange: [0, 1], outputRange: [0, 0.7], extrapolate: Extrapolate.CLAMP, }); this.tooltipContainerOpacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); const { margin } = this; this.tooltipVerticalAbove = interpolateNode(position, { inputRange: [0, 1], outputRange: [margin + this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); this.tooltipVerticalBelow = interpolateNode(position, { inputRange: [0, 1], outputRange: [-margin - this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); this.tooltipHorizontal = multiply( add(1, multiply(-1, position)), this.tooltipHorizontalOffset, ); this.tooltipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); } componentDidMount() { Haptics.impactAsync(); } get entries(): $ReadOnlyArray> { const { entries } = tooltipSpec; const { visibleEntryIDs } = this.props.route.params; if (!visibleEntryIDs) { return entries; } const visibleSet = new Set(visibleEntryIDs); const filteredEntries = entries.filter(entry => visibleSet.has(entry.id)); // this is a temporary change and will be reverted once we go from // message liking to message reactions return filteredEntries.map(entry => { if (entry.id !== 'react') { return entry; } const messageLikes = this.props.route.params.item?.reactions.get('👍'); let reactionEntryText = entry.text; if (messageLikes && messageLikes.viewerReacted) { reactionEntryText = 'Unlike'; } return { ...entry, text: reactionEntryText, }; }); } get tooltipHeight(): number { - if (this.props.route.params.location === 'fixed') { + if (this.props.route.params.tooltipLocation === 'fixed') { return fixedTooltipHeight; } else { return tooltipHeight(this.entries.length); } } - get location(): 'above' | 'below' | 'fixed' { + get tooltipLocation(): 'above' | 'below' | 'fixed' { const { params } = this.props.route; - const { location } = params; - if (location) { - return location; + const { tooltipLocation } = params; + if (tooltipLocation) { + return tooltipLocation; } const { initialCoordinates, verticalBounds } = params; const { y, height } = initialCoordinates; const contentTop = y; const contentBottom = y + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const { margin, tooltipHeight: curTooltipHeight } = this; const fullHeight = curTooltipHeight + margin; if ( contentBottom + fullHeight > boundsBottom && contentTop - fullHeight > boundsTop ) { return 'above'; } return 'below'; } get opacityStyle() { return { ...this.props.styles.backdrop, opacity: this.backdropOpacity, }; } get contentContainerStyle() { const { verticalBounds } = this.props.route.params; const fullScreenHeight = this.props.dimensions.height; const top = verticalBounds.y; const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height; return { ...this.props.styles.contentContainer, marginTop: top, marginBottom: bottom, }; } get buttonStyle() { const { params } = this.props.route; const { initialCoordinates, verticalBounds } = params; const { x, y, width, height } = initialCoordinates; return { width: Math.ceil(width), height: Math.ceil(height), marginTop: y - verticalBounds.y, marginLeft: x, }; } get margin() { const customMargin = this.props.route.params.margin; return customMargin !== null && customMargin !== undefined ? customMargin : 20; } get tooltipContainerStyle() { const { dimensions, route } = this.props; const { initialCoordinates, verticalBounds, chatInputBarHeight, } = route.params; const { x, y, width, height } = initialCoordinates; - const { margin, location } = this; + const { margin, tooltipLocation } = this; const style = {}; style.position = 'absolute'; (style.alignItems = 'center'), (style.opacity = this.tooltipContainerOpacity); - if (location !== 'fixed') { + if (tooltipLocation !== 'fixed') { style.transform = [{ translateX: this.tooltipHorizontal }]; } const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { style.left = 0; style.minWidth = width + 2 * extraLeftSpace; } else { style.right = 0; style.minWidth = width + 2 * extraRightSpace; } const inputBarHeight = chatInputBarHeight ?? 0; - if (location === 'fixed') { + if (tooltipLocation === 'fixed') { const padding = 8; style.minWidth = dimensions.width - 16; style.left = 8; style.right = 8; style.bottom = dimensions.height - verticalBounds.height - verticalBounds.y - inputBarHeight + padding; - } else if (location === 'above') { + } else if (tooltipLocation === 'above') { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + margin; style.transform.push({ translateY: this.tooltipVerticalAbove }); } else { style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; style.transform.push({ translateY: this.tooltipVerticalBelow }); } - if (location !== 'fixed') { + if (tooltipLocation !== 'fixed') { style.transform.push({ scale: this.tooltipScale }); } return style; } render() { const { dimensions, serverCallState, viewerID, nextReactionMessageLocalID, dispatch, dispatchActionPromise, overlayContext, inputState, chatContext, showActionSheetWithOptions, actionSheetShown, hideTooltip, setHideTooltip, showEmojiKeyboard, exitAnimationWorklet, styles, ...navAndRouteForFlow } = this.props; const tooltipContainerStyle = [styles.itemContainer]; - if (this.location === 'fixed') { + if (this.tooltipLocation === 'fixed') { tooltipContainerStyle.push(styles.itemContainerFixed); } const { entries } = this; const items = entries.map((entry, index) => { let style; - if (this.location === 'fixed') { + if (this.tooltipLocation === 'fixed') { style = index !== entries.length - 1 ? styles.itemMarginFixed : null; } else { style = index !== entries.length - 1 ? styles.itemMargin : null; } return ( ); }); - if (this.location === 'fixed' && entries.length > 3) { + if (this.tooltipLocation === 'fixed' && entries.length > 3) { items.splice(3); const moreSpec = { id: 'more', text: 'More', onPress: this.onPressMore, }; const moreTooltipItem = ( ); items.push(moreTooltipItem); } let triangleStyle; const { route } = this.props; const { initialCoordinates } = route.params; const { x, width } = initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { triangleStyle = { alignSelf: 'flex-start', left: extraLeftSpace + (width - 20) / 2, }; } else { triangleStyle = { alignSelf: 'flex-end', right: extraRightSpace + (width - 20) / 2, }; } let triangleDown = null; let triangleUp = null; - const { location } = this; - if (location === 'above') { + const { tooltipLocation } = this; + if (tooltipLocation === 'above') { triangleDown = ; - } else if (location === 'below') { + } else if (tooltipLocation === 'below') { triangleUp = ; } invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, isOpeningSidebar, }; const itemsStyles = [styles.items, styles.itemsFixed]; const animationDelay = Platform.OS === 'ios' ? 200 : 500; const enterAnimation = SlideInDown.delay(animationDelay); const exitAnimation = SlideOutDown.withCallback(exitAnimationWorklet); let tooltip = null; - if (this.location !== 'fixed') { + if (this.tooltipLocation !== 'fixed') { tooltip = ( {triangleUp} {items} {triangleDown} ); } else if ( - this.location === 'fixed' && + this.tooltipLocation === 'fixed' && !hideTooltip && !showEmojiKeyboard.value ) { tooltip = ( {items} ); } return ( {tooltip} ); } onPressBackdrop = () => { - if (this.location !== 'fixed') { + if (this.tooltipLocation !== 'fixed') { this.props.navigation.goBackOnce(); } else { this.props.setHideTooltip(true); } }; onPressEntry = (entry: TooltipEntry) => { - if (this.location !== 'fixed' || this.props.actionSheetShown.value) { + if ( + this.tooltipLocation !== 'fixed' || + this.props.actionSheetShown.value + ) { this.props.navigation.goBackOnce(); } else { this.props.setHideTooltip(true); } let reactionMessageLocalID; if (entry.id === 'react') { reactionMessageLocalID = `${localIDPrefix}${this.props.nextReactionMessageLocalID}`; } const dispatchFunctions = { dispatch: this.props.dispatch, dispatchActionPromise: this.props.dispatchActionPromise, }; entry.onPress( this.props.route, dispatchFunctions, this.bindServerCall, this.props.inputState, this.props.navigation, this.props.viewerID, this.props.chatContext, reactionMessageLocalID, ); }; onPressMore = () => { Keyboard.dismiss(); this.props.actionSheetShown.value = true; this.props.setHideTooltip(true); const { entries } = this; const options = entries.map(entry => entry.text); const { destructiveButtonIndex, cancelButtonIndex, } = this.getPlatformSpecificButtonIndices(options); // We're reversing options to populate the action sheet from bottom to // top instead of the default (top to bottom) ordering. options.reverse(); const containerStyle = { paddingBottom: 24, }; const { styles } = this.props; const icons = [ , , , , ]; const onPressAction = (selectedIndex?: number) => { if (selectedIndex === cancelButtonIndex) { this.props.navigation.goBackOnce(); return; } const index = entries.length - (selectedIndex ?? 0); const entry = entries[Platform.OS === 'ios' ? index : index - 1]; this.onPressEntry(entry); }; this.props.showActionSheetWithOptions( { options, cancelButtonIndex, destructiveButtonIndex, containerStyle, icons, }, onPressAction, ); }; getPlatformSpecificButtonIndices = (options: Array) => { let destructiveButtonIndex; if (Platform.OS === 'ios') { const reportIndex = options.findIndex(option => option === 'Report'); destructiveButtonIndex = reportIndex !== -1 ? options.length - reportIndex : undefined; } const cancelButtonIndex = Platform.OS === 'ios' ? 0 : -1; // The "Cancel" action is iOS-specific if (Platform.OS === 'ios') { options.push('Cancel'); } return { destructiveButtonIndex, cancelButtonIndex }; }; bindServerCall = (serverCall: ActionFunc): F => { const { cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, } = this.props.serverCallState; return createBoundServerCallsSelector(serverCall)({ dispatch: this.props.dispatch, cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, }); }; onTooltipContainerLayout = (event: LayoutEvent) => { const { route, dimensions } = this.props; const { x, width } = route.params.initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; const actualWidth = event.nativeEvent.layout.width; if (extraLeftSpace < extraRightSpace) { const minWidth = width + 2 * extraLeftSpace; this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2); } else { const minWidth = width + 2 * extraRightSpace; this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2); } }; } return React.memo(function ConnectedTooltip( props: BaseTooltipPropsType, ) { const { showActionSheetWithOptions } = useActionSheet(); const dimensions = useSelector(state => state.dimensions); const serverCallState = useSelector(serverCallStateSelector); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const nextReactionMessageLocalID = useSelector(state => state.nextLocalID); const dispatch = useDispatch(); const dispatchActionPromise = useDispatchActionPromise(); const overlayContext = React.useContext(OverlayContext); const inputState = React.useContext(InputStateContext); const chatContext = React.useContext(ChatContext); const actionSheetShown = useSharedValue(false); const [hideTooltip, setHideTooltip] = React.useState(false); const showEmojiKeyboard = useSharedValue(false); const goBackCallback = React.useCallback(() => { if (!actionSheetShown.value && !showEmojiKeyboard.value) { props.navigation.goBackOnce(); } }, [actionSheetShown.value, props.navigation, showEmojiKeyboard.value]); const exitAnimationWorklet = React.useCallback( finished => { 'worklet'; if (finished) { runOnJS(goBackCallback)(); } }, [goBackCallback], ); const styles = useStyles(unboundStyles); return ( ); }); } const unboundStyles = { backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, bottomSheetIcon: { color: '#000000', }, container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, icon: { color: 'modalForegroundLabel', }, itemContainer: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', padding: 10, }, itemContainerFixed: { flexDirection: 'column', }, itemMargin: { borderBottomColor: '#404040', borderBottomWidth: 1, }, itemMarginFixed: { borderRightColor: 'panelForegroundBorder', borderRightWidth: 1, }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', }, itemsFixed: { flex: 1, flexDirection: 'row', }, label: { color: 'modalForegroundLabel', fontSize: 14, lineHeight: 17, textAlign: 'center', }, triangleDown: { borderBottomColor: 'transparent', borderBottomWidth: 0, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'tooltipBackground', borderTopWidth: 10, height: 10, top: Platform.OS === 'android' ? -1 : 0, width: 10, }, triangleUp: { borderBottomColor: 'tooltipBackground', borderBottomWidth: 10, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'transparent', borderTopWidth: 0, bottom: Platform.OS === 'android' ? -1 : 0, height: 10, width: 10, }, }; function tooltipHeight(numEntries: number): number { // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding) return 9 + 38 * numEntries; } const fixedTooltipHeight: number = 53; export { createTooltip, fixedTooltipHeight };