82 lines
2.0 KiB
React
82 lines
2.0 KiB
React
|
import React from 'react';
|
||
|
|
import Select from './Select.jsx';
|
||
|
|
import { addModuleItem } from '../service/dashboardService.js';
|
||
|
|
|
||
|
|
export default class AddSelectItem extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
value: '',
|
||
|
|
item: null,
|
||
|
|
};
|
||
|
|
|
||
|
|
this.onClick = this.onClick.bind(this);
|
||
|
|
this.onChange = this.onChange.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
if (this.props.value) {
|
||
|
|
const option = this.props.options.find(o => o.id === this.props.value);
|
||
|
|
this.setState({
|
||
|
|
value: this.props.value,
|
||
|
|
item: {
|
||
|
|
id: option.id,
|
||
|
|
name: option.name,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(props) {
|
||
|
|
if (props.value === this.state.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (props.value) {
|
||
|
|
const option = props.options.find(o => o.id === props.value);
|
||
|
|
this.setState({
|
||
|
|
value: props.value,
|
||
|
|
item: {
|
||
|
|
id: option.id,
|
||
|
|
name: option.name,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onChange(event) {
|
||
|
|
const option = event.target.selectedOptions[0];
|
||
|
|
this.setState({
|
||
|
|
value: option.value,
|
||
|
|
item: {
|
||
|
|
id: option.value,
|
||
|
|
name: option.dataset.name,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async onClick(event) {
|
||
|
|
if (this.props.onClick) {
|
||
|
|
this.props.onClick(event, this.state.item);
|
||
|
|
} else {
|
||
|
|
addModuleItem(this.props.module, this.props.setting, this.state.item, this.props.friendlyName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (<div>
|
||
|
|
{!this.props.hideLabel ? (<label className='label'>{this.props.text}</label>) : ''}
|
||
|
|
<p className='control has-addons'>
|
||
|
|
<span className={this.props.options.length === 0 ? 'select is-loading' : '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>
|
||
|
|
<input className='button add-module-item is-info' type='button' value='Add' onClick={this.onClick} />
|
||
|
|
</p>
|
||
|
|
</div>);
|
||
|
|
}
|
||
|
|
}
|