@etsoo/react 1.8.50 → 1.8.52

package/src/components/ScrollerGrid.tsx

@@ -1,12 +1,6 @@
 import { DataTypes } from "@etsoo/shared";
 import React from "react";
-import {
-  Align,
-  GridChildComponentProps,
-  GridOnItemsRenderedProps,
-  VariableSizeGrid,
-  VariableSizeGridProps
-} from "react-window";
+import { Grid, GridProps, useGridRef } from "react-window";
 import {
   GridJsonData,
   GridLoadDataProps,
@@ -14,32 +8,20 @@ import {
   GridLoaderPartialStates,
   GridLoaderStates
 } from "./GridLoader";
-import { GridMethodRef } from "./GridMethodRef";
+import { GridMethodRef, ScrollToRowParam } from "./GridMethodRef";
+import { useCombinedRefs } from "../uses/useCombinedRefs";
 
-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;
+type ScrollerGridCellrops<T extends object> = {
+  rows: T[];
+  states: GridLoaderStates<T>;
+};
 
-  /**
-   * Data
-   */
-  data?: T;
+export type ScrollToCellParam = {
+  behavior?: ScrollToRowParam["behavior"];
+  columnAlign?: ScrollToRowParam["align"];
+  columnIndex: number;
+  rowAlign?: ScrollToRowParam["align"];
+  rowIndex: number;
 };
 
 /**
@@ -49,7 +31,10 @@ export type ScrollerGridProps<
   T extends object,
   P extends GridJsonData = GridLoadDataProps
 > = GridLoader<T, P> &
-  Omit<VariableSizeGridProps<T>, "children" | "rowCount" | "rowHeight"> & {
+  Omit<
+    GridProps<ScrollerGridCellrops<T>>,
+    "cellProps" | "overscanCount" | "rowCount"
+  > & {
     /**
      * Footer renderer
      */
@@ -64,16 +49,14 @@ export type ScrollerGridProps<
     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
@@ -86,9 +69,9 @@ export type ScrollerGridProps<
     onSelectChange?: (selectedItems: T[]) => void;
 
     /**
-     * Returns the height of the specified row.
+     * Width of the grid
      */
-    rowHeight?: ((index: number) => number) | number;
+    width?: number | string;
   };
 
 /**
@@ -96,24 +79,16 @@ export type ScrollerGridProps<
  */
 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
@@ -133,21 +108,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;
 }
 
 /**
@@ -162,32 +122,45 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
     defaultOrderBy,
     footerRenderer,
     headerRenderer,
-    itemRenderer,
+    height = "100%",
+    gridRef,
+    width = "100%",
+    style = {},
     idField = "id" as DataTypes.Keys<T>,
     loadBatchSize,
     loadData,
     mRef,
-    onItemsRendered,
+    onCellsRendered,
     onSelectChange,
     rowHeight = 53,
-    threshold = 6,
-    width,
+    threshold = 3,
     onInitLoad,
     onUpdateRows,
     ...rest
   } = props;
 
+  // Style
+  Object.assign(style, {
+    width,
+    height,
+    overflowX: "hidden"
+  });
+
+  // Refs
+  const localRef = useGridRef(null);
+  const refs = useCombinedRefs(gridRef, localRef);
+
   // Rows
   const [rows, updateRows] = React.useState<T[]>([]);
   const setRows = (rows: T[], reset: boolean = false) => {
-    refs.current.loadedItems = rows.length;
+    stateRefs.current.loadedItems = rows.length;
     updateRows(rows);
 
-    if (!reset && onUpdateRows) onUpdateRows(rows, refs.current);
+    if (!reset && onUpdateRows) onUpdateRows(rows, stateRefs.current);
   };
 
-  // Refs
-  const refs = React.useRef<GridLoaderStates<T>>({
+  // State Refs
+  const stateRefs = React.useRef<GridLoaderStates<T>>({
     queryPaging: {
       currentPage: 0,
       orderBy: defaultOrderBy,
@@ -201,72 +174,71 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
     idCache: {}
   });
 
-  const ref = React.useRef<VariableSizeGrid<T>>(null);
-
   // Load data
   const loadDataLocal = (pageAdd: number = 1) => {
     // Prevent multiple loadings
     if (
-      !refs.current.hasNextPage ||
-      refs.current.isNextPageLoading ||
-      refs.current.isMounted === false
+      !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: GridLoadDataProps = {
       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
+                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] as any;
-          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;
-        else refs.current.queryPaging.currentPage += pageAdd;
+        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] as any;
-          if (refs.current.idCache[id] === undefined) {
+          if (stateRefs.current.idCache[id] === undefined) {
             newRows.push(item);
           }
         }
@@ -276,44 +248,6 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
     });
   };
 
-  // Item renderer
-  const itemRendererLocal = (
-    itemProps: GridChildComponentProps<T>,
-    state: GridLoaderStates<T>
-  ) => {
-    // Custom render
-    const data =
-      itemProps.rowIndex < rows.length ? rows[itemProps.rowIndex] : undefined;
-    return itemRenderer({
-      ...itemProps,
-      data,
-      selectedItems: state.selectedItems,
-      setItems: (
-        callback: (
-          items: T[],
-          ref: ScrollerGridForwardRef<T>
-        ) => T[] | undefined | void
-      ) => {
-        const result = callback(rows, instance);
-        if (result == null) return;
-        setRows(result);
-      }
-    });
-  };
-
-  // Local items renderer callback
-  const onItemsRenderedLocal = (props: GridOnItemsRenderedProps) => {
-    // 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?: GridLoaderPartialStates<T>, items: T[] = []) => {
     const { queryPaging, ...rest } = add ?? {};
@@ -326,124 +260,99 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
       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) setRows(items, true);
+    if (stateRefs.current.isMounted !== false) setRows(items, true);
   };
 
-  const instance: ScrollerGridForwardRef<T> = {
-    delete(index) {
-      const item = rows.at(index);
-      if (item) {
+  React.useImperativeHandle(
+    mRef,
+    () => ({
+      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(index, 1);
+        newRows.splice(start, 0, item);
         setRows(newRows);
-      }
-      return item;
-    },
-    insert(item, start) {
-      const newRows = [...rows];
-      newRows.splice(start, 0, item);
-      setRows(newRows);
-    },
-    scrollTo(params: { scrollLeft: number; scrollTop: number }) {
-      ref.current?.scrollTo(params);
-    },
-    scrollToItem(params: {
-      align?: Align | undefined;
-      columnIndex?: number | undefined;
-      rowIndex?: number | undefined;
-    }) {
-      ref.current?.scrollToItem(params);
-    },
-    scrollToRef(scrollOffset: number): void {
-      ref.current?.scrollTo({ scrollLeft: 0, scrollTop: scrollOffset });
-    },
-
-    scrollToItemRef(index: number, align?: Align): void {
-      ref.current?.scrollToItem({ rowIndex: index, align });
-    },
-    select(rowIndex: number) {
-      // Select only one item
-      const selectedItems = refs.current.selectedItems;
-      selectedItems[0] = rows[rowIndex];
-
-      if (onSelectChange) onSelectChange(selectedItems);
-    },
-    selectAll(checked: boolean) {
-      const selectedItems = refs.current.selectedItems;
+      },
+      refresh(): void {
+        loadDataLocal(0);
+      },
+      reset,
+      scrollToCell(param: ScrollToCellParam): void {
+        localRef.current?.scrollToCell(param);
+      },
+      scrollToColumn(param: ScrollToRowParam): void {
+        localRef.current?.scrollToColumn(param);
+      },
+      scrollToRow(param: ScrollToRowParam): void {
+        localRef.current?.scrollToRow(param);
+      },
+      select(rowIndex: number) {
+        // Select only one item
+        const selectedItems = stateRefs.current.selectedItems;
+        selectedItems[0] = rows[rowIndex];
+
+        if (onSelectChange) onSelectChange(selectedItems);
+      },
+      selectAll(checked: boolean) {
+        const selectedItems = stateRefs.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);
+          }
+        });
 
-      rows.forEach((row) => {
+        if (onSelectChange) onSelectChange(selectedItems);
+      },
+      selectItem(item: T, checked: boolean) {
+        const selectedItems = stateRefs.current.selectedItems;
         const index = selectedItems.findIndex(
-          (selectedItem) => selectedItem[idField] === row[idField]
+          (selectedItem) => selectedItem[idField] === item[idField]
         );
 
         if (checked) {
-          if (index === -1) selectedItems.push(row);
-        } else if (index !== -1) {
-          selectedItems.splice(index, 1);
+          if (index === -1) selectedItems.push(item);
+        } else {
+          if (index !== -1) selectedItems.splice(index, 1);
         }
-      });
 
-      if (onSelectChange) onSelectChange(selectedItems);
-    },
-    selectItem(item: T, checked: boolean) {
-      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);
       }
-
-      if (onSelectChange) onSelectChange(selectedItems);
-    },
-    reset,
-    resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean) {
-      ref.current?.resetAfterColumnIndex(index, shouldForceUpdate);
-    },
-    resetAfterIndices(params: {
-      columnIndex: number;
-      rowIndex: number;
-      shouldForceUpdate?: boolean | undefined;
-    }) {
-      ref.current?.resetAfterIndices(params);
-    },
-    resetAfterRowIndex(index: number, shouldForceUpdate?: boolean) {
-      ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
-    }
-  };
-
-  React.useImperativeHandle(mRef, () => instance, [rows]);
-
-  // Force update to work with the new width and rowHeight
-  React.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.useEffect(() => {
     // Auto load data when current page is 0
-    if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
+    if (
+      stateRefs.current.queryPaging.currentPage === 0 &&
+      stateRefs.current.autoLoad
+    ) {
       const initItems =
-        onInitLoad == null ? undefined : onInitLoad(ref.current);
+        onInitLoad == null ? undefined : onInitLoad(stateRefs.current);
       if (initItems) reset(initItems[1], initItems[0]);
       else loadDataLocal();
     }
@@ -451,33 +360,36 @@ export const ScrollerGrid = <T extends object>(props: ScrollerGridProps<T>) => {
 
   React.useEffect(() => {
     return () => {
-      refs.current.isMounted = false;
+      stateRefs.current.isMounted = false;
     };
   }, []);
 
   // Layout
   return (
     <React.Fragment>
-      {headerRenderer && headerRenderer(refs.current)}
-      <VariableSizeGrid<T>
-        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(",");
+      {headerRenderer && headerRenderer(stateRefs.current)}
+      <Grid<ScrollerGridCellrops<T>>
+        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);
         }}
-        onItemsRendered={onItemsRenderedLocal}
-        ref={ref}
+        overscanCount={threshold}
+        rowHeight={rowHeight}
         rowCount={rowCount}
-        rowHeight={
-          typeof rowHeight === "function" ? rowHeight : () => rowHeight
-        }
-        style={{ overflowX: "hidden" }}
-        width={width}
+        style={style}
         {...rest}
-      >
-        {(props) => itemRendererLocal(props, refs.current)}
-      </VariableSizeGrid>
-      {footerRenderer && footerRenderer(rows, refs.current)}
+      />
+      {footerRenderer && footerRenderer(rows, stateRefs.current)}
     </React.Fragment>
   );
 };