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

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -4,14 +4,11 @@ import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-nati
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import {
-  isDayOrMoment,
-  TDateTimeParserOutput,
-  useTranslationContext,
-} from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { getDateString } from '../../../utils/getDateString';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -101,32 +98,7 @@ export const ImageGalleryHeader = <
   const { t, tDateTimeParser } = useTranslationContext();
   const { setOverlay } = useOverlayContext();
 
-  const parsedDate = photo ? tDateTimeParser(photo?.created_at) : null;
-
-  /**
-   * .calendar and .fromNow can be initialized after the first render,
-   * and attempting to access them at that time will cause an error
-   * to be thrown.
-   *
-   * This falls back to null if neither exist.
-   */
-  const getDateObject = (date: TDateTimeParserOutput | null) => {
-    if (date === null || !isDayOrMoment(date)) {
-      return null;
-    }
-
-    if (date.calendar) {
-      return date.calendar();
-    }
-
-    if (date.fromNow) {
-      return date.fromNow();
-    }
-
-    return null;
-  };
-
-  const date = getDateObject(parsedDate);
+  const date = getDateString({ calendar: true, date: photo?.created_at, tDateTimeParser });
 
   const headerStyle = useAnimatedStyle<ViewStyle>(() => ({
     opacity: opacity.value,

package/src/components/Message/Message.tsx

@@ -48,6 +48,7 @@ import {
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
+  isEditedMessage,
   MessageStatusTypes,
 } from '../../utils/utils';
 
@@ -233,6 +234,7 @@ const MessageWithContext = <
   props: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
+  const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
   const isMessageTypeDeleted = props.message.type === 'deleted';
 
   const {
@@ -334,6 +336,9 @@ const MessageWithContext = <
     if (dismissKeyboardOnMessageTouch) {
       Keyboard.dismiss();
     }
+    if (isEditedMessage(message)) {
+      setIsEditedMessageOpen((prevState) => !prevState);
+    }
     const quotedMessage = message.quoted_message as MessageType<StreamChatGenerics>;
     if (error) {
       /**
@@ -677,6 +682,7 @@ const MessageWithContext = <
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
+    isEditedMessageOpen,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     lastReceivedId,
@@ -727,6 +733,7 @@ const MessageWithContext = <
     otherAttachments: attachments.other,
     preventPress,
     reactions,
+    setIsEditedMessageOpen,
     showAvatar,
     showMessageOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,

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

@@ -19,8 +19,6 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
-  isDayOrMoment,
-  TDateTimeParserInput,
   TranslationContextValue,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
@@ -66,6 +64,7 @@ export type MessageContentPropsWithContext<
   MessageContextValue<StreamChatGenerics>,
   | 'alignment'
   | 'disabled'
+  | 'isEditedMessageOpen'
   | 'goToMessage'
   | 'groupStyles'
   | 'hasReactions'
@@ -88,7 +87,6 @@ export type MessageContentPropsWithContext<
     | 'additionalTouchableProps'
     | 'Attachment'
     | 'FileAttachmentGroup'
-    | 'formatDate'
     | 'Gallery'
     | 'isAttachmentEqual'
     | 'MessageFooter'
@@ -102,7 +100,7 @@ export type MessageContentPropsWithContext<
     | 'onPressInMessage'
     | 'Reply'
   > &
-  Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
+  Pick<TranslationContextValue, 't'> & {
     setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
   };
 
@@ -120,7 +118,6 @@ const MessageContentWithContext = <
     Attachment,
     disabled,
     FileAttachmentGroup,
-    formatDate,
     Gallery,
     groupStyles,
     hasReactions,
@@ -145,7 +142,6 @@ const MessageContentWithContext = <
     Reply,
     setMessageContentWidth,
     showMessageStatus,
-    tDateTimeParser,
     threadList,
   } = props;
 
@@ -178,21 +174,6 @@ const MessageContentWithContext = <
   } = useTheme();
   const { vw } = useViewport();
 
-  const getDateText = (formatter?: (date: TDateTimeParserInput) => string) => {
-    if (!message.created_at) return '';
-
-    if (formatter) {
-      return formatter(message.created_at);
-    }
-
-    const parserOutput = tDateTimeParser(message.created_at);
-
-    if (isDayOrMoment(parserOutput)) {
-      return parserOutput.format('LT');
-    }
-    return message.created_at;
-  };
-
   const onLayout: (event: LayoutChangeEvent) => void = ({
     nativeEvent: {
       layout: { width },
@@ -221,7 +202,7 @@ const MessageContentWithContext = <
   if (isMessageTypeDeleted) {
     return (
       <MessageDeleted
-        formattedDate={getDateText(formatDate)}
+        date={message.created_at}
         groupStyle={groupStyle}
         noBorder={noBorder}
         onLayout={onLayout}
@@ -332,7 +313,7 @@ const MessageContentWithContext = <
       {MessageHeader && (
         <MessageHeader
           alignment={alignment}
-          formattedDate={getDateText(formatDate)}
+          date={message.created_at}
           isDeleted={isMessageTypeDeleted}
           lastGroupMessage={lastGroupMessage}
           members={members}
@@ -411,7 +392,7 @@ const MessageContentWithContext = <
         {error && <MessageError />}
       </View>
       <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
-      <MessageFooter formattedDate={getDateText(formatDate)} isDeleted={!!isMessageTypeDeleted} />
+      <MessageFooter date={message.created_at} isDeleted={!!isMessageTypeDeleted} />
     </TouchableOpacity>
   );
 };
@@ -426,6 +407,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
     isAttachmentEqual,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
@@ -434,13 +416,13 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     onlyEmojis: prevOnlyEmojis,
     otherAttachments: prevOtherAttachments,
     t: prevT,
-    tDateTimeParser: prevTDateTimeParser,
   } = prevProps;
   const {
     disabled: nextDisabled,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     lastGroupMessage: nextLastGroupMessage,
     members: nextMembers,
     message: nextMessage,
@@ -449,7 +431,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     onlyEmojis: nextOnlyEmojis,
     otherAttachments: nextOtherAttachments,
     t: nextT,
-    tDateTimeParser: nextTDateTimeParser,
   } = nextProps;
 
   const disabledEqual = prevDisabled === nextDisabled;
@@ -465,6 +446,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     nextMessage.quoted_message_id && prevGoToMessage !== nextGoToMessage;
   if (goToMessageChangedAndMatters) return false;
 
+  const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
+  if (!isEditedMessageOpenEqual) return false;
+
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;
   if (!onlyEmojisEqual) return false;
 
@@ -542,9 +526,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 
-  const tDateTimeParserEqual = prevTDateTimeParser === nextTDateTimeParser;
-  if (!tDateTimeParserEqual) return false;
-
   const messageThemeEqual =
     JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
   if (!messageThemeEqual) return false;
@@ -576,6 +557,7 @@ export const MessageContent = <
     goToMessage,
     groupStyles,
     hasReactions,
+    isEditedMessageOpen,
     isMyMessage,
     lastGroupMessage,
     lastReceivedId,
@@ -595,7 +577,6 @@ export const MessageContent = <
     additionalTouchableProps,
     Attachment,
     FileAttachmentGroup,
-    formatDate,
     Gallery,
     isAttachmentEqual,
     MessageDeleted,
@@ -608,7 +589,7 @@ export const MessageContent = <
     myMessageTheme,
     Reply,
   } = useMessagesContext<StreamChatGenerics>();
-  const { t, tDateTimeParser } = useTranslationContext();
+  const { t } = useTranslationContext();
 
   return (
     <MemoizedMessageContent<StreamChatGenerics>
@@ -618,12 +599,12 @@ export const MessageContent = <
         Attachment,
         disabled,
         FileAttachmentGroup,
-        formatDate,
         Gallery,
         goToMessage,
         groupStyles,
         hasReactions,
         isAttachmentEqual,
+        isEditedMessageOpen,
         isMyMessage,
         lastGroupMessage,
         lastReceivedId,
@@ -647,7 +628,6 @@ export const MessageContent = <
         Reply,
         showMessageStatus,
         t,
-        tDateTimeParser,
         threadList,
       }}
       {...props}

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

@@ -3,11 +3,9 @@ import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import merge from 'lodash/merge';
 
-import type { MessageFooterProps } from './MessageFooter';
 import { MessageTextContainer } from './MessageTextContainer';
 
 import {
-  Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
@@ -16,13 +14,9 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -40,17 +34,16 @@ const styles = StyleSheet.create({
 });
 
 type MessageDeletedComponentProps = {
-  formattedDate: string | Date;
   groupStyle: string;
   noBorder: boolean;
   onLayout: (event: LayoutChangeEvent) => void;
+  date?: string | Date;
 };
 
 type MessageDeletedPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'> &
   Pick<MessagesContextValue<StreamChatGenerics>, 'MessageFooter'> &
-  Pick<TranslationContextValue, 't'> &
   MessageDeletedComponentProps;
 
 const MessageDeletedWithContext = <
@@ -58,8 +51,7 @@ const MessageDeletedWithContext = <
 >(
   props: MessageDeletedPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { alignment, formattedDate, groupStyle, message, MessageFooter, noBorder, onLayout, t } =
-    props;
+  const { alignment, date, groupStyle, message, MessageFooter, noBorder, onLayout } = props;
 
   const {
     theme: {
@@ -74,6 +66,7 @@ const MessageDeletedWithContext = <
       },
     },
   } = useTheme();
+  const { t } = useTranslationContext();
 
   return (
     <View
@@ -108,7 +101,7 @@ const MessageDeletedWithContext = <
           message={{ ...message, text: `_${t('Message deleted')}_` }}
         />
       </View>
-      <MessageFooter formattedDate={formattedDate} isDeleted />
+      <MessageFooter date={date} isDeleted />
     </View>
   );
 };
@@ -117,16 +110,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageDeletedPropsWithContext<StreamChatGenerics>,
   nextProps: MessageDeletedPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    alignment: prevAlignment,
-    formattedDate: prevFormattedDate,
-    message: prevMessage,
-  } = prevProps;
-  const {
-    alignment: nextAlignment,
-    formattedDate: nextFormattedDate,
-    message: nextMessage,
-  } = nextProps;
+  const { alignment: prevAlignment, date: prevDate, message: prevMessage } = prevProps;
+  const { alignment: nextAlignment, date: nextDate, message: nextMessage } = nextProps;
 
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
@@ -142,8 +127,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) return false;
+  const dateEqual = prevDate === nextDate;
+  if (!dateEqual) return false;
 
   return true;
 };
@@ -155,10 +140,10 @@ const MemoizedMessageDeleted = React.memo(
 
 export type MessageDeletedProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = MessageDeletedComponentProps & {
-  alignment?: Alignment;
-  message?: MessageType<StreamChatGenerics>;
-  MessageFooter?: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
+> = Partial<MessageDeletedPropsWithContext<StreamChatGenerics>> & {
+  groupStyle: string;
+  noBorder: boolean;
+  onLayout: (event: LayoutChangeEvent) => void;
 };
 
 export const MessageDeleted = <
@@ -170,15 +155,12 @@ export const MessageDeleted = <
 
   const { MessageFooter } = useMessagesContext<StreamChatGenerics>();
 
-  const { t } = useTranslationContext();
-
   return (
     <MemoizedMessageDeleted
       {...{
         alignment,
         message,
         MessageFooter,
-        t,
       }}
       {...props}
     />

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { MessageTimestamp, MessageTimestampProps } from './MessageTimestamp';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { isEditedMessage } from '../../../utils/utils';
+
+export type MessageEditedTimestampProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>> & MessageTimestampProps;
+
+export const MessageEditedTimestamp = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageEditedTimestampProps<StreamChatGenerics>,
+) => {
+  const { message: propMessage, timestamp } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: {
+        content: { editedLabel, editedTimestampContainer },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+  const { message: contextMessage } = useMessageContext<StreamChatGenerics>();
+  const message = propMessage || contextMessage;
+
+  if (!isEditedMessage(message)) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, editedTimestampContainer]}>
+      <Text style={[styles.text, { color: grey }, editedLabel]}>{t<string>('Edited') + ' '}</Text>
+      <MessageTimestamp calendar={true} timestamp={timestamp} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 12,
+  },
+});