@linzjs/step-ag-grid 15.0.2 → 15.1.1

package/package.json

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

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/testQuick.ts

@@ -131,14 +131,14 @@ export const getQuick = (filter: IQueryQuick, container?: HTMLElement): HTMLElem
 };
 
 /**
- * Find by filter.  Waits up to 4 seconds to find filter.
+ * Find by filter.  Waits up to 5 seconds to find filter.
  *
  * @param filter Filter
  * @param container Optional container to look in
  * @return HTMLElement.  Throws exception if not found.
  */
 export const findQuick = async <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): Promise<T> => {
-  const endTime = Date.now() + 4000;
+  const endTime = Date.now() + 5000;
   while (Date.now() < endTime) {
     const el = queryQuick<T>(filter, container);
     if (el) return el;

package/src/utils/testUtil.ts

@@ -1,20 +1,24 @@
-import { act, waitFor, within } from "@testing-library/react";
+import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { isEqual } from "lodash-es";
 
 import { IQueryQuick, findQuick, getAllQuick, getMatcher, getQuick, queryQuick } from "./testQuick";
 
+let user = userEvent;
+/**
+ * allow external userEvent to be used
+ * @param customisedUserEvent
+ */
+export const setUpUserEvent = (customisedUserEvent: any) => {
+  user = customisedUserEvent;
+};
+
 export const countRows = async (within?: HTMLElement): Promise<number> => {
   return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
 };
 
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
-  //if this is not wrapped in an act console errors are logged during testing
-  let row!: HTMLDivElement;
-  await act(async () => {
-    row = await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
-  });
-  return row;
+  return await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 
 export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {
@@ -26,19 +30,17 @@ const _selectRow = async (
   rowId: string | number,
   within?: HTMLElement,
 ): Promise<void> => {
-  await act(async () => {
-    const row = await findRow(rowId, within);
-    const isSelected = row.className.includes("ag-row-selected");
-    if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-      const cell = await findCell(rowId, "selection", within);
-      await userEvent.click(cell);
-      await waitFor(async () => {
-        const row = await findRow(rowId, within);
-        const nowSelected = row.className.includes("ag-row-selected");
-        if (nowSelected == isSelected) throw `Row ${rowId} won't select`;
-      });
-    }
-  });
+  const row = await findRow(rowId, within);
+  const isSelected = row.className.includes("ag-row-selected");
+  if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
+    const cell = await findCell(rowId, "selection", within);
+    await user.click(cell);
+    await waitFor(async () => {
+      const row = await findRow(rowId, within);
+      const nowSelected = row.className.includes("ag-row-selected");
+      if (nowSelected === isSelected) throw `Row ${rowId} won't select`;
+    });
+  }
 };
 
 export const selectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
@@ -48,13 +50,8 @@ export const deselectRow = async (rowId: string | number, within?: HTMLElement):
   _selectRow("deselect", rowId, within);
 
 export const findCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<HTMLElement> => {
-  //if this is not wrapped in an act console errors are logged during testing
-  let cell!: HTMLElement;
-  await act(async () => {
-    const row = await findRow(rowId, within);
-    cell = await findQuick({ tagName: `[col-id='${colId}']` }, row);
-  });
-  return cell;
+  const row = await findRow(rowId, within);
+  return await findQuick({ tagName: `[col-id='${colId}']` }, row);
 };
 
 export const findCellContains = async (
@@ -73,17 +70,13 @@ 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);
-    await userEvent.click(cell);
-  });
+  const cell = await findCell(rowId, colId, within);
+  await user.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);
-    await userEvent.dblClick(cell);
-  });
+  const cell = await findCell(rowId, colId, within);
+  await user.dblClick(cell);
   await waitFor(findOpenPopover);
 };
 
@@ -127,10 +120,8 @@ export const validateMenuOptions = async (
 };
 
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
-  await act(async () => {
-    const menuOption = await findMenuOption(menuOptionText);
-    await userEvent.click(menuOption);
-  });
+  const menuOption = await findMenuOption(menuOptionText);
+  await user.click(menuOption);
 };
 
 export const openAndClickMenuOption = async (
@@ -172,26 +163,25 @@ export const findMultiSelectOption = async (value: string): Promise<HTMLElement>
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
   const menuItem = await findMultiSelectOption(value);
-  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);
-    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) {
-      await userEvent.type(input, value);
-    }
-  });
+  menuItem.parentElement && (await user.click(menuItem.parentElement));
+};
+
+const typeInput = async (value: string, filter: IQueryQuick): Promise<void> => {
+  const openMenu = await findOpenPopover();
+  const input = await findQuick(filter, openMenu);
+  await user.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) {
+    await user.type(input, value);
+  }
+};
 
 export const typeOnlyInput = async (value: string): Promise<void> =>
   typeInput(value, { child: { tagName: "input[type='text'], textarea" } });
 
 export const typeInputByLabel = async (value: string, labelText: string): Promise<void> => {
-  const labels = getAllQuick({ child: { tagName: "label" } }).filter((l) => l.textContent == labelText);
-  if (labels.length == 0) {
+  const labels = getAllQuick({ child: { tagName: "label" } }).filter((l) => l.textContent === labelText);
+  if (labels.length === 0) {
     throw Error(`Label not found for text: ${labelText}`);
   }
   if (labels.length > 1) {
@@ -219,8 +209,6 @@ export const findActionButton = (text: string, container?: HTMLElement): Promise
   findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", text: text } }, container);
 
 export const clickActionButton = async (text: string, container?: HTMLElement): Promise<void> => {
-  await act(async () => {
-    const button = await findActionButton(text, container);
-    await userEvent.click(button);
-  });
+  const button = await findActionButton(text, container);
+  await user.click(button);
 };