@ea-lab/reactive-json 0.0.0

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

@@ -0,0 +1,307 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue} from "../../../engine/TemplateSystem";
+import View from "../../../engine/View";
+import {propsDataLocationToPathAndValue} from "../form/formElementsCommon";
+// clsx is included in dnd-kit-sortable-tree.
+import clsx from "clsx";
+import {FolderTreeItemWrapper} from "dnd-kit-sortable-tree";
+import {SortableTree} from "dnd-kit-sortable-tree";
+import {cloneDeep} from "lodash";
+import React, {forwardRef, useContext} from "react";
+
+const FolderSortableTree = ({props, path, datafield}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    let {
+        formData: treeData,
+        formDataPath: treeDataPath,
+    } = propsDataLocationToPathAndValue({
+        currentPath: path,
+        datafield: datafield,
+        dataLocation: props.dataLocation,
+        defaultValue: props.defaultFieldValue,
+        globalDataContext,
+        templateContext,
+    });
+
+    if (treeData === undefined) {
+        // Empty tree data.
+        return null;
+    }
+
+    /**
+     * Template (the usual structure given to View props) that will be used for each tree item.
+     *
+     * @type {*|null}
+     */
+    const itemTemplate = props.itemTemplate ?? null;
+
+    /**
+     * This value is needed when the user wants to limit the data rendered in this tree.
+     *
+     * @type {string|undefined|*}
+     */
+    const treeRootPath = evaluateTemplateValue({
+        valueToEvaluate: props.treeRootPath ?? undefined,
+        globalDataContext,
+        templateContext
+    });
+
+    /**
+     * Sets the maximum depth. Optional.
+     *
+     * "maxDepth" is not a native SortableTree option;
+     * that is why it is not under the sortableTreeOptions key.
+     * Please note that it will not fix the data until a drag and drop interaction.
+     *
+     * @type {number}
+     */
+    const maxDepth = props.maxDepth;
+
+    /**
+     * Tells if the given maxDepth is expressed in absolute or relative base.
+     *
+     * If false, the maxDepth will be used to limit the depth relative to the tree root item
+     * determined by treeRootItem. If true, the depth will be limited starting from the root
+     * item given by treeData.
+     *
+     * @type {boolean}
+     */
+    const maxDepthIsAbsolute = (typeof treeRootPath !== "string") ? true : (props.maxDepthIsAbsolute ?? true);
+
+    /**
+     * Tells if we want to keep the base item when "treeRootPath" is defined.
+     *
+     * Set this to true to keep in the tree the item
+     * that "treeRootPath" (if set) will use as the tree root.
+     * When false, the base tree items will be the
+     * children of this base item instead.
+     *
+     * @type {boolean}
+     */
+    const keepBaseItem = props.keepBaseItem ?? false;
+
+    /*
+     * Used by the max depth limiter and the trees filtered by treeRootPath.
+     */
+    let baseDepth = 0;
+
+    /*
+     * Useful when the treeRootPath option is active.
+     * This is the item id that will be set back during the "onItemsChanged" event
+     * on the base elements.
+     */
+    let baseParentId = null;
+
+    let baseItemIndex = undefined;
+
+    if (typeof treeRootPath === "string" && treeRootPath.length > 0) {
+        // A tree root path has been specified.
+        const pathSplitted = treeRootPath.split(".");
+
+        let baseParentId_previous = baseParentId;
+        let treeData_previous = treeData;
+        let treeDataPath_previous = treeDataPath;
+
+        while (pathSplitted.length > 0) {
+            const index = Number.parseInt(pathSplitted.shift());
+
+            if (Number.isNaN(index)) {
+                // This value is invalid. Do not even try to load the tree.
+                return null;
+            }
+
+            // The "previous" values are used for the "keepBaseItem" option.
+            baseParentId_previous = treeData?.["id"] ?? null;
+            treeData_previous = treeData;
+            treeDataPath_previous = treeDataPath;
+            baseItemIndex = index;
+
+            baseParentId = treeData[index]?.["id"];
+            treeData = treeData[index]?.["children"] ?? undefined;
+            treeDataPath = treeDataPath + "." + index + ".children";
+
+            if (treeData === undefined) {
+                // No tree to render.
+                return null;
+            }
+
+            ++baseDepth;
+        }
+
+        if (keepBaseItem) {
+            // Use the "previous" values.
+            baseParentId = baseParentId_previous;
+            treeData = treeData_previous;
+            treeDataPath = treeDataPath_previous;
+
+            // Remove all items but the one identified by "indexToKeep".
+            // This item will be indexed at 0 for SortableTree.
+            treeData = [treeData[baseItemIndex]];
+        }
+    }
+
+    const onItemsChanged = (e) => {
+        let finalData = e;
+        let finalDataPath = treeDataPath;
+
+        if (baseDepth > 0) {
+            // Fix the depths of all the items by adding baseDepth.
+            // Also fix the parentId if we have the treeRootPath option active.
+            finalData = cloneDeep(finalData);
+
+            const recursiveFixer = (it, currentDepth = 0) => {
+                if (currentDepth === 0) {
+                    it.parentId = baseParentId;
+                }
+
+                it.depth += baseDepth;
+
+                it.children?.forEach((child) => {
+                    recursiveFixer(child, currentDepth + 1);
+                });
+            };
+
+            finalData.forEach((child) => {
+                recursiveFixer(child, 0);
+            });
+        }
+
+        if ((treeRootPath !== undefined) && keepBaseItem) {
+            // We are in a partial tree configuration,
+            // and this tree has the base item kept in the hierarchy.
+            // Fix the data and paths.
+            // We take the first and only item.
+            finalData = e[0];
+            finalDataPath = treeDataPath + "." + baseItemIndex;
+        }
+
+        globalDataContext.updateData(finalData, finalDataPath);
+    }
+
+    const GenericTreeItemComponent = forwardRef((props, ref) => {
+        const finalCurrentData = props.item.value ?? {};
+
+        // Rebuild the data path by inspecting the parents.
+        const parentsIndices = [];
+
+        let itemToInspect = props.item;
+        parentsIndices.push(itemToInspect.index);
+
+        while (itemToInspect.parent) {
+            parentsIndices.push("children");
+            itemToInspect = itemToInspect.parent;
+            parentsIndices.push(itemToInspect.index);
+        }
+
+        // Reverse the order.
+        parentsIndices.reverse();
+
+        // This is the path leading to the "value" key excluded.
+        const finalValuePath = treeDataPath + "." + parentsIndices.join(".");
+
+        // This is the full path, "value" included.
+        const finalDataPath = finalValuePath + ".value";
+
+        finalCurrentData._treeItemDepth = props.item.depth;
+        finalCurrentData._treeItemIndex = props.item.index;
+        finalCurrentData._treeItemIndex1 = props.item.index + 1;
+
+        // Put the collapse button into the template data.
+        // This is the stylable button which serves as a collapse switch.
+        // The implementation is taken directly from the FolderTreeItemWrapper component.
+        // We can then include the collapse button in the item
+        // thanks to the SortableTreeItemCollapseButton component.
+        const sortableTreeData = {};
+
+        sortableTreeData._treeAddCollapseButton = () => (
+            !!props.onCollapse && !!props.childCount &&
+            <button
+                onClick={(e) => {
+                    e.preventDefault();
+                    props.onCollapse?.();
+                }}
+                className={clsx(
+                    'dnd-sortable-tree_folder_tree-item-collapse_button',
+                    props.collapsed &&
+                    'dnd-sortable-tree_folder_tree-item-collapse_button-collapsed'
+                )}/>
+        );
+
+        if (maxDepth) {
+            // A maximum depth has been defined for this tree.
+            if (maxDepthIsAbsolute) {
+                props.item.canHaveChildren = (baseDepth + props.item.depth) < maxDepth;
+            } else {
+                props.item.canHaveChildren = (props.item.depth) < maxDepth;
+            }
+        }
+
+        return (
+            <FolderTreeItemWrapper
+                {...props}
+                data-htmlbuilder-tree-item-children-count={props.childCount || "0"}
+                data-htmlbuilder-tree-item-collapsed={props.collapsed}
+                data-htmlbuilder-tree-item-depth={props.item.depth}
+                data-htmlbuilder-tree-item-depth-list={getDepthAsList(props.item.depth)}
+                data-htmlbuilder-tree-item-index={props.item.index}
+                data-htmlbuilder-tree-item-index1={props.item.index + 1}
+                data-htmlbuilder-tree-item-is-last={props.isLast}
+                ref={ref}>
+                <TemplateContext.Provider value={{
+                    templateData: finalCurrentData,
+                    templatePath: finalDataPath,
+                    sortableTreeData: sortableTreeData
+                }}>
+                    <View
+                        props={itemTemplate}
+                        currentData={finalCurrentData}
+                    />
+                </TemplateContext.Provider>
+            </FolderTreeItemWrapper>
+        );
+    });
+
+    // Deep copy because SortableTree seems to directly edit the data.
+    const clone = cloneDeep(treeData);
+
+    // Additional properties for SortableTree.
+    const sortableTreeOptions = props.sortableTreeOptions ?? {};
+
+    return (
+        <ActionDependant {...props}>
+            <SortableTree
+                {...sortableTreeOptions}
+                items={clone}
+                onItemsChanged={onItemsChanged}
+                TreeItemComponent={GenericTreeItemComponent}/>
+        </ActionDependant>
+    );
+};
+
+/**
+ * Builds a list of depths such as 4 => "0 1 2 3 4".
+ *
+ * This can be used as an attribute value, for the CSS word selector "~=".
+ * E.g.: [data-htmlbuilder-tree-item-depth-list~=3].
+ *
+ * @param {int} itemDepth The item depth.
+ *
+ * @returns {string} The string of depths.
+ */
+function getDepthAsList(itemDepth) {
+    const depthAsList = [];
+    let remainingDepth = itemDepth ?? 0;
+
+    while (remainingDepth >= 0) {
+        depthAsList.push(remainingDepth);
+        --remainingDepth;
+    }
+
+    return depthAsList.reverse().join(" ");
+}
+
+export default FolderSortableTree;

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

@@ -0,0 +1,118 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue} from "../../../engine/TemplateSystem";
+import {useContext} from "react";
+
+/**
+ * Transforms a number into a numeral of a specific language: roman, upper latin, lower latin, ... and custom.
+ */
+const FormatNumeral = ({props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    let formatted = false;
+
+    if (props.content !== undefined) {
+        const evaluated = evaluateTemplateValue({valueToEvaluate: props.content, globalDataContext, templateContext});
+
+        switch (props.format) {
+            case "roman-upper":
+                formatted = convertArabicToRoman(evaluated);
+                break;
+
+            case "roman-lower":
+                formatted = convertArabicToRoman(evaluated, true);
+                break;
+
+            case "latin-upper":
+                formatted = convertArabicToLatinLetters(evaluated);
+                break;
+
+            case "latin-lower":
+                formatted = convertArabicToLatinLetters(evaluated, true);
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    return (
+        <ActionDependant {...props}>
+            <>
+                {(formatted !== false) && formatted}
+            </>
+        </ActionDependant>
+    );
+};
+
+/**
+ * Converts an arabic number to latin letters.
+ *
+ * Implementation inspired by: https://stackoverflow.com/a/11090169.
+ *
+ * @param number The number to convert.
+ * @param asLowerCase Set to true for lowercase.
+ *
+ * @returns {*|string|number|false} Number in roman counting, or false if invalid.
+ */
+function convertArabicToLatinLetters(number, asLowerCase = false) {
+    if (number < 1) {
+        return false;
+    }
+
+    let mod = number % 26,
+        pow = number / 26 | 0,
+        out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z');
+
+    const letters = pow ? convertArabicToLatinLetters(pow) + out : out;
+
+    return asLowerCase ? letters.toLowerCase() : letters;
+}
+
+/**
+ * Converts an arabic number to roman conuting.
+ *
+ * Implementation inspired by: https://www.30secondsofcode.org/js/s/to-roman-numeral/.
+ *
+ * Added the lowercase option.
+ *
+ * @param number The number to convert.
+ * @param asLowercase Set to true for lowercase.
+ *
+ * @returns {number|string|false} Number in roman counting, or false if invalid.
+ */
+function convertArabicToRoman(number, asLowercase = false) {
+    if (number < 1) {
+        return false;
+    }
+
+    const lookup = [
+        ['M', 1000],
+        ['CM', 900],
+        ['D', 500],
+        ['CD', 400],
+        ['C', 100],
+        ['XC', 90],
+        ['L', 50],
+        ['XL', 40],
+        ['X', 10],
+        ['IX', 9],
+        ['V', 5],
+        ['IV', 4],
+        ['I', 1],
+    ];
+
+    const uppercase = lookup.reduce(
+        (acc, [k, v]) => {
+            acc += k.repeat(Math.floor(number / v));
+            number = number % v;
+            return acc;
+        },
+        '');
+
+    return asLowercase ? uppercase.toLowerCase() : uppercase;
+}
+
+export default FormatNumeral;

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

@@ -0,0 +1,107 @@
+import {evaluateAttributes} from "../../../engine/TemplateSystem";
+import View from "../../../engine/View";
+import ActionDependant from "../../../engine/Actions";
+import {useContext} from "react";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+
+export const normalizeAttributesForReactJsx = (maybeAttributesObj) => {
+    if (typeof maybeAttributesObj !== "object" || Object.keys(maybeAttributesObj).length === 0) {
+        // Not a valid attributes object.
+        return {};
+    }
+
+    const mapping = {
+        "class": "className",
+        // TODO: checked to defaultChecked seems incorrect. Commented out for removal.
+        // "checked": "defaultChecked",
+    };
+
+    // Recreate a shallow copy with the normalized attribute keys.
+    const attributesObj = {};
+
+    for (const [attributeName, attributeValue] of Object.entries(maybeAttributesObj)) {
+        const finalAttributeName = mapping.hasOwnProperty(attributeName)
+            ? mapping[attributeName]
+            : attributeName;
+        attributesObj[finalAttributeName] = attributeValue;
+    }
+
+    return attributesObj;
+};
+
+const Html = ({props, currentData, datafield, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const Tag = `${props.tag}`;
+    const extra = props.extra ?? {};
+
+    // We need to alter the incoming attributes.
+    // Normalize the attributes for JSX.
+    const attrs = normalizeAttributesForReactJsx(props.attributes);
+    const attrsFromCurrentData = normalizeAttributesForReactJsx(currentData.attributes);
+
+    // Infer the props (template) attributes with the data attributes.
+    for (const attrName of Object.keys(attrsFromCurrentData)) {
+        if (attrName.charAt(0) === '+') {
+            // Append to the props attribute value.
+            const finalAttributeName = attrName.substring(1);
+            attrs[finalAttributeName] = (attrs[finalAttributeName] ?? "").length > 0
+                // Append using a space.
+                ? " " + attrsFromCurrentData[attrName]
+                // Set directly.
+                : attrsFromCurrentData[attrName];
+            continue;
+        }
+
+        // Set the props attribute value directly.
+        attrs[attrName] = attrsFromCurrentData[attrName];
+    }
+
+    const evaluatedAttrs = evaluateAttributes({attrs, globalDataContext, templateContext});
+
+    // console.log({
+    //     "cpn": "Html",
+    //     "props": props,
+    //     "currentData": currentData,
+    //     "datafield": datafield,
+    //     "path": path,
+    //     "finalAttrs": attrs,
+    // });
+
+    const isVoidTag = (tag) => {
+        const voidTagList = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
+        return tag && (voidTagList.indexOf(tag) !== -1);
+    };
+
+    return <ActionDependant {...props}>
+        {isVoidTag(props.tag)
+            ? <>
+                <Tag {...evaluatedAttrs}/>
+                {Object.keys(extra).length ? (
+                    <View
+                        props={extra}
+                    />
+                ) : ("")}
+            </>
+            : <>
+                <Tag {...evaluatedAttrs}>
+                    {props.content &&
+                        (<View
+                            currentData={currentData.content ?? undefined}
+                            datafield={"content"}
+                            path={path + ".content"}
+                            props={props.content}
+                        />)}
+                </Tag>
+                {Object.keys(extra).length ? (
+                    <View
+                        props={extra}
+                    />
+                ) : ("")}
+            </>}
+    </ActionDependant>;
+}
+
+export default Html;

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

@@ -0,0 +1,89 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue} from "../../../engine/TemplateSystem";
+import View from "../../../engine/View";
+import {useContext} from "react";
+
+/**
+ * Shows the label associated to a value.
+ *
+ * Uses an option-like structure as data source.
+ * Thus, it's compatible with SelectField, CheckBoxField...
+ *
+ * E.g.: [{"label": "Public name", "value": "option value"}].
+ *
+ * @param currentData
+ * @param datafield
+ * @param path
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LabelFromValue = ({currentData, datafield, path, props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    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 ?? [];
+    }
+
+    // This is the data that contains the current value of this component.
+    let formData;
+
+    // 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;
+    } 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];
+    }
+
+    let finalValue = options.find((option) => option.value === formData);
+
+    if (!finalValue || !finalValue.label) {
+        if (!formData) {
+            // Nothing to show.
+            return null;
+        }
+
+        // Show the raw data.
+        finalValue = formData;
+    }
+
+    return (
+        <ActionDependant {...props}>
+            <View
+                currentData={currentData}
+                datafield={datafield}
+                path={path}
+                props={finalValue.label}/>
+        </ActionDependant>
+    );
+};
+
+export default LabelFromValue;

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

@@ -0,0 +1,77 @@
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {dataLocationToPath, evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import ActionDependant from "../../../engine/Actions";
+import View from "../../../engine/View";
+import {useContext, useState} from "react";
+import {default as BsModal} from 'react-bootstrap/Modal';
+
+const Modal = ({currentData, path, props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    // The modal will be opened by default when in state mode.
+    const [show, setShow] = useState(true);
+
+    const evaluatedAttrs = useEvaluatedAttributes(props.attributes);
+
+    const {showBoolPath} = props;
+
+    // State mode is when the given bool path is not a path.
+    const isInStateMode = typeof showBoolPath !== "string";
+
+    // This is the value which control the modal opening state.
+    evaluatedAttrs.show = isInStateMode
+        ? show
+        : evaluateTemplateValue({
+            valueToEvaluate: props?.showBoolPath ?? false, globalDataContext, templateContext
+        });
+
+    const handleClose = () => {
+        if (isInStateMode) {
+            setShow(false);
+            return;
+        }
+
+        // A bool path is given, this will be used to control the modal visibility.
+        const fullPath = dataLocationToPath({
+            dataLocation: showBoolPath,
+            currentPath: templateContext.templatePath,
+            globalDataContext,
+            templateContext,
+        });
+
+        globalDataContext.updateData(undefined, fullPath);
+    };
+
+    // Add the reactive-json class to identify this modal as managed by reactive-json.
+    const base = evaluatedAttrs.className ? evaluatedAttrs.className.split(" ") : [];
+    base.push("reactive-json");
+    evaluatedAttrs.className = base.join(" ");
+
+    return (
+        <ActionDependant {...props}>
+            <BsModal {...evaluatedAttrs} onHide={handleClose}>
+                {(props.headerTitle || props.closeButton) &&
+                    <BsModal.Header closeButton={props.closeButton}>
+                        <BsModal.Title>
+                            <View
+                                currentData={currentData?.headerTitle ?? undefined}
+                                datafield={"headerTitle"}
+                                path={(path ?? "") + ".headerTitle"}
+                                props={props?.headerTitle}/>
+                        </BsModal.Title>
+                    </BsModal.Header>}
+                {props.body && <BsModal.Body>
+                    <View
+                        currentData={currentData?.body ?? undefined}
+                        datafield={"body"}
+                        path={(path ?? "") + ".body"}
+                        props={props?.body}/>
+                </BsModal.Body>}
+            </BsModal>
+        </ActionDependant>
+    );
+};
+
+export default Modal;