diff options
Diffstat (limited to 'webapp/components')
4 files changed, 50 insertions, 75 deletions
diff --git a/webapp/components/create_comment/create_comment.jsx b/webapp/components/create_comment/create_comment.jsx index 62eff9e28..9370d7b48 100644 --- a/webapp/components/create_comment/create_comment.jsx +++ b/webapp/components/create_comment/create_comment.jsx @@ -31,7 +31,7 @@ import {browserHistory} from 'react-router/es6'; const ActionTypes = Constants.ActionTypes; const KeyCodes = Constants.KeyCodes; -import {REACTION_PATTERN, EMOJI_PATTERN} from 'components/create_post.jsx'; +import {REACTION_PATTERN} from 'components/create_post.jsx'; import PropTypes from 'prop-types'; import React from 'react'; @@ -87,9 +87,13 @@ export default class CreateComment extends React.Component { if (this.state.message === '') { this.setState({message: ':' + emojiAlias + ': '}); } else { - //check whether there is already a blank at the end of the current message - const newMessage = (/\s+$/.test(this.state.message)) ? - this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': '; + // Check whether there is already a blank at the end of the current message + let newMessage; + if ((/\s+$/).test(this.state.message)) { + newMessage = this.state.message + ':' + emojiAlias + ': '; + } else { + newMessage = this.state.message + ' :' + emojiAlias + ': '; + } this.setState({message: newMessage}); } @@ -230,14 +234,6 @@ export default class CreateComment extends React.Component { GlobalActions.emitUserCommentedEvent(post); - const emojiResult = post.message.match(EMOJI_PATTERN); - if (emojiResult) { - // parse message and emit emoji event - emojiResult.forEach((emoji) => { - PostActions.emitEmojiPosted(emoji); - }); - } - PostActions.createPost(post, this.state.fileInfos); this.setState({ diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index e5ead4e84..f822f46f4 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -41,7 +41,6 @@ import React from 'react'; import PropTypes from 'prop-types'; export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/; -export const EMOJI_PATTERN = /:[A-Za-z-_0-9]*:/g; export default class CreatePost extends React.Component { constructor(props) { @@ -268,14 +267,6 @@ export default class CreatePost extends React.Component { GlobalActions.emitUserPostedEvent(post); - // parse message and emit emoji event - const emojiResult = post.message.match(EMOJI_PATTERN); - if (emojiResult) { - emojiResult.forEach((emoji) => { - PostActions.emitEmojiPosted(emoji); - }); - } - PostActions.createPost(post, this.state.fileInfos, () => GlobalActions.postListScrollChange(true), (err) => { diff --git a/webapp/components/emoji_picker/components/emoji_picker_category.jsx b/webapp/components/emoji_picker/components/emoji_picker_category.jsx index 579aaed28..66146106b 100644 --- a/webapp/components/emoji_picker/components/emoji_picker_category.jsx +++ b/webapp/components/emoji_picker/components/emoji_picker_category.jsx @@ -1,8 +1,7 @@ -import PropTypes from 'prop-types'; - // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import PropTypes from 'prop-types'; import React from 'react'; export default class EmojiPickerCategory extends React.Component { diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index 8b5375000..49050a7d8 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -169,45 +169,57 @@ export default class EmojiPicker extends React.Component { } renderCategory(category, isLoaded, filter) { - const items = []; - let indices = []; - let recentEmojis = []; - + let emojis; if (category === 'recent') { - recentEmojis = EmojiStore.getRecentEmojis(); - indices = [...Array(recentEmojis.length).keys()]; + const recentEmojis = [...EmojiStore.getRecentEmojis()]; - // reverse indices so most recently added is first - indices.reverse(); + // Reverse so most recently added is first + recentEmojis.reverse(); + + emojis = recentEmojis.filter((name) => { + return EmojiStore.has(name); + }).map((name) => { + return EmojiStore.get(name); + }); } else { - indices = Emoji.EmojiIndicesByCategory.get(category) || []; + const indices = Emoji.EmojiIndicesByCategory.get(category) || []; + + emojis = indices.map((index) => Emoji.Emojis[index]); + + if (category === 'custom') { + emojis = emojis.concat([...EmojiStore.getCustomEmojiMap().values()]); + } } - for (const index of indices) { - let emoji = {}; - if (category === 'recent') { - emoji = recentEmojis[index]; - } else { - emoji = Emoji.Emojis[index]; + // Apply filter + emojis = emojis.filter((emoji) => { + if (emoji.name) { + return emoji.name.indexOf(filter) !== -1; } - if (filter) { - let matches = false; - - for (const alias of emoji.aliases || [...emoji.name]) { - if (alias.indexOf(filter) !== -1) { - matches = true; - break; - } - } - if (!matches) { - continue; + for (const alias of emoji.aliases) { + if (alias.indexOf(filter) !== -1) { + return true; } } - items.push( + return false; + }); + + const items = emojis.map((emoji) => { + const name = emoji.name || emoji.aliases[0]; + let key; + if (category === 'recent') { + key = 'system_recent_' + name; + } else if (category === 'custom' && emoji.name) { + key = 'custom_' + name; + } else { + key = 'system_' + name; + } + + return ( <EmojiPickerItem - key={'system_' + (category === 'recent' ? 'recent_' : '') + (emoji.name || emoji.aliases[0])} + key={key} emoji={emoji} category={category} isLoaded={isLoaded} @@ -217,30 +229,7 @@ export default class EmojiPicker extends React.Component { onItemUnmount={this.handleItemUnmount} /> ); - } - - if (category === 'custom') { - const customEmojis = EmojiStore.getCustomEmojiMap().values(); - - for (const emoji of customEmojis) { - if (filter && emoji.name.indexOf(filter) === -1) { - continue; - } - - items.push( - <EmojiPickerItem - key={'custom_' + emoji.name} - emoji={emoji} - category={category} - onItemOver={this.handleItemOver} - onItemOut={this.handleItemOut} - onItemClick={this.handleItemClick} - onItemUnmount={this.handleItemUnmount} - - /> - ); - } - } + }); // Only render the header if there's any visible items let header = null; |