Add Emoji Category Picker

assets/emojis.js

@@ -1728,10 +1728,6 @@ const emojis = [
             'sleep',
         ],
     },
-    {
-        code: 'peopleAndBody',
-        header: true,
-    },
     {
         name: 'wave',
         code: '👋',

src/CONST.js

@@ -485,6 +485,11 @@ const CONST = {
 
     EMOJI_SPACER: 'SPACER',
 
+    // This is the number of columns in each row of the picker.
+    // Because of how flatList implements these rows, each row is an index rather than each element
+    // For this reason to make headers work, we need to have the header be the only rendered element in its row
+    // If this number is changed, emojis.js will need to be updated to have the proper number of spacer elements
+    // around each header.
     EMOJI_NUM_PER_ROW: 8,
 
     EMOJI_FREQUENT_ROW_COUNT: 3,
@@ -531,9 +536,9 @@ const CONST = {
     ADD_PAYMENT_MENU_POSITION_X: 356,
     EMOJI_PICKER_SIZE: {
         WIDTH: 320,
-        HEIGHT: 390,
+        HEIGHT: 392,
     },
-    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 288,
+    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 256,
     EMOJI_PICKER_ITEM_HEIGHT: 32,
     EMOJI_PICKER_HEADER_HEIGHT: 32,
     COMPOSER_MAX_HEIGHT: 125,

src/components/EmojiPicker/CategoryShortcutBar.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import _ from 'underscore';
+import styles from '../../styles/styles';
+import FrequentlyUsed from '../../../assets/images/history.svg';
+import Smiley from '../../../assets/images/emoji.svg';
+import AnimalsAndNature from '../../../assets/images/emojiCategoryIcons/plant.svg';
+import FoodAndDrink from '../../../assets/images/emojiCategoryIcons/hamburger.svg';
+import TravelAndPlaces from '../../../assets/images/emojiCategoryIcons/plane.svg';
+import Activities from '../../../assets/images/emojiCategoryIcons/soccer-ball.svg';
+import Objects from '../../../assets/images/emojiCategoryIcons/light-bulb.svg';
+import Symbols from '../../../assets/images/emojiCategoryIcons/peace-sign.svg';
+import Flags from '../../../assets/images/emojiCategoryIcons/flag.svg';
+import CategoryShortcutButton from './CategoryShortcutButton';
+
+const propTypes = {
+    /** The function to call when an emoji is selected */
+    onPress: PropTypes.func.isRequired,
+
+    /** The indices that the icons should link to */
+    headerIndices: PropTypes.arrayOf(PropTypes.number).isRequired,
+};
+
+const CategoryShortcutBar = (props) => {
+    const icons = [Smiley, AnimalsAndNature, FoodAndDrink, TravelAndPlaces, Activities, Objects, Symbols, Flags];
+
+    // If the user has frequently used emojis, there will be 9 headers, otherwise there will be 8
+    if (props.headerIndices.length === 9) {
+        icons.unshift(FrequentlyUsed);
+    }
+
+    return (
+        <View style={[styles.pt2, styles.ph4, styles.flexRow]}>
+            {_.map(props.headerIndices, (headerIndex, i) => (
+                <CategoryShortcutButton
+                    icon={icons[i]}
+                    onPress={() => props.onPress(headerIndex)}
+                    key={`categoryShortcut${i}`}
+                />
+            ))}
+        </View>
+    );
+};
+CategoryShortcutBar.propTypes = propTypes;
+CategoryShortcutBar.displayName = 'CategoryShortcutBar';
+
+export default CategoryShortcutBar;

src/components/EmojiPicker/CategoryShortcutButton.js

@@ -0,0 +1,53 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {Pressable, View} from 'react-native';
+import Icon from '../Icon';
+import variables from '../../styles/variables';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import getButtonState from '../../libs/getButtonState';
+import themeColors from '../../styles/themes/default';
+
+const propTypes = {
+    /** The icon representation of the category that this button links to */
+    icon: PropTypes.func.isRequired,
+
+    /** The function to call when an emoji is selected */
+    onPress: PropTypes.func.isRequired,
+};
+
+class CategoryShortcutButton extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isHighlighted: false,
+        };
+    }
+
+    render() {
+        return (
+            <Pressable
+                onPress={this.props.onPress}
+                onHoverIn={() => this.setState({isHighlighted: true})}
+                onHoverOut={() => this.setState({isHighlighted: false})}
+                style={({pressed}) => ([
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    styles.categoryShortcutButton,
+                    this.state.isHighlighted && styles.emojiItemHighlighted,
+                ])}
+            >
+                <View style={styles.alignSelfCenter}>
+                    <Icon
+                        fill={themeColors.icon}
+                        src={this.props.icon}
+                        height={variables.iconSizeNormal}
+                        width={variables.iconSizeNormal}
+                    />
+                </View>
+            </Pressable>
+        );
+    }
+}
+CategoryShortcutButton.propTypes = propTypes;
+
+export default CategoryShortcutButton;