stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import {
   AnimatableNumericValue,
-  ColorValue,
   LayoutChangeEvent,
-  Pressable,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
+import { useChatContext } from '../../../contexts';
 import {
   MessageContextValue,
   useMessageContext,
@@ -26,16 +26,15 @@ import {
 
 import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { useMessageData } from '../hooks/useMessageData';
+import { MessageStatusTypes } from '../../../utils/utils';
+import { Poll } from '../../Poll/Poll';
 
 const styles = StyleSheet.create({
-  container: {
-    flexShrink: 1,
-  },
   containerInner: {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     borderWidth: 1,
+    overflow: 'hidden',
   },
   leftAlignContent: {
     justifyContent: 'flex-start',
@@ -66,40 +65,44 @@ export type MessageContentPropsWithContext<
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
   | 'alignment'
+  | 'isEditedMessageOpen'
   | 'goToMessage'
   | 'groupStyles'
-  | 'isEditedMessageOpen'
+  | 'hasReactions'
   | 'isMyMessage'
+  | 'lastGroupMessage'
+  | 'members'
   | 'message'
   | 'messageContentOrder'
   | 'onLongPress'
+  | 'onlyEmojis'
   | 'onPress'
   | 'onPressIn'
   | 'otherAttachments'
   | 'preventPress'
+  | 'showMessageStatus'
   | 'threadList'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    | 'additionalPressableProps'
+    | 'additionalTouchableProps'
     | 'Attachment'
     | 'FileAttachmentGroup'
     | 'Gallery'
     | 'isAttachmentEqual'
+    | 'MessageFooter'
+    | 'MessageHeader'
+    | 'MessageDeleted'
     | 'MessageError'
+    | 'MessagePinnedHeader'
+    | 'MessageReplies'
+    | 'MessageStatus'
     | 'myMessageTheme'
+    | 'onPressInMessage'
     | 'Reply'
   > &
   Pick<TranslationContextValue, 't'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
-    /**
-     * Background color for the message content
-     */
-    backgroundColor?: ColorValue;
-    /**
-     * If the message has no border radius
-     */
-    noBorder?: boolean;
   };
 
 /**
@@ -111,31 +114,42 @@ const MessageContentWithContext = <
   props: MessageContentPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
-    additionalPressableProps,
+    additionalTouchableProps,
     alignment,
     Attachment,
-    backgroundColor,
     FileAttachmentGroup,
     Gallery,
     groupStyles,
+    hasReactions,
     isMyMessage,
+    lastGroupMessage,
+    members,
     message,
     messageContentOrder,
+    MessageDeleted,
     MessageError,
-    noBorder,
+    MessageFooter,
+    MessageHeader,
+    MessagePinnedHeader,
+    MessageReplies,
+    MessageStatus,
     onLongPress,
+    onlyEmojis,
     onPress,
     onPressIn,
     otherAttachments,
     preventPress,
     Reply,
     setMessageContentWidth,
+    showMessageStatus,
     threadList,
   } = props;
+  const { client } = useChatContext();
+  const { PollContent: PollContentOverride } = useMessagesContext();
 
   const {
     theme: {
-      colors: { grey_gainsboro, grey_whisper },
+      colors: { blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
           container: {
@@ -146,12 +160,17 @@ const MessageContentWithContext = <
             borderRadiusS,
             borderTopLeftRadius,
             borderTopRightRadius,
+            ...container
           },
           containerInner,
+          errorContainer,
+          receiverMessageBackgroundColor,
           replyBorder,
           replyContainer,
+          senderMessageBackgroundColor,
           wrapper,
         },
+        reactionList: { radius, reactionSize },
       },
     },
   } = useTheme();
@@ -165,7 +184,48 @@ const MessageContentWithContext = <
     setMessageContentWidth(width);
   };
 
-  const { hasThreadReplies, isMessageErrorType, isMessageReceivedOrErrorType } = useMessageData({});
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
+
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+
+  const hasThreadReplies = !!message?.reply_count;
+
+  let noBorder = onlyEmojis && !message.quoted_message;
+  if (otherAttachments.length) {
+    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+      noBorder = false;
+    } else {
+      noBorder = true;
+    }
+  }
+
+  const isMessageTypeDeleted = message.type === 'deleted';
+
+  if (isMessageTypeDeleted) {
+    return (
+      <MessageDeleted
+        date={message.created_at}
+        groupStyle={groupStyle}
+        noBorder={noBorder}
+        onLayout={onLayout}
+      />
+    );
+  }
+
+  const isMessageReceivedOrErrorType = !isMyMessage || error;
+
+  let backgroundColor = senderMessageBackgroundColor || grey_gainsboro;
+  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 || white;
+  }
 
   const repliesCurveColor = !isMessageReceivedOrErrorType ? backgroundColor : grey_gainsboro;
 
@@ -212,7 +272,8 @@ const MessageContentWithContext = <
   };
 
   return (
-    <Pressable
+    <TouchableOpacity
+      activeOpacity={0.7}
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -238,9 +299,33 @@ const MessageContentWithContext = <
           });
         }
       }}
-      style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
-      {...additionalPressableProps}
+      testID='message-content'
+      {...additionalTouchableProps}
+      /**
+       * Border radii are useful for the case of error message types only.
+       * Otherwise background is transparent, so border radius is not really visible.
+       */
+      style={[
+        isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
+        { paddingTop: hasReactions ? reactionSize / 2 + radius : 2 },
+        error ? errorContainer : {},
+        container,
+      ]}
     >
+      {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 />}
       <View onLayout={onLayout} style={wrapper}>
         {hasThreadReplies && !threadList && !noBorder && (
           <View
@@ -296,6 +381,18 @@ const MessageContentWithContext = <
                 );
               case 'gallery':
                 return <Gallery key={`gallery_${messageContentOrderIndex}`} />;
+              case 'poll': {
+                const pollId = message.poll_id;
+                const poll = pollId && client.polls.fromState(pollId);
+                return pollId && poll ? (
+                  <Poll
+                    key={`poll_${message.poll_id}`}
+                    message={message}
+                    poll={poll}
+                    PollContent={PollContentOverride}
+                  />
+                ) : null;
+              }
               case 'text':
               default:
                 return otherAttachments.length && otherAttachments[0].actions ? null : (
@@ -306,9 +403,11 @@ const MessageContentWithContext = <
             }
           })}
         </View>
-        {isMessageErrorType && <MessageError />}
+        {error && <MessageError />}
       </View>
-    </Pressable>
+      <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
+      <MessageFooter date={message.created_at} isDeleted={!!isMessageTypeDeleted} />
+    </TouchableOpacity>
   );
 };
 
@@ -319,25 +418,39 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
+    hasReactions: prevHasReactions,
     isAttachmentEqual,
     isEditedMessageOpen: prevIsEditedMessageOpen,
+    lastGroupMessage: prevLastGroupMessage,
+    members: prevMembers,
     message: prevMessage,
     messageContentOrder: prevMessageContentOrder,
     myMessageTheme: prevMyMessageTheme,
+    onlyEmojis: prevOnlyEmojis,
     otherAttachments: prevOtherAttachments,
     t: prevT,
   } = prevProps;
   const {
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
+    hasReactions: nextHasReactions,
     isEditedMessageOpen: nextIsEditedMessageOpen,
+    lastGroupMessage: nextLastGroupMessage,
+    members: nextMembers,
     message: nextMessage,
     messageContentOrder: nextMessageContentOrder,
     myMessageTheme: nextMyMessageTheme,
+    onlyEmojis: nextOnlyEmojis,
     otherAttachments: nextOtherAttachments,
     t: nextT,
   } = nextProps;
 
+  const hasReactionsEqual = prevHasReactions === nextHasReactions;
+  if (!hasReactionsEqual) return false;
+
+  const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
+  if (!lastGroupMessageEqual) return false;
+
   const goToMessageChangedAndMatters =
     nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
   if (goToMessageChangedAndMatters) return false;
@@ -345,11 +458,17 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
   if (!isEditedMessageOpenEqual) 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;
 
+  const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
+  if (!membersEqual) return false;
+
   const groupStylesEqual =
     prevGroupStyles.length === nextGroupStyles.length &&
     prevGroupStyles?.[0] === nextGroupStyles?.[0];
@@ -446,25 +565,36 @@ export const MessageContent = <
     alignment,
     goToMessage,
     groupStyles,
+    hasReactions,
     isEditedMessageOpen,
     isMyMessage,
+    lastGroupMessage,
     lastReceivedId,
+    members,
     message,
     messageContentOrder,
     onLongPress,
+    onlyEmojis,
     onPress,
     onPressIn,
     otherAttachments,
     preventPress,
+    showMessageStatus,
     threadList,
   } = useMessageContext<StreamChatGenerics>();
   const {
-    additionalPressableProps,
+    additionalTouchableProps,
     Attachment,
     FileAttachmentGroup,
     Gallery,
     isAttachmentEqual,
+    MessageDeleted,
     MessageError,
+    MessageFooter,
+    MessageHeader,
+    MessagePinnedHeader,
+    MessageReplies,
+    MessageStatus,
     myMessageTheme,
     Reply,
   } = useMessagesContext<StreamChatGenerics>();
@@ -473,27 +603,38 @@ export const MessageContent = <
   return (
     <MemoizedMessageContent<StreamChatGenerics>
       {...{
-        additionalPressableProps,
+        additionalTouchableProps,
         alignment,
         Attachment,
         FileAttachmentGroup,
         Gallery,
         goToMessage,
         groupStyles,
+        hasReactions,
         isAttachmentEqual,
         isEditedMessageOpen,
         isMyMessage,
+        lastGroupMessage,
         lastReceivedId,
+        members,
         message,
         messageContentOrder,
+        MessageDeleted,
         MessageError,
+        MessageFooter,
+        MessageHeader,
+        MessagePinnedHeader,
+        MessageReplies,
+        MessageStatus,
         myMessageTheme,
         onLongPress,
+        onlyEmojis,
         onPress,
         onPressIn,
         otherAttachments,
         preventPress,
         Reply,
+        showMessageStatus,
         t,
         threadList,
       }}
@@ -501,3 +642,5 @@ export const MessageContent = <
     />
   );
 };
+
+MessageContent.displayName = 'MessageContent{messageSimple{content}}';

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

@@ -75,7 +75,6 @@ const MessageDeletedWithContext = <
         alignment === 'left' ? styles.leftAlignItems : styles.rightAlignItems,
         deletedContainer,
       ]}
-      testID='message-deleted'
     >
       <View
         style={[
@@ -95,6 +94,7 @@ const MessageDeletedWithContext = <
           noBorder ? { borderWidth: 0 } : {},
           deletedContainerInner,
         ]}
+        testID='message-content-wrapper'
       >
         <MessageTextContainer<StreamChatGenerics>
           markdownStyles={merge({ em: { color: grey } }, deletedText)}

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

@@ -116,7 +116,7 @@ const MessageFooterWithContext = <
 
   if (isDeleted) {
     return (
-      <View style={[styles.container, metaContainer]}>
+      <View style={[styles.container, metaContainer]} testID='message-deleted'>
         {deletedMessagesVisibilityType === 'sender' && (
           <OnlyVisibleToYouComponent alignment={alignment} />
         )}

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

@@ -10,20 +10,26 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { PinHeader } from '../../../icons';
 
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  label: {},
+});
+
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
-export type MessagePinnedHeaderProps<
+export type MessagePinnedHeaderPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>>;
+> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
 
-export const MessagePinnedHeader = <
+const MessagePinnedHeaderWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessagePinnedHeaderProps<StreamChatGenerics>,
+  props: MessagePinnedHeaderPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message: propMessage } = props;
-  const { message: contextMessage } = useMessageContext<StreamChatGenerics>();
-  const message = propMessage || contextMessage;
+  const { alignment, message } = props;
   const {
     theme: {
       colors: { grey },
@@ -35,11 +41,16 @@ export const MessagePinnedHeader = <
   const { client } = useChatContext();
   return (
     <View
-      accessibilityLabel='Message Pinned Header'
-      style={[styles.container, container]}
+      style={[
+        styles.container,
+        {
+          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+        },
+        container,
+      ]}
       testID='message-pinned'
     >
-      <PinHeader fill={grey} size={16} />
+      <PinHeader pathFill={grey} />
       <Text style={[{ color: grey }, styles.label, label]}>
         {t<string>('Pinned by')}{' '}
         {message?.pinned_by?.id === client?.user?.id ? t<string>('You') : message?.pinned_by?.name}
@@ -48,14 +59,48 @@ export const MessagePinnedHeader = <
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 12,
-    marginLeft: 4,
-  },
-});
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessagePinnedHeaderPropsWithContext<StreamChatGenerics>,
+  nextProps: MessagePinnedHeaderPropsWithContext<StreamChatGenerics>,
+) => {
+  const { message: prevMessage } = prevProps;
+  const { message: nextMessage } = nextProps;
+  const messageEqual =
+    prevMessage.deleted_at === nextMessage.deleted_at &&
+    prevMessage.status === nextMessage.status &&
+    prevMessage.type === nextMessage.type &&
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
+  if (!messageEqual) return false;
+  return true;
+};
+
+const MemoizedMessagePinnedHeader = React.memo(
+  MessagePinnedHeaderWithContext,
+  areEqual,
+) as typeof MessagePinnedHeaderWithContext;
+
+export type MessagePinnedHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessagePinnedHeaderPropsWithContext<StreamChatGenerics>>;
+
+export const MessagePinnedHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessagePinnedHeaderProps<StreamChatGenerics>,
+) => {
+  const { alignment, lastGroupMessage, message } = useMessageContext<StreamChatGenerics>();
+
+  return (
+    <MemoizedMessagePinnedHeader
+      {...{
+        alignment,
+        lastGroupMessage,
+        message,
+      }}
+      {...props}
+    />
+  );
+};
+
+MessagePinnedHeader.displayName = 'MessagePinnedHeader{messageSimple{pinned}}';