104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
'use strict';
|
|
|
|
import React, {Component} from "react";
|
|
import jsonLogic from 'json-logic-js';
|
|
|
|
// 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.outvar in props.data ? props.data[props.outvar] : 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, data, {title, variants, outvar}) {
|
|
return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id} data={data} />;
|
|
}
|
|
|
|
|
|
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, data, options.args);
|
|
} else {
|
|
return componentsList["Default"](options.type, id + "missing");
|
|
}
|
|
} else {
|
|
return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
|
|
}
|
|
}
|
|
} |