import React, {Component} from "react"; import {Tip} from "./Tip"; class Switch extends Component { constructor(props) { super(props); // Initialize the state object with the initial values from the props this.state = { checked: props.outvar in props.data ? !!(props.data[props.outvar]) : !!(props.fallback) }; // Bind the event handler to this this.handleClick = this.handleClick.bind(this); this.props.target.construct(this.props.outvar, this.state.checked); } handleClick() { // Update the state object with the new value for outvar let new_checked = !this.state.checked; this.setState({ checked: new_checked }); this.props.target.update(this.props.outvar, new_checked); } static getDerivedStateFromProps(props, current_state) { if (current_state.checked !== props.data[props.outvar]) { return { checked: props.data[props.outvar] } } return null } render() { let key = this.props.id + this.props.outvar; return ( <div className="shop-switch" key={this.props.id}> <div className="form-check form-switch" key={key}> <input className="form-check-input" type="checkbox" role="switch" id={key} checked={this.state.checked} onClick={this.handleClick} onChange={this.handleClick} /> <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}> {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>} {this.props.title} {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>} </label> </div> </div> ); } } export function SwitchWrapper(target, id, data, {title, fallback, outvar, icon, tip, classes}) { return <Switch target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id} id={id} data={data} classes={classes}/>; }