-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
Select.js
68 lines (61 loc) · 2.11 KB
/
Select.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
64
65
66
67
68
import Component from '../Component';
import withAttr from '../utils/withAttr';
import classList from '../utils/classList';
import Icon from './Icon';
/**
* The `Select` component displays a <select> input, surrounded with some extra
* elements for styling. It accepts the following attrs:
*
* - `options` A map of option values to labels.
* - `onchange` A callback to run when the selected value is changed.
* - `value` The value of the selected option.
* - `disabled` Disabled state for the input.
* - `wrapperAttrs` A map of attrs to be passed to the DOM element wrapping the `<select>`
*
* Other attributes are passed directly to the `<select>` element rendered to the DOM.
*/
export default class Select extends Component {
view() {
const {
options,
onchange,
value,
disabled,
className,
class: _class,
// Destructure the `wrapperAttrs` object to extract the `className` for passing to `classList()`
// `= {}` prevents errors when `wrapperAttrs` is undefined
wrapperAttrs: { className: wrapperClassName, class: wrapperClass, ...wrapperAttrs } = {},
...domAttrs
} = this.attrs;
return (
<span className={classList('Select', wrapperClassName, wrapperClass)} {...wrapperAttrs}>
<select
className={classList('Select-input FormControl', className, _class)}
onchange={onchange ? withAttr('value', onchange.bind(this)) : undefined}
value={value}
disabled={disabled}
{...domAttrs}
>
{Object.keys(options).map((key) => {
const option = options[key];
let label;
let disabled = false;
if (typeof option === 'object' && option.label) {
label = option.label;
disabled = option.disabled ?? false;
} else {
label = option;
}
return (
<option value={key} disabled={disabled}>
{label}
</option>
);
})}
</select>
<Icon name="fas fa-sort" className="Select-caret" />
</span>
);
}
}