feat: allow custom ReactionsListModal (#2632)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -150,6 +150,7 @@ type ChannelPropsForwardedToComponentContext<
   | 'reactionOptions'
   | 'ReactionSelector'
   | 'ReactionsList'
+  | 'ReactionsListModal'
   | 'SendButton'
   | 'StartRecordingAudioButton'
   | 'ThreadHead'
@@ -1340,6 +1341,7 @@ const ChannelInner = <
       reactionOptions: props.reactionOptions,
       ReactionSelector: props.ReactionSelector,
       ReactionsList: props.ReactionsList,
+      ReactionsListModal: props.ReactionsListModal,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
@@ -1399,6 +1401,7 @@ const ChannelInner = <
       props.QuotedPoll,
       props.ReactionSelector,
       props.ReactionsList,
+      props.ReactionsListModal,
       props.SendButton,
       props.StartRecordingAudioButton,
       props.ThreadHead,

src/components/Reactions/ReactionsList.tsx

@@ -1,19 +1,27 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 
-import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-
+import {
+  ReactionsListModal as DefaultReactionsListModal,
+  ReactionsListModalProps,
+} from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
+import {
+  MessageContextValue,
+  useComponentContext,
+  useTranslationContext,
+} from '../../context';
+
+import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
+
+import type { ReactionGroupResponse, ReactionResponse, ReactionSort } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 import type {
   ReactionDetailsComparator,
   ReactionsComparator,
   ReactionType,
 } from './types';
-import { ReactionsListModal } from './ReactionsListModal';
-import { MessageContextValue, useTranslationContext } from '../../context';
-import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 
 export type ReactionsListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -44,7 +52,7 @@ export type ReactionsListProps<
   /** Comparator function to sort the list of reacted users
    * @deprecated use `reactionDetailsSort` instead
    */
-  sortReactionDetails?: ReactionDetailsComparator;
+  sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
   /** Comparator function to sort reactions, defaults to chronological order */
   sortReactions?: ReactionsComparator;
 };
@@ -67,6 +75,7 @@ const UnMemoizedReactionsList = <
   const [selectedReactionType, setSelectedReactionType] =
     useState<ReactionType<StreamChatGenerics> | null>(null);
   const { t } = useTranslationContext('ReactionsList');
+  const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
 
   const handleReactionButtonClick = (reactionType: string) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
@@ -126,13 +135,25 @@ const UnMemoizedReactionsList = <
       </div>
       {selectedReactionType !== null && (
         <ReactionsListModal
-          handleFetchReactions={handleFetchReactions}
+          handleFetchReactions={
+            handleFetchReactions as (
+              reactionType?: string,
+              sort?: ReactionSort<StreamChatGenerics>,
+            ) => Promise<Array<ReactionResponse<StreamChatGenerics>>>
+          }
           onClose={() => setSelectedReactionType(null)}
-          onSelectedReactionTypeChange={setSelectedReactionType}
+          onSelectedReactionTypeChange={
+            setSelectedReactionType as ReactionsListModalProps['onSelectedReactionTypeChange']
+          }
           open={selectedReactionType !== null}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}
-          sortReactionDetails={sortReactionDetails}
+          sortReactionDetails={
+            sortReactionDetails as (
+              a: ReactionResponse<StreamChatGenerics>,
+              b: ReactionResponse<StreamChatGenerics>,
+            ) => number
+          }
         />
       )}
     </>

src/components/Reactions/ReactionsListModal.tsx

@@ -11,7 +11,7 @@ import { MessageContextValue, useMessageContext } from '../../context';
 import { DefaultStreamChatGenerics } from '../../types/types';
 import { ReactionSort } from 'stream-chat';
 
-type ReactionsListModalProps<
+export type ReactionsListModalProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ModalProps &
   Partial<

src/components/Reactions/__tests__/ReactionsList.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { toHaveNoViolations } from 'jest-axe';
 
@@ -16,15 +16,21 @@ import { defaultReactionOptions } from '../reactionOptions';
 
 const USER_ID = 'mark';
 
-const renderComponent = ({ reaction_groups = {}, ...props }) => {
+const renderComponent = ({
+  reaction_groups = {},
+  ReactionsListModal = undefined,
+  ...props
+}) => {
   const reactions = Object.entries(reaction_groups).flatMap(([type, { count }]) =>
     Array.from({ length: count }, (_, i) =>
       generateReaction({ type, user: { id: `${USER_ID}-${i}` } }),
     ),
   );
 
   return render(
-    <ComponentProvider value={{ reactionOptions: defaultReactionOptions }}>
+    <ComponentProvider
+      value={{ reactionOptions: defaultReactionOptions, ReactionsListModal }}
+    >
       <MessageProvider value={{}}>
         <ReactionsList
           reaction_groups={reaction_groups}
@@ -43,6 +49,23 @@ describe('ReactionsList', () => {
   // disable warnings (unreachable context)
   jest.spyOn(console, 'warn').mockImplementation(null);
 
+  it('renders custom ReactionsListModal', async () => {
+    const CUSTOM_MODAL_TEST_ID = 'custom-reaction-list-modal';
+    const ReactionsListModal = () => <div data-testid={CUSTOM_MODAL_TEST_ID} />;
+    renderComponent({
+      reaction_groups: {
+        haha: { count: 2 },
+        love: { count: 5 },
+      },
+      ReactionsListModal,
+    });
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('reactions-list-button-haha'));
+    });
+    expect(screen.getByTestId(CUSTOM_MODAL_TEST_ID)).toBeInTheDocument();
+  });
+
   it('should render the total reaction count', async () => {
     const { container, getByText } = renderComponent({
       reaction_groups: {

src/components/Reactions/index.ts

@@ -1,5 +1,6 @@
 export * from './ReactionSelector';
 export * from './ReactionsList';
+export * from './ReactionsListModal';
 export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';

src/context/ComponentContext.tsx

@@ -34,6 +34,7 @@ import {
   QuotedMessagePreviewProps,
   ReactionOptions,
   ReactionSelectorProps,
+  ReactionsListModalProps,
   ReactionsListProps,
   RecordingPermissionDeniedNotificationProps,
   SendButtonProps,
@@ -176,6 +177,8 @@ export type ComponentContextValue<
   >;
   /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
   ReactionsList?: React.ComponentType<ReactionsListProps<StreamChatGenerics>>;
+  /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
+  ReactionsListModal?: React.ComponentType<ReactionsListModalProps<StreamChatGenerics>>;
   RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
   /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
   SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;