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

import React, {Component} from "react";
import {Tip} from "./Tip";
import {Validation} from "../validation";

class Line 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] : (props.fallback ? props.fallback : ""),
            valid: true
        };
        // Bind the event handler to this
        this.handleChange = this.handleChange.bind(this);
        this.props.target.construct(this.props.outvar, this.state.text);
    }

    handleChange(element) {
        let text = element.target.value;
        this.setState({
            text: text,
            valid: this.props.validator ? this.props.validator(text) : true
        });
        this.props.target.update(this.props.outvar, text);
    }

    static getDerivedStateFromProps(props, current_state) {
        if (current_state.text !== props.data[props.outvar]) {
            return {
                text: props.data[props.outvar]
            }
        }
        return null
    }

    render() {
        let key = this.props.id + this.props.outvar;
        return (
            <div className="shop-line" key={this.props.id}>
                <label htmlFor={key} className="form-label">
                    {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}/>}
                <input type="text" className={`form-control form-control-sm ${this.state.valid ? "" : "options-invalid"}`} id={key} onChange={this.handleChange}
                       value={this.state.text}/>
            </div>
        );
    }
}

export function LineWrapper(target, id, data, {title, fallback, outvar, icon, tip, classes, validator}) {
    return <Line target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id}
                 id={id} data={data} classes={classes} validator={validator && Validation[validator.name](validator.params)}/>;
}