Added emoji autocomplete to post textbox

2 files changed, 75 insertions, 0 deletions

diff --git a/web/react/components/suggestion/emoticon_provider.jsx b/web/react/components/suggestion/emoticon_provider.jsx
new file mode 100644
index 000000000..7dcb86442
--- /dev/null
+++ b/web/react/components/suggestion/emoticon_provider.jsx
@@ -0,0 +1,74 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import SuggestionStore from '../../stores/suggestion_store.jsx';
+import * as Emoticons from '../../utils/emoticons.jsx';
+
+const MAX_EMOTICON_SUGGESTIONS = 40;
+
+class EmoticonSuggestion extends React.Component {
+    render() {
+        const text = this.props.term;
+        const name = this.props.item;
+
+        let className = 'emoticon-suggestion';
+        if (this.props.isSelection) {
+            className += ' suggestion--selected';
+        }
+
+        return (
+            <div
+                className={className}
+                onClick={this.props.onClick}
+            >
+                <div className='pull-left'>
+                    <img
+                        alt={text}
+                        className='emoticon-suggestion__image'
+                        src={Emoticons.getImagePathForEmoticon(name)}
+                        title={text}
+                    />
+                </div>
+                <div className='pull-left'>
+                    {text}
+                </div>
+            </div>
+        );
+    }
+}
+
+EmoticonSuggestion.propTypes = {
+    item: React.PropTypes.string.isRequired,
+    term: React.PropTypes.string.isRequired,
+    isSelection: React.PropTypes.bool,
+    onClick: React.PropTypes.func
+};
+
+export default class EmoticonProvider {
+    handlePretextChanged(suggestionId, pretext) {
+        const captured = (/(?:^|\s)(:([a-zA-Z0-9_+\-]*))$/g).exec(pretext);
+        if (captured) {
+            const text = captured[1];
+            const partialName = captured[2];
+
+            const terms = [];
+            const names = [];
+
+            for (const emoticon of Emoticons.emoticonMap.keys()) {
+                if (emoticon.indexOf(partialName) !== -1) {
+                    terms.push(':' + emoticon + ':');
+                    names.push(emoticon);
+
+                    if (terms.length >= MAX_EMOTICON_SUGGESTIONS) {
+                        break;
+                    }
+                }
+            }
+
+            if (terms.length > 0) {
+                SuggestionStore.setMatchedPretext(suggestionId, text);
+                SuggestionStore.addSuggestions(suggestionId, terms, names, EmoticonSuggestion);
+            }
+        }
+    }
+}
diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx
index 45843f4c8..87021fd94 100644
--- a/web/react/components/suggestion/suggestion_list.jsx
+++ b/web/react/components/suggestion/suggestion_list.jsx
@@ -100,6 +100,7 @@ export default class SuggestionList extends React.Component {
                     key={term}
                     ref={term}
                     item={item}
+                    term={term}
                     isSelection={isSelection}
                     onClick={this.handleItemClick.bind(this, term)}
                 />