diff --git a/native/chat/message-report-utils.js b/native/chat/message-report-utils.js index 11a7a925c..32203ecf2 100644 --- a/native/chat/message-report-utils.js +++ b/native/chat/message-report-utils.js @@ -1,68 +1,61 @@ // @flow -import Alert from 'react-native/Libraries/Alert/Alert'; +import * as React from 'react'; +import { Alert } from 'react-native'; import { sendMessageReport, sendMessageReportActionTypes, } from 'lib/actions/message-report-actions'; -import type { BindServerCall, DispatchFunctions } from 'lib/utils/action-utils'; +import { + useServerCall, + useDispatchActionPromise, +} from 'lib/utils/action-utils'; import { displayActionResultModal } from '../navigation/action-result-modal'; -import type { TooltipRoute } from '../navigation/tooltip.react'; +import type { TooltipRoute } from '../tooltip/tooltip.react'; const confirmReport = () => displayActionResultModal('reported to admin'); -function onPressReport( +function useOnPressReport( route: | TooltipRoute<'TextMessageTooltipModal'> | TooltipRoute<'MultimediaMessageTooltipModal'>, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, -) { +): () => mixed { const messageID = route.params.item.messageInfo.id; - if (!messageID) { - Alert.alert( - 'Couldn’t send the report', - 'Uhh... try again?', - [{ text: 'OK' }], - { - cancelable: false, - }, - ); - return; - } - reportMessage(messageID, dispatchFunctions, bindServerCall); -} - -function reportMessage( - messageID: string, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, -) { - const callSendMessageReport = bindServerCall(sendMessageReport); - const messageReportPromise = (async () => { - try { - const result = await callSendMessageReport({ messageID }); - confirmReport(); - return result; - } catch (e) { + const dispatchActionPromise = useDispatchActionPromise(); + const callSendMessageReport = useServerCall(sendMessageReport); + return React.useCallback(() => { + if (!messageID) { Alert.alert( 'Couldn’t send the report', 'Uhh... try again?', [{ text: 'OK' }], { cancelable: false, }, ); - throw e; + return; } - })(); - - dispatchFunctions.dispatchActionPromise( - sendMessageReportActionTypes, - messageReportPromise, - ); + const messageReportPromise = (async () => { + try { + const result = await callSendMessageReport({ messageID }); + confirmReport(); + return result; + } catch (e) { + Alert.alert( + 'Couldn’t send the report', + 'Uhh... try again?', + [{ text: 'OK' }], + { + cancelable: false, + }, + ); + throw e; + } + })(); + dispatchActionPromise(sendMessageReportActionTypes, messageReportPromise); + }, [callSendMessageReport, messageID, dispatchActionPromise]); } -export { onPressReport }; +export { useOnPressReport }; diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js index 6dc85f30e..218de6f6e 100644 --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -1,200 +1,200 @@ // @flow import * as React from 'react'; import Animated, { type SharedValue } from 'react-native-reanimated'; import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import type { SetState } from 'lib/types/hook-types'; import type { AppNavigationProp } from '../navigation/app-navigator.react'; -import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import type { TooltipRoute } from '../tooltip/tooltip.react'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerMultimediaMessage } from './inner-multimedia-message.react'; import { MessageHeader } from './message-header.react'; import { useSendReaction, useReactionSelectionPopoverPosition, } from './reaction-message-utils'; import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, Extrapolate, interpolateNode } = Animated; /* eslint-enable import/no-named-as-default-member */ function noop() {} type Props = { +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>, +route: TooltipRoute<'MultimediaMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, }; function MultimediaMessageTooltipButton(props: Props): React.Node { const { navigation, progress, isOpeningSidebar, setHideTooltip, showEmojiKeyboard, } = props; const windowWidth = useSelector(state => state.dimensions.width); const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); const { item, verticalBounds, initialCoordinates, margin, } = props.route.params; const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); const innerMultimediaMessage = React.useMemo( () => ( ), [item, navigation.goBackOnce, verticalBounds], ); const { messageInfo, threadInfo, reactions } = item; const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; const canCreateReactionFromMessage = useCanCreateReactionFromMessage( threadInfo, messageInfo, ); const sendReaction = useSendReaction( messageInfo.id, localID, threadInfo.id, reactions, ); const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, margin, }); const reactionSelectionPopover = React.useMemo(() => { if (!canCreateReactionFromMessage) { return null; } return ( ); }, [ canCreateReactionFromMessage, reactionSelectionPopoverPosition, sendReaction, setHideTooltip, showEmojiKeyboard, ]); const onEmojiSelected = React.useCallback( emoji => { sendReaction(emoji.emoji); setHideTooltip(true); }, [sendReaction, setHideTooltip], ); const onCloseEmojiPicker = React.useCallback(() => { showEmojiKeyboard.value = false; navigation.goBackOnce(); }, [navigation, showEmojiKeyboard]); return ( <> {reactionSelectionPopover} {innerMultimediaMessage} {inlineEngagement} ); } export default MultimediaMessageTooltipButton; diff --git a/native/chat/multimedia-message-tooltip-modal.react.js b/native/chat/multimedia-message-tooltip-modal.react.js index 532cfb811..18a5726de 100644 --- a/native/chat/multimedia-message-tooltip-modal.react.js +++ b/native/chat/multimedia-message-tooltip-modal.react.js @@ -1,43 +1,69 @@ // @flow import * as React from 'react'; +import SWMansionIcon from '../components/swmansion-icon.react'; import { createTooltip, type TooltipParams, type BaseTooltipProps, -} from '../navigation/tooltip.react'; + type TooltipMenuProps, +} from '../tooltip/tooltip.react'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types'; import type { VerticalBounds } from '../types/layout-types'; -import { onPressReport } from './message-report-utils'; +import { useOnPressReport } from './message-report-utils'; import MultimediaMessageTooltipButton from './multimedia-message-tooltip-button.react'; -import { navigateToSidebar } from './sidebar-navigation'; +import { useAnimatedNavigateToSidebar } from './sidebar-navigation'; export type MultimediaMessageTooltipModalParams = TooltipParams<{ +item: ChatMultimediaMessageInfoItem, +verticalBounds: VerticalBounds, }>; -const spec = { - entries: [ - { - id: 'sidebar', - text: 'Thread', - onPress: navigateToSidebar, - }, - { - id: 'report', - text: 'Report', - onPress: onPressReport, - }, - ], -}; +function TooltipMenu( + props: TooltipMenuProps<'MultimediaMessageTooltipModal'>, +): React.Node { + const { route, tooltipItem: TooltipItem } = props; + + const onPressSidebar = useAnimatedNavigateToSidebar(route.params.item); + const renderSidebarIcon = React.useCallback( + style => ( + + ), + [], + ); + + const onPressReport = useOnPressReport(route); + const renderReportIcon = React.useCallback( + style => , + [], + ); + + return ( + <> + + + + ); +} const MultimediaMessageTooltipModal: React.ComponentType< BaseTooltipProps<'MultimediaMessageTooltipModal'>, > = createTooltip<'MultimediaMessageTooltipModal'>( MultimediaMessageTooltipButton, - spec, + TooltipMenu, ); export default MultimediaMessageTooltipModal; diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js index 2dee8ddfb..0bdd2237d 100644 --- a/native/chat/multimedia-message.react.js +++ b/native/chat/multimedia-message.react.js @@ -1,250 +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 { 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 { fixedTooltipHeight } from '../tooltip/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, }; 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.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, ...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, ); return ( ); }, ); export default ConnectedMultimediaMessage; diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js index 17577ed10..e9129a1e1 100644 --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -1,184 +1,184 @@ // @flow import * as React from 'react'; import Animated, { type SharedValue } from 'react-native-reanimated'; import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import type { SetState } from 'lib/types/hook-types'; import type { AppNavigationProp } from '../navigation/app-navigator.react'; -import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import type { TooltipRoute } from '../tooltip/tooltip.react'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerRobotextMessage } from './inner-robotext-message.react'; import { useSendReaction, useReactionSelectionPopoverPosition, } from './reaction-message-utils'; import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { Timestamp } from './timestamp.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, interpolateNode, Extrapolate } = Animated; /* eslint-enable import/no-named-as-default-member */ type Props = { +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>, +route: TooltipRoute<'RobotextMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, }; function RobotextMessageTooltipButton(props: Props): React.Node { const { navigation, progress, isOpeningSidebar, setHideTooltip, showEmojiKeyboard, } = props; const windowWidth = useSelector(state => state.dimensions.width); const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); const { item, verticalBounds, initialCoordinates, margin, } = props.route.params; const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); const { messageInfo, threadInfo, reactions } = item; const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; const canCreateReactionFromMessage = useCanCreateReactionFromMessage( threadInfo, messageInfo, ); const sendReaction = useSendReaction( messageInfo.id, localID, threadInfo.id, reactions, ); const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, margin, }); const reactionSelectionPopover = React.useMemo(() => { if (!canCreateReactionFromMessage) { return null; } return ( ); }, [ canCreateReactionFromMessage, reactionSelectionPopoverPosition, sendReaction, setHideTooltip, showEmojiKeyboard, ]); const onEmojiSelected = React.useCallback( emoji => { sendReaction(emoji.emoji); setHideTooltip(true); }, [sendReaction, setHideTooltip], ); const onCloseEmojiPicker = React.useCallback(() => { showEmojiKeyboard.value = false; navigation.goBackOnce(); }, [navigation, showEmojiKeyboard]); return ( <> {reactionSelectionPopover} {inlineEngagement} ); } export default RobotextMessageTooltipButton; diff --git a/native/chat/robotext-message-tooltip-modal.react.js b/native/chat/robotext-message-tooltip-modal.react.js index 27c7a4578..a9f20a2d6 100644 --- a/native/chat/robotext-message-tooltip-modal.react.js +++ b/native/chat/robotext-message-tooltip-modal.react.js @@ -1,35 +1,53 @@ // @flow import * as React from 'react'; +import SWMansionIcon from '../components/swmansion-icon.react'; import { createTooltip, type TooltipParams, type BaseTooltipProps, -} from '../navigation/tooltip.react'; + type TooltipMenuProps, +} from '../tooltip/tooltip.react'; import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types'; import RobotextMessageTooltipButton from './robotext-message-tooltip-button.react'; -import { navigateToSidebar } from './sidebar-navigation'; +import { useAnimatedNavigateToSidebar } from './sidebar-navigation'; export type RobotextMessageTooltipModalParams = TooltipParams<{ +item: ChatRobotextMessageInfoItemWithHeight, }>; -const spec = { - entries: [ - { - id: 'sidebar', - text: 'Thread', - onPress: navigateToSidebar, - }, - ], -}; +function TooltipMenu( + props: TooltipMenuProps<'RobotextMessageTooltipModal'>, +): React.Node { + const { route, tooltipItem: TooltipItem } = props; + + const onPress = useAnimatedNavigateToSidebar(route.params.item); + const renderIcon = React.useCallback( + style => ( + + ), + [], + ); + + return ( + <> + + + ); +} const RobotextMessageTooltipModal: React.ComponentType< BaseTooltipProps<'RobotextMessageTooltipModal'>, > = createTooltip<'RobotextMessageTooltipModal'>( RobotextMessageTooltipButton, - spec, + TooltipMenu, ); export default RobotextMessageTooltipModal; diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js index 98226f985..ee913087a 100644 --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -1,214 +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 { 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 { fixedTooltipHeight } from '../tooltip/tooltip.react'; 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 visibleEntryIDs = React.useMemo(() => { const result = []; if (item.threadCreatedFromMessage || canCreateSidebarFromMessage) { result.push('sidebar'); } return result; }, [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/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js index ee6c7a968..3419b99f6 100644 --- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js +++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js @@ -1,106 +1,150 @@ // @flow import * as React from 'react'; import { Alert } from 'react-native'; import { removeUsersFromThread, changeThreadMemberRoles, } from 'lib/actions/thread-actions'; import { memberIsAdmin, removeMemberFromThread, switchMemberAdminRoleInThread, } from 'lib/shared/thread-utils'; import { stringForUser } from 'lib/shared/user-utils'; import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types'; -import type { DispatchFunctions, BindServerCall } from 'lib/utils/action-utils'; +import { + useDispatchActionPromise, + useServerCall, +} from 'lib/utils/action-utils'; import { createTooltip, type TooltipParams, type TooltipRoute, type BaseTooltipProps, -} from '../../navigation/tooltip.react'; + type TooltipMenuProps, +} from '../../tooltip/tooltip.react'; import ThreadSettingsMemberTooltipButton from './thread-settings-member-tooltip-button.react'; export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{ +memberInfo: RelativeMemberInfo, +threadInfo: ThreadInfo, }>; -function onRemoveUser( +function useOnRemoveUser( route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, ) { const { memberInfo, threadInfo } = route.params; - const boundRemoveUsersFromThread = bindServerCall(removeUsersFromThread); - const onConfirmRemoveUser = () => - removeMemberFromThread( - threadInfo, - memberInfo, - dispatchFunctions.dispatchActionPromise, - boundRemoveUsersFromThread, - ); + const boundRemoveUsersFromThread = useServerCall(removeUsersFromThread); + const dispatchActionPromise = useDispatchActionPromise(); - const userText = stringForUser(memberInfo); - Alert.alert( - 'Confirm removal', - `Are you sure you want to remove ${userText} from this chat?`, - [ - { text: 'Cancel', style: 'cancel' }, - { text: 'OK', onPress: onConfirmRemoveUser }, - ], - { cancelable: true }, + const onConfirmRemoveUser = React.useCallback( + () => + removeMemberFromThread( + threadInfo, + memberInfo, + dispatchActionPromise, + boundRemoveUsersFromThread, + ), + [threadInfo, memberInfo, dispatchActionPromise, boundRemoveUsersFromThread], ); + + const userText = stringForUser(memberInfo); + return React.useCallback(() => { + Alert.alert( + 'Confirm removal', + `Are you sure you want to remove ${userText} from this chat?`, + [ + { text: 'Cancel', style: 'cancel' }, + { text: 'OK', onPress: onConfirmRemoveUser }, + ], + { cancelable: true }, + ); + }, [onConfirmRemoveUser, userText]); } -function onToggleAdmin( +function useOnToggleAdmin( route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, ) { const { memberInfo, threadInfo } = route.params; + const boundChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles); + const dispatchActionPromise = useDispatchActionPromise(); + const isCurrentlyAdmin = memberIsAdmin(memberInfo, threadInfo); - const boundChangeThreadMemberRoles = bindServerCall(changeThreadMemberRoles); - const onConfirmMakeAdmin = () => - switchMemberAdminRoleInThread( + const onConfirmMakeAdmin = React.useCallback( + () => + switchMemberAdminRoleInThread( + threadInfo, + memberInfo, + isCurrentlyAdmin, + dispatchActionPromise, + boundChangeThreadMemberRoles, + ), + [ threadInfo, memberInfo, isCurrentlyAdmin, - dispatchFunctions.dispatchActionPromise, + dispatchActionPromise, boundChangeThreadMemberRoles, - ); + ], + ); const userText = stringForUser(memberInfo); const actionClause = isCurrentlyAdmin ? `remove ${userText} as an admin` : `make ${userText} an admin`; - Alert.alert( - 'Confirm action', - `Are you sure you want to ${actionClause} of this chat?`, - [ - { text: 'Cancel', style: 'cancel' }, - { text: 'OK', onPress: onConfirmMakeAdmin }, - ], - { cancelable: true }, - ); + return React.useCallback(() => { + Alert.alert( + 'Confirm action', + `Are you sure you want to ${actionClause} of this chat?`, + [ + { text: 'Cancel', style: 'cancel' }, + { text: 'OK', onPress: onConfirmMakeAdmin }, + ], + { cancelable: true }, + ); + }, [onConfirmMakeAdmin, actionClause]); } -const spec = { - entries: [ - { id: 'remove_user', text: 'Remove user', onPress: onRemoveUser }, - { id: 'remove_admin', text: 'Remove admin', onPress: onToggleAdmin }, - { id: 'make_admin', text: 'Make admin', onPress: onToggleAdmin }, - ], -}; +function TooltipMenu( + props: TooltipMenuProps<'ThreadSettingsMemberTooltipModal'>, +): React.Node { + const { route, tooltipItem: TooltipItem } = props; + + const onRemoveUser = useOnRemoveUser(route); + const onToggleAdmin = useOnToggleAdmin(route); + + return ( + <> + + + + + ); +} const ThreadSettingsMemberTooltipModal: React.ComponentType< BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>, > = createTooltip<'ThreadSettingsMemberTooltipModal'>( ThreadSettingsMemberTooltipButton, - spec, + TooltipMenu, ); export default ThreadSettingsMemberTooltipModal; diff --git a/native/chat/sidebar-navigation.js b/native/chat/sidebar-navigation.js index 2dc8a714e..2026ec816 100644 --- a/native/chat/sidebar-navigation.js +++ b/native/chat/sidebar-navigation.js @@ -1,81 +1,69 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { createPendingSidebar } from 'lib/shared/thread-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; -import type { DispatchFunctions, BindServerCall } from 'lib/utils/action-utils'; -import type { InputState } from '../input/input-state'; import { getDefaultTextMessageRules } from '../markdown/rules.react'; -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 { ChatMessageInfoItemWithHeight } from '../types/chat-types'; -import type { ChatContextType } from './chat-context'; -import { - createNavigateToThreadAction, - useNavigateToThread, -} from './message-list-types'; +import { ChatContext } from './chat-context'; +import { useNavigateToThread } from './message-list-types'; function getSidebarThreadInfo( sourceMessage: ChatMessageInfoItemWithHeight, viewerID?: ?string, ): ?ThreadInfo { const threadCreatedFromMessage = sourceMessage.threadCreatedFromMessage; if (threadCreatedFromMessage) { return threadCreatedFromMessage; } if (!viewerID) { return null; } const { messageInfo, threadInfo } = sourceMessage; return createPendingSidebar( messageInfo, threadInfo, viewerID, getDefaultTextMessageRules().simpleMarkdownRules, ); } -function navigateToSidebar( - route: TooltipRoute, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, - inputState: ?InputState, - navigation: AppNavigationProp, - viewerID: ?string, - chatContext: ?ChatContextType, -) { - invariant(viewerID, 'viewerID should be set'); - const threadInfo = getSidebarThreadInfo(route.params.item, viewerID); - invariant(threadInfo, 'threadInfo should be set'); - - chatContext?.setCurrentTransitionSidebarSourceID( - route.params.item.messageInfo.id, - ); - navigation.navigate<'MessageList'>( - createNavigateToThreadAction({ threadInfo }), - ); -} - function useNavigateToSidebar(item: ChatMessageInfoItemWithHeight): () => void { const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const threadInfo = React.useMemo(() => getSidebarThreadInfo(item, viewerID), [ item, viewerID, ]); const navigateToThread = useNavigateToThread(); return React.useCallback(() => { invariant(threadInfo, 'threadInfo should be set'); navigateToThread({ threadInfo }); }, [navigateToThread, threadInfo]); } -export { navigateToSidebar, getSidebarThreadInfo, useNavigateToSidebar }; +function useAnimatedNavigateToSidebar( + item: ChatMessageInfoItemWithHeight, +): () => void { + const chatContext = React.useContext(ChatContext); + const setSidebarSourceID = chatContext?.setCurrentTransitionSidebarSourceID; + const navigateToSidebar = useNavigateToSidebar(item); + const messageID = item.messageInfo.id; + return React.useCallback(() => { + setSidebarSourceID && setSidebarSourceID(messageID); + navigateToSidebar(); + }, [setSidebarSourceID, messageID, navigateToSidebar]); +} + +export { + getSidebarThreadInfo, + useNavigateToSidebar, + useAnimatedNavigateToSidebar, +}; diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js index 0a962661e..362b99701 100644 --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -1,208 +1,208 @@ // @flow import * as React from 'react'; import Animated, { type SharedValue } from 'react-native-reanimated'; import EmojiPicker from 'rn-emoji-keyboard'; import { localIDPrefix } from 'lib/shared/message-utils'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; import type { SetState } from 'lib/types/hook-types'; import type { AppNavigationProp } from '../navigation/app-navigator.react'; -import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import type { TooltipRoute } from '../tooltip/tooltip.react'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerTextMessage } from './inner-text-message.react'; import { MessageHeader } from './message-header.react'; import { MessageListContextProvider } from './message-list-types'; import { MessagePressResponderContext } from './message-press-responder-context'; import { useSendReaction, useReactionSelectionPopoverPosition, } from './reaction-message-utils'; import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, interpolateNode, Extrapolate } = Animated; /* eslint-enable import/no-named-as-default-member */ type Props = { +navigation: AppNavigationProp<'TextMessageTooltipModal'>, +route: TooltipRoute<'TextMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, }; function TextMessageTooltipButton(props: Props): React.Node { const { navigation, progress, isOpeningSidebar, setHideTooltip, showEmojiKeyboard, } = props; const windowWidth = useSelector(state => state.dimensions.width); const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); const { item, verticalBounds, initialCoordinates, margin, } = props.route.params; const { style: messageContainerStyle, threadColorOverride, isThreadColorDarkOverride, } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); const threadID = item.threadInfo.id; const messagePressResponderContext = React.useMemo( () => ({ onPressMessage: navigation.goBackOnce, }), [navigation.goBackOnce], ); const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); const { messageInfo, threadInfo, reactions } = item; const nextLocalID = useSelector(state => state.nextLocalID); const localID = `${localIDPrefix}${nextLocalID}`; const canCreateReactionFromMessage = useCanCreateReactionFromMessage( threadInfo, messageInfo, ); const sendReaction = useSendReaction( messageInfo.id, localID, threadInfo.id, reactions, ); const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ initialCoordinates, verticalBounds, margin, }); const reactionSelectionPopover = React.useMemo(() => { if (!canCreateReactionFromMessage) { return null; } return ( ); }, [ canCreateReactionFromMessage, reactionSelectionPopoverPosition, sendReaction, setHideTooltip, showEmojiKeyboard, ]); const onEmojiSelected = React.useCallback( emoji => { sendReaction(emoji.emoji); setHideTooltip(true); }, [sendReaction, setHideTooltip], ); const onCloseEmojiPicker = React.useCallback(() => { showEmojiKeyboard.value = false; navigation.goBackOnce(); }, [navigation, showEmojiKeyboard]); return ( {reactionSelectionPopover} {inlineEngagement} ); } export default TextMessageTooltipButton; diff --git a/native/chat/text-message-tooltip-modal.react.js b/native/chat/text-message-tooltip-modal.react.js index 1787c2164..a9630fb66 100644 --- a/native/chat/text-message-tooltip-modal.react.js +++ b/native/chat/text-message-tooltip-modal.react.js @@ -1,68 +1,113 @@ // @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 CommIcon from '../components/comm-icon.react'; +import SWMansionIcon from '../components/swmansion-icon.react'; +import { InputStateContext } from '../input/input-state'; import { displayActionResultModal } from '../navigation/action-result-modal'; import { createTooltip, type TooltipParams, - type TooltipRoute, type BaseTooltipProps, -} from '../navigation/tooltip.react'; + type TooltipMenuProps, +} from '../tooltip/tooltip.react'; import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types'; -import { onPressReport } from './message-report-utils'; -import { navigateToSidebar } from './sidebar-navigation'; +import { useOnPressReport } from './message-report-utils'; +import { useAnimatedNavigateToSidebar } 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 TooltipMenu( + props: TooltipMenuProps<'TextMessageTooltipModal'>, +): React.Node { + const { route, tooltipItem: TooltipItem } = props; -function onPressReply( - route: TooltipRoute<'TextMessageTooltipModal'>, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, - inputState: ?InputState, -) { - invariant( - inputState, - 'inputState should be set in TextMessageTooltipModal.onPressReply', + const inputState = React.useContext(InputStateContext); + const { text } = route.params.item.messageInfo; + const onPressReply = React.useCallback(() => { + invariant( + inputState, + 'inputState should be set in TextMessageTooltipModal.onPressReply', + ); + inputState.addReply(createMessageReply(text)); + }, [inputState, text]); + const renderReplyIcon = React.useCallback( + style => , + [], + ); + + const onPressSidebar = useAnimatedNavigateToSidebar(route.params.item); + const renderSidebarIcon = React.useCallback( + style => ( + + ), + [], + ); + + const onPressCopy = React.useCallback(() => { + Clipboard.setString(text); + setTimeout(confirmCopy); + }, [text]); + const renderCopyIcon = React.useCallback( + style => , + [], + ); + + const onPressReport = useOnPressReport(route); + const renderReportIcon = React.useCallback( + style => , + [], ); - 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: 'report', - text: 'Report', - onPress: onPressReport, - }, - ], -}; + return ( + <> + + + + + + ); +} const TextMessageTooltipModal: React.ComponentType< BaseTooltipProps<'TextMessageTooltipModal'>, -> = createTooltip<'TextMessageTooltipModal'>(TextMessageTooltipButton, spec); +> = createTooltip<'TextMessageTooltipModal'>( + TextMessageTooltipButton, + TooltipMenu, +); export default TextMessageTooltipModal; diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js index dccf8f867..6236614ce 100644 --- a/native/chat/text-message.react.js +++ b/native/chat/text-message.react.js @@ -1,256 +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 { 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 { fixedTooltipHeight } from '../tooltip/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, // 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, ...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.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, ); React.useEffect(() => clearMarkdownContextData, [clearMarkdownContextData]); return ( ); }, ); export { ConnectedTextMessage as TextMessage }; diff --git a/native/profile/relationship-list-item-tooltip-modal.react.js b/native/profile/relationship-list-item-tooltip-modal.react.js index ee1764840..cb08802c1 100644 --- a/native/profile/relationship-list-item-tooltip-modal.react.js +++ b/native/profile/relationship-list-item-tooltip-modal.react.js @@ -1,130 +1,140 @@ // @flow import * as React from 'react'; import { Alert, TouchableOpacity } from 'react-native'; import { updateRelationshipsActionTypes, updateRelationships, } from 'lib/actions/relationship-actions'; import { stringForUser } from 'lib/shared/user-utils'; import type { RelativeUserInfo } from 'lib/types/user-types'; -import type { DispatchFunctions, BindServerCall } from 'lib/utils/action-utils'; +import { + useDispatchActionPromise, + useServerCall, +} from 'lib/utils/action-utils'; import PencilIcon from '../components/pencil-icon.react'; import type { AppNavigationProp } from '../navigation/app-navigator.react'; import { createTooltip, type TooltipParams, type BaseTooltipProps, -} from '../navigation/tooltip.react'; + type TooltipMenuProps, +} from '../tooltip/tooltip.react'; type Action = 'unfriend' | 'unblock'; export type RelationshipListItemTooltipModalParams = TooltipParams<{ +relativeUserInfo: RelativeUserInfo, }>; type OnRemoveUserProps = { ...RelationshipListItemTooltipModalParams, +action: Action, }; -function onRemoveUser( - props: OnRemoveUserProps, - dispatchFunctions: DispatchFunctions, - bindServerCall: BindServerCall, -) { - const boundRemoveRelationships = bindServerCall(updateRelationships); - const callRemoveRelationships = async () => { - try { - return await boundRemoveRelationships({ - action: props.action, - userIDs: [props.relativeUserInfo.id], - }); - } catch (e) { - Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], { - cancelable: true, - }); - throw e; - } - }; - const onConfirmRemoveUser = () => { - const customKeyName = `${updateRelationshipsActionTypes.started}:${props.relativeUserInfo.id}`; - dispatchFunctions.dispatchActionPromise( - updateRelationshipsActionTypes, - callRemoveRelationships(), - { customKeyName }, +function useRelationshipAction(input: OnRemoveUserProps) { + const boundRemoveRelationships = useServerCall(updateRelationships); + const dispatchActionPromise = useDispatchActionPromise(); + const userText = stringForUser(input.relativeUserInfo); + + return React.useCallback(() => { + const callRemoveRelationships = async () => { + try { + return await boundRemoveRelationships({ + action: input.action, + userIDs: [input.relativeUserInfo.id], + }); + } catch (e) { + Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], { + cancelable: true, + }); + throw e; + } + }; + const onConfirmRemoveUser = () => { + const customKeyName = `${updateRelationshipsActionTypes.started}:${input.relativeUserInfo.id}`; + dispatchActionPromise( + updateRelationshipsActionTypes, + callRemoveRelationships(), + { customKeyName }, + ); + }; + const action = { + unfriend: 'removal', + unblock: 'unblock', + }[input.action]; + const message = { + unfriend: `remove ${userText} from friends?`, + unblock: `unblock ${userText}?`, + }[input.action]; + Alert.alert( + `Confirm ${action}`, + `Are you sure you want to ${message}`, + [ + { text: 'Cancel', style: 'cancel' }, + { text: 'OK', onPress: onConfirmRemoveUser }, + ], + { cancelable: true }, ); - }; + }, [boundRemoveRelationships, dispatchActionPromise, userText, input]); +} - const userText = stringForUser(props.relativeUserInfo); - const action = { - unfriend: 'removal', - unblock: 'unblock', - }[props.action]; - const message = { - unfriend: `remove ${userText} from friends?`, - unblock: `unblock ${userText}?`, - }[props.action]; - Alert.alert( - `Confirm ${action}`, - `Are you sure you want to ${message}`, - [ - { text: 'Cancel', style: 'cancel' }, - { text: 'OK', onPress: onConfirmRemoveUser }, - ], - { cancelable: true }, +function TooltipMenu( + props: TooltipMenuProps<'RelationshipListItemTooltipModal'>, +): React.Node { + const { route, tooltipItem: TooltipItem } = props; + + const onRemoveUser = useRelationshipAction({ + ...route.params, + action: 'unfriend', + }); + const onUnblockUser = useRelationshipAction({ + ...route.params, + action: 'unblock', + }); + + return ( + <> + + + ); } -const spec = { - entries: [ - { - id: 'unfriend', - text: 'Unfriend', - onPress: (route, dispatchFunctions, bindServerCall) => - onRemoveUser( - { ...route.params, action: 'unfriend' }, - dispatchFunctions, - bindServerCall, - ), - }, - { - id: 'unblock', - text: 'Unblock', - onPress: (route, dispatchFunctions, bindServerCall) => - onRemoveUser( - { ...route.params, action: 'unblock' }, - dispatchFunctions, - bindServerCall, - ), - }, - ], -}; - type Props = { +navigation: AppNavigationProp<'RelationshipListItemTooltipModal'>, ... }; class RelationshipListItemTooltipButton extends React.PureComponent { render() { return ( ); } onPress = () => { this.props.navigation.goBackOnce(); }; } const RelationshipListItemTooltipModal: React.ComponentType< BaseTooltipProps<'RelationshipListItemTooltipModal'>, > = createTooltip<'RelationshipListItemTooltipModal'>( RelationshipListItemTooltipButton, - spec, + TooltipMenu, ); export default RelationshipListItemTooltipModal; diff --git a/native/tooltip/tooltip-context.react.js b/native/tooltip/tooltip-context.react.js new file mode 100644 index 000000000..5c3143dd0 --- /dev/null +++ b/native/tooltip/tooltip-context.react.js @@ -0,0 +1,186 @@ +// @flow + +import { useActionSheet } from '@expo/react-native-action-sheet'; +import * as React from 'react'; +import { Platform, StyleSheet } from 'react-native'; + +import type { TooltipItemBaseProps } from './tooltip-item.react'; + +type RegisterOptionInput = { + ...TooltipItemBaseProps, + +symbol: symbol, +}; +type RegisterOptionOutput = { +shouldRender: boolean }; +export type TooltipContextType = { + +registerOption: (input: RegisterOptionInput) => RegisterOptionOutput, + +unregisterOption: (id: string) => void, + +showActionSheet: () => void, + +shouldShowMore: () => boolean, + +getNumVisibleEntries: () => number, +}; +const TooltipContext: React.Context = React.createContext(); + +type ProviderProps = { + +maxOptionsToDisplay: number, + +visibleEntryIDs: ?$ReadOnlyArray, + +cancel: () => mixed, + +children: React.Node, +}; +function TooltipContextProvider(props: ProviderProps): React.Node { + const optionsRef = React.useRef([]); + + const { visibleEntryIDs } = props; + const visibleEntryIDsSet = React.useMemo( + () => new Set(visibleEntryIDs ?? []), + [visibleEntryIDs], + ); + + const { maxOptionsToDisplay } = props; + const registerOption = React.useCallback( + (input: RegisterOptionInput) => { + const options = optionsRef.current; + + const existingIndex = options.findIndex(option => option.id === input.id); + if (existingIndex === -1) { + options.push(input); + } else { + if (options[existingIndex].symbol !== input.symbol) { + console.warn(`multiple TooltipItems registered with ID ${input.id}`); + } + options[existingIndex] = input; + } + + const optionsToDisplay = options.filter(option => + visibleEntryIDsSet.has(option.id), + ); + const displayIndex = optionsToDisplay.findIndex( + option => option.id === input.id, + ); + const cutoff = + optionsToDisplay.length === maxOptionsToDisplay + ? maxOptionsToDisplay + : maxOptionsToDisplay - 1; + + const shouldRender = + input.id === 'more' || (displayIndex >= 0 && displayIndex < cutoff); + return { shouldRender }; + }, + [maxOptionsToDisplay, visibleEntryIDsSet], + ); + + const unregisterOption = React.useCallback((id: string) => { + optionsRef.current = optionsRef.current.filter(option => option.id !== id); + }, []); + + const { cancel } = props; + const { showActionSheetWithOptions } = useActionSheet(); + const showActionSheet = React.useCallback(() => { + const options = optionsRef.current; + + const optionsToDisplay = options.filter(option => + visibleEntryIDsSet.has(option.id), + ); + + const filteredOptions = optionsToDisplay.slice(maxOptionsToDisplay - 1); + + const cancelButtonExists = options.some(option => option.isCancel); + if (Platform.OS === 'ios' && !cancelButtonExists) { + filteredOptions.push({ + id: 'cancel', + text: 'Cancel', + onPress: cancel, + isCancel: true, + symbol: Symbol(), + }); + } + + // We're reversing options to populate the action sheet from bottom to + // top instead of the default (top to bottom) ordering. + filteredOptions.reverse(); + + const texts = filteredOptions.map(option => option.text); + + const destructiveButtonIndices = filteredOptions + .filter(option => option.isDestructive) + .map((_, i) => i); + + const cancelButtonIndex = filteredOptions.findIndex( + option => option.isCancel, + ); + + const icons = filteredOptions.map(option => + option.renderIcon ? option.renderIcon(styles.bottomSheetIcon) : undefined, + ); + + const onPressAction = (selectedIndex: ?number) => { + const index = selectedIndex ?? 0; + filteredOptions[index].onPress(); + }; + + const containerStyle = { + paddingBottom: 24, + }; + showActionSheetWithOptions( + { + options: texts, + cancelButtonIndex, + destructiveButtonIndex: destructiveButtonIndices, + containerStyle, + icons, + }, + onPressAction, + ); + }, [ + maxOptionsToDisplay, + visibleEntryIDsSet, + cancel, + showActionSheetWithOptions, + ]); + + const shouldShowMore = React.useCallback(() => { + const options = optionsRef.current; + const optionsToDisplay = options.filter(option => + visibleEntryIDsSet.has(option.id), + ); + return optionsToDisplay.length > maxOptionsToDisplay; + }, [maxOptionsToDisplay, visibleEntryIDsSet]); + + const getNumVisibleEntries = React.useCallback(() => { + const options = optionsRef.current; + const optionsToDisplay = options.filter(option => + visibleEntryIDsSet.has(option.id), + ); + return Math.min(optionsToDisplay.length, maxOptionsToDisplay); + }, [maxOptionsToDisplay, visibleEntryIDsSet]); + + const context = React.useMemo( + () => ({ + registerOption, + unregisterOption, + showActionSheet, + shouldShowMore, + getNumVisibleEntries, + }), + [ + registerOption, + unregisterOption, + showActionSheet, + shouldShowMore, + getNumVisibleEntries, + ], + ); + const { children } = props; + return ( + + {children} + + ); +} + +const styles = StyleSheet.create({ + bottomSheetIcon: { + color: '#000000', + }, +}); + +export { TooltipContext, TooltipContextProvider }; diff --git a/native/tooltip/tooltip-item.react.js b/native/tooltip/tooltip-item.react.js new file mode 100644 index 000000000..ac1908abd --- /dev/null +++ b/native/tooltip/tooltip-item.react.js @@ -0,0 +1,77 @@ +// @flow + +import invariant from 'invariant'; +import * as React from 'react'; +import { TouchableOpacity } from 'react-native'; + +import { SingleLine } from '../components/single-line.react'; +import { useStyles } from '../themes/colors'; +import type { ViewStyle, TextStyle } from '../types/styles'; +import { TooltipContext } from './tooltip-context.react'; + +export type TooltipItemBaseProps = { + +id: string, + +text: string, + +onPress: () => mixed, + +renderIcon?: (iconStyle: TextStyle) => React.Node, + +isDestructive?: boolean, + +isCancel?: boolean, +}; +type Props = { + ...TooltipItemBaseProps, + +containerStyle?: ViewStyle, + +closeTooltip: () => mixed, +}; +function TooltipItem(props: Props): React.Node { + const tooltipContext = React.useContext(TooltipContext); + invariant(tooltipContext, 'TooltipContext should be set in TooltipItem'); + const { registerOption, unregisterOption } = tooltipContext; + + const symbolRef = React.useRef(Symbol()); + + const { containerStyle, closeTooltip, ...contextRegistrationInput } = props; + const { shouldRender } = registerOption({ + ...contextRegistrationInput, + symbol: symbolRef.current, + }); + + const { id, text, renderIcon, onPress: onPressItem } = props; + + React.useEffect(() => { + return () => unregisterOption(id); + }, [unregisterOption, id]); + + const styles = useStyles(unboundStyles); + + const onPress = React.useCallback(() => { + onPressItem(); + closeTooltip(); + }, [onPressItem, closeTooltip]); + + if (!shouldRender) { + return null; + } + + const icon = renderIcon ? renderIcon(styles.icon) : null; + + return ( + + {icon} + {text} + + ); +} + +const unboundStyles = { + label: { + color: 'modalForegroundLabel', + fontSize: 14, + lineHeight: 17, + textAlign: 'center', + }, + icon: { + color: 'modalForegroundLabel', + }, +}; + +export default TooltipItem; diff --git a/native/navigation/tooltip.react.js b/native/tooltip/tooltip.react.js similarity index 60% rename from native/navigation/tooltip.react.js rename to native/tooltip/tooltip.react.js index 2ce484c36..98ef7ab04 100644 --- a/native/navigation/tooltip.react.js +++ b/native/tooltip/tooltip.react.js @@ -1,863 +1,638 @@ // @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 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 { AppNavigationProp } from '../navigation/app-navigator.react'; +import { + OverlayContext, + type OverlayContextType, +} from '../navigation/overlay-context'; +import type { TooltipModalParamList } from '../navigation/route-names'; 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'; +import { AnimatedView } from '../types/styles'; +import { + TooltipContextProvider, + TooltipContext, + type TooltipContextType, +} from './tooltip-context.react'; +import BaseTooltipItem, { + type TooltipItemBaseProps, +} from './tooltip-item.react'; /* 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, - ) => 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, + +tooltipContext: TooltipContextType, + +closeTooltip: () => mixed, + +boundTooltipItem: React.ComponentType, +}; + +export type TooltipMenuProps = { + ...BaseTooltipProps, + +tooltipItem: React.ComponentType, }; function createTooltip< RouteName: $Keys, BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, >( ButtonComponent: React.ComponentType>, - tooltipSpec: TooltipSpec, + MenuComponent: React.ComponentType>, ): 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); - 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); + return tooltipHeight(this.props.tooltipContext.getNumVisibleEntries()); } } 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, + tooltipContext, + closeTooltip, + boundTooltipItem, ...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 items = [ + , + ]; - const moreTooltipItem = ( - + closeTooltip={this.props.closeTooltip} + key="more" + />, ); - - 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); - } - - 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, - ); - }; + getTooltipItem() { + const BoundTooltipItem = this.props.boundTooltipItem; + return BoundTooltipItem; + } onPressMore = () => { Keyboard.dismiss(); this.props.actionSheetShown.value = true; this.props.setHideTooltip(true); + this.props.tooltipContext.showActionSheet(); + }; - 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, - }; - + renderMoreIcon = () => { 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, + return ( + ); }; - 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(); - + function ConnectedTooltip(props: BaseTooltipPropsType) { 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 { goBackOnce } = props.navigation; const goBackCallback = React.useCallback(() => { - if (!actionSheetShown.value && !showEmojiKeyboard.value) { - props.navigation.goBackOnce(); + if (!actionSheetShown.value) { + goBackOnce(); } - }, [actionSheetShown.value, props.navigation, showEmojiKeyboard.value]); + }, [actionSheetShown.value, goBackOnce]); const exitAnimationWorklet = React.useCallback( finished => { 'worklet'; if (finished) { runOnJS(goBackCallback)(); } }, [goBackCallback], ); + const { params } = props.route; + const { tooltipLocation } = params; + const isFixed = tooltipLocation === 'fixed'; + + const closeTooltip = React.useCallback(() => { + if (isFixed && !actionSheetShown.value) { + setHideTooltip(true); + } else { + goBackOnce(); + } + showEmojiKeyboard.value = false; + }, [isFixed, actionSheetShown.value, goBackOnce, showEmojiKeyboard]); + const styles = useStyles(unboundStyles); + const boundTooltipItem = React.useCallback( + innerProps => { + const containerStyle = isFixed + ? [styles.itemContainer, styles.itemContainerFixed] + : styles.itemContainer; + return ( + + ); + }, + [isFixed, styles, closeTooltip], + ); + const tooltipContext = React.useContext(TooltipContext); + invariant(tooltipContext, 'TooltipContext should be set in Tooltip'); return ( ); - }); + } + function MemoizedTooltip(props: BaseTooltipPropsType) { + const { visibleEntryIDs } = props.route.params; + const { goBackOnce } = props.navigation; + return ( + + + + ); + } + return React.memo(MemoizedTooltip); } 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 };