stream-chat-react-native-core 9.4.0-beta.1 → 9.4.0-beta.2

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 
 import { SwipableMessageWrapper } from './MessageBubble';
 
@@ -22,25 +22,7 @@ import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
 
-type GroupType = 'single' | 'top' | 'middle' | 'bottom' | undefined;
-
-const useStyles = ({
-  alignment,
-  isVeryLastMessage,
-  messageGroupedSingle,
-  messageGroupedBottom,
-  messageGroupedTop,
-  messageGroupedMiddle,
-  enableMessageGroupingByUser,
-}: {
-  alignment: Alignment;
-  isVeryLastMessage: boolean;
-  messageGroupedSingle: boolean;
-  messageGroupedBottom: boolean;
-  messageGroupedTop: boolean;
-  messageGroupedMiddle: boolean;
-  enableMessageGroupingByUser: boolean;
-}) => {
+const useStyles = ({ alignment }: { alignment: Alignment }) => {
   const {
     theme: {
       messageItemView: {
@@ -53,24 +35,11 @@ const useStyles = ({
         repliesContainer,
         leftAlignItems,
         rightAlignItems,
-        messageGroupedSingleStyles,
-        messageGroupedBottomStyles,
-        messageGroupedTopStyles,
-        messageGroupedMiddleStyles,
-        lastMessageContainer,
       },
     },
   } = useTheme();
 
-  const groupType: GroupType = useMemo(() => {
-    if (messageGroupedSingle) return 'single';
-    if (messageGroupedTop) return 'top';
-    if (messageGroupedMiddle) return 'middle';
-    if (messageGroupedBottom) return 'bottom';
-    return undefined;
-  }, [messageGroupedSingle, messageGroupedTop, messageGroupedMiddle, messageGroupedBottom]);
-
-  const styles = useMemo(
+  return useMemo(
     () =>
       StyleSheet.create({
         baseContainer: {
@@ -129,73 +98,6 @@ const useStyles = ({
       rightAlignItems,
     ],
   );
-
-  const groupStylesMap = useMemo(() => {
-    return {
-      single: {
-        paddingVertical: primitives.spacingXs,
-        ...messageGroupedSingleStyles,
-      },
-      top: {
-        paddingTop: primitives.spacingXs,
-        paddingBottom: primitives.spacingXxs,
-        ...messageGroupedTopStyles,
-      },
-      middle: {
-        paddingBottom: primitives.spacingXxs,
-        ...messageGroupedMiddleStyles,
-      },
-      bottom: {
-        paddingBottom: primitives.spacingXs,
-        ...messageGroupedBottomStyles,
-      },
-    };
-  }, [
-    messageGroupedBottomStyles,
-    messageGroupedMiddleStyles,
-    messageGroupedSingleStyles,
-    messageGroupedTopStyles,
-  ]);
-
-  const containerStyle = useMemo(() => {
-    let results: ViewStyle = styles.baseContainer;
-
-    if (groupType) {
-      results = {
-        ...results,
-        ...groupStylesMap[groupType],
-      };
-    }
-
-    if (isVeryLastMessage && enableMessageGroupingByUser) {
-      results = {
-        ...results,
-        marginBottom: primitives.spacingSm,
-        ...lastMessageContainer,
-      };
-    }
-
-    return results;
-  }, [
-    styles.baseContainer,
-    groupStylesMap,
-    groupType,
-    isVeryLastMessage,
-    enableMessageGroupingByUser,
-    lastMessageContainer,
-  ]);
-
-  return {
-    container: containerStyle,
-    bubbleContentContainer: styles.bubbleContentContainer,
-    bubbleErrorContainer: styles.bubbleErrorContainer,
-    bubbleReactionListTopContainer: styles.bubbleReactionListTopContainer,
-    bubbleWrapper: styles.bubbleWrapper,
-    contentContainer: styles.contentContainer,
-    repliesContainer: styles.repliesContainer,
-    leftAlignItems: styles.leftAlignItems,
-    rightAlignItems: styles.rightAlignItems,
-  };
 };
 
 export type MessageItemViewPropsWithContext = Pick<
@@ -232,7 +134,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     channel,
     contextMenuAnchorRef,
     customMessageSwipeAction,
-    enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
     hasAttachmentActions,
@@ -273,22 +174,10 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     isMessageReceivedOrErrorType,
     isMessageTypeDeleted,
     isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
     messageGroupedSingleOrBottom,
-    messageGroupedMiddle,
   } = useMessageData({});
 
-  const styles = useStyles({
-    alignment,
-    isVeryLastMessage,
-    messageGroupedSingle,
-    messageGroupedBottom,
-    messageGroupedTop,
-    messageGroupedMiddle,
-    enableMessageGroupingByUser,
-  });
+  const styles = useStyles({ alignment });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
   const hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
@@ -324,7 +213,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const itemViewContent = (
-    <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
+    <View pointerEvents='box-none' style={styles.baseContainer} testID='message-item-view-wrapper'>
       {alignment === 'left' ? <MessageAuthor /> : null}
       {isMessageTypeDeleted ? (
         <MessageDeleted date={message.created_at} groupStyle={groupStyle} />

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx

@@ -223,38 +223,47 @@ describe('MessageItemView', () => {
     });
   });
 
-  it('applies correct styles for when group styles are not single or bottom', async () => {
+  it('keeps message-item-view-wrapper free of group-positional padding', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-item-view-wrapper').props.style).toMatchObject({
+      const innerStyle = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(innerStyle).toMatchObject({
         alignItems: 'flex-end',
         gap: 8,
         flexDirection: 'row',
-        paddingTop: 8,
-        paddingBottom: 4,
       });
+      expect(innerStyle.paddingTop).toBeUndefined();
+      expect(innerStyle.paddingBottom).toBeUndefined();
     });
   });
 
-  it('applies correct styles for when group styles are single/bottom and not last message', async () => {
+  it('hoists the per-group padding delta onto message-wrapper for top messages', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({ message });
+    renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      const data = screen.getByTestId('message-item-view-wrapper').props.style;
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingTop: 8 })]),
+      );
+    });
+  });
 
-      expect(data).toMatchObject({
-        alignItems: 'flex-end',
-        gap: 8,
-        flexDirection: 'row',
-        paddingBottom: 8,
-      });
+  it('hoists the per-group padding delta onto message-wrapper for bottom messages', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-wrapper').props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining({ paddingBottom: 8 })]),
+      );
     });
   });
 

package/src/components/MessageMenu/MessageActionList.tsx

@@ -78,7 +78,7 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           borderRadius: primitives.radiusLg,
-          marginTop: 6,
+          marginTop: 8,
           backgroundColor: semantics.backgroundCoreElevation2,
           borderWidth: 1,
           borderColor: semantics.borderCoreDefault,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -337,6 +337,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -370,7 +371,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -671,6 +671,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -704,7 +705,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1039,6 +1039,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1072,7 +1073,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1365,7 +1365,9 @@ exports[`Thread should match thread snapshot 1`] = `
                   [
                     undefined,
                     {
+                      "marginBottom": 12,
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1399,8 +1401,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "marginBottom": 12,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.4.0-beta.1"
+  "version": "9.4.0-beta.2"
 }