web2019/static/js/shop_components.jsx

'use strict';

import React, {Component} from "react";
import jsonLogic from 'json-logic-js';
import {v4 as uuidv4} from 'uuid';

// https://stackoverflow.com/a/70511311
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

class Radio extends Component {
    constructor(props) {
        super(props);
        // Initialize the state object with the initial values from the props
        this.state = {
            target: props.target,
            outvar: props.outvar,
            variants: props.variants,
            variant: props.variants[0],
            id: props.id
        };

        // Bind the event handler to this
        this.handleClick = this.handleClick.bind(this);
        this.state.target(this.state.outvar, this.state.variant);
    }

    handleClick(variant) {
        console.log(variant);
        // Update the state object with the new value for outvar
        this.setState({
            ...this.state,
            variant: variant
        });
        this.state.target(this.state.outvar, variant);
    }

    render() {
        let key = this.state.id + this.state.outvar;
        return (
            <div className="shop-radio" key={this.state.id}>
                {this.props.title}
                {this.props.variants.map((variant, _) => (
                    <div className="form-check" key={key + variant}>
                        <input
                            className="form-check-input"
                            type="radio"
                            name={key}
                            id={key + variant}
                            checked={this.state.variant === variant}
                            onClick={() => this.handleClick(variant)}
                            onChange={() => this.handleClick(variant)}
                        />
                        <label className="form-check-label" htmlFor={key + variant}>
                            {variant}
                        </label>
                    </div>
                ))}
            </div>
        );
    }
}

function RadioWrapper(target, id, {title, variants, outvar}) {
    return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id}/>;
}


function MissingComponent(type, id) {
    //console.error("Missing component with type:", type)
    return <div key={type + id} style={{background: "red"}}>MISSING</div>
}

const componentsList = {
    "Radio": RadioWrapper,
    "Default": MissingComponent,
};


export default function ProcessOptions({options, data, target, id}) {
    let options_t = trueTypeOf(options);

    if (options_t === "array") {
        return Array.from(
            options.map((option_item, i) => ProcessOptions({
                options: option_item,
                data: data,
                target: target,
                id: id + i
            }))
        );
    } else if (options_t === "object") {
        if (
            trueTypeOf(options.type) === "string" &&
            trueTypeOf(options.args) === "object"
        ) {
            if (options.type in componentsList) {
                return componentsList[options.type](target, id + options.type, options.args);
            } else {
                return componentsList["Default"](options.type, id + "missing");
            }
        } else {
            return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
        }
    }
}