@gridsuite/commons-ui 0.232.0 → 0.233.0

package/dist/components/composite/agGridTable/CustomAgGridTable.js

@@ -10,6 +10,15 @@ import { hasNonEmptyRows } from "../../../utils/functions.js";
 import "@mui/icons-material";
 import { CustomAGGrid } from "../customAGGrid/customAggrid.js";
 import "react-intl";
+const getDropIndicatorPosition = ({ overNode, y }) => {
+  if (!overNode) {
+    return null;
+  }
+  const overNodeTop = overNode.rowTop ?? 0;
+  const overNodeHeight = overNode.rowHeight ?? 0;
+  const overNodeMiddle = overNodeTop + overNodeHeight / 2;
+  return y < overNodeMiddle ? "above" : "below";
+};
 const style = (customProps) => ({
   grid: (theme) => ({
     height: "100%",
@@ -137,6 +146,42 @@ const CustomAgGridTable = forwardRef(
       const isAnycolumnhasSort = event.api.getColumnState().some((col) => col.sort);
       setIsSortApplied(isAnycolumnhasSort);
     }, []);
+    const onRowDragMove = useCallback((event) => {
+      const { api, overNode } = event;
+      const dropIndicatorPosition = getDropIndicatorPosition(event);
+      if (!overNode || !dropIndicatorPosition) {
+        api.setRowDropPositionIndicator(null);
+        return;
+      }
+      api.setRowDropPositionIndicator({
+        row: overNode,
+        dropIndicatorPosition
+      });
+    }, []);
+    const onRowDragEnd = useCallback(
+      (event) => {
+        const { api, node, overNode } = event;
+        api.setRowDropPositionIndicator(null);
+        const dropIndicatorPosition = getDropIndicatorPosition(event);
+        if (!overNode || !dropIndicatorPosition) {
+          return;
+        }
+        const rowIndex = getIndex(node.data);
+        const overIndex = getIndex(overNode.data);
+        if (rowIndex === -1 || overIndex === -1 || rowIndex === overIndex) {
+          return;
+        }
+        const insertionIndex = dropIndicatorPosition === "above" ? overIndex : overIndex + 1;
+        const targetIndex = rowIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
+        if (rowIndex !== targetIndex) {
+          move(rowIndex, targetIndex);
+        }
+      },
+      [getIndex, move]
+    );
+    const clearRowDropPositionIndicator = useCallback(({ api }) => {
+      api.setRowDropPositionIndicator(null);
+    }, []);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: theme.aggrid.theme, sx: style(cssProps).grid, children: /* @__PURE__ */ jsx(
         CustomAGGrid,
@@ -146,7 +191,10 @@ const CustomAgGridTable = forwardRef(
           cacheOverflowSize: 10,
           rowSelection: rowSelection ?? { mode: "multiRow" },
           selectionColumnDef: { rowDrag: true, width: 80, pinned: "left" },
-          onRowDragMove: (event) => move(getIndex(event.node.data), event.overIndex),
+          onRowDragMove,
+          onRowDragEnd,
+          onRowDragLeave: clearRowDropPositionIndicator,
+          onRowDragCancel: clearRowDropPositionIndicator,
           detailRowAutoHeight: true,
           onSelectionChanged: (event) => {
             setSelectedRows(event.api.getSelectedRows());

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.232.0",
+    "version": "0.233.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",