stream-chat-react-native-core 5.29.1-beta.4 → 5.30.0-beta.1

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

@@ -5,6 +5,8 @@ import type { Attachment } from 'stream-chat';
 
 import type { MessageStatusProps } from './MessageStatus';
 
+import { MessageTimestamp } from './MessageTimestamp';
+
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import {
   Alignment,
@@ -21,11 +23,11 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Eye } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes } from '../../../utils/utils';
+import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
-  formattedDate: string | Date;
+  date?: string | Date;
   isDeleted?: boolean;
 };
 
@@ -34,6 +36,7 @@ type MessageFooterPropsWithContext<
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
   | 'alignment'
+  | 'isEditedMessageOpen'
   | 'members'
   | 'message'
   | 'otherAttachments'
@@ -42,10 +45,41 @@ type MessageFooterPropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'deletedMessagesVisibilityType' | 'MessageStatus'
+    'deletedMessagesVisibilityType' | 'MessageEditedTimestamp' | 'MessageStatus'
   > &
   MessageFooterComponentProps;
 
+const OnlyVisibleToYouComponent = ({ alignment }: { alignment: Alignment }) => {
+  const {
+    theme: {
+      colors: { grey_dark },
+      messageSimple: {
+        content: { deletedMetaText, eyeIcon, metaText },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+
+  return (
+    <>
+      <Eye pathFill={grey_dark} {...eyeIcon} />
+      <Text
+        style={[
+          {
+            color: grey_dark,
+            textAlign: alignment,
+          },
+          metaText,
+          deletedMetaText,
+        ]}
+        testID='only-visible-to-you'
+      >
+        {t<string>('Only visible to you')}
+      </Text>
+    </>
+  );
+};
+
 const MessageFooterWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -53,12 +87,14 @@ const MessageFooterWithContext = <
 ) => {
   const {
     alignment,
+    date,
     deletedMessagesVisibilityType,
-    formattedDate,
     isDeleted,
+    isEditedMessageOpen,
     lastGroupMessage,
     members,
     message,
+    MessageEditedTimestamp,
     MessageStatus,
     otherAttachments,
     showMessageStatus,
@@ -66,9 +102,9 @@ const MessageFooterWithContext = <
 
   const {
     theme: {
-      colors: { grey, grey_dark },
+      colors: { grey },
       messageSimple: {
-        content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
+        content: { editedLabel, messageUser, metaContainer, metaText },
       },
     },
   } = useTheme();
@@ -78,69 +114,51 @@ const MessageFooterWithContext = <
     return (
       <View style={[styles.container, metaContainer]} testID='message-deleted'>
         {deletedMessagesVisibilityType === 'sender' && (
+          <OnlyVisibleToYouComponent alignment={alignment} />
+        )}
+        <MessageTimestamp format='LT' timestamp={date} />
+      </View>
+    );
+  }
+
+  if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
+    return null;
+  }
+
+  return (
+    <>
+      <View style={[styles.container, metaContainer]} testID='message-status-time'>
+        {otherAttachments.length && otherAttachments[0].actions ? (
+          <OnlyVisibleToYouComponent alignment={alignment} />
+        ) : null}
+        {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
+          <Text style={[styles.text, { color: grey }, messageUser]}>{message.user.name}</Text>
+        ) : null}
+        {showMessageStatus && <MessageStatus />}
+        <MessageTimestamp format='LT' timestamp={date} />
+
+        {isEditedMessage(message) && !isEditedMessageOpen && (
           <>
-            <Eye pathFill={grey_dark} {...eyeIcon} />
             <Text
               style={[
+                styles.dotText,
                 {
-                  color: grey_dark,
+                  color: grey,
                   textAlign: alignment,
                 },
                 metaText,
-                deletedMetaText,
               ]}
-              testID='only-visible-to-you'
             >
-              {t<string>('Only visible to you')}
+              ⦁
+            </Text>
+            <Text style={[styles.text, { color: grey, textAlign: alignment }, editedLabel]}>
+              {t<string>('Edited')}
             </Text>
           </>
         )}
-        <Text
-          style={[
-            {
-              color: grey,
-              textAlign: alignment,
-            },
-            metaText,
-          ]}
-        >
-          {formattedDate.toString()}
-        </Text>
       </View>
-    );
-  }
-
-  if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
-    return null;
-  }
-
-  return (
-    <View style={[styles.container, metaContainer]} testID='message-status-time'>
-      {otherAttachments.length && otherAttachments[0].actions ? (
-        <>
-          <Eye pathFill={grey_dark} {...eyeIcon} />
-          <Text
-            style={[
-              {
-                color: grey_dark,
-                textAlign: alignment,
-              },
-              metaText,
-              deletedMetaText,
-            ]}
-          >
-            {t<string>('Only visible to you')}
-          </Text>
-        </>
-      ) : null}
-      {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[{ color: grey }, messageUser]}>{message.user.name}</Text>
-      ) : null}
-      {showMessageStatus && <MessageStatus />}
-      <Text style={[{ color: grey, textAlign: alignment }, metaText]}>
-        {formattedDate.toString()}
-      </Text>
-    </View>
+      {isEditedMessageOpen && <MessageEditedTimestamp format='LT' timestamp={date} />}
+    </>
   );
 };
 
@@ -150,7 +168,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     alignment: prevAlignment,
-    formattedDate: prevFormattedDate,
+    date: prevDate,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
@@ -159,7 +178,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   } = prevProps;
   const {
     alignment: nextAlignment,
-    formattedDate: nextFormattedDate,
+    date: nextDate,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     lastGroupMessage: nextLastGroupMessage,
     members: nextMembers,
     message: nextMessage,
@@ -170,6 +190,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
 
+  const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
+  if (!isEditedMessageOpenEqual) return false;
+
   const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
   if (!membersEqual) return false;
 
@@ -200,8 +223,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const showMessageStatusEqual = prevShowMessageStatus === nextShowMessageStatus;
   if (!showMessageStatusEqual) return false;
 
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) return false;
+  const dateEqual = prevDate === nextDate;
+  if (!dateEqual) return false;
 
   return true;
 };
@@ -228,19 +251,29 @@ export const MessageFooter = <
 >(
   props: MessageFooterProps<StreamChatGenerics>,
 ) => {
-  const { alignment, lastGroupMessage, members, message, otherAttachments, showMessageStatus } =
-    useMessageContext<StreamChatGenerics>();
+  const {
+    alignment,
+    isEditedMessageOpen,
+    lastGroupMessage,
+    members,
+    message,
+    otherAttachments,
+    showMessageStatus,
+  } = useMessageContext<StreamChatGenerics>();
 
-  const { deletedMessagesVisibilityType, MessageStatus } = useMessagesContext<StreamChatGenerics>();
+  const { deletedMessagesVisibilityType, MessageEditedTimestamp, MessageStatus } =
+    useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
         deletedMessagesVisibilityType,
+        isEditedMessageOpen,
         lastGroupMessage,
         members,
         message,
+        MessageEditedTimestamp,
         MessageStatus,
         otherAttachments,
         showMessageStatus,
@@ -252,7 +285,15 @@ export const MessageFooter = <
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
     flexDirection: 'row',
+    justifyContent: 'center',
     marginTop: 4,
   },
+  dotText: {
+    paddingHorizontal: 4,
+  },
+  text: {
+    fontSize: 12,
+  },
 });

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

@@ -31,7 +31,13 @@ export type MessageSimplePropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
-  'alignment' | 'channel' | 'disabled' | 'groupStyles' | 'hasReactions' | 'message'
+  | 'alignment'
+  | 'channel'
+  | 'disabled'
+  | 'isEditedMessageOpen'
+  | 'groupStyles'
+  | 'hasReactions'
+  | 'message'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -122,6 +128,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: prevDisabled,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
   } = prevProps;
@@ -130,6 +137,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: nextDisabled,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
   } = nextProps;
@@ -146,6 +154,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   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';
 
@@ -219,7 +230,7 @@ export const MessageSimple = <
 >(
   props: MessageSimpleProps<StreamChatGenerics>,
 ) => {
-  const { alignment, channel, disabled, groupStyles, hasReactions, message } =
+  const { alignment, channel, disabled, groupStyles, hasReactions, isEditedMessageOpen, message } =
     useMessageContext<StreamChatGenerics>();
   const {
     enableMessageGroupingByUser,
@@ -238,6 +249,7 @@ export const MessageSimple = <
         enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
+        isEditedMessageOpen,
         message,
         MessageAvatar,
         MessageContent,

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import {
+  TDateTimeParserInput,
+  TranslationContextValue,
+  useTranslationContext,
+} from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/getDateString';
+
+export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
+  /**
+   * Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
+   */
+  calendar?: boolean;
+  /**
+   * The format in which the date should be displayed.
+   */
+  format?: string;
+  /**
+   * A function to format the date.
+   */
+  formatDate?: (date: TDateTimeParserInput) => string;
+  /**
+   * The timestamp of the message.
+   */
+  timestamp?: string | Date;
+};
+
+export const MessageTimestamp = (props: MessageTimestampProps) => {
+  const { calendar, format, formatDate, tDateTimeParser: propsTDateTimeParser, timestamp } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: {
+        content: { timestampText },
+      },
+    },
+  } = useTheme();
+  const { tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+
+  if (!timestamp) return null;
+
+  const formattedDate = getDateString({
+    calendar,
+    date: timestamp,
+    format,
+    formatDate,
+    tDateTimeParser: propsTDateTimeParser || contextTDateTimeParser,
+  });
+
+  if (!formattedDate) return null;
+
+  return (
+    <Text style={[styles.text, { color: grey }, timestampText]}>{formattedDate.toString()}</Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+  },
+});

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -24,6 +24,7 @@ export const useCreateMessageContext = <
   handleToggleReaction,
   hasReactions,
   images,
+  isEditedMessageOpen,
   isMyMessage,
   lastGroupMessage,
   lastReceivedId,
@@ -39,6 +40,7 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
+  setIsEditedMessageOpen,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -78,6 +80,7 @@ export const useCreateMessageContext = <
       handleToggleReaction,
       hasReactions,
       images,
+      isEditedMessageOpen,
       isMyMessage,
       lastGroupMessage,
       lastReceivedId,
@@ -93,6 +96,7 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
+      setIsEditedMessageOpen,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -107,6 +111,7 @@ export const useCreateMessageContext = <
       goToMessage,
       groupStylesLength,
       hasReactions,
+      isEditedMessageOpen,
       lastGroupMessage,
       lastReceivedId,
       membersValue,

package/src/components/MessageList/DateHeader.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 });
 
 export type DateHeaderProps = {
-  dateString: string;
+  dateString: string | number;
 };
 
 export const DateHeader = ({ dateString }: DateHeaderProps) => {

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -2,10 +2,8 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import {
-  isDayOrMoment,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../utils/getDateString';
 
 const styles = StyleSheet.create({
   container: {
@@ -42,10 +40,12 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
   }
 
   const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tDate = tDateTimeParser(date);
-  const dateString = isDayOrMoment(tDate)
-    ? tDate.format(dateFormat)
-    : new Date(tDate).toDateString();
+
+  const dateString = getDateString({
+    date,
+    format: dateFormat,
+    tDateTimeParser,
+  });
 
   return (
     <View

package/src/components/MessageList/MessageList.tsx

@@ -52,12 +52,12 @@ import {
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
-  isDayOrMoment,
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getDateString } from '../../utils/getDateString';
 
 const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -1023,17 +1023,17 @@ const MessageListWithContext = <
     threadList,
   ]);
 
-  const stickyHeaderFormatDate =
+  const stickyHeaderDateFormat =
     stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tStickyHeaderDate =
-    stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
 
   const stickyHeaderDateString = useMemo(() => {
-    if (tStickyHeaderDate === null || hideStickyDateHeader) return null;
-    if (isDayOrMoment(tStickyHeaderDate)) return tStickyHeaderDate.format(stickyHeaderFormatDate);
-
-    return new Date(tStickyHeaderDate).toDateString();
-  }, [tStickyHeaderDate, stickyHeaderFormatDate, hideStickyDateHeader]);
+    if (!stickyHeaderDate) return null;
+    return getDateString({
+      date: stickyHeaderDate,
+      format: stickyHeaderDateFormat,
+      tDateTimeParser,
+    });
+  }, [stickyHeaderDate, stickyHeaderDateFormat]);
 
   const dismissImagePicker = () => {
     if (!hasMoved && selectedPicker) {

package/src/components/MessageList/MessageSystem.tsx

@@ -4,48 +4,16 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import type { MessageType } from './hooks/useMessageList';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import {
-  isDayOrMoment,
-  TDateTimeParserInput,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginBottom: 10,
-  },
-  line: {
-    flex: 1,
-    height: 0.5,
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  textContainer: {
-    flex: 3,
-    marginTop: 10,
-  },
-});
+import { getDateString } from '../../utils/getDateString';
 
 export type MessageSystemProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: MessageType<StreamChatGenerics>;
-  /**
-   * Formatter function for date object.
-   *
-   * @param date TDateTimeParserInput object of message
-   * @returns string
-   */
-  formatDate?: (date: TDateTimeParserInput) => string;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -59,7 +27,7 @@ export const MessageSystem = <
 >(
   props: MessageSystemProps<StreamChatGenerics>,
 ) => {
-  const { formatDate, message, style } = props;
+  const { message, style } = props;
 
   const {
     theme: {
@@ -72,13 +40,11 @@ export const MessageSystem = <
   const { tDateTimeParser } = useTranslationContext();
 
   const createdAt = message.created_at;
-  const parsedDate = tDateTimeParser(createdAt);
-  const date =
-    formatDate && createdAt
-      ? formatDate(createdAt)
-      : parsedDate && isDayOrMoment(parsedDate)
-      ? parsedDate.calendar().toUpperCase()
-      : parsedDate;
+  const formattedDate = getDateString({
+    calendar: true,
+    date: createdAt,
+    tDateTimeParser,
+  });
 
   return (
     <View style={[styles.container, style, container]} testID='message-system'>
@@ -87,7 +53,11 @@ export const MessageSystem = <
         <Text style={[styles.text, { color: grey }, text]}>
           {message.text?.toUpperCase() || ''}
         </Text>
-        <Text style={[styles.text, { color: grey }, dateText]}>{date.toString()}</Text>
+        {formattedDate && (
+          <Text style={[styles.text, { color: grey }, dateText]}>
+            {formattedDate.toString().toUpperCase()}
+          </Text>
+        )}
       </View>
       <View style={[styles.line, { backgroundColor: grey_whisper }, line]} />
     </View>
@@ -95,3 +65,25 @@ export const MessageSystem = <
 };
 
 MessageSystem.displayName = 'MessageSystem{messageList{messageSystem}}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  line: {
+    flex: 1,
+    height: 0.5,
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  textContainer: {
+    flex: 3,
+    marginTop: 10,
+  },
+});

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -3,6 +3,7 @@ import type { DateSeparators } from './getDateSeparators';
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { isEditedMessage } from '../../../utils/utils';
 import type { GroupType } from '../hooks/useMessageList';
 
 export type GetGroupStylesParams<
@@ -59,22 +60,24 @@ export const getGroupStyles = <
     const isTopMessage =
       !previousMessage ||
       previousMessage.type === 'system' ||
-      userId !== previousMessage?.user?.id ||
       previousMessage.type === 'error' ||
+      userId !== previousMessage?.user?.id ||
       !!isPrevMessageTypeDeleted ||
       (!hideDateSeparators && dateSeparators[message.id]) ||
-      messageGroupStyles[previousMessage.id]?.includes('bottom');
+      messageGroupStyles[previousMessage.id]?.includes('bottom') ||
+      isEditedMessage(previousMessage);
 
     const isBottomMessage =
       !nextMessage ||
       nextMessage.type === 'system' ||
-      userId !== nextMessage?.user?.id ||
       nextMessage.type === 'error' ||
+      userId !== nextMessage?.user?.id ||
       !!isNextMessageTypeDeleted ||
       (!hideDateSeparators && dateSeparators[nextMessage.id]) ||
       (maxTimeBetweenGroupedMessages !== undefined &&
         nextMessage.created_at.getTime() - message.created_at.getTime() >
-          maxTimeBetweenGroupedMessages);
+          maxTimeBetweenGroupedMessages) ||
+      isEditedMessage(message);
 
     /**
      * Add group styles key for top message