mirror of https://github.com/laurent22/joplin.git
Refactor in response to review comments.
Cache the information at the source, remove state updates during render.pull/2304/head^2
parent
b6db2bf2c5
commit
fad2ff674e
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue