-
-
Notifications
You must be signed in to change notification settings - Fork 227
/
Checkbox.jsx
104 lines (91 loc) · 2.84 KB
/
Checkbox.jsx
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
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Cell from '../Cell';
import Button from '../Button';
import Icon from '../Icon';
class Checkbox extends PureComponent {
constructor(props) {
super(props);
this.state = {
checked: props.checked || props.defaultChecked || false,
};
this.onValueChange = this.onValueChange.bind(this);
}
componentWillReceiveProps(nextProps) {
if ('checked' in nextProps) {
this.setState({
checked: nextProps.checked || nextProps.defaultChecked || false,
});
}
}
onValueChange() {
const { disabled, onChange } = this.props;
if (disabled) {
return;
}
const checked = !this.state.checked;
this.setState({ checked });
typeof onChange === 'function' && onChange(checked);
}
render() {
const { prefixCls, className, theme, type, value, block, disabled, id, children } = this.props;
const { checked } = this.state;
const cls = classnames({
[`${prefixCls}`]: true,
[className]: !!className,
checked,
disabled,
});
if (type === 'cell') {
return (
<Cell disabled={disabled} description={checked ? <Icon type="right" theme={disabled ? null : theme} /> : null} onClick={() => {}}>
<input type="checkbox" className={`${prefixCls}-input`} value={value} disabled={disabled} checked={checked} onChange={this.onValueChange} />
{children}
</Cell>
);
}
if (type === 'button') {
return (
<Button className={cls} theme={theme} size="xs" block={block} bordered={!checked} disabled={disabled}>
<input type="checkbox" className={`${prefixCls}-input`} disabled={disabled} checked={checked} onChange={this.onValueChange} />
{children}
</Button>
);
}
return (
<div className={cls}>
<div className={`${prefixCls}-wrapper`}>
<span className={`${prefixCls}-inner`} />
{
children
? <span className={`${prefixCls}-text`}>{children}</span>
: null
}
<input id={id} type="checkbox" className={`${prefixCls}-input`} disabled={disabled} checked={checked} onChange={this.onValueChange} />
</div>
</div>
);
}
}
Checkbox.propTypes = {
prefixCls: PropTypes.string,
className: PropTypes.string,
theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
type: PropTypes.oneOf(['button', 'cell']),
checked: PropTypes.bool,
defaultChecked: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func,
};
Checkbox.defaultProps = {
prefixCls: 'za-checkbox',
className: null,
theme: 'primary',
type: null,
checked: false,
defaultChecked: false,
disabled: false,
onChange() {},
};
export default Checkbox;