diff --git a/native/chat/multimedia-message-tooltip-modal.react.js b/native/chat/multimedia-message-tooltip-modal.react.js index 43733e76a..532cfb811 100644 --- a/native/chat/multimedia-message-tooltip-modal.react.js +++ b/native/chat/multimedia-message-tooltip-modal.react.js @@ -1,49 +1,43 @@ // @flow import * as React from 'react'; import { createTooltip, type TooltipParams, type BaseTooltipProps, } from '../navigation/tooltip.react'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types'; import type { VerticalBounds } from '../types/layout-types'; import { onPressReport } from './message-report-utils'; import MultimediaMessageTooltipButton from './multimedia-message-tooltip-button.react'; -import { onPressReact } from './reaction-message-utils'; import { navigateToSidebar } from './sidebar-navigation'; export type MultimediaMessageTooltipModalParams = TooltipParams<{ +item: ChatMultimediaMessageInfoItem, +verticalBounds: VerticalBounds, }>; const spec = { entries: [ { id: 'sidebar', text: 'Thread', onPress: navigateToSidebar, }, - { - id: 'react', - text: '👍', - onPress: onPressReact, - }, { id: 'report', text: 'Report', onPress: onPressReport, }, ], }; const MultimediaMessageTooltipModal: React.ComponentType< BaseTooltipProps<'MultimediaMessageTooltipModal'>, > = createTooltip<'MultimediaMessageTooltipModal'>( MultimediaMessageTooltipButton, spec, ); export default MultimediaMessageTooltipModal; diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js index 25847cd62..2dee8ddfb 100644 --- a/native/chat/multimedia-message.react.js +++ b/native/chat/multimedia-message.react.js @@ -1,262 +1,250 @@ // @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, 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/reaction-message-utils.js b/native/chat/reaction-message-utils.js index f863d88ea..b52838935 100644 --- a/native/chat/reaction-message-utils.js +++ b/native/chat/reaction-message-utils.js @@ -1,284 +1,177 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import Alert from 'react-native/Libraries/Alert/Alert'; import { sendReactionMessage, sendReactionMessageActionTypes, } from 'lib/actions/message-actions'; import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; import { messageTypes } from 'lib/types/message-types'; import type { RawReactionMessageInfo } from 'lib/types/messages/reaction'; -import type { BindServerCall, DispatchFunctions } from 'lib/utils/action-utils'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; import { cloneError } from 'lib/utils/errors'; -import type { InputState } from '../input/input-state'; -import type { AppNavigationProp } from '../navigation/app-navigator.react'; -import type { MessageTooltipRouteNames } from '../navigation/route-names'; -import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; import type { LayoutCoordinates, VerticalBounds } from '../types/layout-types'; import type { ViewStyle } from '../types/styles'; -import type { ChatContextType } from './chat-context'; - -function onPressReact( - route: TooltipRoute, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, - inputState: ?InputState, - navigation: AppNavigationProp, - viewerID: ?string, - chatContext: ?ChatContextType, - reactionMessageLocalID: ?string, -) { - const messageID = route.params.item.messageInfo.id; - invariant(messageID, 'messageID should be set'); - - const threadID = route.params.item.threadInfo.id; - invariant(threadID, 'threadID should be set'); - - invariant(viewerID, 'viewerID should be set'); - invariant(reactionMessageLocalID, 'reactionMessageLocalID should be set'); - - const reactionInput = '👍'; - const viewerReacted = route.params.item.reactions.get(reactionInput) - ?.viewerReacted; - - const action = viewerReacted ? 'remove_reaction' : 'add_reaction'; - - sendReaction( - messageID, - reactionMessageLocalID, - threadID, - reactionInput, - action, - dispatchFunctions, - bindServerCall, - viewerID, - ); -} - -function sendReaction( - messageID: string, - localID: string, - threadID: string, - reaction: string, - action: 'add_reaction' | 'remove_reaction', - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, - viewerID: string, -) { - const callSendReactionMessage = bindServerCall(sendReactionMessage); - - const reactionMessagePromise = (async () => { - try { - const result = await callSendReactionMessage({ - threadID, - localID, - targetMessageID: messageID, - reaction, - action, - }); - return { - localID, - serverID: result.id, - threadID, - time: result.time, - interface: result.interface, - }; - } catch (e) { - Alert.alert( - 'Couldn’t send the reaction', - 'Please try again later', - [{ text: 'OK' }], - { - cancelable: true, - }, - ); - - const copy = cloneError(e); - copy.localID = localID; - copy.threadID = threadID; - throw copy; - } - })(); - - const startingPayload: RawReactionMessageInfo = { - type: messageTypes.REACTION, - threadID, - localID, - creatorID: viewerID, - time: Date.now(), - targetMessageID: messageID, - reaction, - action, - }; - - dispatchFunctions.dispatchActionPromise( - sendReactionMessageActionTypes, - reactionMessagePromise, - undefined, - startingPayload, - ); -} function useSendReaction( messageID: ?string, localID: string, threadID: string, reactions: $ReadOnlyMap, ): (reaction: string) => mixed { const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const callSendReactionMessage = useServerCall(sendReactionMessage); const dispatchActionPromise = useDispatchActionPromise(); return React.useCallback( reaction => { if (!messageID) { return; } invariant(viewerID, 'viewerID should be set'); const viewerReacted = reactions.get(reaction)?.viewerReacted; const action = viewerReacted ? 'remove_reaction' : 'add_reaction'; const reactionMessagePromise = (async () => { try { const result = await callSendReactionMessage({ threadID, localID, targetMessageID: messageID, reaction, action, }); return { localID, serverID: result.id, threadID, time: result.time, interface: result.interface, }; } catch (e) { Alert.alert( 'Couldn’t send the reaction', 'Please try again later', [{ text: 'OK' }], { cancelable: true, }, ); const copy = cloneError(e); copy.localID = localID; copy.threadID = threadID; throw copy; } })(); const startingPayload: RawReactionMessageInfo = { type: messageTypes.REACTION, threadID, localID, creatorID: viewerID, time: Date.now(), targetMessageID: messageID, reaction, action, }; dispatchActionPromise( sendReactionMessageActionTypes, reactionMessagePromise, undefined, startingPayload, ); }, [ messageID, viewerID, reactions, threadID, localID, dispatchActionPromise, callSendReactionMessage, ], ); } type ReactionSelectionPopoverPositionArgs = { +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, +margin: ?number, }; function useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, margin, }: ReactionSelectionPopoverPositionArgs): ViewStyle { const reactionSelectionPopoverHeight = 56; const calculatedMargin = margin ?? 16; const windowWidth = useSelector(state => state.dimensions.width); const reactionSelectionPopoverLocation: 'above' | 'below' = (() => { const { y, height } = initialCoordinates; const contentTop = y; const contentBottom = y + height; const boundsTop = verticalBounds.y; const boundsBottom = verticalBounds.y + verticalBounds.height; const fullHeight = reactionSelectionPopoverHeight + calculatedMargin; if ( contentBottom + fullHeight > boundsBottom && contentTop - fullHeight > boundsTop ) { return 'above'; } return 'below'; })(); return React.useMemo(() => { const { x, width, height } = initialCoordinates; const style = {}; style.position = 'absolute'; const extraLeftSpace = x; const extraRightSpace = windowWidth - width - x; if (extraLeftSpace < extraRightSpace) { style.left = 0; } else { style.right = 0; } if (reactionSelectionPopoverLocation === 'above') { style.bottom = height + calculatedMargin / 2; } else { style.top = height + calculatedMargin / 2; } return style; }, [ calculatedMargin, initialCoordinates, reactionSelectionPopoverLocation, windowWidth, ]); } -export { onPressReact, useSendReaction, useReactionSelectionPopoverPosition }; +export { useSendReaction, useReactionSelectionPopoverPosition }; diff --git a/native/chat/robotext-message-tooltip-modal.react.js b/native/chat/robotext-message-tooltip-modal.react.js index e542d678d..27c7a4578 100644 --- a/native/chat/robotext-message-tooltip-modal.react.js +++ b/native/chat/robotext-message-tooltip-modal.react.js @@ -1,41 +1,35 @@ // @flow import * as React from 'react'; import { createTooltip, type TooltipParams, type BaseTooltipProps, } from '../navigation/tooltip.react'; import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types'; -import { onPressReact } from './reaction-message-utils'; import RobotextMessageTooltipButton from './robotext-message-tooltip-button.react'; import { navigateToSidebar } from './sidebar-navigation'; export type RobotextMessageTooltipModalParams = TooltipParams<{ +item: ChatRobotextMessageInfoItemWithHeight, }>; const spec = { entries: [ { id: 'sidebar', text: 'Thread', onPress: navigateToSidebar, }, - { - id: 'react', - text: '👍', - onPress: onPressReact, - }, ], }; const RobotextMessageTooltipModal: React.ComponentType< BaseTooltipProps<'RobotextMessageTooltipModal'>, > = createTooltip<'RobotextMessageTooltipModal'>( RobotextMessageTooltipButton, spec, ); export default RobotextMessageTooltipModal; diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js index ed078a512..98226f985 100644 --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -1,228 +1,214 @@ // @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, - ]); + }, [item.threadCreatedFromMessage, canCreateSidebarFromMessage]); 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, 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-tooltip-modal.react.js b/native/chat/text-message-tooltip-modal.react.js index 25c3f0c82..1787c2164 100644 --- a/native/chat/text-message-tooltip-modal.react.js +++ b/native/chat/text-message-tooltip-modal.react.js @@ -1,74 +1,68 @@ // @flow import Clipboard from '@react-native-clipboard/clipboard'; import invariant from 'invariant'; import * as React from 'react'; import { createMessageReply } from 'lib/shared/message-utils'; import type { DispatchFunctions, BindServerCall } from 'lib/utils/action-utils'; import type { InputState } from '../input/input-state'; import { displayActionResultModal } from '../navigation/action-result-modal'; import { createTooltip, type TooltipParams, type TooltipRoute, type BaseTooltipProps, } from '../navigation/tooltip.react'; import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types'; import { onPressReport } from './message-report-utils'; -import { onPressReact } from './reaction-message-utils'; import { navigateToSidebar } from './sidebar-navigation'; import TextMessageTooltipButton from './text-message-tooltip-button.react'; export type TextMessageTooltipModalParams = TooltipParams<{ +item: ChatTextMessageInfoItemWithHeight, }>; const confirmCopy = () => displayActionResultModal('copied!'); function onPressCopy(route: TooltipRoute<'TextMessageTooltipModal'>) { Clipboard.setString(route.params.item.messageInfo.text); setTimeout(confirmCopy); } function onPressReply( route: TooltipRoute<'TextMessageTooltipModal'>, dispatchFunctions: DispatchFunctions, bindServerCall: BindServerCall, inputState: ?InputState, ) { invariant( inputState, 'inputState should be set in TextMessageTooltipModal.onPressReply', ); inputState.addReply(createMessageReply(route.params.item.messageInfo.text)); } const spec = { entries: [ { id: 'reply', text: 'Reply', onPress: onPressReply }, { id: 'sidebar', text: 'Thread', onPress: navigateToSidebar, }, { id: 'copy', text: 'Copy', onPress: onPressCopy }, - { - id: 'react', - text: '👍', - onPress: onPressReact, - }, { id: 'report', text: 'Report', onPress: onPressReport, }, ], }; const TextMessageTooltipModal: React.ComponentType< BaseTooltipProps<'TextMessageTooltipModal'>, > = createTooltip<'TextMessageTooltipModal'>(TextMessageTooltipButton, spec); export default TextMessageTooltipModal; diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js index dc59068ad..dccf8f867 100644 --- a/native/chat/text-message.react.js +++ b/native/chat/text-message.react.js @@ -1,268 +1,256 @@ // @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, 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 ffe66d927..2ce484c36 100644 --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -1,890 +1,863 @@ // @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, +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, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, }; 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, - }; - }); + return entries.filter(entry => visibleSet.has(entry.id)); } get tooltipHeight(): number { if (this.props.route.params.tooltipLocation === 'fixed') { return fixedTooltipHeight; } else { return tooltipHeight(this.entries.length); } } get tooltipLocation(): 'above' | 'below' | 'fixed' { const { params } = this.props.route; 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, tooltipLocation } = this; const style = {}; style.position = 'absolute'; (style.alignItems = 'center'), (style.opacity = this.tooltipContainerOpacity); 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 (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 (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 (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.tooltipLocation === 'fixed') { tooltipContainerStyle.push(styles.itemContainerFixed); } const { entries } = this; const items = entries.map((entry, index) => { let style; if (this.tooltipLocation === 'fixed') { style = index !== entries.length - 1 ? styles.itemMarginFixed : null; } else { style = index !== entries.length - 1 ? styles.itemMargin : null; } return ( ); }); 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 { tooltipLocation } = this; if (tooltipLocation === 'above') { triangleDown = ; } 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, setHideTooltip, showEmojiKeyboard, }; 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.tooltipLocation !== 'fixed') { tooltip = ( {triangleUp} {items} {triangleDown} ); } else if ( this.tooltipLocation === 'fixed' && !hideTooltip && !showEmojiKeyboard.value ) { tooltip = ( {items} ); } return ( {tooltip} ); } onPressBackdrop = () => { if (this.tooltipLocation !== 'fixed') { this.props.navigation.goBackOnce(); } else { this.props.setHideTooltip(true); } this.props.showEmojiKeyboard.value = false; }; onPressEntry = (entry: TooltipEntry) => { 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 };