Add Emoji Picker

src/CONST.js

@@ -93,14 +93,20 @@ const CONST = {
 
     // at least 8 characters, 1 capital letter, 1 lowercase number, 1 number
     PASSWORD_COMPLEXITY_REGEX_STRING: '^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{8,}$',
+
+    EMOJI_SPACER: 'SPACER',
+
     LOGIN_TYPE: {
         PHONE: 'phone',
         EMAIL: 'email',
     },
+
     KEYBOARD_TYPE: {
         NUMERIC: 'numeric',
         PHONE_PAD: 'phone-pad',
     },
+
+    EMOJI_PICKER_SIZE: 360,
 };
 
 export default CONST;

src/components/Icon/Expensicons.js

@@ -24,38 +24,40 @@ import Gear from '../../../assets/images/gear.svg';
 import Wallet from '../../../assets/images/wallet.svg';
 import Lock from '../../../assets/images/lock.svg';
 import ArrowRight from '../../../assets/images/arrow-right.svg';
+import Emoji from '../../../assets/images/emoji.svg';
 import Upload from '../../../assets/images/upload.svg';
 import Camera from '../../../assets/images/camera.svg';
 import Gallery from '../../../assets/images/gallery.svg';
 
 export {
+    ArrowRight,
     BackArrow,
     DownArrow,
+    Camera,
     ChatBubble,
+    Checkmark,
     Clipboard,
     Close,
+    Download,
+    Emoji,
+    Gallery,
+    Gear,
     LinkCopy,
+    Lock,
     MagnifyingGlass,
     Mail,
+    MoneyCircle,
     Paperclip,
     Pencil,
     Phone,
     Pin,
     PinCircle,
     Plus,
+    Profile,
+    Receipt,
     Send,
     Trashcan,
+    Upload,
     Users,
-    Checkmark,
-    Receipt,
-    MoneyCircle,
-    Download,
-    Profile,
-    Gear,
     Wallet,
-    Lock,
-    ArrowRight,
-    Upload,
-    Camera,
-    Gallery,
 };

src/components/Modal/BaseModal.js

@@ -94,6 +94,9 @@ class BaseModal extends PureComponent {
                 animationOut={this.props.animationOut || animationOut}
                 useNativeDriver={this.props.useNativeDriver}
                 statusBarTranslucent
+                hideModalContentWhileAnimating={this.props.hideModalContentWhileAnimating}
+                animationInTiming={this.props.animationInTiming}
+                animationOutTiming={this.props.animationOutTiming}
             >
                 <SafeAreaInsetsContext.Consumer>
                     {(insets) => {

src/components/PopoverWithMeasuredContent.js

@@ -137,7 +137,7 @@ class PopoverWithMeasuredContent extends Component {
                     but we can't measure its dimensions without first rendering it.
                 */
                 <View style={styles.invisible} onLayout={this.measurePopover}>
-                    {this.props.measureContent()}
+                    {this.props.children}
                 </View>
             );
     }

src/pages/home/report/EmojiPickerMenu/index.js

@@ -0,0 +1,128 @@
+import React, {Component} from 'react';
+import {View, FlatList, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import CONST from '../../../../CONST';
+import styles from '../../../../styles/styles';
+import themeColors from '../../../../styles/themes/default';
+import emojis from '../../../../../assets/emojis';
+import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
+import TextInputFocusable from '../../../../components/TextInputFocusable';
+
+const propTypes = {
+    // Function to add the selected emoji to the main compose text input
+    onEmojiSelected: PropTypes.func.isRequired,
+};
+
+class EmojiPickerMenu extends Component {
+    constructor(props) {
+        super(props);
+
+        // Ref for the emoji search input
+        this.searchInput = undefined;
+
+        // 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.
+        this.numColumns = 8;
+
+        // This is the indices of each category of emojis
+        // The positions are static, and are calculated as index/numColumns (8 in our case)
+        // This is because each row of 8 emojis counts as one index
+        // If more emojis are ever added to emojis.js this will need to be updated or things will break
+        this.unfilteredHeaderIndices = [0, 34, 60, 88, 99, 121, 148];
+
+        this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300);
+        this.renderItem = this.renderItem.bind(this);
+
+        this.state = {
+            filteredEmojis: emojis,
+            headerIndices: this.unfilteredHeaderIndices,
+        };
+    }
+
+    /**
+     * Filter the entire list of emojis to only emojis that have the search term in their keywords
+     *
+     * @param {String} searchTerm
+     */
+    filterEmojis(searchTerm) {
+        const normalizedSearchTerm = searchTerm.toLowerCase();
+        if (normalizedSearchTerm === '') {
+            // There are no headers when searching, so we need to re-make them sticky when there is no search term
+            this.setState({filteredEmojis: emojis, headerIndices: this.unfilteredHeaderIndices});
+            return;
+        }
+
+        const newFilteredEmojiList = _.filter(emojis, emoji => (
+            !emoji.header
+            && emoji.code !== CONST.EMOJI_SPACER
+            && _.find(emoji.keywords, keyword => keyword.includes(normalizedSearchTerm))
+        ));
+
+        // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky
+        this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: []});
+    }
+
+    /**
+     * Given an emoji item object, render a component based on its type.
+     * Items with the code "SPACER" return nothing and are used to fill rows up to 8
+     * so that the sticky headers function properly
+     *
+     * @param {Object} item
+     * @returns {*}
+     */
+    renderItem({item}) {
+        if (item.code === CONST.EMOJI_SPACER) {
+            return null;
+        }
+
+        if (item.header) {
+            return (
+                <Text style={styles.emojiHeaderStyle}>
+                    {item.code}
+                </Text>
+            );
+        }
+
+        return (
+            <EmojiPickerMenuItem
+                onPress={this.props.onEmojiSelected}
+                emoji={item.code}
+            />
+        );
+    }
+
+    render() {
+        return (
+            <View style={styles.emojiPickerContainer}>
+                <View style={[styles.pt4, styles.ph4, styles.pb1]}>
+                    <TextInputFocusable
+                        textAlignVertical="top"
+                        placeholder="Search"
+                        placeholderTextColor={themeColors.textSupporting}
+                        onChangeText={this.filterEmojis}
+                        style={styles.textInput}
+                        defaultValue=""
+                        ref={el => this.searchInput = el}
+                    />
+                </View>
+                <FlatList
+                    data={this.state.filteredEmojis}
+                    renderItem={this.renderItem}
+                    keyExtractor={item => `emoji_picker_${item.code}`}
+                    numColumns={this.numColumns}
+                    style={styles.emojiPickerList}
+                    extraData={this.state.filteredEmojis}
+                    stickyHeaderIndices={this.state.headerIndices}
+                />
+            </View>
+        );
+    }
+}
+
+EmojiPickerMenu.propTypes = propTypes;
+
+export default EmojiPickerMenu;

src/pages/home/report/EmojiPickerMenu/index.native.js

@@ -0,0 +1,81 @@
+import React, {Component} from 'react';
+import {View, FlatList, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import CONST from '../../../../CONST';
+import styles from '../../../../styles/styles';
+import emojis from '../../../../../assets/emojis';
+import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
+
+const propTypes = {
+    // Function to add the selected emoji to the main compose text input
+    onEmojiSelected: PropTypes.func.isRequired,
+};
+
+class EmojiPickerMenu extends Component {
+    constructor(props) {
+        super(props);
+
+        // 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.
+        this.numColumns = 8;
+
+        // This is the indices of each category of emojis
+        // The positions are static, and are calculated as index/numColumns (8 in our case)
+        // This is because each row of 8 emojis counts as one index
+        // If this emojis are ever added to emojis.js this will need to be updated or things will break
+        this.unfilteredHeaderIndices = [0, 34, 60, 88, 99, 121, 148];
+
+        this.renderItem = this.renderItem.bind(this);
+    }
+
+    /**
+     * Given an emoji item object, render a component based on its type.
+     * Items with the code "SPACER" return nothing and are used to fill rows up to 8
+     * so that the sticky headers function properly
+     *
+     * @param {Object} item
+     * @returns {*}
+     */
+    renderItem({item}) {
+        if (item.code === CONST.EMOJI_SPACER) {
+            return null;
+        }
+
+        if (item.header) {
+            return (
+                <Text style={styles.emojiHeaderStyle}>
+                    {item.code}
+                </Text>
+            );
+        }
+
+        return (
+            <EmojiPickerMenuItem
+                onPress={this.props.onEmojiSelected}
+                emoji={item.code}
+            />
+        );
+    }
+
+    render() {
+        return (
+            <View style={styles.emojiPickerContainer}>
+                <FlatList
+                    data={emojis}
+                    renderItem={this.renderItem}
+                    keyExtractor={item => (`emoji_picker_${item.code}`)}
+                    numColumns={this.numColumns}
+                    style={styles.emojiPickerList}
+                    stickyHeaderIndices={this.unfilteredHeaderIndices}
+                />
+            </View>
+        );
+    }
+}
+
+EmojiPickerMenu.propTypes = propTypes;
+
+export default EmojiPickerMenu;

src/pages/home/report/EmojiPickerMenuItem.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Pressable, Text} from 'react-native';
+import styles, {getButtonBackgroundColorStyle} from '../../../styles/styles';
+import getButtonState from '../../../libs/getButtonState';
+
+const propTypes = {
+    // The unicode that is used to display the emoji
+    emoji: PropTypes.string.isRequired,
+
+    // The function to call when an emoji is selected
+    onPress: PropTypes.func.isRequired,
+};
+
+const EmojiPickerMenuItem = props => (
+    <Pressable
+        onPress={() => props.onPress(props.emoji)}
+        style={({hovered, pressed}) => ([
+            styles.emojiItem,
+            getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
+        ])}
+    >
+        <Text style={styles.emojiText}>{props.emoji}</Text>
+    </Pressable>
+);
+
+EmojiPickerMenuItem.propTypes = propTypes;
+EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem';
+
+export default EmojiPickerMenuItem;