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 ( - - - {coloredIcon} - - + const swipeSnake = React.useMemo( + () => ( + + + {coloredIcon} + + + ), + [ + animationContainerStyle, + coloredIcon, + swipeSnakeContainerStyle, + swipeSnakeStyle, + ], ); + + return swipeSnake; } type Props = { @@ -247,83 +257,123 @@ [contentStyle, transformContentStyle], ); - if (!triggerReply && !triggerSidebar) { - return ( - - {children} - - ); - } - const threadColor = `#${props.threadColor}`; const tinyThreadColor = tinycolor(threadColor); - const snakes = []; - if (triggerReply) { - const replySnakeOpacityInterpolator = isViewer - ? interpolateOpacityForViewerPrimarySnake - : interpolateOpacityForNonViewerPrimarySnake; - snakes.push( + const replyIcon = React.useMemo( + () => , + [], + ); + const replySwipeSnake = React.useMemo( + () => ( - - , - ); - } - if (triggerReply && triggerSidebar) { - const sidebarSnakeTranslateXInterpolator = isViewer - ? interpolateTranslateXForViewerSecondarySnake - : interpolateTranslateXForNonViewerSecondarySnake; - const darkerThreadColor = tinyThreadColor - .darken(tinyThreadColor.isDark() ? 10 : 20) - .toString(); - snakes.push( + {replyIcon} + + ), + [isViewer, replyIcon, threadColor, translateX], + ); + + const sidebarIcon = React.useMemo( + () => , + [], + ); + const sidebarSwipeSnakeWithReplySwipeSnake = React.useMemo( + () => ( - - , - ); - } else if (triggerSidebar) { - const sidebarSnakeOpacityInterpolator = isViewer - ? interpolateOpacityForViewerPrimarySnake - : interpolateOpacityForNonViewerPrimarySnake; - snakes.push( + {sidebarIcon} + + ), + [isViewer, sidebarIcon, tinyThreadColor, translateX], + ); + + const sidebarSwipeSnakeWithoutReplySwipeSnake = React.useMemo( + () => ( - - , - ); - } + {sidebarIcon} + + ), + [isViewer, sidebarIcon, threadColor, translateX], + ); - snakes.push( - - {children} - , + const panGestureHandler = React.useMemo( + () => ( + + {children} + + ), + [children, isViewer, panGestureHandlerStyle, swipeEvent], ); - return snakes; + const swipeableMessage = React.useMemo(() => { + if (!triggerReply && !triggerSidebar) { + return ( + + {children} + + ); + } + 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 = {