| 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 |
120x
120x
120x
120x
27x
27x
27x
| import _ from 'lodash';
import React from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, findTypes, omitProps } from '../../util/component-types';
import Checkbox from '../Checkbox/Checkbox';
const cx = lucidClassNames.bind('&-CheckboxLabeled');
const {
any,
node,
object,
string,
} = React.PropTypes;
/**
* {"categories": ["controls", "toggles"], "extend": "Checkbox", "madeFrom": ["Checkbox"]}
*
* This is a composite of the `Checkbox` component and the native `label`
* element.
*/
const CheckboxLabeled = createClass({
displayName: 'CheckboxLabeled',
components: {
/*
* Renders a `<label>` for the `<Checkbox>`
*/
Label: createClass({
displayName: 'CheckboxLabeled.Label',
propName: 'Label',
propTypes: {
/**
* Used to identify the purpose of this checkbox to the user -- can
* be any renderable content.
*/
children: node,
},
}),
},
propTypes: {
...Checkbox.propTypes,
/**
* Appended to the component-specific class names set on the root
* element.
*/
className: string,
/**
* Passed through to the root element.
*/
style: object,
/**
* Child element whose children are used to identify the purpose of this
* checkbox to the user.
*/
Label: any,
},
getDefaultProps() {
return {
isIndeterminate: false,
isDisabled: false,
isSelected: false,
onSelect: _.noop,
};
},
render() {
const {
className,
isIndeterminate,
isDisabled,
isSelected,
onSelect,
style,
...passThroughs,
} = this.props;
const labelChildProps = _.first(_.map(findTypes(this.props, CheckboxLabeled.Label), 'props'));
return (
<label
className={cx('&', {
'&-is-disabled': isDisabled,
'&-is-selected': isIndeterminate || isSelected,
}, className)}
style={style}
>
<Checkbox
className={cx('&-Checkbox', className)}
isDisabled={isDisabled}
isIndeterminate={isIndeterminate}
isSelected={isSelected}
onSelect={onSelect}
{...omitProps(passThroughs, CheckboxLabeled)}
/>
<div
{...labelChildProps}
className={cx('&-label', _.get(labelChildProps, 'className', null))}
/>
</label>
);
},
});
export default CheckboxLabeled;
|