-
Notifications
You must be signed in to change notification settings - Fork 114
/
CheckboxPresenter.js
130 lines (120 loc) · 2.84 KB
/
CheckboxPresenter.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { generateId } from "@hig/utils";
import CheckPresenter from "./CheckPresenter";
import "./CheckboxPresenter.scss";
export default class CheckboxPresenter extends Component {
static propTypes = {
/**
* Checks the checkbox
*/
checked: PropTypes.bool,
/**
* Prevents user actions on the checkbox
*/
disabled: PropTypes.bool,
/**
* Sets indeterminate state for checkbox
*/
indeterminate: PropTypes.bool,
/**
* Text identifying the field
*/
label: PropTypes.string,
/**
* The name of the checkbox as submitted with a form
*/
name: PropTypes.string,
/**
* Called when user moves focus from the field
*/
onBlur: PropTypes.func,
/**
* Called when the checkbox is changed
*/
onChange: PropTypes.func,
/**
* Called when user clicks on the checkbox
*/
onClick: PropTypes.func,
/**
* Called when user puts focus on the field
*/
onFocus: PropTypes.func,
/**
* Marks the field as required, text shown to explain requirement
*/
required: PropTypes.string,
/**
* Value submitted with a form if checked
*/
value: PropTypes.string
};
static defaultProps = {
checked: false,
disabled: false,
indeterminate: false,
name: "checkbox",
value: "value"
};
setIndeterminate = input => {
if (input) {
// Workaround for https://github.com/facebook/react/issues/1798
// eslint-disable-next-line no-param-reassign
input.indeterminate = this.props.indeterminate;
}
};
id = generateId("checkbox");
render() {
const {
checked,
disabled,
indeterminate,
label,
name,
onBlur,
onChange,
onClick,
onFocus,
required,
value
} = this.props;
const labelClasses = cx(["hig__checkbox__label"]);
const wrapperClasses = cx([
"hig__checkbox",
"hig__checkbox--checkbox",
{
"hig__checkbox--required": required,
"hig__checkbox--checked": checked
}
]);
const { id } = this;
return (
<div className={wrapperClasses}>
<input
id={id}
checked={checked}
className="hig__checkbox__input"
disabled={disabled}
name={name}
onBlur={onBlur}
onChange={onChange}
onClick={onClick}
onFocus={onFocus}
ref={this.setIndeterminate}
type="checkbox"
value={value}
/>
<CheckPresenter
checked={checked}
disabled={disabled}
indeterminate={indeterminate}
/>
<label htmlFor={id} className={labelClasses}>
{label}
</label>
</div>
);
}
}