stream-chat-react-native-core 4.0.0 → 4.1.0

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,39 +20,18 @@ 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 { DefaultStreamChatGenerics } from '../../../types/types';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
-
 type MessageFooterComponentProps = {
   formattedDate: string | Date;
   isDeleted?: boolean;
 };
 
 type MessageFooterPropsWithContext<
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   | 'alignment'
   | 'members'
   | 'message'
@@ -55,22 +39,20 @@ type MessageFooterPropsWithContext<
   | 'showMessageStatus'
   | 'lastGroupMessage'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageStatus'> &
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    'deletedMessagesVisibilityType' | 'MessageStatus'
+  > &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageFooterPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageFooterPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
+    deletedMessagesVisibilityType,
     formattedDate,
     isDeleted,
     lastGroupMessage,
@@ -83,7 +65,7 @@ const MessageFooterWithContext = <
 
   const {
     theme: {
-      colors: { grey },
+      colors: { grey, grey_dark },
       messageSimple: {
         content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
       },
@@ -93,20 +75,25 @@ const MessageFooterWithContext = <
 
   if (isDeleted) {
     return (
-      <View style={metaContainer} testID='message-footer'>
-        <Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
-        <Text
-          style={[
-            {
-              color: grey,
-              textAlign: alignment,
-            },
-            metaText,
-            deletedMetaText,
-          ]}
-        >
-          {t('Only visible to you')}
-        </Text>
+      <View style={metaContainer} testID='message-deleted'>
+        {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 +117,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,
@@ -154,17 +141,9 @@ const MessageFooterWithContext = <
   );
 };
 
-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: MessageFooterPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageFooterPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageFooterPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageFooterPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment: prevAlignment,
@@ -194,12 +173,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 =
@@ -222,43 +209,32 @@ const MemoizedMessageFooter = React.memo(
 ) as typeof MessageFooterWithContext;
 
 export type MessageFooterProps<
-  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<Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'members'>> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Pick<ChannelContextValue<StreamChatGenerics>, 'members'>> &
   MessageFooterComponentProps & {
     alignment?: Alignment;
     lastGroupMessage?: boolean;
-    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-    MessageStatus?: React.ComponentType<MessageStatusProps<At, Ch, Co, Ev, Me, Re, Us>>;
-    otherAttachments?: Attachment<At>[];
+    message?: MessageType<StreamChatGenerics>;
+    MessageStatus?: React.ComponentType<MessageStatusProps<StreamChatGenerics>>;
+    otherAttachments?: Attachment<StreamChatGenerics>[];
     showMessageStatus?: boolean;
   };
 
 export const MessageFooter = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageFooterProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageFooterProps<StreamChatGenerics>,
 ) => {
   const { alignment, lastGroupMessage, members, message, otherAttachments, showMessageStatus } =
-    useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useMessageContext<StreamChatGenerics>();
 
-  const { MessageStatus } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { deletedMessagesVisibilityType, MessageStatus } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
+        deletedMessagesVisibilityType,
         lastGroupMessage,
         members,
         message,

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

@@ -0,0 +1,109 @@
+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 { DefaultStreamChatGenerics } from '../../../types/types';
+
+export type MessagePinnedHeaderPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
+
+const MessagePinnedHeaderWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessagePinnedHeaderPropsWithContext<StreamChatGenerics>,
+) => {
+  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 = <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}}';

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

@@ -15,16 +15,7 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 const styles = StyleSheet.create({
   container: {
@@ -69,15 +60,9 @@ const styles = StyleSheet.create({
 });
 
 export type MessageRepliesPropsWithContext<
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageContextValue<StreamChatGenerics>,
   | 'alignment'
   | 'message'
   | 'onLongPress'
@@ -87,22 +72,16 @@ export type MessageRepliesPropsWithContext<
   | 'preventPress'
   | 'threadList'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageRepliesAvatars'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'MessageRepliesAvatars'> &
   Pick<TranslationContextValue, 't'> & {
     noBorder?: boolean;
     repliesCurveColor?: ColorValue;
   };
 
 const MessageRepliesWithContext = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageRepliesPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageRepliesPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -133,7 +112,7 @@ const MessageRepliesWithContext = <
   return (
     <View style={styles.curveContainer}>
       {alignment === 'left' && (
-        <>
+        <View testID='message-replies-left'>
           {!noBorder && (
             <View
               style={[
@@ -145,7 +124,7 @@ const MessageRepliesWithContext = <
             />
           )}
           <MessageRepliesAvatars alignment={alignment} message={message} />
-        </>
+        </View>
       )}
       <TouchableOpacity
         disabled={preventPress}
@@ -187,7 +166,7 @@ const MessageRepliesWithContext = <
         </Text>
       </TouchableOpacity>
       {alignment === 'right' && (
-        <>
+        <View testID='message-replies-right'>
           <MessageRepliesAvatars alignment={alignment} message={message} />
           {!noBorder && (
             <View
@@ -199,23 +178,15 @@ const MessageRepliesWithContext = <
               ]}
             />
           )}
-        </>
+        </View>
       )}
     </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: MessageRepliesPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageRepliesPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageRepliesPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageRepliesPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     message: prevMessage,
@@ -256,25 +227,13 @@ const MemoizedMessageReplies = React.memo(
 ) as typeof MessageRepliesWithContext;
 
 export type MessageRepliesProps<
-  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,
-> = Partial<MessageRepliesPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageRepliesPropsWithContext<StreamChatGenerics>>;
 
 export const MessageReplies = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageRepliesProps<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -285,8 +244,8 @@ export const MessageReplies = <
     onPressIn,
     preventPress,
     threadList,
-  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageRepliesAvatars } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessageContext<StreamChatGenerics>();
+  const { MessageRepliesAvatars } = useMessagesContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   return (

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

@@ -1,21 +1,11 @@
 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,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { Avatar } from '../../Avatar/Avatar';
 
 const styles = StyleSheet.create({
   avatarContainer: {
@@ -30,25 +20,13 @@ const styles = StyleSheet.create({
 });
 
 export type MessageRepliesAvatarsProps<
-  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,
-> = Pick<MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'alignment' | 'message'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
 
 export const MessageRepliesAvatars = <
-  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,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageRepliesAvatarsProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageRepliesAvatarsProps<StreamChatGenerics>,
 ) => {
   const { alignment, message } = props;