stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Avatar, AvatarProps } from '../../Avatar/Avatar';
-
 import {
   MessageContextValue,
   useMessageContext,
@@ -19,6 +17,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { Avatar, AvatarProps } from '../../Avatar/Avatar';
 
 export type MessageAvatarPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,

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

@@ -20,8 +20,6 @@ import {
 } from '../../../contexts/translationContext/TranslationContext';
 
 import { Error } from '../../../icons';
-import { vw } from '../../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes, vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -106,9 +105,7 @@ export type MessageContentPropsWithContext<
     | 'MessageReplies'
     | 'MessageStatus'
     | 'onPressInMessage'
-    | 'quotedRepliesEnabled'
     | 'Reply'
-    | 'threadRepliesEnabled'
   > &
   Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
@@ -154,18 +151,16 @@ const MessageContentWithContext = <
     onPressIn,
     otherAttachments,
     preventPress,
-    quotedRepliesEnabled,
     Reply,
     setMessageContentWidth,
     showMessageStatus,
     tDateTimeParser,
     threadList,
-    threadRepliesEnabled,
   } = props;
 
   const {
     theme: {
-      colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent },
+      colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
           container: { borderRadiusL, borderRadiusS, ...container },
@@ -205,7 +200,7 @@ const MessageContentWithContext = <
     setMessageContentWidth(width);
   };
 
-  const error = message.type === 'error' || message.status === 'failed';
+  const error = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
 
@@ -213,7 +208,9 @@ const MessageContentWithContext = <
 
   const noBorder = (onlyEmojis && !message.quoted_message) || !!otherAttachments.length;
 
-  if (message.deleted_at) {
+  const isMessageTypeDeleted = message.type === 'deleted';
+
+  if (isMessageTypeDeleted) {
     return (
       <MessageDeleted
         formattedDate={getDateText(formatDate)}
@@ -234,7 +231,7 @@ const MessageContentWithContext = <
           : grey_gainsboro
         : blue_alice
       : alignment === 'left' || error
-      ? transparent
+      ? white
       : grey_gainsboro;
 
   const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper;
@@ -267,6 +264,7 @@ const MessageContentWithContext = <
           });
         }
       }}
+      testID='message-content'
       {...additionalTouchableProps}
       /**
        * Border radii are useful for the case of error message types only.
@@ -283,7 +281,7 @@ const MessageContentWithContext = <
         <MessageHeader
           alignment={alignment}
           formattedDate={getDateText(formatDate)}
-          isDeleted={!!message.deleted_at}
+          isDeleted={!!isMessageTypeDeleted}
           lastGroupMessage={lastGroupMessage}
           members={members}
           message={message}
@@ -293,7 +291,7 @@ const MessageContentWithContext = <
         />
       )}
       <View onLayout={onLayout} style={wrapper}>
-        {hasThreadReplies && !threadList && threadRepliesEnabled && !noBorder && (
+        {hasThreadReplies && !threadList && !noBorder && (
           <View
             style={[
               styles.replyBorder,
@@ -333,8 +331,7 @@ const MessageContentWithContext = <
             switch (messageContentType) {
               case 'quoted_reply':
                 return (
-                  message.quoted_message &&
-                  quotedRepliesEnabled && (
+                  message.quoted_message && (
                     <View
                       key={`quoted_reply_${messageContentOrderIndex}`}
                       style={[styles.replyContainer, replyContainer]}
@@ -374,10 +371,8 @@ const MessageContentWithContext = <
           </View>
         )}
       </View>
-      {threadRepliesEnabled && (
-        <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
-      )}
-      <MessageFooter formattedDate={getDateText(formatDate)} isDeleted={!!message.deleted_at} />
+      <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
+      <MessageFooter formattedDate={getDateText(formatDate)} isDeleted={!!isMessageTypeDeleted} />
     </TouchableOpacity>
   );
 };
@@ -448,18 +443,25 @@ const areEqual = <
     prevGroupStyles?.[0] === nextGroupStyles?.[0];
   if (!groupStylesEqual) return false;
 
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
 
   if (!messageEqual) return false;
 
+  const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';
+  const isNextQuotedMessageTypeDeleted = nextMessage.quoted_message?.type === 'deleted';
+
   const quotedMessageEqual =
     prevMessage.quoted_message?.id === nextMessage.quoted_message?.id &&
-    prevMessage.quoted_message?.deleted_at === nextMessage.quoted_message?.deleted_at;
+    isPrevQuotedMessageTypeDeleted === isNextQuotedMessageTypeDeleted;
 
   if (!quotedMessageEqual) return false;
 
@@ -566,9 +568,7 @@ export const MessageContent = <
     MessageHeader,
     MessageReplies,
     MessageStatus,
-    quotedRepliesEnabled,
     Reply,
-    threadRepliesEnabled,
   } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t, tDateTimeParser } = useTranslationContext();
 
@@ -602,13 +602,11 @@ export const MessageContent = <
         onPressIn,
         otherAttachments,
         preventPress,
-        quotedRepliesEnabled,
         Reply,
         showMessageStatus,
         t,
         tDateTimeParser,
         threadList,
-        threadRepliesEnabled,
       }}
       {...props}
     />

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+
 import merge from 'lodash/merge';
 
+import type { MessageFooterProps } from './MessageFooter';
 import { MessageTextContainer } from './MessageTextContainer';
 
 import {
@@ -19,10 +21,6 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
-import type { MessageFooterProps } from './MessageFooter';
-
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -33,6 +31,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -160,13 +159,16 @@ const areEqual = <
 
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
   const formattedDateEqual = prevFormattedDate === nextFormattedDate;

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
+import type { MessageStatusProps } from './MessageStatus';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import {
   Alignment,
   MessageContextValue,
@@ -15,13 +20,6 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Eye } from '../../../icons';
 
-import type { Attachment } from 'stream-chat';
-
-import type { MessageStatusProps } from './MessageStatus';
-
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
-
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
   formattedDate: string | Date;
@@ -55,7 +54,10 @@ type MessageFooterPropsWithContext<
   | 'showMessageStatus'
   | 'lastGroupMessage'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageStatus'> &
+  Pick<
+    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    'deletedMessagesVisibilityType' | 'MessageStatus'
+  > &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = <
@@ -71,6 +73,7 @@ const MessageFooterWithContext = <
 ) => {
   const {
     alignment,
+    deletedMessagesVisibilityType,
     formattedDate,
     isDeleted,
     lastGroupMessage,
@@ -83,7 +86,7 @@ const MessageFooterWithContext = <
 
   const {
     theme: {
-      colors: { grey },
+      colors: { grey, grey_dark },
       messageSimple: {
         content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
       },
@@ -94,19 +97,24 @@ const MessageFooterWithContext = <
   if (isDeleted) {
     return (
       <View style={metaContainer} testID='message-deleted'>
-        <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
-        <Text
-          style={[
-            {
-              color: grey,
-              textAlign: alignment,
-            },
-            metaText,
-            deletedMetaText,
-          ]}
-        >
-          {t('Only visible to you')}
-        </Text>
+        {deletedMessagesVisibilityType === 'sender' && (
+          <>
+            <Eye pathFill={grey_dark} {...eyeIcon} />
+            <Text
+              style={[
+                {
+                  color: grey_dark,
+                  textAlign: alignment,
+                },
+                metaText,
+                deletedMetaText,
+              ]}
+              testID='only-visible-to-you'
+            >
+              {t('Only visible to you')}
+            </Text>
+          </>
+        )}
         <Text
           style={[
             {
@@ -130,11 +138,11 @@ const MessageFooterWithContext = <
     <View style={metaContainer} testID='message-status-time'>
       {otherAttachments.length && otherAttachments[0].actions ? (
         <>
-          <Eye {...eyeIcon} />
+          <Eye pathFill={grey_dark} {...eyeIcon} />
           <Text
             style={[
               {
-                color: grey,
+                color: grey_dark,
                 textAlign: alignment,
               },
               metaText,
@@ -194,12 +202,20 @@ const areEqual = <
   const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;
   if (!lastGroupMessageEqual) return false;
 
+  const deletedMessagesVisibilityTypeEqual =
+    prevProps.deletedMessagesVisibilityType === nextProps.deletedMessagesVisibilityType;
+  if (!deletedMessagesVisibilityTypeEqual) return false;
+
+  const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
+  const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
+
   const messageEqual =
-    prevMessage.deleted_at === nextMessage.deleted_at &&
+    isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.reply_count === nextMessage.reply_count &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
   const otherAttachmentsEqual =
@@ -253,12 +269,14 @@ export const MessageFooter = <
   const { alignment, lastGroupMessage, members, message, otherAttachments, showMessageStatus } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { MessageStatus } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { deletedMessagesVisibilityType, MessageStatus } =
+    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
+        deletedMessagesVisibilityType,
         lastGroupMessage,
         members,
         message,

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+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',
+    marginBottom: 8,
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  label: {},
+});
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+
+export type MessagePinnedHeaderPropsWithContext<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'alignment' | 'message'>;
+
+const MessagePinnedHeaderWithContext = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { alignment, message } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: { pinnedHeader },
+    },
+  } = useTheme();
+  const { container, label } = pinnedHeader;
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
+        },
+        container,
+      ]}
+      testID='message-pinned'
+    >
+      <PinHeader pathFill={grey} />
+      <Text style={[{ color: grey }, styles.label, label]}>
+        Pinned by{' '}
+        {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
+      </Text>
+    </View>
+  );
+};
+
+const areEqual = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+>(
+  prevProps: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  nextProps: MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  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<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Partial<MessagePinnedHeaderPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+
+export const MessagePinnedHeader = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: MessagePinnedHeaderProps<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { alignment, lastGroupMessage, message } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+  return (
+    <MemoizedMessagePinnedHeader
+      {...{
+        alignment,
+        lastGroupMessage,
+        message,
+      }}
+      {...props}
+    />
+  );
+};
+
+MessagePinnedHeader.displayName = 'MessagePinnedHeader{messageSimple{pinned}}';

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

@@ -220,12 +220,14 @@ const areEqual = <
   const {
     message: prevMessage,
     noBorder: prevNoBorder,
+    onOpenThread: prevOnOpenThread,
     t: prevT,
     threadList: prevThreadList,
   } = prevProps;
   const {
     message: nextMessage,
     noBorder: nextNoBorder,
+    onOpenThread: nextOnOpenThread,
     t: nextT,
     threadList: nextThreadList,
   } = nextProps;
@@ -242,6 +244,9 @@ const areEqual = <
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 
+  const onOpenThreadEqual = prevOnOpenThread === nextOnOpenThread;
+  if (!onOpenThreadEqual) return false;
+
   return true;
 };
 

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Avatar } from '../../Avatar/Avatar';
-
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
-import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -16,6 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { Avatar } from '../../Avatar/Avatar';
 
 const styles = StyleSheet.create({
   avatarContainer: {