@etsoo/react 1.8.51 → 1.8.52

package/lib/cjs/components/ScrollerList.d.ts

@@ -1,66 +1,41 @@
 import { DataTypes } from "@etsoo/shared";
 import React from "react";
-import { Align, ListChildComponentProps, ListProps } from "react-window";
+import { ListProps } from "react-window";
 import { GridLoader } from "./GridLoader";
 import { GridMethodRef } from "./GridMethodRef";
+type ScrollerListRowProps<T extends object> = {
+    items: T[];
+};
+/**
+ * Scroller list forward ref
+ */
+export interface ScrollerListForwardRef<T> extends GridMethodRef<T> {
+}
 /**
  * Scroller vertical list props
  */
-export type ScrollerListProps<T extends object> = GridLoader<T> & Omit<ListProps<T>, "outerRef" | "height" | "width" | "children" | "itemCount"> & {
-    /**
-     * Methods ref
-     */
-    mRef?: React.Ref<ScrollerListForwardRef<T>>;
-    /**
-     * Outer div ref
-     */
-    oRef?: React.Ref<HTMLDivElement>;
+export type ScrollerListProps<T extends object> = GridLoader<T> & Omit<ListProps<ScrollerListRowProps<T>>, "rowCount" | "rowProps" | "overscanCount"> & {
     /**
      * Height of the list
      */
-    height?: number;
-    /**
-     * Width of the list
-     */
-    width?: number | string;
+    height?: number | string;
     /**
      * Id field
      */
     idField?: DataTypes.Keys<T>;
     /**
-     * Item renderer
+     * Methods ref
      */
-    itemRenderer: (props: ListChildComponentProps<T>) => React.ReactElement;
+    mRef?: React.Ref<ScrollerListForwardRef<T>>;
     /**
-     * Item size, a function indicates its a variable size list
+     * Width of the list
      */
-    itemSize: ((index: number) => number) | number;
+    width?: number | string;
 };
-/**
- * Scroller list ref
- */
-export interface ScrollerListRef {
-    /**
-     * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
-     */
-    scrollTo(scrollOffset: number): void;
-    /**
-     * Scroll to the specified item.
-     */
-    scrollToItem(index: number, align?: Align): void;
-}
-/**
- * Scroller list forward ref
- */
-export interface ScrollerListForwardRef<T> extends GridMethodRef<T> {
-    /**
-     * Refresh latest page data
-     */
-    refresh(): void;
-}
 /**
  * Scroller vertical list
  * @param props Props
  * @returns Component
  */
 export declare const ScrollerList: <T extends object>(props: ScrollerListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/components/ScrollerList.js

@@ -9,11 +9,14 @@ 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);
+const calculateBatchSize = (height, rowHeight) => {
+    if (typeof height === "number" &&
+        typeof rowHeight === "number" &&
+        rowHeight > 0) {
+        return 1 + Math.ceil(height / rowHeight);
+    }
+    return 10;
 };
 /**
  * Scroller vertical list
@@ -22,18 +25,14 @@ const calculateBatchSize = (height, itemSize) => {
  */
 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;
+    const { autoLoad = true, defaultOrderBy, height = "100%", width = "100%", mRef, style = {}, idField = "id", rowHeight, listRef, loadBatchSize = calculateBatchSize(height, rowHeight), loadData, threshold = 3, onRowsRendered, onInitLoad, onUpdateRows, ...rest } = props;
     // Style
     Object.assign(style, {
-        width: "100%",
-        height: "100%",
-        display: "inline-block"
+        width,
+        height
     });
-    // Refs
-    const listRef = react_1.default.useRef(null);
-    const outerRef = react_1.default.useRef(null);
-    const refs = (0, useCombinedRefs_1.useCombinedRefs)(oRef, outerRef);
-    // Rows
+    const localRef = (0, react_window_1.useListRef)(null);
+    const refs = (0, useCombinedRefs_1.useCombinedRefs)(listRef, localRef);
     const [rows, updateRows] = react_1.default.useState([]);
     const setRows = (rows, reset = false) => {
         stateRefs.current.loadedItems = rows.length;
@@ -41,8 +40,7 @@ const ScrollerList = (props) => {
         if (!reset && onUpdateRows)
             onUpdateRows(rows, stateRefs.current);
     };
-    // States
-    const batchSize = (0, GridLoader_1.GridSizeGet)(loadBatchSize, height);
+    const batchSize = shared_1.Utils.getResult(loadBatchSize, height);
     const stateRefs = react_1.default.useRef({
         queryPaging: {
             currentPage: 0,
@@ -113,13 +111,6 @@ const ScrollerList = (props) => {
             }
         });
     };
-    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 ?? {};
@@ -142,7 +133,6 @@ const ScrollerList = (props) => {
             setRows(items, true);
     };
     react_1.default.useImperativeHandle(mRef, () => {
-        const refMethods = listRef.current;
         return {
             delete(index) {
                 const item = rows.at(index);
@@ -162,48 +152,39 @@ const ScrollerList = (props) => {
                 loadDataLocal(0);
             },
             reset,
-            scrollToRef(scrollOffset) {
-                refMethods.scrollTo(scrollOffset);
-            },
-            scrollToItemRef(index, align) {
-                refMethods.scrollToItem(index, align);
+            scrollToRow(param) {
+                localRef.current?.scrollToRow(param);
             }
         };
     }, []);
-    // 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;
+    // When layout ready
+    react_1.default.useEffect(() => {
+        // Return clear function
+        return () => {
+            stateRefs.current.isMounted = false;
+        };
+    }, []);
     react_1.default.useEffect(() => {
         // 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);
+            const initItems = onInitLoad == null ? undefined : onInitLoad(localRef.current);
             if (initItems)
                 reset(initItems[1], initItems[0]);
             else
                 loadDataLocal();
         }
     }, [onInitLoad, loadDataLocal]);
-    // When layout ready
-    react_1.default.useEffect(() => {
-        // Return clear function
-        return () => {
-            stateRefs.current.isMounted = false;
-        };
-    }, []);
+    // Row count
+    const rowCount = rows.length;
     // 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 }));
+    return ((0, jsx_runtime_1.jsx)(react_window_1.List, { listRef: refs, onRowsRendered: (visibleCells, allCells) => {
+            // No items, means no necessary to load more data during reset
+            if (rowCount > 0 && visibleCells.stopIndex + threshold > rowCount) {
+                // Auto load next page
+                loadDataLocal();
+            }
+            onRowsRendered?.(visibleCells, allCells);
+        }, overscanCount: threshold, rowHeight: rowHeight, rowCount: rowCount, rowProps: { items: rows }, style: style, ...rest }));
 };
 exports.ScrollerList = ScrollerList;

package/lib/cjs/index.d.ts

@@ -10,7 +10,6 @@ export * from "./components/ListItemReact";
 export * from "./components/ScrollerGrid";
 export * from "./components/ScrollerList";
 export * from "./components/ScrollRestoration";
-export type { ListOnScrollProps, GridOnScrollProps, VariableSizeGrid } from "react-window";
 export * from "./custom/CustomFieldReact";
 export * from "./notifier/Notifier";
 export * from "@etsoo/notificationbase";

package/lib/mjs/components/GridLoader.d.ts

@@ -3,7 +3,7 @@ import { DataTypes } from "@etsoo/shared";
 /**
  * Grid size
  */
-export type GridSize = number | ((input: number) => number);
+export type GridSize = number | ((input: number | string) => number);
 /**
  * Grid size calculation
  * @param size Size
@@ -81,7 +81,7 @@ export type GridLoader<T extends object, P extends GridJsonData = GridLoadDataPr
      */
     defaultOrderBy?: QueryPagingOrder[];
     /**
-     * Batch size when load data, default will be calcuated with height and itemSize
+     * Batch size when load data, default will be calcuated with height and rowHeight
      */
     loadBatchSize?: GridSize;
     /**

package/lib/mjs/components/GridMethodRef.d.ts

@@ -1,5 +1,9 @@
-import { Align } from "react-window";
+import { ListImperativeAPI } from "react-window";
 import { GridLoaderPartialStates } from "./GridLoader";
+/**
+ * Scroll to row parameter type
+ */
+export type ScrollToRowParam = Parameters<ListImperativeAPI["scrollToRow"]>[0];
 /**
  * Grid method ref
  */
@@ -15,17 +19,18 @@ export interface GridMethodRef<T> {
      * @param start Start position
      */
     insert(item: T, start: number): void;
+    /**
+     * Refresh latest page data
+     */
+    refresh(): void;
     /**
      * Reset
      * @param add Additional data
      */
     reset(add?: GridLoaderPartialStates<T>): void;
     /**
-     * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
-     */
-    scrollToRef(scrollOffset: number): void;
-    /**
-     * Scroll to the specified item.
+     * Scroll to the row
+     * @param param Parameters to control
      */
-    scrollToItemRef(index: number, align?: Align): void;
+    scrollToRow(param: ScrollToRowParam): void;
 }

package/lib/mjs/components/ScrollerGrid.d.ts

@@ -1,27 +1,23 @@
 import { DataTypes } from "@etsoo/shared";
 import React from "react";
-import { Align, GridChildComponentProps, VariableSizeGridProps } from "react-window";
+import { GridProps } from "react-window";
 import { GridJsonData, GridLoadDataProps, GridLoader, GridLoaderStates } from "./GridLoader";
-import { GridMethodRef } from "./GridMethodRef";
-export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>, "data"> & {
-    /**
-     * Selected items
-     */
-    selectedItems: T[];
-    /**
-     * Set items for rerenderer
-     * @param callback Callback
-     */
-    setItems: (callback: (items: T[], ref: ScrollerGridForwardRef<T>) => T[] | undefined | void) => void;
-    /**
-     * Data
-     */
-    data?: T;
+import { GridMethodRef, ScrollToRowParam } from "./GridMethodRef";
+type ScrollerGridCellrops<T extends object> = {
+    rows: T[];
+    states: GridLoaderStates<T>;
+};
+export type ScrollToCellParam = {
+    behavior?: ScrollToRowParam["behavior"];
+    columnAlign?: ScrollToRowParam["align"];
+    columnIndex: number;
+    rowAlign?: ScrollToRowParam["align"];
+    rowIndex: number;
 };
 /**
  * Scroller vertical grid props
  */
-export type ScrollerGridProps<T extends object, P extends GridJsonData = GridLoadDataProps> = GridLoader<T, P> & Omit<VariableSizeGridProps<T>, "children" | "rowCount" | "rowHeight"> & {
+export type ScrollerGridProps<T extends object, P extends GridJsonData = GridLoadDataProps> = GridLoader<T, P> & Omit<GridProps<ScrollerGridCellrops<T>>, "cellProps" | "overscanCount" | "rowCount"> & {
     /**
      * Footer renderer
      */
@@ -31,13 +27,13 @@ export type ScrollerGridProps<T extends object, P extends GridJsonData = GridLoa
      */
     headerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
     /**
-     * Id field
+     * Height of the grid
      */
-    idField?: DataTypes.Keys<T>;
+    height?: number | string;
     /**
-     * Item renderer
+     * Id field
      */
-    itemRenderer: (props: ScrollerGridItemRendererProps<T>) => React.ReactElement;
+    idField?: DataTypes.Keys<T>;
     /**
      * Methods
      */
@@ -47,34 +43,24 @@ export type ScrollerGridProps<T extends object, P extends GridJsonData = GridLoa
      */
     onSelectChange?: (selectedItems: T[]) => void;
     /**
-     * Returns the height of the specified row.
+     * Width of the grid
      */
-    rowHeight?: ((index: number) => number) | number;
+    width?: number | string;
 };
 /**
  * Scroller grid forward ref
  */
 export interface ScrollerGridForwardRef<T> extends GridMethodRef<T> {
     /**
-     * Scroll to the specified offsets
+     * Scroll to the cell
+     * @param param Parameters to control
      */
-    scrollTo(params: {
-        scrollLeft: number;
-        scrollTop: number;
-    }): void;
-    scrollToItem(params: {
-        align?: Align | undefined;
-        columnIndex?: number | undefined;
-        rowIndex?: number | undefined;
-    }): void;
+    scrollToCell(param: ScrollToCellParam): void;
     /**
-     * Scroll to the specified item
+     * Scroll to the cell
+     * @param param Parameters to control
      */
-    scrollToItem(params: {
-        align?: Align | undefined;
-        columnIndex?: number | undefined;
-        rowIndex?: number | undefined;
-    }): void;
+    scrollToColumn(param: ScrollToRowParam): void;
     /**
      * Select the item
      * @param rowIndex Row index
@@ -91,18 +77,6 @@ export interface ScrollerGridForwardRef<T> extends GridMethodRef<T> {
      * @param checked Checked
      */
     selectItem(item: any, checked: boolean): void;
-    /**
-     *
-     * @param index
-     * @param shouldForceUpdate
-     */
-    resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean): void;
-    resetAfterIndices(params: {
-        columnIndex: number;
-        rowIndex: number;
-        shouldForceUpdate?: boolean | undefined;
-    }): void;
-    resetAfterRowIndex(index: number, shouldForceUpdate?: boolean): void;
 }
 /**
  * Scroller vertical grid
@@ -110,3 +84,4 @@ export interface ScrollerGridForwardRef<T> extends GridMethodRef<T> {
  * @returns Component
  */
 export declare const ScrollerGrid: <T extends object>(props: ScrollerGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};