@etsoo/react 1.8.22 → 1.8.24

package/lib/cjs/components/ScrollerGrid.js

@@ -0,0 +1,254 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollerGrid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_window_1 = require("react-window");
+/**
+ * Scroller vertical grid
+ * @param props Props
+ * @returns Component
+ */
+const ScrollerGrid = (props) => {
+    // Destruct
+    const { autoLoad = true, defaultOrderBy, footerRenderer, headerRenderer, itemRenderer, idField = "id", loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, onInitLoad, onUpdateRows, ...rest } = props;
+    // Rows
+    const [rows, updateRows] = react_1.default.useState([]);
+    const setRows = (rows, reset = false) => {
+        refs.current.loadedItems = rows.length;
+        updateRows(rows);
+        if (!reset && onUpdateRows)
+            onUpdateRows(rows, refs.current);
+    };
+    // Refs
+    const refs = react_1.default.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            batchSize: 10
+        },
+        autoLoad,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        loadedItems: 0,
+        selectedItems: [],
+        idCache: {}
+    });
+    const ref = react_1.default.useRef(null);
+    // Load data
+    const loadDataLocal = (pageAdd = 1) => {
+        // Prevent multiple loadings
+        if (!refs.current.hasNextPage || refs.current.isNextPageLoading)
+            return;
+        // Update state
+        refs.current.isNextPageLoading = true;
+        // Parameters
+        const { queryPaging, data } = refs.current;
+        const loadProps = {
+            queryPaging,
+            data
+        };
+        loadData(loadProps, refs.current.lastItem).then((result) => {
+            if (result == null || refs.current.isMounted === false) {
+                return;
+            }
+            refs.current.isMounted = true;
+            const newItems = result.length;
+            refs.current.lastLoadedItems = newItems;
+            refs.current.lastItem = result.at(-1);
+            refs.current.isNextPageLoading = false;
+            refs.current.hasNextPage = newItems >= refs.current.queryPaging.batchSize;
+            if (pageAdd === 0) {
+                // New items
+                const newRows = refs.current.lastLoadedItems
+                    ? [...rows]
+                        .splice(rows.length - refs.current.lastLoadedItems, refs.current.lastLoadedItems)
+                        .concat(result)
+                    : result;
+                refs.current.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField];
+                    refs.current.idCache[id] = null;
+                }
+                // Update rows
+                setRows(newRows);
+            }
+            else {
+                // Set current page
+                if (refs.current.queryPaging.currentPage == null)
+                    refs.current.queryPaging.currentPage = pageAdd;
+                else
+                    refs.current.queryPaging.currentPage += pageAdd;
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+                for (const item of result) {
+                    const id = item[idField];
+                    if (refs.current.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+                setRows(newRows);
+            }
+        });
+    };
+    // Item renderer
+    const itemRendererLocal = (itemProps, state) => {
+        // Custom render
+        const data = itemProps.rowIndex < rows.length ? rows[itemProps.rowIndex] : undefined;
+        return itemRenderer({
+            ...itemProps,
+            data,
+            selectedItems: state.selectedItems,
+            setItems: (callback) => {
+                const result = callback(rows, instance);
+                if (result == null)
+                    return;
+                setRows(result);
+            }
+        });
+    };
+    // Local items renderer callback
+    const onItemsRenderedLocal = (props) => {
+        // No items, means no necessary to load more data during reset
+        const itemCount = rows.length;
+        if (itemCount > 0 && props.visibleRowStopIndex + threshold > itemCount) {
+            // Auto load next page
+            loadDataLocal();
+        }
+        // Custom
+        if (onItemsRendered)
+            onItemsRendered(props);
+    };
+    // Reset the state and load again
+    const reset = (add, items = []) => {
+        const { queryPaging, ...rest } = add ?? {};
+        const resetState = {
+            autoLoad: true,
+            loadedItems: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            lastLoadedItems: undefined,
+            lastItem: undefined,
+            ...rest
+        };
+        Object.assign(refs.current, resetState);
+        Object.assign(refs.current.queryPaging, {
+            currentPage: 0,
+            ...queryPaging
+        });
+        // Reset items
+        if (refs.current.isMounted !== false)
+            setRows(items, true);
+    };
+    const instance = {
+        delete(index) {
+            const item = rows.at(index);
+            if (item) {
+                const newRows = [...rows];
+                newRows.splice(index, 1);
+                setRows(newRows);
+            }
+            return item;
+        },
+        insert(item, start) {
+            const newRows = [...rows];
+            newRows.splice(start, 0, item);
+            setRows(newRows);
+        },
+        scrollTo(params) {
+            ref.current?.scrollTo(params);
+        },
+        scrollToItem(params) {
+            ref.current?.scrollToItem(params);
+        },
+        scrollToRef(scrollOffset) {
+            ref.current?.scrollTo({ scrollLeft: 0, scrollTop: scrollOffset });
+        },
+        scrollToItemRef(index, align) {
+            ref.current?.scrollToItem({ rowIndex: index, align });
+        },
+        select(rowIndex) {
+            // Select only one item
+            const selectedItems = refs.current.selectedItems;
+            selectedItems[0] = rows[rowIndex];
+            if (onSelectChange)
+                onSelectChange(selectedItems);
+        },
+        selectAll(checked) {
+            const selectedItems = refs.current.selectedItems;
+            rows.forEach((row) => {
+                const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
+                if (checked) {
+                    if (index === -1)
+                        selectedItems.push(row);
+                }
+                else if (index !== -1) {
+                    selectedItems.splice(index, 1);
+                }
+            });
+            if (onSelectChange)
+                onSelectChange(selectedItems);
+        },
+        selectItem(item, checked) {
+            const selectedItems = refs.current.selectedItems;
+            const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
+            if (checked) {
+                if (index === -1)
+                    selectedItems.push(item);
+            }
+            else {
+                if (index !== -1)
+                    selectedItems.splice(index, 1);
+            }
+            if (onSelectChange)
+                onSelectChange(selectedItems);
+        },
+        reset,
+        resetAfterColumnIndex(index, shouldForceUpdate) {
+            ref.current?.resetAfterColumnIndex(index, shouldForceUpdate);
+        },
+        resetAfterIndices(params) {
+            ref.current?.resetAfterIndices(params);
+        },
+        resetAfterRowIndex(index, shouldForceUpdate) {
+            ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
+        }
+    };
+    react_1.default.useImperativeHandle(mRef, () => instance, [rows]);
+    react_1.default.useEffect(() => {
+        return () => {
+            refs.current.isMounted = false;
+        };
+    }, []);
+    // Force update to work with the new width and rowHeight
+    react_1.default.useEffect(() => {
+        ref.current?.resetAfterIndices({
+            columnIndex: 0,
+            rowIndex: 0,
+            shouldForceUpdate: true
+        });
+    }, [width, rowHeight]);
+    // Rows
+    const rowLength = rows.length;
+    // Row count
+    const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
+    // Auto load data when current page is 0
+    if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
+        const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
+        if (initItems)
+            reset(initItems[1], initItems[0]);
+        else
+            loadDataLocal();
+    }
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(refs.current), (0, jsx_runtime_1.jsx)(react_window_1.VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
+                    if (data == null)
+                        return [rowIndex, columnIndex].join(",");
+                    // ${data[idField]}-${rowIndex} always unique but no cache for the same item
+                    return [`${data[idField]}`, columnIndex].join(",");
+                }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === "function" ? rowHeight : () => rowHeight, style: { overflowX: "hidden" }, width: width, ...rest, children: (props) => itemRendererLocal(props, refs.current) }), footerRenderer && footerRenderer(rows, refs.current)] }));
+};
+exports.ScrollerGrid = ScrollerGrid;

package/lib/cjs/components/ScrollerList.js

@@ -0,0 +1,205 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollerList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const react_1 = __importDefault(require("react"));
+const react_window_1 = require("react-window");
+const useCombinedRefs_1 = require("../uses/useCombinedRefs");
+const GridLoader_1 = require("./GridLoader");
+// Calculate loadBatchSize
+const calculateBatchSize = (height, itemSize) => {
+    const size = shared_1.Utils.getResult(itemSize, 0);
+    return 2 + Math.ceil(height / size);
+};
+/**
+ * Scroller vertical list
+ * @param props Props
+ * @returns Component
+ */
+const ScrollerList = (props) => {
+    // Destruct
+    const { autoLoad = true, defaultOrderBy, height = document.documentElement.clientHeight, width = "100%", mRef, oRef, style = {}, idField = "id", itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = (0, GridLoader_1.GridSizeGet)(loadBatchSize, height) / 2, onItemsRendered, onInitLoad, onUpdateRows, ...rest } = props;
+    // Style
+    Object.assign(style, {
+        width: "100%",
+        height: "100%",
+        display: "inline-block"
+    });
+    // Refs
+    const listRef = react_1.default.useRef();
+    const outerRef = react_1.default.useRef();
+    const refs = (0, useCombinedRefs_1.useCombinedRefs)(oRef, outerRef);
+    // Rows
+    const [rows, updateRows] = react_1.default.useState([]);
+    const setRows = (rows, reset = false) => {
+        stateRefs.current.loadedItems = rows.length;
+        updateRows(rows);
+        if (!reset && onUpdateRows)
+            onUpdateRows(rows, stateRefs.current);
+    };
+    // States
+    const batchSize = (0, GridLoader_1.GridSizeGet)(loadBatchSize, height);
+    const stateRefs = react_1.default.useRef({
+        queryPaging: {
+            currentPage: 0,
+            orderBy: defaultOrderBy,
+            batchSize
+        },
+        autoLoad,
+        loadedItems: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        selectedItems: [],
+        idCache: {}
+    });
+    // Load data
+    const loadDataLocal = (pageAdd = 1) => {
+        // Prevent multiple loadings
+        if (!stateRefs.current.hasNextPage || stateRefs.current.isNextPageLoading)
+            return;
+        // Update state
+        stateRefs.current.isNextPageLoading = true;
+        // Parameters
+        const { queryPaging, data } = stateRefs.current;
+        const loadProps = {
+            queryPaging,
+            data
+        };
+        loadData(loadProps, stateRefs.current.lastItem).then((result) => {
+            if (result == null || stateRefs.current.isMounted === false) {
+                return;
+            }
+            stateRefs.current.isMounted = true;
+            const newItems = result.length;
+            stateRefs.current.lastLoadedItems = newItems;
+            stateRefs.current.lastItem = result.at(-1);
+            stateRefs.current.hasNextPage = newItems >= batchSize;
+            stateRefs.current.isNextPageLoading = false;
+            if (pageAdd === 0) {
+                // New items
+                const newRows = stateRefs.current.lastLoadedItems
+                    ? [...rows]
+                        .splice(rows.length - stateRefs.current.lastLoadedItems, stateRefs.current.lastLoadedItems)
+                        .concat(result)
+                    : result;
+                stateRefs.current.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField];
+                    stateRefs.current.idCache[id] = null;
+                }
+                // Update rows
+                setRows(newRows);
+            }
+            else {
+                if (stateRefs.current.queryPaging.currentPage == null)
+                    stateRefs.current.queryPaging.currentPage = pageAdd;
+                else
+                    stateRefs.current.queryPaging.currentPage += pageAdd;
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+                for (const item of result) {
+                    const id = item[idField];
+                    if (stateRefs.current.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+                setRows(newRows);
+            }
+        });
+    };
+    const itemRendererLocal = (itemProps) => {
+        // Custom render
+        return itemRenderer({
+            ...itemProps,
+            data: rows[itemProps.index]
+        });
+    };
+    // Reset the state and load again
+    const reset = (add, items = []) => {
+        const { queryPaging, ...rest } = add ?? {};
+        const resetState = {
+            autoLoad: true,
+            loadedItems: 0,
+            hasNextPage: true,
+            isNextPageLoading: false,
+            lastLoadedItems: undefined,
+            lastItem: undefined,
+            ...rest
+        };
+        Object.assign(stateRefs.current, resetState);
+        Object.assign(stateRefs.current.queryPaging, {
+            currentPage: 0,
+            ...queryPaging
+        });
+        // Reset
+        if (stateRefs.current.isMounted !== false)
+            setRows(items, true);
+    };
+    react_1.default.useImperativeHandle(mRef, () => {
+        const refMethods = listRef.current;
+        return {
+            delete(index) {
+                const item = rows.at(index);
+                if (item) {
+                    const newRows = [...rows];
+                    newRows.splice(index, 1);
+                    setRows(newRows);
+                }
+                return item;
+            },
+            insert(item, start) {
+                const newRows = [...rows];
+                newRows.splice(start, 0, item);
+                setRows(newRows);
+            },
+            refresh() {
+                loadDataLocal(0);
+            },
+            reset,
+            scrollToRef(scrollOffset) {
+                refMethods.scrollTo(scrollOffset);
+            },
+            scrollToItemRef(index, align) {
+                refMethods.scrollToItem(index, align);
+            }
+        };
+    }, []);
+    // When layout ready
+    react_1.default.useEffect(() => {
+        // Return clear function
+        return () => {
+            stateRefs.current.isMounted = false;
+        };
+    }, []);
+    // Row count
+    const rowCount = rows.length;
+    // Local items renderer callback
+    const onItemsRenderedLocal = (props) => {
+        // No items, means no necessary to load more data during reset
+        if (rowCount > 0 && props.visibleStopIndex + threshold > rowCount) {
+            // Auto load next page
+            loadDataLocal();
+        }
+        // Custom
+        if (onItemsRendered)
+            onItemsRendered(props);
+    };
+    // Item count
+    const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
+    // Auto load data when current page is 0
+    if (stateRefs.current.queryPaging?.currentPage === 0 &&
+        stateRefs.current.autoLoad) {
+        const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
+        if (initItems)
+            reset(initItems[1], initItems[0]);
+        else
+            loadDataLocal();
+    }
+    // Layout
+    return typeof itemSize === "function" ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => shared_1.DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal })) : ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => shared_1.DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal }));
+};
+exports.ScrollerList = ScrollerList;

package/lib/cjs/custom/CustomFieldReact.js

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

package/lib/cjs/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// app
+__exportStar(require("./app/CoreConstants"), exports);
+__exportStar(require("./app/EventWatcher"), exports);
+__exportStar(require("./app/InputDialogProps"), exports);
+__exportStar(require("./app/ReactUtils"), exports);
+// components
+__exportStar(require("./components/DnDList"), exports);
+__exportStar(require("./components/DynamicRouter"), exports);
+__exportStar(require("./components/GridColumn"), exports);
+__exportStar(require("./components/GridLoader"), exports);
+__exportStar(require("./components/GridMethodRef"), exports);
+__exportStar(require("./components/ListItemReact"), exports);
+__exportStar(require("./components/ScrollerGrid"), exports);
+__exportStar(require("./components/ScrollerList"), exports);
+__exportStar(require("./components/ScrollRestoration"), exports);
+// custom
+__exportStar(require("./custom/CustomFieldReact"), exports);
+// notifier
+__exportStar(require("./notifier/Notifier"), exports);
+__exportStar(require("@etsoo/notificationbase"), exports);
+// states
+__exportStar(require("./states/CultureState"), exports);
+__exportStar(require("./states/IState"), exports);
+__exportStar(require("./states/PageState"), exports);
+__exportStar(require("./states/State"), exports);
+__exportStar(require("./states/UserState"), exports);
+// uses
+__exportStar(require("./uses/useAsyncState"), exports);
+__exportStar(require("./uses/useCombinedRefs"), exports);
+__exportStar(require("./uses/useDelayedExecutor"), exports);
+__exportStar(require("./uses/useDimensions"), exports);
+__exportStar(require("./uses/useParamsEx"), exports);
+__exportStar(require("./uses/useRefs"), exports);
+__exportStar(require("./uses/useRequiredContext"), exports);
+__exportStar(require("./uses/useSearchParamsEx"), exports);
+__exportStar(require("./uses/useTimeout"), exports);
+__exportStar(require("./uses/useWindowScroll"), exports);
+__exportStar(require("./uses/useWindowSize"), exports);

package/lib/cjs/notifier/Notifier.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotifierReact = exports.NotificationReact = void 0;
+const react_1 = __importDefault(require("react"));
+const notificationbase_1 = require("@etsoo/notificationbase");
+const State_1 = require("../states/State");
+/**
+ * React notification
+ */
+class NotificationReact extends notificationbase_1.Notification {
+}
+exports.NotificationReact = NotificationReact;
+/**
+ * Notifier for React
+ */
+class NotifierReact extends notificationbase_1.NotificationContainer {
+    /**
+     * Singleton instance
+     */
+    static get instance() {
+        return NotifierReact._instance;
+    }
+    /**
+     * Update notifier
+     * @param notifier Notifier
+     */
+    static updateInstance(notifier) {
+        NotifierReact._instance = notifier;
+    }
+    /**
+     * Constructor
+     */
+    constructor() {
+        super((notification, dismiss) => {
+            // Debug
+            if (this.debug) {
+                console.debug("NotifierReact.updateCallback", notification, dismiss, this.loadingCount);
+            }
+            // Make sure the state update is set
+            if (this.stateUpdate)
+                this.stateUpdate({ notification, dismiss });
+        });
+    }
+    /**
+     * Create state provider
+     * @param className Style class name
+     * @returns Provider
+     */
+    createProvider(className, debug) {
+        // Custom creator
+        const creator = (state, update, props) => {
+            // Hold the current state update
+            this.stateUpdate = update;
+            // Aligns collection
+            const aligns = [];
+            for (const align in state) {
+                // Notifications under the align
+                const notifications = state[align];
+                // UI collections
+                const ui = notifications.map((notification) => notification.render(props, className ? className + "-item" : className));
+                // Add to the collection
+                aligns.push(this.createContainer(Number(align), ui));
+            }
+            // Debug
+            if (debug) {
+                console.debug("NotifierReact.createProvider", className, state, aligns);
+            }
+            // Generate the component
+            return react_1.default.createElement("div", { className }, aligns);
+        };
+        // Create state
+        const { provider } = State_1.State.create((state, _action) => {
+            // Collection update is done with NotificationContainer
+            return { ...state };
+        }, this.notifications, {}, creator);
+        return provider;
+    }
+}
+exports.NotifierReact = NotifierReact;

package/lib/cjs/states/CultureState.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CultureState = void 0;
+const State_1 = require("./State");
+// Calls
+const calls = {
+    /**
+     * Key value
+     * @param key Item key
+     */
+    get(key) {
+        const resources = this.state.resources;
+        const value = typeof resources === "object" ? resources[key] : undefined;
+        if (value == null)
+            return undefined;
+        return value;
+    }
+};
+/**
+ * Culture state
+ * Creator for culture context and provider globally, not inside a component to avoid problem:
+ * Cannot update a component (`provider`) while rendering a different component
+ */
+class CultureState {
+    /**
+     * Constructor
+     */
+    constructor(item) {
+        // Default
+        const defaultItem = item ?? {};
+        // Load resources
+        if (item != null && typeof item.resources !== "object")
+            item.resources().then((result) => (item.resources = result));
+        // Act
+        const { context, provider } = State_1.State.create((state, action) => {
+            // Language reducer
+            if (state.name !== action.name) {
+                return { ...action };
+            }
+            return state;
+        }, defaultItem, calls);
+        this.context = context;
+        this.provider = provider;
+    }
+}
+exports.CultureState = CultureState;

package/lib/cjs/states/IState.js

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