/
searchField.js
63 lines (52 loc) · 1.65 KB
/
searchField.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React, { useCallback } from 'react';
import { func, shape, string } from 'prop-types';
import { useFieldState, useFormApi } from 'informed';
import { Search as SearchIcon, X as ClearIcon } from 'react-feather';
import { useSearchParam } from '@magento/peregrine';
import Icon from '../Icon';
import TextInput from '../TextInput';
import Trigger from '../Trigger';
const clearIcon = <Icon src={ClearIcon} size={18} />;
const searchIcon = <Icon src={SearchIcon} size={18} />;
const SearchField = props => {
const { location, onChange, onFocus } = props;
const { value } = useFieldState('search_query');
const formApi = useFormApi();
const setValue = useCallback(
queryValue => {
// update search field
if (queryValue) {
formApi.setValue('search_query', queryValue);
}
// trigger the effects of clearing the field
if (typeof onChange === 'function') {
onChange('');
}
},
[formApi, onChange]
);
useSearchParam({ location, parameter: 'query', setValue });
const resetForm = useCallback(() => {
formApi.reset();
}, [formApi]);
const resetButton = value ? (
<Trigger action={resetForm}>{clearIcon}</Trigger>
) : null;
return (
<TextInput
after={resetButton}
before={searchIcon}
field="search_query"
onFocus={onFocus}
onValueChange={onChange}
/>
);
};
export default SearchField;
SearchField.propTypes = {
location: shape({
search: string
}).isRequired,
onChange: func,
onFocus: func
};