| 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 |
120x
120x
120x
120x
41x
41x
41x
| import _ from 'lodash';
import React from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import { createClass, findTypes, omitProps } from '../../util/component-types';
import RadioButton from '../RadioButton/RadioButton';
const cx = lucidClassNames.bind('&-RadioButtonLabeled');
const {
any,
node,
object,
string,
} = React.PropTypes;
/**
* {"categories": ["controls", "toggles"], "extend": "RadioButton", "madeFrom": ["RadioButton"]}
*
* This is a composite of the `RadioButton` component and the native `label`
* element.
*/
const RadioButtonLabeled = createClass({
displayName: 'RadioButtonLabeled',
components: {
Label: createClass({
displayName: 'RadioButtonLabeled.Label',
propName: 'Label',
propTypes: {
/**
* Used to identify the purpose of this radio button to the user --
* can be any renderable content.
*/
children: node,
},
}),
},
propTypes: {
...RadioButton.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
* radio button to the user.
*/
Label: any,
},
getDefaultProps() {
return {
isDisabled: false,
isSelected: false,
onSelect: _.noop,
};
},
render() {
const {
className,
isDisabled,
isSelected,
onSelect,
style,
...passThroughs,
} = this.props;
const labelChildProps = _.first(_.map(findTypes(this.props, RadioButtonLabeled.Label), 'props'));
return (
<label
className={cx('&', {
'&-is-disabled': isDisabled,
'&-is-selected': isSelected,
}, className)}
style={style}
>
<RadioButton
className={className}
isDisabled={isDisabled}
isSelected={isSelected}
onSelect={onSelect}
{...omitProps(passThroughs, RadioButtonLabeled)}
/>
<div
{...labelChildProps}
className={cx('&-label')}
/>
</label>
);
},
});
export default RadioButtonLabeled;
|