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