@linzjs/step-ag-grid 17.8.0 → 17.9.0

package/package.json

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

package/src/components/Grid.tsx

@@ -101,6 +101,8 @@ export interface GridProps {
    * Defaults to false.
    */
   singleClickEdit?: boolean;
+
+  loading?: boolean;
 }
 
 /**
@@ -136,9 +138,11 @@ export const Grid = ({
     doesExternalFilterPass,
     setOnCellEditingComplete,
     getColDef,
+    showNoRowsOverlay,
+    prePopupOps,
+    stopEditing,
   } = useContext(GridContext);
   const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
-  const { prePopupOps } = useContext(GridContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
   const lastSelectedIds = useRef<number[]>([]);
@@ -323,7 +327,11 @@ export const Grid = ({
   const columnDefs = useMemo((): (ColDef | ColGroupDef)[] => {
     const adjustColDefs = params.columnDefs.map((colDef) => {
       const colDefEditable = colDef.editable;
-      const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+      const editable = combineEditables(
+        params.loading !== true && params.readOnly !== true,
+        params.defaultColDef?.editable,
+        colDefEditable,
+      );
       return {
         ...colDef,
         editable,
@@ -369,6 +377,7 @@ export const Grid = ({
     params.columnDefs,
     params.selectable,
     params.onRowDragEnd,
+    params.loading,
     params.readOnly,
     params.defaultColDef?.editable,
     selectColumnPinned,
@@ -566,6 +575,16 @@ export const Grid = ({
     }
   }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
 
+  const prevLoading = useRef(false);
+  useEffect(() => {
+    const newLoading = !rowData || params.loading === true;
+    if (newLoading && !prevLoading.current) {
+      stopEditing();
+      showNoRowsOverlay();
+    }
+    prevLoading.current = newLoading;
+  }, [params.loading, rowData, showNoRowsOverlay, stopEditing]);
+
   /**
    * Resize columns to fit if required on window/container resize
    */
@@ -691,7 +710,7 @@ export const Grid = ({
             event.api.forEachNode(() => rowCount++);
             return (
               <GridNoRowsOverlay
-                loading={!rowData}
+                loading={!rowData || params.loading === true}
                 rowCount={rowCount}
                 headerRowHeight={headerRowCount * rowHeight}
                 filteredRowCount={event.api.getDisplayedRowCount()}

package/src/contexts/GridContext.tsx

@@ -65,6 +65,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   setInvisibleColumnIds: (colIds: string[]) => void;
   downloadCsv: (csvExportParams?: CsvExportParams) => void;
   setOnCellEditingComplete: (callback: (() => void) | undefined) => void;
+  showNoRowsOverlay: () => void;
 }
 
 export const GridContext = createContext<GridContextType<any>>({
@@ -201,6 +202,9 @@ export const GridContext = createContext<GridContextType<any>>({
   setOnCellEditingComplete: () => {
     console.error("no context provider for setOnCellEditingComplete");
   },
+  showNoRowsOverlay: () => {
+    console.error("no context provider for showLoadingOverlay");
+  },
 });
 
 export const useGridContext = <RowType extends GridBaseRow>() => useContext<GridContextType<RowType>>(GridContext);

package/src/contexts/GridContextProvider.tsx

@@ -659,6 +659,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     [gridApi],
   );
 
+  const showNoRowsOverlay = useCallback((): void => {
+    gridApi?.showNoRowsOverlay();
+  }, [gridApi]);
+
   /**
    * Apply column visibility
    */
@@ -755,6 +759,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
         doesExternalFilterPass,
         downloadCsv,
         setOnCellEditingComplete,
+        showNoRowsOverlay,
       }}
     >
       {props.children}

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

@@ -215,6 +215,25 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
     { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
   ]);
+  /*
+  Testing
+  const [loading, setLoading] = useState(false);
+
+  useTimeout(() => {
+    setRowData([
+      { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
+      { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
+      { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
+    ]);
+  }, 5000);
+
+  useTimeout(() => {
+    setLoading(true);
+  }, 7000);
+
+  useTimeout(() => {
+    setLoading(false);
+  }, 9000);*/
 
   return (
     <GridWrapper maxHeight={400}>