@linzjs/step-ag-grid 14.3.1 → 14.3.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.3.1",
+  "version": "14.3.3",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -1,12 +1,7 @@
 import { CellClickedEvent, ColDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
-import {
-  CellEditingStoppedEvent,
-  CellEvent,
-  GridReadyEvent,
-  SelectionChangedEvent,
-} from "ag-grid-community/dist/lib/events";
+import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { difference, isEmpty, last, omit, xorBy } from "lodash-es";
@@ -101,8 +96,9 @@ export const Grid = ({
     isExternalFilterPresent,
     doesExternalFilterPass,
     setOnCellEditingComplete,
+    getColDef,
   } = useContext(GridContext);
-  const { checkUpdating, updatedDep, isUpdating } = useContext(GridUpdatingContext);
+  const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
 
@@ -351,12 +347,12 @@ export const Grid = ({
     lastUpdatedDep.current = updatedDep;
 
     // Don't update while there are spinners
-    if (isUpdating()) return;
+    if (!isEmpty(updatingCols())) return;
 
     const skipHeader = sizeColumns === "auto-skip-headers";
     autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
     colIdsEdited.current.clear();
-  }, [autoSizeColumns, isUpdating, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep]);
+  }, [autoSizeColumns, params.rowData?.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
 
   /**
    * Show/hide no rows overlay when model changes.
@@ -478,48 +474,39 @@ export const Grid = ({
    * Set of colIds that need auto-sizing.
    */
   const colIdsEdited = useRef(new Set<string>());
-
-  /**
-   * When cell editing has completed tag the colId as needing auto-sizing
-   */
-  const onCellEditingStopped = useCallback(
-    (e: CellEditingStoppedEvent) => {
-      const skipHeader = sizeColumns === "auto-skip-headers";
-      if (sizeColumns === "auto" || skipHeader) {
-        // This may be wrong as the cell update hasn't completed?
-        const colId = e.colDef.colId;
-        if (colId && !e.colDef.flex) {
-          // This auto-sizes based on updatingContext completing
-          colIdsEdited.current.add(colId);
-          // This auto-sizes immediately in case it was an in place update
-          !isUpdating() &&
-            autoSizeColumns({
-              skipHeader,
-              userSizedColIds: userSizedColIds.current,
-              colIds: [colId],
-            });
-        }
-      }
-    },
-    [autoSizeColumns, isUpdating, sizeColumns],
-  );
-
   const lastUpdatedDep = useRef(updatedDep);
 
   /**
-   * If columns are edited, wait for the updating context to complete then auto-size them.
+   * When cell editing has completed the colId as needing auto-sizing
    */
   useEffect(() => {
-    if (lastUpdatedDep.current === updatedDep || isEmpty(colIdsEdited.current)) return;
+    if (lastUpdatedDep.current === updatedDep) return;
     lastUpdatedDep.current = updatedDep;
 
-    // Don't update while there are spinners
-    if (isUpdating()) return;
-
-    const skipHeader = sizeColumns === "auto-skip-headers";
-    autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
-    colIdsEdited.current.clear();
-  }, [autoSizeColumns, updatedDep, sizeColumns, isUpdating]);
+    const colIds = updatingCols();
+    // Updating possibly completed
+    if (isEmpty(colIds)) {
+      // Columns to resize?
+      if (!isEmpty(colIdsEdited.current)) {
+        const skipHeader = sizeColumns === "auto-skip-headers";
+        if (sizeColumns === "auto" || skipHeader) {
+          autoSizeColumns({
+            skipHeader,
+            userSizedColIds: userSizedColIds.current,
+            colIds: colIdsEdited.current,
+          });
+        }
+        colIdsEdited.current.clear();
+      }
+    } else {
+      // Updates not complete, add them to a list of columns needing resize
+      colIds.forEach((colId) => {
+        if (colId && !getColDef(colId)?.flex) {
+          colIdsEdited.current.add(colId);
+        }
+      });
+    }
+  }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
 
   /**
    * Resize columns to fit if required on window/container resize
@@ -583,7 +570,6 @@ export const Grid = ({
           onCellDoubleClicked={onCellDoubleClick}
           onCellEditingStarted={refreshSelectedRows}
           domLayout={params.domLayout}
-          onCellEditingStopped={onCellEditingStopped}
           onColumnResized={onColumnResized}
           defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }}
           columnDefs={columnDefsAdjusted}

package/src/contexts/GridContext.tsx

@@ -1,4 +1,4 @@
-import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { createContext, useContext } from "react";
 
@@ -16,6 +16,8 @@ export type AutoSizeColumnsResult = { width: number } | null;
 
 export interface GridContextType<RowType extends GridBaseRow> {
   gridReady: boolean;
+  getColDef: (colId?: string) => ColDef | undefined;
+  getColumns: () => ColDefT<RowType>[];
   setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
@@ -52,7 +54,6 @@ export interface GridContextType<RowType extends GridBaseRow> {
   removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
   isExternalFilterPresent: () => boolean;
   doesExternalFilterPass: (node: RowNode) => boolean;
-  getColumns: () => ColDefT<RowType>[];
   invisibleColumnIds: string[];
   setInvisibleColumnIds: (colIds: string[]) => void;
   downloadCsv: (csvExportParams?: CsvExportParams) => void;
@@ -61,6 +62,10 @@ export interface GridContextType<RowType extends GridBaseRow> {
 
 export const GridContext = createContext<GridContextType<any>>({
   gridReady: false,
+  getColDef: () => {
+    console.error("no context provider for getColDef");
+    return undefined;
+  },
   getColumns: () => {
     console.error("no context provider for getColumns");
     return [];

package/src/contexts/GridContextProvider.tsx

@@ -411,36 +411,29 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         );
       };
 
-      let foundEditableCell = false;
-
       // Just in case I've missed something, we don't want the loop to hang everything
-      let maxIterations = 50;
-      let preRow: CellPosition | null = null;
-      let postRow: CellPosition | null = null;
-      do {
-        preRow = gridApi.getFocusedCell();
+      for (let maxIterations = 0; maxIterations < 50; maxIterations++) {
+        const preRow = gridApi.getFocusedCell();
         tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
-        postRow = gridApi.getFocusedCell();
-        foundEditableCell = focusedCellIsEditable();
-      } while (
-        preRow?.rowIndex === postRow?.rowIndex &&
-        preRow?.column !== postRow?.column &&
-        !foundEditableCell &&
-        maxIterations-- > 0
-      );
-
-      if (foundEditableCell) {
-        prePopupOps();
-        const focusedCell = gridApi?.getFocusedCell();
-        if (focusedCell) {
-          gridApi.startEditingCell({
-            rowIndex: focusedCell.rowIndex,
-            colKey: focusedCell.column.getColId(),
-          });
-          return false;
+        const postRow = gridApi.getFocusedCell();
+        if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
+          // We didn't find an editable cell in the same row, or the cell column didn't change
+          // implying it was start/end of grid
+          break;
+        }
+        if (focusedCellIsEditable()) {
+          const focusedCell = gridApi?.getFocusedCell();
+          if (focusedCell) {
+            prePopupOps();
+            gridApi.startEditingCell({
+              rowIndex: focusedCell.rowIndex,
+              colKey: focusedCell.column.getColId(),
+            });
+            return true;
+          }
         }
       }
-      return true;
+      return false;
     },
     [gridApi, prePopupOps],
   );
@@ -494,7 +487,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
           prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
           prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()
         ) {
-          if (!tabDirection || selectNextEditableCell(tabDirection)) {
+          if (!tabDirection || !selectNextEditableCell(tabDirection)) {
             cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
           }
         }
@@ -551,6 +544,11 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     return externalFilters.current.every((filter) => filter(node.data, node));
   };
 
+  const getColDef = useCallback(
+    (colId?: string): ColDef | undefined => (!!colId && gridApi?.getColumnDef(colId)) || undefined,
+    [gridApi],
+  );
+
   const getColumns: () => ColDefT<RowType>[] = useCallback(() => gridApi?.getColumnDefs() ?? [], [gridApi]);
 
   useEffect(() => {
@@ -595,6 +593,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   return (
     <GridContext.Provider
       value={{
+        getColDef,
         getColumns,
         invisibleColumnIds,
         setInvisibleColumnIds,

package/src/contexts/GridUpdatingContext.tsx

@@ -2,13 +2,13 @@ import { createContext } from "react";
 
 export type GridUpdatingContextType = {
   checkUpdating: (fields: string | string[], id: number | string) => boolean;
-  isUpdating: () => boolean;
   modifyUpdating: (
     fields: string | string[],
     ids: (number | string)[],
     fn: () => void | Promise<void>,
   ) => Promise<void>;
   updatedDep: number;
+  updatingCols: () => string[];
 };
 
 export const GridUpdatingContext = createContext<GridUpdatingContextType>({
@@ -16,9 +16,9 @@ export const GridUpdatingContext = createContext<GridUpdatingContextType>({
     console.error("Missing GridUpdatingContext");
     return false;
   },
-  isUpdating: () => {
+  updatingCols: () => {
     console.error("Missing GridUpdatingContext");
-    return false;
+    return [];
   },
   modifyUpdating: async () => {
     console.error("Missing GridUpdatingContext");

package/src/contexts/GridUpdatingContextProvider.tsx

@@ -1,4 +1,4 @@
-import { castArray, flatten, isEmpty, remove } from "lodash-es";
+import { castArray, flatten, remove } from "lodash-es";
 import { ReactNode, useRef, useState } from "react";
 
 import { GridUpdatingContext } from "./GridUpdatingContext";
@@ -29,8 +29,7 @@ export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps)
     updating.current = mergedUpdatingBlocks;
     setUpdatedDep((updatedDep) => updatedDep + 1);
   };
-
-  const isUpdating = () => !isEmpty(updating.current);
+  const updatingCols = () => Object.keys(updating.current);
 
   const modifyUpdating = async (
     fields: string | string[],
@@ -55,7 +54,7 @@ export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps)
     castArray(fields).some((f) => updating.current[f]?.includes(id));
 
   return (
-    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating, isUpdating, updatedDep }}>
+    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating, updatingCols, updatedDep }}>
       {props.children}
     </GridUpdatingContext.Provider>
   );