@ea-lab/reactive-json 0.0.20 → 0.0.22

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

@@ -1,118 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import View from "../../../engine/View";
-
-function ModalForm({show, path, handleClose, handleSave, form, currentData}) {
-
-    return (
-        <>
-            <Modal show={show} onHide={handleClose}>
-                <Modal.Header closeButton>
-                    <Modal.Title>Modal heading</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <View props={form} currentData={currentData} path={path}/>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={handleClose}>
-                        Close
-                    </Button>
-                    <Button variant="primary" onClick={handleSave}>
-                        Save Changes
-                    </Button>
-                </Modal.Footer>
-            </Modal>
-        </>
-    )
-}
-
-export default ModalForm;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const Paragraph = ({props, currentData}) => {
-    return (
-        <>
-            {currentData}
-        </>
-    )
-}
-export default Paragraph;

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

@@ -1,54 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {evaluateTemplateValue} from "../../../engine/TemplateSystem";
-import parse from 'html-react-parser';
-import React, {useContext} from 'react';
-
-/**
- * List of tags that are allowed by default.
- *
- * @type {string[]}
- */
-const defaultHtmlTagAllowList = [
-    "abbr", "acronym", "b", "blockquote", "br", "caption", "code", "div", "em", "h1", "h2", "h3", "h4", "h5", "h6",
-    "i", "li", "ol", "p", "span", "sup", "strong", "table", "tbody",
-    "td", "tfoot", "th", "thead", "tr", "ul",
-];
-
-/**
- * Preformatted markup component that takes content and inserts it as HTML.
- */
-const PreformattedMarkup = ({props}) => {
-    const templateContext = useContext(TemplateContext);
-    const globalDataContext = useContext(GlobalDataContext);
-
-    const html = evaluateTemplateValue({valueToEvaluate: props.content, templateContext, globalDataContext});
-
-    // Allow the base list to be overridden. Useful to disallow all tags, by supplying an empty array.
-    const htmlTagAllowList = Array.isArray(props.htmlTagAllowList) ? props.htmlTagAllowList : defaultHtmlTagAllowList;
-
-    // Allow the list to be extended with the additionalAllowedTags component property.
-    const completeTagAllowList = [...htmlTagAllowList, ...(props.additionalAllowedTags ?? [])]
-
-    return (
-        <ActionDependant {...props}>
-            {parse(html, {
-                replace(domNode) {
-                    /*
-                     * Filter tags to remove any risk about rendering dangerous markup.
-                     * Attributes (e.g. onclick) do not need to be filtered because they are not parsed as code:
-                     * https://github.com/remarkablemark/html-react-parser/issues/73#issuecomment-426119592
-                     */
-                    if (domNode.type === "tag" && completeTagAllowList.indexOf(domNode.name) < 0) {
-                        // Not an allowed tag.
-                        // Replace by a fragment which will effectively replace by nothing.
-                        return <></>;
-                    }
-                }
-            })}
-        </ActionDependant>
-    )
-}
-
-export default PreformattedMarkup;

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

@@ -1,20 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import TemplateContext from "../../../engine/TemplateContext";
-import {useContext} from "react";
-
-/**
- * This is the collapse button for the sortable tree.
- *
- * It's used when SortableTree is used with a manualDrag option.
- */
-const SortableTreeItemCollapseButton = ({props}) => {
-    const templateContext = useContext(TemplateContext);
-
-    return (
-        <ActionDependant {...props}>
-            {templateContext.sortableTreeData._treeAddCollapseButton?.()}
-        </ActionDependant>
-    )
-};
-
-export default SortableTreeItemCollapseButton;

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

@@ -1,55 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {
-    evaluateAttributes, useEvaluatedAttributes
-} from "../../../engine/TemplateSystem";
-import View from "../../../engine/View";
-import {useContext} from "react";
-import BsTab from 'react-bootstrap/Tab';
-import BsTabs from 'react-bootstrap/Tabs';
-
-/**
- * Tabs component using the simple Tabs component from react-bootstrap.
- *
- * The react-bootstrap's Tabs component is special as it requires a very
- * specific structure with <Tabs> directly underneath.
- *
- * @param currentData
- * @param path
- * @param props
- * @returns {JSX.Element}
- * @constructor
- */
-const Tabs = ({currentData, path, props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const evaluatedAttrs = useEvaluatedAttributes(props.attributes);
-
-    return (
-        <ActionDependant {...props}>
-            <BsTabs {...evaluatedAttrs}>
-                {Array.isArray(props.tabs) && props.tabs.map((item, index) => {
-                    const tabAttributes = evaluateAttributes({
-                        attrs: item.attributes,
-                        globalDataContext,
-                        templateContext,
-                        options: {normalizeBeforeEvaluation: true}
-                    });
-
-                    return <BsTab {...tabAttributes} key={index}>
-                        <View
-                            currentData={currentData?.[index]?.content ?? undefined}
-                            datafield={"content"}
-                            path={(path ?? "") + "." + index + ".content"}
-                            props={item?.content}/>
-                    </BsTab>
-                })}
-
-            </BsTabs>
-        </ActionDependant>
-    );
-};
-
-export default Tabs;

package/lib/component/element/special/BootstrapElement.jsx

@@ -1,32 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import View from "../../../engine/View";
-import {useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-
-/**
- * Wraps a React Bootstrap component.
- */
-function BootstrapElement({props, currentData, path, bsComponent}) {
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    if (props.attributes?.["data-visually-hidden"]) {debugger;}
-
-    if (!bsComponent) {
-        return null;
-    }
-
-    const BsElement = bsComponent;
-
-    return <ActionDependant {...props}>
-        <BsElement {...attributes}>
-            {props.content &&
-                (<View
-                    currentData={currentData.content ?? undefined}
-                    datafield={"content"}
-                    path={path + ".content"}
-                    props={props.content}
-                />)}
-        </BsElement>
-    </ActionDependant>;
-}
-
-export default BootstrapElement;

package/lib/component/element/special/Count.jsx

@@ -1,46 +0,0 @@
-import JSONPath from "jsonpath";
-import {useContext} from "react";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {maybeFormatString} from "../../utility/formatString";
-
-/**
- * Returns a count for something to count.
- *
- * @param props Component build data.
- *
- * @returns {null|*}
- *
- * @constructor
- */
-const Count = ({props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const {
-        context = "global",
-        jsonPathPattern: _jsonPathPattern,
-    } = props;
-
-    const _selectedContext = context === "template" ? TemplateContext : GlobalDataContext;
-    const selectedContext = useContext(_selectedContext);
-
-    if (!_jsonPathPattern) {
-        return null;
-    }
-
-    const jsonPathPattern = maybeFormatString({
-        templateContexts: {
-            globalDataContext,
-            templateContext
-        }
-    }, _jsonPathPattern);
-
-    const selectedContextData = context === "root" ? selectedContext.getRootContext().templateData : selectedContext.templateData;
-
-    const result = JSONPath.query(selectedContextData, jsonPathPattern);
-
-    return result.length;
-};
-
-export default Count;