web2019/static/js/shop/options/components/SwitchLine.jsx

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}/>;
}