diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index 4c92124cd1f8..93c5ecdf2fa6 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -99,6 +99,7 @@ const createProps = (overrideProps: Partial = {}): Props => ({ author: overrideProps.author || getDefaultConversation(), reducedMotion: boolean('reducedMotion', false), bodyRanges: overrideProps.bodyRanges, + canReact: true, canReply: true, canDownload: true, canDeleteForEveryone: overrideProps.canDeleteForEveryone || false, diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 6beb96d6156c..a2120f84aec9 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -195,6 +195,7 @@ export type PropsData = { deletedForEveryone?: boolean; + canReact: boolean; canReply: boolean; canDownload: boolean; canDeleteForEveryone: boolean; @@ -1325,6 +1326,7 @@ export class Message extends React.PureComponent { const { attachments, canDownload, + canReact, canReply, direction, disableMenu, @@ -1467,7 +1469,7 @@ export class Message extends React.PureComponent { > {this.isWindowWidthNotNarrow() && ( <> - {canReply ? reactButton : null} + {canReact ? reactButton : null} {canDownload ? downloadButton : null} {canReply ? replyButton : null} @@ -1512,6 +1514,7 @@ export class Message extends React.PureComponent { const { attachments, canDownload, + canReact, canReply, deleteMessage, deleteMessageForEveryone, @@ -1560,36 +1563,40 @@ export class Message extends React.PureComponent { {i18n('downloadAttachment')} ) : null} - {canReply && shouldShowAdditional ? ( + {shouldShowAdditional ? ( <> - { - event.stopPropagation(); - event.preventDefault(); + {canReply && ( + { + event.stopPropagation(); + event.preventDefault(); - replyToMessage(id); - }} - > - {i18n('replyToMessage')} - - { - event.stopPropagation(); - event.preventDefault(); + replyToMessage(id); + }} + > + {i18n('replyToMessage')} + + )} + {canReact && ( + { + event.stopPropagation(); + event.preventDefault(); - this.toggleReactionPicker(); - }} - > - {i18n('reactToMessage')} - + this.toggleReactionPicker(); + }} + > + {i18n('reactToMessage')} + + )} ) : null} { public handleKeyDown = (event: React.KeyboardEvent): void => { // Do not allow reactions to error messages - const { canReply } = this.props; + const { canReact } = this.props; const key = KeyboardLayout.lookup(event.nativeEvent); @@ -2331,7 +2338,7 @@ export class Message extends React.PureComponent { (key === 'E' || key === 'e') && (event.metaKey || event.ctrlKey) && event.shiftKey && - canReply + canReact ) { this.toggleReactionPicker(); } diff --git a/ts/components/conversation/MessageDetail.stories.tsx b/ts/components/conversation/MessageDetail.stories.tsx index 0da0629e9919..0c7cddcfed95 100644 --- a/ts/components/conversation/MessageDetail.stories.tsx +++ b/ts/components/conversation/MessageDetail.stories.tsx @@ -27,6 +27,7 @@ const defaultMessage: MessageDataPropsType = { id: 'some-id', title: 'Max', }), + canReact: true, canReply: true, canDeleteForEveryone: true, canDownload: true, diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx index 26801ed8af52..a15b5cb3c86e 100644 --- a/ts/components/conversation/Quote.stories.tsx +++ b/ts/components/conversation/Quote.stories.tsx @@ -37,6 +37,7 @@ const defaultMessageProps: MessagesProps = { id: 'some-id', title: 'Person X', }), + canReact: true, canReply: true, canDeleteForEveryone: true, canDownload: true, diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx index aa88b39fb866..63dfaa13d9bf 100644 --- a/ts/components/conversation/Timeline.stories.tsx +++ b/ts/components/conversation/Timeline.stories.tsx @@ -48,6 +48,7 @@ const items: Record = { }), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'forest', conversationId: 'conversation-id', @@ -69,6 +70,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'forest', conversationId: 'conversation-id', @@ -104,6 +106,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'crimson', conversationId: 'conversation-id', @@ -200,6 +203,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'plum', conversationId: 'conversation-id', @@ -222,6 +226,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'crimson', conversationId: 'conversation-id', @@ -244,6 +249,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'crimson', conversationId: 'conversation-id', @@ -266,6 +272,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'crimson', conversationId: 'conversation-id', @@ -288,6 +295,7 @@ const items: Record = { author: getDefaultConversation({}), canDeleteForEveryone: false, canDownload: true, + canReact: true, canReply: true, conversationColor: 'crimson', conversationId: 'conversation-id', diff --git a/ts/state/selectors/message.ts b/ts/state/selectors/message.ts index 8a6ed50a333f..41555fb17b29 100644 --- a/ts/state/selectors/message.ts +++ b/ts/state/selectors/message.ts @@ -508,6 +508,7 @@ type ShallowPropsType = Pick< PropsForMessage, | 'canDeleteForEveryone' | 'canDownload' + | 'canReact' | 'canReply' | 'contact' | 'contactNameColor' @@ -589,6 +590,7 @@ const getShallowPropsForMessage = createSelectorCreator(memoizeByRoot, isEqual)( return { canDeleteForEveryone: canDeleteForEveryone(message), canDownload: canDownload(message, conversationSelector), + canReact: canReact(message, ourConversationId, conversationSelector), canReply: canReply(message, ourConversationId, conversationSelector), contact: getPropsForEmbeddedContact(message, regionCode, accountSelector), contactNameColor,