/
search.js
40 lines (38 loc) · 1000 Bytes
/
search.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useRef, memo } from '@wordpress/element';
import { SearchControl } from '@wordpress/components';
import { useDebouncedInput } from '@wordpress/compose';
const Search = memo( function Search( { label, view, onChangeView } ) {
const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
view.search
);
useEffect( () => {
setSearch( view.search );
}, [ view ] );
const onChangeViewRef = useRef( onChangeView );
useEffect( () => {
onChangeViewRef.current = onChangeView;
}, [ onChangeView ] );
useEffect( () => {
onChangeViewRef.current( {
...view,
page: 1,
search: debouncedSearch,
} );
}, [ debouncedSearch ] );
const searchLabel = label || __( 'Filter list' );
return (
<SearchControl
__nextHasNoMarginBottom
onChange={ setSearch }
value={ search }
label={ searchLabel }
placeholder={ searchLabel }
size="compact"
/>
);
} );
export default Search;