lucid-ui
Version:
A UI component library from AppNexus.
46 lines (45 loc) • 2.2 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { RadioGroup, RadioButtonLabeled, SingleSelect } from '../../../index';
var style = {
marginRight: '15px'
};
var subSelection = {
display: 'block',
marginTop: '13px'
};
export default createClass({
getInitialState: function getInitialState() {
return {
height: null
};
},
handleSelectedTallSimon: function handleSelectedTallSimon() {
this.setState({
height: 'Tall Simon'
});
},
handleSelectedShortSimon: function handleSelectedShortSimon() {
this.setState({
height: 'Short Simon'
});
},
render: function render() {
return /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
style: style
}, /*#__PURE__*/React.createElement(RadioGroup.Label, null, "Alvin")), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
style: style
}, /*#__PURE__*/React.createElement(RadioGroup.Label, null, "Simon", /*#__PURE__*/React.createElement(RadioButtonLabeled, {
isSelected: this.state.height === 'Tall Simon',
onSelect: this.handleSelectedTallSimon
}, /*#__PURE__*/React.createElement(RadioButtonLabeled.Label, null, "Tall Simon")), /*#__PURE__*/React.createElement(RadioButtonLabeled, {
isSelected: this.state.height === 'Short Simon',
onSelect: this.handleSelectedShortSimon
}, /*#__PURE__*/React.createElement(RadioButtonLabeled.Label, null, "Short Simon")))), /*#__PURE__*/React.createElement(RadioGroup.RadioButton, {
style: style
}, /*#__PURE__*/React.createElement(RadioGroup.Label, null, "Theodore", /*#__PURE__*/React.createElement(SingleSelect, {
style: subSelection
}, /*#__PURE__*/React.createElement(SingleSelect.Option, null, "Tall Theo"), /*#__PURE__*/React.createElement(SingleSelect.Option, null, "Short Theo"), /*#__PURE__*/React.createElement(SingleSelect.Option, null, "Average height Theo")))));
}
}); // begin-hide-from-docs
export var notes = "\nYou can nest items in the `RadioGroup` for sub-selections. Please work with a designer to style and define states for sub-selections.\n"; // end-hide-from-docs