RN-8 Added emoji and emoticon support (#616)

* RN-8 Added emoji and emoticon support

* Updated yarn.lock

app/components/emoji/emoji.js

@@ -0,0 +1,56 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Image, Text} from 'react-native';
+
+import CustomPropTypes from 'app/constants/custom_prop_types';
+import {EmojiIndicesByAlias, Emojis} from 'app/utils/emojis';
+
+import {Client} from 'mattermost-redux/client';
+
+export default class Emoji extends React.PureComponent {
+    static propTypes = {
+        customEmojis: PropTypes.object,
+        emojiName: PropTypes.string.isRequired,
+        literal: PropTypes.string,
+        size: PropTypes.number.isRequired,
+        textStyle: CustomPropTypes.Style
+    }
+
+    static defaultProps = {
+        customEmojis: new Map(),
+        literal: ''
+    }
+
+    render() {
+        const {
+            customEmojis,
+            emojiName,
+            literal,
+            size,
+            textStyle
+        } = this.props;
+
+        let imageUrl;
+        if (EmojiIndicesByAlias.has(emojiName)) {
+            const emoji = Emojis[EmojiIndicesByAlias.get(emojiName)];
+            imageUrl = Client.getSystemEmojiImageUrl(emoji.filename);
+        } else if (customEmojis.has(emojiName)) {
+            const emoji = customEmojis.get(emojiName);
+            imageUrl = Client.getCustomEmojiImageUrl(emoji.id);
+        }
+
+        if (!imageUrl) {
+            return <Text style={textStyle}>{literal}</Text>;
+        }
+
+        return (
+            <Image
+                style={{width: size, height: size, padding: 10}}
+                source={{uri: imageUrl}}
+            />
+        );
+    }
+}

app/components/emoji/index.js

@@ -0,0 +1,17 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getCustomEmojisByName} from 'mattermost-redux/selectors/entities/emojis';
+
+import Emoji from './emoji';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        customEmojis: getCustomEmojisByName(state),
+        ...ownProps
+    };
+}
+
+export default connect(mapStateToProps)(Emoji);

app/components/markdown/index.js

@@ -3,15 +3,17 @@
 
 import {Parser} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {PureComponent} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
+    Platform,
     StyleSheet,
     Text,
     View
 } from 'react-native';
 
 import AtMention from 'app/components/at_mention';
+import Emoji from 'app/components/emoji';
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import {concatStyles} from 'app/utils/theme';
 
@@ -21,17 +23,40 @@ import MarkdownLink from './markdown_link';
 import MarkdownList from './markdown_list';
 import MarkdownListItem from './markdown_list_item';
 
-export default class Markdown extends PureComponent {
+export default class Markdown extends React.PureComponent {
     static propTypes = {
         baseTextStyle: CustomPropTypes.Style,
         textStyles: PropTypes.object,
         blockStyles: PropTypes.object,
+        emojiSizes: PropTypes.object,
         value: PropTypes.string.isRequired
     };
 
     static defaultProps = {
         textStyles: {},
-        blockStyles: {}
+        blockStyles: {},
+        emojiSizes: {
+            ...Platform.select({
+                ios: {
+                    heading1: 25,
+                    heading2: 25,
+                    heading3: 25,
+                    heading4: 25,
+                    heading5: 25,
+                    heading6: 25,
+                    text: 20
+                },
+                android: {
+                    heading1: 80,
+                    heading2: 80,
+                    heading3: 80,
+                    heading4: 80,
+                    heading5: 80,
+                    heading6: 80,
+                    text: 65
+                }
+            })
+        }
     };
 
     constructor(props) {
@@ -52,6 +77,7 @@ export default class Markdown extends PureComponent {
                 link: MarkdownLink,
                 image: this.renderImage,
                 atMention: this.renderAtMention,
+                emoji: this.renderEmoji,
 
                 paragraph: this.renderParagraph,
                 heading: this.renderHeading,
@@ -108,6 +134,25 @@ export default class Markdown extends PureComponent {
         );
     }
 
+    renderEmoji = ({context, emojiName, literal}) => {
+        let size;
+        const headingType = context.find((type) => type.startsWith('heading'));
+        if (headingType) {
+            size = this.props.emojiSizes[headingType];
+        } else {
+            size = this.props.emojiSizes.text;
+        }
+
+        return (
+            <Emoji
+                emojiName={emojiName}
+                literal={literal}
+                size={size}
+                textStyle={this.computeTextStyle(this.props.baseTextStyle, context)}
+            />
+        );
+    }
+
     renderParagraph = ({children}) => {
         return (
             <View style={style.block}>

package.json

@@ -8,8 +8,8 @@
   "private": true,
   "dependencies": {
     "babel-polyfill": "6.23.0",
-    "commonmark": "hmhealey/commonmark.js#46784f1461fa34e148940534c1763af6d344ab0f",
-    "commonmark-react-renderer": "hmhealey/commonmark-react-renderer#7479202c42ab1b722359adadaa13f738edf5f88a",
+    "commonmark": "hmhealey/commonmark.js#0e1c57aff4e0729e12ae1453fadc6c8bfd86cf96",
+    "commonmark-react-renderer": "hmhealey/commonmark-react-renderer#1cec47814455f2eb3858864334eb4300b5103523",
     "deep-equal": "1.0.1",
     "intl": "1.2.5",
     "mattermost-redux": "mattermost/mattermost-redux#master",

yarn.lock

@@ -1512,9 +1512,9 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-commonmark-react-renderer@hmhealey/commonmark-react-renderer#7479202c42ab1b722359adadaa13f738edf5f88a:
+commonmark-react-renderer@hmhealey/commonmark-react-renderer#1cec47814455f2eb3858864334eb4300b5103523:
   version "4.3.2"
-  resolved "https://codeload.github.com/hmhealey/commonmark-react-renderer/tar.gz/7479202c42ab1b722359adadaa13f738edf5f88a"
+  resolved "https://codeload.github.com/hmhealey/commonmark-react-renderer/tar.gz/1cec47814455f2eb3858864334eb4300b5103523"
   dependencies:
     in-publish "^2.0.0"
     lodash.assign "^4.2.0"
@@ -1522,9 +1522,9 @@ commonmark-react-renderer@hmhealey/commonmark-react-renderer#7479202c42ab1b72235
     pascalcase "^0.1.1"
     xss-filters "^1.2.6"
 
-commonmark@hmhealey/commonmark.js#46784f1461fa34e148940534c1763af6d344ab0f:
+commonmark@hmhealey/commonmark.js#0e1c57aff4e0729e12ae1453fadc6c8bfd86cf96:
   version "0.27.0"
-  resolved "https://codeload.github.com/hmhealey/commonmark.js/tar.gz/46784f1461fa34e148940534c1763af6d344ab0f"
+  resolved "https://codeload.github.com/hmhealey/commonmark.js/tar.gz/0e1c57aff4e0729e12ae1453fadc6c8bfd86cf96"
   dependencies:
     entities "~ 1.1.1"
     mdurl "~ 1.0.1"