-
Notifications
You must be signed in to change notification settings - Fork 498
/
MenuSelect.tsx
87 lines (80 loc) · 1.92 KB
/
MenuSelect.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/** @jsx h */
import { h } from 'preact';
import cx from 'classnames';
import { find } from '../../lib/utils';
import Template from '../Template/Template';
import {
MenuSelectCSSClasses,
MenuSelectTemplates,
} from '../../widgets/menu-select/menu-select';
import { MenuRendererOptions } from '../../connectors/menu/connectMenu';
type MenuItem = {
/**
* The value of the menu item.
**/
value: string;
/**
* Human-readable value of the menu item.
**/
label: string;
/**
* Number of results matched after refinement is applied.
**/
count: number;
/**
* Indicates if the refinement is applied.
**/
isRefined: boolean;
};
type Props = {
cssClasses: MenuSelectCSSClasses;
items: MenuItem[];
refine: MenuRendererOptions['refine'];
templateProps: {
templates: MenuSelectTemplates;
};
};
function MenuSelect({ cssClasses, templateProps, items, refine }: Props) {
const { value: selectedValue } = find(items, item => item.isRefined) || {
value: '',
};
return (
<div
className={cx(cssClasses.root, {
[cssClasses.noRefinementRoot]: items.length === 0,
})}
>
<select
className={cssClasses.select}
value={selectedValue}
onChange={event => {
refine((event.target as HTMLSelectElement).value);
}}
>
<Template
{...templateProps}
templateKey="defaultOption"
rootTagName="option"
rootProps={{
value: '',
className: cssClasses.option,
}}
/>
{items.map(item => (
<Template
{...templateProps}
templateKey="item"
rootTagName="option"
rootProps={{
value: item.value,
className: cssClasses.option,
}}
key={item.value}
data={item}
/>
))}
</select>
</div>
);
}
export default MenuSelect;