From 5eccf992b54b318cdeb4caf4d4c3e4f8dee89f1d Mon Sep 17 00:00:00 2001 From: Nicholas Murray Date: Wed, 30 Jun 2021 10:15:44 -0700 Subject: [PATCH] Revert "Fix Desktop - CMD + K is slow and laggy #3601" --- src/components/OptionsSelector.js | 39 +++------ src/pages/SearchPage.js | 140 ++++++++++++++++-------------- 2 files changed, 87 insertions(+), 92 deletions(-) mode change 100644 => 100755 src/components/OptionsSelector.js mode change 100644 => 100755 src/pages/SearchPage.js diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js old mode 100644 new mode 100755 index 651992c16032..d03519c43de1 --- a/src/components/OptionsSelector.js +++ b/src/components/OptionsSelector.js @@ -13,12 +13,6 @@ const propTypes = { /** Callback to fire when a row is tapped */ onSelectRow: PropTypes.func, - /** Function to get a filtered result as list */ - searchSections: PropTypes.func, - - /** Function to get header message from parent component */ - getCustomHeaderMessage: PropTypes.func, - /** Sections for the section list */ sections: PropTypes.arrayOf(PropTypes.shape({ /** Title of the section */ @@ -34,12 +28,21 @@ const propTypes = { shouldShow: PropTypes.bool, })).isRequired, + /** Value in the search input field */ + value: PropTypes.string.isRequired, + + /** Callback fired when text changes */ + onChangeText: PropTypes.func.isRequired, + /** Optional placeholder text for the selector */ placeholderText: PropTypes.string, /** Options that have already been selected */ selectedOptions: PropTypes.arrayOf(optionPropTypes), + /** Optional header message */ + headerMessage: PropTypes.string, + /** Whether we can select multiple options */ canSelectMultipleOptions: PropTypes.bool, @@ -66,10 +69,9 @@ const propTypes = { const defaultProps = { onSelectRow: () => {}, - searchSections: () => {}, - getCustomHeaderMessage: () => {}, placeholderText: '', selectedOptions: [], + headerMessage: '', canSelectMultipleOptions: false, hideSectionHeaders: false, disableArrowKeysActions: false, @@ -84,14 +86,11 @@ class OptionsSelector extends Component { super(props); this.handleKeyPress = this.handleKeyPress.bind(this); - this.onChangeText = this.onChangeText.bind(this); this.selectRow = this.selectRow.bind(this); this.viewableItems = []; - this.searchValue = ''; this.state = { focusedIndex: 0, - sections: props.sections, }; } @@ -99,17 +98,6 @@ class OptionsSelector extends Component { this.textInput.focus(); } - /** - * Updates sections filtered by searchValue - * - * @param {String} searchValue - */ - onChangeText(searchValue) { - const sections = this.props.searchSections(searchValue); - this.searchValue = searchValue; - this.setState({sections}); - } - /** * Scrolls to the focused index within the SectionList * @@ -207,8 +195,9 @@ class OptionsSelector extends Component { styleFocusIn={[styles.textInputReversedFocus]} ref={el => this.textInput = el} style={[styles.textInput]} + value={this.props.value} + onChangeText={this.props.onChangeText} onKeyPress={this.handleKeyPress} - onChangeText={this.onChangeText} placeholder={this.props.placeholderText || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')} placeholderTextColor={themeColors.placeholderText} @@ -218,12 +207,12 @@ class OptionsSelector extends Component { ref={el => this.list = el} optionHoveredStyle={styles.hoveredComponentBG} onSelectRow={this.selectRow} - sections={this.state.sections} + sections={this.props.sections} focusedIndex={this.state.focusedIndex} selectedOptions={this.props.selectedOptions} canSelectMultipleOptions={this.props.canSelectMultipleOptions} hideSectionHeaders={this.props.hideSectionHeaders} - headerMessage={this.props.getCustomHeaderMessage(this.searchValue)} + headerMessage={this.props.headerMessage} disableFocusOptions={this.props.disableArrowKeysActions} hideAdditionalOptionStates={this.props.hideAdditionalOptionStates} forceTextUnreadStyle={this.props.forceTextUnreadStyle} diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js old mode 100644 new mode 100755 index 6b224722de81..564e0181679c --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React, {Component} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -64,74 +65,53 @@ class SearchPage extends Component { Timing.start(CONST.TIMING.SEARCH_RENDER); this.selectReport = this.selectReport.bind(this); - this.searchSections = this.searchSections.bind(this); - this.getCustomHeaderMessage = this.getCustomHeaderMessage.bind(this); - } + this.onChangeText = this.onChangeText.bind(this); + this.debouncedUpdateOptions = _.debounce(this.updateOptions.bind(this), 300); - componentDidMount() { - Timing.end(CONST.TIMING.SEARCH_RENDER); - } - - /** - * Returns header message given searchValue - * @param {String} searchValue - * @returns {String} header messae - */ - getCustomHeaderMessage(searchValue = '') { const { recentReports, personalDetails, userToInvite, } = getSearchOptions( - this.props.reports, - this.props.personalDetails, + props.reports, + props.personalDetails, '', - this.props.betas, - ); - return getHeaderMessage( - (recentReports.length + personalDetails.length) !== 0, - Boolean(userToInvite), - searchValue, + props.betas, ); + + this.state = { + searchValue: '', + recentReports, + personalDetails, + userToInvite, + }; } - /** - * Returns the sections needed for the OptionsSelector - * - * @returns {Array} - */ - getSections() { - // getSections is same to searchSections given empty searchValue - return this.searchSections(); + componentDidMount() { + Timing.end(CONST.TIMING.SEARCH_RENDER); + } + + onChangeText(searchValue = '') { + this.setState({searchValue}, this.debouncedUpdateOptions); } /** * Returns the sections needed for the OptionsSelector - * @param {String} searchValue + * * @returns {Array} */ - searchSections(searchValue = '') { - const { - recentReports, - personalDetails, - userToInvite, - } = getSearchOptions( - this.props.reports, - this.props.personalDetails, - searchValue, - this.props.betas, - ); + getSections() { const sections = [{ title: this.props.translate('common.recents'), - data: recentReports.concat(personalDetails), + data: this.state.recentReports.concat(this.state.personalDetails), shouldShow: true, indexOffset: 0, }]; - if (userToInvite) { + if (this.state.userToInvite) { sections.push(({ undefined, - data: [userToInvite], + data: [this.state.userToInvite], shouldShow: true, indexOffset: 0, })); @@ -140,6 +120,24 @@ class SearchPage extends Component { return sections; } + updateOptions() { + const { + recentReports, + personalDetails, + userToInvite, + } = getSearchOptions( + this.props.reports, + this.props.personalDetails, + this.state.searchValue, + this.props.betas, + ); + this.setState({ + userToInvite, + recentReports, + personalDetails, + }); + } + /** * Reset the search value and redirect to the selected report * @@ -151,7 +149,11 @@ class SearchPage extends Component { } if (option.reportID) { - Navigation.navigate(ROUTES.getReportRoute(option.reportID)); + this.setState({ + searchValue: '', + }, () => { + Navigation.navigate(ROUTES.getReportRoute(option.reportID)); + }); } else { fetchOrCreateChatReport([ this.props.session.email, @@ -162,32 +164,36 @@ class SearchPage extends Component { render() { const sections = this.getSections(); + const headerMessage = getHeaderMessage( + (this.state.recentReports.length + this.state.personalDetails.length) !== 0, + Boolean(this.state.userToInvite), + this.state.searchValue, + ); return ( {({didScreenTransitionEnd}) => ( - didScreenTransitionEnd && ( - <> - Navigation.dismissModal(true)} + <> + Navigation.dismissModal(true)} + /> + + + {didScreenTransitionEnd && ( + - - - {didScreenTransitionEnd && ( - - )} - - - - ) + )} + + + )} );