@etsoo/react 1.4.20 → 1.4.24

package/src/components/ScrollerGrid.tsx

@@ -40,7 +40,10 @@ export interface ScrollerGridProps<T>
     /**
      * Footer renderer
      */
-    footerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
+    footerRenderer?: (
+        rows: T[],
+        states: GridLoaderStates<T>
+    ) => React.ReactNode;
 
     /**
      * Header renderer
@@ -163,29 +166,28 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         ...rest
     } = props;
 
-    // States
-    const [state, stateUpdate] = React.useReducer(
-        (
-            currentState: GridLoaderStates<T>,
-            newState: Partial<GridLoaderStates<T>>
-        ) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            autoLoad,
-            currentPage: 0,
-            hasNextPage: true,
-            isNextPageLoading: false,
-            orderBy: defaultOrderBy,
-            orderByAsc: defaultOrderByAsc,
-            rows: [],
-            batchSize: 10,
-            selectedItems: []
-        }
-    );
-    const isMounted = React.useRef(true);
+    // Rows
+    const [rows, updateRows] = React.useState<T[]>([]);
+    const setRows = (rows: T[]) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
 
-    const ref = React.createRef<VariableSizeGrid<T>>();
+    // Refs
+    const refs = React.useRef<GridLoaderStates<T>>({
+        autoLoad,
+        currentPage: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        orderByAsc: defaultOrderByAsc,
+        batchSize: 10,
+        loadedItems: 0,
+        selectedItems: []
+    });
+    const state = refs.current;
+
+    const ref = React.useRef<VariableSizeGrid<T>>(null);
 
     // Load data
     const loadDataLocal = (pageAdd: number = 1) => {
@@ -194,10 +196,10 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
 
         // Update state
         state.isNextPageLoading = true;
-        // stateUpdate({ isNextPageLoading: true });
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
+            state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -208,38 +210,36 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null || !isMounted.current) {
+            state.isMounted = true;
+
+            if (result == null || isMounted === false) {
                 return;
             }
 
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.isNextPageLoading = false;
+            state.hasNextPage = newItems >= batchSize;
 
             if (pageAdd === 0) {
                 // New items
-                const rows = state.lastLoadedItems
-                    ? state.rows
+                const newRows = state.lastLoadedItems
+                    ? [...rows]
                           .splice(
-                              state.rows.length - state.lastLoadedItems,
+                              rows.length - state.lastLoadedItems,
                               state.lastLoadedItems
                           )
                           .concat(result)
                     : result;
 
-                // Refresh current page
-                stateUpdate({
-                    rows,
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Update rows
+                setRows(newRows);
             } else {
-                stateUpdate({
-                    rows: state.rows.concat(result),
-                    lastLoadedItems: newItems,
-                    isNextPageLoading: false,
-                    currentPage: state.currentPage + pageAdd,
-                    hasNextPage: newItems >= batchSize
-                });
+                // Set current page
+                state.currentPage = state.currentPage + pageAdd;
+
+                // Update rows
+                setRows([...rows, ...result]);
             }
         });
     };
@@ -251,8 +251,8 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     ) => {
         // Custom render
         const data =
-            itemProps.rowIndex < state.rows.length
-                ? state.rows[itemProps.rowIndex]
+            itemProps.rowIndex < rows.length
+                ? rows[itemProps.rowIndex]
                 : undefined;
         return itemRenderer({
             ...itemProps,
@@ -264,7 +264,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     // Local items renderer callback
     const onItemsRenderedLocal = (props: GridOnItemsRenderedProps) => {
         // No items, means no necessary to load more data during reset
-        const itemCount = state.rows.length;
+        const itemCount = rows.length;
         if (
             itemCount > 0 &&
             props.visibleRowStopIndex + threshold > itemCount
@@ -278,17 +278,20 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
     };
 
     // Reset the state and load again
-    const reset = (add?: {}) => {
-        const state = {
+    const reset = (add?: Partial<GridLoaderStates<T>>) => {
+        const resetState: Partial<GridLoaderStates<T>> = {
             autoLoad: true,
             currentPage: 0,
+            loadedItems: 0,
             hasNextPage: true,
             isNextPageLoading: false,
             lastLoadedItems: undefined,
-            rows: [],
             ...add
         };
-        stateUpdate(state);
+        Object.assign(state, resetState);
+
+        // Reset items
+        setRows([]);
     };
 
     React.useImperativeHandle(
@@ -307,16 +310,14 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             select(rowIndex: number) {
                 // Select only one item
                 const selectedItems = state.selectedItems;
-                selectedItems[0] = state.rows[rowIndex];
+                selectedItems[0] = rows[rowIndex];
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             selectAll(checked: boolean) {
                 const selectedItems = state.selectedItems;
 
-                state.rows.forEach((row) => {
+                rows.forEach((row) => {
                     const index = selectedItems.findIndex(
                         (selectedItem) => selectedItem[idField] === row[idField]
                     );
@@ -329,8 +330,6 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 });
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             selectItem(item: T, checked: boolean) {
                 const selectedItems = state.selectedItems;
@@ -345,8 +344,6 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 }
 
                 if (onSelectChange) onSelectChange(selectedItems);
-
-                stateUpdate({ selectedItems });
             },
             reset,
             resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean) {
@@ -363,17 +360,26 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
                 ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
             }
         }),
-        [state.rows, state.selectedItems]
+        [rows]
     );
 
     React.useEffect(() => {
         return () => {
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
 
+    // Force update to work with the new width
+    React.useEffect(() => {
+        ref.current?.resetAfterIndices({
+            columnIndex: 0,
+            rowIndex: 0,
+            shouldForceUpdate: true
+        });
+    }, [width]);
+
     // Destruct state
-    const { autoLoad: stateAutoLoad, rows, hasNextPage, currentPage } = state;
+    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
     const rowLength = rows.length;
 
     // Row count
@@ -388,7 +394,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             {headerRenderer && headerRenderer(state)}
             <VariableSizeGrid<T>
                 itemKey={({ columnIndex, rowIndex }) => {
-                    const data = state.rows[rowIndex];
+                    const data = rows[rowIndex];
                     if (data == null) return [rowIndex, columnIndex].join(',');
                     return [data[idField], columnIndex].join(',');
                 }}
@@ -406,7 +412,7 @@ export const ScrollerGrid = <T extends Record<string, unknown>>(
             >
                 {(props) => itemRendererLocal(props, state)}
             </VariableSizeGrid>
-            {footerRenderer && footerRenderer(state)}
+            {footerRenderer && footerRenderer(rows, state)}
         </React.Fragment>
     );
 };

package/src/components/ScrollerList.tsx

@@ -133,27 +133,26 @@ export const ScrollerList = <T extends Record<string, any>>(
 
     const refs = useCombinedRefs(oRef, outerRef);
 
+    // Rows
+    const [rows, updateRows] = React.useState<T[]>([]);
+    const setRows = (rows: T[]) => {
+        state.loadedItems = rows.length;
+        updateRows(rows);
+    };
+
     // States
-    const [state, stateUpdate] = React.useReducer(
-        (
-            currentState: GridLoaderStates<T>,
-            newState: Partial<GridLoaderStates<T>>
-        ) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            autoLoad,
-            currentPage: 0,
-            hasNextPage: true,
-            isNextPageLoading: false,
-            orderBy: defaultOrderBy,
-            orderByAsc: defaultOrderByAsc,
-            rows: [],
-            batchSize: GridSizeGet(loadBatchSize, height),
-            selectedItems: []
-        }
-    );
-    const isMounted = React.useRef(true);
+    const stateRefs = React.useRef<GridLoaderStates<T>>({
+        autoLoad,
+        currentPage: 0,
+        loadedItems: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        orderByAsc: defaultOrderByAsc,
+        batchSize: GridSizeGet(loadBatchSize, height),
+        selectedItems: []
+    });
+    const state = stateRefs.current;
 
     // Load data
     const loadDataLocal = (pageAdd: number = 1) => {
@@ -162,10 +161,10 @@ export const ScrollerList = <T extends Record<string, any>>(
 
         // Update state
         state.isNextPageLoading = true;
-        // stateUpdate({ isNextPageLoading: true });
 
         // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = state;
+        const { currentPage, batchSize, orderBy, orderByAsc, data, isMounted } =
+            state;
 
         const loadProps: GridLoadDataProps = {
             currentPage,
@@ -176,38 +175,35 @@ export const ScrollerList = <T extends Record<string, any>>(
         };
 
         loadData(loadProps).then((result) => {
-            if (result == null || !isMounted.current) {
+            state.isMounted = true;
+
+            if (result == null || isMounted === false) {
                 return;
             }
 
             const newItems = result.length;
+            state.lastLoadedItems = newItems;
+            state.hasNextPage = newItems >= loadBatchSize;
+            state.isNextPageLoading = false;
 
             if (pageAdd === 0) {
                 // New items
-                const rows = state.lastLoadedItems
-                    ? state.rows
+                const newRows = state.lastLoadedItems
+                    ? [...rows]
                           .splice(
-                              state.rows.length - state.lastLoadedItems,
+                              rows.length - state.lastLoadedItems,
                               state.lastLoadedItems
                           )
                           .concat(result)
                     : result;
 
-                // Refresh current page
-                stateUpdate({
-                    rows,
-                    lastLoadedItems: newItems,
-                    hasNextPage: newItems >= loadBatchSize,
-                    isNextPageLoading: false
-                });
+                // Update rows
+                setRows(newRows);
             } else {
-                stateUpdate({
-                    rows: state.rows.concat(result),
-                    lastLoadedItems: newItems,
-                    currentPage: state.currentPage + pageAdd,
-                    hasNextPage: newItems >= loadBatchSize,
-                    isNextPageLoading: false
-                });
+                state.currentPage = state.currentPage + pageAdd;
+
+                // Update rows
+                setRows([...rows, ...result]);
             }
         });
     };
@@ -216,7 +212,7 @@ export const ScrollerList = <T extends Record<string, any>>(
         // Custom render
         return itemRenderer({
             ...itemProps,
-            data: state.rows[itemProps.index]
+            data: rows[itemProps.index]
         });
     };
 
@@ -241,17 +237,17 @@ export const ScrollerList = <T extends Record<string, any>>(
                     loadDataLocal(0);
                 },
 
-                reset(add?: {}): void {
-                    // Reset state, will load data soon
-                    stateUpdate({
+                reset(add?: Partial<GridLoaderStates<T>>): void {
+                    const resetState: Partial<GridLoaderStates<T>> = {
                         autoLoad: true,
-                        rows: [],
                         lastLoadedItems: undefined,
+                        loadedItems: 0,
                         currentPage: 0,
                         hasNextPage: true,
                         isNextPageLoading: false,
                         ...add
-                    });
+                    };
+                    Object.assign(state, resetState);
                 },
 
                 scrollTo(scrollOffset: number): void {
@@ -298,12 +294,12 @@ export const ScrollerList = <T extends Record<string, any>>(
             // Remove scroll event
             window.removeEventListener('scroll', handleWindowScroll);
 
-            isMounted.current = false;
+            state.isMounted = false;
         };
     }, []);
 
     // Destruct state
-    const { autoLoad: stateAutoLoad, rows, hasNextPage, currentPage } = state;
+    const { autoLoad: stateAutoLoad, hasNextPage, currentPage } = state;
     const rowCount = rows.length;
 
     // Local items renderer callback

package/src/mu/DataGridEx.tsx

@@ -24,8 +24,6 @@ import {
     ScrollerGridProps
 } from '../components/ScrollerGrid';
 import useCombinedRefs from '../uses/useCombinedRefs';
-import { useDimensions } from '../uses/useDimensions';
-import { useWindowSize } from '../uses/useWindowSize';
 import { DataGridRenderers } from './DataGridRenderers';
 
 /**
@@ -79,6 +77,7 @@ export interface DataGridExProps<T extends Record<string, any>>
      * Footer item renderer
      */
     footerItemRenderer?: (
+        rows: T[],
         props: DataGridExFooterItemRendererProps<T>
     ) => React.ReactNode;
 
@@ -152,11 +151,6 @@ const createGridStyle = (
     });
 };
 
-interface States {
-    gridWidth?: number;
-    ref?: ScrollerGridForwardRef;
-}
-
 const rowItems = (
     div: HTMLDivElement,
     callback: (div: HTMLDivElement) => void
@@ -247,7 +241,7 @@ export function DataGridEx<T extends Record<string, any>>(
                         sortLabel = headerCellRenderer({
                             cellProps,
                             column,
-                            columnIndex: index,
+                            columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
                             states
                         });
                     } else if (sortable && field != null) {
@@ -290,7 +284,7 @@ export function DataGridEx<T extends Record<string, any>>(
         );
     };
 
-    function defaultFooterRenderer(states: GridLoaderStates<T>) {
+    function defaultFooterRenderer(rows: T[], states: GridLoaderStates<T>) {
         return (
             <Box
                 className="DataGridEx-Footer"
@@ -310,9 +304,9 @@ export function DataGridEx<T extends Record<string, any>>(
 
                     // Cell
                     const cell = footerItemRenderer
-                        ? footerItemRenderer({
+                        ? footerItemRenderer(rows, {
                               column,
-                              index,
+                              index: checkable ? index - 1 : index, // Ignore the checkbox case
                               states,
                               cellProps,
                               checkable
@@ -383,7 +377,7 @@ export function DataGridEx<T extends Record<string, any>>(
                         color="primary"
                         checked={selected}
                         onChange={(_event, checked) => {
-                            state.ref?.selectItem(data, checked);
+                            refs.current.ref?.selectItem(data, checked);
                         }}
                     />
                 );
@@ -403,11 +397,11 @@ export function DataGridEx<T extends Record<string, any>>(
                         color="primary"
                         indeterminate={
                             states.selectedItems.length > 0 &&
-                            states.selectedItems.length < states.rows.length
+                            states.selectedItems.length < states.loadedItems
                         }
                         checked={states.selectedItems.length > 0}
                         onChange={(_event, checked) =>
-                            state.ref?.selectAll(checked)
+                            refs.current.ref?.selectAll(checked)
                         }
                     />
                 );
@@ -422,19 +416,11 @@ export function DataGridEx<T extends Record<string, any>>(
         }
     }
 
-    // States
-    const [state, stateUpdate] = React.useReducer(
-        (currentState: States, newState: Partial<States>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            gridWidth: width
-        }
-    );
+    const refs = React.useRef<{ ref?: ScrollerGridForwardRef }>({});
 
-    const refs = useCombinedRefs(mRef, (ref: ScrollerGridForwardRef) => {
+    const mRefLocal = useCombinedRefs(mRef, (ref: ScrollerGridForwardRef) => {
         if (ref == null) return;
-        state.ref = ref;
+        refs.current.ref = ref;
     });
 
     // New sort
@@ -442,8 +428,9 @@ export function DataGridEx<T extends Record<string, any>>(
         reset({ orderBy: field, orderByAsc: asc });
     };
 
+    // Reset
     const reset = (add: {}) => {
-        state.ref?.reset(add);
+        refs.current.ref?.reset(add);
     };
 
     // Show hover tooltip for trucated text
@@ -594,14 +581,11 @@ export function DataGridEx<T extends Record<string, any>>(
         [columns]
     );
 
-    // Grid width
-    const { gridWidth } = state;
-
     // Column width
     const columnWidth = React.useCallback(
         (index: number) => {
             // Ignore null case
-            if (gridWidth == null) return 0;
+            if (width == null) return 0;
 
             // Column
             const column = columns[index];
@@ -609,9 +593,9 @@ export function DataGridEx<T extends Record<string, any>>(
 
             // More space
             const leftWidth =
-                gridWidth -
+                width -
                 widthCalculator.total -
-                (gridWidth < 800 ? 0 : scrollbarSize);
+                (width < 800 ? 0 : scrollbarSize);
 
             // Shared width
             const sharedWidth =
@@ -619,74 +603,50 @@ export function DataGridEx<T extends Record<string, any>>(
 
             return (column.minWidth || minWidth) + sharedWidth;
         },
-        [columns, gridWidth]
+        [columns, width]
     );
 
     // Table
     const table = React.useMemo(() => {
-        if (gridWidth != null) {
-            const defaultOrderByAsc = defaultOrderBy
-                ? columns.find((column) => column.field === defaultOrderBy)
-                      ?.sortAsc
-                : undefined;
-
-            return (
-                <ScrollerGrid<T>
-                    className={Utils.mergeClasses(
-                        'DataGridEx-Body',
-                        'DataGridEx-CustomBar',
-                        className,
-                        createGridStyle(
-                            alternatingColors,
-                            selectedColor,
-                            hoverColor
-                        )
-                    )}
-                    columnCount={columns.length}
-                    columnWidth={columnWidth}
-                    defaultOrderBy={defaultOrderBy}
-                    defaultOrderByAsc={defaultOrderByAsc}
-                    height={
-                        height -
-                        headerHeight -
-                        (hideFooter ? 0 : bottomHeight + 1) -
-                        scrollbarSize
-                    }
-                    headerRenderer={headerRenderer}
-                    idField={idField}
-                    itemRenderer={itemRenderer}
-                    footerRenderer={hideFooter ? undefined : footerRenderer}
-                    width={Math.max(gridWidth, widthCalculator.total)}
-                    mRef={refs}
-                    {...rest}
-                />
-            );
-        }
-    }, [gridWidth]);
+        const defaultOrderByAsc = defaultOrderBy
+            ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
+            : undefined;
 
-    // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
-    const gridRect = dimensions[0][2];
-
-    const windowSize = useWindowSize(50);
-
-    React.useEffect(() => {
-        if (gridRect == null || width != null) return;
-
-        // Reset column widths
-        if (state.ref) state.ref.resetAfterColumnIndex(0);
-
-        const body = window.document.body;
-        const scrollWidth = body.scrollWidth - body.clientWidth;
-
-        stateUpdate({
-            gridWidth: gridRect.width - scrollWidth
-        });
-    }, [gridRect, windowSize]);
+        return (
+            <ScrollerGrid<T>
+                className={Utils.mergeClasses(
+                    'DataGridEx-Body',
+                    'DataGridEx-CustomBar',
+                    className,
+                    createGridStyle(
+                        alternatingColors,
+                        selectedColor,
+                        hoverColor
+                    )
+                )}
+                columnCount={columns.length}
+                columnWidth={columnWidth}
+                defaultOrderBy={defaultOrderBy}
+                defaultOrderByAsc={defaultOrderByAsc}
+                height={
+                    height -
+                    headerHeight -
+                    (hideFooter ? 0 : bottomHeight + 1) -
+                    scrollbarSize
+                }
+                headerRenderer={headerRenderer}
+                idField={idField}
+                itemRenderer={itemRenderer}
+                footerRenderer={hideFooter ? undefined : footerRenderer}
+                width={Math.max(width ?? 0, widthCalculator.total)}
+                mRef={mRefLocal}
+                {...rest}
+            />
+        );
+    }, [width]);
 
     return (
         <Paper
-            ref={dimensions[0][0]}
             sx={{
                 fontSize: '0.875rem',
                 height,
@@ -720,7 +680,7 @@ export function DataGridEx<T extends Record<string, any>>(
             <div
                 className="DataGridEx-CustomBar"
                 style={{
-                    width: gridWidth,
+                    width,
                     overflowX: 'auto',
                     overflowY: 'hidden'
                 }}