Refactor in response to review comments.

Cache the information at the source, remove state updates during render.
pull/2304/head^2
mic074b 2020-01-19 10:51:15 +11:00
parent b6db2bf2c5
commit fad2ff674e
2 changed files with 15 additions and 16 deletions

View File

@ -9,7 +9,6 @@ class NoteSearchBarComponent extends React.Component {
this.state = {
query: '',
backgroundColor: undefined,
};
this.searchInput_change = this.searchInput_change.bind(this);
@ -114,18 +113,10 @@ class NoteSearchBarComponent extends React.Component {
const previousButton = this.buttonIconComponent('fa-chevron-up', this.previousButton_click);
const nextButton = this.buttonIconComponent('fa-chevron-down', this.nextButton_click);
if (this.props.resultCount !== undefined) {
const theme = themeStyle(this.props.theme);
if (this.state.query.length === 0 || this.props.resultCount > 0) {
this.state.backgroundColor = theme.backgroundColor;
} else {
this.state.backgroundColor = theme.warningBackgroundColor;
}
} else {
if (this.state.backgroundColor === undefined) {
const theme = themeStyle(this.props.theme);
this.state.backgroundColor = theme.backgroundColor;
}
const theme = themeStyle(this.props.theme);
let backgroundColor = theme.backgroundColor;
if (this.props.resultCount !== undefined && this.props.resultCount === 0 && this.props.queryLength > 0) {
backgroundColor = theme.warningBackgroundColor;
}
return (
@ -139,7 +130,7 @@ class NoteSearchBarComponent extends React.Component {
onKeyDown={this.searchInput_keyDown}
ref="searchInput"
type="text"
style={{ width: 200, marginRight: 5, backgroundColor: this.state.backgroundColor }}
style={{ width: 200, marginRight: 5, backgroundColor: backgroundColor }}
/>
{nextButton}
{previousButton}

View File

@ -90,6 +90,8 @@ class NoteTextComponent extends React.Component {
query: '',
selectedIndex: 0,
resultCount: 0,
lastQuery: '',
lastResultCount: 0,
};
this.state = {
@ -311,6 +313,9 @@ class NoteTextComponent extends React.Component {
localSearch: {
query: query,
selectedIndex: 0,
resultCount: undefined,
lastQuery: this.state.localSearch.query,
lastResultCount: this.state.localSearch.resultCount,
timestamp: Date.now(),
},
});
@ -1165,7 +1170,9 @@ class NoteTextComponent extends React.Component {
if (this.state.showLocalSearch) {
this.noteSearchBar_.current.wrappedInstance.focus();
} else {
this.setState({ showLocalSearch: true });
this.setState({
showLocalSearch: true,
localSearch: Object.assign({}, this.localSearchDefaultState) });
}
this.props.dispatch({
@ -2134,7 +2141,8 @@ class NoteTextComponent extends React.Component {
width: innerWidth,
borderTop: `1px solid ${theme.dividerColor}`,
}}
resultCount={this.state.localSearch.resultCount}
queryLength={this.state.localSearch.resultCount === undefined ? this.state.localSearch.lastQuery.length : this.state.localSearch.query.length}
resultCount={this.state.localSearch.resultCount === undefined ? this.state.localSearch.lastResultCount : this.state.localSearch.resultCount}
onChange={this.noteSearchBar_change}
onNext={this.noteSearchBar_next}
onPrevious={this.noteSearchBar_previous}