stream-chat-react-native-core 9.0.0-beta.30 → 9.0.0-beta.32

package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js

@@ -4,6 +4,7 @@ import { Text } from 'react-native';
 
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 
@@ -61,17 +62,19 @@ describe('isAttachmentEqualHandler', () => {
     return (
       <OverlayProvider>
         <Chat client={chatClient}>
-          <Channel
-            UnsupportedAttachment={({ attachment: { customField, type } }) => {
-              if (type === 'test') {
-                return <Text testID='attachment-custom-field'>{customField}</Text>;
-              }
+          <WithComponents
+            overrides={{
+              UnsupportedAttachment: ({ attachment: { customField, type } }) => {
+                if (type === 'test') {
+                  return <Text testID='attachment-custom-field'>{customField}</Text>;
+                }
+              },
             }}
-            channel={channel}
-            isAttachmentEqual={isAttachmentEqualHandler}
           >
-            <MessageList />
-          </Channel>
+            <Channel channel={channel} isAttachmentEqual={isAttachmentEqualHandler}>
+              <MessageList />
+            </Channel>
+          </WithComponents>
         </Chat>
       </OverlayProvider>
     );

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -6,7 +6,6 @@ export const useCreateChannelContext = ({
   channel,
   channelUnreadStateStore,
   disabled,
-  EmptyStateIndicator,
   enableMessageGroupingByUser,
   enforceUniqueReaction,
   error,
@@ -18,19 +17,16 @@ export const useCreateChannelContext = ({
   loadChannelAroundMessage,
   loadChannelAtFirstUnreadMessage,
   loading,
-  LoadingIndicator,
   markRead,
   maxTimeBetweenGroupedMessages,
   maximumMessageLimit,
   members,
-  NetworkDownIndicator,
   read,
   reloadChannel,
   scrollToFirstUnreadThreshold,
   setChannelUnreadState,
   setLastRead,
   setTargetedMessage,
-  StickyHeader,
   targetedMessage,
   threadList,
   uploadAbortControllerRef,
@@ -52,7 +48,6 @@ export const useCreateChannelContext = ({
       channel,
       channelUnreadStateStore,
       disabled,
-      EmptyStateIndicator,
       enableMessageGroupingByUser,
       enforceUniqueReaction,
       error,
@@ -64,19 +59,16 @@ export const useCreateChannelContext = ({
       loadChannelAroundMessage,
       loadChannelAtFirstUnreadMessage,
       loading,
-      LoadingIndicator,
       markRead,
       maximumMessageLimit,
       maxTimeBetweenGroupedMessages,
       members,
-      NetworkDownIndicator,
       read,
       reloadChannel,
       scrollToFirstUnreadThreshold,
       setChannelUnreadState,
       setLastRead,
       setTargetedMessage,
-      StickyHeader,
       targetedMessage,
       threadList,
       uploadAbortControllerRef,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -9,62 +9,25 @@ export const useCreateInputMessageInputContext = ({
   asyncMessagesMinimumPressDuration,
   asyncMessagesSlideToCancelDistance,
   audioRecordingSendOnComplete,
-  AttachButton,
   attachmentPickerBottomSheetHeight,
-  AttachmentPickerSelectionBar,
   attachmentSelectionBarHeight,
-  AttachmentUploadPreviewList,
-  AudioAttachmentUploadPreview,
-  AudioRecorder,
   audioRecordingEnabled,
-  AudioRecordingInProgress,
-  AudioRecordingLockIndicator,
-  AudioRecordingPreview,
-  AudioRecordingWaveform,
-  AutoCompleteSuggestionHeader,
-  AutoCompleteSuggestionItem,
-  AutoCompleteSuggestionList,
   channelId,
   compressImageQuality,
-  CooldownTimer,
-  CreatePollContent,
   createPollOptionGap,
   doFileUploadRequest,
   editMessage,
-  FileAttachmentUploadPreview,
-  FileUploadInProgressIndicator,
-  FileUploadRetryIndicator,
-  FileUploadNotSupportedIndicator,
-  ImageUploadInProgressIndicator,
-  ImageUploadRetryIndicator,
-  ImageUploadNotSupportedIndicator,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
   hasFilePicker,
   hasImagePicker,
-  ImageAttachmentUploadPreview,
-  Input,
-  InputView,
-  InputButtons,
-  MessageComposerLeadingView,
-  MessageComposerTrailingView,
   messageInputFloating,
   messageInputHeightStore,
-  MessageInputFooterView,
-  MessageInputHeaderView,
-  MessageInputLeadingView,
-  MessageInputTrailingView,
   openPollCreationDialog,
-  SendButton,
   sendMessage,
-  SendMessageDisallowedIndicator,
   setInputRef,
   showPollCreationDialog,
-  ShowThreadMessageInChannelButton,
-  StartAudioRecordingButton,
-  StopMessageStreamingButton,
-  VideoAttachmentUploadPreview,
 }: InputMessageInputContextValue & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -79,70 +42,27 @@ export const useCreateInputMessageInputContext = ({
       asyncMessagesMinimumPressDuration,
       asyncMessagesSlideToCancelDistance,
       audioRecordingSendOnComplete,
-      AttachButton,
       attachmentPickerBottomSheetHeight,
-      AttachmentPickerSelectionBar,
       attachmentSelectionBarHeight,
-      AttachmentUploadPreviewList,
-      AudioAttachmentUploadPreview,
-      AudioRecorder,
       audioRecordingEnabled,
-      AudioRecordingInProgress,
-      AudioRecordingLockIndicator,
-      AudioRecordingPreview,
-      AudioRecordingWaveform,
-      AutoCompleteSuggestionHeader,
-      AutoCompleteSuggestionItem,
-      AutoCompleteSuggestionList,
       compressImageQuality,
-      CooldownTimer,
-      CreatePollContent,
       createPollOptionGap,
       doFileUploadRequest,
       editMessage,
-      FileAttachmentUploadPreview,
-      FileUploadInProgressIndicator,
-      FileUploadRetryIndicator,
-      FileUploadNotSupportedIndicator,
-      ImageUploadInProgressIndicator,
-      ImageUploadRetryIndicator,
-      ImageUploadNotSupportedIndicator,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,
       hasFilePicker,
       hasImagePicker,
-      ImageAttachmentUploadPreview,
-      Input,
-      InputView,
-      InputButtons,
-      MessageComposerLeadingView,
-      MessageComposerTrailingView,
       messageInputFloating,
       messageInputHeightStore,
-      MessageInputFooterView,
-      MessageInputHeaderView,
-      MessageInputLeadingView,
-      MessageInputTrailingView,
       openPollCreationDialog,
-      SendButton,
       sendMessage,
-      SendMessageDisallowedIndicator,
       setInputRef,
       showPollCreationDialog,
-      ShowThreadMessageInChannelButton,
-      StartAudioRecordingButton,
-      StopMessageStreamingButton,
-      VideoAttachmentUploadPreview,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      compressImageQuality,
-      channelId,
-      CreatePollContent,
-      showPollCreationDialog,
-      allowSendBeforeAttachmentsUpload,
-    ],
+    [compressImageQuality, channelId, showPollCreationDialog, allowSendBeforeAttachmentsUpload],
   );
 
   return inputMessageInputContext;

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -4,11 +4,8 @@ import type { MessagesContextValue } from '../../../contexts/messagesContext/Mes
 
 export const useCreateMessagesContext = ({
   additionalPressableProps,
-  Attachment,
-  AudioAttachment,
   channelId,
   customMessageSwipeAction,
-  DateHeader,
   deletedMessagesVisibilityType,
   deleteMessage,
   deleteReaction,
@@ -16,15 +13,9 @@ export const useCreateMessagesContext = ({
   dismissKeyboardOnMessageTouch,
   enableMessageGroupingByUser,
   enableSwipeToReply,
-  FileAttachment,
-  FileAttachmentGroup,
-  FileAttachmentIcon,
-  FilePreview,
   FlatList,
   forceAlignMessages,
-  Gallery,
   getMessageGroupStyle,
-  Giphy,
   giphyVersion,
   handleBan,
   handleCopy,
@@ -41,85 +32,29 @@ export const useCreateMessagesContext = ({
   handleThreadReply,
   handleBlockUser,
   hasCreatePoll,
-  ImageLoadingFailedIndicator,
-  ImageLoadingIndicator,
   initialScrollToFirstUnreadMessage,
-  InlineDateSeparator,
-  InlineUnreadIndicator,
   isAttachmentEqual,
   isMessageAIGenerated,
   markdownRules,
-  Message,
-  MessageActionList,
-  MessageActionListItem,
   messageActions,
-  MessageAuthor,
-  MessageBlocked,
-  MessageBounce,
-  MessageContent,
-  MessageContentBottomView,
-  MessageContentLeadingView,
   messageContentOrder,
-  MessageContentTrailingView,
-  MessageContentTopView,
-  MessageDeleted,
-  MessageError,
-  MessageFooter,
-  MessageHeader,
-  MessageList,
-  MessageLocation,
-  MessageMenu,
-  MessagePinnedHeader,
-  MessageReminderHeader,
-  MessageSavedForLaterHeader,
-  SentToChannelHeader,
-  MessageReactionPicker,
-  MessageReplies,
-  MessageRepliesAvatars,
-  MessageSpacer,
-  MessageItemView,
-  MessageStatus,
-  MessageSwipeContent,
   messageSwipeToReplyHitSlop,
-  MessageSystem,
-  MessageText,
   messageTextNumberOfLines,
-  MessageTimestamp,
-  MessageUserReactions,
-  MessageUserReactionsAvatar,
-  MessageUserReactionsItem,
   myMessageTheme,
   onLongPressMessage,
   onPressInMessage,
   onPressMessage,
-  PollContent,
-  ReactionListBottom,
   reactionListPosition,
   reactionListType,
-  ReactionListTop,
-  ReactionListClustered,
-  ReactionListItem,
-  ReactionListItemWrapper,
-  ReactionListCountItem,
   removeMessage,
-  Reply,
   retrySendMessage,
-  ScrollToBottomButton,
   selectReaction,
   sendReaction,
   shouldShowUnreadUnderlay,
-  StreamingMessageView,
   supportedReactions,
   targetedMessage,
-  TypingIndicator,
-  TypingIndicatorContainer,
-  UnreadMessagesNotification,
   updateMessage,
-  UrlPreview,
-  URLPreviewCompact,
-  VideoThumbnail,
   urlPreviewType,
-  UnsupportedAttachment,
 }: MessagesContextValue & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -134,10 +69,7 @@ export const useCreateMessagesContext = ({
   const messagesContext: MessagesContextValue = useMemo(
     () => ({
       additionalPressableProps,
-      Attachment,
-      AudioAttachment,
       customMessageSwipeAction,
-      DateHeader,
       deletedMessagesVisibilityType,
       deleteMessage,
       deleteReaction,
@@ -145,15 +77,9 @@ export const useCreateMessagesContext = ({
       dismissKeyboardOnMessageTouch,
       enableMessageGroupingByUser,
       enableSwipeToReply,
-      FileAttachment,
-      FileAttachmentGroup,
-      FileAttachmentIcon,
-      FilePreview,
       FlatList,
       forceAlignMessages,
-      Gallery,
       getMessageGroupStyle,
-      Giphy,
       giphyVersion,
       handleBan,
       handleCopy,
@@ -170,85 +96,29 @@ export const useCreateMessagesContext = ({
       handleThreadReply,
       handleBlockUser,
       hasCreatePoll,
-      ImageLoadingFailedIndicator,
-      ImageLoadingIndicator,
       initialScrollToFirstUnreadMessage,
-      InlineDateSeparator,
-      InlineUnreadIndicator,
       isAttachmentEqual,
       isMessageAIGenerated,
       markdownRules,
-      Message,
-      MessageActionList,
-      MessageActionListItem,
       messageActions,
-      MessageAuthor,
-      MessageBlocked,
-      MessageBounce,
-      MessageContent,
-      MessageContentBottomView,
-      MessageContentLeadingView,
       messageContentOrder,
-      MessageContentTrailingView,
-      MessageContentTopView,
-      MessageDeleted,
-      MessageError,
-      MessageFooter,
-      MessageHeader,
-      MessageList,
-      MessageLocation,
-      MessageMenu,
-      MessagePinnedHeader,
-      MessageReminderHeader,
-      MessageSavedForLaterHeader,
-      SentToChannelHeader,
-      MessageReactionPicker,
-      MessageReplies,
-      MessageRepliesAvatars,
-      MessageSpacer,
-      MessageItemView,
-      MessageStatus,
-      MessageSwipeContent,
       messageSwipeToReplyHitSlop,
-      MessageSystem,
-      MessageText,
       messageTextNumberOfLines,
-      MessageTimestamp,
-      MessageUserReactions,
-      MessageUserReactionsAvatar,
-      MessageUserReactionsItem,
       myMessageTheme,
       onLongPressMessage,
       onPressInMessage,
       onPressMessage,
-      PollContent,
-      ReactionListBottom,
       reactionListPosition,
       reactionListType,
-      ReactionListTop,
-      ReactionListClustered,
-      ReactionListItem,
-      ReactionListItemWrapper,
-      ReactionListCountItem,
       removeMessage,
-      Reply,
       retrySendMessage,
-      ScrollToBottomButton,
       selectReaction,
       sendReaction,
       shouldShowUnreadUnderlay,
-      StreamingMessageView,
       supportedReactions,
       targetedMessage,
-      TypingIndicator,
-      TypingIndicatorContainer,
-      UnreadMessagesNotification,
       updateMessage,
-      UrlPreview,
-      URLPreviewCompact,
-      VideoThumbnail,
       urlPreviewType,
-      UnsupportedAttachment,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [

package/src/components/ChannelList/ChannelList.tsx

@@ -11,15 +11,10 @@ import {
   QueryChannelsRequestType,
 } from 'stream-chat';
 
-import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingIndicator';
-import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
-import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
-import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
-import { ChannelListView, ChannelListViewProps } from './ChannelListView';
+import { ChannelListView } from './ChannelListView';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
-import { Skeleton as SkeletonDefault } from './Skeleton';
 
 import {
   ChannelsContextValue,
@@ -28,38 +23,16 @@ import {
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import type { ChannelListEventListenerOptions } from '../../types/types';
-import { ChannelPreviewView } from '../ChannelPreview/ChannelPreviewView';
-import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
-import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
 
 export type ChannelListProps = Partial<
   Pick<
     ChannelsContextValue,
     | 'additionalFlatListProps'
-    | 'EmptyStateIndicator'
-    | 'FooterLoadingIndicator'
-    | 'HeaderErrorIndicator'
-    | 'HeaderNetworkDownIndicator'
-    | 'LoadingErrorIndicator'
-    | 'LoadingIndicator'
-    | 'Preview'
     | 'setFlatListRef'
-    | 'ListHeaderComponent'
     | 'onSelect'
-    | 'PreviewAvatar'
-    | 'PreviewMessage'
-    | 'PreviewMutedStatus'
-    | 'PreviewStatus'
-    | 'PreviewTitle'
-    | 'PreviewLastMessage'
-    | 'PreviewUnreadCount'
-    | 'PreviewTypingIndicator'
-    | 'PreviewMessageDeliveryStatus'
-    | 'ChannelDetailsBottomSheet'
     | 'getChannelActionItems'
     | 'swipeActionsEnabled'
     | 'loadMoreThreshold'
-    | 'Skeleton'
     | 'maxUnreadCount'
     | 'numberOfSkeletons'
     | 'mutedStatusPosition'
@@ -75,12 +48,6 @@ export type ChannelListProps = Partial<
    * @overrideType object
    * */
   filters?: ChannelFilters;
-  /**
-   * Custom UI component to display the list of channels
-   *
-   * Default: [ChannelListView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-view/)
-   */
-  List?: React.ComponentType<ChannelListViewProps>;
   /**
    * If set to true, channels won't dynamically sort by most recent message, defaults to false
    */
@@ -247,8 +214,7 @@ const DEFAULT_SORT = {};
 
 /**
  * This component fetches a list of channels, allowing you to select the channel you want to open.
- * The ChannelList doesn't provide any UI for the underlying React Native FlatList. UI is determined by the `List` component which is
- * provided to the ChannelList component as a prop. By default, the ChannelListView component is used as the list UI.
+ * The ChannelList renders a ChannelListView which provides the UI for the underlying React Native FlatList.
  *
  * @example ./ChannelList.md
  */
@@ -256,15 +222,7 @@ export const ChannelList = (props: ChannelListProps) => {
   const {
     additionalFlatListProps = {},
     channelRenderFilterFn,
-    EmptyStateIndicator = EmptyStateIndicatorDefault,
     filters = DEFAULT_FILTERS,
-    FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
-    HeaderErrorIndicator = ChannelListHeaderErrorIndicator,
-    HeaderNetworkDownIndicator = ChannelListHeaderNetworkDownIndicator,
-    List = ChannelListView,
-    ListHeaderComponent,
-    LoadingErrorIndicator = LoadingErrorIndicatorDefault,
-    LoadingIndicator = ChannelListLoadingIndicator,
     // https://stackoverflow.com/a/60666252/10826415
     loadMoreThreshold = 0.1,
     lockChannelOrder = false,
@@ -282,20 +240,8 @@ export const ChannelList = (props: ChannelListProps) => {
     onRemovedFromChannel,
     onSelect,
     options = DEFAULT_OPTIONS,
-    Preview = ChannelPreviewView,
     getChannelActionItems,
-    PreviewAvatar,
-    PreviewMessage,
-    PreviewMutedStatus,
-    PreviewLastMessage,
-    PreviewStatus,
-    PreviewTitle,
-    PreviewUnreadCount,
-    PreviewTypingIndicator,
-    PreviewMessageDeliveryStatus,
-    ChannelDetailsBottomSheet,
     setFlatListRef,
-    Skeleton = SkeletonDefault,
     sort = DEFAULT_SORT,
     queryChannelsOverride,
     mutedStatusPosition = 'inlineTitle',
@@ -398,35 +344,17 @@ export const ChannelList = (props: ChannelListProps) => {
     additionalFlatListProps,
     channelListInitialized,
     channels: channelRenderFilterFn ? channelRenderFilterFn(channels ?? []) : channels,
-    EmptyStateIndicator,
     error,
-    FooterLoadingIndicator,
     forceUpdate,
     hasNextPage,
-    HeaderErrorIndicator,
-    HeaderNetworkDownIndicator,
-    ListHeaderComponent,
     loadingChannels,
-    LoadingErrorIndicator,
-    LoadingIndicator,
     loadingNextPage,
     loadMoreThreshold,
     loadNextPage,
     maxUnreadCount,
     numberOfSkeletons,
     onSelect,
-    Preview,
     getChannelActionItems,
-    PreviewAvatar,
-    PreviewMessage,
-    PreviewMutedStatus,
-    PreviewStatus,
-    PreviewTitle,
-    PreviewUnreadCount,
-    PreviewTypingIndicator,
-    PreviewMessageDeliveryStatus,
-    ChannelDetailsBottomSheet,
-    PreviewLastMessage,
     swipeActionsEnabled,
     refreshing,
     refreshList,
@@ -436,14 +364,13 @@ export const ChannelList = (props: ChannelListProps) => {
         setFlatListRef(ref);
       }
     },
-    Skeleton,
     mutedStatusPosition,
   });
 
   return (
     <ChannelsProvider value={channelsContext}>
       <SwipeRegistryProvider>
-        <List />
+        <ChannelListView />
       </SwipeRegistryProvider>
     </ChannelsProvider>
   );

package/src/components/ChannelList/ChannelListLoadingIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useChannelsContext } from '../../contexts/channelsContext/ChannelsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 const styles = StyleSheet.create({
@@ -16,7 +17,8 @@ export const ChannelListLoadingIndicator = () => {
       channelListLoadingIndicator: { container },
     },
   } = useTheme();
-  const { numberOfSkeletons, Skeleton } = useChannelsContext();
+  const { numberOfSkeletons } = useChannelsContext();
+  const { Skeleton } = useComponentsContext();
 
   return (
     <View style={[styles.container, container]} testID='channel-list-loading-indicator'>