@linzjs/step-ag-grid 7.10.1 → 7.11.0

package/package.json

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

package/src/components/Grid.tsx

@@ -34,6 +34,7 @@ export interface GridProps {
   animateRows?: boolean;
   rowClassRules?: GridOptions["rowClassRules"];
   rowSelection?: "single" | "multiple";
+  autoSelectFirstRow?: boolean;
 }
 
 /**
@@ -48,6 +49,7 @@ export const Grid = (params: GridProps): JSX.Element => {
     selectRowsById,
     ensureSelectedRowIsVisible,
     sizeColumnsToFit,
+    setExternallySelectedItemsAreInSync,
   } = useContext(GridContext);
   const { checkUpdating } = useContext(GridUpdatingContext);
 
@@ -56,6 +58,22 @@ export const Grid = (params: GridProps): JSX.Element => {
   const [staleGrid, setStaleGrid] = useState(false);
   const postSortRows = usePostSortRowsHook({ setStaleGrid });
 
+  /**
+   * On data load select the first row of the grid if required.
+   */
+  const hasSelectedFirstItem = useRef(false);
+  useEffect(() => {
+    if (!gridReady || !params.autoSelectFirstRow || hasSelectedFirstItem.current || !params.rowData) return;
+    hasSelectedFirstItem.current = true;
+    if (isNotEmpty(params.rowData)) {
+      if (params.setExternalSelectedItems) {
+        params.setExternalSelectedItems([params.rowData[0]]);
+      } else {
+        selectRowsById([params.rowData[0].id]);
+      }
+    }
+  }, [gridReady, params, params.autoSelectFirstRow, params.rowData, selectRowsById]);
+
   /**
    * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
    * This passes the event to the checkbox when you click anywhere in the cell.
@@ -71,7 +89,10 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const synchroniseExternalStateToGridSelection = useCallback(
     ({ api }: SelectionChangedEvent) => {
-      if (!params.externalSelectedItems || !params.setExternalSelectedItems) return;
+      if (!params.externalSelectedItems || !params.setExternalSelectedItems) {
+        setExternallySelectedItemsAreInSync(true);
+        return;
+      }
 
       const selectedRows = api.getSelectedRows();
       // We don't want to update selected Items if it hasn't changed to prevent excess renders
@@ -79,10 +100,13 @@ export const Grid = (params: GridProps): JSX.Element => {
         params.externalSelectedItems.length != selectedRows.length ||
         isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
       ) {
+        setExternallySelectedItemsAreInSync(false);
         params.setExternalSelectedItems([...selectedRows]);
+      } else {
+        setExternallySelectedItemsAreInSync(true);
       }
     },
-    [params],
+    [params, setExternallySelectedItemsAreInSync],
   );
 
   /**
@@ -90,21 +114,25 @@ export const Grid = (params: GridProps): JSX.Element => {
    * If new ids are selected scroll them into view.
    */
   const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
-    if (!gridReady()) return;
-    if (!params.externalSelectedItems) return;
+    if (!gridReady) return;
+    if (!params.externalSelectedItems) {
+      setExternallySelectedItemsAreInSync(true);
+      return;
+    }
 
     const selectedIds = params.externalSelectedItems.map((row) => row.id) as number[];
     const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
     if (lastNewId != null) ensureRowVisible(lastNewId);
     lastSelectedIds.current = selectedIds;
     selectRowsById(selectedIds);
-  }, [params.externalSelectedItems, ensureRowVisible, gridReady, selectRowsById]);
+    setExternallySelectedItemsAreInSync(true);
+  }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
 
   /**
    * Synchronise quick filter to grid
    */
   const updateQuickFilter = useCallback(() => {
-    if (!gridReady()) return;
+    if (!gridReady) return;
     if (params.quickFilter) {
       setQuickFilter(internalQuickFilter);
       return;

package/src/contexts/GridContext.tsx

@@ -3,7 +3,7 @@ import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 
 export interface GridContextType {
-  gridReady: () => boolean;
+  gridReady: boolean;
   setGridApi: (gridApi: GridApi | undefined) => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
@@ -26,13 +26,12 @@ export interface GridContextType {
     tabDirection?: 1 | 0 | -1,
   ) => Promise<boolean>;
   redrawRows: (rowNodes?: RowNode[]) => void;
+  setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
+  waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
 }
 
 export const GridContext = createContext<GridContextType>({
-  gridReady: () => {
-    console.error("no context provider for gridReady");
-    return false;
-  },
+  gridReady: false,
   setGridApi: () => {
     console.error("no context provider for setGridApi");
   },
@@ -89,4 +88,10 @@ export const GridContext = createContext<GridContextType>({
   redrawRows: () => {
     console.error("no context provider for redrawRows");
   },
+  setExternallySelectedItemsAreInSync: () => {
+    console.error("no context provider for setExternallySelectedItemsAreInSync");
+  },
+  waitForExternallySelectedItemsToBeInSync: async () => {
+    console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode, useContext, useRef } from "react";
+import { ReactElement, ReactNode, useContext, useRef, useState } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
-import { isNotEmpty } from "../utils/util";
+import { isNotEmpty, wait } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "../components/Grid";
 
@@ -17,21 +17,14 @@ interface GridContextProps {
  */
 export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const { modifyUpdating } = useContext(GridUpdatingContext);
-  const gridApiRef = useRef<GridApi>();
+  const [gridApi, _setGridApi] = useState<GridApi>();
+  const [gridReady, setGridReady] = useState(false);
   const idsBeforeUpdate = useRef<number[]>([]);
+  const externallySelectedItemsAreInSync = useRef(false);
 
-  /**
-   * Has Grid api has been set?
-   * Some ops in components may occur before onGridReady has been called,
-   * and thus will need to check grid is ready before calling.
-   */
-  const gridReady = () => gridApiRef.current != null;
-
-  /**
-   * Set current ref to grid api.
-   */
-  const setGridApi = (_gridApi: GridApi | undefined) => {
-    gridApiRef.current = _gridApi;
+  const setGridApi = (gridApi: GridApi | undefined) => {
+    _setGridApi(gridApi);
+    setGridReady(!!gridApi);
   };
 
   /**
@@ -47,7 +40,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     if (!noApiFn) {
       noApiFn = (() => {}) as () => R;
     }
-    const gridApi = gridApiRef.current;
     return gridApi ? hasApiFn(gridApi) : noApiFn();
   };
 
@@ -121,7 +113,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     rowIds: number[] | undefined,
     select: boolean,
     flash: boolean,
-    retryCount = 5, // We retry for approximately 5x200ms=1s
+    retryCount = 15, // We retry for approximately 5x200ms=1s
   ) => {
     return gridApiOp((gridApi) => {
       const rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
@@ -302,6 +294,17 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  const setExternallySelectedItemsAreInSync = (inSync: boolean) => {
+    externallySelectedItemsAreInSync.current = inSync;
+  };
+
+  const waitForExternallySelectedItemsToBeInSync = async () => {
+    // Wait for up to 5 seconds
+    for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSync.current; i++) {
+      await wait(200);
+    }
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -323,6 +326,8 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         stopEditing,
         updatingCells,
         redrawRows,
+        setExternallySelectedItemsAreInSync,
+        waitForExternallySelectedItemsToBeInSync,
       }}
     >
       {props.children}

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -89,6 +89,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     { id: 1002, bearing: null, bearingCorrection: 355.1 },
     { id: 1003, bearing: null, bearingCorrection: 0 },
     { id: 1004, bearing: 5.0, bearingCorrection: "1.00500" },
+    { id: 1005, bearing: null, bearingCorrection: "0E-12" },
   ] as ITestRow[]);
 
   return (

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -205,6 +205,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       columnDefs={columnDefs}
       rowData={rowData}
       domLayout={"autoHeight"}
+      autoSelectFirstRow={true}
     />
   );
 };

package/src/utils/bearing.ts

@@ -14,9 +14,9 @@ export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): s
     return "–";
   }
   if (typeof value === "string") {
-    return convertDDToDMS(bearingNumberParser(value), true, false);
+    return convertDDToDMS(bearingNumberParser(value), true, true);
   }
-  return convertDDToDMS(value, true, false);
+  return convertDDToDMS(value, true, true);
 };
 
 export const bearingNumberParser = (value: string): number | null => {