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

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, ImageProps, StyleSheet, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessagesContextValue,
@@ -15,27 +15,19 @@ import { useLoadingImage } from '../../../hooks/useLoadingImage';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
 import { GiphyBadge } from '../../ui/Badge/GiphyBadge';
 
-export type GiphyImagePropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<
-    MessagesContextValue,
-    'giphyVersion' | 'ImageLoadingIndicator' | 'ImageLoadingFailedIndicator'
-  > & {
-    attachment: Attachment;
-    /**
-     * Whether to render the preview image or the full image
-     */
-    preview?: boolean;
-  };
+export type GiphyImagePropsWithContext = Pick<MessagesContextValue, 'giphyVersion'> & {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & {
+  attachment: Attachment;
+  /**
+   * Whether to render the preview image or the full image
+   */
+  preview?: boolean;
+};
 
 const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
-  const {
-    attachment,
-    giphyVersion,
-    ImageComponent = Image,
-    ImageLoadingFailedIndicator,
-    ImageLoadingIndicator,
-    preview = false,
-  } = props;
+  const { attachment, giphyVersion, ImageComponent = Image, preview = false } = props;
+  const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext();
 
   const { giphy: giphyData, image_url, thumb_url, type } = attachment;
 
@@ -168,25 +160,11 @@ export type GiphyImageProps = Partial<GiphyImagePropsWithContext> & {
  * UI component for card in attachments.
  */
 export const GiphyImage = (props: GiphyImageProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { giphyVersion } = useMessagesContext();
 
-  const {
-    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
-    ImageLoadingIndicator: ContextImageLoadingIndicator,
-  } = useMessagesContext();
-  const ImageLoadingFailedIndicator =
-    ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
-  const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;
-
   return (
-    <MemoizedGiphyImage
-      giphyVersion={giphyVersion}
-      ImageComponent={ImageComponent}
-      ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-      ImageLoadingIndicator={ImageLoadingIndicator}
-      {...props}
-    />
+    <MemoizedGiphyImage giphyVersion={giphyVersion} ImageComponent={ImageComponent} {...props} />
   );
 };
 

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -3,32 +3,27 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIconProps } from './FileIcon';
+import type { FileIconProps } from './FileIcon';
 
+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 { primitives } from '../../theme';
 
-export type UnsupportedAttachmentProps = Partial<
-  Pick<MessagesContextValue, 'FileAttachmentIcon'> & Pick<MessageContextValue, 'isMyMessage'>
-> & {
+export type UnsupportedAttachmentProps = Partial<Pick<MessageContextValue, 'isMyMessage'>> & {
   /** The attachment to render */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
 };
 
 export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
-  const { FileAttachmentIcon: FileAttachmentIconDefault } = useMessagesContext();
+  const { FileAttachmentIcon } = useComponentsContext();
   const { isMyMessage } = useMessageContext();
-  const { attachment, attachmentIconSize, FileAttachmentIcon = FileAttachmentIconDefault } = props;
+  const { attachment, attachmentIconSize } = props;
 
   const styles = useStyles({ isMyMessage });
 

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<
     MessagesContextValue,
     'additionalPressableProps' | 'myMessageTheme' | 'isAttachmentEqual'
@@ -210,7 +212,7 @@ export type URLPreviewProps = Partial<URLPreviewPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const URLPreview = (props: URLPreviewProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, isAttachmentEqual, myMessageTheme } = useMessagesContext();
 

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewCompactPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewCompactPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'myMessageTheme'> & {
     attachment: Attachment;
     channelId: string | undefined;
@@ -208,7 +210,7 @@ export type URLPreviewCompactProps = Partial<URLPreviewCompactPropsWithContext>
  * UI component for card in attachments.
  */
 export const URLPreviewCompact = (props: URLPreviewCompactProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, myMessageTheme } = useMessagesContext();
 

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -15,6 +15,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
@@ -35,12 +36,11 @@ export const AttachmentPicker = () => {
   const {
     closePicker,
     attachmentPickerStore,
-    AttachmentPickerSelectionBar,
-    AttachmentPickerContent,
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
+  const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -7,6 +7,7 @@ import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 's
 import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
@@ -26,8 +27,8 @@ type AttachmentPickerItemType = {
 
 const AttachmentVideo = (props: AttachmentPickerItemType) => {
   const { asset } = props;
-  const { numberOfAttachmentPickerImageColumns, ImageOverlaySelectedComponent } =
-    useAttachmentPickerContext();
+  const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { ImageOverlaySelectedComponent } = useComponentsContext();
   const { vw } = useViewport();
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposer();
@@ -90,8 +91,8 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
 
 const AttachmentImage = (props: AttachmentPickerItemType) => {
   const { asset } = props;
-  const { numberOfAttachmentPickerImageColumns, ImageOverlaySelectedComponent } =
-    useAttachmentPickerContext();
+  const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { ImageOverlaySelectedComponent } = useComponentsContext();
   const {
     theme: {
       attachmentPicker: { image, imageOverlay },

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -7,20 +7,15 @@ import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanim
 
 import { SearchSourceState, TextComposerState, TextComposerSuggestion } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
-import {
-  MessageInputContextValue,
-  useMessageInputContext,
-} from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
 
 export const DEFAULT_LIST_HEIGHT = 208;
 
-export type AutoCompleteSuggestionListProps = Partial<
-  Pick<MessageInputContextValue, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'>
->;
+export type AutoCompleteSuggestionListProps = Record<string, never>;
 
 const textComposerStateSelector = (state: TextComposerState) => ({
   suggestions: state.suggestions,
@@ -31,19 +26,8 @@ const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
   items: nextValue.items,
 });
 
-export const AutoCompleteSuggestionList = ({
-  AutoCompleteSuggestionHeader: propsAutoCompleteSuggestionHeader,
-  AutoCompleteSuggestionItem: propsAutoCompleteSuggestionItem,
-}: AutoCompleteSuggestionListProps) => {
-  const {
-    AutoCompleteSuggestionHeader: contextAutoCompleteSuggestionHeader,
-    AutoCompleteSuggestionItem: contextAutoCompleteSuggestionItem,
-  } = useMessageInputContext();
-
-  const AutoCompleteSuggestionHeader =
-    propsAutoCompleteSuggestionHeader ?? contextAutoCompleteSuggestionHeader;
-  const AutoCompleteSuggestionItem =
-    propsAutoCompleteSuggestionItem ?? contextAutoCompleteSuggestionItem;
+export const AutoCompleteSuggestionList = () => {
+  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } = useComponentsContext();
 
   const messageComposer = useMessageComposer();
   const { textComposer } = messageComposer;