feat: support Spanish emojis

src/CONST.js

@@ -1331,20 +1331,20 @@ const CONST = {
 
     QUICK_REACTIONS: [
         {
-            name: '+1',
+            shortcode: {en: '+1', es: '+1'},
             code: '👍',
-            types: ['👍🏿', '👍🏾', '👍🏽', '👍🏼', '👍🏻'],
+            types: ['👍🏻', '👍🏼', '👍🏽', '👍🏾', '👍🏿'],
         },
         {
-            name: 'heart',
+            shortcode: {en: 'heart', es: 'corazón'},
             code: '❤️',
         },
         {
-            name: 'joy',
+            shortcode: {en: 'joy', es: 'alegría'},
             code: '😂',
         },
         {
-            name: 'fire',
+            shortcode: {en: 'fire', es: 'fuego'},
             code: '🔥',
         },
     ],

src/components/EmojiPicker/CategoryShortcutBar.js

@@ -12,7 +12,7 @@ const propTypes = {
     /** The emojis consisting emoji code and indices that the icons should link to */
     headerEmojis: PropTypes.arrayOf(
         PropTypes.shape({
-            code: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
             index: PropTypes.number.isRequired,
             icon: PropTypes.func.isRequired,
         }),
@@ -27,7 +27,7 @@ function CategoryShortcutBar(props) {
                     icon={headerEmoji.icon}
                     onPress={() => props.onPress(headerEmoji.index)}
                     key={`categoryShortcut${i}`}
-                    code={headerEmoji.code}
+                    name={headerEmoji.name}
                 />
             ))}
         </View>

src/components/EmojiPicker/CategoryShortcutButton.js

@@ -11,8 +11,8 @@ import themeColors from '../../styles/themes/default';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 
 const propTypes = {
-    /** The emoji code of the category header */
-    code: PropTypes.string.isRequired,
+    /** The emoji name of the category header */
+    name: PropTypes.string.isRequired,
 
     /** The icon representation of the category that this button links to */
     icon: PropTypes.func.isRequired,
@@ -34,7 +34,7 @@ class CategoryShortcutButton extends PureComponent {
     render() {
         return (
             <Tooltip
-                text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}
+                text={this.props.name}
                 shiftVertical={-4}
             >
                 <PressableWithoutFeedback

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -55,15 +55,15 @@ class EmojiPickerMenu extends Component {
 
         // If we're on Windows, don't display the flag emojis (the last category),
         // since Windows doesn't support them
-        const flagHeaderIndex = _.findIndex(emojis, (emoji) => emoji.header && emoji.code === 'flags');
+        const flagHeaderIndex = _.findIndex(emojis, (emoji) => emoji.header && _.get(emoji, ['name', 'en']) === 'Flags');
         this.emojis =
             getOperatingSystem() === CONST.OS.WINDOWS
                 ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex))
                 : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis);
 
         // Get the header emojis along with the code, index and icon.
         // index is the actual header index starting at the first emoji and counting each one
-        this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis);
+        this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis, this.props.preferredLocale);
 
         // This is the indices of each header's Row
         // The positions are static, and are calculated as index/numColumns (8 in our case)
@@ -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});
@@ -426,10 +426,11 @@ class EmojiPickerMenu extends Component {
      * Return a unique key for each emoji item
      *
      * @param {Object} item
+     * @param {Number} index
      * @returns {String}
      */
-    keyExtractor(item) {
-        return `emoji_picker_${item.code}`;
+    keyExtractor(item, index) {
+        return `emoji_picker_${item.code}_${index}`;
     }
 
     /**
@@ -450,7 +451,7 @@ class EmojiPickerMenu extends Component {
         if (header) {
             return (
                 <View style={styles.emojiHeaderContainer}>
-                    <Text style={styles.textLabelSupporting}>{this.props.translate(`emojiPicker.headers.${code}`)}</Text>
+                    <Text style={styles.textLabelSupporting}>{item.name[this.props.preferredLocale]}</Text>
                 </View>
             );
         }

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

@@ -49,7 +49,7 @@ class EmojiPickerMenu extends Component {
 
         // Get the header emojis along with the code, index and icon.
         // index is the actual header index starting at the first emoji and counting each one
-        this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis);
+        this.headerEmojis = EmojiUtils.getHeaderEmojis(this.emojis, this.props.preferredLocale);
 
         // This is the indices of each header's Row
         // The positions are static, and are calculated as index/numColumns (8 in our case)
@@ -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,
@@ -150,7 +150,7 @@ class EmojiPickerMenu extends Component {
      * @returns {String}
      */
     keyExtractor(item, index) {
-        return `${index}${item.code}`;
+        return `emoji_picker_${item.code}_${index}`;
     }
 
     /**
@@ -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}>{item.name[this.props.preferredLocale]}</Text>
                 </View>
             );
         }

src/components/Reactions/MiniQuickEmojiReactions.js

@@ -63,9 +63,9 @@ function MiniQuickEmojiReactions(props) {
         <View style={styles.flexRow}>
             {_.map(CONST.QUICK_REACTIONS, (emoji) => (
                 <BaseMiniContextMenuItem
-                    key={emoji.name}
+                    key={emoji.code}
                     isDelayButtonStateComplete={false}
-                    tooltipText={`:${emoji.name}:`}
+                    tooltipText={`:${emoji.shortcode[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

@@ -51,8 +51,8 @@ function BaseQuickEmojiReactions(props) {
         <View style={styles.quickReactionsContainer}>
             {_.map(CONST.QUICK_REACTIONS, (emoji) => (
                 <Tooltip
-                    text={`:${emoji.name}:`}
-                    key={emoji.name}
+                    text={`:${emoji.shortcode[props.preferredLocale]}:`}
+                    key={emoji.code}
                 >
                     <View>
                         <EmojiReactionBubble

src/components/Reactions/ReportActionItemReactions.js

@@ -7,6 +7,8 @@ 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 +61,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 = _.find(emojis, (e) => _.get(e, ['shortcode', 'en'], '') === reaction.emoji);
                 const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, reaction.users);
                 const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers);
 
@@ -75,7 +77,7 @@ function ReportActionItemReactions(props) {
                     <Tooltip
                         renderTooltipContent={() => (
                             <ReactionTooltipContent
-                                emojiName={reaction.emoji}
+                                emojiName={EmojiUtils.getEmojiName(reaction.emoji, props.preferredLocale)}
                                 emojiCodes={emojiCodes}
                                 accountIDs={reactionUsers}
                                 currentUserPersonalDetails={props.currentUserPersonalDetails}
@@ -106,4 +108,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,56 @@
+import _ from 'underscore';
 import emojis 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 = ['en', '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);
+function createTrie(lang = 'en') {
+    const trie = new Trie();
+
+    // Inserting all emojis into the Trie object
+    _.forEach(emojis, (item) => {
+        if (item.header) {
+            return;
+        }
+
+        const shortcode = item.shortcode[lang];
+        if (!shortcode) {
+            return;
+        }
+
+        const node = trie.search(shortcode);
         if (!node) {
-            emojisTrie.add(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: []});
+            trie.add(shortcode, {code: item.code, types: item.types, shortcode: item.shortcode, suggestions: []});
         } else {
-            emojisTrie.update(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: node.metaData.suggestions});
+            trie.update(shortcode, {code: item.code, types: item.types, shortcode: item.shortcode, suggestions: node.metaData.suggestions});
         }
 
-        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 keywords = item.keywords[lang];
+        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: shortcode, shortcode: item.shortcode}]});
+            } else {
+                trie.update(keywords[j], {
+                    ...keywordNode.metaData,
+                    suggestions: [...keywordNode.metaData.suggestions, {code: item.code, types: item.types, name: shortcode, shortcode: item.shortcode}],
+                });
             }
         }
-    }
+    });
+
+    return trie;
 }
+
+const emojiTrie = {};
+_.forEach(supportedLanguages, (lang) => {
+    emojiTrie[lang] = createTrie(lang);
+});
+
 Timing.end(CONST.TIMING.TRIE_INITIALIZATION);
 
-export default emojisTrie;
+export default emojiTrie;