feat: add parts to drag source row cells (#7593)

* add parts to drag source row cells * replace foreach with for because sonar * remove unused imports * address feedback * remove unused imports * clarify difference between drag-source-row and dragstart-row * test dragend removing styles, move code around * fix test, fix typo
vaadin · Jul 30, 2024 · 5e07d0b · 5e07d0b
1 parent 48cd58a
commit 5e07d0b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js b/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js
@@ -181,6 +181,9 @@ export const DragAndDropMixin = (superClass) =>
           updateBooleanRowStates(row, { dragstart: false });
           this.style.setProperty('--_grid-drag-start-x', '');
           this.style.setProperty('--_grid-drag-start-y', '');
+          rows.forEach((row) => {
+            updateBooleanRowStates(row, { 'drag-source': true });
+          });
         });
 
         const event = new CustomEvent('grid-dragstart', {
@@ -202,6 +205,10 @@ export const DragAndDropMixin = (superClass) =>
       const event = new CustomEvent('grid-dragend');
       event.originalEvent = e;
       this.dispatchEvent(event);
+
+      iterateChildren(this.$.items, (row) => {
+        updateBooleanRowStates(row, { 'drag-source': false });
+      });
     }
 
     /** @private */

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -190,7 +190,8 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * `collapsed-row-cell`       | Cell in a collapsed row
  * `expanded-row-cell`        | Cell in an expanded row
  * `details-opened-row-cell`  | Cell in an row with details open
- * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)
+ * `dragstart-row-cell`       | Cell in the ghost image row, but not in a source row
+ * `drag-source-row-cell`     | Cell in a source row, but not in the ghost image
  * `dragover-above-row-cell`  | Cell in a row that has another row dragged over above
  * `dragover-below-row-cell`  | Cell in a row that has another row dragged over below
  * `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top

diff --git a/packages/grid/test/drag-and-drop.common.js b/packages/grid/test/drag-and-drop.common.js
@@ -254,6 +254,42 @@ describe('drag and drop', () => {
         });
       });
 
+      it('should add drag-source- part to all dragged rows', async () => {
+        grid.selectItem(grid.items[0]);
+        grid.selectItem(grid.items[1]);
+        fireDragStart();
+        await nextFrame();
+        for (const row of getRows(grid.$.items)) {
+          for (const cell of getRowBodyCells(row)) {
+            expect(cell.getAttribute('part')).to.contain('drag-source-row-cell');
+          }
+        }
+      });
+
+      it('should add drag-source- part only to dragged rows', async () => {
+        fireDragStart();
+        let cells = getRowBodyCells(getRows(grid.$.items)[0]);
+        await nextFrame();
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.contain('drag-source-row-cell');
+        }
+        cells = getRowBodyCells(getRows(grid.$.items)[1]);
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
+        }
+      });
+
+      it('should remove drag-source- part from row when drag ends', async () => {
+        fireDragStart();
+        const row = getRows(grid.$.items)[0];
+        const cells = getRowBodyCells(row);
+        await nextFrame();
+        fireDragEnd();
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
+        }
+      });
+
       // The test only concerns Safari
       const isSafari = /^((?!chrome|android).)*safari/iu.test(navigator.userAgent);
       (isSafari ? it : it.skip)('should use top on Safari for drag image', async () => {