forked from M-Labs/web2019
78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
import React, {Component} from "react";
|
|
import {Tip} from "./Tip";
|
|
|
|
class SwitchLine extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
// Initialize the state object with the initial values from the props
|
|
this.state = {
|
|
text: props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""),
|
|
checked: props.outvar in props.data ? props.data[props.outvar].checked : (props.fallback ? props.fallback.checked : false)
|
|
};
|
|
// Bind the event handler to this
|
|
this.handleText = this.handleText.bind(this);
|
|
this.handleCheck = this.handleCheck.bind(this);
|
|
this.props.target.construct(this.props.outvar, this.state);
|
|
}
|
|
|
|
handleText(element) {
|
|
let new_state = {
|
|
...this.state,
|
|
text: element.target.value
|
|
}
|
|
this.setState(new_state);
|
|
this.props.target.update(this.props.outvar, new_state);
|
|
}
|
|
|
|
handleCheck() {
|
|
// Update the state object with the new value for outvar
|
|
let new_state = {
|
|
...this.state,
|
|
checked: !this.state.checked
|
|
}
|
|
this.setState(new_state);
|
|
this.props.target.update(this.props.outvar, new_state);
|
|
}
|
|
|
|
static getDerivedStateFromProps(props, current_state) {
|
|
if (current_state.checked !== props.data[props.outvar].checked || current_state.text !== props.data[props.outvar].text) {
|
|
return {
|
|
checked: props.data[props.outvar].checked,
|
|
text: props.data[props.outvar].text,
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
render() {
|
|
let key = this.props.id + this.props.outvar;
|
|
return (
|
|
<div className="shop-switch-line" key={this.props.id}>
|
|
<div className="form-check form-switch" key={key}>
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id={key + "switch"}
|
|
checked={this.state.checked}
|
|
onClick={this.handleCheck}
|
|
onChange={this.handleCheck}
|
|
/>
|
|
<label className="form-check-label" htmlFor={key + "switch"}>
|
|
{this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
|
|
{this.props.title}
|
|
</label>
|
|
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
|
|
</div>
|
|
<input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
|
|
value={this.state.text} disabled={!this.state.checked}/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export function SwitchLineWrapper(target, id, data, {title, fallback, outvar, icon, tip}) {
|
|
return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id}
|
|
id={id} data={data}/>;
|
|
}
|