@linzjs/step-ag-grid 7.8.1 → 7.10.0

package/package.json

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

package/src/components/Grid.tsx

@@ -33,6 +33,7 @@ export interface GridProps {
   postSortRows?: GridOptions["postSortRows"];
   animateRows?: boolean;
   rowClassRules?: GridOptions["rowClassRules"];
+  rowSelection?: "single" | "multiple";
 }
 
 /**
@@ -200,15 +201,7 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const onCellDoubleClick = useCallback(
     (event: CellEvent) => {
-      const editable = fnOrVar(event.colDef?.editable, event);
-      if (!editable) return;
-      const editAction = event.colDef?.cellRendererParams?.editAction;
-      if (editAction) {
-        // Clicked row comes first in selected rows
-        editAction([event.data, ...event.api.getSelectedRows().filter((row) => row.id !== event.data.id)]);
-      } else if (!event.colDef?.cellRendererParams?.singleClickEdit) {
-        startCellEditing(event);
-      }
+      if (!invokeEditAction(event)) startCellEditing(event);
     },
     [startCellEditing],
   );
@@ -222,9 +215,19 @@ export const Grid = (params: GridProps): JSX.Element => {
     [startCellEditing],
   );
 
+  const invokeEditAction = (e: CellEvent): boolean => {
+    const editAction = e.colDef?.cellRendererParams?.editAction;
+    if (!editAction) return false;
+    const editable = fnOrVar(e.colDef?.editable, e);
+    editable && editAction([e.data, ...e.api.getSelectedRows().filter((row) => row.id !== e.data.id)]);
+    return true;
+  };
+
   const onCellKeyPress = useCallback(
     (e: CellEvent) => {
-      if ((e.event as KeyboardEvent).key === "Enter") startCellEditing(e);
+      if ((e.event as KeyboardEvent).key === "Enter") {
+        if (!invokeEditAction(e)) startCellEditing(e);
+      }
     },
     [startCellEditing],
   );
@@ -271,7 +274,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         defaultColDef={params.defaultColDef}
         getRowId={(params) => `${params.data.id}`}
         suppressRowClickSelection={true}
-        rowSelection={"multiple"}
+        rowSelection={params.rowSelection ?? "multiple"}
         suppressBrowserResizeObserver={true}
         colResizeDefault={"shift"}
         onFirstDataRendered={sizeColumnsToFit}

package/src/components/GridCell.tsx

@@ -38,8 +38,8 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
             <span title={props.valueFormatted}>{props.valueFormatted}</span>
           )}
         </div>
-        {fnOrVar(props.colDef?.editable, props) && rendererParams?.editableIcon && (
-          <div style={{ display: "flex", alignItems: "center" }}>{rendererParams?.editableIcon}</div>
+        {fnOrVar(props.colDef?.editable, props) && rendererParams?.rightHoverElement && (
+          <div style={{ display: "flex", alignItems: "center" }}>{rendererParams?.rightHoverElement}</div>
         )}
       </>
     </GridLoadableCell>
@@ -73,6 +73,12 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),
     suppressKeyboardEvent: (e) => {
+      const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
+      const exec = shortcutKeys[e.event.key];
+      if (!e.editing && !e.event.repeat && e.event.type === "keypress" && exec) {
+        const editable = fnOrVar(e.colDef?.editable, e);
+        return editable ? exec(e) ?? true : true;
+      }
       // It's important that aggrid doesn't trigger edit on enter
       // as the incorrect selected rows will be returned
       return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,6 +1,7 @@
 import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
+import { SuppressKeyboardEventParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;
@@ -12,8 +13,9 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  editableIcon?: JSX.Element | undefined;
+  rightHoverElement?: JSX.Element | undefined;
   editAction?: (selectedRows: RowType[]) => void;
+  shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
   warning?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
   info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
 }

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

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

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

@@ -101,10 +101,17 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         editable: true,
         valueFormatter: () => "Double click me!",
         cellRendererParams: {
-          editableIcon: <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />,
+          rightHoverElement: (
+            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+          ),
           editAction: (selectedRows) => {
             alert(`Custom edit ${selectedRows.length} row(s) selected`);
           },
+          shortcutKeys: {
+            e: () => {
+              alert("Hi");
+            },
+          },
         },
       }),
       GridPopoverMenu(
@@ -197,8 +204,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       columnDefs={columnDefs}
       rowData={rowData}
       domLayout={"autoHeight"}
+      rowSelection={"single"}
     />
   );
 };
 
-export const ReadOnly = GridReadOnlyTemplate.bind({});
+export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});

package/src/styles/Grid.scss

@@ -35,8 +35,13 @@
   padding: 4px 8px;
 }
 
-.GridCell-editableIcon {
+.ag-cell .GridCell-editableIcon {
   fill: colors.$silver;
+  visibility: hidden;
+}
+
+.ag-cell:hover .GridCell-editableIcon, .ag-cell.ag-cell-focus .GridCell-editableIcon {
+  visibility: visible;
 }
 
 .GridFormMessage-container {

package/src/utils/bearing.ts

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