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

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
@@ -17,8 +17,6 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
-import { MessageContent } from '../MessageContent';
-
 describe('MessageContent', () => {
   let channel;
   let chatClient;
@@ -359,19 +357,10 @@ describe('MessageContent', () => {
       user,
     });
 
-    // This needs to be mocked like that cause native onLayout on MessageContent would never
-    // trigger.
-    const MessageContentWithMockedMessageContentWidth = (props) => {
-      useEffect(() => {
-        props.setMessageContentWidth(100);
-      }, [props]);
-      return <MessageContent {...props} />;
-    };
-
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+          <Channel channel={channel}>
             <Message groupStyles={['bottom']} message={message} reactionsEnabled />
           </Channel>
         </Chat>

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { Text } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
@@ -107,6 +109,36 @@ describe('MessageItemView', () => {
     });
   });
 
+  it('wraps the full MessageItemView with swipe-to-reply', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const gestureDetector = screen.UNSAFE_getByType(GestureDetector);
+
+      expect(gestureDetector.findByProps({ testID: 'message-item-view-wrapper' })).toBeTruthy();
+    });
+  });
+
+  it('exposes contextMenuAnchorRef through MessageContext for custom renderers', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    const CustomMessageItemView = () => {
+      const { contextMenuAnchorRef } = useMessageContext();
+
+      return <Text ref={contextMenuAnchorRef}>Custom Message Item</Text>;
+    };
+
+    renderMessage({ message }, { MessageItemView: CustomMessageItemView });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Custom Message Item')).not.toBeNull();
+    });
+  });
+
   it('renders MessageSpacer component if defined', async () => {
     const user = generateUser();
     const message = generateMessage({ user });

package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js

@@ -51,7 +51,6 @@ describe('ReactionListTop', () => {
   it('renders the ReactionListTop component', async () => {
     renderMessage({
       hasReactions: true,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -63,7 +62,6 @@ describe('ReactionListTop', () => {
   it('return null in ReactionListTop component when hasReactions false', async () => {
     renderMessage({
       hasReactions: false,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -76,7 +74,6 @@ describe('ReactionListTop', () => {
     renderMessage(
       {
         hasReactions: false,
-        messageContentWidth: 100,
         reactions: [{ count: 1, own: true, type: 'love' }],
       },
       { supportedReactions: [] },

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

@@ -18,6 +18,7 @@ export const useCreateMessageContext = ({
   actionsEnabled,
   alignment,
   channel,
+  contextMenuAnchorRef,
   deliveredToCount,
   dismissOverlay,
   files,
@@ -71,6 +72,7 @@ export const useCreateMessageContext = ({
       actionsEnabled,
       alignment,
       channel,
+      contextMenuAnchorRef,
       deliveredToCount,
       dismissOverlay,
       files,

package/src/components/Message/hooks/useMessageActions.tsx

@@ -25,8 +25,9 @@ import {
   Mute,
   Pin,
   Resend,
+  Sound,
   ThreadReply,
-  // Unpin,
+  Unpin,
   UnreadIndicator,
   UserDelete,
 } from '../../../icons';
@@ -330,8 +331,7 @@ export const useMessageActions = ({
     const unpinMessage: MessageActionType = {
       action: onTogglePinMessage,
       actionType: 'unpinMessage',
-      // TODO: V9: This icon does not exist yet, replace the old when when we get a new one
-      icon: <Pin width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <Unpin width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Unpin from Conversation'),
       type: 'standard',
     };
@@ -339,7 +339,11 @@ export const useMessageActions = ({
     const muteUser: MessageActionType = {
       action: onMuteUser,
       actionType: 'muteUser',
-      icon: <Mute fill={semantics.textSecondary} height={20} width={20} />,
+      icon: isMuted ? (
+        <Sound height={20} stroke={semantics.textSecondary} width={20} />
+      ) : (
+        <Mute fill={semantics.textSecondary} height={20} width={20} />
+      ),
       title: isMuted ? t('Unmute User') : t('Mute User'),
       type: 'standard',
     };

package/src/components/Message/utils/messageActions.ts

@@ -90,7 +90,7 @@ export const messageActions = ({
     actions.push(copyMessage);
   }
 
-  if (ownCapabilities.readEvents && !error && !isThreadMessage) {
+  if (ownCapabilities.readEvents && !error && !isThreadMessage && !isMyMessage) {
     actions.push(markUnread);
   }
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -155,11 +155,11 @@ type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
     MessageInputContextValue,
     | 'audioRecorderManager'
     | 'additionalTextInputProps'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'asyncMessagesLockDistance'
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
-    | 'asyncMessagesMultiSendEnabled'
     | 'AttachmentUploadPreviewList'
     | 'AudioRecorder'
     | 'AudioRecordingInProgress'
@@ -515,6 +515,7 @@ const areEqual = (
     asyncMessagesLockDistance: prevAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: prevAudioRecordingSendOnComplete,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
     channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
@@ -534,6 +535,7 @@ const areEqual = (
     asyncMessagesLockDistance: nextAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: nextAudioRecordingSendOnComplete,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
     channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
@@ -597,6 +599,12 @@ const areEqual = (
     return false;
   }
 
+  const audioRecordingSendOnCompleteEqual =
+    prevAudioRecordingSendOnComplete === nextAudioRecordingSendOnComplete;
+  if (!audioRecordingSendOnCompleteEqual) {
+    return false;
+  }
+
   const editingEqual = !!prevEditing === !!nextEditing;
   if (!editingEqual) {
     return false;
@@ -655,9 +663,9 @@ export const MessageComposer = (props: MessageComposerProps) => {
   const {
     audioRecorderManager,
     additionalTextInputProps,
+    audioRecordingSendOnComplete,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance,
     AttachmentUploadPreviewList,
     AudioRecorder,
@@ -720,9 +728,9 @@ export const MessageComposer = (props: MessageComposerProps) => {
         recordingStatus,
         micLocked,
         additionalTextInputProps,
+        audioRecordingSendOnComplete,
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
         asyncMessagesSlideToCancelDistance,
         AttachmentUploadPreviewList,
         AudioRecorder,

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -63,7 +63,7 @@ export const MessageInputHeaderView = () => {
           />
         </Animated.View>
       ) : null}
-      {quotedMessage ? (
+      {quotedMessage && !editing ? (
         <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
           <Reply onDismiss={editing ? undefined : onDismissReply} mode='reply' />
         </Animated.View>

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { Pressable } from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { CircleStop } from '../../icons';
+import { Stop } from '../../icons';
+import { primitives } from '../../theme';
 
 export type StopMessageStreamingButtonProps = {
   /** Function that opens attachment options bottom sheet */
@@ -18,17 +19,36 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
       messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
     <Pressable
       hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
       onPress={onPress}
-      style={[stopMessageStreamingButton]}
+      style={[styles.stopStreamingButton, stopMessageStreamingButton]}
       testID='more-options-button'
     >
-      <CircleStop fill={semantics.accentPrimary} size={32} {...stopMessageStreamingIcon} />
+      <Stop fill={semantics.accentPrimary} size={24} {...stopMessageStreamingIcon} />
     </Pressable>
   );
 };
 
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        stopStreamingButton: {
+          borderWidth: 1,
+          borderRadius: primitives.radiusMax,
+          borderColor: semantics.accentPrimary,
+        },
+      }),
+    [semantics],
+  );
+};
+
 StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}';