stream-chat-react-native-core 8.6.1 → 8.6.2-beta.1

package/src/components/Message/MessageSimple/MessageBubble.tsx

@@ -0,0 +1,235 @@
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { MessageContentProps } from './MessageContent';
+import { MessageSimplePropsWithContext } from './MessageSimple';
+import { ReactionListTopProps } from './ReactionList/ReactionListTop';
+
+import { MessagesContextValue, useTheme } from '../../../contexts';
+
+import { NativeHandlers } from '../../../native';
+
+export type MessageBubbleProps = Pick<
+  MessageSimplePropsWithContext,
+  'reactionListPosition' | 'MessageContent' | 'ReactionListTop'
+> &
+  Pick<
+    MessageContentProps,
+    | 'isVeryLastMessage'
+    | 'backgroundColor'
+    | 'messageGroupedSingleOrBottom'
+    | 'noBorder'
+    | 'setMessageContentWidth'
+  > &
+  Pick<ReactionListTopProps, 'messageContentWidth'>;
+
+export const MessageBubble = React.memo(
+  ({
+    reactionListPosition,
+    messageContentWidth,
+    setMessageContentWidth,
+    MessageContent,
+    ReactionListTop,
+    backgroundColor,
+    isVeryLastMessage,
+    messageGroupedSingleOrBottom,
+    noBorder,
+  }: MessageBubbleProps) => {
+    const {
+      theme: {
+        messageSimple: { contentWrapper },
+      },
+    } = useTheme();
+
+    return (
+      <View style={[styles.contentWrapper, contentWrapper]}>
+        <MessageContent
+          backgroundColor={backgroundColor}
+          isVeryLastMessage={isVeryLastMessage}
+          messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+          noBorder={noBorder}
+          setMessageContentWidth={setMessageContentWidth}
+        />
+        {reactionListPosition === 'top' && ReactionListTop ? (
+          <ReactionListTop messageContentWidth={messageContentWidth} />
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const AnimatedWrapper = Animated.createAnimatedComponent(View);
+
+export const SwipableMessageBubble = React.memo(
+  (
+    props: MessageBubbleProps &
+      Pick<MessagesContextValue, 'MessageSwipeContent'> &
+      Pick<
+        MessageSimplePropsWithContext,
+        'shouldRenderSwipeableWrapper' | 'messageSwipeToReplyHitSlop'
+      > & { onSwipe: () => void },
+  ) => {
+    const {
+      MessageSwipeContent,
+      shouldRenderSwipeableWrapper,
+      messageSwipeToReplyHitSlop,
+      onSwipe,
+      ...messageBubbleProps
+    } = props;
+
+    const {
+      theme: {
+        messageSimple: { contentWrapper, swipeContentContainer },
+      },
+    } = useTheme();
+
+    const translateX = useSharedValue(0);
+    const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+    const isSwiping = useSharedValue<boolean>(false);
+    const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(
+      shouldRenderSwipeableWrapper,
+    );
+
+    const SWIPABLE_THRESHOLD = 25;
+
+    const triggerHaptic = NativeHandlers.triggerHaptic;
+
+    const swipeGesture = useMemo(
+      () =>
+        Gesture.Pan()
+          .hitSlop(messageSwipeToReplyHitSlop)
+          .onBegin((event) => {
+            touchStart.value = { x: event.x, y: event.y };
+          })
+          .onTouchesMove((event, state) => {
+            if (!touchStart.value || !event.changedTouches.length) {
+              state.fail();
+              return;
+            }
+
+            const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
+            const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
+            const isHorizontalPanning = xDiff > yDiff;
+
+            if (isHorizontalPanning) {
+              state.activate();
+              isSwiping.value = true;
+              if (!shouldRenderSwipeableWrapper) {
+                runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+              }
+            } else {
+              state.fail();
+            }
+          })
+          .onStart(() => {
+            translateX.value = 0;
+          })
+          .onChange(({ translationX }) => {
+            if (translationX > 0) {
+              translateX.value = translationX;
+            }
+          })
+          .onEnd(() => {
+            if (translateX.value >= SWIPABLE_THRESHOLD) {
+              runOnJS(onSwipe)();
+              if (triggerHaptic) {
+                runOnJS(triggerHaptic)('impactMedium');
+              }
+            }
+            isSwiping.value = false;
+            translateX.value = withSpring(
+              0,
+              {
+                dampingRatio: 1,
+                duration: 500,
+                overshootClamping: true,
+                stiffness: 1,
+              },
+              () => {
+                if (!shouldRenderSwipeableWrapper) {
+                  runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+                }
+              },
+            );
+          }),
+      [
+        isSwiping,
+        messageSwipeToReplyHitSlop,
+        onSwipe,
+        touchStart,
+        translateX,
+        triggerHaptic,
+        shouldRenderSwipeableWrapper,
+      ],
+    );
+
+    const messageBubbleAnimatedStyle = useAnimatedStyle(
+      () => ({
+        transform: [{ translateX: translateX.value }],
+      }),
+      [],
+    );
+
+    const swipeContentAnimatedStyle = useAnimatedStyle(
+      () => ({
+        opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
+        transform: [
+          {
+            translateX: interpolate(
+              translateX.value,
+              [0, SWIPABLE_THRESHOLD],
+              [-SWIPABLE_THRESHOLD, 0],
+              Extrapolation.CLAMP,
+            ),
+          },
+        ],
+      }),
+      [],
+    );
+
+    return (
+      <GestureDetector gesture={swipeGesture}>
+        <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
+          {shouldRenderAnimatedWrapper ? (
+            <>
+              <AnimatedWrapper
+                style={[
+                  styles.swipeContentContainer,
+                  swipeContentAnimatedStyle,
+                  swipeContentContainer,
+                ]}
+              >
+                {MessageSwipeContent ? <MessageSwipeContent /> : null}
+              </AnimatedWrapper>
+              <AnimatedWrapper pointerEvents='box-none' style={messageBubbleAnimatedStyle}>
+                <MessageBubble {...messageBubbleProps} />
+              </AnimatedWrapper>
+            </>
+          ) : (
+            <MessageBubble {...messageBubbleProps} />
+          )}
+        </View>
+      </GestureDetector>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  contentWrapper: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  swipeContentContainer: {
+    position: 'absolute',
+  },
+});

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -1,18 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-
-import Animated, {
-  Extrapolation,
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-
-const AnimatedWrapper = Animated.createAnimatedComponent(View);
+import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
 
 import {
   MessageContextValue,
@@ -25,7 +14,6 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStableCallback } from '../../../hooks/useStableCallback';
-import { NativeHandlers } from '../../../native';
 
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
@@ -36,10 +24,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   contentContainer: {},
-  contentWrapper: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
   lastMessageContainer: {
     marginBottom: 12,
   },
@@ -53,9 +37,6 @@ const styles = StyleSheet.create({
   rightAlignItems: {
     alignItems: 'flex-end',
   },
-  swipeContentContainer: {
-    position: 'absolute',
-  },
 });
 
 export type MessageSimplePropsWithContext = Pick<
@@ -149,13 +130,11 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
           receiverMessageBackgroundColor,
           senderMessageBackgroundColor,
         },
-        contentWrapper,
         headerWrapper,
         lastMessageContainer,
         messageGroupedSingleOrBottomContainer,
         messageGroupedTopContainer,
         reactionListTop: { position: reactionPosition },
-        swipeContentContainer,
       },
     },
   } = useTheme();
@@ -212,13 +191,6 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
 
   const repliesCurveColor = isMessageReceivedOrErrorType ? grey_gainsboro : backgroundColor;
 
-  const translateX = useSharedValue(0);
-  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
-  const isSwiping = useSharedValue<boolean>(false);
-  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(
-    shouldRenderSwipeableWrapper,
-  );
-
   const onSwipeActionHandler = useStableCallback(() => {
     if (customMessageSwipeAction) {
       customMessageSwipeAction({ channel, message });
@@ -227,169 +199,6 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     setQuotedMessage(message);
   });
 
-  const THRESHOLD = 25;
-
-  const triggerHaptic = NativeHandlers.triggerHaptic;
-
-  const swipeGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .hitSlop(messageSwipeToReplyHitSlop)
-        .onBegin((event) => {
-          touchStart.value = { x: event.x, y: event.y };
-        })
-        .onTouchesMove((event, state) => {
-          if (!touchStart.value || !event.changedTouches.length) {
-            state.fail();
-            return;
-          }
-
-          const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
-          const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
-          const isHorizontalPanning = xDiff > yDiff;
-
-          if (isHorizontalPanning) {
-            state.activate();
-            isSwiping.value = true;
-            if (!shouldRenderSwipeableWrapper) {
-              runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
-            }
-          } else {
-            state.fail();
-          }
-        })
-        .onStart(() => {
-          translateX.value = 0;
-        })
-        .onChange(({ translationX }) => {
-          if (translationX > 0) {
-            translateX.value = translationX;
-          }
-        })
-        .onEnd(() => {
-          if (translateX.value >= THRESHOLD) {
-            runOnJS(onSwipeActionHandler)();
-            if (triggerHaptic) {
-              runOnJS(triggerHaptic)('impactMedium');
-            }
-          }
-          isSwiping.value = false;
-          translateX.value = withSpring(
-            0,
-            {
-              dampingRatio: 1,
-              duration: 500,
-              overshootClamping: true,
-              stiffness: 1,
-            },
-            () => {
-              if (!shouldRenderSwipeableWrapper) {
-                runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
-              }
-            },
-          );
-        }),
-    [
-      isSwiping,
-      messageSwipeToReplyHitSlop,
-      onSwipeActionHandler,
-      touchStart,
-      translateX,
-      triggerHaptic,
-      shouldRenderSwipeableWrapper,
-    ],
-  );
-
-  const messageBubbleAnimatedStyle = useAnimatedStyle(
-    () => ({
-      transform: [{ translateX: translateX.value }],
-    }),
-    [],
-  );
-
-  const swipeContentAnimatedStyle = useAnimatedStyle(
-    () => ({
-      opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
-      transform: [
-        {
-          translateX: interpolate(
-            translateX.value,
-            [0, THRESHOLD],
-            [-THRESHOLD, 0],
-            Extrapolation.CLAMP,
-          ),
-        },
-      ],
-    }),
-    [],
-  );
-
-  const renderMessageBubble = useMemo(
-    () => (
-      <View style={[styles.contentWrapper, contentWrapper]}>
-        <MessageContent
-          backgroundColor={backgroundColor}
-          isVeryLastMessage={isVeryLastMessage}
-          messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-          noBorder={noBorder}
-          setMessageContentWidth={setMessageContentWidth}
-        />
-        {reactionListPosition === 'top' && ReactionListTop ? (
-          <ReactionListTop messageContentWidth={messageContentWidth} />
-        ) : null}
-      </View>
-    ),
-    [
-      messageContentWidth,
-      reactionListPosition,
-      MessageContent,
-      ReactionListTop,
-      backgroundColor,
-      contentWrapper,
-      isVeryLastMessage,
-      messageGroupedSingleOrBottom,
-      noBorder,
-    ],
-  );
-
-  const renderAnimatedMessageBubble = useMemo(
-    () => (
-      <GestureDetector gesture={swipeGesture}>
-        <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
-          {shouldRenderAnimatedWrapper ? (
-            <>
-              <AnimatedWrapper
-                style={[
-                  styles.swipeContentContainer,
-                  swipeContentAnimatedStyle,
-                  swipeContentContainer,
-                ]}
-              >
-                {MessageSwipeContent ? <MessageSwipeContent /> : null}
-              </AnimatedWrapper>
-              <AnimatedWrapper pointerEvents='box-none' style={messageBubbleAnimatedStyle}>
-                {renderMessageBubble}
-              </AnimatedWrapper>
-            </>
-          ) : (
-            renderMessageBubble
-          )}
-        </View>
-      </GestureDetector>
-    ),
-    [
-      MessageSwipeContent,
-      contentWrapper,
-      shouldRenderAnimatedWrapper,
-      messageBubbleAnimatedStyle,
-      messageSwipeToReplyHitSlop,
-      renderMessageBubble,
-      swipeContentAnimatedStyle,
-      swipeContentContainer,
-      swipeGesture,
-    ],
-  );
-
   return (
     <View
       style={[
@@ -448,7 +257,35 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
             )}
             {message.pinned ? <MessagePinnedHeader /> : null}
           </View>
-          {enableSwipeToReply ? renderAnimatedMessageBubble : renderMessageBubble}
+          {enableSwipeToReply ? (
+            <SwipableMessageBubble
+              backgroundColor={backgroundColor}
+              isVeryLastMessage={isVeryLastMessage}
+              MessageContent={MessageContent}
+              messageContentWidth={messageContentWidth}
+              messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+              MessageSwipeContent={MessageSwipeContent}
+              messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+              noBorder={noBorder}
+              onSwipe={onSwipeActionHandler}
+              reactionListPosition={reactionListPosition}
+              ReactionListTop={ReactionListTop}
+              setMessageContentWidth={setMessageContentWidth}
+              shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
+            />
+          ) : (
+            <MessageBubble
+              backgroundColor={backgroundColor}
+              isVeryLastMessage={isVeryLastMessage}
+              MessageContent={MessageContent}
+              messageContentWidth={messageContentWidth}
+              messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+              noBorder={noBorder}
+              reactionListPosition={reactionListPosition}
+              ReactionListTop={ReactionListTop}
+              setMessageContentWidth={setMessageContentWidth}
+            />
+          )}
           {reactionListPosition === 'bottom' && ReactionListBottom ? <ReactionListBottom /> : null}
           <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
           <MessageFooter date={message.created_at} isDeleted={!!isMessageTypeDeleted} />