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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -12,26 +12,47 @@ 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' | 'isEditedMessageOpen' | 'groupStyles' | 'hasReactions' | 'message'
+  | 'alignment'
+  | 'channel'
+  | 'groupStyles'
+  | 'hasReactions'
+  | 'isMyMessage'
+  | 'lastGroupMessage'
+  | 'members'
+  | 'message'
+  | 'onlyEmojis'
+  | 'otherAttachments'
+  | 'showMessageStatus'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -39,7 +60,15 @@ export type MessageSimplePropsWithContext<
     | 'myMessageTheme'
     | 'MessageAvatar'
     | 'MessageContent'
-    | 'ReactionList'
+    | 'MessageDeleted'
+    | 'MessageFooter'
+    | 'MessageHeader'
+    | 'MessagePinnedHeader'
+    | 'MessageReplies'
+    | 'MessageStatus'
+    | 'ReactionListBottom'
+    | 'reactionListPosition'
+    | 'ReactionListTop'
   >;
 
 const MessageSimpleWithContext = <
@@ -47,69 +76,181 @@ const MessageSimpleWithContext = <
 >(
   props: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
+  const [messageContentWidth, setMessageContentWidth] = useState(0);
   const {
     alignment,
-    channel,
     enableMessageGroupingByUser,
     groupStyles,
     hasReactions,
+    isMyMessage,
+    lastGroupMessage,
+    members,
     message,
     MessageAvatar,
     MessageContent,
-    ReactionList,
+    MessageDeleted,
+    MessageFooter,
+    MessageHeader,
+    MessagePinnedHeader,
+    MessageReplies,
+    MessageStatus,
+    onlyEmojis,
+    otherAttachments,
+    ReactionListBottom,
+    reactionListPosition,
+    ReactionListTop,
+    showMessageStatus,
   } = 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 [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 {
+    isMessageErrorType,
+    isMessageReceivedOrErrorType,
+    isMessageTypeDeleted,
+    isVeryLastMessage,
+    messageGroupedSingleOrBottom,
+  } = useMessageData({});
 
   const lastMessageInMessageListStyles = [styles.lastMessageContainer, lastMessageContainer];
-  const messageGroupedSingleOrBottomStyles = [
-    styles.messageGroupedSingleOrBottomContainer,
-    messageGroupedSingleOrBottomContainer,
-  ];
-  const messageGroupedTopStyles = [styles.messageGroupedTopContainer, messageGroupedTopContainer];
+  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;
 
   return (
-    <>
-      <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>
-    </>
+    <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>
   );
 };
 
@@ -121,40 +262,51 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     channel: prevChannel,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
-    isEditedMessageOpen: prevIsEditedMessageOpen,
+    lastGroupMessage: prevLastGroupMessage,
+    members: prevMembers,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
+    onlyEmojis: prevOnlyEmojis,
+    otherAttachments: prevOtherAttachments,
   } = prevProps;
   const {
     channel: nextChannel,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
-    isEditedMessageOpen: nextIsEditedMessageOpen,
+    lastGroupMessage: nextLastGroupMessage,
+    members: nextMembers,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
+    onlyEmojis: nextOnlyEmojis,
+    otherAttachments: nextOtherAttachments,
   } = nextProps;
 
-  const hasReactionsEqual = prevHasReactions === nextHasReactions;
-  if (!hasReactionsEqual) return false;
-
   const repliesEqual = prevMessage.reply_count === nextMessage.reply_count;
   if (!repliesEqual) return false;
 
+  const hasReactionsEqual = prevHasReactions === nextHasReactions;
+  if (!hasReactionsEqual) 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.i18n === nextMessage.i18n &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
@@ -199,6 +351,14 @@ 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;
 };
 
@@ -220,14 +380,33 @@ export const MessageSimple = <
 >(
   props: MessageSimpleProps<StreamChatGenerics>,
 ) => {
-  const { alignment, channel, groupStyles, hasReactions, isEditedMessageOpen, message } =
-    useMessageContext<StreamChatGenerics>();
+  const {
+    alignment,
+    channel,
+    groupStyles,
+    hasReactions,
+    isMyMessage,
+    lastGroupMessage,
+    members,
+    message,
+    onlyEmojis,
+    otherAttachments,
+    showMessageStatus,
+  } = useMessageContext<StreamChatGenerics>();
   const {
     enableMessageGroupingByUser,
     MessageAvatar,
     MessageContent,
+    MessageDeleted,
+    MessageFooter,
+    MessageHeader,
+    MessagePinnedHeader,
+    MessageReplies,
+    MessageStatus,
     myMessageTheme,
-    ReactionList,
+    ReactionListBottom,
+    reactionListPosition,
+    ReactionListTop,
   } = useMessagesContext<StreamChatGenerics>();
 
   return (
@@ -238,12 +417,25 @@ export const MessageSimple = <
         enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
-        isEditedMessageOpen,
+        isMyMessage,
+        lastGroupMessage,
+        members,
         message,
         MessageAvatar,
         MessageContent,
+        MessageDeleted,
+        MessageFooter,
+        MessageHeader,
+        MessagePinnedHeader,
+        MessageReplies,
+        MessageStatus,
         myMessageTheme,
-        ReactionList,
+        onlyEmojis,
+        otherAttachments,
+        ReactionListBottom,
+        reactionListPosition,
+        ReactionListTop,
+        showMessageStatus,
       }}
       {...props}
     />

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

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