@ea-lab/reactive-json 0.0.0

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,156 @@
+import {useContext} from "react";
+import {isValid} from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import View from "../../../engine/View";
+
+/**
+ * Use DataFilter to filter data from the global or template data.
+ *
+ * @param args Component build data.
+ *
+ * @returns {JSX.Element}
+ *
+ * @constructor
+ */
+const DataFilter = (args) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+    const templateContexts = {globalDataContext, templateContext};
+
+    const {
+        contextToFilter = "global",
+        filters = [],
+    } = args.props;
+
+    const filterData = (data) => {
+        if (!data) {
+            return true;
+        }
+
+        for (const filter of filters) {
+            const subjectsWithProperty = filter?.subjectsWithProperty ?? undefined;
+
+            if (!subjectsWithProperty) {
+                // Ignore this filter.
+                continue;
+            }
+
+            if (!data.hasOwnProperty(subjectsWithProperty)) {
+                continue;
+            }
+
+            const additionalConditionHandlers = new Map(
+                [
+                    [
+                        "whenFilterableData",
+                        ({condition}) => {
+                            // Walk through the data.
+                            const path = condition["whenFilterableData"];
+                            const pathArray = path.split('.');
+                            let current = data;
+
+                            for (const segment of pathArray) {
+                                const index = parseInt(segment);
+                                current = current[isNaN(index) ? segment : index];
+                                if (current === undefined) {
+                                    return undefined;
+                                }
+                            }
+
+                            return current;
+                        }
+                    ]
+                ]
+            );
+
+            // The item may be filtered out by this filter definition.
+            // Now, check the activation conditions.
+            if (!isValid(filter, templateContexts, additionalConditionHandlers)) {
+                return false;
+            }
+        }
+
+        // No filter for this data, keep it.
+        return true;
+    };
+
+
+    switch (contextToFilter) {
+        case "template":
+            templateContext.templateData = cloneAndFilter(templateContext.templateData, filterData);
+            templateContext.templatePath = args.path;
+
+            return <TemplateContext.Provider value={templateContext}>
+                <View
+                    props={args.props.content}
+                    path={args.path + ".content"}
+                    datafield={"content"}
+                    currentData={args.currentData?.["content"] ?? undefined}/>
+            </TemplateContext.Provider>;
+
+        case "global":
+        default:
+            // We rewrite the template data.
+            globalDataContext.templateData = cloneAndFilter(globalDataContext.templateData, filterData);
+
+            return <GlobalDataContext.Provider value={globalDataContext}>
+                <View
+                    props={args.props.content}
+                    path={args.path + ".content"}
+                    datafield={"content"}
+                    currentData={args.currentData?.["content"] ?? undefined}/>
+            </GlobalDataContext.Provider>;
+    }
+};
+
+/**
+ * Clones the data to an object only structure.
+ *
+ * It means that arrays will be converted to objects,
+ * with the array indices converted to property keys.
+ * This is necessary because we want to preserve the
+ * paths of the items that are still appearing after
+ * the filtering process, so that they can call
+ * updateData as usual.
+ *
+ * @param data
+ * @param {function} filterData
+ *
+ * @returns {{}|*}
+ */
+const cloneAndFilter = (data, filterData) => {
+    if (Array.isArray(data)) {
+        const obj = {};
+
+        data.forEach((item, index) => {
+            if (!filterData(item)) {
+                // Do not keep this item.
+                return;
+            }
+
+            obj[index] = cloneAndFilter(item, filterData);
+        });
+
+        return obj;
+    } else if (typeof data === 'object' && data !== null) {
+        const obj = {};
+
+        for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+                // We only work with own properties, not inherited ones.
+                if (!filterData(data[key])) {
+                    // Do not keep this item.
+                    continue;
+                }
+
+                obj[key] = cloneAndFilter(data[key], filterData);
+            }
+        }
+        return obj;
+    } else {
+        return data;
+    }
+}
+
+export default DataFilter;

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

@@ -0,0 +1,119 @@
+import ActionDependant, {isValid} from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import View from "../../../engine/View";
+import {reactionFunctions} from "../../action/ReactOnEvent";
+import {useContext, useEffect} from "react";
+
+/**
+ * Provides a way to execute actions after a delay, at intervals, etc.
+ *
+ * @param {{}} props Build data.
+ * @param currentData Current data.
+ * @param path Element path.
+ *
+ * @constructor
+ */
+const DelayedActions = ({props, currentData, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const delayedActions = Array.isArray(props.delayedActions) ? props.delayedActions : [];
+    const templateContexts = {globalDataContext, templateContext};
+
+    useEffect(() => {
+        if (!props.interval) {
+            return;
+        }
+
+        const interval = setInterval(() => {
+            const reactionFunctionsToExecute = getReactionFunctionsToExecute(delayedActions, templateContexts);
+
+            // Execute the reaction functions.
+            // They are supposed to be validated for execution by getReactionFunctionsToExecute.
+            // The events (on change, on click, etc.) are ignored because
+            // it does not make sense to have to wait for a delay AND a specific event.
+            // The time is already an event.
+            for (let reactionFunctionPropsIndex = 0; reactionFunctionPropsIndex < reactionFunctionsToExecute.length; ++reactionFunctionPropsIndex) {
+                const singleReactionFunctionProps = reactionFunctionsToExecute[reactionFunctionPropsIndex];
+
+                if (!singleReactionFunctionProps) {
+                    // Empty definition.
+                    continue;
+                }
+
+                const reactionFunction = singleReactionFunctionProps.what && (reactionFunctions[singleReactionFunctionProps.what] ?? null);
+
+                if (!reactionFunction) {
+                    continue;
+                }
+
+                // Call the reaction function with the props and context data.
+                // This differs from the ReactOnEvent implementation by not including event data,
+                // because we did not trigger an event.
+                reactionFunction({args: singleReactionFunctionProps, globalDataContext, templateContext});
+            }
+
+            if (props.once) {
+                clearInterval(interval);
+            }
+        }, props.interval);
+
+        return () => clearInterval(interval);
+    }, [globalDataContext, templateContext]);
+
+    return <ActionDependant {...props}>
+        {props.content && <View
+            props={props.content}
+            currentData={currentData?.content ?? undefined}
+            datafield={"content"}
+            path={path + ".content"}/>}
+    </ActionDependant>;
+};
+
+
+/**
+ * Gets the reaction functions to execute.
+ *
+ * This is a specific adaptation of getActionsToExecute from the Actions core functionality.
+ *
+ * @param {Array} actions
+ * @param {object} templateContexts
+ * @returns {*[]} The list of reaction function properties. The structure is simpler than getActionsToExecute.
+ */
+export const getReactionFunctionsToExecute = (actions, templateContexts) => {
+    const result = [];
+
+    if (!Array.isArray(actions)) {
+        // Not a supported actions structure.
+        // Dev note: we may also allow objects in the future, to allow specific overrides.
+        return result;
+    }
+
+    for (const [, item] of actions.entries()) {
+        const what = item?.what ?? undefined;
+
+        if (!what) {
+            continue;
+        }
+
+        const reactionFunction = reactionFunctions[what] ?? undefined;
+
+        if (!reactionFunction) {
+            // The component is unknown or not registered,
+            // and it's not a reaction function.
+            continue;
+        }
+
+        // This is a reaction function.
+        if (!isValid(item, templateContexts)) {
+            continue;
+        }
+
+        result.push(item);
+    }
+
+    return result;
+};
+
+export default DelayedActions;

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

@@ -0,0 +1,19 @@
+import {useContext} from "react";
+import PaginationContext from "../../../engine/PaginationContext";
+
+/**
+ * Displays the PageControls found in the PaginationContext, if any.
+ *
+ * @returns {JSX.Element|null}
+ *
+ * @constructor
+ */
+const PageControls = () => {
+    const {pagination} = useContext(PaginationContext);
+
+    return pagination.PageControls
+        ? <pagination.PageControls/>
+        : null;
+};
+
+export default PageControls;

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

@@ -0,0 +1,25 @@
+import ActionDependant from "../../../engine/Actions";
+import View from "../../../engine/View";
+
+/**
+ * Phantom element without DOM output.
+ *
+ * Use this if you want actions without a DOM element.
+ *
+ * @param {{}} props Build data.
+ * @param currentData Current data.
+ * @param path Element path.
+ *
+ * @constructor
+ */
+const Phantom = ({props, currentData, path}) => {
+    return <ActionDependant {...props}>
+        {props.content && <View
+            props={props.content}
+            currentData={currentData?.content ?? undefined}
+            datafield={"content"}
+            path={path + ".content"}/>}
+    </ActionDependant>;
+};
+
+export default Phantom;