@linzjs/step-ag-grid 17.4.1 → 17.4.3

package/package.json

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

package/src/components/Grid.tsx

@@ -1,4 +1,13 @@
-import { CellClickedEvent, ColDef, ColGroupDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
+import {
+  CellClickedEvent,
+  ColDef,
+  ColGroupDef,
+  ColumnResizedEvent,
+  IClientSideRowModel,
+  ModelUpdatedEvent,
+  RowHighlightPosition,
+  RowNode,
+} from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import {
@@ -7,6 +16,7 @@ import {
   CellKeyDownEvent,
   GridReadyEvent,
   RowDragEndEvent,
+  RowDragMoveEvent,
   SelectionChangedEvent,
 } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
@@ -50,7 +60,7 @@ export interface GridProps {
   autoSelectFirstRow?: boolean;
   onColumnMoved?: GridOptions["onColumnMoved"];
   rowDragText?: GridOptions["rowDragText"];
-  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => void;
+  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void>;
   alwaysShowVerticalScroll?: boolean;
   suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
   /**
@@ -339,7 +349,6 @@ export const Grid = ({
             },
             checkboxSelection: params.selectable,
             headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
-            //headerCheckboxSelection:true,
             suppressHeaderKeyboardEvent: (e) => {
               if (!params.selectable) return false;
               if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
@@ -590,15 +599,38 @@ export const Grid = ({
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
+  const onRowDragLeave = useCallback((event: RowDragMoveEvent) => {
+    const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+    clientSideRowModel.highlightRowAtPixel(null);
+  }, []);
+
+  const onRowDragMove = useCallback((event: RowDragMoveEvent) => {
+    const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+    clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+  }, []);
+
   const onRowDragEnd = useCallback(
-    (event: RowDragEndEvent) => {
-      const moved = event.node.data;
-      const target = event.overNode?.data;
-
-      moved.id != target.id &&
-        event.node.rowIndex != null &&
-        params.onRowDragEnd &&
-        params.onRowDragEnd(moved, target, event.node.rowIndex);
+    async (event: RowDragEndEvent) => {
+      const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+      if (event.node.rowIndex) {
+        const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
+        const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === RowHighlightPosition.Below;
+
+        let targetIndex = event.overIndex;
+        if (event.node.rowIndex > event.overIndex) {
+          targetIndex += isBelow ? 1 : 0;
+        } else {
+          targetIndex += isBelow ? 0 : -1;
+        }
+
+        const moved = event.node.data;
+        const target = event.overNode?.data;
+        moved.id != target.id && //moved over a different row
+          moved.rowIndex != targetIndex && //moved to a different index
+          params.onRowDragEnd &&
+          (await params.onRowDragEnd(moved, target, targetIndex));
+      }
+      clientSideRowModel.highlightRowAtPixel(null);
     },
     [params],
   );
@@ -666,9 +698,9 @@ export const Grid = ({
           preventDefaultOnContextMenu={true}
           onCellContextMenu={gridContextMenu.cellContextMenu}
           rowDragText={params.rowDragText}
-          rowDragManaged={!!params.onRowDragEnd}
-          suppressMoveWhenRowDragging={true}
+          onRowDragMove={onRowDragMove}
           onRowDragEnd={onRowDragEnd}
+          onRowDragLeave={onRowDragLeave}
         />
       </div>
     </div>

package/src/stories/grid/GridDragRow.stories.tsx

@@ -95,6 +95,7 @@ const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
     { 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" },
+    { id: 1003, position: "BA", age: 42, height: `5'7"`, desc: "BAs", dd: "4" },
   ]);
 
   return (
@@ -109,7 +110,7 @@ const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
         defaultColDef={{ sortable: false }}
         rowData={rowData}
         onRowDragEnd={(row, _, targetIndex) => {
-          alert(`Row ${row.id} has been moved to index ${targetIndex}.`);
+          alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
         }}
         rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}
       />

package/src/styles/GridTheme.scss

@@ -50,11 +50,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-cell[col-id="selection"] {
   display: flex;// Fix that when you click below checkbox it doesn't process a click
-  justify-content: end; // fix alignment of cell content when grabber is present
-
-  .ag-selection-checkbox {
-    margin-right:0;
-  }
 }
 
 // fix alignment of cell content when grabber is present
@@ -92,6 +87,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
 .ag-header .ag-header-cell[aria-colindex="1"] {
   padding-left: 17px;
+  padding-right: 15px;
 }
 
 .ag-cell[role="gridcell"] {