summaryrefslogtreecommitdiffstats
path: root/webapp/components/emoji_picker/emoji_picker.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components/emoji_picker/emoji_picker.jsx')
-rw-r--r--webapp/components/emoji_picker/emoji_picker.jsx93
1 files changed, 41 insertions, 52 deletions
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;