stream-chat-react-native-core 9.0.0-beta.31 → 9.0.0-beta.33

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -14,6 +14,7 @@ import {
   useMessageComposerHasSendableData,
   useTheme,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useHasAttachments } from '../../../../contexts/messageInputContext/hooks/useHasAttachments';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -36,10 +37,6 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesLockDistance'
     | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
-    | 'CooldownTimer'
-    | 'SendButton'
-    | 'StopMessageStreamingButton'
-    | 'StartAudioRecordingButton'
   > & {
     cooldownIsActive: boolean;
     hasAttachments: boolean;
@@ -51,17 +48,9 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) => {
-  const {
-    audioRecordingEnabled,
-    channel,
-    CooldownTimer,
-    cooldownIsActive,
-    isOnline,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
-    hasAttachments,
-  } = props;
+  const { audioRecordingEnabled, channel, cooldownIsActive, isOnline, hasAttachments } = props;
+  const { CooldownTimer, SendButton, StartAudioRecordingButton, StopMessageStreamingButton } =
+    useComponentsContext();
   const {
     theme: {
       messageComposer: {
@@ -180,10 +169,6 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
     audioRecordingSendOnComplete,
-    CooldownTimer,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
   } = useMessageInputContext();
   const cooldownIsActive = useIsCooldownActive();
   const hasAttachments = useHasAttachments();
@@ -198,11 +183,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
         audioRecordingEnabled,
         channel,
         cooldownIsActive,
-        CooldownTimer,
         isOnline,
-        SendButton,
-        StartAudioRecordingButton,
-        StopMessageStreamingButton,
         hasAttachments,
       }}
       {...props}

package/src/components/MessageList/MessageFlashList.tsx

@@ -29,6 +29,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -121,19 +122,15 @@ type MessageFlashListPropsWithContext = Pick<
     | 'channel'
     | 'channelUnreadStateStore'
     | 'disabled'
-    | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
     | 'highlightedMessageId'
     | 'loadChannelAroundMessage'
     | 'loading'
-    | 'LoadingIndicator'
     | 'markRead'
-    | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
-    | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -143,19 +140,7 @@ type MessageFlashListPropsWithContext = Pick<
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
-    | 'DateHeader'
-    | 'disableTypingIndicator'
-    | 'FlatList'
-    | 'InlineDateSeparator'
-    | 'InlineUnreadIndicator'
-    | 'Message'
-    | 'ScrollToBottomButton'
-    | 'MessageSystem'
-    | 'myMessageTheme'
-    | 'shouldShowUnreadUnderlay'
-    | 'TypingIndicator'
-    | 'TypingIndicatorContainer'
-    | 'UnreadMessagesNotification'
+    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
   Pick<
     ThreadContextValue,
@@ -277,10 +262,8 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     // FlatList,
     FooterComponent,
     HeaderComponent = InlineLoadingMoreIndicator,
@@ -288,7 +271,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -299,24 +281,28 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     messageInputHeightStore,
     myMessageTheme,
     readEvents,
-    NetworkDownIndicator,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
     reloadChannel,
-    ScrollToBottomButton,
     setChannelUnreadState,
     setFlatListRef,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     thread,
     threadInstance,
     threadList = false,
+  } = props;
+  const {
+    EmptyStateIndicator,
+    MessageListLoadingIndicator: LoadingIndicator,
+    NetworkDownIndicator,
+    ScrollToBottomButton,
+    StickyHeader,
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
-  } = props;
+  } = useComponentsContext();
   const flashListRef = useRef<FlashListRef<LocalMessage> | null>(null);
 
   const { height: messageInputHeight } = useStateStore(
@@ -1091,7 +1077,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       <Animated.View
@@ -1181,7 +1167,6 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     channel,
     channelUnreadStateStore,
     disabled,
-    EmptyStateIndicator,
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
@@ -1189,34 +1174,18 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     isChannelActive,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     markRead,
     maximumMessageLimit,
-    NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
-  const {
-    DateHeader,
-    disableTypingIndicator,
-    FlatList,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    ScrollToBottomButton,
-    shouldShowUnreadUnderlay,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
-  } = useMessagesContext();
+  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
+    useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
@@ -1230,48 +1199,35 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         channelUnreadStateStore,
         client,
         closePicker,
-        DateHeader,
         disabled,
         disableTypingIndicator,
-        EmptyStateIndicator,
         enableMessageGroupingByUser,
         error,
         FlatList,
         hideStickyDateHeader,
         highlightedMessageId,
-        InlineDateSeparator,
-        InlineUnreadIndicator,
         isListActive: isChannelActive,
         loadChannelAroundMessage,
         loading,
-        LoadingIndicator,
         loadMore,
         loadMoreRecent,
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
         maximumMessageLimit,
-        Message,
         messageInputFloating,
         messageInputHeightStore,
-        MessageSystem,
         myMessageTheme,
-        NetworkDownIndicator,
         readEvents,
         reloadChannel,
-        ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         setChannelUnreadState,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
-        StickyHeader,
         targetedMessage,
         thread,
         threadInstance,
         threadList,
-        TypingIndicator,
-        TypingIndicatorContainer,
-        UnreadMessagesNotification,
       }}
       {...props}
       noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}

package/src/components/MessageList/MessageList.tsx

@@ -38,6 +38,7 @@ import {
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 
 import {
@@ -196,18 +197,14 @@ type MessageListPropsWithContext = Pick<
     | 'channel'
     | 'channelUnreadStateStore'
     | 'disabled'
-    | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
     | 'loadChannelAroundMessage'
     | 'loading'
-    | 'LoadingIndicator'
     | 'markRead'
-    | 'NetworkDownIndicator'
     | 'reloadChannel'
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
-    | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -216,17 +213,7 @@ type MessageListPropsWithContext = Pick<
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> &
   Pick<
     MessagesContextValue,
-    | 'DateHeader'
-    | 'disableTypingIndicator'
-    | 'FlatList'
-    | 'InlineDateSeparator'
-    | 'InlineUnreadIndicator'
-    | 'Message'
-    | 'ScrollToBottomButton'
-    | 'myMessageTheme'
-    | 'TypingIndicator'
-    | 'TypingIndicatorContainer'
-    | 'UnreadMessagesNotification'
+    'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
   Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
   Pick<
@@ -326,10 +313,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     channelUnreadStateStore,
     client,
     closePicker,
-    DateHeader,
     disabled,
     disableTypingIndicator,
-    EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
     HeaderComponent,
@@ -338,7 +323,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     isLiveStreaming = false,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     loadMore,
     loadMoreRecent,
     loadMoreRecentThread,
@@ -348,27 +332,31 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     messageInputFloating,
     messageInputHeightStore,
     myMessageTheme,
-    NetworkDownIndicator,
     noGroupByUser,
     onListScroll,
     onThreadSelect,
     readEvents,
     reloadChannel,
-    ScrollToBottomButton,
     setChannelUnreadState,
     setFlatListRef,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     thread,
     threadInstance,
     threadList = false,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
     hasMore,
     threadHasMore,
   } = props;
+  const {
+    EmptyStateIndicator,
+    MessageListLoadingIndicator: LoadingIndicator,
+    NetworkDownIndicator,
+    ScrollToBottomButton,
+    StickyHeader,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    UnreadMessagesNotification,
+  } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
   const styles = useStyles();
@@ -1306,7 +1294,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       {scrollToBottomButtonVisible ? (
@@ -1350,42 +1338,25 @@ export const MessageList = (props: MessageListProps) => {
     channel,
     channelUnreadStateStore,
     disabled,
-    EmptyStateIndicator,
     enableMessageGroupingByUser,
     error,
     hideStickyDateHeader,
     highlightedMessageId,
     loadChannelAroundMessage,
     loading,
-    LoadingIndicator,
     maximumMessageLimit,
     markRead,
-    NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
-    StickyHeader,
     targetedMessage,
     threadList,
   } = useChannelContext();
   const { client } = useChatContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const {
-    DateHeader,
-    disableTypingIndicator,
-    FlatList,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    ScrollToBottomButton,
-    shouldShowUnreadUnderlay,
-    TypingIndicator,
-    TypingIndicatorContainer,
-    UnreadMessagesNotification,
-  } = useMessagesContext();
+  const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
+    useMessagesContext();
   const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
   const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
@@ -1399,47 +1370,34 @@ export const MessageList = (props: MessageListProps) => {
         channelUnreadStateStore,
         client,
         closePicker,
-        DateHeader,
         disabled,
         disableTypingIndicator,
-        EmptyStateIndicator,
         enableMessageGroupingByUser,
         error,
         FlatList,
         hideStickyDateHeader,
         highlightedMessageId,
-        InlineDateSeparator,
-        InlineUnreadIndicator,
         loadChannelAroundMessage,
         loading,
-        LoadingIndicator,
         loadMore,
         loadMoreRecent,
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
         maximumMessageLimit,
-        Message,
         messageInputFloating,
         messageInputHeightStore,
-        MessageSystem,
         myMessageTheme,
-        NetworkDownIndicator,
         readEvents,
         reloadChannel,
-        ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         setChannelUnreadState,
         setTargetedMessage,
         shouldShowUnreadUnderlay,
-        StickyHeader,
         targetedMessage,
         thread,
         threadInstance,
         threadList,
-        TypingIndicator,
-        TypingIndicatorContainer,
-        UnreadMessagesNotification,
         hasMore,
         threadHasMore,
       }}

package/src/components/MessageList/StickyHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import { getDateString } from '../../utils/i18n/getDateString';
@@ -8,7 +8,7 @@ import { getDateString } from '../../utils/i18n/getDateString';
 /**
  * Props for the StickyHeader component.
  */
-export type StickyHeaderProps = Pick<MessagesContextValue, 'DateHeader'> & {
+export type StickyHeaderProps = {
   /**
    * Date to be displayed in the sticky header.
    */
@@ -19,7 +19,8 @@ export type StickyHeaderProps = Pick<MessagesContextValue, 'DateHeader'> & {
   dateString?: string | number;
 };
 
-export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps) => {
+export const StickyHeader = ({ date, dateString }: StickyHeaderProps) => {
+  const { DateHeader } = useComponentsContext();
   const { t, tDateTimeParser } = useTranslationContext();
 
   const stickyHeaderDateString = useMemo(() => {

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -92,7 +92,7 @@ describe('MessageList', () => {
     });
   });
 
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to default(always)', async () => {
+  it('should render deleted message in the list', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -124,135 +124,6 @@ describe('MessageList', () => {
     });
   });
 
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to sender', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ type: 'deleted', user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='sender'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('message-deleted')).toBeTruthy();
-    });
-  });
-
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to receiver', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ type: 'deleted', user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { getByTestId, queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='receiver'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-deleted')).toBeTruthy();
-      expect(queryByTestId('only-visible-to-you')).toBeNull();
-    });
-  });
-
-  it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to never', async () => {
-    const user1 = generateUser();
-    const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ user: user2 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ type: 'deleted', user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} deletedMessagesVisibilityType='never'>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('message-deleted')).toBeNull();
-      expect(queryByTestId('only-visible-to-you')).toBeNull();
-    });
-  });
-
-  it('should render deleted message in the list', async () => {
-    const user1 = generateUser();
-    const mockedChannel = generateChannelResponse({
-      members: [generateMember({ user: user1 })],
-      messages: [
-        generateMessage({ type: 'deleted', user: user1 }),
-        generateMessage({ type: 'system', user: undefined }),
-        generateMessage({ user: user1 }),
-      ],
-    });
-
-    const chatClient = await getTestClientWithUser({ id: 'testID' });
-    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.watch();
-
-    const { getByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <MessageList />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-deleted')).toBeTruthy();
-    });
-  });
-
   it('should render the typing indicator when typing object is non empty', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({