-
Notifications
You must be signed in to change notification settings - Fork 6
/
SearchBox.tsx
55 lines (49 loc) · 1.45 KB
/
SearchBox.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
43
44
45
46
47
48
49
50
51
52
53
54
55
import {FunctionComponent, useEffect, useState, useContext} from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import {
buildSearchBox,
SearchBox as HeadlessSearchBox,
SearchBoxOptions,
} from '@coveo/headless';
import EngineContext from '../common/engineContext';
interface SearchBoxProps {
controller: HeadlessSearchBox;
}
const SearchBoxRenderer: FunctionComponent<SearchBoxProps> = (props) => {
const {controller} = props;
const [state, setState] = useState(controller.state);
useEffect(
() => controller.subscribe(() => setState(controller.state)),
[controller]
);
return (
<Autocomplete
inputValue={state.value}
onInputChange={(_, newInputValue) => {
controller.updateText(newInputValue);
}}
onChange={() => {
controller.submit();
}}
options={state.suggestions.map((suggestion) => suggestion.rawValue)}
freeSolo
style={{width: 'auto'}}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search"
variant="outlined"
size="small"
/>
)}
/>
);
};
const SearchBox = () => {
const options: SearchBoxOptions = {numberOfSuggestions: 8};
const engine = useContext(EngineContext)!;
const controller = buildSearchBox(engine, {options});
return <SearchBoxRenderer controller={controller} />;
};
export default SearchBox;