stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

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

@@ -1,5 +1,5 @@
-import React, { SetStateAction, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { ReactNode, useMemo, useState } from 'react';
+import { I18nManager, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -10,217 +10,134 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { MessageContentProps } from './MessageContent';
 import { MessageItemViewPropsWithContext } from './MessageItemView';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
-import { useStableCallback } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
-import { MessageStatusTypes } from '../../../utils/utils';
-
-export type MessageBubbleProps = Pick<
-  MessagesContextValue,
-  | 'reactionListPosition'
-  | 'MessageContent'
-  | 'ReactionListTop'
-  | 'MessageError'
-  | 'reactionListType'
-> &
-  Pick<
-    MessageContentProps,
-    | 'isVeryLastMessage'
-    | 'backgroundColor'
-    | 'messageGroupedSingleOrBottom'
-    | 'noBorder'
-    | 'message'
-    | 'setMessageContentWidth'
-  > &
-  Pick<MessageItemViewPropsWithContext, 'alignment'> & {
-    messageContentWidth: number;
-  };
-
-export const MessageBubble = React.memo(
-  ({
-    alignment,
-    reactionListPosition,
-    reactionListType,
-    setMessageContentWidth,
-    MessageContent,
-    ReactionListTop,
-    backgroundColor,
-    isVeryLastMessage,
-    messageGroupedSingleOrBottom,
-    noBorder,
-    MessageError,
-    message,
-  }: MessageBubbleProps) => {
-    const styles = useStyles({ alignment });
-    const isMessageErrorType =
-      message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
-
-    return (
-      <View style={styles.wrapper}>
-        {reactionListPosition === 'top' && ReactionListTop ? (
-          <View style={styles.reactionListTopContainer}>
-            <ReactionListTop type={reactionListType} />
-          </View>
-        ) : null}
-        <View style={styles.contentContainer}>
-          <MessageContent
-            backgroundColor={backgroundColor}
-            isVeryLastMessage={isVeryLastMessage}
-            messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-            noBorder={noBorder}
-            setMessageContentWidth={setMessageContentWidth}
-          />
-
-          {isMessageErrorType ? (
-            <View style={styles.errorContainer}>
-              <MessageError />
-            </View>
-          ) : null}
-        </View>
-      </View>
-    );
-  },
-);
 
 const AnimatedWrapper = Animated.createAnimatedComponent(View);
 
-export const SwipableMessageBubble = React.memo(
-  (
-    props: MessageBubbleProps &
-      Pick<MessagesContextValue, 'MessageSwipeContent'> &
-      Pick<
-        MessageItemViewPropsWithContext,
-        'shouldRenderSwipeableWrapper' | 'messageSwipeToReplyHitSlop'
-      > & { onSwipe: () => void },
-  ) => {
-    const { MessageSwipeContent, messageSwipeToReplyHitSlop, onSwipe, ...messageBubbleProps } =
-      props;
-
-    const styles = useStyles({ alignment: props.alignment });
-
-    const translateX = useSharedValue(0);
-    const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
-    const isSwiping = useSharedValue<boolean>(false);
-    const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
-
-    const SWIPABLE_THRESHOLD = 25;
-    const MINIMUM_DISTANCE = 8;
-
-    const triggerHaptic = NativeHandlers.triggerHaptic;
-
-    const setMessageContentWidth = useStableCallback((valueOrCallback: SetStateAction<number>) => {
-      if (typeof valueOrCallback === 'number') {
-        props.setMessageContentWidth(Math.ceil(valueOrCallback));
-        return;
-      }
-      props.setMessageContentWidth(valueOrCallback);
-    });
-
-    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;
-            const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
+  Pick<MessageItemViewPropsWithContext, 'messageSwipeToReplyHitSlop'> & {
+    children: ReactNode;
+    onSwipe: () => void;
+  };
 
-            // Only activate if there's significant horizontal movement
-            if (isHorizontalPanning && hasMinimumDistance) {
-              state.activate();
-              if (!isSwiping.value) {
-                runOnJS(setShouldRenderAnimatedWrapper)(true);
-              }
-              isSwiping.value = true;
-            } else if (hasMinimumDistance) {
-              // If there's significant movement but not horizontal, fail the gesture
-              state.fail();
-            }
-          })
-          .onStart(() => {
-            translateX.value = 0;
-          })
-          .onChange(({ translationX }) => {
-            if (translationX > 0) {
-              translateX.value = translationX;
+export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const isRTL = I18nManager.isRTL;
+  const swipeDirectionMultiplier = isRTL ? -1 : 1;
+
+  const styles = useStyles();
+
+  const translateX = useSharedValue(0);
+  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+  const isSwiping = useSharedValue<boolean>(false);
+  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
+
+  const SWIPABLE_THRESHOLD = 25;
+  const MINIMUM_DISTANCE = 8;
+
+  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;
+          const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+
+          // Only activate if there's significant horizontal movement
+          if (isHorizontalPanning && hasMinimumDistance) {
+            state.activate();
+            if (!isSwiping.value) {
+              runOnJS(setShouldRenderAnimatedWrapper)(true);
             }
-          })
-          .onEnd(() => {
-            if (translateX.value >= SWIPABLE_THRESHOLD) {
-              runOnJS(onSwipe)();
-              if (triggerHaptic) {
-                runOnJS(triggerHaptic)('impactMedium');
-              }
+            isSwiping.value = true;
+          } else if (hasMinimumDistance) {
+            // If there's significant movement but not horizontal, fail the gesture
+            state.fail();
+          }
+        })
+        .onStart(() => {
+          translateX.value = 0;
+        })
+        .onChange(({ translationX }) => {
+          const swipeDistance = translationX * swipeDirectionMultiplier;
+          if (swipeDistance > 0) {
+            translateX.value = swipeDistance;
+          }
+        })
+        .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,
-              },
-              () => {
-                runOnJS(setShouldRenderAnimatedWrapper)(false);
-              },
-            );
-          }),
-      [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
-    );
-
-    const swipeContentAnimatedStyle = useAnimatedStyle(
-      () => ({
-        opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
-        width: translateX.value,
-      }),
-      [],
-    );
-
-    return (
-      <GestureDetector gesture={swipeGesture}>
-        <View
-          hitSlop={messageSwipeToReplyHitSlop}
-          style={[
-            styles.contentWrapper,
-            props.messageContentWidth > 0 && shouldRenderAnimatedWrapper
-              ? { width: props.messageContentWidth }
-              : {},
-          ]}
-        >
-          {shouldRenderAnimatedWrapper ? (
-            <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
-              {MessageSwipeContent ? <MessageSwipeContent /> : null}
-            </AnimatedWrapper>
-          ) : null}
-          <MessageBubble {...messageBubbleProps} setMessageContentWidth={setMessageContentWidth} />
-        </View>
-      </GestureDetector>
-    );
-  },
-);
+          }
+          isSwiping.value = false;
+          translateX.value = withSpring(
+            0,
+            {
+              dampingRatio: 1,
+              duration: 500,
+              overshootClamping: true,
+              stiffness: 1,
+            },
+            () => {
+              runOnJS(setShouldRenderAnimatedWrapper)(false);
+            },
+          );
+        }),
+    [
+      messageSwipeToReplyHitSlop,
+      onSwipe,
+      swipeDirectionMultiplier,
+      touchStart,
+      isSwiping,
+      translateX,
+      triggerHaptic,
+    ],
+  );
+
+  const swipeContentAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
+      width: translateX.value,
+    }),
+    [],
+  );
+
+  return (
+    <GestureDetector gesture={swipeGesture}>
+      <View hitSlop={messageSwipeToReplyHitSlop} style={styles.contentWrapper}>
+        {shouldRenderAnimatedWrapper ? (
+          <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
+            {MessageSwipeContent ? <MessageSwipeContent /> : null}
+          </AnimatedWrapper>
+        ) : null}
+        {children}
+      </View>
+    </GestureDetector>
+  );
+});
 
-const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
+const useStyles = () => {
   const {
     theme: {
-      messageItemView: {
-        bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
-        contentWrapper,
-        swipeContentContainer,
-      },
+      messageItemView: { contentWrapper, swipeContentContainer },
     },
   } = useTheme();
   return useMemo(() => {
@@ -231,34 +148,9 @@ const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
         zIndex: 1, // To hide the stick inside the message content
         ...contentWrapper,
       },
-      contentContainer: {
-        alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
-        ...contentContainer,
-      },
       swipeContentContainer: {
         ...swipeContentContainer,
       },
-      errorContainer: {
-        position: 'absolute',
-        top: 8,
-        right: -12,
-        ...errorContainer,
-      },
-      reactionListTopContainer: {
-        alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
-        ...reactionListTopContainer,
-      },
-      wrapper: {
-        ...wrapper,
-      },
     });
-  }, [
-    alignment,
-    contentContainer,
-    contentWrapper,
-    errorContainer,
-    reactionListTopContainer,
-    swipeContentContainer,
-    wrapper,
-  ]);
+  }, [contentWrapper, swipeContentContainer]);
 };

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -1,12 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  AnimatableNumericValue,
-  ColorValue,
-  LayoutChangeEvent,
-  Pressable,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -89,7 +82,6 @@ export type MessageContentPropsWithContext = Pick<
     | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
-    setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
     /**
      * Background color for the message content
      */
@@ -147,7 +139,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     otherAttachments,
     preventPress,
     Reply,
-    setMessageContentWidth,
     StreamingMessageView,
     hidePaddingTop,
     hidePaddingHorizontal,
@@ -181,14 +172,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     },
   } = useTheme();
 
-  const onLayout: (event: LayoutChangeEvent) => void = ({
-    nativeEvent: {
-      layout: { width },
-    },
-  }) => {
-    setMessageContentWidth(width);
-  };
-
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
@@ -352,7 +335,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View onLayout={onLayout} style={wrapper}>
+      <View style={wrapper}>
         <View
           style={[
             styles.containerInner,
@@ -551,10 +534,7 @@ const MemoizedMessageContent = React.memo(
   areEqual,
 ) as typeof MessageContentWithContext;
 
-export type MessageContentProps = Partial<
-  Omit<MessageContentPropsWithContext, 'setMessageContentWidth'>
-> &
-  Pick<MessageContentPropsWithContext, 'setMessageContentWidth'>;
+export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 
 /**
  * Child of MessageItemView that displays a message's content

package/src/components/Message/MessageItemView/MessageDeleted.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { CircleBan } from '../../../icons/CircleBan';
+import { CircleBan } from '../../../icons/no-sign';
 import { components, primitives } from '../../../theme';
 
 type MessageDeletedComponentProps = {

package/src/components/Message/MessageItemView/MessageError.tsx

@@ -1,7 +1,35 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { ErrorBadge } from '../../ui/Badge/ErrorBadge';
 
 export const MessageError = () => {
-  return <ErrorBadge size='sm' testID='message-error' />;
+  const styles = useStyles();
+
+  return (
+    <View style={styles.wrapper}>
+      <ErrorBadge size='sm' testID='message-error' />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          borderRadius: primitives.radiusMax,
+          borderWidth: 2,
+          borderColor: semantics.badgeBorder,
+        },
+      }),
+    [semantics],
+  );
 };

package/src/components/Message/MessageItemView/MessageFooter.tsx

@@ -37,7 +37,7 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus'> &
+  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -50,6 +50,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     members,
     message,
     MessageStatus,
+    MessageTimestamp,
     showMessageStatus,
   } = props;
   const styles = useStyles();
@@ -77,9 +78,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   return (
     <View style={[styles.container, container]} testID='message-status-time'>
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[styles.name, name]}>{message.user.name}</Text>
+        <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
+          {message.user.name}
+        </Text>
       ) : null}
-      {showMessageStatus && <MessageStatus formattedDate={formattedDate} timestamp={date} />}
+      {showMessageStatus ? <MessageStatus /> : null}
+      <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
       {isEdited ? <Text style={[styles.editedText, editedText]}>{t('Edited')}</Text> : null}
     </View>
   );
@@ -201,6 +205,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
+        maxWidth: '100%',
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'center',
@@ -208,6 +213,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       name: {
+        flexShrink: 1,
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,