const React = window.React; class Dropdown extends React.Component { constructor(props) { super(props); this.state = { closed: true, selected: props.defaultOption, onSelect: props.onSelect, } } open() { this.setState({closed: false}); } selectAndClose(selection) { this.setState({ closed: true, selected: selection, }) this.state.onSelect(selection); } close() { this.setState({closed: true}); } render() { // Currently selected option (includes dropdown arrow) const selectedOnClick = this.state.closed ? this.open : this.close; const selected = (
selectedOnClick.call(this)}> {this.state.selected} dropdown arrow
); // All options, not shown if dropdown is closed let options = []; let optionsWrapper = ; if (!this.state.closed) { for (const opt of this.props.options) { options.push(
this.selectAndClose.call(this, opt)}> {opt}
); } optionsWrapper = (
{options}
) } return (
this.close.call(this)}> {selected} {optionsWrapper}
); } } Dropdown.propTypes = { options: React.PropTypes.arrayOf(React.PropTypes.string), defaultOption: React.PropTypes.string, onSelect: React.PropTypes.func, } window.Dropdown = Dropdown;