73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
'use strict';
|
|
|
|
import React, {useState} 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();
|
|
|
|
function Radio(target, {title, variants, outvar}) {
|
|
console.log(target)
|
|
function handleClick(variant) {
|
|
console.log(variant)
|
|
target[outvar] = variant;
|
|
//this.setState()
|
|
}
|
|
|
|
return (
|
|
<div className="shop-radio" key={uuidv4()}>
|
|
{title}
|
|
{variants.map((variant, _) => (
|
|
<div className="form-check" key={outvar + variant}>
|
|
<input
|
|
className="form-check-input"
|
|
type="radio"
|
|
name={outvar}
|
|
id={outvar + variant}
|
|
checked={target[outvar] === variant}
|
|
onClick={() => handleClick(variant)}
|
|
onChange={() => handleClick(variant)}
|
|
/>
|
|
<label className="form-check-label" htmlFor={outvar + variant}>
|
|
{variant}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MissingComponent(...args) {
|
|
console.error("Missing component with args:", args)
|
|
return <label style={{background: "red"}}>MISSING</label>
|
|
}
|
|
|
|
const componentsList = {
|
|
"Radio": Radio,
|
|
"Default": MissingComponent,
|
|
};
|
|
|
|
|
|
export default function ProcessOptions({options, data, target}) {
|
|
let options_t = trueTypeOf(options);
|
|
|
|
if (options_t === "array") {
|
|
return Array.from(
|
|
options.map((option_item, _) => ProcessOptions({options: option_item, data: data, target: target}))
|
|
);
|
|
} else if (options_t === "object") {
|
|
if (
|
|
trueTypeOf(options.type) === "string" &&
|
|
trueTypeOf(options.args) === "object"
|
|
) {
|
|
if (options.type in componentsList) {
|
|
return componentsList[options.type](target, options.args);
|
|
}else {
|
|
return componentsList["Default"](target, options.args);
|
|
}
|
|
} else {
|
|
return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target});
|
|
}
|
|
}
|
|
} |