Page MenuHomePhabricator
Files F3369992

D4825.id15599.diff
No OneTemporary
Actions

D4825.id15599.diff
View Options

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 (
+ <Animated.View style={inlineSidebarContainer}>
+ <Animated.View style={inlineSidebarStyle}>
+ <InlineSidebar threadInfo={item.threadCreatedFromMessage} disabled />
+ </Animated.View>
+ </Animated.View>
+ );
+}
+
+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 (
+ <TooltipInlineSidebar
+ item={item}
+ positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
+ isOpeningSidebar={isOpeningSidebar}
+ progress={progress}
+ windowWidth={windowWidth}
+ initialCoordinates={initialCoordinates}
+ />
+ );
+ }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
+
return (
<Animated.View style={messageContainerStyle}>
<SidebarInputBarHeightMeasurer
@@ -77,6 +96,7 @@
onPress={navigation.goBackOnce}
onLongPress={navigation.goBackOnce}
/>
+ {inlineSidebar}
</Animated.View>
);
}
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 (
+ <TooltipInlineSidebar
+ item={item}
+ positioning="center"
+ isOpeningSidebar={isOpeningSidebar}
+ progress={progress}
+ windowWidth={windowWidth}
+ initialCoordinates={initialCoordinates}
+ />
+ );
+ }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
+
return (
<Animated.View style={messageContainerStyle}>
<SidebarInputBarHeightMeasurer
@@ -68,6 +87,7 @@
<Timestamp time={item.messageInfo.time} display="modal" />
</Animated.View>
<InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
+ {inlineSidebar}
</Animated.View>
);
}
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 (
+ <TooltipInlineSidebar
+ item={item}
+ positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
+ isOpeningSidebar={isOpeningSidebar}
+ progress={progress}
+ windowWidth={windowWidth}
+ initialCoordinates={initialCoordinates}
+ />
+ );
+ }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
return (
<MessageListContextProvider threadID={threadID}>
<SidebarInputBarHeightMeasurer
@@ -80,6 +98,7 @@
threadColorOverride={threadColorOverride}
isThreadColorDarkOverride={isThreadColorDarkOverride}
/>
+ {inlineSidebar}
</Animated.View>
</MessageListContextProvider>
);
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> = {
...Base,
+progress: Node,
+ +isOpeningSidebar: boolean,
};
type TooltipProps<Base> = {
...Base,
@@ -363,10 +364,12 @@
invariant(overlayContext, 'Tooltip should have OverlayContext');
const { position } = overlayContext;
+ const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
const buttonProps: ButtonProps<BaseTooltipPropsType> = {
...navAndRouteForFlow,
progress: position,
+ isOpeningSidebar,
};
return (

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 12:37 AM (20 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2587056
Default Alt Text
D4825.id15599.diff (11 KB)

Event Timeline