Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable debouncing on search #4182

Merged
merged 4 commits into from
Jan 18, 2023
Merged

Disable debouncing on search #4182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
056eadb
Disable debouncing on search
thecalcc Jan 16, 2023
1bac878
Changes after review
thecalcc Jan 17, 2023
dc70ef3
Code cleanup
thecalcc Jan 17, 2023
323196a
Remove parentheses
thecalcc Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions scripts/core/ui/components/Form/SelectMetaTermsInput/SelectFieldPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,6 @@ export class SelectFieldPopup extends React.Component<any, any> {
minLength={1}
extendOnOpen={true}
ref={(node) => this.dom.search = node}
timeout={100}
allowCollapsed={false}
/>
</div>
Expand Down Expand Up @@ -347,7 +346,6 @@ export class SelectFieldPopup extends React.Component<any, any> {
minLength={1}
extendOnOpen={true}
ref={(node) => this.dom.search = node}
timeout={100}
allowCollapsed={false}
/>
)}
Expand Down
90 changes: 67 additions & 23 deletions scripts/core/ui/components/SearchBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import React from 'react';
import {DebounceInput} from 'react-debounce-input';
import {uniqueId} from 'lodash';
import './style.scss';
import {gettext} from 'core/utils';
import {ManualSearch} from './manual';
import {DebounceInput} from 'react-debounce-input';
import {IconButton} from 'superdesk-ui-framework/react';
import './style.scss';

interface IProps {
onSearch(queryString: string): void;
extendOnOpen?: boolean;
allowCollapsed?: boolean;
timeout?: number;
minLength?: number;
initialValue?: string;
debounced?: {
timeout: number;
};
}

interface IState {
Expand Down Expand Up @@ -85,14 +89,45 @@ export default class SearchBar extends React.Component<IProps, IState> {
}

render() {
const {timeout} = this.props;
const {debounced} = this.props;
const {searchBarExtended} = this.state;
const _uniqueId = this.state.uniqueId;
const minLength = this.props.minLength ? this.props.minLength : 2;
const removeButton: React.ReactNode = (
<button
type="button"
className="search-close visible"
onClick={this.resetSearch}
>
<i className="icon-remove-sign" />
</button>
);
const showButtons = searchBarExtended && this.state.searchInputValue.trim().length > 0;
const actionButtons: React.ReactNode = (
debounced != null && showButtons
? removeButton
: (
showButtons
? (
<>
{removeButton}

<IconButton
style="outline"
size="small"
ariaValue={gettext('Search')}
icon="chevron-right-thin"
onClick={() => this.props.onSearch(this.state.searchInputValue)}
/>
</>
)
: null
)
);

return (
<div className={'SearchBar flat-searchbar' + (searchBarExtended ? ' extended' : '')}>
<div className="search-handler">
<div className="search-handler" style={{alignItems: 'center'}}>
<label
htmlFor={_uniqueId}
className="trigger-icon"
Expand All @@ -101,24 +136,33 @@ export default class SearchBar extends React.Component<IProps, IState> {
>
<i className="icon-search" />
</label>
<DebounceInput
minLength={minLength}
debounceTimeout={timeout}
value={this.state.searchInputValue}
onChange={this.onSearchChange}
id={_uniqueId}
placeholder={gettext('Search')}
type="text"
/>
{searchBarExtended && this.state.searchInputValue.trim().length > 0 && (
<button
type="button"
className="search-close visible"
onClick={this.resetSearch}
>
<i className="icon-remove-sign" />
</button>
)}
{
debounced != null
? (
<>
<DebounceInput
minLength={minLength}
debounceTimeout={debounced?.timeout}
value={this.state.searchInputValue}
onChange={this.onSearchChange}
id={_uniqueId}
placeholder={gettext('Search')}
type="text"
/>

{actionButtons}
</>
)
: (
<ManualSearch
actionButtons={actionButtons}
onInputChange={(value) => this.setState({
searchInputValue: value,
})}
onSearch={() => this.props.onSearch(this.state.searchInputValue)}
/>
)
}
</div>
</div>
);
Expand Down
38 changes: 38 additions & 0 deletions scripts/core/ui/components/SearchBar/manual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import {gettext} from 'core/utils';

interface IProps {
onSearch(): void;
onInputChange(value: string): void;
actionButtons: React.ReactNode;
}

export class ManualSearch extends React.PureComponent<IProps> {
render(): React.ReactNode {
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%',
width: '100%',
}}
>
<input
onKeyUp={(e) => {
if (e.key === 'Enter') {
this.props.onSearch();
}
}}
onChange={(e) => this.props.onInputChange(e.target.value)}
type="text"
placeholder={gettext('Search...')}
/>

{this.props.actionButtons}
</div>
);
}
}