@ea-lab/reactive-json 0.0.20 → 0.0.22

package/lib/component/action/HashChangeListener.jsx

@@ -1,66 +0,0 @@
-import {useContext, useEffect} from "react";
-import {reactionFunctions} from "./ReactOnEvent";
-import EventDispatcherContext from "../../engine/EventDispatcherContext";
-import GlobalDataContext from "../../engine/GlobalDataContext";
-import TemplateContext from "../../engine/TemplateContext";
-import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
-
-/**
- * Listens to hash changes (URL fragment) on the window object and executes a reaction function in response.
- *
- * @param {{}} props
- * @returns {JSX.Element}
- * @constructor
- */
-const HashChangeListener = (props) => {
-    const eventDispatcherContext = useContext(EventDispatcherContext);
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const actionProps = props?.actionProps ?? undefined;
-
-    useEffect(() => {
-        const payload = actionProps ?? undefined;
-        const functionToCall = actionProps?.what ?? undefined;
-        const whenHashIs = actionProps?.whenHashIs ?? undefined;
-        const whenHashWas = actionProps?.whenHashWas ?? undefined;
-
-        const whenHashIs_evaluated = evaluateTemplateValueCollection({
-            globalDataContext,
-            templateContext,
-            valueToEvaluate: whenHashIs
-        });
-
-        const whenHashWas_evaluated = evaluateTemplateValueCollection({
-            globalDataContext,
-            templateContext,
-            valueToEvaluate: whenHashWas
-        });
-
-        const listener = (event) => {
-            // The hash contains the '#' character.
-            if (typeof whenHashIs_evaluated === "string" && ((new URL(event.newUrl)).hash !== whenHashIs_evaluated)) {
-                return;
-            }
-
-            if (typeof whenHashWas_evaluated === "string" && ((new URL(event.oldUrl)).hash !== whenHashIs_evaluated)) {
-                return;
-            }
-
-            const toCall = functionToCall && (reactionFunctions[functionToCall] ?? undefined);
-
-            toCall && toCall({args: payload, event, globalDataContext, templateContext});
-        };
-
-        // Dev note: we use a context to prevent adding too many real event listeners which would slow down the build.
-        eventDispatcherContext?.addEventListener("hashchange", listener);
-
-        return () => {
-            eventDispatcherContext?.removeEventListener("hashchange", listener);
-        };
-    }, [eventDispatcherContext, globalDataContext, actionProps, templateContext]);
-
-    return <>{props.children}</>;
-};
-
-export default HashChangeListener;

package/lib/component/action/MessageListener.jsx

@@ -1,62 +0,0 @@
-import {useContext, useEffect} from "react";
-import {reactionFunctions} from "./ReactOnEvent";
-import EventDispatcherContext from "../../engine/EventDispatcherContext";
-import GlobalDataContext from "../../engine/GlobalDataContext";
-import TemplateContext from "../../engine/TemplateContext";
-import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
-import {isEqual} from "lodash";
-
-/**
- * Listens to messages on the window object and executes a reaction function in response.
- *
- * @param {{}} props
- * @returns {JSX.Element}
- * @constructor
- */
-const MessageListener = (props) => {
-    const eventDispatcherContext = useContext(EventDispatcherContext);
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const actionProps = props?.actionProps ?? undefined;
-
-    useEffect(() => {
-        const payload = actionProps ?? undefined;
-        const functionToCall = actionProps?.what ?? undefined;
-        const whenMessageIs = actionProps?.whenMessageIs ?? undefined;
-
-        const whenMessageIs_evaluated = evaluateTemplateValueCollection({
-            globalDataContext,
-            templateContext,
-            valueToEvaluate: whenMessageIs
-        });
-
-        const listener = (event) => {
-            if (event.origin !== window.location.origin) {
-                // The message is not allowed because it targets an unknown origin.
-                return;
-            }
-
-            // The "event.data" is supposed to be already evaluated.
-            // Use lodash's isEqual to compare the values properly (deep compare for objects).
-            if (!isEqual(event.data, whenMessageIs_evaluated)) {
-                return;
-            }
-
-            const toCall = functionToCall && (reactionFunctions[functionToCall] ?? undefined);
-
-            toCall && toCall({args: payload, event, globalDataContext, templateContext});
-        };
-
-        // Dev note: we use a context to prevent adding too many real event listeners which would slow down the build.
-        eventDispatcherContext?.addEventListener("message", listener);
-
-        return () => {
-            eventDispatcherContext?.removeEventListener("message", listener);
-        };
-    }, [eventDispatcherContext, globalDataContext, actionProps, templateContext]);
-
-    return <>{props.children}</>;
-};
-
-export default MessageListener;

package/lib/component/action/Popover.jsx

@@ -1,53 +0,0 @@
-/**
- * Action which will append a popover when the current component is hovered.
- */
-
-import {OverlayTrigger, Popover as BsPopover} from "react-bootstrap";
-import View from "../../engine/View";
-import {useEvaluatedAttributes} from "../../engine/TemplateSystem";
-import {useRef} from "react";
-
-const Popover = (props) => {
-    // We use the React Bootstrap Popover component. It works like the Tooltip component.
-    // It requires an OverlayTrigger wrapping component that handles the hover interaction.
-    // The OverlayTrigger child must be able to get a "ref" (as in react refs),
-    // So we wrap the children in a custom HTML tag (popover-reference) to be sure it will work.
-    const bodyAttrs = useEvaluatedAttributes(props.actionProps.bodyAttributes || {});
-    const headerAttrs = useEvaluatedAttributes(props.actionProps.headerAttributes || {});
-
-    // This ref is used to help building complex structures like popovers inside modals.
-    // Without this, the popover will show behind the modal instead of being in front.
-    // It is usually expected to have the popover over the modal, but if we don't want
-    // this effect for a specific case, we should make this configurable to not set
-    // the ref.
-    const containerRef = useRef(null);
-
-    return <div ref={containerRef}>
-        <OverlayTrigger
-            container={containerRef}
-            placement={props.actionProps.placement ?? "top"}
-            trigger={props.actionProps.trigger ?? "click"}
-            overlay={<BsPopover>
-                {props.actionProps.header && <BsPopover.Header {...headerAttrs}>
-                    <View
-                        props={props.actionProps.header}
-                        currentData={props.componentProps?.currentData?.actions?.[props.actionIndex]?.header ?? undefined}
-                        datafield={"header"}
-                        path={props.componentProps.path + ".actions." + props.actionIndex + ".header"}
-                    />
-                </BsPopover.Header>}
-                <BsPopover.Body {...bodyAttrs}>
-                    <View
-                        props={props.actionProps.body}
-                        currentData={props.componentProps?.currentData?.actions?.[props.actionIndex]?.body ?? undefined}
-                        datafield={"body"}
-                        path={props.componentProps.path + ".actions." + props.actionIndex + ".body"}
-                    />
-                </BsPopover.Body>
-            </BsPopover>}>
-            <popover-reference>{props.children}</popover-reference>
-        </OverlayTrigger>
-    </div>;
-};
-
-export default Popover;

package/lib/component/action/ReactOnEvent.jsx

@@ -1,118 +0,0 @@
-import {Children, cloneElement, Fragment, isValidElement, useContext} from "react";
-import GlobalDataContext from "../../engine/GlobalDataContext";
-import TemplateContext from "../../engine/TemplateContext";
-import {addData} from "../reaction/addData";
-import {fetchData} from "../reaction/fetchData";
-import {moveData} from "../reaction/moveData";
-import {postMessage} from "../reaction/postMessage";
-import {redirectNow} from "../reaction/redirectNow";
-import {removeData} from "../reaction/removeData";
-import {setData} from "../reaction/setData";
-import {submitData} from "../reaction/submitData";
-import {triggerEvent} from "../reaction/triggerEvent";
-import {setClipboardData} from "../reaction/setClipboardData";
-
-/**
- * Functions that will be executed on specific events.
- *
- * @type {{}}
- */
-export const reactionFunctions = {
-    addData,
-    fetchData,
-    moveData,
-    postMessage,
-    redirectNow,
-    removeData,
-    setClipboardData,
-    setData,
-    submitData,
-    triggerEvent,
-};
-
-/**
- * Action component which will append one or more event listeners on the element.
- *
- * @param {Object} props
- *
- * @constructor
- */
-const ReactOnEvent = (props) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const {actionProps: reactionFunctionProps} = props;
-
-    // Event attributes to inject.
-    const eventPropsForAttributes = {};
-
-    for (const [eventName, eventReactionFunctionProps] of Object.entries(reactionFunctionProps)) {
-        // Prepare the callback.
-        // There will be 1 callback per eventName.
-        // Each callback will have a list of objects, each object representing 1 reaction function call.
-        eventPropsForAttributes[eventName] = (event) => {
-            let lastStopPropagation = true;
-
-            for (const singleReactionFunctionProps of eventReactionFunctionProps) {
-                // singleReactionFunctionProps is the object containing info from the data structure.
-                if (!singleReactionFunctionProps) {
-                    continue;
-                }
-
-                const reactionFunction = singleReactionFunctionProps.what && (reactionFunctions[singleReactionFunctionProps.what] ?? null);
-
-                if (!reactionFunction) {
-                    continue;
-                }
-
-                // Call the reaction function with the props, the event details, and context data.
-                reactionFunction({args: singleReactionFunctionProps, event, globalDataContext, templateContext});
-
-                if (singleReactionFunctionProps.stopPropagation === true) {
-                    // Stop executing reaction functions of this event early.
-                    break;
-                }
-
-                lastStopPropagation = singleReactionFunctionProps.stopPropagation ?? true;
-            }
-
-            if (lastStopPropagation !== false) {
-                // Stop propagation unless "stopPropagation" is explicitly set on false.
-                // Stopping the propagation is the default behavior.
-                event.stopPropagation();
-            }
-        };
-    }
-
-    // Recreate the component with the event attributes.
-    // The recursive map is required because the item can be nested into a React.Fragment,
-    // and we want to add the attributes on the "real" element.
-    const recursiveMap = (children) => {
-        if (!children) {
-            return children;
-        }
-
-        const childrenArray = Children.toArray(children);
-
-        return Children.map(childrenArray, child => {
-            if (child.type === Fragment) {
-                // Dig deeper.
-                return recursiveMap(child?.props?.children);
-            }
-
-            if (typeof child !== 'object' || !isValidElement(child)) {
-                // Not a React element that can welcome attributes.
-                return child;
-            }
-
-            // Clone the element and append the attributes.
-            return cloneElement(child, eventPropsForAttributes);
-        });
-    };
-
-    const clonedChild = recursiveMap(props.children);
-
-    return <>{clonedChild}</>;
-};
-
-export default ReactOnEvent;

package/lib/component/action/Redirect.jsx

@@ -1,26 +0,0 @@
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-import {useContext} from "react";
-import GlobalDataContext from "../../engine/GlobalDataContext";
-import TemplateContext from "../../engine/TemplateContext";
-
-/**
- * Redirects when the conditions are valid.
- *
- * @param {{actionProps: {to}}} props Action props.
- *
- * @constructor
- */
-const Redirect = (props) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const {to} = props.actionProps;
-
-    if (!to || typeof to !== "string") {
-        return;
-    }
-
-    window.location.href = evaluateTemplateValue({valueToEvaluate: to, globalDataContext, templateContext});
-};
-
-export default Redirect;

package/lib/component/action/Tooltip.jsx

@@ -1,27 +0,0 @@
-/**
- * Action which will append a tooltip when the current component is hovered.
- */
-
-import {OverlayTrigger, Tooltip as BsTooltip} from "react-bootstrap";
-import View from "../../engine/View";
-
-const Tooltip = (props) => {
-    // We use the React Bootstrap Tooltip component.
-    // It requires an OverlayTrigger wrapping component that handles the hover interaction.
-    // The OverlayTrigger child must be able to get a "ref" (as in react refs),
-    // So we wrap the children in a custom HTML tag (tooltip-reference) to be sure it will work.
-    return <OverlayTrigger
-        placement={props.actionProps.placement ?? "top"}
-        overlay={<BsTooltip>
-            <View
-                props={props.actionProps.content}
-                currentData={props.componentProps?.currentData?.actions?.[props.actionIndex] ?? undefined}
-                datafield={props.actionIndex}
-                path={props.componentProps.path + ".actions." + props.actionIndex}
-            />
-        </BsTooltip>}>
-        <tooltip-reference>{props.children}</tooltip-reference>
-    </OverlayTrigger>;
-};
-
-export default Tooltip;

package/lib/component/element/form/CheckBoxField.jsx

@@ -1,215 +0,0 @@
-import React, {useContext} from 'react';
-import Form from 'react-bootstrap/Form';
-import {propsDataLocationToPathAndValue} from "./formElementsCommon";
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {
-    evaluateAttributes,
-    evaluateTemplateValue,
-} from "../../../engine/TemplateSystem";
-import View from "../../../engine/View";
-
-const CheckBoxField = ({props, currentData, datafield, path}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const {updateData} = globalDataContext;
-
-    const attributes = evaluateAttributes(
-        {
-            attrs: props.attributes,
-            globalDataContext,
-            templateContext,
-            options: {
-                normalizeBeforeEvaluation: true,
-            },
-        });
-
-    let options;
-
-    const dynamicOptions = props.dynamicOptions ?? undefined;
-
-    if (dynamicOptions) {
-        // Build the options through the given data.
-        options = evaluateTemplateValue({valueToEvaluate: dynamicOptions, globalDataContext, templateContext}) ?? [];
-    } else {
-        options = props.options ?? [];
-    }
-
-    const controlType = props.controlType ?? undefined;
-
-    // This tells how to save the data when one or more inputs are available.
-    const isUsingSingleValueData = () => {
-        if (props.controlType === "radio") {
-            // Radios can only have a single value.
-            return true;
-        }
-
-        if (props.multiple !== undefined && props.multiple !== false) {
-            // Use the array structure.
-            return props.multiple;
-        }
-
-        // If the options length is > 1, we use the array structure.
-        return props.options?.length === 1;
-    };
-
-    const usesSingleValueData = isUsingSingleValueData();
-
-    // This is the field value when the data is not supplied on initialization.
-    const defaultFieldValue = props.defaultFieldValue ?? (!usesSingleValueData ? [] : undefined);
-
-    const {
-        formData: checkboxFormData,
-        formDataPath,
-    } = propsDataLocationToPathAndValue({
-        currentPath: path,
-        datafield,
-        dataLocation: props.dataLocation,
-        defaultValue: defaultFieldValue,
-        globalDataContext,
-        templateContext,
-    });
-
-    const changeValue = (e) => {
-        if (controlType === "radio") {
-            // When radio, use the "value" property.
-            // When the value is an empty string, we unset the value.
-            // Note: this could be made configurable, to keep the data key when the value is an empty string.
-            let valueToSet;
-
-            switch (e.currentTarget.value) {
-                case "":
-                    valueToSet = undefined;
-                    break;
-
-                case "true":
-                    valueToSet = true;
-                    break;
-
-                case "false":
-                    valueToSet = false;
-                    break;
-
-                case "null":
-                    valueToSet = null;
-                    break;
-
-                default:
-                    valueToSet = e.currentTarget.value;
-                    break;
-            }
-
-            updateData(valueToSet, formDataPath);
-            return;
-        }
-
-        if (usesSingleValueData) {
-            // Save the value directly.
-            updateData(e.currentTarget.checked, formDataPath);
-            return;
-        }
-
-        // Add the value or remove it from the array.
-        let formDataClone = JSON.parse(JSON.stringify(checkboxFormData));
-
-        if (typeof formDataClone !== "object") {
-            // Normalize the value with an object-like structure.
-            formDataClone = [formDataClone];
-        }
-
-        if (e.currentTarget.checked) {
-            // Add the item.
-            formDataClone = addCheckedValueToData(formDataClone, e.currentTarget.value);
-        } else {
-            // Remove the item.
-            formDataClone = removeCheckedValueFromData(formDataClone, e.currentTarget.value);
-        }
-
-        updateData(formDataClone, formDataPath);
-    }
-
-    return <ActionDependant {...props}>
-        <Form.Group {...attributes} controlId={Math.random().toString()}>
-            {options.map((option, i) => {
-                // The option value.
-                const finalOptionValue = typeof option.value === "string" ? evaluateTemplateValue({
-                    globalDataContext: globalDataContext,
-                    templateContext: templateContext,
-                    valueToEvaluate: option.value,
-                }) : option.value;
-
-                const optionAttributes = evaluateAttributes({attrs: option.attributes ?? [], templateContext, globalDataContext, options: {normalizeBeforeEvaluation: true}});
-
-                return <Form.Check
-                    {...optionAttributes}
-                    checked={isChecked(checkboxFormData, finalOptionValue)}
-                    key={i}
-                    label={<View
-                        currentData={currentData?.["options"]?.[i]?.["label"] ?? undefined}
-                        datafield={"label"}
-                        path={path + ".options." + i + ".label"}
-                        props={option.label}/>}
-                    id={`${Math.random()}`}
-                    name={path}
-                    onChange={changeValue}
-                    type={controlType}
-                    value={finalOptionValue}
-                />
-            })}
-        </Form.Group>
-    </ActionDependant>;
-}
-
-function isChecked(checkboxFormData, finalOptionValue) {
-    if (Array.isArray(checkboxFormData)) {
-        return checkboxFormData.includes(finalOptionValue);
-    }
-
-    if (typeof checkboxFormData === 'object') {
-        return Object.values(checkboxFormData).includes(finalOptionValue);
-    }
-
-    if (typeof checkboxFormData === "string") {
-        return checkboxFormData === finalOptionValue;
-    }
-
-    return checkboxFormData === finalOptionValue;
-}
-
-function addCheckedValueToData(checkboxFormData, optionValue) {
-    if (Array.isArray(checkboxFormData)) {
-        checkboxFormData.includes(optionValue) || checkboxFormData.push(optionValue);
-        return checkboxFormData;
-    }
-
-    if (typeof checkboxFormData === 'object') {
-        const arrayValuesCopy = Object.values(checkboxFormData);
-        arrayValuesCopy.includes(optionValue) || arrayValuesCopy.push(optionValue);
-        return arrayValuesCopy;
-    }
-
-    throw new Error('CheckboxField: the value to set is not properly initialized as an object or array.');
-}
-
-function removeCheckedValueFromData(checkboxFormData, optionValue) {
-    function removeIfIncluded(data, optionValue) {
-        data.includes(optionValue) && data.splice(data.indexOf(optionValue), 1);
-    }
-
-    if (Array.isArray(checkboxFormData)) {
-        removeIfIncluded(checkboxFormData, optionValue);
-        return checkboxFormData;
-    }
-
-    if (typeof checkboxFormData === 'object') {
-        const arrayValuesCopy = Object.values(checkboxFormData);
-        removeIfIncluded(arrayValuesCopy, optionValue);
-        return arrayValuesCopy;
-    }
-
-    throw new Error('CheckboxField: the value to set is not properly initialized as an object or array.');
-}
-
-export default CheckBoxField;

package/lib/component/element/form/DateField.jsx

@@ -1,42 +0,0 @@
-import Form from "react-bootstrap/Form";
-import ActionDependant from "../../../engine/Actions";
-import {useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-import {propsDataLocationToPathAndValue} from "./formElementsCommon";
-import {useContext} from "react";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-
-const DateField = (componentProps) => {
-    // TODO: type date & datetime-local support.
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    const props = componentProps.props;
-
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    const {
-        formData,
-        formDataPath,
-    } = propsDataLocationToPathAndValue({
-        currentPath: componentProps.path,
-        datafield: componentProps.datafield,
-        dataLocation: props.dataLocation,
-        defaultValue: props.defaultFieldValue,
-        globalDataContext,
-        templateContext,
-    });
-
-    const onChange = (e) => {
-        globalDataContext.updateData(e.target.value, formDataPath);
-    };
-
-    return <ActionDependant {...props}>
-        <Form.Group {...attributes} controlId={Math.random().toString()}>
-            {props.label && (<Form.Label>{props.label}</Form.Label>)}
-            <Form.Control onChange={onChange} type={"datetime-local"} value={formData ?? ""}/>
-        </Form.Group>
-    </ActionDependant>;
-};
-
-export default DateField;

package/lib/component/element/form/NumberField.jsx

@@ -1,29 +0,0 @@
-import React, {useContext, useState} from 'react';
-import Form from 'react-bootstrap/Form';
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-
-const NumberField = ({props, currentData, datafield, path}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-
-    let [inputValue] = useState(currentData);
-
-    let attributes = props.attributes ?? {};
-
-    const {updateData} = globalDataContext;
-
-    const changeValue = (e) => {
-        updateData(e.currentTarget.value, path);
-    }
-
-    return (
-        <Form.Group className="mb-3" controlId={Math.random().toString()}>
-            <Form.Label>{props.label}</Form.Label>
-            <Form.Control onBlur={changeValue} type={"number"} {...attributes}
-                          defaultValue={inputValue !== "" ? inputValue : (props.default_value ?? "")}
-                          placeholder={props.label}/>
-
-        </Form.Group>
-    )
-}
-
-export default NumberField;