From ee23af7655cc42a44e3ca5355da3014724b19b36 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Thu, 27 Jun 2019 19:35:45 +0300 Subject: [PATCH] [IMPROVEMENT] Bigger emoji in emoji only messages (#793) * issue #725: bigger emoji in emoji only message * issue-725/add storybook for Message/Emoji * issue-725: update storybook/Message jest snapshot * comment storybook import * allow spaces and line breaks in emoji only message * merge develop * revert unnecessary spacing --- .../__snapshots__/Storyshots.test.js.snap | 871 +++++++++++++++++- app/containers/message/Markdown.js | 41 +- app/containers/message/styles.js | 9 + storybook/stories/Message.js | 12 + 4 files changed, 923 insertions(+), 10 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 335bfb8b39..bbf417d563 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -2780,7 +2780,7 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 16, + "fontSize": 46, "fontWeight": "400", } } @@ -2812,7 +2812,7 @@ exports[`Storyshots Message list 1`] = ` ] } > - Custom Emojis + Single Emoji + + 👏 + + + + + + + + + + + Custom Emojis + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + @@ -3013,8 +3217,8 @@ exports[`Storyshots Message list 1`] = ` } style={ Object { - "height": 20, - "width": 20, + "height": 50, + "width": 50, } } /> @@ -3029,8 +3233,8 @@ exports[`Storyshots Message list 1`] = ` } style={ Object { - "height": 20, - "width": 20, + "height": 50, + "width": 50, } } /> @@ -3042,6 +3246,657 @@ exports[`Storyshots Message list 1`] = ` + + Single Custom Emojis + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + + + Normal Emoji + Custom Emojis + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 🤙 + + + + + + + + + + + + Four emoji + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 🤙 + + + + 🤙🤙 + + + + + + + + + text.replace( (match, url, title) => `[${ title }](${ url })` ); +const emojiRanges = [ + '\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]', // unicode emoji from https://www.regextester.com/106421 + ':.{1,40}:', // custom emoji + ' |\n' // allow spaces and line breaks +].join('|'); + +const removeAllEmoji = str => str.replace(new RegExp(emojiRanges, 'g'), ''); + +const isOnlyEmoji = str => !removeAllEmoji(str).length; + +const removeOneEmoji = str => str.replace(new RegExp(emojiRanges), ''); + +const emojiCount = (str) => { + let oldLength = 0; + let counter = 0; + + while (oldLength !== str.length) { + oldLength = str.length; + str = removeOneEmoji(str); + if (oldLength !== str.length) { + counter += 1; + } + } + + return counter; +}; + const Markdown = React.memo(({ msg, style, rules, baseUrl, username, isEdited, numberOfLines, mentions, channels, getCustomEmoji, useMarkdown = true }) => { @@ -30,6 +57,7 @@ const Markdown = React.memo(({ if (m) { m = emojify(m, { output: 'unicode' }); } + m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim(); if (numberOfLines > 0) { m = m.replace(/[\n]+/g, '\n').trim(); @@ -39,6 +67,8 @@ const Markdown = React.memo(({ return {m}; } + const isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3; + return ( ; + return ( + + ); } return :{content}:; } @@ -102,7 +139,7 @@ const Markdown = React.memo(({ }} style={{ paragraph: styles.paragraph, - text: styles.text, + text: isMessageContainsOnlyEmoji ? styles.textBig : styles.text, codeInline: styles.codeInline, codeBlock: styles.codeBlock, link: styles.link, diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js index c08467ef09..6939b3abd3 100644 --- a/app/containers/message/styles.js +++ b/app/containers/message/styles.js @@ -39,6 +39,11 @@ export default StyleSheet.create({ ...sharedStyles.textColorNormal, ...sharedStyles.textRegular }, + textBig: { + fontSize: 46, + ...sharedStyles.textColorNormal, + ...sharedStyles.textRegular + }, textInfo: { fontStyle: 'italic', fontSize: 16, @@ -49,6 +54,10 @@ export default StyleSheet.create({ width: 20, height: 20 }, + customEmojiBig: { + width: 50, + height: 50 + }, temp: { opacity: 0.3 }, marginTop: { marginTop: 6 diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js index 87c8213846..79511c7449 100644 --- a/storybook/stories/Message.js +++ b/storybook/stories/Message.js @@ -128,9 +128,21 @@ export default ( + + + + + + + + + + + +