@ea-lab/reactive-json 0.0.20 → 0.0.21

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

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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");
-};