From 7f2ec2c8d240269552af53c74a9f051f37a7d66f Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Mon, 28 Oct 2024 20:52:38 +0100 Subject: [PATCH] Add MessageActions to ComponentContext, deprecate old stuff --- src/components/Channel/Channel.tsx | 3 +++ src/components/Message/MessageOptions.tsx | 3 +++ src/components/Message/MessageSimple.tsx | 8 +++++--- ...MessageActions.new.tsx => MessageActions_UNSTABLE.tsx} | 6 ++++-- src/components/MessageActions/index.ts | 2 +- src/context/ComponentContext.tsx | 8 +++++++- 6 files changed, 23 insertions(+), 7 deletions(-) rename src/components/MessageActions/{MessageActions.new.tsx => MessageActions_UNSTABLE.tsx} (98%) diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx index 2f6a3c007..2b95c1cb5 100644 --- a/src/components/Channel/Channel.tsx +++ b/src/components/Channel/Channel.tsx @@ -118,6 +118,7 @@ type ChannelPropsForwardedToComponentContext< | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' + | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' @@ -1226,6 +1227,7 @@ const ChannelInner = < LinkPreviewList: props.LinkPreviewList, LoadingIndicator: props.LoadingIndicator, Message: props.Message, + MessageActions: props.MessageActions, MessageBouncePrompt: props.MessageBouncePrompt, MessageDeleted: props.MessageDeleted, MessageListNotifications: props.MessageListNotifications, @@ -1275,6 +1277,7 @@ const ChannelInner = < props.LinkPreviewList, props.LoadingIndicator, props.Message, + props.MessageActions, props.MessageBouncePrompt, props.MessageDeleted, props.MessageListNotifications, diff --git a/src/components/Message/MessageOptions.tsx b/src/components/Message/MessageOptions.tsx index 5f4065427..23352d2ff 100644 --- a/src/components/Message/MessageOptions.tsx +++ b/src/components/Message/MessageOptions.tsx @@ -100,6 +100,9 @@ const UnMemoizedMessageOptions = < ); }; +/** + * @deprecated Use MessageActions_UNSTABLE (`MessageActions` component) instead. + */ export const MessageOptions = React.memo( UnMemoizedMessageOptions, ) as typeof UnMemoizedMessageOptions; diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx index 4b6746446..cb9452fe3 100644 --- a/src/components/Message/MessageSimple.tsx +++ b/src/components/Message/MessageSimple.tsx @@ -70,13 +70,15 @@ const MessageSimpleWithContext = < Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, + MessageOptions = DefaultMessageOptions, + // TODO: remove this "passthrough" in the next + // major release and use the new default instead + MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, - MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, - ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple'); @@ -171,7 +173,7 @@ const MessageSimpleWithContext = < onClick={handleClick} onKeyUp={handleClick} > - +
{hasReactions && }
diff --git a/src/components/MessageActions/MessageActions.new.tsx b/src/components/MessageActions/MessageActions_UNSTABLE.tsx similarity index 98% rename from src/components/MessageActions/MessageActions.new.tsx rename to src/components/MessageActions/MessageActions_UNSTABLE.tsx index eec7ca83e..373123e33 100644 --- a/src/components/MessageActions/MessageActions.new.tsx +++ b/src/components/MessageActions/MessageActions_UNSTABLE.tsx @@ -182,8 +182,9 @@ export const DefaultDropdownActionButton = ({ /** * Base filter hook which covers actions of type `delete`, `edit`, - * `flag`, `markAsUnread`, `mute`, `quote`, `react` and `reply` and whether - * the rendered message is a reply (replies are limited to certain actions). + * `flag`, `markAsUnread`, `mute`, `quote`, `react` and `reply`, whether + * the rendered message is a reply (replies are limited to certain actions) and + * whether the message has appropriate type and status. */ export const useBaseMessageActionSetFilter = ( messageActionSet: MessageAction[], @@ -266,6 +267,7 @@ export const useSplitMessageActionSet = (messageActionSet: MessageAction[]) => return { quickActionSet, dropdownActionSet } as const; }, [messageActionSet]); +// TODO: allow passing down customWrapperClass export const MessageActions = ({ disableBaseMessageActionSetFilter = false, messageActionSet = defaultMessageActionSet, diff --git a/src/components/MessageActions/index.ts b/src/components/MessageActions/index.ts index 26982c164..ac8776105 100644 --- a/src/components/MessageActions/index.ts +++ b/src/components/MessageActions/index.ts @@ -1,4 +1,4 @@ export * from './MessageActions'; export * from './MessageActionsBox'; export * from './CustomMessageActionsList'; -export * as MessageActions_UNSTABLE from './MessageActions.new'; +export * as MessageActions_UNSTABLE from './MessageActions_UNSTABLE'; diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index 1472a17e9..09d262466 100644 --- a/src/context/ComponentContext.tsx +++ b/src/context/ComponentContext.tsx @@ -102,6 +102,8 @@ export type ComponentContextValue< LoadingIndicator?: React.ComponentType; /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */ Message?: React.ComponentType>; + /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions_UNSTABLE](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions_UNSTABLE.tsx) (`MessageActions` component) */ + MessageActions?: React.ComponentType; /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */ MessageBouncePrompt?: React.ComponentType; /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */ @@ -111,7 +113,11 @@ export type ComponentContextValue< MessageListNotifications?: React.ComponentType; /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */ MessageNotification?: React.ComponentType; - /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */ + /** + * Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) + * + * @deprecated Use MessageActions property instead. + */ MessageOptions?: React.ComponentType>; /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */ MessageRepliesCountButton?: React.ComponentType;