@etsoo/react 1.4.18 → 1.4.22

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
@@ -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,7 +304,7 @@ export function DataGridEx<T extends Record<string, any>>(
 
                     // Cell
                     const cell = footerItemRenderer
-                        ? footerItemRenderer({
+                        ? footerItemRenderer(rows, {
                               column,
                               index,
                               states,
@@ -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'
                 }}

package/src/mu/DataGridRenderers.tsx

@@ -115,22 +115,21 @@ export namespace DataGridRenderers {
      * @param param Props
      * @returns Component
      */
-    export function defaultFooterItemRenderer<T>({
-        index,
-        states,
-        checkable
-    }: DataGridExFooterItemRendererProps<T>) {
-        const { selectedItems, rows, hasNextPage } = states;
+    export function defaultFooterItemRenderer<T>(
+        _rows: T[],
+        { index, states, checkable }: DataGridExFooterItemRendererProps<T>
+    ) {
+        const { selectedItems, loadedItems, hasNextPage } = states;
 
         if (checkable && index === 1) {
             return [
                 selectedItems.length,
-                rows.length.toLocaleString() + (hasNextPage ? '+' : '')
+                loadedItems.toLocaleString() + (hasNextPage ? '+' : '')
             ].join(' / ');
         }
 
         if (!checkable && index === 0) {
-            return rows.length.toLocaleString() + (hasNextPage ? '+' : '');
+            return loadedItems.toLocaleString() + (hasNextPage ? '+' : '');
         }
 
         return undefined;

package/src/mu/GridMethodRef.ts

@@ -1,3 +1,5 @@
+import { GridLoaderStates } from '../components/GridLoader';
+
 /**
  * Grid method ref
  */
@@ -6,5 +8,5 @@ export interface GridMethodRef {
      * Reset
      * @param add Additional data
      */
-    reset(add?: {}): void;
+    reset(add?: Partial<GridLoaderStates<unknown>>): void;
 }