@etsoo/react 1.8.50 → 1.8.52

package/__tests__/ScrollerGrid.tsx

@@ -0,0 +1,95 @@
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { screen, waitFor } from "@testing-library/react";
+import { Grid } from "react-window";
+import { GridColumn, ScrollerGrid } from "../src";
+
+// List item
+type ListItem = {
+  id: string;
+  name: string;
+};
+
+const rows: ListItem[] = [
+  { id: "1", name: "Item 1" },
+  { id: "2", name: "Item 2" },
+  { id: "3", name: "Item 3" },
+  { id: "4", name: "Item 4" },
+  { id: "5", name: "Item 5" }
+];
+
+const columns: GridColumn<ListItem>[] = [
+  { field: "id", header: "ID", width: 100 },
+  { field: "name", header: "Name", width: 200 }
+];
+
+const columnCount = columns.length;
+const columnWidth = (index: number, cellProps: { rows: ListItem[] }) => {
+  return columns[index].width ?? 0;
+};
+
+// Root
+const root = document.body;
+const container: HTMLElement = document.createElement("div");
+root.append(container);
+
+const reactRoot = createRoot(container);
+
+test("Tests for original Grid", async () => {
+  act(() => {
+    reactRoot.render(
+      <Grid<{ rows: ListItem[] }>
+        className="test"
+        defaultHeight={200}
+        onCellsRendered={(visibleCells, allCells) => {
+          expect(visibleCells.rowStartIndex).toBe(0);
+          expect(visibleCells.rowStopIndex).toBe(3);
+        }}
+        cellComponent={({ columnIndex, rowIndex, style, rows }) => (
+          <h1 id={`id${rowIndex}`} style={style}>
+            {rows[rowIndex][columns[columnIndex].field ?? "id"]}
+          </h1>
+        )}
+        rowCount={rows.length}
+        columnCount={columnCount}
+        columnWidth={columnWidth}
+        rowHeight={50}
+        cellProps={{ rows }}
+      />
+    );
+  });
+
+  const element = await screen.findByText("Item 4");
+  expect(element.id).toBe("id3");
+});
+
+test("Tests for custom Grid", async () => {
+  act(() => {
+    reactRoot.render(
+      <ScrollerGrid<ListItem>
+        loadData={(props, lastItem) => {
+          expect(props.queryPaging.currentPage).toBe(0);
+          expect(props.queryPaging.batchSize).toBe(10);
+
+          return new Promise((resolve) => resolve(rows));
+        }}
+        columnCount={columnCount}
+        columnWidth={columnWidth}
+        defaultHeight={200}
+        rowHeight={50}
+        cellComponent={({ columnIndex, rowIndex, style, rows }) => {
+          return (
+            <h1 id={`id${rowIndex}`} style={style}>
+              {rows[rowIndex][columns[columnIndex].field ?? "id"]}
+            </h1>
+          );
+        }}
+      />
+    );
+  });
+
+  await waitFor(() => {
+    const item = screen.getByText("Item 3");
+    expect(item.id).toBe("id2");
+  });
+});

package/__tests__/ScrollerList.tsx

@@ -0,0 +1,85 @@
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { screen, waitFor } from "@testing-library/react";
+import { List } from "react-window";
+import { ScrollerList } from "../src";
+
+// List item
+type ListItem = {
+  id: string;
+  name: string;
+};
+
+const items: ListItem[] = [
+  { id: "1", name: "Item 1" },
+  { id: "2", name: "Item 2" },
+  { id: "3", name: "Item 3" },
+  { id: "4", name: "Item 4" },
+  { id: "5", name: "Item 5" }
+];
+
+// Root
+const root = document.body;
+const container: HTMLElement = document.createElement("div");
+root.append(container);
+
+const reactRoot = createRoot(container);
+
+test("Tests for original List", async () => {
+  act(() => {
+    reactRoot.render(
+      <List<{ items: ListItem[] }>
+        className="test"
+        defaultHeight={200}
+        onRowsRendered={({ startIndex, stopIndex }) => {
+          expect(startIndex).toBe(0);
+          expect(stopIndex).toBe(3);
+        }}
+        rowComponent={({ index, style, items }) => (
+          <h1 id={`id${index}`} style={style}>
+            {items[index].id} / {items[index].name}
+          </h1>
+        )}
+        rowCount={items.length}
+        rowHeight={50}
+        rowProps={{ items }}
+      />
+    );
+  });
+
+  const element = await screen.findByText("4 / Item 4");
+  expect(element.id).toBe("id3");
+});
+
+test("Tests for custom List", async () => {
+  act(() => {
+    reactRoot.render(
+      <ScrollerList<ListItem>
+        defaultHeight={200}
+        loadData={(props, lastItem) => {
+          expect(props.queryPaging.currentPage).toBe(0);
+          expect(props.queryPaging.batchSize).toBe(10);
+
+          return new Promise((resolve) => resolve(items));
+        }}
+        onRowsRendered={({ startIndex, stopIndex }) => {
+          expect(startIndex).toBe(0);
+          expect(stopIndex).toBe(3);
+        }}
+        rowHeight={50}
+        rowComponent={({ index, style, items }) => {
+          return (
+            <h1 id={`id${index}`} style={style}>
+              {items[index].id} / {items[index].name}
+            </h1>
+          );
+        }}
+      />
+    );
+  });
+
+  await waitFor(() => {
+    const item = screen.getByText("3 / Item 3");
+    expect(item.id).toBe("id2");
+  });
+});

package/lib/cjs/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/cjs/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/cjs/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 {};

package/lib/cjs/components/ScrollerGrid.js

@@ -7,6 +7,7 @@ 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");
+const useCombinedRefs_1 = require("../uses/useCombinedRefs");
 /**
  * Scroller vertical grid
  * @param props Props
@@ -14,17 +15,26 @@ const react_window_1 = require("react-window");
  */
 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;
+    const { autoLoad = true, defaultOrderBy, footerRenderer, headerRenderer, height = "100%", gridRef, width = "100%", style = {}, idField = "id", loadBatchSize, loadData, mRef, onCellsRendered, onSelectChange, rowHeight = 53, threshold = 3, onInitLoad, onUpdateRows, ...rest } = props;
+    // Style
+    Object.assign(style, {
+        width,
+        height,
+        overflowX: "hidden"
+    });
+    // Refs
+    const localRef = (0, react_window_1.useGridRef)(null);
+    const refs = (0, useCombinedRefs_1.useCombinedRefs)(gridRef, localRef);
     // Rows
     const [rows, updateRows] = react_1.default.useState([]);
     const setRows = (rows, reset = false) => {
-        refs.current.loadedItems = rows.length;
+        stateRefs.current.loadedItems = rows.length;
         updateRows(rows);
         if (!reset && onUpdateRows)
-            onUpdateRows(rows, refs.current);
+            onUpdateRows(rows, stateRefs.current);
     };
-    // Refs
-    const refs = react_1.default.useRef({
+    // State Refs
+    const stateRefs = react_1.default.useRef({
         queryPaging: {
             currentPage: 0,
             orderBy: defaultOrderBy,
@@ -37,58 +47,58 @@ const ScrollerGrid = (props) => {
         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 ||
-            refs.current.isMounted === false)
+        if (!stateRefs.current.hasNextPage ||
+            stateRefs.current.isNextPageLoading ||
+            stateRefs.current.isMounted === false)
             return;
         // Update state
-        refs.current.isNextPageLoading = true;
+        stateRefs.current.isNextPageLoading = true;
         // Parameters
-        const { queryPaging, data } = refs.current;
+        const { queryPaging, data } = stateRefs.current;
         const loadProps = {
             queryPaging,
             data
         };
-        loadData(loadProps, refs.current.lastItem).then((result) => {
-            if (result == null || refs.current.isMounted === false) {
+        loadData(loadProps, stateRefs.current.lastItem).then((result) => {
+            if (result == null || stateRefs.current.isMounted === false) {
                 return;
             }
-            refs.current.isMounted = true;
+            stateRefs.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;
+            stateRefs.current.lastLoadedItems = newItems;
+            stateRefs.current.lastItem = result.at(-1);
+            stateRefs.current.isNextPageLoading = false;
+            stateRefs.current.hasNextPage =
+                newItems >= stateRefs.current.queryPaging.batchSize;
             if (pageAdd === 0) {
                 // New items
-                const newRows = refs.current.lastLoadedItems
+                const newRows = stateRefs.current.lastLoadedItems
                     ? [...rows]
-                        .splice(rows.length - refs.current.lastLoadedItems, refs.current.lastLoadedItems)
+                        .splice(rows.length - stateRefs.current.lastLoadedItems, stateRefs.current.lastLoadedItems)
                         .concat(result)
                     : result;
-                refs.current.idCache = {};
+                stateRefs.current.idCache = {};
                 for (const row of newRows) {
                     const id = row[idField];
-                    refs.current.idCache[id] = null;
+                    stateRefs.current.idCache[id] = null;
                 }
                 // Update rows
                 setRows(newRows);
             }
             else {
                 // Set current page
-                if (refs.current.queryPaging.currentPage == null)
-                    refs.current.queryPaging.currentPage = pageAdd;
+                if (stateRefs.current.queryPaging.currentPage == null)
+                    stateRefs.current.queryPaging.currentPage = pageAdd;
                 else
-                    refs.current.queryPaging.currentPage += pageAdd;
+                    stateRefs.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) {
+                    if (stateRefs.current.idCache[id] === undefined) {
                         newRows.push(item);
                     }
                 }
@@ -96,34 +106,6 @@ const ScrollerGrid = (props) => {
             }
         });
     };
-    // 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 ?? {};
@@ -136,16 +118,16 @@ const ScrollerGrid = (props) => {
             lastItem: undefined,
             ...rest
         };
-        Object.assign(refs.current, resetState);
-        Object.assign(refs.current.queryPaging, {
+        Object.assign(stateRefs.current, resetState);
+        Object.assign(stateRefs.current.queryPaging, {
             currentPage: 0,
             ...queryPaging
         });
         // Reset items
-        if (refs.current.isMounted !== false)
+        if (stateRefs.current.isMounted !== false)
             setRows(items, true);
     };
-    const instance = {
+    react_1.default.useImperativeHandle(mRef, () => ({
         delete(index) {
             const item = rows.at(index);
             if (item) {
@@ -160,27 +142,28 @@ const ScrollerGrid = (props) => {
             newRows.splice(start, 0, item);
             setRows(newRows);
         },
-        scrollTo(params) {
-            ref.current?.scrollTo(params);
+        refresh() {
+            loadDataLocal(0);
         },
-        scrollToItem(params) {
-            ref.current?.scrollToItem(params);
+        reset,
+        scrollToCell(param) {
+            localRef.current?.scrollToCell(param);
         },
-        scrollToRef(scrollOffset) {
-            ref.current?.scrollTo({ scrollLeft: 0, scrollTop: scrollOffset });
+        scrollToColumn(param) {
+            localRef.current?.scrollToColumn(param);
         },
-        scrollToItemRef(index, align) {
-            ref.current?.scrollToItem({ rowIndex: index, align });
+        scrollToRow(param) {
+            localRef.current?.scrollToRow(param);
         },
         select(rowIndex) {
             // Select only one item
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             selectedItems[0] = rows[rowIndex];
             if (onSelectChange)
                 onSelectChange(selectedItems);
         },
         selectAll(checked) {
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             rows.forEach((row) => {
                 const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
                 if (checked) {
@@ -195,7 +178,7 @@ const ScrollerGrid = (props) => {
                 onSelectChange(selectedItems);
         },
         selectItem(item, checked) {
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
             if (checked) {
                 if (index === -1)
@@ -207,35 +190,15 @@ const ScrollerGrid = (props) => {
             }
             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]);
-    // 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]);
     // Rows
-    const rowLength = rows.length;
-    // Row count
-    const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
+    const rowCount = rows.length;
     react_1.default.useEffect(() => {
         // 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 (stateRefs.current.queryPaging.currentPage === 0 &&
+            stateRefs.current.autoLoad) {
+            const initItems = onInitLoad == null ? undefined : onInitLoad(stateRefs.current);
             if (initItems)
                 reset(initItems[1], initItems[0]);
             else
@@ -244,15 +207,18 @@ const ScrollerGrid = (props) => {
     }, [onInitLoad, loadDataLocal]);
     react_1.default.useEffect(() => {
         return () => {
-            refs.current.isMounted = false;
+            stateRefs.current.isMounted = false;
         };
     }, []);
     // 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)] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(stateRefs.current), (0, jsx_runtime_1.jsx)(react_window_1.Grid, { cellProps: { rows, states: stateRefs.current }, gridRef: refs, onCellsRendered: (visibleCells, allCells) => {
+                    // No items, means no necessary to load more data during reset
+                    if (rowCount > 0 &&
+                        visibleCells.rowStopIndex + threshold > rowCount) {
+                        // Auto load next page
+                        loadDataLocal();
+                    }
+                    onCellsRendered?.(visibleCells, allCells);
+                }, overscanCount: threshold, rowHeight: rowHeight, rowCount: rowCount, style: style, ...rest }), footerRenderer && footerRenderer(rows, stateRefs.current)] }));
 };
 exports.ScrollerGrid = ScrollerGrid;