stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

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

@@ -4,6 +4,7 @@ import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from
 import { MessageTextContainer } from './MessageTextContainer';
 
 import { useChatContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -67,19 +68,9 @@ export type MessageContentPropsWithContext = Pick<
   Pick<
     MessagesContextValue,
     | 'additionalPressableProps'
-    | 'Attachment'
     | 'enableMessageGroupingByUser'
-    | 'FileAttachmentGroup'
-    | 'Gallery'
     | 'isAttachmentEqual'
-    | 'MessageContentBottomView'
-    | 'MessageContentLeadingView'
-    | 'MessageLocation'
-    | 'MessageContentTrailingView'
-    | 'MessageContentTopView'
     | 'myMessageTheme'
-    | 'Reply'
-    | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
     /**
@@ -115,37 +106,39 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
     alignment,
-    Attachment,
     backgroundColor,
     enableMessageGroupingByUser,
-    FileAttachmentGroup,
-    Gallery,
     groupStyles,
+    goToMessage,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
     message,
     messageContentOrder,
-    MessageContentBottomView,
-    MessageContentLeadingView,
     messageGroupedSingleOrBottom = false,
-    MessageLocation,
-    MessageContentTrailingView,
-    MessageContentTopView,
     noBorder,
     onLongPress,
     onPress,
     onPressIn,
     otherAttachments,
     preventPress,
-    Reply,
-    StreamingMessageView,
     hidePaddingTop,
     hidePaddingHorizontal,
     hidePaddingBottom,
   } = props;
   const { client } = useChatContext();
-  const { PollContent: PollContentOverride } = useMessagesContext();
+  const {
+    Attachment,
+    FileAttachmentGroup,
+    Gallery,
+    MessageContentBottomView,
+    MessageContentLeadingView,
+    MessageContentTopView,
+    MessageContentTrailingView,
+    MessageLocation,
+    Reply,
+    StreamingMessageView,
+  } = useComponentsContext();
   const replyStyles = useReplyStyles();
 
   const {
@@ -166,7 +159,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           messageGroupedSingleOrBottomContainer,
           messageGroupedTopContainer,
           replyContainer,
-          wrapper,
         },
       },
     },
@@ -221,7 +213,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
-
   const contentBody = (
     <>
       <View
@@ -240,12 +231,45 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
             case 'quoted_reply':
               return (
                 message.quoted_message && (
-                  <View
+                  <Pressable
+                    disabled={!goToMessage || preventPress}
                     key={`quoted_reply_${messageContentOrderIndex}`}
+                    onLongPress={(event) => {
+                      if (onLongPress) {
+                        onLongPress({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
+                    onPress={(event) => {
+                      if (!message.quoted_message || !goToMessage) {
+                        return;
+                      }
+
+                      if (onPress) {
+                        onPress({
+                          defaultHandler: () => goToMessage(message.quoted_message!.id),
+                          emitter: 'messageContent',
+                          event,
+                        });
+                        return;
+                      }
+
+                      goToMessage(message.quoted_message.id);
+                    }}
+                    onPressIn={(event) => {
+                      if (onPressIn) {
+                        onPressIn({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
                     style={[styles.replyContainer, replyContainer]}
                   >
                     <Reply mode='reply' styles={replyStyles} />
-                  </View>
+                  </Pressable>
                 )
               );
             case 'attachments':
@@ -266,12 +290,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
               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}
-                />
+                <Poll key={`poll_${message.poll_id}`} message={message} poll={poll} />
               ) : null;
             }
             case 'location':
@@ -335,43 +354,41 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View style={wrapper}>
-        <View
-          style={[
-            styles.containerInner,
-            {
-              backgroundColor,
-              ...getBorderRadius(),
-              ...getBorderRadiusFromTheme(),
-            },
-            noBorder ? { borderWidth: 0 } : {},
-            containerInner,
-            messageGroupedSingleOrBottom
-              ? isVeryLastMessage && enableMessageGroupingByUser
-                ? lastMessageContainer
-                : messageGroupedSingleOrBottomContainer
-              : messageGroupedTopContainer,
-          ]}
-          testID='message-content-wrapper'
-        >
-          {MessageContentTopView ? <MessageContentTopView /> : null}
-          {hasContentSideViews ? (
-            <View
-              style={[
-                styles.contentRow,
-                alignment === 'right' ? styles.rightAlignContentRow : undefined,
-              ]}
-              testID='message-content-row'
-            >
-              {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
-              <View style={styles.contentBody}>{contentBody}</View>
-              {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
-            </View>
-          ) : (
-            contentBody
-          )}
-          {MessageContentBottomView ? <MessageContentBottomView /> : null}
-        </View>
+      <View
+        style={[
+          styles.containerInner,
+          {
+            backgroundColor,
+            ...getBorderRadius(),
+            ...getBorderRadiusFromTheme(),
+          },
+          noBorder ? { borderWidth: 0 } : {},
+          containerInner,
+          messageGroupedSingleOrBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? lastMessageContainer
+              : messageGroupedSingleOrBottomContainer
+            : messageGroupedTopContainer,
+        ]}
+        testID='message-content-wrapper'
+      >
+        {MessageContentTopView ? <MessageContentTopView /> : null}
+        {hasContentSideViews ? (
+          <View
+            style={[
+              styles.contentRow,
+              alignment === 'right' ? styles.rightAlignContentRow : undefined,
+            ]}
+            testID='message-content-row'
+          >
+            {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
+            <View style={styles.contentBody}>{contentBody}</View>
+            {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
+          </View>
+        ) : (
+          contentBody
+        )}
+        {MessageContentBottomView ? <MessageContentBottomView /> : null}
       </View>
     </Pressable>
   );
@@ -560,19 +577,9 @@ export const MessageContent = (props: MessageContentProps) => {
   } = useMessageContext();
   const {
     additionalPressableProps,
-    Attachment,
     enableMessageGroupingByUser,
-    FileAttachmentGroup,
-    Gallery,
     isAttachmentEqual,
-    MessageContentBottomView,
-    MessageContentLeadingView,
-    MessageLocation,
-    MessageContentTrailingView,
-    MessageContentTopView,
     myMessageTheme,
-    Reply,
-    StreamingMessageView,
   } = useMessagesContext();
   const { t } = useTranslationContext();
   const isSingleFile = files.length === 1;
@@ -584,7 +591,8 @@ export const MessageContent = (props: MessageContentProps) => {
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
-  const messageHasGiphyOrImgur =
+  const messageHasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
     otherAttachments.filter(
       (file) => file.type === FileTypes.Giphy || file.type === FileTypes.Imgur,
     ).length > 0;
@@ -594,17 +602,20 @@ export const MessageContent = (props: MessageContentProps) => {
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur;
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingHorizontal =
-    messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasGiphyOrImgur;
+    messageHasPoll ||
+    messageHasSingleMedia ||
+    messageHasSingleFile ||
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur ||
+    messageHasStandaloneGiphyOrImgur ||
     (messageContentOrder.length > 1 &&
       messageContentOrder[messageContentOrder.length - 1] === 'text');
 
@@ -613,10 +624,7 @@ export const MessageContent = (props: MessageContentProps) => {
       {...{
         additionalPressableProps,
         alignment,
-        Attachment,
         enableMessageGroupingByUser,
-        FileAttachmentGroup,
-        Gallery,
         goToMessage,
         groupStyles,
         isAttachmentEqual,
@@ -624,19 +632,12 @@ export const MessageContent = (props: MessageContentProps) => {
         isMyMessage,
         message,
         messageContentOrder,
-        MessageContentBottomView,
-        MessageContentLeadingView,
-        MessageLocation,
-        MessageContentTrailingView,
-        MessageContentTopView,
         myMessageTheme,
         onLongPress,
         onPress,
         onPressIn,
         otherAttachments,
         preventPress,
-        Reply,
-        StreamingMessageView,
         t,
         threadList,
         hidePaddingTop,

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

@@ -1,17 +1,14 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { CircleBan } from '../../../icons/CircleBan';
+import { CircleBan } from '../../../icons/no-sign';
 import { components, primitives } from '../../../theme';
 
 type MessageDeletedComponentProps = {
@@ -20,11 +17,11 @@ type MessageDeletedComponentProps = {
 };
 
 type MessageDeletedPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> &
-  Pick<MessagesContextValue, 'MessageFooter'> &
   MessageDeletedComponentProps;
 
 const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
-  const { alignment, date, groupStyle, MessageFooter } = props;
+  const { alignment, date, groupStyle } = props;
+  const { MessageFooter } = useComponentsContext();
 
   const {
     theme: {
@@ -111,14 +108,11 @@ export type MessageDeletedProps = Partial<MessageDeletedPropsWithContext> & {
 export const MessageDeleted = (props: MessageDeletedProps) => {
   const { alignment, message } = useMessageContext();
 
-  const { MessageFooter } = useMessagesContext();
-
   return (
     <MemoizedMessageDeleted
       {...{
         alignment,
         message,
-        MessageFooter,
       }}
       {...props}
     />

package/src/components/Message/MessageItemView/MessageError.tsx

@@ -1,7 +1,35 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { ErrorBadge } from '../../ui/Badge/ErrorBadge';
 
 export const MessageError = () => {
-  return <ErrorBadge size='sm' testID='message-error' />;
+  const styles = useStyles();
+
+  return (
+    <View style={styles.wrapper}>
+      <ErrorBadge size='sm' testID='message-error' />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          borderRadius: primitives.radiusMax,
+          borderWidth: 2,
+          borderColor: semantics.badgeBorder,
+        },
+      }),
+    [semantics],
+  );
 };

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

@@ -3,18 +3,13 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
-import type { MessageStatusProps } from './MessageStatus';
-
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -37,7 +32,6 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -49,10 +43,9 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     lastGroupMessage,
     members,
     message,
-    MessageStatus,
-    MessageTimestamp,
     showMessageStatus,
   } = props;
+  const { MessageStatus, MessageTimestamp } = useComponentsContext();
   const styles = useStyles();
 
   const {
@@ -169,7 +162,6 @@ export type MessageFooterProps = Partial<Pick<ChannelContextValue, 'members'>> &
     alignment?: Alignment;
     lastGroupMessage?: boolean;
     message?: LocalMessage;
-    MessageStatus?: React.ComponentType<MessageStatusProps>;
     otherAttachments?: Attachment[];
     showMessageStatus?: boolean;
   };
@@ -178,8 +170,6 @@ export const MessageFooter = (props: MessageFooterProps) => {
   const { alignment, isMessageAIGenerated, lastGroupMessage, members, message, showMessageStatus } =
     useMessageContext();
 
-  const { MessageStatus, MessageTimestamp } = useMessagesContext();
-
   return (
     <MemoizedMessageFooter
       {...{
@@ -188,8 +178,6 @@ export const MessageFooter = (props: MessageFooterProps) => {
         lastGroupMessage,
         members,
         message,
-        MessageStatus,
-        MessageTimestamp,
         showMessageStatus,
       }}
       {...props}

package/src/components/Message/MessageItemView/MessageHeader.tsx

@@ -2,43 +2,35 @@ import React, { useMemo } from 'react';
 
 import { View, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useMessageReminder } from '../../../hooks/useMessageReminder';
 
-type MessageHeaderPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> &
-  Pick<
-    MessagesContextValue,
-    | 'MessagePinnedHeader'
-    | 'MessageReminderHeader'
-    | 'MessageSavedForLaterHeader'
-    | 'SentToChannelHeader'
-  > & {
-    shouldShowSavedForLaterHeader?: boolean;
-    shouldShowPinnedHeader: boolean;
-    shouldShowReminderHeader: boolean;
-    shouldShowSentToChannelHeader: boolean;
-  };
+type MessageHeaderPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> & {
+  shouldShowSavedForLaterHeader?: boolean;
+  shouldShowPinnedHeader: boolean;
+  shouldShowReminderHeader: boolean;
+  shouldShowSentToChannelHeader: boolean;
+};
 
 const MessageHeaderWithContext = (props: MessageHeaderPropsWithContext) => {
   const {
     alignment,
     message,
-    MessagePinnedHeader,
     shouldShowSavedForLaterHeader,
     shouldShowPinnedHeader,
     shouldShowReminderHeader,
     shouldShowSentToChannelHeader,
+  } = props;
+  const {
+    MessagePinnedHeader,
     MessageReminderHeader,
     MessageSavedForLaterHeader,
     SentToChannelHeader,
-  } = props;
+  } = useComponentsContext();
 
   const containerStyle: ViewStyle = useMemo(() => {
     return {
@@ -115,12 +107,6 @@ export type MessageHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
 
 export const MessageHeader = (props: MessageHeaderProps) => {
   const { alignment, message } = useMessageContext();
-  const {
-    MessagePinnedHeader,
-    MessageReminderHeader,
-    MessageSavedForLaterHeader,
-    SentToChannelHeader,
-  } = useMessagesContext();
   const reminder = useMessageReminder(message.id);
 
   const shouldShowSavedForLaterHeader = reminder && !reminder.remindAt;
@@ -141,14 +127,10 @@ export const MessageHeader = (props: MessageHeaderProps) => {
     <MemoizedMessageHeader
       alignment={alignment}
       message={message}
-      MessagePinnedHeader={MessagePinnedHeader}
       shouldShowSavedForLaterHeader={shouldShowSavedForLaterHeader}
       shouldShowPinnedHeader={shouldShowPinnedHeader}
       shouldShowReminderHeader={!!shouldShowReminderHeader}
       shouldShowSentToChannelHeader={shouldShowSentToChannelHeader}
-      MessageReminderHeader={MessageReminderHeader}
-      MessageSavedForLaterHeader={MessageSavedForLaterHeader}
-      SentToChannelHeader={SentToChannelHeader}
       {...props}
     />
   );