46 lines
1.1 KiB
React
46 lines
1.1 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
export default class Select extends React.Component {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.state = {
|
||
|
|
name: '',
|
||
|
|
value: '',
|
||
|
|
}
|
||
|
|
|
||
|
|
this.onChange = this.onChange.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.setState({ value: this.props.defaultValue });
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(props) {
|
||
|
|
this.setState({ value: props.defaultValue });
|
||
|
|
}
|
||
|
|
|
||
|
|
async onChange(event) {
|
||
|
|
const option = event.target.selectedOptions[0];
|
||
|
|
this.setState({ name: option.dataset.name, value: event.target.value });
|
||
|
|
if (this.props.onChange) {
|
||
|
|
this.props.onChange(event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (<div>
|
||
|
|
<div className='control'>
|
||
|
|
{!this.props.hideLabel ? (<label className='label'>{this.props.text}</label>) : ''}
|
||
|
|
<span className='select'>
|
||
|
|
<select className='module-setting-dropdown' value={this.state.value} onChange={this.onChange} disabled={this.props.disabled}>
|
||
|
|
<option>{this.props.defaultOption}</option>
|
||
|
|
{this.props.options.map(option => (
|
||
|
|
<option key={option.id} data-name={option.name} value={option.id}>{option.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>);
|
||
|
|
}
|
||
|
|
}
|