diff --git a/docusaurus/docs/React/components/core-components/message-list.mdx b/docusaurus/docs/React/components/core-components/message-list.mdx index 5d9a83a31..efccf0dab 100644 --- a/docusaurus/docs/React/components/core-components/message-list.mdx +++ b/docusaurus/docs/React/components/core-components/message-list.mdx @@ -396,11 +396,32 @@ Custom action handler function to run on hover of user avatar. ### openThread -Custom action handler to open a [`Thread`](./thread.mdx) component. +Custom handler invoked when the button in the `Message` component that opens [`Thread`](./thread.mdx) component is clicked. To be able to define custom logic to `openThread`, we need to have a wrapper around `MessageList` component and reach out to `ChannelActionContext` for the default `openThread` function. -| Type | Default | -| -------- | -------------------------------------------------------------------------------------------- | -| function | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) | +```tsx +import { useCallback } from 'react'; +import { MessageList, useChannelActionContext } from 'stream-chat-react'; +import type { StreamMessage } from 'stream-chat-react'; +import type { StreamChatGenerics } from './types'; + +const MessageListWrapper = () => { + const { openThread: contextOpenThread } = useChannelActionContext(); + + const openThread = useCallback( + (message: StreamMessage, event?: React.BaseSyntheticEvent) => { + // custom logic + contextOpenThread(message, event); + }, + [contextOpenThread], + ); + + return ; +}; +``` + +| Type | Default | +| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | +| `(message: StreamMessage, event?: React.BaseSyntheticEvent) => void` | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) | ### pinPermissions diff --git a/docusaurus/docs/React/components/core-components/virtualized-list.mdx b/docusaurus/docs/React/components/core-components/virtualized-list.mdx index 8b1c6fc35..af955826f 100644 --- a/docusaurus/docs/React/components/core-components/virtualized-list.mdx +++ b/docusaurus/docs/React/components/core-components/virtualized-list.mdx @@ -209,6 +209,35 @@ The messages to render in the list, provide your own array to override the data | ----- | -------------------------------------------------------------------------------------- | | array | [ChannelStateContextValue['messages']](../contexts/channel-state-context.mdx#messages) | +### openThread + +Custom handler invoked when the button in the `Message` component that opens [`Thread`](./thread.mdx) component is clicked. To be able to define custom logic to `openThread`, we need to have a wrapper around `VirtualizedMessageList` component and reach out to `ChannelActionContext` for the default `openThread` function. + +```tsx +import { useCallback } from 'react'; +import { VirtualizedMessageList, useChannelActionContext } from 'stream-chat-react'; +import type { StreamMessage } from 'stream-chat-react'; +import type { StreamChatGenerics } from './types'; + +const MessageListWrapper = () => { + const { openThread: contextOpenThread } = useChannelActionContext(); + + const openThread = useCallback( + (message: StreamMessage, event?: React.BaseSyntheticEvent) => { + // custom logic + contextOpenThread(message, event); + }, + [contextOpenThread], + ); + + return ; +}; +``` + +| Type | Default | +| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | +| `(message: StreamMessage, event?: React.BaseSyntheticEvent) => void` | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) | + ### overscan The amount of extra content the list should render in addition to what's necessary to fill in the viewport. diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx index e1036a505..34aafe490 100644 --- a/src/components/MessageList/VirtualizedMessageList.tsx +++ b/src/components/MessageList/VirtualizedMessageList.tsx @@ -65,20 +65,24 @@ import type { Channel, ChannelState as StreamChannelState, UserResponse } from ' import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types'; import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits'; -type VirtualizedMessageListPropsForContext = +type PropsDrilledToMessage = | 'additionalMessageInputProps' - | 'closeReactionSelectorOnClick' | 'customMessageActions' - | 'customMessageRenderer' | 'formatDate' + | 'messageActions' + | 'openThread' + | 'reactionDetailsSort' + | 'sortReactions' + | 'sortReactionDetails'; + +type VirtualizedMessageListPropsForContext = + | PropsDrilledToMessage + | 'closeReactionSelectorOnClick' + | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' - | 'messageActions' | 'shouldGroupByUser' - | 'reactionDetailsSort' - | 'sortReactions' - | 'sortReactionDetails' | 'threadList'; /** @@ -202,6 +206,7 @@ const VirtualizedMessageListWithContext = < messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, + openThread, // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component overscan = 0, read, @@ -469,6 +474,7 @@ const VirtualizedMessageListWithContext = < messageGroupStyles, MessageSystem, numItemsPrepended, + openThread, ownMessagesReadByOthers, processedMessages, reactionDetailsSort, @@ -518,15 +524,6 @@ const VirtualizedMessageListWithContext = < ); }; -type PropsDrilledToMessage = - | 'additionalMessageInputProps' - | 'customMessageActions' - | 'formatDate' - | 'messageActions' - | 'reactionDetailsSort' - | 'sortReactions' - | 'sortReactionDetails'; - export type VirtualizedMessageListProps< StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics > = Partial, PropsDrilledToMessage>> & { diff --git a/src/components/MessageList/VirtualizedMessageListComponents.tsx b/src/components/MessageList/VirtualizedMessageListComponents.tsx index e1090f94d..f77b5b012 100644 --- a/src/components/MessageList/VirtualizedMessageListComponents.tsx +++ b/src/components/MessageList/VirtualizedMessageListComponents.tsx @@ -135,6 +135,7 @@ export const messageRenderer = < messageGroupStyles, MessageSystem, numItemsPrepended, + openThread, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, @@ -225,6 +226,7 @@ export const messageRenderer = < message={message} Message={MessageUIComponent} messageActions={messageActions} + openThread={openThread} reactionDetailsSort={reactionDetailsSort} readBy={ownMessagesReadByOthers[message.id] || []} sortReactionDetails={sortReactionDetails}