@etsoo/react 1.8.21 → 1.8.23

package/__tests__/EventWatcher.tsx

@@ -13,11 +13,12 @@ function App(props: { callback: () => void }) {
       once: true
     });
   }, []);
+
   return <button onClick={(event) => watcher.do(event)}></button>;
 }
 
 test("Tests for EventWatcher", () => {
-  const callback = jest.fn();
+  const callback = vi.fn();
   render(<App callback={callback} />);
   const button = screen.getByRole<HTMLButtonElement>("button");
   button.click();

package/__tests__/States.tsx

@@ -1,39 +1,37 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { useAsyncState } from '../src/uses/useAsyncState';
-import { act } from 'react';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { useAsyncState } from "../src/uses/useAsyncState";
+import { act } from "react";
 
 function App(props: { callback: (state: number) => void }) {
-    const { callback } = props;
-    const [state, setState] = useAsyncState(0);
+  const { callback } = props;
+  const [state, setState] = useAsyncState(0);
 
-    const [state1] = useAsyncState<number>();
-    expect(state1).toBeUndefined();
+  const [state1] = useAsyncState<number>();
+  expect(state1).toBeUndefined();
 
-    const click = async () => {
-        const currentState = await setState((prev) => prev + 1);
-        callback(currentState + 1);
-    };
-    callback(state);
-    return <button onClick={click}>State: {state}</button>;
+  const click = async () => {
+    const currentState = await setState((prev) => prev + 1);
+    callback(currentState + 1);
+  };
+  callback(state);
+  return <button onClick={click}>State: {state}</button>;
 }
 
-test('Tests for useAsyncState', (done) => {
-    const callback = jest.fn();
-    render(<App callback={callback} />);
-    const button = screen.getByRole<HTMLButtonElement>('button');
-    expect(button.innerHTML).toBe('State: 0');
-    act(() => {
-        button.click();
-    });
+test("Tests for useAsyncState", async () => {
+  const callback = vi.fn();
+  render(<App callback={callback} />);
+  const button = screen.getByRole<HTMLButtonElement>("button");
+  expect(button.innerHTML).toBe("State: 0");
+  act(() => {
+    button.click();
+  });
 
-    expect(button.innerHTML).toBe('State: 1');
+  expect(button.innerHTML).toBe("State: 1");
 
-    setTimeout(function () {
-        // Expect to happen
-        expect(callback).toHaveBeenLastCalledWith(2);
+  // Wait for the state to be updated
+  await new Promise((resolve) => setTimeout(resolve, 100));
 
-        // Notify jest to complete
-        done();
-    }, 100);
+  // Expect to happen
+  expect(callback).toHaveBeenLastCalledWith(2);
 });

package/__tests__/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "Node10",
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,7 +13,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "declaration": true
+    "declaration": true,
+    "types": ["vitest/globals"]
   },
   "include": [".."]
 }

package/lib/cjs/app/CoreConstants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreConstants = void 0;
+/**
+ * Core constants
+ */
+var CoreConstants;
+(function (CoreConstants) {
+    /**
+     * User id saved field
+     */
+    CoreConstants.FieldUserIdSaved = "UserIdSaved";
+    /**
+     * Rresh token cache field
+     */
+    CoreConstants.FieldRefreshToken = "RefreshToken";
+})(CoreConstants || (exports.CoreConstants = CoreConstants = {}));

package/lib/cjs/app/EventWatcher.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventWatcher = void 0;
+/**
+ * Event watcher
+ */
+class EventWatcher {
+    constructor() {
+        this.actions = [];
+    }
+    /**
+     * Add action
+     * @param action Action
+     */
+    add(action) {
+        this.actions.push(action);
+    }
+    /**
+     * Do the event
+     * @param event Event
+     */
+    do(event) {
+        // Type
+        const type = typeof event === "string" ? event : event.type;
+        // Execute
+        const removeIndices = [];
+        this.actions.forEach((item, index) => {
+            if (!this.isMatch(item, type))
+                return;
+            item.action(event);
+            if (item.once)
+                removeIndices.push(index);
+        });
+        // Remove all once actions
+        removeIndices.reverse().forEach((index) => this.actions.splice(index, 1));
+    }
+    isMatch(action, type) {
+        if (action.type == null)
+            return true;
+        if (typeof action.type === "string")
+            return action.type === type;
+        return action.type.includes(type);
+    }
+}
+exports.EventWatcher = EventWatcher;

package/lib/cjs/app/InputDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/app/ReactUtils.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactUtils = void 0;
+const shared_1 = require("@etsoo/shared");
+/**
+ * React utils
+ */
+var ReactUtils;
+(function (ReactUtils) {
+    /**
+     * Format input value
+     * @param value Input value
+     * @returns Formatted value
+     */
+    function formatInputValue(value) {
+        if (value === null)
+            return undefined;
+        if (typeof value === "number")
+            return value;
+        if (typeof value === "string")
+            return value;
+        if (Array.isArray(value))
+            return value;
+        return String(value);
+    }
+    ReactUtils.formatInputValue = formatInputValue;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event) {
+        // No target
+        // HTMLElement <= Element, SVGElement <= Element
+        if (!(event.target instanceof Element))
+            return true;
+        // Outside of the currentTarget
+        let target = event.target;
+        if (!event.currentTarget.contains(target))
+            return false;
+        while (target != null && target != event.currentTarget) {
+            const nodeName = target.nodeName.toUpperCase();
+            if (nodeName === "INPUT" ||
+                nodeName === "BUTTON" ||
+                nodeName === "A" ||
+                target.hasAttribute("onClick"))
+                return false;
+            target = target.parentElement;
+        }
+        return true;
+    }
+    ReactUtils.isSafeClick = isSafeClick;
+    /**
+     * Trigger input change event
+     * @param input Form input
+     * @param value New value
+     * @param cancelable Cancelable
+     */
+    function triggerChange(input, value, cancelable = false) {
+        // Radio type not supported
+        if (input.type === "radio")
+            return;
+        // checked?
+        const checked = input.type === "checkbox";
+        // Property name
+        const property = checked ? "checked" : "value";
+        // input.value = newValue will not trigger the change event
+        // input type = 'hidden' will also not trigger the event
+        // https://coryrylan.com/blog/trigger-input-updates-with-react-controlled-inputs
+        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, property)?.set;
+        if (checked) {
+            const checkedValue = input.value == value;
+            nativeInputValueSetter?.call(input, checkedValue);
+            const clickEvent = new Event("click", {
+                bubbles: true,
+                cancelable
+            });
+            input.dispatchEvent(clickEvent);
+        }
+        else {
+            nativeInputValueSetter?.call(input, value);
+            const inputEvent = new Event("change", {
+                bubbles: true,
+                cancelable
+            });
+            input.dispatchEvent(inputEvent);
+        }
+    }
+    ReactUtils.triggerChange = triggerChange;
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value, return false continue to process
+     */
+    function updateRefs(refs, data, callback) {
+        const local = callback == null
+            ? undefined
+            : typeof callback === "function"
+                ? callback
+                : (item, value) => {
+                    item[callback] = value;
+                };
+        let k;
+        for (k in refs) {
+            const ref = refs[k];
+            const item = ref?.current;
+            if (item == null)
+                continue;
+            if (local && local(item, data[k]) !== false) {
+                continue;
+            }
+            else if (item instanceof HTMLInputElement ||
+                item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement) {
+                const value = shared_1.Utils.getNestedValue(data, item.name || k);
+                const isDateTime = item.type === "datetime-local";
+                if (isDateTime || item.type === "date") {
+                    item.value =
+                        shared_1.DateUtils.formatForInput(value, isDateTime ? false : undefined) ??
+                            "";
+                }
+                else {
+                    item.value = `${value ?? ""}`;
+                }
+            }
+            else {
+                item.value = data[k];
+            }
+        }
+    }
+    ReactUtils.updateRefs = updateRefs;
+    /**
+     * Update data with refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to return new value
+     * @param ignoreEmpty Ignore empty string or not, default true
+     */
+    function updateRefValues(refs, data, callback, ignoreEmpty = true) {
+        const local = callback == null
+            ? undefined
+            : typeof callback === "function"
+                ? callback
+                : (item) => item[callback];
+        const formatValue = (value) => {
+            if (ignoreEmpty && value === "")
+                return null;
+            return value;
+        };
+        let k;
+        for (k in refs) {
+            const ref = refs[k];
+            const item = ref?.current;
+            if (item == null)
+                continue;
+            if (local) {
+                data[k] = local(item);
+            }
+            else if (item instanceof HTMLInputElement) {
+                shared_1.Utils.setNestedValue(data, item.name || k, formatValue(shared_1.DomUtils.getInputValue(item)), true);
+            }
+            else if (item instanceof HTMLTextAreaElement ||
+                item instanceof HTMLSelectElement) {
+                shared_1.Utils.setNestedValue(data, item.name || k, formatValue(item.value), true);
+            }
+            else {
+                data[k] = item.value;
+            }
+        }
+    }
+    ReactUtils.updateRefValues = updateRefValues;
+})(ReactUtils || (exports.ReactUtils = ReactUtils = {}));

package/lib/cjs/components/DnDList.js

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DnDList = DnDList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const react_1 = __importDefault(require("react"));
+function SortableItem(props) {
+    // Destruct
+    const { id, itemRenderer, style = {} } = props;
+    // Use sortable
+    const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = (0, sortable_1.useSortable)({ id });
+    const allStyle = {
+        ...style,
+        transform: utilities_1.CSS.Transform.toString(transform),
+        transition
+    };
+    const nodeRef = {
+        style: allStyle,
+        ref: setNodeRef,
+        ...attributes
+    };
+    const actionNodeRef = {
+        ...listeners,
+        ref: setActivatorNodeRef
+    };
+    return itemRenderer(nodeRef, actionNodeRef);
+}
+/**
+ * DnD (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+function DnDList(props) {
+    // Destruct
+    const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
+    // States
+    const [items, setItems] = react_1.default.useState([]);
+    const [activeId, setActiveId] = react_1.default.useState();
+    const changeItems = (newItems) => {
+        // Possible to alter items with the handler
+        if (onChange)
+            onChange(newItems);
+        // Update state
+        setItems(newItems);
+    };
+    // Drag event handlers
+    function handleDragStart(event) {
+        const { active } = event;
+        setActiveId(active.id);
+    }
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            // Indices
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over.id);
+            // Clone
+            const newItems = [...items];
+            // Removed item
+            const [removed] = newItems.splice(oldIndex, 1);
+            // Insert to the destination index
+            newItems.splice(newIndex, 0, removed);
+            changeItems(newItems);
+            // Drag end handler
+            if (onDragEnd)
+                onDragEnd(newItems);
+        }
+        setActiveId(undefined);
+    }
+    // Methods
+    react_1.default.useImperativeHandle(mRef, () => {
+        return {
+            addItem(newItem) {
+                // Existence check
+                if (items.some((item) => item[labelField] === newItem[labelField])) {
+                    return false;
+                }
+                // Clone
+                const newItems = [newItem, ...items];
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            addItems(inputItems) {
+                // Clone
+                const newItems = [...items];
+                // Insert items
+                inputItems.forEach((newItem) => {
+                    // Existence check
+                    if (newItems.some((item) => item[labelField] === newItem[labelField])) {
+                        return;
+                    }
+                    newItems.push(newItem);
+                });
+                // Update the state
+                changeItems(newItems);
+                return newItems.length - items.length;
+            },
+            editItem(newItem, index) {
+                // Existence check
+                const newIndex = items.findIndex((item) => item[labelField] === newItem[labelField]);
+                if (newIndex >= 0 && newIndex !== index) {
+                    // Label field is the same with a different item
+                    return false;
+                }
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1, newItem);
+                // Update the state
+                changeItems(newItems);
+                return true;
+            },
+            deleteItem(index) {
+                // Clone
+                const newItems = [...items];
+                // Remove the item
+                newItems.splice(index, 1);
+                // Update the state
+                changeItems(newItems);
+            }
+        };
+    }, [items]);
+    react_1.default.useEffect(() => {
+        setItems(props.items);
+    }, [props.items]);
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: items.map((item, index) => {
+                const id = item[keyField];
+                return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
+            }) }) }));
+}

package/lib/cjs/components/DynamicRouter.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicRouter = DynamicRouter;
+exports.createDynamicRouter = createDynamicRouter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const appscript_1 = require("@etsoo/appscript");
+const react_router_1 = require("react-router");
+function getEntries(host) {
+    const startUrl = host.getStartUrl();
+    return startUrl == null ? undefined : [startUrl];
+}
+/**
+ * Dynamic router
+ * @param props Props
+ * @returns Component
+ */
+function DynamicRouter(props) {
+    // Destruct
+    const { basename, children } = props;
+    // Layout
+    const host = appscript_1.BridgeUtils.host;
+    return host == null ? ((0, jsx_runtime_1.jsx)(react_router_1.BrowserRouter, { basename: basename, children: children })) : ((0, jsx_runtime_1.jsx)(react_router_1.MemoryRouter, { basename: basename, initialEntries: getEntries(host), children: children }));
+}
+/**
+ * Create dynamic router
+ * @param routes Routes
+ * @param opts Options
+ * @returns Router
+ */
+function createDynamicRouter(routes, opts) {
+    // Is host?
+    const host = appscript_1.BridgeUtils.host;
+    if (host == null) {
+        return (0, react_router_1.createBrowserRouter)(routes, opts);
+    }
+    else {
+        return (0, react_router_1.createMemoryRouter)(routes, opts);
+    }
+}

package/lib/cjs/components/GridColumn.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridDeletedCellBoxStyle = exports.GridAlignGet = exports.GridDataType = void 0;
+const appscript_1 = require("@etsoo/appscript");
+const shared_1 = require("@etsoo/shared");
+/**
+ * Grid data type
+ */
+var GridDataType = shared_1.DataTypes.CombinedEnum;
+exports.GridDataType = GridDataType;
+/**
+ * Data align get
+ * @param align Align
+ * @param type Data type
+ */
+const GridAlignGet = (align, type) => {
+    if (align == null && type != null) {
+        if (type === GridDataType.Money ||
+            type === GridDataType.IntMoney ||
+            type === GridDataType.Int ||
+            type === GridDataType.Number)
+            return "right";
+        else if (type === GridDataType.Boolean)
+            return "center";
+    }
+    return align;
+};
+exports.GridAlignGet = GridAlignGet;
+/**
+ * Grid deleted cell box style
+ * @param data Data
+ * @returns Result
+ */
+const GridDeletedCellBoxStyle = (data) => {
+    if (data == null)
+        return {};
+    const status = "status" in data
+        ? data.status
+        : "entityStatus" in data
+            ? data.entityStatus
+            : appscript_1.EntityStatus.Normal;
+    if (status === appscript_1.EntityStatus.Inactivated || status === appscript_1.EntityStatus.Deleted)
+        return { textDecoration: "line-through" };
+    return {};
+};
+exports.GridDeletedCellBoxStyle = GridDeletedCellBoxStyle;

package/lib/cjs/components/GridLoader.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridSizeGet = void 0;
+exports.GridDataGet = GridDataGet;
+exports.GridDataGetData = GridDataGetData;
+const shared_1 = require("@etsoo/shared");
+/**
+ * Grid size calculation
+ * @param size Size
+ * @param input Input
+ */
+const GridSizeGet = (size, input) => {
+    if (typeof size === "function")
+        return size(input);
+    return size;
+};
+exports.GridSizeGet = GridSizeGet;
+/**
+ * Grid data get with format
+ * @param data Data
+ * @param template Template
+ * @param keepSource Keep source data
+ * @returns Json data
+ */
+function GridDataGet(props, template, keepSource) {
+    // Destruct
+    const { data, ...rest } = props;
+    // DomUtils.dataAs(data, template);
+    return { ...GridDataGetData(data, template, keepSource), ...rest };
+}
+/**
+ * Grid data get with format
+ * @param data Data
+ * @param template Template
+ * @param keepSource Keep source data
+ * @returns Json data
+ */
+function GridDataGetData(data, template, keepSource) {
+    // Clear form empty value
+    if (data instanceof FormData) {
+        shared_1.DomUtils.clearFormData(data);
+    }
+    // Conditions
+    // Set keepSource to true to hold form data, even they are invisible from the conditions
+    const conditions = data == null
+        ? {}
+        : shared_1.DomUtils.dataAs(data, template, keepSource);
+    return conditions;
+}

package/lib/cjs/components/GridMethodRef.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/components/ListItemReact.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/components/ScrollRestoration.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollRestoration = ScrollRestoration;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_router_1 = require("react-router");
+const useWindowScroll_1 = require("../uses/useWindowScroll");
+const urls = {};
+/**
+ * Scroll restoration
+ */
+function ScrollRestoration() {
+    // Location key
+    const { key } = (0, react_router_1.useLocation)();
+    // Mounted
+    const mounted = react_1.default.useRef(false);
+    // Detect scroll
+    const data = (0, useWindowScroll_1.useWindowScroll)();
+    if (mounted.current) {
+        urls[key] = data;
+    }
+    // Setup
+    react_1.default.useEffect(() => {
+        const pos = urls[key];
+        if (pos) {
+            window.scrollTo(pos.x, pos.y);
+        }
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, [key]);
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+}