jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debounce search

Browse Source 
Summary:
Debouncing search to prevent triggering multiple searches, while typing.
Now, a search is only triggered, when the input hasn't changed for more than 200ms.
This affects all SearchableTables.

Reviewed By: passy

Differential Revision: D15855343

fbshipit-source-id: 261cf601249ac604c865ae10deb25d5c836f964a
This commit is contained in:
Daniel Büchele
2019-06-17 09:55:30 -07:00
committed by Facebook Github Bot
parent ee3473c42a
commit 5aaf0c4f29
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ui/components/searchable/Searchable.js
View File

@@ -17,6 +17,7 @@ import FlexBox from '../FlexBox.js';
import Glyph from '../Glyph.js'; import Glyph from '../Glyph.js';
import FilterToken from './FilterToken.js'; import FilterToken from './FilterToken.js';
import styled from '../../styled/index.js'; import styled from '../../styled/index.js';
import debounce from 'lodash.debounce';
const SearchBar = styled(Toolbar)({ const SearchBar = styled(Toolbar)({
height: 42, height: 42,
@@ -250,10 +251,12 @@ const Searchable = (
} }
}; };
onChangeSearchTerm = (e: SyntheticInputEvent<HTMLInputElement>) => onChangeSearchTerm = (e: SyntheticInputEvent<HTMLInputElement>) => {
this.setState({searchTerm: e.target.value});
this.matchTags(e.target.value, false); this.matchTags(e.target.value, false);
};
matchTags = (searchTerm: string, matchEnd: boolean) => { matchTags = debounce((searchTerm: string, matchEnd: boolean) => {
const filterPattern = matchEnd const filterPattern = matchEnd
? /([a-z][a-z0-9]*[!]?[:=][^\s]+)($|\s)/gi ? /([a-z][a-z0-9]*[!]?[:=][^\s]+)($|\s)/gi
: /([a-z][a-z0-9]*[!]?[:=][^\s]+)\s/gi; : /([a-z][a-z0-9]*[!]?[:=][^\s]+)\s/gi;
@@ -284,8 +287,7 @@ const Searchable = (
searchTerm = searchTerm.replace(filterPattern, ''); searchTerm = searchTerm.replace(filterPattern, '');
} }
this.setState({searchTerm}); }, 200);
};
setInputRef = (ref: ?HTMLInputElement) => { setInputRef = (ref: ?HTMLInputElement) => {
this._inputRef = ref; this._inputRef = ref;