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

package/src/components/MessageList/hooks/useMessageList.ts

@@ -2,11 +2,6 @@ import { useMemo } from 'react';
 
 import type { LocalMessage } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-import {
-  DeletedMessagesVisibilityType,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 
@@ -27,35 +22,8 @@ export type MessageGroupStyles = {
   [key: string]: string[];
 };
 
-export const shouldIncludeMessageInList = (
-  message: LocalMessage,
-  options: { deletedMessagesVisibilityType?: DeletedMessagesVisibilityType; userId?: string },
-) => {
-  const { deletedMessagesVisibilityType, userId } = options;
-  const isMessageTypeDeleted = message.type === 'deleted';
-  const isSender = message.user?.id === userId;
-
-  if (!isMessageTypeDeleted) {
-    return true;
-  }
-
-  switch (deletedMessagesVisibilityType) {
-    case 'always':
-      return true;
-    case 'sender':
-      return isSender;
-    case 'receiver':
-      return !isSender;
-    case 'never':
-    default:
-      return false;
-  }
-};
-
 export const useMessageList = (params: UseMessageListParams) => {
   const { threadList, isLiveStreaming, isFlashList = false } = params;
-  const { client } = useChatContext();
-  const { deletedMessagesVisibilityType } = useMessagesContext();
   const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
@@ -63,14 +31,6 @@ export const useMessageList = (params: UseMessageListParams) => {
   const processedMessageList = useMemo<LocalMessage[]>(() => {
     const newMessageList = [];
     for (const message of messageList) {
-      if (
-        !shouldIncludeMessageInList(message, {
-          deletedMessagesVisibilityType,
-          userId: client.userID,
-        })
-      ) {
-        continue;
-      }
       if (isFlashList) {
         newMessageList.push(message);
       } else {
@@ -78,7 +38,7 @@ export const useMessageList = (params: UseMessageListParams) => {
       }
     }
     return newMessageList;
-  }, [messageList, deletedMessagesVisibilityType, client.userID, isFlashList]);
+  }, [messageList, isFlashList]);
 
   const data = useRAFCoalescedValue(processedMessageList, isLiveStreaming);
 

package/src/components/MessageMenu/MessageActionList.tsx

@@ -5,11 +5,11 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
-export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionListItem'> & {
+export type MessageActionListProps = {
   /**
    * Function to close the message actions bottom sheet
    * @returns void
@@ -22,7 +22,8 @@ export type MessageActionListProps = Pick<MessagesContextValue, 'MessageActionLi
 };
 
 export const MessageActionList = (props: MessageActionListProps) => {
-  const { MessageActionListItem, messageActions } = props;
+  const { messageActions } = props;
+  const { MessageActionListItem } = useComponentsContext();
   const {
     theme: {
       messageMenu: {

package/src/components/MessageMenu/MessageMenu.tsx

@@ -5,58 +5,46 @@ import { useWindowDimensions } from 'react-native';
 import { MessageActionType } from './MessageActionListItem';
 
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 
 export type MessageMenuProps = PropsWithChildren<
-  Partial<
-    Pick<
-      MessagesContextValue,
-      | 'MessageActionList'
-      | 'MessageActionListItem'
-      | 'MessageReactionPicker'
-      | 'MessageUserReactions'
-      | 'MessageUserReactionsAvatar'
-      | 'MessageUserReactionsItem'
-    >
-  > &
-    Partial<Pick<MessageContextValue, 'message'>> & {
-      /**
-       * Function to close the message actions bottom sheet
-       * @returns void
-       */
-      dismissOverlay: () => void;
-      /**
-       * An array of message actions to render
-       */
-      messageActions: MessageActionType[];
-      /**
-       * Boolean to determine if there are message actions
-       */
-      showMessageReactions: boolean;
-      /**
-       * Boolean to determine if the overlay is visible.
-       */
-      visible: boolean;
-      /**
-       * Function to handle reaction on press
-       * @param reactionType
-       * @returns
-       */
-      handleReaction?: (reactionType: string) => Promise<void>;
-      /**
-       * The selected reaction
-       */
-      selectedReaction?: string;
+  Partial<Pick<MessageContextValue, 'message'>> & {
+    /**
+     * Function to close the message actions bottom sheet
+     * @returns void
+     */
+    dismissOverlay: () => void;
+    /**
+     * An array of message actions to render
+     */
+    messageActions: MessageActionType[];
+    /**
+     * Boolean to determine if there are message actions
+     */
+    showMessageReactions: boolean;
+    /**
+     * Boolean to determine if the overlay is visible.
+     */
+    visible: boolean;
+    /**
+     * Function to handle reaction on press
+     * @param reactionType
+     * @returns
+     */
+    handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
 
-      layout: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-      };
-    }
+    layout: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+  }
 >;
 
 // TODO: V9: Either remove this or refactor it so that it's useful again, as its logic

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -11,6 +11,7 @@ import { useFetchReactions } from './hooks/useFetchReactions';
 import { ReactionButton } from './ReactionButton';
 
 import { useBottomSheetContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -39,12 +40,7 @@ const getItemLayout = (_, index: number) => ({
   index,
 });
 
-export type MessageUserReactionsProps = Partial<
-  Pick<
-    MessagesContextValue,
-    'MessageUserReactionsAvatar' | 'MessageUserReactionsItem' | 'supportedReactions'
-  >
-> &
+export type MessageUserReactionsProps = Partial<Pick<MessagesContextValue, 'supportedReactions'>> &
   Partial<Pick<MessageContextValue, 'message'>> & {
     /**
      * An array of reactions
@@ -99,13 +95,7 @@ const reactionSelectorKeyExtractor = (item: ReactionSelectorItemType) => item.ty
 export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const styles = useStyles();
   const [showMoreReactions, setShowMoreReactions] = useState(false);
-  const {
-    message,
-    MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
-    MessageUserReactionsItem: propMessageUserReactionsItem,
-    reactions: propReactions,
-    supportedReactions: propSupportedReactions,
-  } = props;
+  const { message, reactions: propReactions, supportedReactions: propSupportedReactions } = props;
   const selectorListRef = useRef<FlatList>(null);
   const { close } = useBottomSheetContext();
   const reactionTypes = useMemo(
@@ -113,16 +103,10 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     [message?.reaction_groups],
   );
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
-  const {
-    MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
-    MessageUserReactionsItem: contextMessageUserReactionsItem,
-    supportedReactions: contextSupportedReactions,
-  } = useMessagesContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+  const { MessageUserReactionsItem } = useComponentsContext();
   const { handleReaction } = useMessageContext();
   const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
-  const MessageUserReactionsAvatar =
-    propMessageUserReactionsAvatar ?? contextMessageUserReactionsAvatar;
-  const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
 
   const onSelectReaction = useStableCallback((reactionType: string) => {
     setSelectedReaction((currentReaction) =>
@@ -225,13 +209,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 
   const renderItem = useCallback(
     ({ item }: { item: Reaction }) => (
-      <MessageUserReactionsItem
-        MessageUserReactionsAvatar={MessageUserReactionsAvatar}
-        reaction={item}
-        supportedReactions={supportedReactions ?? []}
-      />
+      <MessageUserReactionsItem reaction={item} supportedReactions={supportedReactions ?? []} />
     ),
-    [MessageUserReactionsAvatar, MessageUserReactionsItem, supportedReactions],
+    [MessageUserReactionsItem, supportedReactions],
   );
 
   const handleSelectReaction = useStableCallback((emoji: string) => {

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -4,7 +4,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useMessageContext } from '../../contexts';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
@@ -14,10 +14,7 @@ import { primitives } from '../../theme';
 import type { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 
-export type MessageUserReactionsItemProps = Pick<
-  MessagesContextValue,
-  'MessageUserReactionsAvatar'
-> & {
+export type MessageUserReactionsItemProps = {
   /**
    * The reaction object
    */
@@ -29,10 +26,10 @@ export type MessageUserReactionsItemProps = Pick<
 };
 
 export const MessageUserReactionsItem = ({
-  MessageUserReactionsAvatar,
   reaction,
   supportedReactions,
 }: MessageUserReactionsItemProps) => {
+  const { MessageUserReactionsAvatar } = useComponentsContext();
   const { id, name, type } = reaction;
   const {
     theme: {

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -6,6 +6,7 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import { LocalMessage, ReactionResponse } from 'stream-chat';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessagesContextValue,
   MessagesProvider,
@@ -42,18 +43,18 @@ const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-        <MessagesProvider
-          value={
-            {
-              MessageUserReactionsAvatar: () => null,
-              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-              ),
-            } as unknown as MessagesContextValue
-          }
+        <WithComponents
+          overrides={{
+            MessageUserReactionsAvatar: () => null,
+            MessageUserReactionsItem: (itemProps: MessageUserReactionsItemProps) => (
+              <Text>{itemProps.reaction.id + ' ' + itemProps.reaction.type}</Text>
+            ),
+          }}
         >
-          <MessageUserReactions {...defaultProps} {...props} />
-        </MessagesProvider>
+          <MessagesProvider value={{} as unknown as MessagesContextValue}>
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </WithComponents>
       </TranslationProvider>
     </ThemeProvider>,
   );

package/src/components/Poll/CreatePollContent.tsx

@@ -16,11 +16,11 @@ import {
   CreatePollModalState,
   CreatePollContentContextValue,
   CreatePollContentProvider,
-  InputMessageInputContextValue,
   useCreatePollContentContext,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
@@ -212,14 +212,13 @@ export const CreatePollContent = () => {
 
 export const CreatePoll = ({
   closePollCreationDialog,
-  CreatePollContent: CreatePollContentOverride,
   createPollOptionGap = 8,
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
   'createPollOptionGap' | 'closePollCreationDialog' | 'sendMessage'
-> &
-  Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
+>) => {
+  const { CreatePollContent: CreatePollContentOverride } = useComponentsContext();
   const messageComposer = useMessageComposer();
   const [modalStateStore] = useState(
     () => new StateStore<CreatePollModalState>({ isClosing: false }),

package/src/components/Poll/Poll.tsx

@@ -3,28 +3,24 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PollOption as PollOptionClass } from 'stream-chat';
 
-import { PollButtons, PollOption, ShowAllOptionsButton } from './components';
+import { PollOption, ShowAllOptionsButton } from './components';
 
 import { usePollState } from './hooks/usePollState';
 
 import {
-  MessagesContextValue,
   PollContextProvider,
   PollContextValue,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../theme';
 import { defaultPollOptionCount } from '../../utils/constants';
 
-export type PollProps = Pick<PollContextValue, 'poll' | 'message'> &
-  Pick<MessagesContextValue, 'PollContent'>;
+export type PollProps = Pick<PollContextValue, 'poll' | 'message'>;
 
-export type PollContentProps = {
-  PollButtons?: React.ComponentType;
-  PollHeader?: React.ComponentType;
-};
+export type PollContentProps = Record<string, never>;
 
 export const PollHeader = () => {
   const styles = useStyles();
@@ -60,12 +56,11 @@ export const PollHeader = () => {
   );
 };
 
-export const PollContent = ({
-  PollButtons: PollButtonsOverride,
-  PollHeader: PollHeaderOverride,
-}: PollContentProps) => {
+export const PollContent = () => {
   const { options } = usePollState();
   const styles = useStyles();
+  const { PollButtons: PollButtonsComponent, PollHeader: PollHeaderComponent } =
+    useComponentsContext();
 
   const {
     theme: {
@@ -77,7 +72,7 @@ export const PollContent = ({
 
   return (
     <View style={[styles.container, container]}>
-      {PollHeaderOverride ? <PollHeaderOverride /> : <PollHeader />}
+      <PollHeaderComponent />
       <View style={[styles.optionsWrapper, optionsWrapper]}>
         {options
           ?.slice(0, defaultPollOptionCount)
@@ -86,21 +81,24 @@ export const PollContent = ({
           ))}
         <ShowAllOptionsButton />
       </View>
-      {PollButtonsOverride ? <PollButtonsOverride /> : <PollButtons />}
+      <PollButtonsComponent />
     </View>
   );
 };
 
-export const Poll = ({ message, poll, PollContent: PollContentOverride }: PollProps) => (
-  <PollContextProvider
-    value={{
-      message,
-      poll,
-    }}
-  >
-    {PollContentOverride ? <PollContentOverride /> : <PollContent />}
-  </PollContextProvider>
-);
+export const Poll = ({ message, poll }: PollProps) => {
+  const { PollContent: PollContentOverride } = useComponentsContext();
+  return (
+    <PollContextProvider
+      value={{
+        message,
+        poll,
+      }}
+    >
+      {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollAnswersList.tsx

@@ -14,6 +14,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui';
@@ -64,7 +65,6 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
 
 export type PollAnswersListProps = PollContextValue & {
   additionalFlatListProps?: Partial<FlatListProps<PollAnswer>>;
-  PollAnswersListContent?: React.ComponentType;
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
@@ -157,16 +157,14 @@ export const PollAnswersList = ({
   additionalFlatListProps,
   message,
   poll,
-  PollAnswersListContent: PollAnswersListOverride,
-}: PollAnswersListProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAnswersListOverride ? (
-      <PollAnswersListOverride />
-    ) : (
-      <PollAnswersListContent additionalFlatListProps={additionalFlatListProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAnswersListProps) => {
+  const { PollAnswersListContent: PollAnswersListContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAnswersListContentComponent additionalFlatListProps={additionalFlatListProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollOption.tsx

@@ -16,6 +16,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
@@ -32,7 +33,6 @@ export type PollOptionProps = {
 
 export type PollAllOptionsContentProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollAllOptionsContent?: React.ComponentType;
 };
 
 export const PollAllOptionsContent = ({
@@ -75,16 +75,14 @@ export const PollAllOptions = ({
   additionalScrollViewProps,
   message,
   poll,
-  PollAllOptionsContent: PollAllOptionsContentOverride,
-}: PollAllOptionsContentProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAllOptionsContentOverride ? (
-      <PollAllOptionsContentOverride />
-    ) : (
-      <PollAllOptionsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAllOptionsContentProps) => {
+  const { PollAllOptionsContent: PollAllOptionsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAllOptionsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
@@ -19,7 +20,6 @@ import { usePollState } from '../../hooks/usePollState';
 export type PollOptionFullResultsProps = PollContextValue & {
   option: PollOption;
   additionalFlatListProps?: Partial<FlatListProps<PollVoteClass>>;
-  PollOptionFullResultsContent?: React.ComponentType<{ option: PollOption }>;
 };
 
 export const renderPollOptionFullResultsItem = ({ item }: { item: PollVoteClass }) => (
@@ -86,19 +86,18 @@ export const PollOptionFullResults = ({
   message,
   option,
   poll,
-  PollOptionFullResultsContent: PollOptionFullResultsContentOverride,
-}: PollOptionFullResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollOptionFullResultsContentOverride ? (
-      <PollOptionFullResultsContentOverride option={option} />
-    ) : (
-      <PollOptionFullResultsContent
+}: PollOptionFullResultsProps) => {
+  const { PollOptionFullResultsContent: PollOptionFullResultsContentComponent } =
+    useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollOptionFullResultsContentComponent
         additionalFlatListProps={additionalFlatListProps}
         option={option}
       />
-    )}
-  </PollContextProvider>
-);
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollResults/PollResults.tsx

@@ -11,12 +11,12 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
 
 export type PollResultsProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollResultsContent?: React.ComponentType;
 };
 
 export const PollResultsContent = ({
@@ -62,20 +62,14 @@ export const PollResultsContent = ({
   );
 };
 
-export const PollResults = ({
-  additionalScrollViewProps,
-  message,
-  poll,
-  PollResultsContent: PollResultsContentOverride,
-}: PollResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollResultsContentOverride ? (
-      <PollResultsContentOverride />
-    ) : (
-      <PollResultsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+export const PollResults = ({ additionalScrollViewProps, message, poll }: PollResultsProps) => {
+  const { PollResultsContent: PollResultsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollResultsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {