@linzjs/step-ag-grid 17.8.0 → 17.10.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.10.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/components/gridForm/GridFormPopoverMenu.tsx

@@ -3,7 +3,7 @@ import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
-import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
+import { FocusableItem, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
 import { ClickEvent } from "../../react-menu3/types";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
@@ -29,6 +29,7 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 
 export interface MenuOption<RowType extends GridBaseRow> {
   label: ReactElement | string | MenuSeparatorType;
+  subMenu?: () => ReactElement;
   action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
@@ -135,14 +136,25 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
             ) : (
               !item.hidden && (
                 <Fragment key={`${item.label}`}>
-                  <MenuItem
-                    key={`${item.label}`}
-                    onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
-                    disabled={!!item.disabled}
-                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                  >
-                    {item.label as ReactElement | string}
-                  </MenuItem>
+                  {item.subMenu ? (
+                    <SubMenu
+                      key={`${item.label}`}
+                      disabled={!!item.disabled}
+                      label={item.label as string}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                    >
+                      <item.subMenu />
+                    </SubMenu>
+                  ) : (
+                    <MenuItem
+                      key={`${item.label}`}
+                      onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                      disabled={!!item.disabled}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                    >
+                      {item.label as ReactElement | string}
+                    </MenuItem>
+                  )}
                   {item.subComponent && subComponentSelected === item && (
                     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
                       {() => (

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

@@ -23,6 +23,7 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  MenuItem,
   useGridFilter,
   wait,
 } from "../..";
@@ -171,6 +172,10 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
                     await wait(1500);
                   },
                 },
+                {
+                  label: "Sub menu...",
+                  subMenu: () => <MenuItem>Find...</MenuItem>,
+                },
                 {
                   label: "Disabled item",
                   disabled: "Disabled for test",
@@ -215,6 +220,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}>