feat: support Spanish emojis

assets/emojis/index.js

@@ -0,0 +1,36 @@
+import _ from 'underscore';
+import emojis from './common';
+import enEmojis from './en';
+import esEmojis from './es';
+
+const emojiNameTable = _.reduce(
+    emojis,
+    (prev, cur) => {
+        const newValue = prev;
+        if (!cur.header) {
+            newValue[cur.name] = cur;
+        }
+        return newValue;
+    },
+    {},
+);
+
+const emojiCodeTable = _.reduce(
+    emojis,
+    (prev, cur) => {
+        const newValue = prev;
+        if (!cur.header) {
+            newValue[cur.code] = cur;
+        }
+        return newValue;
+    },
+    {},
+);
+
+const localeEmojis = {
+    en: enEmojis,
+    es: esEmojis,
+};
+
+export {emojiNameTable, emojiCodeTable, localeEmojis};
+export {skinTones, categoryFrequentlyUsed, default} from './common';

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -395,7 +395,7 @@ class EmojiPickerMenu extends Component {
             this.setFirstNonHeaderIndex(this.emojis);
             return;
         }
-        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.emojis.length);
+        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.props.preferredLocale, this.emojis.length);
 
         // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky
         this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: [], highlightedIndex: 0});

src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -93,7 +93,7 @@ class EmojiPickerMenu extends Component {
 
             return;
         }
-        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.emojis.length);
+        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.props.preferredLocale, this.emojis.length);
 
         this.setState({
             filteredEmojis: newFilteredEmojiList,
@@ -170,7 +170,7 @@ class EmojiPickerMenu extends Component {
         if (item.header) {
             return (
                 <View style={styles.emojiHeaderContainer}>
-                    <Text style={styles.textLabelSupporting}>{this.props.translate(`emojiPicker.headers.${item.code}`)}</Text>
+                    <Text style={styles.textLabelSupporting}>{this.props.translate(`emojiPicker.headers.${code}`)}</Text>
                 </View>
             );
         }

src/components/Reactions/MiniQuickEmojiReactions.js

@@ -76,7 +76,7 @@ function MiniQuickEmojiReactions(props) {
                 <BaseMiniContextMenuItem
                     key={emoji.name}
                     isDelayButtonStateComplete={false}
-                    tooltipText={`:${emoji.name}:`}
+                    tooltipText={`:${EmojiUtils.getLocalizedEmojiName(emoji.name, props.preferredLocale)}:`}
                     onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji))}
                 >
                     <Text style={[styles.miniQuickEmojiReactionText, styles.userSelectNone]}>{EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)}</Text>

src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js

@@ -34,12 +34,15 @@ const baseQuickEmojiReactionsPropTypes = {
      * ReportAction for EmojiPicker.
      */
     reportAction: PropTypes.object,
+
+    preferredLocale: PropTypes.string,
 };
 
 const baseQuickEmojiReactionsDefaultProps = {
     onWillShowPicker: () => {},
     onPressOpenPicker: () => {},
     reportAction: {},
+    preferredLocale: CONST.LOCALES.DEFAULT,
 };
 
 const propTypes = {
@@ -57,7 +60,7 @@ function BaseQuickEmojiReactions(props) {
         <View style={styles.quickReactionsContainer}>
             {_.map(CONST.QUICK_REACTIONS, (emoji) => (
                 <Tooltip
-                    text={`:${emoji.name}:`}
+                    text={`:${EmojiUtils.getLocalizedEmojiName(emoji.name, props.preferredLocale)}:`}
                     key={emoji.name}
                 >
                     <View>
@@ -87,6 +90,9 @@ export default withOnyx({
     preferredSkinTone: {
         key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
     },
+    preferredLocale: {
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+    },
 })(BaseQuickEmojiReactions);
 
 export {baseQuickEmojiReactionsPropTypes};

src/components/Reactions/ReportActionItemReactions.js

@@ -4,9 +4,10 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import EmojiReactionBubble from './EmojiReactionBubble';
-import emojis from '../../../assets/emojis';
 import AddReactionBubble from './AddReactionBubble';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import withLocalize from '../withLocalize';
+import compose from '../../libs/compose';
 import * as Report from '../../libs/actions/Report';
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
@@ -59,7 +60,7 @@ function ReportActionItemReactions(props) {
             {_.map(reactionsWithCount, (reaction) => {
                 const reactionCount = reaction.users.length;
                 const reactionUsers = _.map(reaction.users, (sender) => sender.accountID);
-                const emoji = _.find(emojis, (e) => e.name === reaction.emoji);
+                const emoji = EmojiUtils.findEmojiByName(reaction.emoji);
                 const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, reaction.users);
                 const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers);
 
@@ -75,7 +76,7 @@ function ReportActionItemReactions(props) {
                     <Tooltip
                         renderTooltipContent={() => (
                             <ReactionTooltipContent
-                                emojiName={reaction.emoji}
+                                emojiName={EmojiUtils.getLocalizedEmojiName(reaction.emoji, props.preferredLocale)}
                                 emojiCodes={emojiCodes}
                                 accountIDs={reactionUsers}
                                 currentUserPersonalDetails={props.currentUserPersonalDetails}
@@ -111,4 +112,4 @@ function ReportActionItemReactions(props) {
 ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;
 ReportActionItemReactions.defaultProps = defaultProps;
-export default withCurrentUserPersonalDetails(ReportActionItemReactions);
+export default compose(withLocalize, withCurrentUserPersonalDetails)(ReportActionItemReactions);

src/libs/EmojiTrie.js

@@ -1,37 +1,53 @@
-import emojis from '../../assets/emojis';
+import _ from 'underscore';
+import emojis, {localeEmojis} from '../../assets/emojis';
 import Trie from './Trie';
 import Timing from './actions/Timing';
 import CONST from '../CONST';
 
 Timing.start(CONST.TIMING.TRIE_INITIALIZATION);
 
-const emojisTrie = new Trie();
+const supportedLanguages = [CONST.LOCALES.DEFAULT, CONST.LOCALES.ES];
 
-// Inserting all emojis into the Trie object
-for (let i = 0; i < emojis.length; i++) {
-    if (emojis[i].name) {
-        const node = emojisTrie.search(emojis[i].name);
-        if (!node) {
-            emojisTrie.add(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: []});
-        } else {
-            emojisTrie.update(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: node.metaData.suggestions});
+function createTrie(lang = CONST.LOCALES.DEFAULT) {
+    const trie = new Trie();
+    const langEmojis = localeEmojis[lang];
+    const isDefaultLocale = lang === CONST.LOCALES.DEFAULT;
+
+    _.forEach(emojis, (item) => {
+        if (item.header) {
+            return;
         }
 
-        if (emojis[i].keywords) {
-            for (let j = 0; j < emojis[i].keywords.length; j++) {
-                const keywordNode = emojisTrie.search(emojis[i].keywords[j]);
-                if (!keywordNode) {
-                    emojisTrie.add(emojis[i].keywords[j], {suggestions: [{code: emojis[i].code, types: emojis[i].types, name: emojis[i].name}]});
-                } else {
-                    emojisTrie.update(emojis[i].keywords[j], {
-                        ...keywordNode.metaData,
-                        suggestions: [...keywordNode.metaData.suggestions, {code: emojis[i].code, types: emojis[i].types, name: emojis[i].name}],
-                    });
-                }
+        const name = isDefaultLocale ? item.name : _.get(langEmojis, [item.code, 'name']);
+        const names = isDefaultLocale ? [name] : [...new Set([name, item.name])];
+        _.forEach(names, (nm) => {
+            const node = trie.search(nm);
+            if (!node) {
+                trie.add(nm, {code: item.code, types: item.types, name: nm, suggestions: []});
+            } else {
+                trie.update(nm, {code: item.code, types: item.types, name: nm, suggestions: node.metaData.suggestions});
+            }
+        });
+
+        const keywords = _.get(langEmojis, [item.code, 'keywords'], []).concat(isDefaultLocale ? [] : _.get(localeEmojis, [CONST.LOCALES.DEFAULT, item.code, 'keywords'], []));
+        for (let j = 0; j < keywords.length; j++) {
+            const keywordNode = trie.search(keywords[j]);
+            if (!keywordNode) {
+                trie.add(keywords[j], {suggestions: [{code: item.code, types: item.types, name}]});
+            } else {
+                trie.update(keywords[j], {
+                    ...keywordNode.metaData,
+                    suggestions: [...keywordNode.metaData.suggestions, {code: item.code, types: item.types, name}],
+                });
             }
         }
-    }
+    });
+
+    return trie;
 }
+
+const emojiTrie = _.reduce(supportedLanguages, (prev, cur) => ({...prev, [cur]: createTrie(cur)}), {});
+
 Timing.end(CONST.TIMING.TRIE_INITIALIZATION);
 
-export default emojisTrie;
+export default emojiTrie;