@linzjs/step-ag-grid 14.3.2 → 14.4.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.3.2",
+  "version": "14.4.0",
   "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";
@@ -88,7 +83,6 @@ export const Grid = ({
   const {
     gridReady,
     setApis,
-    prePopupOps,
     ensureRowVisible,
     getFirstRowId,
     selectRowsById,
@@ -101,8 +95,10 @@ export const Grid = ({
     isExternalFilterPresent,
     doesExternalFilterPass,
     setOnCellEditingComplete,
+    getColDef,
   } = useContext(GridContext);
-  const { checkUpdating, updatedDep, isUpdating } = useContext(GridUpdatingContext);
+  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const gridContext = useContext(GridContext);
 
   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.
@@ -391,23 +387,13 @@ export const Grid = ({
    */
   const startCellEditing = useCallback(
     (event: CellEvent) => {
-      prePopupOps();
-      if (!event.node.isSelected()) {
-        event.node.setSelected(true, true);
-      }
-      // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
-        return;
-      }
-
-      if (event.rowIndex !== null) {
-        event.api.startEditingCell({
-          rowIndex: event.rowIndex,
-          colKey: event.column.getColId(),
+      event.data.id &&
+        gridContext.startCellEditing({
+          rowId: event.data.id,
+          colId: event.column.getColId(),
         });
-      }
     },
-    [checkUpdating, prePopupOps],
+    [gridContext],
   );
 
   /**
@@ -478,48 +464,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 +560,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;
@@ -37,6 +39,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
   sizeColumnsToFit: () => void;
   cancelEdit: () => void;
+  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => void;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -52,7 +55,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 +63,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 [];
@@ -142,6 +148,9 @@ export const GridContext = createContext<GridContextType<any>>({
   cancelEdit: () => {
     console.error("no context provider for cancelEdit");
   },
+  startCellEditing: () => {
+    console.error("no context provider for startCellEditing");
+  },
   stopEditing: () => {
     console.error("no context provider for stopEditing");
   },

package/src/contexts/GridContextProvider.tsx

@@ -21,7 +21,7 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export const GridContextProvider = <RowType extends GridBaseRow>(props: GridContextProps): ReactElement => {
-  const { modifyUpdating } = useContext(GridUpdatingContext);
+  const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
   const [gridApi, setGridApi] = useState<GridApi>();
   const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
@@ -377,6 +377,41 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     gridApi.stopEditing();
   }, [gridApi]);
 
+  const startCellEditing = useCallback(
+    async ({ rowId, colId }: { rowId: number; colId: string }) => {
+      if (!gridApi) return;
+
+      const colDef = gridApi.getColumnDef(colId);
+      if (!colDef) return;
+
+      // Cell already being edited, so don't re-edit until finished
+      if (checkUpdating([colDef.field ?? ""], rowId)) {
+        return;
+      }
+      const rowNode = gridApi.getRowNode(`${rowId}`);
+      if (!rowNode) {
+        return;
+      }
+
+      if (!rowNode.isSelected()) {
+        rowNode.setSelected(true, true);
+      }
+      prePopupOps();
+
+      const rowIndex = rowNode.rowIndex;
+      if (rowIndex != null) {
+        const focusAndEdit = () => {
+          gridApi.startEditingCell({
+            rowIndex,
+            colKey: colId,
+          });
+        };
+        defer(focusAndEdit);
+      }
+    },
+    [checkUpdating, gridApi, prePopupOps],
+  );
+
   /**
    * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
    */
@@ -544,6 +579,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(() => {
@@ -588,6 +628,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   return (
     <GridContext.Provider
       value={{
+        getColDef,
         getColumns,
         invisibleColumnIds,
         setInvisibleColumnIds,
@@ -612,6 +653,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         ensureSelectedRowIsVisible,
         sizeColumnsToFit,
         autoSizeColumns,
+        startCellEditing,
         stopEditing,
         cancelEdit,
         updatingCells,

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>
   );