@vuu-ui/vuu-utils 2.1.18 → 2.1.19-beta.2

package/src/common-types.js

@@ -0,0 +1,11 @@
+const MEASURES = {
+    horizontal: {
+        positionProp: "left",
+        sizeProp: "width"
+    },
+    vertical: {
+        positionProp: "top",
+        sizeProp: "height"
+    }
+};
+export { MEASURES };

package/src/component-registry.js

@@ -0,0 +1,83 @@
+import { hasCustomRenderer, isColumnTypeRenderer, isTypeDescriptor } from "./column-utils.js";
+const containersSet = new Set();
+const viewsSet = new Set();
+const layoutComponentsMap = new Map();
+const cellRenderersMap = new Map();
+const columnHeaderRenderersMap = new Map();
+const configEditorsMap = new Map();
+const cellConfigPanelsMap = new Map();
+const editRuleValidatorsMap = new Map();
+const optionsMap = new Map();
+const rowClassGeneratorsMap = new Map();
+const isTypeCompatible = (rendererType, serverDataType)=>{
+    if (void 0 === rendererType || "private" === rendererType) return true;
+    if (!Array.isArray(rendererType)) return rendererType === serverDataType;
+    if ("json" === serverDataType) return false;
+    return rendererType.includes(serverDataType);
+};
+const isContainer = (componentType)=>containersSet.has(componentType);
+const isView = (componentType)=>viewsSet.has(componentType);
+const isLayoutComponent = (componentType)=>isContainer(componentType) || isView(componentType);
+const isCellRenderer = (type, component)=>void 0 !== component && "cell-renderer" === type;
+const isColumnHeaderContentRenderer = (type, component)=>"column-header-content-renderer" === type;
+const isColumnHeaderLabelRenderer = (type, component)=>"column-header-label-renderer" === type;
+const isCellConfigPanel = (type, component)=>"cell-config-panel" === type;
+const isEditRuleValidator = (type, component)=>"data-edit-validator" === type;
+const isRowClassGenerator = (type, component)=>"row-class-generator" === type;
+function registerComponent(componentName, component, componentType, options) {
+    if ("container" === componentType || "view" === componentType || "component" === componentType) {
+        layoutComponentsMap.set(componentName, component);
+        if ("container" === componentType) containersSet.add(componentName);
+        else if ("view" === componentType) viewsSet.add(componentName);
+    } else if (isCellRenderer(componentType, component)) cellRenderersMap.set(componentName, component);
+    else if (isColumnHeaderContentRenderer(componentType, component)) columnHeaderRenderersMap.set(componentName, component);
+    else if (isColumnHeaderLabelRenderer(componentType, component)) columnHeaderRenderersMap.set(componentName, component);
+    else if (isCellConfigPanel(componentType, component)) cellConfigPanelsMap.set(componentName, component);
+    else if (isEditRuleValidator(componentType, component)) editRuleValidatorsMap.set(componentName, component);
+    else if (isRowClassGenerator(componentType, component)) rowClassGeneratorsMap.set(componentName, component);
+    if (options) optionsMap.set(componentName, options);
+}
+const registerConfigurationEditor = (componentName, configurationEditor)=>{
+    configEditorsMap.set(componentName, configurationEditor);
+};
+const getRegisteredCellRenderers = (cellRendererDataType)=>{
+    const rendererNames = Array.from(cellRenderersMap.keys());
+    const allRenderers = rendererNames.map((name)=>({
+            name,
+            ...optionsMap.get(name)
+        })).filter(({ userCanAssign })=>false !== userCanAssign);
+    if (cellRendererDataType) return allRenderers.filter((renderer)=>isTypeCompatible(renderer.serverDataType, cellRendererDataType));
+    return allRenderers;
+};
+const getLayoutComponent = (componentName)=>{
+    const layoutComponent = layoutComponentsMap.get(componentName);
+    if (layoutComponent) return layoutComponent;
+    throw Error(`layout component ${componentName} not found in ComponentRegistry`);
+};
+const getCellRendererOptions = (renderName)=>optionsMap.get(renderName);
+function getCellRenderer(column) {
+    return dataCellRenderer(column);
+}
+function getColumnHeaderContentRenderer(column) {
+    if (column.colHeaderContentRenderer) return columnHeaderRenderersMap.get(column.colHeaderContentRenderer);
+}
+function getColumnHeaderLabelRenderer(column) {
+    if (column.colHeaderLabelRenderer) return columnHeaderRenderersMap.get(column.colHeaderLabelRenderer);
+}
+const getRowClassNameGenerator = (generatorId)=>rowClassGeneratorsMap.get(generatorId);
+function getConfigurationEditor(configEditor = "") {
+    return configEditorsMap.get(configEditor);
+}
+function getCellConfigPanelRenderer(name) {
+    return cellConfigPanelsMap.get(name);
+}
+function getEditRuleValidator(name) {
+    return editRuleValidatorsMap.get(name);
+}
+function dataCellRenderer(column) {
+    if ("boolean" === column.serverDataType && !hasCustomRenderer(column.type)) return cellRenderersMap.get("checkbox-cell");
+    if (column.editable && !hasCustomRenderer(column.type)) return cellRenderersMap.get("input-cell");
+    if (isTypeDescriptor(column.type) && isColumnTypeRenderer(column.type.renderer)) return cellRenderersMap.get(column.type.renderer?.name);
+    if ("boolean" === column.serverDataType) return cellRenderersMap.get("checkbox-cell");
+}
+export { getCellConfigPanelRenderer, getCellRenderer, getCellRendererOptions, getColumnHeaderContentRenderer, getColumnHeaderLabelRenderer, getConfigurationEditor, getEditRuleValidator, getLayoutComponent, getRegisteredCellRenderers, getRowClassNameGenerator, isContainer, isLayoutComponent, isView, registerComponent, registerConfigurationEditor };

package/src/context-definitions/DataContext.js

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+const getServerAPI = ()=>{
+    throw Error("no DataProvider has been installed");
+};
+class NullDataSourceConstructor {
+    constructor(_){
+        throw Error("no DataProvider has been installed");
+    }
+}
+const DataContext = /*#__PURE__*/ createContext({
+    isLocalData: false,
+    getServerAPI: getServerAPI,
+    VuuDataSource: NullDataSourceConstructor
+});
+export { DataContext, NullDataSourceConstructor };

package/src/context-definitions/DataProvider.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DataContext } from "./DataContext.js";
+const DataProvider = ({ children, getServerAPI, isLocalData = true, VuuDataSource })=>/*#__PURE__*/ jsx(DataContext.Provider, {
+        value: {
+            isLocalData,
+            VuuDataSource,
+            getServerAPI
+        },
+        children: children
+    });
+const useData = ()=>useContext(DataContext);
+export { DataProvider, useData };

package/src/context-definitions/DataSourceProvider.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DataSourceContext = /*#__PURE__*/ createContext({
+    dataSource: void 0
+});
+const DataSourceProvider = ({ children, dataSource })=>/*#__PURE__*/ jsx(DataSourceContext.Provider, {
+        value: {
+            dataSource
+        },
+        children: children
+    });
+function useDataSource(throwIfNoDataSource = false) {
+    const { dataSource } = useContext(DataSourceContext);
+    if (dataSource) return dataSource;
+    if (throwIfNoDataSource) throw Error("[DataSOurceProvider] useDataSource,no DataSourceProvider has been declared ");
+    console.warn("[DataSourceProvider] useDataSource: no DataSourceProvider has been declared");
+}
+export { DataSourceContext, DataSourceProvider, useDataSource };

package/src/context-definitions/WorkspaceContext.js

@@ -0,0 +1,14 @@
+import react, { useContext } from "react";
+const WorkspaceContext = /*#__PURE__*/ react.createContext({
+    getApplicationSettings: ()=>void 0,
+    layoutMetadata: [],
+    saveLayout: ()=>void 0,
+    saveApplicationLayout: ()=>void 0,
+    saveApplicationSettings: ()=>void 0,
+    loadLayoutById: ()=>void 0
+});
+const usePlaceholderJSON = ()=>{
+    const { layoutPlaceholderJSON } = useContext(WorkspaceContext);
+    return layoutPlaceholderJSON;
+};
+export { WorkspaceContext, usePlaceholderJSON };

package/src/cookie-utils.js

@@ -0,0 +1,15 @@
+const getCookieValue = (name)=>{
+    if (globalThis.document?.cookie !== void 0) return globalThis.document.cookie.split("; ").find((row)=>row.startsWith(`${name}=`))?.split("=")[1];
+};
+function setCookieValue(name, value, days) {
+    let expires = "";
+    if ("number" == typeof days) {
+        const date = new Date();
+        date.setTime(date.getTime() + 24 * days * 3600000);
+        expires = "; expires=" + date.toUTCString();
+    }
+    const encodedName = encodeURIComponent(name);
+    const encodedValue = encodeURIComponent(value);
+    document.cookie = `${encodedName}=${encodedValue}${expires};`;
+}
+export { getCookieValue, setCookieValue };

package/src/css-utils.js

@@ -0,0 +1,5 @@
+const importCSS = async (path)=>{
+    const container = new CSSStyleSheet();
+    return fetch(path).then((x)=>x.text()).then((x)=>container.replace(x));
+};
+export { importCSS };

package/src/data-editing/DataEditingProvider.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DataEditingContext = /*#__PURE__*/ createContext(void 0);
+const DataEditingProvider = ({ children, editSession })=>/*#__PURE__*/ jsx(DataEditingContext.Provider, {
+        value: editSession,
+        children: children
+    });
+function useEditSession(throwIfUnavailable = false) {
+    const editSession = useContext(DataEditingContext);
+    if (void 0 !== editSession) return editSession;
+    if (throwIfUnavailable) throw Error("[useEditSession] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider");
+}
+export { DataEditingProvider, useEditSession };

package/src/data-editing/EditButtons.js

@@ -0,0 +1,32 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import { useCallback, useMemo, useState } from "react";
+const EditButtons = ({ editSession, onCancel, onSave })=>{
+    const [editState, setEditState] = useState("clean");
+    const handleSave = useCallback(()=>{
+        onSave("stale" === editState);
+    }, [
+        editState,
+        onSave
+    ]);
+    useMemo(()=>{
+        editSession?.on("editState", setEditState);
+    }, [
+        editSession
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                disabled: "clean" === editState || "invalid" === editState,
+                onClick: handleSave,
+                sentiment: "accented",
+                children: "stale" === editState ? "Save (force)" : "Save"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                onClick: onCancel,
+                children: "Cancel"
+            })
+        ]
+    });
+};
+export { EditButtons };

package/src/data-editing/EditModeProvider.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const EditModeContext = /*#__PURE__*/ createContext({
+    isEditMode: false,
+    setEditMode: ()=>"EditModeProvider in place"
+});
+const EditModeProvider = ({ children })=>{
+    const [isEditMode, setEditMode] = useState(false);
+    return /*#__PURE__*/ jsx(EditModeContext.Provider, {
+        value: {
+            isEditMode,
+            setEditMode
+        },
+        children: children
+    });
+};
+const useEditMode = ()=>useContext(EditModeContext);
+export { EditModeProvider, useEditMode };

package/src/data-editing/EditSession.js

@@ -0,0 +1,149 @@
+import { EventEmitter } from "../event-emitter.js";
+import { isRpcError } from "../protocol-message-utils.js";
+class EditError extends Error {
+}
+class StaleUpdateError extends Error {
+}
+class EditSession extends EventEmitter {
+    #rowEdits = new Map();
+    #editCount = 0;
+    #invalidCount = 0;
+    #sourceTableDataSource;
+    #sessionDataSource;
+    #inEditMode = false;
+    constructor(dataSource){
+        super();
+        this.#sourceTableDataSource = dataSource;
+    }
+    get editCount() {
+        return this.#editCount;
+    }
+    set editCount(val) {
+        if (val !== this.#editCount) {
+            const oldCount = this.#editCount;
+            this.#editCount = val;
+            if (0 === val) this.emit("editState", "clean");
+            else if (0 === oldCount) this.emit("editState", "dirty");
+        }
+    }
+    get invalidCount() {
+        return this.#invalidCount;
+    }
+    set invalidCount(val) {
+        if (val !== this.#invalidCount) {
+            const oldCount = this.#invalidCount;
+            this.#invalidCount = val;
+            if (0 === val) this.emit("editState", 0 === this.#editCount ? "clean" : "dirty");
+            else if (0 === oldCount) this.emit("editState", "invalid");
+        }
+    }
+    clear() {
+        this.#rowEdits.clear();
+        this.#editCount = 0;
+        this.#inEditMode = false;
+    }
+    async begin(editSessionMode) {
+        try {
+            this.#inEditMode = true;
+            const sessionDataSource = await this.#sourceTableDataSource?.beginEditSession?.(editSessionMode);
+            this.#sessionDataSource = sessionDataSource;
+            return sessionDataSource;
+        } catch (e) {
+            this.#inEditMode = false;
+        }
+    }
+    get dataSource() {
+        return this.#sessionDataSource ?? this.#sourceTableDataSource;
+    }
+    async end(saveChanges = false, force = false) {
+        try {
+            if (this.#inEditMode) {
+                await this.dataSource?.endEditSession?.(saveChanges, force);
+                this.clear();
+            }
+        } catch (e) {
+            if (e instanceof StaleUpdateError) this.emit("editState", "stale");
+            else console.error(`[EditSession] ${e.message}`);
+        }
+    }
+    get inEditMode() {
+        return this.#inEditMode;
+    }
+    get editState() {
+        return 0 === this.editCount ? "clean" : "dirty";
+    }
+    getOrCreateRowEdits(key) {
+        const rowEditDetails = this.#rowEdits.get(key);
+        if (rowEditDetails) return rowEditDetails;
+        {
+            const rowEditDetails = {
+                cellEdits: new Map()
+            };
+            this.#rowEdits.set(key, rowEditDetails);
+            return rowEditDetails;
+        }
+    }
+    storeCellEdit(cellEdits, column, originalValue, editedValue, isValid) {
+        const cellEdit = cellEdits.get(column);
+        if (cellEdit) {
+            if (cellEdit.originalValue === editedValue) {
+                cellEdits.delete(column);
+                cellEdit.isDeleted = true;
+                if (cellEdit.isValid) this.editCount -= 1;
+                else this.invalidCount -= 1;
+            } else if (isValid && false === cellEdit.isValid) {
+                cellEdit.isValid = true;
+                cellEdit.editedValue = editedValue;
+                this.#invalidCount -= 1;
+                this.editCount += 1;
+            }
+            return cellEdit;
+        }
+        {
+            const cellEdit = {
+                originalValue,
+                editedValue,
+                isValid
+            };
+            cellEdits.set(column, cellEdit);
+            if (isValid) this.editCount += 1;
+            return cellEdit;
+        }
+    }
+    async commit(key, columnName, originalValue, typedValue, isValid) {
+        if (!this.#inEditMode) throw new Error("No edit session in progress");
+        const rowEditDetails = this.getOrCreateRowEdits(key);
+        if (isValid) {
+            const { cellEdits } = rowEditDetails;
+            const cellEdit = this.storeCellEdit(cellEdits, columnName, originalValue, typedValue, isValid);
+            if (cellEdit.isDeleted) {
+                if (0 === rowEditDetails.cellEdits.size) this.#rowEdits.delete(key);
+            }
+            if (this.dataSource?.editCell) {
+                const response = await this.dataSource.editCell(key, columnName, typedValue);
+                if (isRpcError(response)) {
+                    cellEdit.isValid = false;
+                    this.invalidCount += 1;
+                }
+                return {
+                    editedDuringCurrentSession: cellEdit.originalValue !== typedValue,
+                    ...response
+                };
+            }
+        } else {
+            const { cellEdits } = rowEditDetails;
+            let cellEdit = cellEdits.get(columnName);
+            if (cellEdit && false !== cellEdit.isValid) {
+                cellEdit.isValid = false;
+                this.invalidCount += 1;
+            } else if (void 0 === cellEdit) {
+                cellEdit = this.storeCellEdit(cellEdits, columnName, originalValue, typedValue, isValid);
+                this.invalidCount += 1;
+            }
+            return {
+                editedDuringCurrentSession: false
+            };
+        }
+    }
+}
+export { EditError, EditSession, StaleUpdateError };

package/src/data-editing/edit-utils.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatDate } from "../date/index.js";
+const isInlineEditingSession = (editSessionMode)=>editSessionMode.startsWith("inline");
+const timeFormatter = formatDate({
+    time: "hh:mm:ss"
+});
+const getVuuEditMessage = (dataRow, column, originalValue)=>{
+    const vuuMsg = dataRow.vuuMsg;
+    if ("string" == typeof vuuMsg && "" !== vuuMsg) {
+        const columnMessages = vuuMsg.split(",");
+        const msgForCol = columnMessages.find((msg)=>msg.startsWith(`${column.name}:`));
+        if (msgForCol) {
+            const [, value, updatedValue, ts] = msgForCol.split(":");
+            const updateTime = timeFormatter(new Date(parseInt(ts)));
+            return /*#__PURE__*/ jsxs("span", {
+                children: [
+                    "Update rejected. Original value ",
+                    /*#__PURE__*/ jsx("b", {
+                        children: originalValue
+                    }),
+                    " could not be updated to ",
+                    /*#__PURE__*/ jsx("b", {
+                        children: value
+                    }),
+                    ". It was updated to ",
+                    /*#__PURE__*/ jsx("b", {
+                        children: updatedValue
+                    }),
+                    " at ",
+                    updateTime,
+                    "."
+                ]
+            });
+        }
+    }
+};
+export { getVuuEditMessage, isInlineEditingSession };

package/src/data-editing/useEditableTable.js

@@ -0,0 +1,76 @@
+import { useCallback, useMemo, useState } from "react";
+import { useData } from "../context-definitions/DataProvider.js";
+import { useLayoutEffectSkipFirst } from "../useLayoutEffectSkipFirst.js";
+import { EditSession } from "./EditSession.js";
+const useEditableTable = ({ columns, dataSource: dataSourceProp, editSessionMode = "inline-all-rows", isEditMode, onCancel, onSave, table })=>{
+    const { VuuDataSource } = useData();
+    const [sessionDataSource, setSessionDataSource] = useState(void 0);
+    useLayoutEffectSkipFirst(()=>{
+        console.warn("[useEditableTable] columns and or table changed");
+    }, [
+        columns,
+        table
+    ]);
+    const dataSource = useMemo(()=>{
+        if (dataSourceProp) return dataSourceProp;
+        if (table) return new VuuDataSource({
+            columns,
+            table
+        });
+        throw Error("useEditableTable unable to provide DataSource, neither dataSource nor table available as props");
+    }, [
+        VuuDataSource,
+        columns,
+        dataSourceProp,
+        table
+    ]);
+    const editSession = useMemo(()=>new EditSession(dataSource), [
+        dataSource
+    ]);
+    const handleCancel = useCallback(()=>{
+        try {
+            editSession.end();
+            onCancel();
+        } catch (e) {}
+    }, [
+        editSession,
+        onCancel
+    ]);
+    const handleSave = useCallback(async (force = false)=>{
+        dataSource.resume?.();
+        try {
+            await editSession.end(true, force);
+            if (false === editSession.inEditMode) onSave();
+        } catch (e) {
+            console.log(`[useEditableTable] handleSave ${e.message}`);
+        }
+    }, [
+        dataSource,
+        editSession,
+        onSave
+    ]);
+    useMemo(async ()=>{
+        console.log(`[useEditableTable] editMode ${isEditMode}`);
+        if (isEditMode) try {
+            const sessionDataSource = await editSession.begin(editSessionMode);
+            if (sessionDataSource) setSessionDataSource(sessionDataSource);
+        } catch (e) {
+            console.error(e);
+            onCancel();
+        }
+        else await editSession.end();
+    }, [
+        editSession,
+        editSessionMode,
+        isEditMode,
+        onCancel
+    ]);
+    return {
+        dataSource,
+        editSession,
+        onCancel: handleCancel,
+        onSave: handleSave,
+        sessionDataSource
+    };
+};
+export { useEditableTable };

package/src/data-utils.js

@@ -0,0 +1,55 @@
+const UP1 = "up1";
+const UP2 = "up2";
+const DOWN1 = "down1";
+const DOWN2 = "down2";
+const decimalPattern = /^-?[0-9]*\.[0-9]*$/;
+const stringIsValidInt = (val)=>parseInt(val, 10).toString() === val;
+const stringIsValidDecimal = (val)=>stringIsValidInt(val) || decimalPattern.test(val);
+const stringIsValidNumber = (val)=>stringIsValidInt(val) || stringIsValidDecimal(val);
+const numericTypeOfStringValue = (val)=>stringIsValidInt(val) ? "int" : stringIsValidDecimal(val) ? "double" : "NaN";
+const isValidNumber = (n)=>"number" == typeof n && isFinite(n);
+const EMPTY = {};
+const shallowEquals = (o1 = EMPTY, o2 = EMPTY)=>{
+    const props1 = Object.keys(o1);
+    const props2 = Object.keys(o2);
+    return props1.length === props2.length && props1.every((key)=>o1[key] === o2[key]);
+};
+function getMovingValueDirection(newValue, direction, prevValue, decimalPlaces) {
+    if (void 0 === newValue) return "";
+    if (!isFinite(newValue) || void 0 === prevValue || void 0 === direction) return "";
+    {
+        let diff = newValue - prevValue;
+        if (diff) {
+            if ("number" == typeof decimalPlaces) diff = newValue.toFixed(decimalPlaces) - prevValue.toFixed(decimalPlaces);
+        }
+        if (!diff) return "";
+        if ("" === direction) if (diff < 0) return DOWN1;
+        else return UP1;
+        if (diff > 0) if (direction === DOWN1 || direction === DOWN2 || direction === UP2) return UP1;
+        else return UP2;
+        else if (direction === UP1 || direction === UP2 || direction === DOWN2) return DOWN1;
+        else return DOWN2;
+    }
+}
+function asInteger(value, defaultValue) {
+    if ("number" == typeof value) return Number.isInteger(value) ? value : value < 0 ? Math.ceil(value) : Math.floor(value);
+    {
+        const integerValue = parseInt(value ?? "");
+        if (!isNaN(integerValue)) return integerValue;
+        if ("number" == typeof defaultValue) return defaultValue;
+        throw Error(`parseIndex invalid value ${value}`);
+    }
+}
+const dataDescriptorTypeToVuuRowDataItemType = ({ serverDataType = "string" })=>{
+    switch(serverDataType){
+        case "double":
+        case "int":
+        case "long":
+            return "number";
+        case "boolean":
+            return "boolean";
+        default:
+            return "string";
+    }
+};
+export { DOWN1, DOWN2, UP1, UP2, asInteger, dataDescriptorTypeToVuuRowDataItemType, getMovingValueDirection, isValidNumber, numericTypeOfStringValue, shallowEquals, stringIsValidDecimal, stringIsValidInt, stringIsValidNumber };