/
Checkbox.js
105 lines (96 loc) · 2.83 KB
/
Checkbox.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import styleShape from 'react-style-proptype';
import { themr } from 'react-css-themr';
import { CHECKBOX } from '../identifiers';
import rippleFactory from '../ripple/Ripple';
import checkFactory from './Check';
const factory = (Check) => {
class Checkbox extends Component {
static propTypes = {
checked: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
]),
name: PropTypes.string,
onChange: PropTypes.func,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
style: styleShape,
theme: PropTypes.shape({
disabled: PropTypes.string,
field: PropTypes.string,
input: PropTypes.string,
ripple: PropTypes.string,
}),
};
static defaultProps = {
checked: false,
className: '',
disabled: false,
};
handleToggle = (event) => {
if (event.pageX !== 0 && event.pageY !== 0) this.blur();
if (!this.props.disabled && this.props.onChange) {
this.props.onChange(!this.props.checked, event);
}
};
blur() {
if (this.inputNode) {
this.inputNode.blur();
}
}
focus() {
if (this.inputNode) {
this.inputNode.focus();
}
}
render() {
const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line
onMouseEnter, onMouseLeave, theme, ...others } = this.props;
const className = classnames(theme.field, {
[theme.disabled]: this.props.disabled,
}, this.props.className);
return (
<label
data-react-toolbox="checkbox"
className={className}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<input
{...others}
checked={checked}
className={theme.input}
disabled={disabled}
name={name}
onChange={() => {}}
onClick={this.handleToggle}
ref={(node) => { this.inputNode = node; }}
type="checkbox"
/>
<Check
checked={checked}
disabled={disabled}
rippleClassName={theme.ripple}
style={style}
theme={theme}
/>
{label ? <span data-react-toolbox="label" className={theme.text}>{label}</span> : null}
{children}
</label>
);
}
}
return Checkbox;
};
const Check = checkFactory(rippleFactory({ centered: true, spread: 2.6 }));
const Checkbox = factory(Check);
export default themr(CHECKBOX)(Checkbox);
export { factory as checkboxFactory };
export { Checkbox };