/
SearchInput.tsx
42 lines (37 loc) · 1.1 KB
/
SearchInput.tsx
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
import React, { useEffect } from 'react';
import {
unstable_useFormState as useFormState,
unstable_FormInitialState as initialFormState,
} from 'reakit/Form';
import GoSearch from 'react-icons/go/search';
import { SearchForm, SearchButton, Input } from './elements';
type V = Record<any, any>;
export interface ISearchInputProps
extends Omit<React.ComponentProps<typeof SearchForm>, 'baseId' | 'submit'> {
name?: string;
placeholder?: string;
onChange?: (values: V) => void;
onValidate?: initialFormState<V>['onValidate'];
onSubmit?: initialFormState<V>['onSubmit'];
}
export const SearchInput: React.FC<ISearchInputProps> = ({
name = `query`,
placeholder = `Search`,
onChange = () => {},
onValidate,
onSubmit,
...props
}) => {
const form = useFormState({ values: { [name]: '' }, onValidate, onSubmit });
useEffect(() => {
onChange(form.values);
}, [onChange, form.values]);
return (
<SearchForm {...form} {...props}>
<Input {...form} name={name} placeholder={placeholder} />
<SearchButton {...form}>
<GoSearch />
</SearchButton>
</SearchForm>
);
};