From 5eab714a0877311112dc73218ee4bad66627281e Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Sun, 7 Apr 2019 20:20:42 +0300 Subject: [PATCH 1/7] issue #725: bigger emoji in emoji only message --- app/containers/message/Markdown.js | 24 ++++++++++++++++++++++-- app/containers/message/styles.js | 4 ++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index 8b453aa233..14467cc755 100644 --- a/app/containers/message/Markdown.js +++ b/app/containers/message/Markdown.js @@ -17,6 +17,16 @@ const formatText = text => 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 removeEmoji = str => str.replace(new RegExp(emojiRanges, 'g'), ''); + +const isOnlyEmoji = str => !removeEmoji(str).length; + const codeFontFamily = Platform.select({ ios: { fontFamily: 'Courier New' }, android: { fontFamily: 'monospace' } @@ -38,6 +48,9 @@ export default class Markdown extends React.Component { let m = formatText(msg); m = emojify(m, { output: 'unicode' }); m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim(); + + const isMessageContainsOnlyEmoji = isOnlyEmoji(m); + return ( ; + return ( + + ); } return :{content}:; } @@ -95,7 +115,7 @@ export default class Markdown extends React.Component { style={{ paragraph: styles.paragraph, text: { - fontSize: 16, + fontSize: isMessageContainsOnlyEmoji ? 50 : 16, ...sharedStyles.textColorNormal, ...sharedStyles.textRegular }, diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js index 69797ce731..a8db9c4752 100644 --- a/app/containers/message/styles.js +++ b/app/containers/message/styles.js @@ -41,6 +41,10 @@ export default StyleSheet.create({ width: 20, height: 20 }, + customEmojiBig: { + width: 50, + height: 50 + }, temp: { opacity: 0.3 }, marginTop: { marginTop: 6 From b1b9b0c10a5737faceed53210f064576a15318c5 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Mon, 8 Apr 2019 09:08:10 +0300 Subject: [PATCH 2/7] issue-725/add storybook for Message/Emoji --- storybook/stories/Message.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js index af85b7f8e3..381b271a07 100644 --- a/storybook/stories/Message.js +++ b/storybook/stories/Message.js @@ -104,9 +104,21 @@ export default ( + + + + + + + + + + + + From c092c485b678af83a2428e52a0b2948563434619 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Mon, 8 Apr 2019 09:16:17 +0300 Subject: [PATCH 3/7] issue-725: update storybook/Message jest snapshot --- .../__snapshots__/Storyshots.test.js.snap | 884 +++++++++++++++++- 1 file changed, 876 insertions(+), 8 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d67da54be6..fe13e3b7e9 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -3039,7 +3039,7 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "transparent", "color": "#2F343D", "fontFamily": "System", - "fontSize": 16, + "fontSize": 50, "fontWeight": "400", } } @@ -3070,7 +3070,7 @@ exports[`Storyshots Message list 1`] = ` ] } > - Custom Emojis + Single Emoji + + 👏 + + + + + + + + + + Custom Emojis + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + @@ -3276,8 +3484,8 @@ exports[`Storyshots Message list 1`] = ` } style={ Object { - "height": 20, - "width": 20, + "height": 50, + "width": 50, } } /> @@ -3292,8 +3500,668 @@ exports[`Storyshots Message list 1`] = ` } style={ Object { - "height": 20, - "width": 20, + "height": 50, + "width": 50, + } + } + /> + + + + + + + + + Single Custom Emojis + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + + Normal Emoji + Custom Emojis + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 🤙 + + + + + + + + + + + Emoji with spaces + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + 🤙 + + From 95ff14ffab63dd728ff9b44e3fd6f85d319e967a Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Mon, 8 Apr 2019 20:00:54 +0300 Subject: [PATCH 4/7] comment storybook import --- index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index d3918789f8..ba4623382a 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,9 @@ -// import './app/ReactotronConfig'; -// import { AppRegistry } from 'react-native'; -// import App from './app/index'; -// import { name as appName } from './app.json'; -// -// AppRegistry.registerComponent(appName, () => App); +import './app/ReactotronConfig'; +import { AppRegistry } from 'react-native'; +import App from './app/index'; +import { name as appName } from './app.json'; + +AppRegistry.registerComponent(appName, () => App); // For storybook, comment everything above and uncomment below -import './storybook'; +// import './storybook'; From 2fad640682ca70899c54c7337aa6c0736c0cc877 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Wed, 17 Apr 2019 23:26:26 +0300 Subject: [PATCH 5/7] allow spaces and line breaks in emoji only message --- app/containers/message/Markdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index 3dca891d3d..38ef34cf90 100644 --- a/app/containers/message/Markdown.js +++ b/app/containers/message/Markdown.js @@ -16,7 +16,8 @@ const formatText = text => text.replace( 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 + ':.{1,40}:', // custom emoji + ' |\n' // allow spaces and line breaks ].join('|'); const removeAllEmoji = str => str.replace(new RegExp(emojiRanges, 'g'), ''); From dd6b237466b71e1ae08e470f3ffc7f51278cb056 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Thu, 27 Jun 2019 19:15:33 +0300 Subject: [PATCH 6/7] merge develop --- .../__snapshots__/Storyshots.test.js.snap | 4 - app/containers/message/Markdown.js | 175 +++++++++--------- 2 files changed, 88 insertions(+), 91 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index bbf417d563..b93096d8c4 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -2508,7 +2508,6 @@ exports[`Storyshots Message list 1`] = ` } } > -   rocket.cat   @@ -2526,7 +2525,6 @@ exports[`Storyshots Message list 1`] = ` } } > -   diego.mello   @@ -2544,7 +2542,6 @@ exports[`Storyshots Message list 1`] = ` } } > -   all   @@ -2562,7 +2559,6 @@ exports[`Storyshots Message list 1`] = ` } } > -   here   diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index fec0845abd..5bb08705dd 100644 --- a/app/containers/message/Markdown.js +++ b/app/containers/message/Markdown.js @@ -56,98 +56,99 @@ const Markdown = React.memo(({ let m = formatText(msg); if (m) { m = emojify(m, { output: 'unicode' }); - m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim(); - if (numberOfLines > 0) { - m = m.replace(/[\n]+/g, '\n').trim(); - } + } - if (!useMarkdown) { - return {m}; - } + m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim(); + if (numberOfLines > 0) { + m = m.replace(/[\n]+/g, '\n').trim(); + } - const isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3; - - return ( - ( - - {children} - {isEdited ? ({I18n.t('edited')}) : null} - - ), - mention: (node) => { - const { content, key } = node; - let mentionStyle = styles.mention; - if (content === 'all' || content === 'here') { - mentionStyle = { - ...mentionStyle, - ...styles.mentionAll - }; - } else if (content === username) { - mentionStyle = { - ...mentionStyle, - ...styles.mentionLoggedUser - }; - } - if (mentions && mentions.length && mentions.findIndex(mention => mention.username === content) !== -1) { - return ( - -  {content}  - - ); - } - return `@${ content }`; - }, - hashtag: (node) => { - const { content, key } = node; - if (channels && channels.length && channels.findIndex(channel => channel.name === content) !== -1) { - return ( - + if (!useMarkdown) { + return {m}; + } + + const isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3; + + return ( + ( + + {children} + {isEdited ? ({I18n.t('edited')}) : null} + + ), + mention: (node) => { + const { content, key } = node; + let mentionStyle = styles.mention; + if (content === 'all' || content === 'here') { + mentionStyle = { + ...mentionStyle, + ...styles.mentionAll + }; + } else if (content === username) { + mentionStyle = { + ...mentionStyle, + ...styles.mentionLoggedUser + }; + } + if (mentions && mentions.length && mentions.findIndex(mention => mention.username === content) !== -1) { + return ( + + {content}  + + ); + } + return `@${ content }`; + }, + hashtag: (node) => { + const { content, key } = node; + if (channels && channels.length && channels.findIndex(channel => channel.name === content) !== -1) { + return ( +  #{content}  - + + ); + } + return `#${ content }`; + }, + emoji: (node) => { + if (node.children && node.children.length && node.children[0].content) { + const { content } = node.children[0]; + const emoji = getCustomEmoji && getCustomEmoji(content); + if (emoji) { + return ( + ); } - return `#${ content }`; - }, - emoji: (node) => { - if (node.children && node.children.length && node.children[0].content) { - const { content } = node.children[0]; - const emoji = getCustomEmoji && getCustomEmoji(content); - if (emoji) { - return ( - - ); - } - return :{content}:; - } - return null; - }, - hardbreak: () => null, - blocklink: () => null, - image: node => ( - - ), - ...rules - }} - style={{ - paragraph: styles.paragraph, - text: isMessageContainsOnlyEmoji ? styles.textBig : styles.text, - codeInline: styles.codeInline, - codeBlock: styles.codeBlock, - link: styles.link, - ...style - }} - plugins={plugins} - >{m} - - ); - } + return :{content}:; + } + return null; + }, + hardbreak: () => null, + blocklink: () => null, + image: node => ( + + ), + ...rules + }} + style={{ + paragraph: styles.paragraph, + text: isMessageContainsOnlyEmoji ? styles.textBig : styles.text, + codeInline: styles.codeInline, + codeBlock: styles.codeBlock, + link: styles.link, + ...style + }} + plugins={plugins} + >{m} + + ); }, (prevProps, nextProps) => prevProps.msg === nextProps.msg); Markdown.propTypes = { From 36589bd0342ac284c015770edb75af7d9e0316e6 Mon Sep 17 00:00:00 2001 From: IlarionHalushka Date: Thu, 27 Jun 2019 19:24:31 +0300 Subject: [PATCH 7/7] revert unnecessary spacing --- __tests__/__snapshots__/Storyshots.test.js.snap | 4 ++++ app/containers/message/Markdown.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index b93096d8c4..bbf417d563 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -2508,6 +2508,7 @@ exports[`Storyshots Message list 1`] = ` } } > +   rocket.cat   @@ -2525,6 +2526,7 @@ exports[`Storyshots Message list 1`] = ` } } > +   diego.mello   @@ -2542,6 +2544,7 @@ exports[`Storyshots Message list 1`] = ` } } > +   all   @@ -2559,6 +2562,7 @@ exports[`Storyshots Message list 1`] = ` } } > +   here   diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index 5bb08705dd..86fc7d63a2 100644 --- a/app/containers/message/Markdown.js +++ b/app/containers/message/Markdown.js @@ -95,7 +95,7 @@ const Markdown = React.memo(({ if (mentions && mentions.length && mentions.findIndex(mention => mention.username === content) !== -1) { return ( - {content}  +  {content}  ); } @@ -106,7 +106,7 @@ const Markdown = React.memo(({ if (channels && channels.length && channels.findIndex(channel => channel.name === content) !== -1) { return ( -  #{content}  +  #{content}  ); }