diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2015-12-03 09:12:33 -0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2015-12-03 09:12:33 -0500 |
commit | 61f90860a875cbf019570dfbb06ba716a7994fc3 (patch) | |
tree | a55f2a6deb773d4c08aed73427bdb2dd1604a70e /web/react/components/suggestion | |
parent | ffd5d554659816ac0fd24f1470fe7ee6dfe7ba50 (diff) | |
parent | 027c4c88f01210a967dc1f80919eb33d8da67737 (diff) | |
download | chat-61f90860a875cbf019570dfbb06ba716a7994fc3.tar.gz chat-61f90860a875cbf019570dfbb06ba716a7994fc3.tar.bz2 chat-61f90860a875cbf019570dfbb06ba716a7994fc3.zip |
Merge pull request #1582 from hmhealey/emojiautocomplete
Emoji autocomplete
Diffstat (limited to 'web/react/components/suggestion')
-rw-r--r-- | web/react/components/suggestion/emoticon_provider.jsx | 74 | ||||
-rw-r--r-- | web/react/components/suggestion/suggestion_list.jsx | 1 |
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)} /> |