Page MenuHomePhabricator
Files F2771524

D9054.id30803.diff
No OneTemporary
Actions

D9054.id30803.diff
View Options

diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -135,13 +135,23 @@
[children, iconColor],
);
- return (
- <View style={animationContainerStyle}>
- <Animated.View style={swipeSnakeContainerStyle}>
- <View style={swipeSnakeStyle}>{coloredIcon}</View>
- </Animated.View>
- </View>
+ const swipeSnake = React.useMemo(
+ () => (
+ <View style={animationContainerStyle}>
+ <Animated.View style={swipeSnakeContainerStyle}>
+ <View style={swipeSnakeStyle}>{coloredIcon}</View>
+ </Animated.View>
+ </View>
+ ),
+ [
+ animationContainerStyle,
+ coloredIcon,
+ swipeSnakeContainerStyle,
+ swipeSnakeStyle,
+ ],
);
+
+ return swipeSnake;
}
type Props = {
@@ -247,83 +257,130 @@
[contentStyle, transformContentStyle],
);
- if (!triggerReply && !triggerSidebar) {
- return (
- <PanGestureHandler enabled={false}>
- <Animated.View style={contentStyle}>{children}</Animated.View>
- </PanGestureHandler>
- );
- }
-
const threadColor = `#${props.threadColor}`;
const tinyThreadColor = tinycolor(threadColor);
- const snakes = [];
- if (triggerReply) {
- const replySnakeOpacityInterpolator = isViewer
- ? interpolateOpacityForViewerPrimarySnake
- : interpolateOpacityForNonViewerPrimarySnake;
- snakes.push(
+ const replyIcon = React.useMemo(
+ () => <CommIcon name="reply-filled" size={14} />,
+ [],
+ );
+ const replySwipeSnake = React.useMemo(
+ () => (
<SwipeSnake
isViewer={isViewer}
translateX={translateX}
color={threadColor}
- opacityInterpolator={replySnakeOpacityInterpolator}
+ opacityInterpolator={
+ isViewer
+ ? interpolateOpacityForViewerPrimarySnake
+ : interpolateOpacityForNonViewerPrimarySnake
+ }
key="reply"
>
- <CommIcon name="reply-filled" size={14} />
- </SwipeSnake>,
- );
- }
- if (triggerReply && triggerSidebar) {
- const sidebarSnakeTranslateXInterpolator = isViewer
- ? interpolateTranslateXForViewerSecondarySnake
- : interpolateTranslateXForNonViewerSecondarySnake;
- const darkerThreadColor = tinyThreadColor
- .darken(tinyThreadColor.isDark() ? 10 : 20)
- .toString();
- snakes.push(
+ {replyIcon}
+ </SwipeSnake>
+ ),
+ [isViewer, replyIcon, threadColor, translateX],
+ );
+
+ const sidebarIcon = React.useMemo(
+ () => <CommIcon name="sidebar-filled" size={16} />,
+ [],
+ );
+ const sidebarSwipeSnakeWithReplySwipeSnake = React.useMemo(
+ () => (
<SwipeSnake
isViewer={isViewer}
translateX={translateX}
- color={darkerThreadColor}
- translateXInterpolator={sidebarSnakeTranslateXInterpolator}
+ color={tinyThreadColor
+ .darken(tinyThreadColor.isDark() ? 10 : 20)
+ .toString()}
+ translateXInterpolator={
+ isViewer
+ ? interpolateTranslateXForViewerSecondarySnake
+ : interpolateTranslateXForNonViewerSecondarySnake
+ }
key="sidebar"
>
- <CommIcon name="sidebar-filled" size={16} />
- </SwipeSnake>,
- );
- } else if (triggerSidebar) {
- const sidebarSnakeOpacityInterpolator = isViewer
- ? interpolateOpacityForViewerPrimarySnake
- : interpolateOpacityForNonViewerPrimarySnake;
- snakes.push(
+ {sidebarIcon}
+ </SwipeSnake>
+ ),
+ [isViewer, sidebarIcon, tinyThreadColor, translateX],
+ );
+
+ const sidebarSwipeSnakeWithoutReplySwipeSnake = React.useMemo(
+ () => (
<SwipeSnake
isViewer={isViewer}
translateX={translateX}
color={threadColor}
- opacityInterpolator={sidebarSnakeOpacityInterpolator}
+ opacityInterpolator={
+ isViewer
+ ? interpolateOpacityForViewerPrimarySnake
+ : interpolateOpacityForNonViewerPrimarySnake
+ }
key="sidebar"
>
- <CommIcon name="sidebar-filled" size={16} />
- </SwipeSnake>,
- );
- }
+ {sidebarIcon}
+ </SwipeSnake>
+ ),
+ [isViewer, sidebarIcon, threadColor, translateX],
+ );
- snakes.push(
- <PanGestureHandler
- maxPointers={1}
- activeOffsetX={panGestureHandlerActiveOffsetX}
- onGestureEvent={swipeEvent}
- failOffsetX={isViewer ? 5 : -5}
- failOffsetY={panGestureHandlerFailOffsetY}
- key="gesture"
- >
- <Animated.View style={panGestureHandlerStyle}>{children}</Animated.View>
- </PanGestureHandler>,
+ const panGestureHandler = React.useMemo(
+ () => (
+ <PanGestureHandler
+ maxPointers={1}
+ activeOffsetX={panGestureHandlerActiveOffsetX}
+ onGestureEvent={swipeEvent}
+ failOffsetX={isViewer ? 5 : -5}
+ failOffsetY={panGestureHandlerFailOffsetY}
+ key="gesture"
+ >
+ <Animated.View style={panGestureHandlerStyle}>{children}</Animated.View>
+ </PanGestureHandler>
+ ),
+ [
+ children,
+ isViewer,
+ panGestureHandlerActiveOffsetX,
+ panGestureHandlerFailOffsetY,
+ panGestureHandlerStyle,
+ swipeEvent,
+ ],
);
- return snakes;
+ const swipeableMessage = React.useMemo(() => {
+ if (!triggerReply && !triggerSidebar) {
+ return (
+ <PanGestureHandler enabled={false}>
+ <Animated.View style={contentStyle}>{children}</Animated.View>
+ </PanGestureHandler>
+ );
+ }
+ const snakes = [];
+ if (triggerReply) {
+ snakes.push(replySwipeSnake);
+ }
+ if (triggerReply && triggerSidebar) {
+ snakes.push(sidebarSwipeSnakeWithReplySwipeSnake);
+ } else if (triggerSidebar) {
+ snakes.push(sidebarSwipeSnakeWithoutReplySwipeSnake);
+ }
+ snakes.push(panGestureHandler);
+ return snakes;
+ }, [
+ children,
+ contentStyle,
+ panGestureHandler,
+ replySwipeSnake,
+ sidebarSwipeSnakeWithReplySwipeSnake,
+ sidebarSwipeSnakeWithoutReplySwipeSnake,
+ triggerReply,
+ triggerSidebar,
+ ]);
+
+ return swipeableMessage;
}
const styles = {

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 11:34 PM (20 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2154578
Default Alt Text
D9054.id30803.diff (6 KB)

Event Timeline