Skip to content

Commit

Permalink
Merge pull request #3824 from Expensify/revert-3760-thibault-FixSearc…
Browse files Browse the repository at this point in the history 
…hPageSlowIssue(CMD+K)

[CP Staging] Revert "Fix Desktop - CMD + K is slow and laggy #3601"

(cherry picked from commit 312e645)
  • Loading branch information
@tgolen
tgolen authored and OSBotify committed Jun 30, 2021
1 parent 76fabf9 commit 10ddb05
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 92 deletions.
39 changes: 14 additions & 25 deletions src/components/OptionsSelector.js
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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,

Expand All @@ -66,10 +69,9 @@ const propTypes = {

const defaultProps = {
onSelectRow: () => {},
searchSections: () => {},
getCustomHeaderMessage: () => {},
placeholderText: '',
selectedOptions: [],
headerMessage: '',
canSelectMultipleOptions: false,
hideSectionHeaders: false,
disableArrowKeysActions: false,
Expand All @@ -84,32 +86,18 @@ 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,
};
}

componentDidMount() {
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
*
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down
140 changes: 73 additions & 67 deletions src/pages/SearchPage.js
100644 → 100755
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import _ from 'underscore';
import React, {Component} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -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,
}));
Expand All @@ -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
*
Expand All @@ -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,
Expand All @@ -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 (
<ScreenWrapper>
{({didScreenTransitionEnd}) => (
didScreenTransitionEnd && (
<>
<HeaderWithCloseButton
title={this.props.translate('common.search')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
<>
<HeaderWithCloseButton
title={this.props.translate('common.search')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.w100, styles.pRelative]}>
<FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
{didScreenTransitionEnd && (
<OptionsSelector
sections={sections}
value={this.state.searchValue}
onSelectRow={this.selectReport}
onChangeText={this.onChangeText}
headerMessage={headerMessage}
hideSectionHeaders
hideAdditionalOptionStates
showTitleTooltip
/>
<View style={[styles.flex1, styles.w100, styles.pRelative]}>
<FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
{didScreenTransitionEnd && (
<OptionsSelector
sections={sections}
onSelectRow={this.selectReport}
searchSections={this.searchSections}
getCustomHeaderMessage={this.getCustomHeaderMessage}
hideSectionHeaders
hideAdditionalOptionStates
showTitleTooltip
/>
)}
</View>
<KeyboardSpacer />
</>
)
)}
</View>
<KeyboardSpacer />
</>
)}
</ScreenWrapper>
);
Expand Down

0 comments on commit 10ddb05

Please sign in to comment.