diff options
Diffstat (limited to 'web/react/components/suggestion')
4 files changed, 81 insertions, 33 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/search_suggestion_list.jsx b/web/react/components/suggestion/search_suggestion_list.jsx index 542d28ddd..3378a33a0 100644 --- a/web/react/components/suggestion/search_suggestion_list.jsx +++ b/web/react/components/suggestion/search_suggestion_list.jsx @@ -35,7 +35,7 @@ export default class SearchSuggestionList extends SuggestionList { } render() { - if (this.state.items.length === 0 || !this.props.show) { + if (this.state.items.length === 0) { return null; } diff --git a/web/react/components/suggestion/suggestion_box.jsx b/web/react/components/suggestion/suggestion_box.jsx index 4ca461e82..4cfb38f8e 100644 --- a/web/react/components/suggestion/suggestion_box.jsx +++ b/web/react/components/suggestion/suggestion_box.jsx @@ -13,7 +13,6 @@ export default class SuggestionBox extends React.Component { super(props); this.handleDocumentClick = this.handleDocumentClick.bind(this); - this.handleFocus = this.handleFocus.bind(this); this.handleChange = this.handleChange.bind(this); this.handleCompleteWord = this.handleCompleteWord.bind(this); @@ -21,10 +20,6 @@ export default class SuggestionBox extends React.Component { this.handlePretextChanged = this.handlePretextChanged.bind(this); this.suggestionId = Utils.generateId(); - - this.state = { - focused: false - }; } componentDidMount() { @@ -49,27 +44,11 @@ export default class SuggestionBox extends React.Component { } handleDocumentClick(e) { - if (!this.state.focused) { - return; - } - const container = $(ReactDOM.findDOMNode(this)); if (!(container.is(e.target) || container.has(e.target).length > 0)) { // we can't just use blur for this because it fires and hides the children before // their click handlers can be called - this.setState({ - focused: false - }); - } - } - - handleFocus() { - this.setState({ - focused: true - }); - - if (this.props.onFocus) { - this.props.onFocus(); + EventHelpers.emitClearSuggestions(this.suggestionId); } } @@ -134,7 +113,6 @@ export default class SuggestionBox extends React.Component { render() { const newProps = Object.assign({}, this.props, { - onFocus: this.handleFocus, onChange: this.handleChange, onKeyDown: this.handleKeyDown }); @@ -162,10 +140,7 @@ export default class SuggestionBox extends React.Component { return ( <div> {textbox} - <SuggestionListComponent - suggestionId={this.suggestionId} - show={this.state.focused} - /> + <SuggestionListComponent suggestionId={this.suggestionId} /> </div> ); } @@ -184,6 +159,5 @@ SuggestionBox.propTypes = { // explicitly name any input event handlers we override and need to manually call onChange: React.PropTypes.func, - onKeyDown: React.PropTypes.func, - onFocus: React.PropTypes.func + onKeyDown: React.PropTypes.func }; diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx index 45843f4c8..e3ccd0f08 100644 --- a/web/react/components/suggestion/suggestion_list.jsx +++ b/web/react/components/suggestion/suggestion_list.jsx @@ -82,7 +82,7 @@ export default class SuggestionList extends React.Component { } render() { - if (this.state.items.length === 0 || !this.props.show) { + if (this.state.items.length === 0) { return null; } @@ -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)} /> @@ -120,6 +121,5 @@ export default class SuggestionList extends React.Component { } SuggestionList.propTypes = { - suggestionId: React.PropTypes.string.isRequired, - show: React.PropTypes.bool.isRequired + suggestionId: React.PropTypes.string.isRequired }; |