@linzjs/step-ag-grid 17.5.0 → 17.5.2

package/package.json

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

package/src/components/Grid.tsx

@@ -611,8 +611,19 @@ export const Grid = ({
   }, []);
 
   const onRowDragMove = useCallback((event: RowDragMoveEvent) => {
-    const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
-    clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+    if (event.overNode && event.node.rowIndex != null) {
+      const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+
+      //position 0 means highlight above, 1 means below
+      const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode as RowNode<any>);
+
+      //we don't want to show the row highlight if it wouldn't result in the row moving
+      const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
+      //console.log(targetIndex)
+      if (event.node.rowIndex != targetIndex) {
+        clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+      }
+    }
   }, []);
 
   const onRowDragEnd = useCallback(

package/src/styles/GridTheme.scss

@@ -194,4 +194,23 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-cell-wrapper {
     width: 100%;
   }
+
+  .ag-row-highlight-above::after, .ag-row-highlight-below::after {
+    content: '';
+    height: 2px;
+    background-color: transparent;
+  }
+  
+  .ag-row-highlight-above::after {
+    top:-3px; // moves the top highlight to the position of the bottom highlight
+    border-top: 2px dashed lui.$andrea;
+  }
+
+  .ag-row-highlight-above:first-of-type::after {
+    top:0px; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
+  }
+
+  .ag-row-highlight-below::after {
+    border-bottom: 2px dashed lui.$andrea;
+  }
 }