'use strict'; import React, {Component} from "react"; import jsonLogic from 'json-logic-js'; import {useState} from 'react'; // 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 = { variant: props.outvar in props.data ? props.data[props.outvar] : props.variants[0], }; // Bind the event handler to this this.handleClick = this.handleClick.bind(this); this.props.target.construct(this.props.outvar, this.state.variant); } componentWillUnmount() { this.props.target.unmount(this.props.outvar); } handleClick(variant) { // Update the state object with the new value for outvar this.setState({ ...this.state, variant: variant }); this.props.target.update(this.props.outvar, variant); } render() { let key = this.props.id + this.props.outvar; return (
{this.props.title}
{this.props.variants.map((variant, _) => (
this.handleClick(variant)} onChange={() => this.handleClick(variant)} />
))}
); } } function RadioWrapper(target, id, data, {title, variants, outvar}) { return ; } class Switch extends Component { constructor(props) { super(props); // Initialize the state object with the initial values from the props this.state = { checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback) }; // Bind the event handler to this this.handleClick = this.handleClick.bind(this); this.props.target.construct(this.props.outvar, this.state.checked); } componentWillUnmount() { this.props.target.unmount(this.props.outvar); } handleClick() { // Update the state object with the new value for outvar let new_checked = !this.state.checked; this.setState({ checked: new_checked }); this.props.target.update(this.props.outvar, new_checked); } render() { let key = this.props.id + this.props.outvar; return (
); } } function SwitchWrapper(target, id, data, {title, fallback, outvar}) { return ; } 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 : "") }; // Bind the event handler to this this.handleClick = this.handleClick.bind(this); this.props.target.construct(this.props.outvar, this.state.text); } componentWillUnmount() { this.props.target.unmount(this.props.outvar); } handleClick(element) { let text = element.target.value; this.setState({ text: text }); this.props.target.update(this.props.outvar, text); } render() { let key = this.props.id + this.props.outvar; return (
); } } function LineWrapper(target, id, data, {title, fallback, outvar}) { return ; } 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); } componentWillUnmount() { this.props.target.unmount(this.props.outvar); } 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); } render() { let key = this.props.id + this.props.outvar; return (
); } } function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) { return ; } function UnimplementedComponent(type, id) { //console.error("Missing component with type:", type) return
UNIMPLEMENTED
} const componentsList = { "Radio": RadioWrapper, "Switch": SwitchWrapper, "Line": LineWrapper, "SwitchLine": SwitchLineWrapper, "Default": UnimplementedComponent, }; 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}); } } } export function CustomizeButton({options, data, target, id, big}) { const [show, setShow] = useState(false); let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard") const handleClick = (event) => { setShow(!show); }; return (
); } export function CustomizeData({id, data}) { const [show, setShow] = useState(false); const [position, setPosition] = useState({x: 0, y: 0}); const handleClick = (event) => { setPosition({x: event.clientX, y: event.clientY}); setShow(!show); }; const stringify = (value) => { let value_type = trueTypeOf(value); if (value_type === "string") { return value; } else if (value_type === "object") { if (value.checked === false) { return "off"; } else if (value.checked === true && value.text) { return value.text; } } return JSON.stringify(value); } return (
{Array.from(Object.entries(data).map(([key, value], _) => { return (

{key}: {stringify(value)}

); }))}
); }