stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/Message/Message.tsx

@@ -1,5 +1,15 @@
-import React, { useMemo, useState } from 'react';
-import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal } from 'react-native-teleport';
 
 import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
 
@@ -9,6 +19,7 @@ import { useMessageActions } from './hooks/useMessageActions';
 import { useMessageDeliveredData } from './hooks/useMessageDeliveryData';
 import { useMessageReadData } from './hooks/useMessageReadData';
 import { useProcessReactions } from './hooks/useProcessReactions';
+import { measureInWindow } from './utils/measureInWindow';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
 import {
@@ -25,6 +36,7 @@ import {
   useMessageComposerAPIContext,
 } from '../../contexts/messageComposerContext/MessageComposerAPIContext';
 import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext';
+import { useMessageListItemContext } from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -37,19 +49,34 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
+import { useStableCallback } from '../../hooks';
 import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
+import {
+  closeOverlay,
+  openOverlay,
+  setOverlayBottomH,
+  setOverlayMessageH,
+  setOverlayTopH,
+  useIsOverlayActive,
+} from '../../state-store';
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
+  generateRandomId,
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
-  isEditedMessage,
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
+import { dismissKeyboard } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { BottomSheetModal } from '../UIComponents';
+
+const createMessageOverlayId = (messageId?: string) =>
+  `message-overlay-${messageId ?? 'unknown'}-${generateRandomId()}`;
 
 export type TouchableEmitter =
+  | 'failed-image'
   | 'fileAttachment'
   | 'gallery'
   | 'giphy'
@@ -68,7 +95,7 @@ export type TextMentionTouchableHandlerPayload = {
 export type UrlTouchableHandlerAdditionalInfo = { url?: string };
 
 export type UrlTouchableHandlerPayload = {
-  emitter: 'textLink' | 'card';
+  emitter: 'textLink' | 'urlPreview';
   additionalInfo?: UrlTouchableHandlerAdditionalInfo;
 };
 
@@ -95,7 +122,7 @@ export type PressableHandlerPayload = {
   | {
       emitter?: Exclude<
         TouchableEmitter,
-        'textMention' | 'textLink' | 'card' | 'fileAttachment' | 'gallery'
+        'textMention' | 'textLink' | 'urlPreview' | 'fileAttachment' | 'gallery'
       >;
     }
   | TextMentionTouchableHandlerPayload
@@ -175,13 +202,14 @@ export type MessagePropsWithContext = Pick<
     | 'handleReaction'
     | 'handleRetry'
     | 'handleThreadReply'
+    | 'handleBlockUser'
     | 'isAttachmentEqual'
     | 'MessageMenu'
     | 'messageActions'
     | 'messageContentOrder'
     | 'MessageBounce'
     | 'MessageBlocked'
-    | 'MessageSimple'
+    | 'MessageItemView'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
@@ -192,6 +220,13 @@ export type MessagePropsWithContext = Pick<
     | 'supportedReactions'
     | 'updateMessage'
     | 'PollContent'
+    // TODO: remove this comment later, using it as a pragma mark
+    | 'MessageUserReactions'
+    | 'MessageUserReactionsAvatar'
+    | 'MessageUserReactionsItem'
+    | 'MessageReactionPicker'
+    | 'MessageActionList'
+    | 'MessageActionListItem'
   > &
   Pick<ThreadContextValue, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
@@ -219,12 +254,10 @@ export type MessagePropsWithContext = Pick<
  * each individual Message component.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
-  const [messageOverlayVisible, setMessageOverlayVisible] = useState(false);
   const [isErrorInMessage, setIsErrorInMessage] = useState(false);
-  const [showMessageReactions, setShowMessageReactions] = useState(true);
-  const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
-  const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
+  const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
 
   const {
     channel,
@@ -232,7 +265,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     deleteMessage: deleteMessageFromContext,
     deleteReaction,
     deliveredToCount,
-    dismissKeyboard,
     dismissKeyboardOnMessageTouch,
     enableLongPress = true,
     enforceUniqueReaction,
@@ -252,6 +284,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleReaction: handleReactionProp,
     handleRetry,
     handleThreadReply,
+    handleBlockUser,
     isTargetedMessage,
     members,
     message,
@@ -259,9 +292,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     MessageBlocked,
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
-    MessageMenu,
     messagesContext,
-    MessageSimple,
+    MessageItemView,
     onLongPressMessage: onLongPressMessageProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
@@ -275,7 +307,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     setEditingState,
     showAvatar,
     showMessageStatus,
-    showUnreadUnderlay,
     style,
     supportedReactions,
     t,
@@ -283,31 +314,50 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     updateMessage,
     readBy,
     setQuotedMessage,
+    MessageUserReactions,
+    MessageUserReactionsAvatar,
+    MessageUserReactionsItem,
+    MessageReactionPicker,
+    MessageActionList,
+    MessageActionListItem,
   } = props;
+  // TODO: V9: Reconsider using safe area insets in every message.
+  const insets = useSafeAreaInsets();
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
   );
+  const messageOverlayId = useMemo(() => createMessageOverlayId(message.id), [message.id]);
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
-  const {
-    theme: {
-      colors: { targetedMessageBackground, bg_gradient_start },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor = bg_gradient_start, wrapper },
-      screenPadding,
-    },
-  } = useTheme();
 
-  const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
-    await dismissKeyboard();
-    setShowMessageReactions(showMessageReactions);
-    setMessageOverlayVisible(true);
-    setSelectedReaction(selectedReaction);
-  };
+  const [rect, setRect] = useState<{ w: number; h: number; x: number; y: number } | undefined>(
+    undefined,
+  );
+  const { width: screenW } = useWindowDimensions();
+
+  const showMessageOverlay = useStableCallback(async () => {
+    dismissKeyboard();
+    try {
+      const layout = await measureInWindow(messageWrapperRef, insets);
+      setRect(layout);
+      setOverlayMessageH(layout);
+      openOverlay({ id: messageOverlayId, messageId: message.id });
+    } catch (e) {
+      console.error(e);
+    }
+  });
+
+  const showReactionsOverlay = useStableCallback((reactionType?: string) => {
+    setShowMessageReactions(true);
+    setSelectedReaction(reactionType);
+  });
+
+  const { setNativeScrollability } = useMessageListItemContext();
 
   const dismissOverlay = () => {
-    setMessageOverlayVisible(false);
+    closeOverlay();
   };
 
   const actionsEnabled =
@@ -341,10 +391,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const onPress = (error = errorOrFailed) => {
     if (dismissKeyboardOnMessageTouch) {
-      Keyboard.dismiss();
-    }
-    if (isEditedMessage(message)) {
-      setIsEditedMessageOpen((prevState) => !prevState);
+      dismissKeyboard();
     }
     const quotedMessage = message.quoted_message;
     if (error) {
@@ -395,6 +442,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
               isVideoPlayerAvailable()
             ) {
               acc.videos.push({
+                ...cur,
                 image_url: cur.asset_url,
                 thumb_url: cur.thumb_url,
                 type: FileTypes.Video,
@@ -415,6 +463,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 acc.other = []; // remove other attachments if an image exists
               }
               // only add other attachments if there are no files/images
+            } else if (cur.type === FileTypes.Image && (cur.og_scrape_url || cur.title_link)) {
+              acc.files.push(cur);
             } else if (!acc.files.length && !acc.images.length && !acc.videos.length) {
               acc.other.push(cur);
             }
@@ -540,6 +590,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     retry,
     threadReply,
     unpinMessage,
+    blockUser,
   } = useMessageActions({
     channel,
     client,
@@ -560,6 +611,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleReaction: handleReactionProp,
     handleRetry,
     handleThreadReply,
+    handleBlockUser,
     message,
     onThreadSelect,
     openThread,
@@ -597,10 +649,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           pinMessage,
           quotedReply,
           retry,
-          showMessageReactions,
           threadReply,
           unpinMessage,
           updateMessage,
+          blockUser,
         });
 
   const actionHandlers: MessageActionHandlers = {
@@ -620,7 +672,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     unpinMessage: handleTogglePinMessage,
   };
 
+  const messageWrapperRef = useRef<View>(null);
+
   const onLongPress = () => {
+    setNativeScrollability(false);
     if (hasAttachmentActions || isBlockedMessage(message) || !enableLongPress) {
       return;
     }
@@ -633,6 +688,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     showMessageOverlay();
   };
 
+  const frozenMessage = useRef(message);
+  const { active: overlayActive } = useIsOverlayActive(messageOverlayId);
+
+  const messageHasOnlySingleAttachment =
+    !message.text && !message.quoted_message && message.attachments?.length === 1;
+
   const messageContext = useCreateMessageContext({
     actionsEnabled,
     alignment,
@@ -647,13 +708,14 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
-    isEditedMessageOpen,
     isMessageAIGenerated,
     isMyMessage,
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     members,
-    message,
+    message: overlayActive ? frozenMessage.current : message,
+    messageOverlayId,
     messageContentOrder,
+    messageHasOnlySingleAttachment,
     myMessageTheme: messagesContext.myMessageTheme,
     onLongPress: (payload) => {
       const onLongPressArgs = {
@@ -690,9 +752,15 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       };
 
       const handleOnPress = () => {
+        if (errorOrFailed) {
+          onPress(true);
+          return;
+        }
+
         if (onPressMessageProp) {
           return onPressMessageProp(onPressArgs);
         }
+
         if (payload.defaultHandler) {
           return payload.defaultHandler();
         }
@@ -715,65 +783,129 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           }
         }
       : null,
+    onThreadSelect,
     otherAttachments: attachments.other,
-    preventPress,
+    preventPress: overlayActive ? true : preventPress,
     reactions,
     readBy,
-    setIsEditedMessageOpen,
     setQuotedMessage,
     showAvatar,
     showMessageOverlay,
+    showReactionsOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
     threadList,
     videos: attachments.videos,
   });
 
+  const prevActive = useRef<boolean>(overlayActive);
+
+  useEffect(() => {
+    if (!overlayActive && prevActive.current && setNativeScrollability) {
+      setNativeScrollability(true);
+    }
+    prevActive.current = overlayActive;
+  }, [setNativeScrollability, overlayActive]);
+
+  useEffect(() => {
+    if (!overlayActive) {
+      frozenMessage.current = message;
+    }
+  }, [overlayActive, message]);
+
+  const styles = useStyles({
+    highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
+  });
+
   if (!(isMessageTypeDeleted || messageContentOrder.length)) {
     return null;
   }
 
   if (isBlockedMessage(message)) {
-    return <MessageBlocked message={message} />;
+    return (
+      <View style={styles.blockedMessageContainer}>
+        <MessageBlocked message={message} />
+      </View>
+    );
   }
 
   return (
     <MessageProvider value={messageContext}>
-      <View
-        style={[
-          style,
-          {
-            backgroundColor: showUnreadUnderlay ? unreadUnderlayColor : undefined,
-          },
-        ]}
-      >
-        <View
-          style={[
-            { marginTop: 2, paddingHorizontal: screenPadding },
-            wrapper,
-            (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
-              ? {
-                  backgroundColor: targetedMessageBackground,
-                  ...targetedMessageContainer,
-                }
-              : {},
-          ]}
-          testID='message-wrapper'
-        >
-          <MessageSimple />
-          {isBounceDialogOpen ? (
-            <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />
+      <View style={[style, styles.wrapper]} testID='message-wrapper'>
+        {overlayActive && rect ? (
+          <View
+            style={{
+              height: rect.h,
+              width: rect.w,
+            }}
+          />
+        ) : null}
+        {/*TODO: V9: Find a way to separate these in a dedicated file*/}
+        <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
+          {overlayActive && rect ? (
+            <View
+              onLayout={(e) => {
+                const { width: w, height: h } = e.nativeEvent.layout;
+
+                setOverlayTopH({
+                  h,
+                  w,
+                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  y: rect.y - h,
+                });
+              }}
+            >
+              <MessageReactionPicker
+                dismissOverlay={dismissOverlay}
+                handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
+              />
+            </View>
           ) : null}
-          {messageOverlayVisible ? (
-            <MessageMenu
-              dismissOverlay={dismissOverlay}
-              handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
-              messageActions={messageActions}
+        </Portal>
+        <Portal
+          hostName={overlayActive ? 'message-overlay' : undefined}
+          style={overlayActive && rect ? { width: rect.w } : undefined}
+        >
+          <MessageItemView ref={messageWrapperRef} />
+        </Portal>
+        {showMessageReactions ? (
+          <BottomSheetModal
+            lazy={true}
+            onClose={() => setShowMessageReactions(false)}
+            visible={showMessageReactions}
+            height={424}
+          >
+            <MessageUserReactions
+              message={message}
+              MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+              MessageUserReactionsItem={MessageUserReactionsItem}
               selectedReaction={selectedReaction}
-              showMessageReactions={showMessageReactions}
-              visible={messageOverlayVisible}
             />
+          </BottomSheetModal>
+        ) : null}
+        <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
+          {overlayActive && rect ? (
+            <View
+              onLayout={(e) => {
+                const { width: w, height: h } = e.nativeEvent.layout;
+                setOverlayBottomH({
+                  h,
+                  w,
+                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  y: rect.y + rect.h,
+                });
+              }}
+            >
+              <MessageActionList
+                dismissOverlay={dismissOverlay}
+                MessageActionListItem={MessageActionListItem}
+                messageActions={messageActions}
+              />
+            </View>
           ) : null}
-        </View>
+        </Portal>
+        {isBounceDialogOpen ? (
+          <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />
+        ) : null}
       </View>
     </MessageProvider>
   );
@@ -835,8 +967,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     return false;
   }
 
-  const groupStylesEqual =
-    prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
+  const groupStylesEqual = prevGroupStyles === nextGroupStyles;
   if (!groupStylesEqual) {
     return false;
   }
@@ -997,3 +1128,35 @@ export const Message = (props: MessageProps) => {
     />
   );
 };
+
+const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
+  const {
+    theme: {
+      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
+      screenPadding,
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      wrapper: {
+        paddingHorizontal: screenPadding,
+        ...(highlightedMessage
+          ? { backgroundColor: semantics.backgroundCoreHighlight, ...targetedMessageContainer }
+          : {}),
+        ...wrapper,
+      },
+      blockedMessageContainer: {
+        alignItems: 'center',
+        ...blockedMessageContainer,
+      },
+    });
+  }, [
+    wrapper,
+    screenPadding,
+    highlightedMessage,
+    semantics,
+    targetedMessageContainer,
+    blockedMessageContainer,
+  ]);
+};

package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } 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 { Pin } from '../../../../icons/Pin';
+import { primitives } from '../../../../theme';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
+
+export type MessagePinnedHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
+
+export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
+  const { message: propMessage } = props;
+  const { message: contextMessage } = useMessageContext();
+  const message = propMessage || contextMessage;
+  const styles = useStyles();
+  const { t } = useTranslationContext();
+  const { client } = useChatContext();
+
+  if (!message?.pinned) {
+    return null;
+  }
+
+  return (
+    <View accessibilityLabel='Message Pinned Header' style={styles.container}>
+      <Pin height={16} width={16} stroke={styles.label.color} />
+      <Text style={styles.label}>
+        {t('Pinned by')}{' '}
+        {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      messageItemView: {
+        pinnedHeader: { container, label },
+      },
+    },
+  } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
+
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: primitives.spacingXxs,
+        paddingVertical: primitives.spacingXxs,
+        ...container,
+      },
+      label: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightTight,
+        ...label,
+      },
+    });
+  }, [shouldUseOverlayStyles, semantics, container, label]);
+};