@ea-lab/reactive-json 0.0.0

package/lib/component/element/form/CheckBoxField.jsx

@@ -0,0 +1,215 @@
+import React, {useContext} from 'react';
+import Form from 'react-bootstrap/Form';
+import {propsDataLocationToPathAndValue} from "./formElementsCommon";
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {
+    evaluateAttributes,
+    evaluateTemplateValue,
+} from "../../../engine/TemplateSystem";
+import View from "../../../engine/View";
+
+const CheckBoxField = ({props, currentData, datafield, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const {updateData} = globalDataContext;
+
+    const attributes = evaluateAttributes(
+        {
+            attrs: props.attributes,
+            globalDataContext,
+            templateContext,
+            options: {
+                normalizeBeforeEvaluation: true,
+            },
+        });
+
+    let options;
+
+    const dynamicOptions = props.dynamicOptions ?? undefined;
+
+    if (dynamicOptions) {
+        // Build the options through the given data.
+        options = evaluateTemplateValue({valueToEvaluate: dynamicOptions, globalDataContext, templateContext}) ?? [];
+    } else {
+        options = props.options ?? [];
+    }
+
+    const controlType = props.controlType ?? undefined;
+
+    // This tells how to save the data when one or more inputs are available.
+    const isUsingSingleValueData = () => {
+        if (props.controlType === "radio") {
+            // Radios can only have a single value.
+            return true;
+        }
+
+        if (props.multiple !== undefined && props.multiple !== false) {
+            // Use the array structure.
+            return props.multiple;
+        }
+
+        // If the options length is > 1, we use the array structure.
+        return props.options?.length === 1;
+    };
+
+    const usesSingleValueData = isUsingSingleValueData();
+
+    // This is the field value when the data is not supplied on initialization.
+    const defaultFieldValue = props.defaultFieldValue ?? (!usesSingleValueData ? [] : undefined);
+
+    const {
+        formData: checkboxFormData,
+        formDataPath,
+    } = propsDataLocationToPathAndValue({
+        currentPath: path,
+        datafield,
+        dataLocation: props.dataLocation,
+        defaultValue: defaultFieldValue,
+        globalDataContext,
+        templateContext,
+    });
+
+    const changeValue = (e) => {
+        if (controlType === "radio") {
+            // When radio, use the "value" property.
+            // When the value is an empty string, we unset the value.
+            // Note: this could be made configurable, to keep the data key when the value is an empty string.
+            let valueToSet;
+
+            switch (e.currentTarget.value) {
+                case "":
+                    valueToSet = undefined;
+                    break;
+
+                case "true":
+                    valueToSet = true;
+                    break;
+
+                case "false":
+                    valueToSet = false;
+                    break;
+
+                case "null":
+                    valueToSet = null;
+                    break;
+
+                default:
+                    valueToSet = e.currentTarget.value;
+                    break;
+            }
+
+            updateData(valueToSet, formDataPath);
+            return;
+        }
+
+        if (usesSingleValueData) {
+            // Save the value directly.
+            updateData(e.currentTarget.checked, formDataPath);
+            return;
+        }
+
+        // Add the value or remove it from the array.
+        let formDataClone = JSON.parse(JSON.stringify(checkboxFormData));
+
+        if (typeof formDataClone !== "object") {
+            // Normalize the value with an object-like structure.
+            formDataClone = [formDataClone];
+        }
+
+        if (e.currentTarget.checked) {
+            // Add the item.
+            formDataClone = addCheckedValueToData(formDataClone, e.currentTarget.value);
+        } else {
+            // Remove the item.
+            formDataClone = removeCheckedValueFromData(formDataClone, e.currentTarget.value);
+        }
+
+        updateData(formDataClone, formDataPath);
+    }
+
+    return <ActionDependant {...props}>
+        <Form.Group {...attributes} controlId={Math.random().toString()}>
+            {options.map((option, i) => {
+                // The option value.
+                const finalOptionValue = typeof option.value === "string" ? evaluateTemplateValue({
+                    globalDataContext: globalDataContext,
+                    templateContext: templateContext,
+                    valueToEvaluate: option.value,
+                }) : option.value;
+
+                const optionAttributes = evaluateAttributes({attrs: option.attributes ?? [], templateContext, globalDataContext, options: {normalizeBeforeEvaluation: true}});
+
+                return <Form.Check
+                    {...optionAttributes}
+                    checked={isChecked(checkboxFormData, finalOptionValue)}
+                    key={i}
+                    label={<View
+                        currentData={currentData?.["options"]?.[i]?.["label"] ?? undefined}
+                        datafield={"label"}
+                        path={path + ".options." + i + ".label"}
+                        props={option.label}/>}
+                    id={`${Math.random()}`}
+                    name={path}
+                    onChange={changeValue}
+                    type={controlType}
+                    value={finalOptionValue}
+                />
+            })}
+        </Form.Group>
+    </ActionDependant>;
+}
+
+function isChecked(checkboxFormData, finalOptionValue) {
+    if (Array.isArray(checkboxFormData)) {
+        return checkboxFormData.includes(finalOptionValue);
+    }
+
+    if (typeof checkboxFormData === 'object') {
+        return Object.values(checkboxFormData).includes(finalOptionValue);
+    }
+
+    if (typeof checkboxFormData === "string") {
+        return checkboxFormData === finalOptionValue;
+    }
+
+    return checkboxFormData === finalOptionValue;
+}
+
+function addCheckedValueToData(checkboxFormData, optionValue) {
+    if (Array.isArray(checkboxFormData)) {
+        checkboxFormData.includes(optionValue) || checkboxFormData.push(optionValue);
+        return checkboxFormData;
+    }
+
+    if (typeof checkboxFormData === 'object') {
+        const arrayValuesCopy = Object.values(checkboxFormData);
+        arrayValuesCopy.includes(optionValue) || arrayValuesCopy.push(optionValue);
+        return arrayValuesCopy;
+    }
+
+    throw new Error('CheckboxField: the value to set is not properly initialized as an object or array.');
+}
+
+function removeCheckedValueFromData(checkboxFormData, optionValue) {
+    function removeIfIncluded(data, optionValue) {
+        data.includes(optionValue) && data.splice(data.indexOf(optionValue), 1);
+    }
+
+    if (Array.isArray(checkboxFormData)) {
+        removeIfIncluded(checkboxFormData, optionValue);
+        return checkboxFormData;
+    }
+
+    if (typeof checkboxFormData === 'object') {
+        const arrayValuesCopy = Object.values(checkboxFormData);
+        removeIfIncluded(arrayValuesCopy, optionValue);
+        return arrayValuesCopy;
+    }
+
+    throw new Error('CheckboxField: the value to set is not properly initialized as an object or array.');
+}
+
+export default CheckBoxField;

package/lib/component/element/form/DateField.jsx

@@ -0,0 +1,42 @@
+import Form from "react-bootstrap/Form";
+import ActionDependant from "../../../engine/Actions";
+import {useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {propsDataLocationToPathAndValue} from "./formElementsCommon";
+import {useContext} from "react";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+
+const DateField = (componentProps) => {
+    // TODO: type date & datetime-local support.
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const props = componentProps.props;
+
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    const {
+        formData,
+        formDataPath,
+    } = propsDataLocationToPathAndValue({
+        currentPath: componentProps.path,
+        datafield: componentProps.datafield,
+        dataLocation: props.dataLocation,
+        defaultValue: props.defaultFieldValue,
+        globalDataContext,
+        templateContext,
+    });
+
+    const onChange = (e) => {
+        globalDataContext.updateData(e.target.value, formDataPath);
+    };
+
+    return <ActionDependant {...props}>
+        <Form.Group {...attributes} controlId={Math.random().toString()}>
+            {props.label && (<Form.Label>{props.label}</Form.Label>)}
+            <Form.Control onChange={onChange} type={"datetime-local"} value={formData ?? ""}/>
+        </Form.Group>
+    </ActionDependant>;
+};
+
+export default DateField;

package/lib/component/element/form/NumberField.jsx

@@ -0,0 +1,29 @@
+import React, {useContext, useState} from 'react';
+import Form from 'react-bootstrap/Form';
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+
+const NumberField = ({props, currentData, datafield, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+
+    let [inputValue] = useState(currentData);
+
+    let attributes = props.attributes ?? {};
+
+    const {updateData} = globalDataContext;
+
+    const changeValue = (e) => {
+        updateData(e.currentTarget.value, path);
+    }
+
+    return (
+        <Form.Group className="mb-3" controlId={Math.random().toString()}>
+            <Form.Label>{props.label}</Form.Label>
+            <Form.Control onBlur={changeValue} type={"number"} {...attributes}
+                          defaultValue={inputValue !== "" ? inputValue : (props.default_value ?? "")}
+                          placeholder={props.label}/>
+
+        </Form.Group>
+    )
+}
+
+export default NumberField;

package/lib/component/element/form/SelectField.jsx

@@ -0,0 +1,130 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {dataLocationToPath, evaluateAttributes, evaluateTemplateValue} from "../../../engine/TemplateSystem";
+import {useContext} from 'react';
+import Form from 'react-bootstrap/Form';
+
+const SelectField = ({props, data, path, datafield}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const {updateData} = globalDataContext;
+
+    const dynamicOptions = props.dynamicOptions ?? undefined;
+
+    let options;
+
+    if (dynamicOptions) {
+        // Build the options through the given data.
+        options = evaluateTemplateValue({valueToEvaluate: dynamicOptions, globalDataContext, templateContext}) ?? [];
+    } else {
+        options = props.options ?? [];
+    }
+
+    let attributes = evaluateAttributes({
+        attrs: props.attributes ?? {},
+        globalDataContext,
+        templateContext,
+        options: {normalizeBeforeEvaluation: true}
+    });
+
+    const inputAttributes = evaluateAttributes({
+        attrs: props.inputAttributes ?? {},
+        globalDataContext,
+        templateContext,
+        options: {normalizeBeforeEvaluation: true}
+    });
+
+    // This is the data that contains the current value of SelectField.
+    let formData;
+
+    // This is the path that leads to the data.
+    let formDataPath;
+
+    // This is the field value when the data is not supplied on initialization.
+    const defaultFieldValue = props.defaultFieldValue ?? undefined;
+
+    const dataLocation = props.dataLocation ?? undefined;
+
+    if (dataLocation) {
+        // A custom data location has been specified.
+        formData = evaluateTemplateValue({
+            globalDataContext: globalDataContext,
+            templateContext: templateContext,
+            valueToEvaluate: dataLocation,
+        }) ?? defaultFieldValue;
+
+        formDataPath = dataLocationToPath({
+            dataLocation: dataLocation,
+            currentPath: path,
+            globalDataContext,
+            templateContext
+        });
+    } else {
+        // Use the template data.
+        if ((templateContext.templateData[datafield] ?? undefined) === undefined) {
+            // Initialize the data for this component.
+            templateContext.templateData = (typeof templateContext.templateData === "object") ? templateContext.templateData : {};
+            templateContext.templateData[datafield] = defaultFieldValue;
+        }
+
+        // The "form" data is located in the template context data,
+        // under the datafield key. (Dev note: this is maybe not the best way to handle this.)
+        formData = templateContext.templateData[datafield];
+
+        formDataPath = dataLocationToPath({dataLocation: "~." + datafield, currentPath: templateContext.templatePath});
+    }
+
+    const changeValue = (e) => {
+        let valueToSet;
+
+        switch (e.currentTarget.value) {
+            case "":
+                if (props.allowEmptyStringAsValue) {
+                    valueToSet = "";
+                } else {
+                    valueToSet = undefined;
+                }
+
+                break;
+
+            case "true":
+                valueToSet = true;
+                break;
+
+            case "false":
+                valueToSet = false;
+                break;
+
+            case "null":
+                valueToSet = null;
+                break;
+
+            default:
+                valueToSet = e.currentTarget.value;
+                break;
+        }
+
+        updateData(valueToSet, formDataPath);
+    }
+
+    return (
+        <ActionDependant {...props}>
+            <Form.Group {...attributes} controlId={Math.random().toString()}>
+                {props.label && <Form.Label>{props.label}</Form.Label>}
+                <Form.Select
+                    aria-label={props.label}
+                    onChange={changeValue}
+                    value={formData}
+                    {...inputAttributes}>
+                    {options.map((item, ind) => {
+                        return <option key={'opt' + ind} value={item.value}>{item.label}</option>;
+                    })}
+                </Form.Select>
+            </Form.Group>
+        </ActionDependant>
+    )
+}
+
+export default SelectField;

package/lib/component/element/form/TextAreaField.jsx

@@ -0,0 +1,48 @@
+import {useContext} from 'react';
+import Form from 'react-bootstrap/Form';
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import ActionDependant from "../../../engine/Actions";
+import TemplateContext from "../../../engine/TemplateContext";
+import {useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {propsDataLocationToPathAndValue} from "./formElementsCommon";
+
+const TextAreaField = ({props, datafield, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const attributes = useEvaluatedAttributes(props.attributes);
+    const inputAttributes = useEvaluatedAttributes(props.inputAttributes ?? []);
+
+    const {
+        formData,
+        formDataPath,
+    } = propsDataLocationToPathAndValue({
+        currentPath: path,
+        datafield: datafield,
+        dataLocation: props.dataLocation,
+        defaultValue: props.defaultFieldValue,
+        globalDataContext,
+        templateContext,
+    });
+
+    const onChange = (e) => {
+        globalDataContext.updateData(e.currentTarget.value, formDataPath);
+    };
+
+    return (
+        <ActionDependant {...props}>
+            <Form.Group {...attributes} controlId={Math.random().toString()}>
+                {props.label && <Form.Label>{props.label}</Form.Label>}
+                <Form.Control
+                    as={"textarea"}
+                    onChange={onChange}
+                    placeholder={props.placeholder}
+                    rows={props.rows ?? 3}
+                    value={formData ?? ""}
+                    {...inputAttributes}/>
+            </Form.Group>
+        </ActionDependant>
+    );
+}
+
+export default TextAreaField;

package/lib/component/element/form/TextField.jsx

@@ -0,0 +1,65 @@
+import {useContext} from 'react';
+import Form from 'react-bootstrap/Form';
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import ActionDependant from "../../../engine/Actions";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {propsDataLocationToPathAndValue} from "./formElementsCommon";
+
+const TextField = ({props, datafield, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const attributes = useEvaluatedAttributes(props.attributes);
+    const inputAttributes = useEvaluatedAttributes(props.inputAttributes ?? []);
+
+    const {
+        formData,
+        formDataPath,
+    } = propsDataLocationToPathAndValue({
+        currentPath: path,
+        datafield: datafield,
+        dataLocation: props.dataLocation,
+        defaultValue: props.defaultFieldValue,
+        globalDataContext,
+        templateContext,
+    });
+
+    const onChange = (e) => {
+        globalDataContext.updateData(e.currentTarget.value, formDataPath);
+    };
+
+    const maybeLabel = evaluateTemplateValue({
+        valueToEvaluate: props.label,
+        globalDataContext,
+        templateContext
+    });
+
+    const maybePlaceholder = evaluateTemplateValue({
+        valueToEvaluate: props.placeholder,
+        globalDataContext,
+        templateContext
+    });
+
+    const maybeInputType = evaluateTemplateValue({
+        valueToEvaluate: props.inputType,
+        globalDataContext,
+        templateContext
+    });
+
+    return (
+        <ActionDependant {...props}>
+            <Form.Group {...attributes} controlId={Math.random().toString()}>
+                {maybeLabel && <Form.Label>{maybeLabel}</Form.Label>}
+                <Form.Control
+                    onChange={onChange}
+                    placeholder={maybePlaceholder}
+                    type={maybeInputType ?? "text"}
+                    value={formData ?? ""}
+                    {...inputAttributes}/>
+            </Form.Group>
+        </ActionDependant>
+    );
+}
+
+export default TextField;

package/lib/component/element/form/formElementsCommon.jsx

@@ -0,0 +1,54 @@
+import {dataLocationToPath, evaluateTemplateValue} from "../../../engine/TemplateSystem";
+
+/**
+ * Gets the path and the data for the specified dataLocation and contexts.
+ *
+ * @param {string} currentPath The current path of the component calling this function.
+ * @param {string} datafield The datafield (field name) of the component calling this function.
+ * @param {string|undefined} dataLocation The dataLocation value set in the component structure.
+ * @param {any} defaultValue The default value set in the component structure.
+ * @param {{}} globalDataContext The global data context of the component calling this function.
+ * @param {{}} templateContext The template context of the component calling this function.
+ *
+ * @returns {{formDataPath: undefined, formData: undefined}}
+ */
+export const propsDataLocationToPathAndValue = ({
+                                                    currentPath,
+                                                    datafield,
+                                                    dataLocation,
+                                                    defaultValue,
+                                                    globalDataContext,
+                                                    templateContext
+                                                }) => {
+
+    const result = {
+        // This is the data that contains the current checked state.
+        formData: undefined, // This is the path that leads to the data.
+        formDataPath: undefined,
+    };
+
+    if (dataLocation && typeof dataLocation === "string") {
+        // A custom data location has been specified.
+        result.formData = evaluateTemplateValue({
+            globalDataContext: globalDataContext, templateContext: templateContext, valueToEvaluate: dataLocation,
+        }) ?? defaultValue;
+        result.formDataPath = dataLocationToPath({dataLocation: dataLocation, currentPath: currentPath, globalDataContext, templateContext});
+    } else {
+        // Use the template data.
+        if ((templateContext.templateData[datafield] ?? undefined) === undefined) {
+            // Initialize the data for this component.
+            templateContext.templateData = (typeof templateContext.templateData === "object") ? templateContext.templateData : {};
+            templateContext.templateData[datafield] = defaultValue;
+        }
+
+        // The data is located in the template context data,
+        // under the datafield key. (Dev note: this is maybe not the best way to handle this.)
+        result.formData = templateContext.templateData[datafield];
+
+        result.formDataPath = dataLocationToPath({
+            dataLocation: "~." + datafield, currentPath: templateContext.templatePath, globalDataContext, templateContext
+        });
+    }
+
+    return result;
+};

package/lib/component/element/html/AccordionItem.jsx

@@ -0,0 +1,42 @@
+import {Accordion as BsAccordion} from "react-bootstrap";
+import View from "../../../engine/View";
+import {useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import ActionDependant from "../../../engine/Actions";
+
+/**
+ * To use with the BsAccordion component.
+ *
+ * To use this, use the BsAccordion component, and add
+ * AccordionItem in the content.
+ *
+ * You can of course use the Switch component to map to
+ * dynamic data.
+ */
+const AccordionItem = ({props, path, currentData, datafield}) => {
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    return <ActionDependant {...props}>
+        <BsAccordion.Item {...attributes} eventKey={datafield} key={datafield}>
+            {props?.header
+                ? <BsAccordion.Header>
+                    <View
+                        props={props.header}
+                        path={path + ".header"}
+                        currentData={currentData?.["header"]}
+                        datafield={"header"}/>
+                </BsAccordion.Header>
+                : null}
+            {props?.body
+                ? <BsAccordion.Body>
+                    <View
+                        props={props.body}
+                        path={path + ".body"}
+                        currentData={currentData?.["body"]}
+                        datafield={"body"}/>
+                </BsAccordion.Body>
+                : null}
+        </BsAccordion.Item>
+    </ActionDependant>;
+}
+
+export default AccordionItem;