diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -25,7 +25,7 @@ } from './chat-constants'; import { useComposedMessageMaxWidth } from './composed-message-width'; import { FailedSend } from './failed-send.react'; -import InlineSidebar from './inline-sidebar.react'; +import { InlineSidebar } from './inline-sidebar.react'; import { MessageHeader } from './message-header.react'; import { useNavigateToSidebar } from './sidebar-navigation'; import SwipeableMessage from './swipeable-message.react'; diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js --- a/native/chat/inline-sidebar.react.js +++ b/native/chat/inline-sidebar.react.js @@ -2,6 +2,10 @@ import * as React from 'react'; import { Text, View } from 'react-native'; +import Animated, { + Extrapolate, + interpolateNode, +} from 'react-native-reanimated'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; import type { ThreadInfo } from 'lib/types/thread-types'; @@ -9,7 +13,16 @@ import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react'; import SWMansionIcon from '../components/swmansion-icon.react'; import { useStyles } from '../themes/colors'; -import { inlineSidebarHeight } from './chat-constants'; +import type { ChatMessageInfoItemWithHeight } from '../types/chat-types'; +import { + composedMessageMarginLeft, + composedMessageMarginRight, + inlineSidebarCenterTopOffset, + inlineSidebarHeight, + inlineSidebarMarginTop, + inlineSidebarRightRightMargin, + inlineSidebarRightTopOffset, +} from './chat-constants'; import { useNavigateToThread } from './message-list-types'; type Props = { @@ -125,4 +138,80 @@ }, }; -export default InlineSidebar; +type TooltipInlineSidebarProps = { + +item: ChatMessageInfoItemWithHeight, + +isOpeningSidebar: boolean, + +progress: Animated.Node, + +windowWidth: number, + +positioning: 'left' | 'right' | 'center', + +initialCoordinates: { + +x: number, + +y: number, + +width: number, + +height: number, + }, +}; + +function TooltipInlineSidebar(props: TooltipInlineSidebarProps): React.Node { + const { + item, + isOpeningSidebar, + progress, + windowWidth, + initialCoordinates, + positioning, + } = props; + const inlineSidebarStyle = React.useMemo(() => { + switch (positioning) { + case 'left': + return { + position: 'absolute', + top: inlineSidebarMarginTop + inlineSidebarRightTopOffset, + left: composedMessageMarginLeft, + }; + case 'right': + return { + position: 'absolute', + right: inlineSidebarRightRightMargin + composedMessageMarginRight, + top: inlineSidebarMarginTop + inlineSidebarRightTopOffset, + }; + case 'center': + return { + alignSelf: 'center', + top: inlineSidebarCenterTopOffset, + }; + } + }, [positioning]); + const inlineSidebarContainer = React.useMemo(() => { + const opacity = Animated.multiply( + isOpeningSidebar ? 0 : 1, + interpolateNode(progress, { + inputRange: [0, 1], + outputRange: [1, 0], + extrapolate: Extrapolate.CLAMP, + }), + ); + return { + position: 'absolute', + width: windowWidth, + top: initialCoordinates.height, + left: -initialCoordinates.x, + opacity, + }; + }, [ + initialCoordinates.height, + initialCoordinates.x, + isOpeningSidebar, + progress, + windowWidth, + ]); + return ( + + + + + + ); +} + +export { InlineSidebar, TooltipInlineSidebar }; diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -6,6 +6,7 @@ import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import { TooltipInlineSidebar } from './inline-sidebar.react'; import { InnerMultimediaMessage } from './inner-multimedia-message.react'; import { MessageHeader } from './message-header.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; @@ -21,6 +22,7 @@ +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>, +route: TooltipRoute<'MultimediaMessageTooltipModal'>, +progress: Node, + +isOpeningSidebar: boolean, }; function MultimediaMessageTooltipButton(props: Props): React.Node { const windowWidth = useSelector(state => state.dimensions.width); @@ -59,7 +61,24 @@ }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); - const { navigation } = props; + const { navigation, isOpeningSidebar } = props; + + const inlineSidebar = React.useMemo(() => { + if (!item.threadCreatedFromMessage) { + return null; + } + return ( + + ); + }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + return ( + {inlineSidebar} ); } diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -6,6 +6,7 @@ import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import { TooltipInlineSidebar } from './inline-sidebar.react'; import { InnerRobotextMessage } from './inner-robotext-message.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { Timestamp } from './timestamp.react'; @@ -19,6 +20,7 @@ +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>, +route: TooltipRoute<'RobotextMessageTooltipModal'>, +progress: Node, + +isOpeningSidebar: boolean, }; function RobotextMessageTooltipButton(props: Props): React.Node { const { progress } = props; @@ -57,7 +59,24 @@ }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); - const { navigation } = props; + const { navigation, isOpeningSidebar } = props; + + const inlineSidebar = React.useMemo(() => { + if (!item.threadCreatedFromMessage) { + return null; + } + return ( + + ); + }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + return ( + {inlineSidebar} ); } diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -17,7 +17,7 @@ import { AnimatedView } from '../types/styles'; import { inlineSidebarCenterTopOffset } from './chat-constants'; import type { ChatNavigationProp } from './chat.react'; -import InlineSidebar from './inline-sidebar.react'; +import { InlineSidebar } from './inline-sidebar.react'; import { InnerRobotextMessage } from './inner-robotext-message.react'; import { robotextMessageTooltipHeight } from './robotext-message-tooltip-modal.react'; import { Timestamp } from './timestamp.react'; diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -6,6 +6,7 @@ import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; +import { TooltipInlineSidebar } from './inline-sidebar.react'; import { InnerTextMessage } from './inner-text-message.react'; import { MessageHeader } from './message-header.react'; import { MessageListContextProvider } from './message-list-types'; @@ -20,6 +21,7 @@ +navigation: AppNavigationProp<'TextMessageTooltipModal'>, +route: TooltipRoute<'TextMessageTooltipModal'>, +progress: Node, + +isOpeningSidebar: boolean, }; function TextMessageTooltipButton(props: Props): React.Node { const { progress } = props; @@ -63,7 +65,23 @@ }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); const threadID = item.threadInfo.id; - const { navigation } = props; + const { navigation, isOpeningSidebar } = props; + + const inlineSidebar = React.useMemo(() => { + if (!item.threadCreatedFromMessage) { + return null; + } + return ( + + ); + }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); return ( + {inlineSidebar} ); diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -91,6 +91,7 @@ type ButtonProps = { ...Base, +progress: Node, + +isOpeningSidebar: boolean, }; type TooltipProps = { ...Base, @@ -363,10 +364,12 @@ invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; + const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, + isOpeningSidebar, }; return (