@linzjs/step-ag-grid 7.8.0 → 7.9.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.0",
+  "version": "7.9.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -200,15 +200,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 +214,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],
   );

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,6 +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 },
   ] 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(

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

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