lucid-ui
Version:
A UI component library from AppNexus.
40 lines (39 loc) • 1.53 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { SingleSelect } from '../../../index';
const { Placeholder, Option } = SingleSelect;
export default createClass({
getInitialState() {
return {
selectedIndex: null,
selectedOptionName: null,
};
},
handleSelect(optionIndex, { props: { name } }) {
this.setState({
selectedIndex: optionIndex,
selectedOptionName: name,
});
},
render() {
return (React.createElement("section", null,
React.createElement(SingleSelect, { onSelect: this.handleSelect },
React.createElement(Placeholder, null, "Select Color"),
React.createElement(Option, { name: 'red' }, "Red"),
React.createElement(Option, { name: 'green' }, "Green"),
React.createElement(Option, { name: 'blue' }, "Blue")),
React.createElement("section", null,
React.createElement("p", null,
"Selected Index: ",
JSON.stringify(this.state.selectedIndex)),
React.createElement("p", null,
"Selected Option Name:",
' ',
JSON.stringify(this.state.selectedOptionName)))));
},
});
// begin-hide-from-docs
export const notes = `
Use this when you need to display different values within the dropdown and elsewhere on the screen after the user makes a selection.
`;
// end-hide-from-docs