Merge pull request #16659 from Expensify/revert-14652-feature/@perunt…

…/emoji-search-mobile Revert "Emoji search on mobile" (cherry picked from commit 2b9f2e0)
Expensify · Mar 29, 2023 · 8decf0c · 8decf0c
1 parent 3bec8a9
commit 8decf0c
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 213 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -648,10 +648,6 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
-    CATEGORY_SHORTCUT_BAR_HEIGHT: 40,
-    SMALL_EMOJI_PICKER_SIZE: {
-        WIDTH: '100%',
-    },
     NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 256,
     EMOJI_PICKER_ITEM_HEIGHT: 32,
     EMOJI_PICKER_HEADER_HEIGHT: 32,

diff --git a/...mponents/EmojiPicker/EmojiPicker/index.js → src/components/EmojiPicker/EmojiPicker.js b/...mponents/EmojiPicker/EmojiPicker/index.js → src/components/EmojiPicker/EmojiPicker.js
@@ -1,17 +1,9 @@
 import React from 'react';
 import {Dimensions, Keyboard} from 'react-native';
 import _ from 'underscore';
-import EmojiPickerMenu from '../EmojiPickerMenu';
-import CONST from '../../../CONST';
-import PopoverWithMeasuredContent from '../../PopoverWithMeasuredContent';
-import compose from '../../../libs/compose';
-import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../withViewportOffsetTop';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../withWindowDimensions';
-
-const propTypes = {
-    ...viewportOffsetTopPropTypes,
-    ...windowDimensionsPropTypes,
-};
+import EmojiPickerMenu from './EmojiPickerMenu';
+import CONST from '../../CONST';
+import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
 
 const DEFAULT_ANCHOR_ORIGIN = {
     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
@@ -184,7 +176,6 @@ class EmojiPicker extends React.Component {
                 }}
                 anchorOrigin={this.state.emojiPopoverAnchorOrigin}
                 measureContent={this.measureContent}
-                outerStyle={{maxHeight: this.props.windowHeight, marginTop: this.props.viewportOffsetTop}}
             >
                 <EmojiPickerMenu
                     onEmojiSelected={this.selectEmoji}
@@ -195,9 +186,4 @@ class EmojiPicker extends React.Component {
     }
 }
 
-EmojiPicker.propTypes = propTypes;
-
-export default compose(
-    withViewportOffsetTop,
-    withWindowDimensions,
-)(EmojiPicker);
+export default EmojiPicker;
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -424,16 +424,6 @@ 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
@@ -487,20 +477,21 @@ class EmojiPickerMenu extends Component {
                 style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
                 pointerEvents={this.state.arePointerEventsDisabled ? 'none' : 'auto'}
             >
-                <View style={[styles.ph4, styles.pb1, styles.pt2]}>
-                    <TextInput
-                        label={this.props.translate('common.search')}
-                        onChangeText={this.filterEmojis}
-                        defaultValue=""
-                        ref={el => this.searchInput = el}
-                        autoFocus={!this.isMobileLandscape() || 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>
+                {!this.props.isSmallScreenWidth && (
+                    <View style={[styles.ph4, styles.pb1, 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>
+                )}
                 {!isFiltered && (
                     <CategoryShortcutBar
                         headerEmojis={this.headerEmojis}
@@ -512,7 +503,7 @@ class EmojiPickerMenu extends Component {
                         <Text
                             style={[
                                 styles.disabledText,
-                                styles.emojiPickerListWithPadding,
+                                styles.emojiPickerList,
                                 styles.dFlex,
                                 styles.alignItemsCenter,
                                 styles.justifyContentCenter,
@@ -527,11 +518,10 @@ class EmojiPickerMenu extends Component {
                             ref={el => this.emojiList = el}
                             data={this.state.filteredEmojis}
                             renderItem={this.renderItem}
-                            keyExtractor={this.keyExtractor}
+                            keyExtractor={item => `emoji_picker_${item.code}`}
                             numColumns={CONST.EMOJI_NUM_PER_ROW}
                             style={[
                                 styles.emojiPickerList,
-                                StyleUtils.getEmojiPickerListHeight(isFiltered),
                                 this.isMobileLandscape() && styles.emojiPickerListLandscape,
                             ]}
                             extraData={

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -16,9 +16,7 @@ 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 */
@@ -66,48 +64,14 @@ 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();
-
-        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
@@ -148,16 +112,6 @@ class EmojiPickerMenu extends Component {
         })();
     }
 
-    /**
-     * 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
@@ -195,56 +149,28 @@ class EmojiPickerMenu extends Component {
     }
 
     render() {
-        const isFiltered = this.emojis.length !== this.state.filteredEmojis.length;
         return (
             <View style={styles.emojiPickerContainer}>
-                <View style={[styles.ph4, styles.pb1]}>
-                    <TextInput
-                        label={this.props.translate('common.search')}
-                        onChangeText={this.filterEmojis}
-                    />
-                </View>
-                {!isFiltered && (
+                <View>
                     <CategoryShortcutBar
                         headerEmojis={this.headerEmojis}
                         onPress={this.scrollToHeader}
                     />
-                )}
-                {this.state.filteredEmojis.length === 0
-                    ? (
-                        <View style={[
-                            styles.alignItemsCenter,
-                            styles.justifyContentCenter,
-                            styles.emojiPickerListWithPadding,
-                            this.isMobileLandscape() && styles.emojiPickerListLandscape,
-                        ]}
-                        >
-                            <Text style={styles.disabledText}>
-                                {this.props.translate('common.noResultsFound')}
-                            </Text>
-                        </View>
-                    )
-                    : (
-                        <Animated.FlatList
-                            ref={el => this.emojiList = el}
-                            keyboardShouldPersistTaps="handled"
-                            data={this.state.filteredEmojis}
-                            renderItem={this.renderItem}
-                            keyExtractor={this.keyExtractor}
-                            numColumns={CONST.EMOJI_NUM_PER_ROW}
-                            style={[
-                                styles.emojiPickerList,
-                                StyleUtils.getEmojiPickerListHeight(isFiltered),
-                                this.isMobileLandscape() && styles.emojiPickerListLandscape,
-                            ]}
-                            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}
-                        />
-                    )}
+                </View>
+                <Animated.FlatList
+                    ref={el => this.emojiList = el}
+                    data={this.emojis}
+                    renderItem={this.renderItem}
+                    keyExtractor={item => (`emoji_picker_${item.code}`)}
+                    numColumns={CONST.EMOJI_NUM_PER_ROW}
+                    style={[
+                        styles.emojiPickerList,
+                        this.isMobileLandscape() && styles.emojiPickerListLandscape,
+                    ]}
+                    stickyHeaderIndices={this.headerRowIndices}
+                    getItemLayout={this.getItemLayout}
+                    showsVerticalScrollIndicator
+                />
                 <EmojiSkinToneList
                     updatePreferredSkinTone={this.updatePreferredSkinTone}
                     preferredSkinTone={this.props.preferredSkinTone}

diff --git a/src/components/KeyboardAvoidingView/index.android.js b/src/components/KeyboardAvoidingView/index.android.js
diff --git a/src/components/KeyboardAvoidingView/index.ios.js b/src/components/KeyboardAvoidingView/index.ios.js
@@ -1,3 +1,6 @@
+/*
+ * The KeyboardAvoidingView is only used on ios
+ */
 import React from 'react';
 import {KeyboardAvoidingView as KeyboardAvoidingViewComponent} from 'react-native';
 

diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
@@ -10,7 +10,6 @@ import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './
 import * as Modal from '../../libs/actions/Modal';
 import getModalStyles from '../../styles/getModalStyles';
 import variables from '../../styles/variables';
-import KeyboardAvoidingView from '../KeyboardAvoidingView';
 
 const propTypes = {
     ...modalPropTypes,
@@ -133,7 +132,6 @@ class BaseModal extends PureComponent {
                 animationInTiming={this.props.animationInTiming}
                 animationOutTiming={this.props.animationOutTiming}
                 statusBarTranslucent={this.props.statusBarTranslucent}
-                avoidKeyboard={this.props.avoidKeyboard}
             >
                 <SafeAreaInsetsContext.Consumer>
                     {(insets) => {
@@ -158,7 +156,8 @@ class BaseModal extends PureComponent {
                             modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
                             modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
                         });
-                        const content = (
+
+                        return (
                             <View
                                 style={{
                                     ...styles.defaultModalContainer,
@@ -170,16 +169,6 @@ class BaseModal extends PureComponent {
                                 {this.props.children}
                             </View>
                         );
-
-                        return (
-                            <KeyboardAvoidingView
-                                behavior="padding"
-                                style={styles.w100}
-                                shouldApplyToAndroid
-                            >
-                                {content}
-                            </KeyboardAvoidingView>
-                        );
                     }}
                 </SafeAreaInsetsContext.Consumer>
             </ReactNativeModal>

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -458,7 +458,7 @@ function getFontFamilyMonospace({fontStyle, fontWeight}) {
 function getEmojiPickerStyle(isSmallScreenWidth) {
     if (isSmallScreenWidth) {
         return {
-            width: CONST.SMALL_EMOJI_PICKER_SIZE.WIDTH,
+            width: '100%',
         };
     }
     return {
@@ -811,18 +811,6 @@ function getReportWelcomeContainerStyle(isSmallScreenWidth) {
     };
 }
 
-/**
- * Gets the correct height for emoji picker list based on screen dimensions
- *
- * @param {Boolean} hasAdditionalSpace
- * @returns {Object}
- */
-function getEmojiPickerListHeight(hasAdditionalSpace) {
-    return {
-        height: hasAdditionalSpace ? CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT,
-    };
-}
-
 /**
  * Gets styles for Emoji Suggestion row
  *
@@ -979,7 +967,6 @@ export {
     getReportWelcomeBackgroundImageStyle,
     getReportWelcomeTopMarginStyle,
     getReportWelcomeContainerStyle,
-    getEmojiPickerListHeight,
     getEmojiSuggestionItemStyle,
     getEmojiSuggestionContainerStyle,
     getColoredBackgroundStyle,