@linzjs/step-ag-grid 15.0.1 → 15.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "15.0.1",
+  "version": "15.1.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -98,7 +98,7 @@
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/debounce-promise": "^3.1.6",
     "@types/jest": "^29.5.2",

package/src/components/Grid.tsx

@@ -14,6 +14,7 @@ import { fnOrVar, isNotEmpty } from "../utils/util";
 import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { GridHeaderSelect } from "./gridHeader";
+import { GridContextMenuComponent, useGridContextMenu } from "./gridHook";
 
 export interface GridBaseRow {
   id: string | number;
@@ -67,6 +68,16 @@ export interface GridProps {
    * Once the last cell to edit closes this callback is called.
    */
   onCellEditingComplete?: () => void;
+
+  /**
+   * Context menu definition if required.
+   */
+  contextMenu?: GridContextMenuComponent<any>;
+
+  /**
+   * Whether to select row on context menu.
+   */
+  contextMenuSelectRow?: boolean;
 }
 
 /**
@@ -79,6 +90,7 @@ export const Grid = ({
   theme = "ag-theme-alpine",
   sizeColumns = "auto",
   selectColumnPinned = null,
+  contextMenuSelectRow = false,
   ...params
 }: GridProps): JSX.Element => {
   const {
@@ -569,6 +581,9 @@ export const Grid = ({
     }
   }, []);
 
+  const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
+
+  // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnCellEditingComplete(params.onCellEditingComplete);
 
   return (
@@ -581,6 +596,7 @@ export const Grid = ({
         gridReady && params.rowData && "Grid-ready",
       )}
     >
+      {gridContextMenu.component}
       <div style={{ flex: 1 }} ref={gridDivRef}>
         <AgGridReact
           rowHeight={params.rowHeight}
@@ -621,6 +637,8 @@ export const Grid = ({
           isExternalFilterPresent={isExternalFilterPresent}
           doesExternalFilterPass={doesExternalFilterPass}
           maintainColumnOrder={true}
+          preventDefaultOnContextMenu={true}
+          onCellContextMenu={gridContextMenu.cellContextMenu}
         />
       </div>
     </div>

package/src/components/gridHook/index.ts

@@ -0,0 +1 @@
+export * from "./useGridContextMenu";

package/src/components/gridHook/useGridContextMenu.tsx

@@ -0,0 +1,92 @@
+import { ColDef } from "ag-grid-community";
+import { CellContextMenuEvent } from "ag-grid-community/dist/lib/events";
+import { ReactElement, useCallback, useContext, useRef, useState } from "react";
+
+import { GridContext } from "../../contexts/GridContext";
+import { ControlledMenu } from "../../react-menu3";
+import { GridBaseRow } from "../Grid";
+
+export interface GridContextMenuComponentProps<RowType extends GridBaseRow> {
+  selectedRows: RowType[];
+  clickedRow: RowType;
+  colDef: ColDef;
+  close: () => void;
+}
+
+export type GridContextMenuComponent<RowType extends GridBaseRow> = (
+  props: GridContextMenuComponentProps<RowType>,
+) => ReactElement | null;
+
+export const useGridContextMenu = <RowType extends GridBaseRow>({
+  contextMenuSelectRow,
+  contextMenu: ContextMenu,
+}: {
+  contextMenuSelectRow: boolean;
+  contextMenu?: GridContextMenuComponent<RowType>;
+}) => {
+  const { redrawRows, prePopupOps, postPopupOps, getSelectedRows } = useContext(GridContext);
+
+  const [isOpen, setOpen] = useState(false);
+  const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const clickedColDefRef = useRef<ColDef>(null!);
+  const selectedRowsRef = useRef<any[]>([]);
+  const clickedRowRef = useRef<any>(null);
+
+  const openMenu = useCallback(
+    (e: PointerEvent | null | undefined) => {
+      if (!e) return;
+      prePopupOps();
+      setAnchorPoint({ x: e.clientX, y: e.clientY });
+      setOpen(true);
+    },
+    [prePopupOps],
+  );
+
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    redrawRows();
+    postPopupOps();
+  }, [postPopupOps, redrawRows]);
+
+  const cellContextMenu = useCallback(
+    (event: CellContextMenuEvent) => {
+      if (contextMenuSelectRow && !event.node.isSelected()) {
+        event.node.setSelected(true, true);
+      }
+
+      clickedColDefRef.current = event.colDef;
+      selectedRowsRef.current = getSelectedRows();
+      clickedRowRef.current = event.data;
+
+      // This is actually a pointer event
+      openMenu(event.event as PointerEvent);
+    },
+    [contextMenuSelectRow, getSelectedRows, openMenu],
+  );
+
+  return {
+    openMenu,
+    cellContextMenu,
+    component: ContextMenu ? (
+      <>
+        <ControlledMenu
+          anchorPoint={anchorPoint}
+          state={isOpen ? "open" : "closed"}
+          direction="right"
+          onClose={closeMenu}
+        >
+          {isOpen && (
+            <ContextMenu
+              selectedRows={selectedRowsRef.current}
+              clickedRow={clickedRowRef.current}
+              colDef={clickedColDefRef.current}
+              close={closeMenu}
+            />
+          )}
+        </ControlledMenu>
+      </>
+    ) : null,
+  };
+};

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";
 export * from "./gridForm";
 export * from "./gridHeader";
+export * from "./gridHook";
 export * from "./GridIcon";
 export * from "./GridLoadableCell";
 export * from "./GridNoRowsOverlay";

package/src/contexts/GridContext.tsx

@@ -23,6 +23,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
   setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
+  postPopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
   getSelectedRows: <T extends GridBaseRow>() => T[];
@@ -85,6 +86,9 @@ export const GridContext = createContext<GridContextType<any>>({
   prePopupOps: () => {
     console.error("no context provider for prePopupOps");
   },
+  postPopupOps: () => {
+    console.error("no context provider for prePopupOps");
+  },
   externallySelectedItemsAreInSync: false,
   setApis: () => {
     console.error("no context provider for setApis");

package/src/contexts/GridContextProvider.tsx

@@ -132,6 +132,16 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
   }, [gridApi]);
 
+  /**
+   * After a popup refocus the cell.
+   */
+  const postPopupOps = useCallback(() => {
+    if (!gridApi) return;
+    if (prePopupFocusedCell.current) {
+      gridApi?.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+    }
+  }, [gridApi]);
+
   /**
    * Get all row id's in grid.
    */
@@ -663,6 +673,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         setInvisibleColumnIds,
         gridReady,
         prePopupOps,
+        postPopupOps,
         setApis,
         setQuickFilter,
         selectRowsById,

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -0,0 +1,136 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import {
+  ActionButton,
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContext,
+  GridContextMenuComponentProps,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  MenuItem,
+  wait,
+} from "../..";
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import { IFormTestRow } from "./FormTest";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    quickFilterValue: "",
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+const ContextMenu = ({ clickedRow, colDef, close }: GridContextMenuComponentProps<IFormTestRow>): ReactElement => {
+  const onClick = useCallback(() => {
+    switch (colDef.field) {
+      case "name":
+        clickedRow.name = "";
+        break;
+      case "distance":
+        clickedRow.distance = null;
+        break;
+    }
+    close();
+  }, [close, colDef.field, clickedRow]);
+
+  return (
+    <>
+      <button onClick={onClick}>Button - Clear cell</button>
+      <MenuItem onClick={onClick}>Menu Item - Clear cell</MenuItem>
+    </>
+  );
+};
+
+const GridPopoutContextMenuTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const { selectRowsWithFlashDiff } = useContext(GridContext);
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
+  ] as IFormTestRow[]);
+
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+      }),
+      GridCell({
+        field: "name",
+        headerName: "Name",
+      }),
+      GridCell({
+        field: "distance",
+        headerName: "Number input",
+        valueFormatter: (params) => {
+          const v = params.data.distance;
+          return v != null ? `${v}m` : "–";
+        },
+      }),
+    ],
+    [],
+  );
+
+  const addRowAction = useCallback(async () => {
+    await wait(1000);
+
+    const lastRow = rowData[rowData.length - 1];
+    await selectRowsWithFlashDiff(async () => {
+      setRowData([
+        ...rowData,
+        {
+          id: (lastRow?.id ?? 0) + 1,
+          name: "?",
+          nameType: "?",
+          numba: "?",
+          plan: "",
+          distance: null,
+        },
+      ]);
+    });
+  }, [rowData, selectRowsWithFlashDiff]);
+
+  return (
+    <>
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={"autoHeight"}
+        defaultColDef={{ minWidth: 70 }}
+        sizeColumns={"auto"}
+        onCellEditingComplete={() => {
+          /* eslint-disable-next-line no-console */
+          console.log("Cell editing complete");
+        }}
+        contextMenu={ContextMenu}
+      />
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={addRowAction} />
+    </>
+  );
+};
+
+export const EditContextMenu = GridPopoutContextMenuTemplate.bind({});

package/src/utils/testUtil.ts

@@ -31,7 +31,7 @@ const _selectRow = async (
     const isSelected = row.className.includes("ag-row-selected");
     if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
       const cell = await findCell(rowId, "selection", within);
-      userEvent.click(cell);
+      await userEvent.click(cell);
       await waitFor(async () => {
         const row = await findRow(rowId, within);
         const nowSelected = row.className.includes("ag-row-selected");
@@ -75,14 +75,14 @@ export const findCellContains = async (
 export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
   await act(async () => {
     const cell = await findCell(rowId, colId, within);
-    userEvent.click(cell);
+    await userEvent.click(cell);
   });
 };
 
 export const editCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<void> => {
   await act(async () => {
     const cell = await findCell(rowId, colId, within);
-    userEvent.dblClick(cell);
+    await userEvent.dblClick(cell);
   });
   await waitFor(findOpenPopover);
 };
@@ -129,8 +129,7 @@ export const validateMenuOptions = async (
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
   await act(async () => {
     const menuOption = await findMenuOption(menuOptionText);
-    // eslint-disable-next-line testing-library/await-async-utils
-    userEvent.click(menuOption);
+    await userEvent.click(menuOption);
   });
 };
 
@@ -173,17 +172,17 @@ export const findMultiSelectOption = async (value: string): Promise<HTMLElement>
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
   const menuItem = await findMultiSelectOption(value);
-  menuItem.parentElement && userEvent.click(menuItem.parentElement);
+  menuItem.parentElement && (await userEvent.click(menuItem.parentElement));
 };
 
 const typeInput = async (value: string, filter: IQueryQuick): Promise<void> =>
   act(async () => {
     const openMenu = await findOpenPopover();
     const input = await findQuick(filter, openMenu);
-    userEvent.clear(input);
-    //'typing' an empty string will cause a console error and it's also unnecessary after the previous clear call
+    await userEvent.clear(input);
+    //'typing' an empty string will cause a console error, and it's also unnecessary after the previous clear call
     if (value.length > 0) {
-      userEvent.type(input, value);
+      await userEvent.type(input, value);
     }
   });
 
@@ -222,6 +221,6 @@ export const findActionButton = (text: string, container?: HTMLElement): Promise
 export const clickActionButton = async (text: string, container?: HTMLElement): Promise<void> => {
   await act(async () => {
     const button = await findActionButton(text, container);
-    userEvent.click(button);
+    await userEvent.click(button);
   });
 };