fix(react-grid): prevent group panel cells blinking while dragging (#223

)
DevExpress · Jul 25, 2017 · 786206d · 786206d
1 parent 257a337
commit 786206d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/packages/dx-grid-core/src/utils/group-panel.js b/packages/dx-grid-core/src/utils/group-panel.js
@@ -5,7 +5,9 @@ const isOnTheSameLine = (geometry, y) => y >= geometry.top && y <= geometry.bott
 export const getGroupCellTargetIndex = (geometries, sourceIndex, { x, y }) => {
   if (geometries.length === 0) return 0;
 
-  const targetGeometries = getTargetColumnGeometries(geometries, sourceIndex);
+  const targetGeometries = sourceIndex !== -1
+    ? getTargetColumnGeometries(geometries, sourceIndex)
+    : geometries;
 
   const targetIndex = targetGeometries.findIndex((geometry, index) => {
     const inVerticalBounds = isOnTheSameLine(geometry, y);
@@ -20,5 +22,5 @@ export const getGroupCellTargetIndex = (geometries, sourceIndex, { x, y }) => {
       shouldGoOnLineBreak;
   });
 
-  return targetIndex === -1 ? geometries.length - 1 : targetIndex;
+  return targetIndex === -1 ? geometries.length : targetIndex;
 };
diff --git a/packages/dx-grid-core/src/utils/group-panel.test.js b/packages/dx-grid-core/src/utils/group-panel.test.js
@@ -35,5 +35,43 @@ describe('GroupPanel utils', () => {
       expect(getGroupCellTargetIndex([], undefined, { x: 10, y: 10 }))
         .toBe(0);
     });
+
+    it('should return target index correctly for a new group when all elements are on the same line', () => {
+      const geometries = [
+        { top: 0, right: 100, bottom: 40, left: 20 },
+        { top: 0, right: 250, bottom: 40, left: 100 },
+        { top: 0, right: 300, bottom: 40, left: 250 },
+      ];
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 150, y: 20 }))
+        .toBe(1);
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 500, y: 20 }))
+        .toBe(3);
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 0, y: 20 }))
+        .toBe(0);
+    });
+
+    it('should return target index correctly for a new group when elements are on multiple lines', () => {
+      const geometries = [
+        { top: 0, right: 100, bottom: 40, left: 0 },
+        { top: 0, right: 250, bottom: 40, left: 100 },
+        { top: 50, right: 100, bottom: 90, left: 0 },
+        { top: 50, right: 300, bottom: 90, left: 100 },
+      ];
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 50, y: 70 }))
+        .toBe(2);
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 250, y: 70 }))
+        .toBe(3);
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 350, y: 70 }))
+        .toBe(4);
+
+      expect(getGroupCellTargetIndex(geometries, -1, { x: 300, y: 20 }))
+        .toBe(2);
+    });
   });
 });
diff --git a/packages/dx-react-grid/src/components/group-panel-layout.jsx b/packages/dx-react-grid/src/components/group-panel-layout.jsx
@@ -26,13 +26,8 @@ export class GroupPanelLayout extends React.PureComponent {
     };
 
     this.onEnter = ({ payload }) => {
-      const { draftGroupingChange } = this.props;
-      const sourceColumnName = payload[0].columnName;
       this.setState({
-        sourceColumnName,
-      });
-      draftGroupingChange({
-        columnName: sourceColumnName,
+        sourceColumnName: payload[0].columnName,
       });
     };
     this.onOver = ({ clientOffset }) => {
@@ -60,7 +55,6 @@ export class GroupPanelLayout extends React.PureComponent {
         groupIndex: -1,
       });
       this.setState({
-        sourceColumnName,
         targetColumnIndex: -1,
       });
     };