-
Notifications
You must be signed in to change notification settings - Fork 6
/
ResultsPerPage.tsx
59 lines (55 loc) · 1.73 KB
/
ResultsPerPage.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
56
57
58
59
import {FunctionComponent, useEffect, useState, useContext} from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import Typography from '@material-ui/core/Typography';
import {
buildResultsPerPage,
ResultsPerPage as HeadlessResultsPerPage,
} from '@coveo/headless';
import EngineContext from '../common/engineContext';
interface ResultsPerPageProps {
options: number[];
controller: HeadlessResultsPerPage;
}
const ResultsPerPageRenderer: FunctionComponent<ResultsPerPageProps> = (
props
) => {
const {controller, options} = props;
const [state, setState] = useState(controller.state);
useEffect(
() => controller.subscribe(() => setState(controller.state)),
[controller]
);
return (
<FormControl component="fieldset">
<Typography>Results per page</Typography>
<RadioGroup
row
value={state.numberOfResults}
onChange={(event) => {
controller.set(parseInt(event.target.value, 10));
}}
>
{options.map((numberOfResults) => (
<FormControlLabel
key={numberOfResults}
value={numberOfResults}
control={<Radio />}
label={numberOfResults}
/>
))}
</RadioGroup>
</FormControl>
);
};
const ResultsPerPage = () => {
const engine = useContext(EngineContext)!;
const options = [5, 10, 25];
const controller = buildResultsPerPage(engine, {
initialState: {numberOfResults: options[0]},
});
return <ResultsPerPageRenderer controller={controller} options={options} />;
};
export default ResultsPerPage;