diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index 2392434962b..d3101c51be6 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -205,6 +205,87 @@ story.add('Emoji Messages', () => (
+
+ +
+ +
+ +
+ +
+ )); diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index f0dbef5a6f1..2802f14069f 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -590,6 +590,19 @@ export class Message extends React.PureComponent { return isMessageRequestAccepted && !isBlocked; } + private canRenderStickerLikeEmoji(): boolean { + const { text, quote, attachments, previews } = this.props; + + return Boolean( + text && + isEmojiOnlyText(text) && + getEmojiCount(text) < 6 && + !quote && + (!attachments || !attachments.length) && + (!previews || !previews.length) + ); + } + public renderMetadata(): JSX.Element | null { const { attachments, @@ -619,10 +632,7 @@ export class Message extends React.PureComponent { return null; } - const isEmojiOnly = Boolean( - text && isEmojiOnlyText(text) && getEmojiCount(text) < 6 - ); - const isStickerLike = isSticker || isEmojiOnly; + const isStickerLike = isSticker || this.canRenderStickerLikeEmoji(); return ( { isTapToView, isTapToViewExpired, isTapToViewError, - text, } = this.props; const { isSelected } = this.state; @@ -2340,8 +2349,7 @@ export class Message extends React.PureComponent { const width = this.getWidth(); const isShowingImage = this.isShowingImage(); - const isEmojiOnly = - text && isEmojiOnlyText(text) && getEmojiCount(text) < 6; + const isEmojiOnly = this.canRenderStickerLikeEmoji(); const isStickerLike = isSticker || isEmojiOnly; const containerClassnames = classNames(