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