-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
Checkbox.tsx
65 lines (60 loc) · 2.07 KB
/
Checkbox.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
import Component, { ComponentAttrs } from '../Component';
import LoadingIndicator from './LoadingIndicator';
import classList from '../utils/classList';
import withAttr from '../utils/withAttr';
import type Mithril from 'mithril';
import Icon from './Icon';
export interface ICheckboxAttrs extends ComponentAttrs {
state?: boolean;
loading?: boolean;
disabled?: boolean;
onchange: (checked: boolean, component: Checkbox<this>) => void;
}
/**
* The `Checkbox` component defines a checkbox input.
*
* ### Attrs
*
* - `state` Whether or not the checkbox is checked.
* - `className` The class name for the root element.
* - `disabled` Whether or not the checkbox is disabled.
* - `loading` Whether or not the checkbox is loading.
* - `onchange` A callback to run when the checkbox is checked/unchecked.
* - `children` A text label to display next to the checkbox.
*/
export default class Checkbox<CustomAttrs extends ICheckboxAttrs = ICheckboxAttrs> extends Component<CustomAttrs> {
view(vnode: Mithril.Vnode<CustomAttrs, this>) {
const className = classList([
'Checkbox',
this.attrs.state ? 'on' : 'off',
this.attrs.className,
this.attrs.loading && 'loading',
this.attrs.disabled && 'disabled',
]);
return (
<label className={className}>
<input type="checkbox" checked={this.attrs.state} disabled={this.attrs.disabled} onchange={withAttr('checked', this.onchange.bind(this))} />
<div className="Checkbox-display" aria-hidden="true">
{this.getDisplay()}
</div>
{vnode.children}
</label>
);
}
/**
* Get the template for the checkbox's display (tick/cross icon).
*/
protected getDisplay(): Mithril.Children {
return this.attrs.loading ? (
<LoadingIndicator display="unset" size="small" />
) : (
<Icon name={this.attrs.state ? 'fas fa-check' : 'fas fa-times'} />
);
}
/**
* Run a callback when the state of the checkbox is changed.
*/
protected onchange(checked: boolean): void {
if (this.attrs.onchange) this.attrs.onchange(checked, this);
}
}