@etsoo/react 1.8.22 → 1.8.24

package/lib/cjs/states/PageState.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageState = exports.PageActionType = void 0;
+const State_1 = require("./State");
+/**
+ * Page action type
+ */
+var PageActionType;
+(function (PageActionType) {
+    // Update data
+    PageActionType["Data"] = "DATA";
+    // Update title
+    PageActionType["Title"] = "TITLE";
+})(PageActionType || (exports.PageActionType = PageActionType = {}));
+/**
+ * User state
+ */
+class PageState {
+    /**
+     * Constructor
+     */
+    constructor() {
+        // Act
+        const { context, provider } = State_1.State.create((state, { type, data }) => {
+            switch (type) {
+                case PageActionType.Data:
+                    // Set page data
+                    return { ...state, ...data };
+                case PageActionType.Title:
+                    // Same title
+                    if (state.title === data.title && state.subtitle === data.subtitle)
+                        return state;
+                    // Set page title
+                    return {
+                        ...state,
+                        ...data
+                    };
+                default:
+                    return state;
+            }
+        }, {}, {});
+        this.context = context;
+        this.provider = provider;
+    }
+}
+exports.PageState = PageState;

package/lib/cjs/states/State.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.State = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+/**
+ * State
+ */
+class State {
+    /**
+     * Generic to create state context and provider
+     * @param reducer Reduce function
+     * @param initState Init state
+     * @param uiCreator Additional UI creator
+     */
+    static create(reducer, initState, calls, uiCreator) {
+        // State context
+        const context = react_1.default.createContext(calls);
+        // State context provider
+        const provider = (props) => {
+            // Destruct
+            const { children, update } = props;
+            // Update reducer
+            const [state, dispatch] = react_1.default.useReducer(reducer, initState);
+            // Callback
+            if (update != null)
+                update(dispatch);
+            if (uiCreator) {
+                // Custom renderer
+                return uiCreator(state, dispatch, props);
+            }
+            else {
+                // Context new value
+                const value = { ...calls, state, dispatch };
+                return (0, jsx_runtime_1.jsx)(context.Provider, { value: value, children: children });
+            }
+        };
+        // Return
+        return {
+            context,
+            provider
+        };
+    }
+}
+exports.State = State;

package/lib/cjs/states/UserState.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserState = exports.UserActionType = void 0;
+const shared_1 = require("@etsoo/shared");
+const State_1 = require("./State");
+/**
+ * User action type
+ * Style like 'const enum' will remove definition of the enum and cause module errors
+ */
+var UserActionType;
+(function (UserActionType) {
+    // Login
+    UserActionType["Login"] = "LOGIN";
+    // Logout
+    UserActionType["Logout"] = "LOGOUT";
+    // Update
+    UserActionType["Update"] = "UPDATE";
+    // Unauthorized
+    UserActionType["Unauthorized"] = "UNAUTHORIZED";
+})(UserActionType || (exports.UserActionType = UserActionType = {}));
+/**
+ * User state
+ */
+class UserState {
+    /**
+     * Constructor
+     */
+    constructor() {
+        const { context, provider } = State_1.State.create((state, action) => {
+            // User reducer
+            switch (action.type) {
+                case UserActionType.Login:
+                    const lastChangedFields = state.authorized && action.user
+                        ? this.getChangedFields(action.user, state)
+                        : undefined;
+                    return {
+                        ...action.user,
+                        authorized: true,
+                        lastChangedFields
+                    };
+                case UserActionType.Logout:
+                    return {
+                        ...state, // Keep other user data
+                        lastChangedFields: undefined,
+                        token: undefined, // Remove token
+                        authorized: false // Flag as unauthorized
+                    };
+                case UserActionType.Update:
+                    if (action.update) {
+                        var newState = { ...state };
+                        action.update(newState);
+                        newState.lastChangedFields = this.getChangedFields(newState, state);
+                        return newState;
+                    }
+                    return state;
+                case UserActionType.Unauthorized:
+                    // Avoid multiple updates (For example, multiple API calls failed with 405)
+                    if (state.authorized === false)
+                        return state;
+                    return {
+                        ...state, // Keep other user data and token for refresh
+                        lastChangedFields: undefined,
+                        authorized: false // Flag as unauthorized
+                    };
+                default:
+                    return state;
+            }
+        }, {}, {});
+        this.context = context;
+        this.provider = provider;
+    }
+    getChangedFields(input, init) {
+        return shared_1.Utils.objectUpdated(input, init, [
+            "authorized",
+            "seconds",
+            "lastChangedFields"
+        ]);
+    }
+}
+exports.UserState = UserState;

package/lib/cjs/uses/useAsyncState.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncState = useAsyncState;
+const react_1 = __importDefault(require("react"));
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+function useAsyncState(initialState) {
+    // State
+    const [state, setState] = react_1.default.useState(initialState);
+    // Resolve sate
+    const resolveState = react_1.default.useRef();
+    // Is mounted or not
+    const isMounted = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // When state update
+    react_1.default.useEffect(() => {
+        if (resolveState.current) {
+            resolveState.current(state);
+        }
+    }, [state]);
+    const setAsyncState = react_1.default.useCallback((newState) => new Promise((resolve) => {
+        if (isMounted.current) {
+            resolveState.current = resolve;
+            setState(newState);
+        }
+    }), []);
+    return [state, setAsyncState];
+}

package/lib/cjs/uses/useCombinedRefs.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCombinedRefs = useCombinedRefs;
+/**
+ * Combined refs
+ * @param refs Refs
+ * @returns Callback
+ */
+function useCombinedRefs(...refs) {
+    return (target) => {
+        // Ignore null reference
+        if (target == null)
+            return;
+        // Update all refs
+        refs.forEach((ref) => {
+            // Null ref
+            if (!ref)
+                return;
+            // Callback function
+            if (typeof ref === "function") {
+                ref(target);
+            }
+            else {
+                // as any to update readonly property
+                Reflect.set(ref, "current", target);
+            }
+        });
+    };
+}

package/lib/cjs/uses/useDelayedExecutor.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedExecutor = useDelayedExecutor;
+const shared_1 = require("@etsoo/shared");
+const react_1 = __importDefault(require("react"));
+/**
+ * Create delayed executor
+ */
+function useDelayedExecutor(func, delayMiliseconcs) {
+    const ref = react_1.default.useRef();
+    if (ref.current == null)
+        ref.current = shared_1.ExtendUtils.delayedExecutor(func, delayMiliseconcs);
+    return ref.current;
+}

package/lib/cjs/uses/useDimensions.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDimensions = useDimensions;
+const shared_1 = require("@etsoo/shared");
+const react_1 = __importDefault(require("react"));
+const useDelayedExecutor_1 = require("./useDelayedExecutor");
+/**
+ * Calculate element(s) dimensions
+ * @param elements Observed elments count
+ * @param updateCallback Update callback
+ * @param miliseconds Miliseconds to wait before update
+ * @param equalCallback Equall callback
+ */
+function useDimensions(elements, updateCallback, miliseconds = 50, equalCallback = shared_1.DomUtils.dimensionEqual) {
+    // State
+    const [state, setState] = react_1.default.useState({
+        count: 0,
+        indices: []
+    });
+    // Dimentions
+    const dimensions = react_1.default.useRef();
+    if (dimensions.current == null) {
+        // Init
+        const init = [];
+        for (let e = 0; e < elements; e++) {
+            init.push(((index) => {
+                return [
+                    (instance) => {
+                        if (instance != null) {
+                            // Current element
+                            const currentElement = init[index][1];
+                            if (currentElement != null) {
+                                // Same target, return
+                                if (currentElement == instance)
+                                    return;
+                                // Cancel observation
+                                resizeObserver.unobserve(currentElement);
+                            }
+                            // Update element
+                            init[index][1] = instance;
+                            // Start observe
+                            resizeObserver.observe(instance);
+                        }
+                    }
+                ];
+            })(e));
+        }
+        dimensions.current = init;
+    }
+    const delayed = (0, useDelayedExecutor_1.useDelayedExecutor)(setState, miliseconds);
+    // Observer
+    const resizeObserver = new ResizeObserver((entries) => {
+        // Update Rect
+        const indices = [];
+        const init = dimensions.current;
+        entries.forEach((entry) => {
+            const index = init.findIndex((item) => item[1] === entry.target);
+            if (index !== -1) {
+                // Previous rect
+                const pre = init[index][2];
+                // New rect
+                const rect = entry.target.getBoundingClientRect();
+                // Check equal
+                if (!equalCallback(pre, rect)) {
+                    // Update callback
+                    if (updateCallback) {
+                        // Return false means no further push
+                        if (updateCallback(entry.target, rect) === false)
+                            return;
+                    }
+                    // Update rect
+                    init[index][2] = rect;
+                    // Push for update
+                    indices.push(index);
+                }
+            }
+        });
+        // Update state
+        if (indices.length > 0) {
+            // Count only for unique update
+            const update = { count: state.count + 1, indices };
+            delayed.call(undefined, update);
+        }
+    });
+    // Layout ready
+    react_1.default.useEffect(() => {
+        return () => {
+            // Clear the observer
+            resizeObserver.disconnect();
+            delayed.clear();
+        };
+    }, []);
+    // Return
+    return { dimensions: dimensions.current, state };
+}

package/lib/cjs/uses/useParamsEx.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParamsEx = useParamsEx;
+const shared_1 = require("@etsoo/shared");
+const react_router_1 = require("react-router");
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+function useParamsEx(template) {
+    // Get parameters
+    const params = (0, react_router_1.useParams)();
+    // Return
+    return shared_1.DomUtils.dataAs(params, template, false);
+}

package/lib/cjs/uses/useRefs.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefs = useRefs;
+const react_1 = __importDefault(require("react"));
+/**
+ * Create multiple refs
+ * @param fields Fields
+ * @returns Result
+ */
+function useRefs(fields) {
+    const refs = {};
+    fields.forEach((field) => (refs[field] = react_1.default.useRef(null)));
+    return refs;
+}

package/lib/cjs/uses/useRequiredContext.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRequiredContext = useRequiredContext;
+const react_1 = __importDefault(require("react"));
+/**
+ * Required context
+ * @param context Context
+ * @returns Value
+ */
+function useRequiredContext(context) {
+    const value = react_1.default.useContext(context);
+    if (value == null) {
+        throw new Error(`useRequiredContext: ${context.displayName} is required`);
+    }
+    return value;
+}

package/lib/cjs/uses/useSearchParamsEx.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchParamsEx = useSearchParamsEx;
+const shared_1 = require("@etsoo/shared");
+const react_router_1 = require("react-router");
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+function useSearchParamsEx(template) {
+    // Get parameters
+    const [sp] = (0, react_router_1.useSearchParams)();
+    const paras = Object.fromEntries(Object.keys(template).map((key) => {
+        const type = template[key];
+        return [key, type.endsWith("[]") ? sp.getAll(key) : sp.get(key)];
+    }));
+    // Return
+    return shared_1.DomUtils.dataAs(paras, template, false);
+}

package/lib/cjs/uses/useTimeout.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeout = void 0;
+const shared_1 = require("@etsoo/shared");
+const react_1 = __importDefault(require("react"));
+/**
+ * For setTimeout to merge actions
+ * @param action Action function
+ * @param milliseconds Interval of milliseconds
+ */
+const useTimeout = (action, milliseconds) => {
+    // Delayed
+    const d = shared_1.ExtendUtils.delayedExecutor(action, milliseconds);
+    // Merge into the life cycle
+    react_1.default.useEffect(() => {
+        d.call();
+        return () => {
+            d.clear();
+        };
+    }, []);
+    // Return cancel method
+    return {
+        cancel: d.clear
+    };
+};
+exports.useTimeout = useTimeout;

package/lib/cjs/uses/useWindowScroll.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowScroll = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Detect window scroll
+ * @returns Scroll location
+ */
+const useWindowScroll = () => {
+    // State
+    const [pos, setPos] = react_1.default.useState({
+        x: window.scrollX,
+        y: window.scrollY
+    });
+    react_1.default.useEffect(() => {
+        let ticking = false;
+        let lastPos;
+        let requestAnimationFrameSeed = 0;
+        const scrollHandler = () => {
+            lastPos = {
+                x: window.scrollX,
+                y: window.scrollY
+            };
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+                    if (lastPos.x != pos.x || lastPos.y != pos.y) {
+                        setPos(lastPos);
+                    }
+                });
+                ticking = true;
+            }
+        };
+        window.addEventListener("scroll", scrollHandler, {
+            passive: true,
+            capture: false
+        });
+        return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+            // Remove scroll event
+            window.removeEventListener("scroll", scrollHandler);
+        };
+    }, []);
+    // Return
+    return pos;
+};
+exports.useWindowScroll = useWindowScroll;

package/lib/cjs/uses/useWindowSize.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowSize = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Detect window size
+ * @returns Window size
+ */
+const useWindowSize = () => {
+    // State
+    const [size, setSize] = react_1.default.useState({
+        width: 0,
+        height: 0
+    });
+    react_1.default.useEffect(() => {
+        let ticking = false;
+        let lastSize;
+        let requestAnimationFrameSeed = 0;
+        const resizeHandler = () => {
+            lastSize = {
+                width: document.documentElement.clientWidth,
+                height: document.documentElement.clientHeight
+            };
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+                    if (lastSize.width != size.width || lastSize.height != size.height) {
+                        setSize(lastSize);
+                    }
+                });
+                ticking = true;
+            }
+        };
+        window.addEventListener("resize", resizeHandler, {
+            passive: true,
+            capture: false
+        });
+        return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+            // Remove resize event
+            window.removeEventListener("resize", resizeHandler);
+        };
+    }, []);
+    // Return
+    return size;
+};
+exports.useWindowSize = useWindowSize;

package/lib/mjs/app/CoreConstants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Core constants
+ */
+export declare namespace CoreConstants {
+    /**
+     * User id saved field
+     */
+    const FieldUserIdSaved = "UserIdSaved";
+    /**
+     * Rresh token cache field
+     */
+    const FieldRefreshToken = "RefreshToken";
+}

package/lib/mjs/app/EventWatcher.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/**
+ * Event watcher action
+ */
+export interface EventWatcherAction {
+    /**
+     * Event type
+     */
+    type?: string | string[];
+    /**
+     * Once action or not
+     */
+    once?: boolean;
+    /**
+     * Action
+     */
+    action: (event: React.BaseSyntheticEvent | string) => any;
+}
+/**
+ * Event watcher
+ */
+export declare class EventWatcher {
+    private actions;
+    /**
+     * Add action
+     * @param action Action
+     */
+    add(action: EventWatcherAction): void;
+    /**
+     * Do the event
+     * @param event Event
+     */
+    do(event: React.BaseSyntheticEvent | string): void;
+    private isMatch;
+}

package/lib/mjs/app/InputDialogProps.d.ts

@@ -0,0 +1,19 @@
+import { NotificationContent, NotificationReturn } from "@etsoo/notificationbase";
+import { NotificationReactCallProps } from "../notifier/Notifier";
+/**
+ * Input dialog props
+ */
+export type InputDialogProps = NotificationReactCallProps & {
+    /**
+     * Title
+     */
+    title: NotificationContent<React.ReactNode>;
+    /**
+     * Message
+     */
+    message: NotificationContent<React.ReactNode>;
+    /**
+     * Callback
+     */
+    callback: NotificationReturn<HTMLFormElement | undefined>;
+};