Merge pull request #2523 from hmhealey/plt2351

PLT-2351 Switch to Apple emoji set

webapp/components/post_body.jsx

@@ -5,7 +5,6 @@ import ReactDOM from 'react-dom';
 import FileAttachmentList from './file_attachment_list.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
-import * as Emoji from 'utils/emoticons.jsx';
 import Constants from 'utils/constants.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import twemoji from 'twemoji';
@@ -52,9 +51,9 @@ class PostBody extends React.Component {
 
     parseEmojis() {
         twemoji.parse(ReactDOM.findDOMNode(this), {
-            className: 'emoji twemoji',
+            className: 'emoticon',
             base: '',
-            folder: Emoji.getImagePathForEmoticon()
+            folder: Constants.EMOJI_PATH
         });
     }
 

webapp/components/rhs_comment.jsx

@@ -70,7 +70,11 @@ class RhsComment extends React.Component {
         this.forceUpdate();
     }
     parseEmojis() {
-        twemoji.parse(ReactDOM.findDOMNode(this), {size: Constants.EMOJI_SIZE});
+        twemoji.parse(ReactDOM.findDOMNode(this), {
+            className: 'emoticon',
+            base: '',
+            folder: Constants.EMOJI_PATH
+        });
     }
     handlePermalink(e) {
         e.preventDefault();

webapp/components/rhs_root_post.jsx

@@ -7,7 +7,6 @@ import UserProfile from './user_profile.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
-import * as Emoji from 'utils/emoticons.jsx';
 import FileAttachmentList from './file_attachment_list.jsx';
 import twemoji from 'twemoji';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
@@ -30,9 +29,9 @@ export default class RhsRootPost extends React.Component {
     }
     parseEmojis() {
         twemoji.parse(ReactDOM.findDOMNode(this), {
-            className: 'emoji twemoji',
+            className: 'emoticon',
             base: '',
-            folder: Emoji.getImagePathForEmoticon()
+            folder: Constants.EMOJI_PATH
         });
     }
     handlePermalink(e) {

webapp/components/suggestion/emoticon_provider.jsx

@@ -11,7 +11,7 @@ import React from 'react';
 class EmoticonSuggestion extends React.Component {
     render() {
         const text = this.props.term;
-        const name = this.props.item;
+        const emoticon = this.props.item;
 
         let className = 'emoticon-suggestion';
         if (this.props.isSelection) {
@@ -27,7 +27,7 @@ class EmoticonSuggestion extends React.Component {
                     <img
                         alt={text}
                         className='emoticon-suggestion__image'
-                        src={Emoticons.getImagePathForEmoticon(name)}
+                        src={emoticon.path}
                         title={text}
                     />
                 </div>
@@ -40,7 +40,7 @@ class EmoticonSuggestion extends React.Component {
 }
 
 EmoticonSuggestion.propTypes = {
-    item: React.PropTypes.string.isRequired,
+    item: React.PropTypes.object.isRequired,
     term: React.PropTypes.string.isRequired,
     isSelection: React.PropTypes.bool,
     onClick: React.PropTypes.func
@@ -53,25 +53,25 @@ export default class EmoticonProvider {
             const text = captured[1];
             const partialName = captured[2];
 
-            const names = [];
+            const matched = [];
 
-            for (const emoticon of Emoticons.emoticonMap.keys()) {
-                if (emoticon.indexOf(partialName) !== -1) {
-                    names.push(emoticon);
+            for (const [name, emoticon] of Emoticons.emoticons) {
+                if (name.indexOf(partialName) !== -1) {
+                    matched.push(emoticon);
 
-                    if (names.length >= MAX_EMOTICON_SUGGESTIONS) {
+                    if (matched.length >= MAX_EMOTICON_SUGGESTIONS) {
                         break;
                     }
                 }
             }
 
             // sort the emoticons so that emoticons starting with the entered text come first
-            names.sort((a, b) => {
-                const aPrefix = a.startsWith(partialName);
-                const bPrefix = b.startsWith(partialName);
+            matched.sort((a, b) => {
+                const aPrefix = a.alias.startsWith(partialName);
+                const bPrefix = b.alias.startsWith(partialName);
 
                 if (aPrefix === bPrefix) {
-                    return a.localeCompare(b);
+                    return a.alias.localeCompare(b.alias);
                 } else if (aPrefix) {
                     return -1;
                 }
@@ -79,11 +79,11 @@ export default class EmoticonProvider {
                 return 1;
             });
 
-            const terms = names.map((name) => ':' + name + ':');
+            const terms = matched.map((emoticon) => ':' + emoticon.alias + ':');
 
             if (terms.length > 0) {
                 SuggestionStore.setMatchedPretext(suggestionId, text);
-                SuggestionStore.addSuggestions(suggestionId, terms, names, EmoticonSuggestion);
+                SuggestionStore.addSuggestions(suggestionId, terms, matched, EmoticonSuggestion);
 
                 // force the selection to be cleared since the order of elements may have changed
                 SuggestionStore.clearSelection(suggestionId);