/
Checkbox.tsx
120 lines (101 loc) · 3.45 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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import prefixClass from './utils/prefixClass';
import icBEM from './utils/icBEM';
import rowComp from './mixins/rowComp';
import './styles/Checkbox.scss';
import Icon from './Icon';
export const COMPONENT_NAME = prefixClass('checkbox');
const ROOT_BEM = icBEM(COMPONENT_NAME);
export const BEM = {
root: ROOT_BEM,
input: ROOT_BEM.element('input'),
button: ROOT_BEM.element('button'),
iconWrapper: ROOT_BEM.element('icon-wrapper'),
};
// @ts-expect-error ts-migrate(2322) FIXME: Property 'className' does not exist on type 'Intri... Remove this comment to see the full error message
export const CHECKBOX_BUTTON = <Icon type="empty" className={`${BEM.button}`} />;
type OwnProps = {
input?: any;
indeterminate?: boolean;
overrideButton?: React.ReactElement;
checked?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
onChange?: (...args: any[]) => any;
};
type Props = OwnProps & typeof Checkbox.defaultProps;
class Checkbox extends PureComponent<Props> {
static defaultProps = {
input: {},
indeterminate: false,
overrideButton: null,
checked: undefined,
defaultChecked: undefined,
disabled: false,
onChange: undefined
};
inputRef: any;
componentDidMount() {
this.updateInputIndeterminate();
}
componentDidUpdate(prevProps: Props) {
if (prevProps.indeterminate !== this.props.indeterminate) {
this.updateInputIndeterminate();
}
}
getInputRef() {
return this.inputRef;
}
updateInputIndeterminate() {
const inputNode = this.getInputRef();
inputNode.indeterminate = this.props.indeterminate;
}
renderCheckboxInput(inputProps, overrideButton) {
return (
// @ts-expect-error ts-migrate(2322) FIXME: Type 'BEMFactory' is not assignable to type 'strin... Remove this comment to see the full error message
<span className={BEM.iconWrapper}>
<input
ref={(ref) => { this.inputRef = ref; }}
type="checkbox"
className={BEM.input}
{...inputProps} />
{overrideButton || CHECKBOX_BUTTON}
</span>
);
}
render() {
const {
input,
indeterminate,
overrideButton,
// <input> props
checked,
defaultChecked,
disabled,
onChange,
// React props
// @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
className,
children,
...otherProps
} = this.props;
const inputProps = {
checked,
defaultChecked,
disabled,
onChange,
...input,
};
const rootClassName = classNames(className, COMPONENT_NAME);
return (
<div className={rootClassName} {...otherProps}>
{this.renderCheckboxInput(inputProps, overrideButton)}
{children}
</div>
);
}
}
// @ts-expect-error ts-migrate(4082) FIXME: Default export of the module has or is using priva... Remove this comment to see the full error message
export default rowComp()(Checkbox);
export { Checkbox as PureCheckbox };