stream-chat-react-native-core 5.40.0-rc.2 → 5.40.0

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -12,47 +12,26 @@ import {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { useMessageData } from '../hooks/useMessageData';
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'flex-end',
     flexDirection: 'row',
   },
-  contentContainer: {},
-  contentWrapper: {
-    flexDirection: 'row',
-  },
   lastMessageContainer: {
     marginBottom: 12,
   },
-  leftAlignItems: {
-    alignItems: 'flex-start',
-  },
   messageGroupedSingleOrBottomContainer: {
     marginBottom: 8,
   },
   messageGroupedTopContainer: {},
-  rightAlignItems: {
-    alignItems: 'flex-end',
-  },
 });
 
 export type MessageSimplePropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
-  | 'alignment'
-  | 'channel'
-  | 'groupStyles'
-  | 'hasReactions'
-  | 'isMyMessage'
-  | 'lastGroupMessage'
-  | 'members'
-  | 'message'
-  | 'onlyEmojis'
-  | 'otherAttachments'
-  | 'showMessageStatus'
+  'alignment' | 'channel' | 'isEditedMessageOpen' | 'groupStyles' | 'hasReactions' | 'message'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -60,15 +39,7 @@ export type MessageSimplePropsWithContext<
     | 'myMessageTheme'
     | 'MessageAvatar'
     | 'MessageContent'
-    | 'MessageDeleted'
-    | 'MessageFooter'
-    | 'MessageHeader'
-    | 'MessagePinnedHeader'
-    | 'MessageReplies'
-    | 'MessageStatus'
-    | 'ReactionListBottom'
-    | 'reactionListPosition'
-    | 'ReactionListTop'
+    | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
@@ -76,181 +47,69 @@ const MessageSimpleWithContext = <
 >(
   props: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
-  const [messageContentWidth, setMessageContentWidth] = useState(0);
   const {
     alignment,
+    channel,
     enableMessageGroupingByUser,
     groupStyles,
     hasReactions,
-    isMyMessage,
-    lastGroupMessage,
-    members,
     message,
     MessageAvatar,
     MessageContent,
-    MessageDeleted,
-    MessageFooter,
-    MessageHeader,
-    MessagePinnedHeader,
-    MessageReplies,
-    MessageStatus,
-    onlyEmojis,
-    otherAttachments,
-    ReactionListBottom,
-    reactionListPosition,
-    ReactionListTop,
-    showMessageStatus,
+    ReactionList,
   } = props;
 
   const {
     theme: {
-      colors: { blue_alice, grey_gainsboro, transparent },
       messageSimple: {
         container,
-        content: {
-          container: contentContainer,
-          errorContainer,
-          receiverMessageBackgroundColor,
-          senderMessageBackgroundColor,
-        },
-        contentWrapper,
-        headerWrapper,
         lastMessageContainer,
         messageGroupedSingleOrBottomContainer,
         messageGroupedTopContainer,
-        reactionListTop: { position: reactionPosition },
       },
     },
   } = useTheme();
 
-  const {
-    isMessageErrorType,
-    isMessageReceivedOrErrorType,
-    isMessageTypeDeleted,
-    isVeryLastMessage,
-    messageGroupedSingleOrBottom,
-  } = useMessageData({});
+  const [messageContentWidth, setMessageContentWidth] = useState(0);
+
+  const isVeryLastMessage =
+    channel?.state.messages[channel?.state.messages.length - 1]?.id === message.id;
+
+  const messageGroupedSingleOrBottom =
+    groupStyles.includes('single') || groupStyles.includes('bottom');
+
+  const showReactions = message.type !== 'deleted' && hasReactions && ReactionList;
 
   const lastMessageInMessageListStyles = [styles.lastMessageContainer, lastMessageContainer];
-  const messageGroupedSingleOrBottomStyles = {
-    ...styles.messageGroupedSingleOrBottomContainer,
-    ...messageGroupedSingleOrBottomContainer,
-  };
-  const messageGroupedTopStyles = {
-    ...styles.messageGroupedTopContainer,
-    ...messageGroupedTopContainer,
-  };
-
-  const onLayout: (event: LayoutChangeEvent) => void = ({
-    nativeEvent: {
-      layout: { width },
-    },
-  }) => {
-    setMessageContentWidth(width);
-  };
-
-  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
-
-  let noBorder = onlyEmojis && !message.quoted_message;
-  if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
-      noBorder = false;
-    } else {
-      noBorder = true;
-    }
-  }
-
-  let backgroundColor = senderMessageBackgroundColor;
-  if (onlyEmojis && !message.quoted_message) {
-    backgroundColor = transparent;
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = message.quoted_message ? grey_gainsboro : transparent;
-    } else {
-      backgroundColor = blue_alice;
-    }
-  } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor;
-  }
-
-  const repliesCurveColor = isMessageReceivedOrErrorType ? grey_gainsboro : backgroundColor;
+  const messageGroupedSingleOrBottomStyles = [
+    styles.messageGroupedSingleOrBottomContainer,
+    messageGroupedSingleOrBottomContainer,
+  ];
+  const messageGroupedTopStyles = [styles.messageGroupedTopContainer, messageGroupedTopContainer];
 
   return (
-    <View
-      style={[
-        styles.container,
-        messageGroupedSingleOrBottom
-          ? isVeryLastMessage && enableMessageGroupingByUser
-            ? lastMessageInMessageListStyles
-            : messageGroupedSingleOrBottomStyles
-          : messageGroupedTopStyles,
-        {
-          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-        },
-        container,
-      ]}
-      testID='message-simple-wrapper'
-    >
-      {alignment === 'left' ? <MessageAvatar /> : null}
-      {isMessageTypeDeleted ? (
-        <MessageDeleted
-          date={message.created_at}
-          groupStyle={groupStyle}
-          noBorder={noBorder}
-          onLayout={onLayout}
-        />
-      ) : (
-        <View
-          style={[
-            styles.contentContainer,
-            isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
-            isMessageErrorType ? errorContainer : {},
-            contentContainer,
-          ]}
-          testID='message-components'
-        >
-          <View
-            style={[
-              {
-                paddingBottom:
-                  hasReactions && reactionListPosition === 'top' ? reactionPosition : 2,
-              },
-              headerWrapper,
-            ]}
-          >
-            {MessageHeader && (
-              <MessageHeader
-                alignment={alignment}
-                date={message.created_at}
-                isDeleted={isMessageTypeDeleted}
-                lastGroupMessage={lastGroupMessage}
-                members={members}
-                message={message}
-                MessageStatus={MessageStatus}
-                otherAttachments={otherAttachments}
-                showMessageStatus={showMessageStatus}
-              />
-            )}
-            {message.pinned ? <MessagePinnedHeader /> : null}
-          </View>
-
-          <View style={[styles.contentWrapper, contentWrapper]}>
-            <MessageContent
-              backgroundColor={backgroundColor}
-              noBorder={noBorder}
-              setMessageContentWidth={setMessageContentWidth}
-            />
-            {reactionListPosition === 'top' && ReactionListTop ? (
-              <ReactionListTop messageContentWidth={messageContentWidth} />
-            ) : null}
-          </View>
-
-          {reactionListPosition === 'bottom' && ReactionListBottom ? <ReactionListBottom /> : null}
-          <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
-          <MessageFooter date={message.created_at} isDeleted={!!isMessageTypeDeleted} />
-        </View>
-      )}
-    </View>
+    <>
+      <View
+        style={[
+          styles.container,
+          messageGroupedSingleOrBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? lastMessageInMessageListStyles
+              : messageGroupedSingleOrBottomStyles
+            : messageGroupedTopStyles,
+          {
+            justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+            marginTop: showReactions ? 2 : 0,
+          },
+          container,
+        ]}
+        testID='message-simple-wrapper'
+      >
+        {alignment === 'left' && <MessageAvatar />}
+        <MessageContent setMessageContentWidth={setMessageContentWidth} />
+        {showReactions && <ReactionList messageContentWidth={messageContentWidth} />}
+      </View>
+    </>
   );
 };
 
@@ -262,51 +121,40 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     channel: prevChannel,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
-    lastGroupMessage: prevLastGroupMessage,
-    members: prevMembers,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
-    onlyEmojis: prevOnlyEmojis,
-    otherAttachments: prevOtherAttachments,
   } = prevProps;
   const {
     channel: nextChannel,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
-    lastGroupMessage: nextLastGroupMessage,
-    members: nextMembers,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
-    onlyEmojis: nextOnlyEmojis,
-    otherAttachments: nextOtherAttachments,
   } = nextProps;
 
-  const repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
-  if (!repliesEqual) return false;
-
   const hasReactionsEqual = prevHasReactions === nextHasReactions;
   if (!hasReactionsEqual) return false;
 
+  const repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
+  if (!repliesEqual) return false;
+
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) return false;
 
+  const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
+  if (!isEditedMessageOpenEqual) return false;
+
   const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
   const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 
-  const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
-  if (!lastGroupMessageEqual) return false;
-
-  const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
-  if (!membersEqual) return false;
-
   const messageEqual =
     isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
-    prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.i18n === nextMessage.i18n &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.i18n === nextMessage.i18n;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -351,14 +199,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
   if (!messageThemeEqual) return false;
 
-  const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
-  if (!onlyEmojisEqual) return false;
-
-  const otherAttachmentsEqual =
-    prevOtherAttachments.length === nextOtherAttachments.length &&
-    prevOtherAttachments?.[0]?.actions?.length === nextOtherAttachments?.[0]?.actions?.length;
-  if (!otherAttachmentsEqual) return false;
-
   return true;
 };
 
@@ -380,33 +220,14 @@ export const MessageSimple = <
 >(
   props: MessageSimpleProps<StreamChatGenerics>,
 ) => {
-  const {
-    alignment,
-    channel,
-    groupStyles,
-    hasReactions,
-    isMyMessage,
-    lastGroupMessage,
-    members,
-    message,
-    onlyEmojis,
-    otherAttachments,
-    showMessageStatus,
-  } = useMessageContext<StreamChatGenerics>();
+  const { alignment, channel, groupStyles, hasReactions, isEditedMessageOpen, message } =
+    useMessageContext<StreamChatGenerics>();
   const {
     enableMessageGroupingByUser,
     MessageAvatar,
     MessageContent,
-    MessageDeleted,
-    MessageFooter,
-    MessageHeader,
-    MessagePinnedHeader,
-    MessageReplies,
-    MessageStatus,
     myMessageTheme,
-    ReactionListBottom,
-    reactionListPosition,
-    ReactionListTop,
+    ReactionList,
   } = useMessagesContext<StreamChatGenerics>();
 
   return (
@@ -417,25 +238,12 @@ export const MessageSimple = <
         enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
-        isMyMessage,
-        lastGroupMessage,
-        members,
+        isEditedMessageOpen,
         message,
         MessageAvatar,
         MessageContent,
-        MessageDeleted,
-        MessageFooter,
-        MessageHeader,
-        MessagePinnedHeader,
-        MessageReplies,
-        MessageStatus,
         myMessageTheme,
-        onlyEmojis,
-        otherAttachments,
-        ReactionListBottom,
-        reactionListPosition,
-        ReactionListTop,
-        showMessageStatus,
+        ReactionList,
       }}
       {...props}
     />

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

@@ -37,10 +37,11 @@ export type MessageTextContainerPropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'markdownRules' | 'MessageText' | 'myMessageTheme' | 'messageTextNumberOfLines'
+    'markdownRules' | 'MessageText' | 'myMessageTheme'
   > & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
+    messageTextNumberOfLines?: number;
     styles?: Partial<{
       textContainer: StyleProp<ViewStyle>;
     }>;
@@ -185,8 +186,8 @@ export const MessageTextContainer = <
 ) => {
   const { message, onLongPress, onlyEmojis, onPress, preventPress } =
     useMessageContext<StreamChatGenerics>();
-  const { markdownRules, MessageText, messageTextNumberOfLines, myMessageTheme } =
-    useMessagesContext<StreamChatGenerics>();
+  const { markdownRules, MessageText, myMessageTheme } = useMessagesContext<StreamChatGenerics>();
+  const { messageTextNumberOfLines } = props;
 
   return (
     <MemoizedMessageTextContainer