@ea-lab/reactive-json 0.0.0

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

@@ -0,0 +1,131 @@
+import {useContext} from 'react';
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import PaginationContext from "../../../engine/PaginationContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {dataLocationToPath, evaluateTemplateValue, isTemplateValue} from "../../../engine/TemplateSystem";
+import View from "../../../engine/View";
+import {usePagination} from "../../hook/usePagination";
+
+const Switch = ({props, currentData, path}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    // The allowed item count. Any value less than 1 means infinite.
+    const cardinality = props?.cardinality ?? -1;
+
+    // The allowed sub items for this switch.
+    const options = props?.options ?? [];
+    const singleOption = props?.singleOption ?? undefined;
+
+    // This will tell if singleOption should be used.
+    const useSingleOption = !!singleOption;
+
+    // The content property is used to pinpoint on a template data value.
+    // This is not mandatory; the data can still set the selected value(s)
+    // by the usual overwrite by using the same render array structure.
+    const maybeContent = props?.content ?? null;
+    const evaluatedContent = maybeContent && evaluateTemplateValue({
+        globalDataContext: globalDataContext,
+        templateContext: templateContext,
+        valueToEvaluate: maybeContent,
+    });
+    const finalDataSource = typeof evaluatedContent === "object" ? evaluatedContent : currentData;
+
+    // This will limit the values count by the config in case the data is wrong.
+    const limitedContent = Object
+        .entries(finalDataSource)
+        .map(([dataIndex, dataEntry]) => {
+            const realIndex = dataIndex;
+
+            if (cardinality >= 1 && realIndex >= cardinality) {
+                // Ignore the data entry.
+                return null;
+            }
+
+            if (!dataEntry || typeof dataEntry !== "object") {
+                // Invalid entries count in the cardinality check.
+                // If we don't want them counted, we need to change the cardinality check itself
+                // which is currently based on the data index.
+                return null;
+            }
+
+            let dataKey;
+            let dataValue;
+            let selectedOption;
+
+            if (useSingleOption) {
+                dataValue = dataEntry;
+                selectedOption = singleOption;
+            } else {
+                dataKey = Object.keys(dataEntry)[0] ?? undefined;
+
+                if (dataKey === undefined) {
+                    // Render nothing.
+                    return null;
+                }
+
+                dataValue = Object.values(dataEntry)[0] ?? undefined;
+                selectedOption = options[dataKey] ?? undefined;
+            }
+
+            if (selectedOption === undefined) {
+                // Render nothing.
+                return null;
+            }
+
+            let finalPath = ((isTemplateValue(maybeContent) && dataLocationToPath({
+                dataLocation: maybeContent,
+                currentPath: templateContext.templatePath,
+                globalDataContext,
+                templateContext
+            })) || path) + "." + realIndex;
+
+            if (!useSingleOption) {
+                finalPath += "." + dataKey;
+            }
+
+            return <View
+                currentData={dataValue}
+                datafield={realIndex}
+                key={realIndex}
+                path={finalPath}
+                props={selectedOption}
+            />;
+        });
+
+    const pagination = usePagination(
+        {
+            dataToPaginate: limitedContent,
+            ...(props?.paginationProps ?? {})
+        });
+
+    // Slice for the pagination if in effect.
+    const contentAsViews = props?.paginated
+        ? limitedContent.slice(pagination.firstShownItemIndex, pagination.maxShownItemIndexExcluded)
+        : limitedContent;
+
+    const toRender = <>
+        {props?.before && <View
+            currentData={currentData?.["before"] ?? undefined}
+            path={path + ".before"}
+            datafield={"before"}
+            props={props?.before}/>}
+        {contentAsViews}
+        {props?.after && <View
+            currentData={currentData?.["after"] ?? undefined}
+            path={path + ".after"}
+            datafield={"after"}
+            props={props?.after}/>}
+    </>
+
+    return <ActionDependant {...props}>
+        {props?.paginated
+            ? <PaginationContext.Provider value={{pagination}}>
+                {toRender}
+            </PaginationContext.Provider>
+            : toRender}
+    </ActionDependant>
+};
+
+export default Switch;

package/lib/component/hook/usePagination.jsx

@@ -0,0 +1,184 @@
+import {Pagination} from "react-bootstrap";
+import React, {useState} from "react";
+
+/**
+ * Use this hook to create paginations.
+ *
+ * @param [Array] dataToPaginate The complete data to paginate.
+ * @param [int] forcePaginationDisplay Set to true to force the pagination even when having less than 2 pages.
+ * @param [int] maxPageButtonsCount The maximum page buttons count. Must be at least 1. Defaults to 5 when undefined.
+ * @param [int] pageMaxItemCount The maximum item count per page. Defaults to 10 when undefined.
+ *
+ * @returns {{
+ *     firstShownItemIndex: number,
+ *     getPageCountForContent: (function(Array): number),
+ *     maxShownItemIndexExcluded: number,
+ *     PageControls: (function({pageCount: *})),
+ *     pageMaxItemCount: number,
+ *     sliceVisibleContent: ((function(Array): *)|*),
+ * }}
+ */
+export const usePagination = ({
+                                  dataToPaginate = [],
+                                  forcePaginationDisplay = false,
+                                  maxPageButtonsCount = 5,
+                                  pageMaxItemCount = 10,
+                              }) => {
+    // TODO: la pagination ne se met pas à jour quand les filtres sont changés (currentData).
+    const [activePageNumber0, setActivePageNumber0] = useState(0);
+
+    /**
+     * Count of page buttons that shall appear before and after the current page.
+     *
+     * When the current page is near the start or the end, this value is ignored
+     * to show "maxPageButtonsCount" buttons.
+     *
+     * For example, when we have maxPageButtonsCount at 5, and 10 pages:
+     * - When at active page 1, 2, 3: [1,2,3,4,5].
+     * - When at active page 4, 5, 6, 7, 5 page buttons will appear, but shifted accordingly to the active page:
+     *   - page 4: [2,3,4,5,6]
+     *   - page 5: [3,4,5,6,7]
+     *   - page 6: [4,5,6,7,8]
+     *   - page 7: [5,6,7,8,9]
+     * - When at active page 8, 9, 10: [6,7,8,9,10].
+     *
+     * @type {number}
+     */
+    const buttonsBeforeAfterMaxCount = Math.floor(maxPageButtonsCount / 2);
+
+    /**
+     * Index of the first item in the given content to show for the active page.
+     *
+     * This value is ready for slice()'s start.
+     *
+     * @type {number}
+     */
+    const firstShownItemIndex = activePageNumber0 * pageMaxItemCount;
+
+    /**
+     * Index of the last item + 1 in the given content to show for the active page.
+     *
+     * This value is ready for slice()'s end.
+     *
+     * @type {number}
+     */
+    const maxShownItemIndexExcluded = firstShownItemIndex + pageMaxItemCount;
+
+    /**
+     * Gets the expected page count for the given content.
+     *
+     * @param {Array} contentSource The content to paginate.
+     *
+     * @returns {number} The page count.
+     */
+    const getPageCountForContent = (contentSource) => {
+        // Use ceil to have one last page for remaining items.
+        return Math.ceil(contentSource.length / pageMaxItemCount);
+    };
+
+    /**
+     * Slices the given content with the parameters of this pagination.
+     *
+     * Useful if the content array is complete.
+     * If not, it may be better to work directly in the component
+     * so that the hidden items are not computed for nothing.
+     *
+     * @param {Array} contentToSlice
+     * @returns {*}
+     */
+    const sliceVisibleContent = (contentToSlice) => {
+        if (!Array.isArray(contentToSlice)) {
+            // Not an array. Not supported.
+            return contentToSlice;
+        }
+
+        return contentToSlice.slice(firstShownItemIndex, maxShownItemIndexExcluded);
+    };
+
+    /**
+     * Component which contains the page controls (previous, next, pages).
+     *
+     * @returns {JSX.Element}
+     *
+     * @constructor
+     */
+    const PageControls = () => {
+        const pageCount = getPageCountForContent(dataToPaginate);
+
+        if (!forcePaginationDisplay && (pageCount <= 1)) {
+            return null;
+        }
+
+        return <Pagination>
+            <Pagination.First
+                disabled={activePageNumber0 <= 0}
+                onClick={() => {
+                    setActivePageNumber0(0);
+                }}/>
+            <Pagination.Prev
+                disabled={activePageNumber0 <= 0}
+                onClick={() => {
+                    setActivePageNumber0(activePageNumber0 - 1);
+                }}/>
+            {Math.min(activePageNumber0 - buttonsBeforeAfterMaxCount, pageCount - maxPageButtonsCount) > 0 ?
+                <Pagination.Ellipsis disabled/> : null}
+            {(() => {
+                const intermediateButtons = [];
+
+                // The first button is the leftmost visible button.
+                // It is either 0,
+                // or the current page minus buttonsBeforeAfterMaxCount,
+                // or maxPageButtonsCount starting from the end.
+                let currentPageButtonNumber0 = Math.min(Math.max(0, pageCount - maxPageButtonsCount), Math.max(0, activePageNumber0 - buttonsBeforeAfterMaxCount));
+                let remainingPagesToBuildButton = maxPageButtonsCount;
+
+                const insertPageButton = (currentPageButtonNumber0, remainingPagesToBuildButton) => {
+                    intermediateButtons.push(<Pagination.Item
+                        active={activePageNumber0 === currentPageButtonNumber0}
+                        key={maxPageButtonsCount - remainingPagesToBuildButton}
+                        onClick={() => {
+                            setActivePageNumber0(currentPageButtonNumber0)
+                        }}
+                    >
+                        {currentPageButtonNumber0 + 1}
+                    </Pagination.Item>);
+                };
+
+                while (remainingPagesToBuildButton) {
+                    insertPageButton(currentPageButtonNumber0, remainingPagesToBuildButton);
+
+                    ++currentPageButtonNumber0;
+                    --remainingPagesToBuildButton;
+
+                    if (currentPageButtonNumber0 >= pageCount) {
+                        // Reached the end of the pages.
+                        break;
+                    }
+                }
+
+                return intermediateButtons;
+            })()}
+            {pageCount > Math.max(buttonsBeforeAfterMaxCount, activePageNumber0) + Math.ceil(maxPageButtonsCount / 2) ?
+                <Pagination.Ellipsis disabled/> : null}
+            <Pagination.Next
+                disabled={activePageNumber0 + 1 >= pageCount}
+                onClick={() => {
+                    setActivePageNumber0(activePageNumber0 + 1);
+                }}/>
+            <Pagination.Last
+                disabled={activePageNumber0 + 1 >= pageCount}
+                onClick={() => {
+                    setActivePageNumber0(pageCount - 1);
+                }}/>
+        </Pagination>
+    };
+
+    return {
+        firstShownItemIndex,
+        getPageCountForContent,
+        maxShownItemIndexExcluded,
+        PageControls,
+        pageMaxItemCount,
+        sliceVisibleContent,
+    };
+};

package/lib/component/reaction/addData.jsx

@@ -0,0 +1,23 @@
+import {dataLocationToPath, evaluateTemplateValue} from "../../engine/TemplateSystem";
+import {cloneDeep} from "lodash";
+
+/**
+ * Adds data at the specified path.
+ *
+ * @param {{}} props
+ */
+export const addData = (props) => {
+    const {globalDataContext, templateContext} = props;
+    const {path, value} = props.args;
+
+    if (path === undefined) {
+        return;
+    }
+
+    const dataAbsolutePath = dataLocationToPath({currentPath: templateContext.templatePath, dataLocation: path, globalDataContext, templateContext});
+
+    const evaluatedValue = evaluateTemplateValue({valueToEvaluate: value, globalDataContext, templateContext});
+
+    // We clone the value to have distinct instances when the value is an object.
+    globalDataContext?.updateData(typeof evaluatedValue !== "object" ? evaluatedValue : cloneDeep(evaluatedValue), dataAbsolutePath, "add");
+};

package/lib/component/reaction/fetchData.jsx

@@ -0,0 +1,83 @@
+import axios from "axios";
+import {evaluateTemplateValue} from "../../engine/TemplateSystem";
+
+/**
+ * Fetches data. Similar to submitData, but for GET requests.
+ *
+ * Will reload the app content if refreshAppOnResponse is true.
+ *
+ * @param {{args: {refreshAppOnResponse, url}, event, globalDataContext, templateContext}} props Reaction function props.
+ */
+export const fetchData = (props) => {
+    // Prevent multiple submits / fetches.
+    const reactionEvent = props?.event;
+
+    // Check in realtime if we are already submitting.
+    // With this system, only 1 submit can be made concurrently for all roots.
+    const body = document.body;
+
+    if (body.dataset.htmlBuilderIsSubmitting === "true") {
+        return;
+    }
+
+    // This will block any attempts to resubmit until receiving the response.
+    body.dataset.htmlBuilderIsSubmitting = "true";
+
+    const currentTarget = reactionEvent.currentTarget;
+
+    if (currentTarget?.dataset) {
+        // Useful for styling.
+        currentTarget.dataset.isSubmitting = "true";
+    }
+
+    const {globalDataContext: _globalDataContext, templateContext} = props;
+
+    // Use the root context when submitting data,
+    // not the maybe-filtered one that the DataFilter component may have edited.
+    // This could be made configurable if ever needed.
+    const globalDataContext = _globalDataContext.getRootContext ? _globalDataContext.getRootContext() : _globalDataContext;
+
+    /**
+     * Tells if the response content will replace the current app content.
+     *
+     * @type {boolean}
+     */
+    const refreshAppOnResponse = props?.args?.refreshAppOnResponse ?? true;
+
+    const url = evaluateTemplateValue({
+        valueToEvaluate: props?.args?.url, globalDataContext, templateContext
+    });
+
+    if (!url) {
+        return;
+    }
+
+    const headers = globalDataContext.headersForData ?? {};
+
+    const {setRawAppData} = globalDataContext;
+
+    axios
+        .get(
+            url,
+            {
+                headers
+            })
+        .then((value) => {
+            if (!refreshAppOnResponse) {
+                return;
+            }
+
+            // This will trigger a complete re-render.
+            setRawAppData(value.data);
+        })
+        .catch((reason) => {
+            console.log("reactionFunction:fetchData : Could not fetch. Reason: " + reason.message);
+        })
+        .finally(() => {
+            delete body.dataset.htmlBuilderIsSubmitting;
+
+            if (currentTarget?.dataset) {
+                delete currentTarget.dataset.isSubmitting;
+            }
+        });
+};

package/lib/component/reaction/moveData.jsx

@@ -0,0 +1,52 @@
+import {dataLocationToPath} from "../../engine/TemplateSystem";
+
+/**
+ * Moves data at the specified path.
+ *
+ * @param {{}} props
+ */
+export const moveData = (props) => {
+    const {globalDataContext, templateContext} = props;
+    const {path, target} = props.args;
+
+    if (path === undefined && target !== "currentTemplateData") {
+        return;
+    }
+
+    let dataAbsolutePath;
+
+    if (path) {
+        dataAbsolutePath = dataLocationToPath({
+            currentPath: templateContext.templatePath,
+            dataLocation: path,
+            globalDataContext,
+            templateContext
+        });
+    } else {
+        // Target mode.
+        dataAbsolutePath = templateContext.templatePath;
+
+        // Dev note: could this be interesting for the other mode?
+        let parentLevel = props.args.parentLevel ?? 0;
+
+        while (parentLevel > 0) {
+            --parentLevel;
+
+            // Remove a level from the path.
+            const lastIndex = dataAbsolutePath.lastIndexOf('.');
+
+            if (lastIndex < 1) {
+                // No valid path to remove. Is there a valid use case where we should remove everything?
+                return;
+            }
+
+            dataAbsolutePath = dataAbsolutePath.substring(0, lastIndex);
+        }
+    }
+
+    const {increment} = props.args;
+
+    globalDataContext?.updateData({
+        increment,
+    }, dataAbsolutePath, "move");
+};

package/lib/component/reaction/postMessage.jsx

@@ -0,0 +1,43 @@
+import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
+
+/**
+ * Posts a message to the specified target.
+ *
+ * @param {{args: {includeChangedValue, message, messageTarget, on, targetOrigin}, event, globalDataContext, templateContext}} props
+ */
+export const postMessage = (props) => {
+    const messageTargets = {
+        parent: window.parent,
+        self: window,
+    };
+
+    const messageTarget = messageTargets[props?.args?.messageTarget ?? "parent"] ?? window;
+
+    // The targetOrigin must match the schema and domain where the message will be sent.
+    // Otherwise, the message will be discarded for security reasons.
+    // When not set, the target will be the current location's origin by default.
+    const messageTargetOrigin = props?.args?.targetOrigin ?? window.location.origin;
+
+    const message_evaluated = evaluateTemplateValueCollection({
+        globalDataContext: props.globalDataContext,
+        templateContext: props.templateContext,
+        valueToEvaluate: props?.args?.message
+    });
+
+    if (props?.args?.on === "change" && typeof message_evaluated === "object" && props?.args?.includeChangedValue && props?.event?.target?.nodeName === "INPUT") {
+        let changedValue;
+
+        switch (props?.event?.target?.type) {
+            case "checkbox":
+                changedValue = props?.event?.target?.checked;
+                break;
+
+            default:
+            // TODO: support other types.
+        }
+
+        message_evaluated["changedValue"] = changedValue;
+    }
+
+    (messageTarget && messageTargetOrigin) && messageTarget.postMessage(message_evaluated, messageTargetOrigin);
+};

package/lib/component/reaction/redirectNow.jsx

@@ -0,0 +1,17 @@
+import {evaluateTemplateValue} from "../../engine/TemplateSystem";
+
+/**
+ * Redirects to the specified URL.
+ *
+ * @param {{}} props
+ */
+export const redirectNow = (props) => {
+    const {globalDataContext, templateContext} = props;
+    const {to} = props.args;
+
+    if (!to || typeof to !== "string") {
+        return;
+    }
+
+    window.location.href = evaluateTemplateValue({valueToEvaluate: to, globalDataContext, templateContext});
+};

package/lib/component/reaction/removeData.jsx

@@ -0,0 +1,48 @@
+import {dataLocationToPath} from "../../engine/TemplateSystem";
+
+/**
+ * Removes data at the specified path.
+ *
+ * @param {{}} props
+ */
+export const removeData = (props) => {
+    const {globalDataContext, templateContext} = props;
+    const {path, target} = props.args;
+
+    if (path === undefined && target !== "currentTemplateData") {
+        return;
+    }
+
+    let dataAbsolutePath;
+
+    if (path) {
+        dataAbsolutePath = dataLocationToPath({
+            currentPath: templateContext.templatePath,
+            dataLocation: path,
+            globalDataContext,
+            templateContext
+        });
+    } else {
+        // Target mode.
+        dataAbsolutePath = templateContext.templatePath;
+
+        // Dev note: could this be interesting for the other mode?
+        let parentLevel = props.args.parentLevel ?? 0;
+
+        while (parentLevel > 0) {
+            --parentLevel;
+
+            // Remove a level from the path.
+            const lastIndex = dataAbsolutePath.lastIndexOf('.');
+
+            if (lastIndex < 1) {
+                // No valid path to remove. Is there a valid use case where we should remove everything?
+                return;
+            }
+
+            dataAbsolutePath = dataAbsolutePath.substring(0, lastIndex);
+        }
+    }
+
+    globalDataContext?.updateData(undefined, dataAbsolutePath, "remove");
+};

package/lib/component/reaction/setClipboardData.jsx

@@ -0,0 +1,20 @@
+import {evaluateTemplateValue} from "../../engine/TemplateSystem";
+
+/**
+ * Copies data to the clipboard.
+ *
+ * @param {{}} props
+ */
+export const setClipboardData = async (props) => {
+    const {globalDataContext, templateContext} = props;
+    const evaluatedValue = evaluateTemplateValue({valueToEvaluate: props?.args?.value, globalDataContext, templateContext});
+
+    if (typeof evaluatedValue === 'string') {
+        try {
+            // Attempt to copy to clipboard.
+            await navigator.clipboard.writeText(evaluatedValue.toString());
+        } catch (error) {
+            console.error('Failed to copy data to the clipboard:', error);
+        }
+    }
+};

package/lib/component/reaction/setData.jsx

@@ -0,0 +1,23 @@
+import {dataLocationToPath, evaluateTemplateValue} from "../../engine/TemplateSystem";
+import {cloneDeep} from "lodash";
+
+/**
+ * Sets data at the specified path.
+ *
+ * @param {{}} props
+ */
+export const setData = (props) => {
+    const {globalDataContext, templateContext} = props;
+    const {path, value} = props.args;
+
+    if (path === undefined) {
+        return;
+    }
+
+    const dataAbsolutePath = dataLocationToPath({currentPath: templateContext.templatePath, dataLocation: path, globalDataContext, templateContext});
+
+    const evaluatedValue = evaluateTemplateValue({valueToEvaluate: value, globalDataContext, templateContext});
+
+    // We clone the value to have distinct instances when the value is an object.
+    globalDataContext?.updateData(typeof evaluatedValue !== "object" ? evaluatedValue : cloneDeep(evaluatedValue), dataAbsolutePath);
+};