diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx index 1b9214945..3d174024c 100644 --- a/package/src/components/Message/Message.tsx +++ b/package/src/components/Message/Message.tsx @@ -229,6 +229,7 @@ const MessageWithContext = < const [showMessageReactions, setShowMessageReactions] = useState(true); const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false); const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false); + const [selectedReaction, setSelectedReaction] = useState(undefined); const { channel, @@ -300,10 +301,11 @@ const MessageWithContext = < }, } = useTheme(); - const showMessageOverlay = async (showMessageReactions = false) => { + const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => { await dismissKeyboard(); setShowMessageReactions(showMessageReactions); setMessageOverlayVisible(true); + setSelectedReaction(selectedReaction); }; const dismissOverlay = () => { @@ -733,6 +735,7 @@ const MessageWithContext = < dismissOverlay={dismissOverlay} handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined} messageActions={messageActions} + selectedReaction={selectedReaction} showMessageReactions={showMessageReactions} visible={messageOverlayVisible} /> diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx b/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx index 9a558dd42..bdb1e6c20 100644 --- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx +++ b/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx @@ -99,7 +99,7 @@ export const ReactionListBottomItem = < onLongPress({ defaultHandler: () => { if (showMessageOverlay) { - showMessageOverlay(true); + showMessageOverlay(true, reaction.type); } }, emitter: 'reactionList', diff --git a/package/src/components/MessageMenu/MessageMenu.tsx b/package/src/components/MessageMenu/MessageMenu.tsx index cb3e7f477..a06f4200a 100644 --- a/package/src/components/MessageMenu/MessageMenu.tsx +++ b/package/src/components/MessageMenu/MessageMenu.tsx @@ -52,6 +52,10 @@ export type MessageMenuProps< * @returns */ handleReaction?: (reactionType: string) => Promise; + /** + * The selected reaction + */ + selectedReaction?: string; }; export const MessageMenu = < @@ -70,6 +74,7 @@ export const MessageMenu = < MessageUserReactions: propMessageUserReactions, MessageUserReactionsAvatar: propMessageUserReactionsAvatar, MessageUserReactionsItem: propMessageUserReactionsItem, + selectedReaction, showMessageReactions, visible, } = props; @@ -103,6 +108,7 @@ export const MessageMenu = < message={message} MessageUserReactionsAvatar={MessageUserReactionsAvatar} MessageUserReactionsItem={MessageUserReactionsItem} + selectedReaction={selectedReaction} /> ) : ( <> diff --git a/package/src/components/MessageMenu/MessageUserReactions.tsx b/package/src/components/MessageMenu/MessageUserReactions.tsx index 0d8d36b4f..f2836350a 100644 --- a/package/src/components/MessageMenu/MessageUserReactions.tsx +++ b/package/src/components/MessageMenu/MessageUserReactions.tsx @@ -30,6 +30,10 @@ export type MessageUserReactionsProps< * An array of reactions */ reactions?: Reaction[]; + /** + * The selected reaction + */ + selectedReaction?: string; }; const sort: ReactionSortBase = { @@ -57,11 +61,12 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => { MessageUserReactionsAvatar: propMessageUserReactionsAvatar, MessageUserReactionsItem: propMessageUserReactionsItem, reactions: propReactions, + selectedReaction: propSelectedReaction, supportedReactions: propSupportedReactions, } = props; const reactionTypes = Object.keys(message?.reaction_groups ?? {}); const [selectedReaction, setSelectedReaction] = React.useState( - reactionTypes[0], + propSelectedReaction ?? reactionTypes[0], ); const { MessageUserReactionsAvatar: contextMessageUserReactionsAvatar, diff --git a/package/src/contexts/messageContext/MessageContext.tsx b/package/src/contexts/messageContext/MessageContext.tsx index 214005d31..a6422c295 100644 --- a/package/src/contexts/messageContext/MessageContext.tsx +++ b/package/src/contexts/messageContext/MessageContext.tsx @@ -96,7 +96,7 @@ export type MessageContextValue< * @param showMessageReactions * @returns void */ - showMessageOverlay: (showMessageReactions?: boolean) => void; + showMessageOverlay: (showMessageReactions?: boolean, selectedReaction?: string) => void; showMessageStatus: boolean; /** Whether or not the Message is part of a Thread */ threadList: boolean;