Mobile emoji picker now has search input

patches/react-native-modal+13.0.1.patch

@@ -11,7 +11,7 @@ index b63bcfc..bd6419e 100644
      buildPanResponder: () => void;
      getAccDistancePerDirection: (gestureState: PanResponderGestureState) => number;
 diff --git a/node_modules/react-native-modal/dist/modal.js b/node_modules/react-native-modal/dist/modal.js
-index 80f4e75..fe028ab 100644
+index 80f4e75..a88a2ca 100644
 --- a/node_modules/react-native-modal/dist/modal.js
 +++ b/node_modules/react-native-modal/dist/modal.js
 @@ -75,6 +75,13 @@ export class ReactNativeModal extends React.Component {
@@ -44,3 +44,12 @@ index 80f4e75..fe028ab 100644
          if (this.didUpdateDimensionsEmitter) {
              this.didUpdateDimensionsEmitter.remove();
          }
+@@ -525,7 +538,7 @@ export class ReactNativeModal extends React.Component {
+         }
+         return (React.createElement(Modal, Object.assign({ transparent: true, animationType: 'none', visible: this.state.isVisible, onRequestClose: onBackButtonPress }, otherProps),
+             this.makeBackdrop(),
+-            avoidKeyboard ? (React.createElement(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, pointerEvents: "box-none", style: computedStyle.concat([{ margin: 0 }]) }, containerView)) : (containerView)));
++            avoidKeyboard ? (React.createElement(KeyboardAvoidingView, { behavior: 'padding', pointerEvents: "box-none", style: computedStyle.concat([{ margin: 0 }]) }, containerView)) : (containerView)));
+     }
+ }
+ ReactNativeModal.propTypes = {

src/CONST.js

@@ -827,7 +827,12 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 256,
+    CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
+    SMALL_EMOJI_PICKER_SIZE: {
+        WIDTH: '100%',
+    },
+    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 300,
+    NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT_WEB: 200,
     EMOJI_PICKER_ITEM_HEIGHT: 32,
     EMOJI_PICKER_HEADER_HEIGHT: 32,
     RECIPIENT_LOCAL_TIME_HEIGHT: 25,
@@ -2443,6 +2448,7 @@ const CONST = {
         FLAG_SEVERITY_HARASSMENT: 'harassment',
         FLAG_SEVERITY_ASSAULT: 'assault',
     },
+    EMOJI_PICKER_TEXT_INPUT_SIZES: 152,
     QR: {
         DEFAULT_LOGO_SIZE_RATIO: 0.25,
         DEFAULT_LOGO_MARGIN_RATIO: 0.02,

src/components/EmojiPicker/EmojiPicker.js

@@ -3,13 +3,23 @@ import {Dimensions, Keyboard} from 'react-native';
 import _ from 'underscore';
 import EmojiPickerMenu from './EmojiPickerMenu';
 import CONST from '../../CONST';
+import styles from '../../styles/styles';
 import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../withViewportOffsetTop';
+import compose from '../../libs/compose';
+import * as Browser from '../../libs/Browser';
 
 const DEFAULT_ANCHOR_ORIGIN = {
     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
 };
 
+const propTypes = {
+    ...windowDimensionsPropTypes,
+    ...viewportOffsetTopPropTypes,
+};
+
 class EmojiPicker extends React.Component {
     constructor(props) {
         super(props);
@@ -134,7 +144,8 @@ class EmojiPicker extends React.Component {
      * Focus the search input in the emoji picker.
      */
     focusEmojiSearchInput() {
-        if (!this.emojiSearchInput) {
+        // we won't focus the input if it's mobile device
+        if (!this.emojiSearchInput || this.props.isSmallScreenWidth) {
             return;
         }
         this.emojiSearchInput.focus();
@@ -161,7 +172,10 @@ class EmojiPicker extends React.Component {
                     width: CONST.EMOJI_PICKER_SIZE.WIDTH,
                     height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
                 }}
+                outerStyle={Browser.isMobile() && {maxHeight: this.props.windowHeight, marginTop: this.props.viewportOffsetTop}}
                 anchorAlignment={this.state.emojiPopoverAnchorOrigin}
+                innerContainerStyle={styles.popoverInnerContainer}
+                avoidKeyboard
             >
                 <EmojiPickerMenu
                     onEmojiSelected={this.selectEmoji}
@@ -172,4 +186,6 @@ class EmojiPicker extends React.Component {
     }
 }
 
-export default EmojiPicker;
+EmojiPicker.propTypes = propTypes;
+
+export default compose(withViewportOffsetTop, withWindowDimensions)(EmojiPicker);

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -422,6 +422,16 @@ class EmojiPickerMenu extends Component {
         User.updatePreferredSkinTone(skinTone);
     }
 
+    /**
+     * Return a unique key for each emoji item
+     *
+     * @param {Object} item
+     * @returns {String}
+     */
+    keyExtractor(item) {
+        return `emoji_picker_${item.code}`;
+    }
+
     /**
      * 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
@@ -482,45 +492,44 @@ class EmojiPickerMenu extends Component {
                 style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
                 pointerEvents={this.state.arePointerEventsDisabled ? 'none' : 'auto'}
             >
-                {!this.props.isSmallScreenWidth && (
-                    <View style={[styles.ph4, styles.pb3, styles.pt2]}>
-                        <TextInput
-                            label={this.props.translate('common.search')}
-                            onChangeText={this.filterEmojis}
-                            defaultValue=""
-                            ref={(el) => (this.searchInput = el)}
-                            autoFocus
-                            selectTextOnFocus={this.state.selectTextOnFocus}
-                            onSelectionChange={this.onSelectionChange}
-                            onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
-                            onBlur={() => this.setState({isFocused: false})}
-                        />
-                    </View>
-                )}
+                <View style={[styles.ph4, styles.pb3, styles.pt2]}>
+                    <TextInput
+                        label={this.props.translate('common.search')}
+                        onChangeText={this.filterEmojis}
+                        defaultValue=""
+                        ref={(el) => (this.searchInput = el)}
+                        autoFocus={!this.props.isSmallScreenWidth}
+                        selectTextOnFocus={this.state.selectTextOnFocus}
+                        onSelectionChange={this.onSelectionChange}
+                        onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
+                        onBlur={() => this.setState({isFocused: false})}
+                        autoCorrect={false}
+                    />
+                </View>
                 {!isFiltered && (
                     <CategoryShortcutBar
                         headerEmojis={this.headerEmojis}
                         onPress={this.scrollToHeader}
                     />
                 )}
-                {this.state.filteredEmojis.length === 0 ? (
-                    <Text style={[styles.disabledText, styles.emojiPickerList, styles.textLabel, styles.colorMuted, this.isMobileLandscape() && styles.emojiPickerListLandscape]}>
-                        {this.props.translate('common.noResultsFound')}
-                    </Text>
-                ) : (
-                    <FlatList
-                        ref={(el) => (this.emojiList = el)}
-                        data={this.state.filteredEmojis}
-                        renderItem={this.renderItem}
-                        keyExtractor={(item) => `emoji_picker_${item.code}`}
-                        numColumns={CONST.EMOJI_NUM_PER_ROW}
-                        style={[styles.emojiPickerList, this.isMobileLandscape() && styles.emojiPickerListLandscape]}
-                        extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}
-                        stickyHeaderIndices={this.state.headerIndices}
-                        onScroll={(e) => (this.currentScrollOffset = e.nativeEvent.contentOffset.y)}
-                        getItemLayout={this.getItemLayout}
-                    />
-                )}
+                <FlatList
+                    ref={(el) => (this.emojiList = el)}
+                    data={this.state.filteredEmojis}
+                    renderItem={this.renderItem}
+                    keyExtractor={this.keyExtractor}
+                    numColumns={CONST.EMOJI_NUM_PER_ROW}
+                    style={StyleUtils.getEmojiPickerListHeight(isFiltered, this.props.windowHeight)}
+                    extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]}
+                    stickyHeaderIndices={this.state.headerIndices}
+                    onScroll={(e) => (this.currentScrollOffset = e.nativeEvent.contentOffset.y)}
+                    getItemLayout={this.getItemLayout}
+                    contentContainerStyle={styles.flexGrow1}
+                    ListEmptyComponent={
+                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.flex1]}>
+                            <Text style={[styles.textLabel, styles.colorMuted]}>{this.props.translate('common.noResultsFound')}</Text>
+                        </View>
+                    }
+                />
                 <EmojiSkinToneList
                     updatePreferredSkinTone={this.updatePreferredSkinTone}
                     preferredSkinTone={this.props.preferredSkinTone}

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

@@ -16,7 +16,9 @@ import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
 import EmojiSkinToneList from '../EmojiSkinToneList';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
 import * as User from '../../../libs/actions/User';
+import TextInput from '../../TextInput';
 import CategoryShortcutBar from '../CategoryShortcutBar';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -57,14 +59,48 @@ class EmojiPickerMenu extends Component {
         this.renderItem = this.renderItem.bind(this);
         this.isMobileLandscape = this.isMobileLandscape.bind(this);
         this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this);
+        this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300);
         this.scrollToHeader = this.scrollToHeader.bind(this);
         this.getItemLayout = this.getItemLayout.bind(this);
+
+        this.state = {
+            filteredEmojis: this.emojis,
+            headerIndices: this.headerRowIndices,
+        };
     }
 
     getItemLayout(data, index) {
         return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index};
     }
 
+    /**
+     * 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().trim().replaceAll(':', '');
+
+        if (this.emojiList) {
+            this.emojiList.scrollToOffset({offset: 0, animated: false});
+        }
+
+        if (normalizedSearchTerm === '') {
+            this.setState({
+                filteredEmojis: this.emojis,
+                headerIndices: this.headerRowIndices,
+            });
+
+            return;
+        }
+        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.emojis.length);
+
+        this.setState({
+            filteredEmojis: newFilteredEmojiList,
+            headerIndices: undefined,
+        });
+    }
+
     /**
      * @param {String} emoji
      * @param {Object} emojiObject
@@ -106,6 +142,17 @@ class EmojiPickerMenu extends Component {
         })();
     }
 
+    /**
+     * Return a unique key for each emoji item
+     *
+     * @param {Object} item
+     * @param {Number} index
+     * @returns {String}
+     */
+    keyExtractor(item, index) {
+        return `${index}${item.code}`;
+    }
+
     /**
      * 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
@@ -139,24 +186,45 @@ class EmojiPickerMenu extends Component {
     }
 
     render() {
+        const isFiltered = this.emojis.length !== this.state.filteredEmojis.length;
         return (
             <View style={styles.emojiPickerContainer}>
-                <View>
+                <View style={[styles.ph4, styles.pb1, styles.pt2]}>
+                    <TextInput
+                        label={this.props.translate('common.search')}
+                        onChangeText={this.filterEmojis}
+                    />
+                </View>
+                {!isFiltered && (
                     <CategoryShortcutBar
                         headerEmojis={this.headerEmojis}
                         onPress={this.scrollToHeader}
                     />
-                </View>
+                )}
                 <Animated.FlatList
                     ref={(el) => (this.emojiList = el)}
-                    data={this.emojis}
+                    keyboardShouldPersistTaps="handled"
+                    data={this.state.filteredEmojis}
                     renderItem={this.renderItem}
-                    keyExtractor={(item) => `emoji_picker_${item.code}`}
+                    keyExtractor={this.keyExtractor}
                     numColumns={CONST.EMOJI_NUM_PER_ROW}
-                    style={[styles.emojiPickerList, this.isMobileLandscape() && styles.emojiPickerListLandscape]}
-                    stickyHeaderIndices={this.headerRowIndices}
+                    style={[
+                        StyleUtils.getEmojiPickerListHeight(isFiltered),
+                        {
+                            width: this.props.windowWidth,
+                        },
+                    ]}
+                    stickyHeaderIndices={this.state.headerIndices}
                     getItemLayout={this.getItemLayout}
                     showsVerticalScrollIndicator
+                    // used because of a bug in RN where stickyHeaderIndices can't be updated after the list is rendered https://github.com/facebook/react-native/issues/25157
+                    removeClippedSubviews={false}
+                    contentContainerStyle={styles.flexGrow1}
+                    ListEmptyComponent={
+                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.flex1]}>
+                            <Text style={[styles.disabledText]}>{this.props.translate('common.noResultsFound')}</Text>
+                        </View>
+                    }
                 />
                 <EmojiSkinToneList
                     updatePreferredSkinTone={this.updatePreferredSkinTone}

src/components/Modal/BaseModal.js

@@ -137,6 +137,7 @@ class BaseModal extends PureComponent {
                 animationOutTiming={this.props.animationOutTiming}
                 statusBarTranslucent={this.props.statusBarTranslucent}
                 onLayout={this.props.onLayout}
+                avoidKeyboard={this.props.avoidKeyboard}
             >
                 <SafeAreaInsetsContext.Consumer>
                     {(insets) => {

src/components/Modal/index.web.js

@@ -34,6 +34,7 @@ const Modal = (props) => {
             {...props}
             onModalHide={hideModal}
             onModalShow={showModal}
+            avoidKeyboard={false}
         >
             {props.children}
         </BaseModal>

src/styles/StyleUtils.js

@@ -6,6 +6,7 @@ import variables from './variables';
 import colors from './colors';
 import positioning from './utilities/positioning';
 import styles from './styles';
+import spacing from './utilities/spacing';
 import * as UserUtils from '../libs/UserUtils';
 
 const workspaceColorOptions = [
@@ -587,7 +588,7 @@ function getFontFamilyMonospace({fontStyle, fontWeight}) {
 function getEmojiPickerStyle(isSmallScreenWidth) {
     if (isSmallScreenWidth) {
         return {
-            width: '100%',
+            width: CONST.SMALL_EMOJI_PICKER_SIZE.WIDTH,
         };
     }
     return {
@@ -1138,6 +1139,29 @@ function getGoogleListViewStyle(shouldDisplayBorder) {
     };
 }
 
+/**
+ * Gets the correct height for emoji picker list based on screen dimensions
+ *
+ * @param {Boolean} hasAdditionalSpace
+ * @param {Number} windowHeight
+ * @returns {Object}
+ */
+function getEmojiPickerListHeight(hasAdditionalSpace, windowHeight) {
+    const style = {
+        ...spacing.ph4,
+        height: hasAdditionalSpace ? CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT,
+    };
+
+    if (windowHeight) {
+        const dim = hasAdditionalSpace ? CONST.EMOJI_PICKER_TEXT_INPUT_SIZES : CONST.EMOJI_PICKER_TEXT_INPUT_SIZES + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT;
+        return {
+            ...style,
+            maxHeight: windowHeight - dim,
+        };
+    }
+    return style;
+}
+
 /**
  * Returns style object for the user mention component based on whether the mention is ours or not.
  * @param {Boolean} isOurMention
@@ -1223,6 +1247,7 @@ export {
     getLineHeightStyle,
     getSignInWordmarkWidthStyle,
     getGoogleListViewStyle,
+    getEmojiPickerListHeight,
     getMentionStyle,
     getMentionTextColor,
     getHeightOfMagicCodeInput,