68 lines
2.0 KiB
React
68 lines
2.0 KiB
React
|
import React from 'react';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
export default class RichModuleCheckbox extends React.Component {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.state = {
|
||
|
|
isEnabled: false,
|
||
|
|
}
|
||
|
|
|
||
|
|
this.onChange = this.onChange.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.setState({ isEnabled: this.props.defaultValue });
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(props) {
|
||
|
|
if (props.defaultValue === this.state.isEnabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.setState({ isEnabled: props.defaultValue });
|
||
|
|
}
|
||
|
|
|
||
|
|
async onChange() {
|
||
|
|
this.props.onChange(this.props.identifier, !this.state.isEnabled);
|
||
|
|
this.setState({ isEnabled: !this.state.isEnabled });
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
// const params = { id: 123 };
|
||
|
|
const params = this.props.match.params;
|
||
|
|
const module = this.props.module;
|
||
|
|
let spanProps = {};
|
||
|
|
|
||
|
|
if (this.props.description) {
|
||
|
|
spanProps = {
|
||
|
|
className: 'hint--bottom hint--large hint--info hint--rounded',
|
||
|
|
'aria-label': this.props.description,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`control rich-module is-pulled-left ${this.props.className || ''}${this.props.disabled ? 'locked' : (this.state.isEnabled ? 'enabled' : 'disabled')}`}>
|
||
|
|
<span {...spanProps}>
|
||
|
|
<h4 className="title is-5" htmlFor={this.props.text}>{this.props.text}</h4>
|
||
|
|
<div className='command-toggle' onClick={this.onChange}>
|
||
|
|
<input
|
||
|
|
className=''
|
||
|
|
type='checkbox'
|
||
|
|
checked={this.state.isEnabled}
|
||
|
|
onChange={this.onChange} />
|
||
|
|
<label className='checkbox' htmlFor={this.props.text}></label>
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
{this.props.helpText ? (<p className="help-text">{this.props.helpText}</p>) : ''}
|
||
|
|
{(module.hasPartial || module.hasCommands) && (
|
||
|
|
<div className='controls'>
|
||
|
|
{module.hasPartial && (
|
||
|
|
<Link to={`/manage/${params.id}/modules/${module.partialId}`} className='button module-settings'>Settings</Link>)}
|
||
|
|
{module.hasCommands && (<Link to={`/manage/${params.id}/modules/${module.partialId}/commands`} className='button module-settings'>Commands</Link>)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|