replace range-selected with item-selected, item-deselected

vaadin · Nov 29, 2024 · 9e90821 · 9e90821
1 parent f65dacb
commit 9e90821
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 57 deletions.
diff --git a/dev/grid.html b/dev/grid.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -13,56 +13,84 @@
       import '@vaadin/grid/all-imports';
       import '@vaadin/tooltip';
 
-      // LitElement based imports
-      // import '@vaadin/grid/lit-all-imports.js';
-      // import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
-      // import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
+      const gridItems = Array.from({ length: 100 }, (_, i) => ({ name: `Item ${i}` }));
 
-      const grid = document.querySelector('vaadin-grid');
+      function getItemsRange(items, [startItem, endItem]) {
+        const startIndex = items.findIndex((item) => item === startItem);
+        const endIndex = items.findIndex((item) => item === endItem);
+        return items.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
+      }
 
-      grid.dataProvider = ({ parentItem, page, pageSize }, cb) => {
-        // Let's have 100 root-level items and 5 items on every child level
-        const levelSize = parentItem ? 5 : 100;
+      {
+        const grid = document.querySelector('vaadin-grid.gmail');
+        grid.items = gridItems;
 
-        const pageItems = [...Array(Math.min(levelSize, pageSize))].map((_, i) => {
-          const indexInLevel = page * pageSize + i;
+        let startItem;
 
-          return {
-            name: `${parentItem ? parentItem.name + '-' : ''}${indexInLevel}`,
-            children: true,
-          };
+        grid.addEventListener('item-selected', (event) => {
+          const { item, shiftKey } = event.detail;
+
+          startItem ??= item;
+          if (shiftKey) {
+            grid.selectItems(getItemsRange(grid.items, [startItem, item]));
+          }
+          startItem = item;
         });
 
-        cb(pageItems, levelSize);
-      };
+        grid.addEventListener('item-deselected', (event) => {
+          const { item, shiftKey } = event.detail;
+
+          startItem ??= item;
+          if (shiftKey) {
+            grid.deselectItems(getItemsRange(grid.items, [startItem, item]));
+          }
+          startItem = item;
+        });
+      }
 
-      grid.addEventListener('range-selection', (event) => {
-        const { startItem, endItem } = event.detail;
+      {
+        const grid = document.querySelector('vaadin-grid.addon');
+        grid.items = gridItems;
 
-        const selectedItems = new Set(grid.selectedItems);
-        const startItemContext = grid._dataProviderController.getItemContext(startItem);
-        const endItemContext = grid._dataProviderController.getItemContext(endItem);
-        const startFlatIndex = Math.min(startItemContext.flatIndex, endItemContext.flatIndex);
-        const endFlatIndex = Math.max(startItemContext.flatIndex, endItemContext.flatIndex);
+        let startItem;
 
-        const isSelection = selectedItems.has(startItem);
+        grid.addEventListener('item-selected', (event) => {
+          const { item, shiftKey } = event.detail;
 
-        for (let i = startFlatIndex; i <= endFlatIndex; i++) {
-          const { item } = grid._dataProviderController.getFlatIndexContext(i);
-          if (isSelection) {
-            selectedItems.add(item);
+          startItem ??= item;
+          if (shiftKey) {
+            grid.selectedItems = [...getItemsRange(grid.items, [startItem, item])];
           } else {
-            selectedItems.delete(item);
+            grid.selectedItems = [item];
+            startItem = item;
           }
-        }
+        });
 
-        grid.selectedItems = [...selectedItems];
-      });
+        grid.addEventListener('item-deselected', (event) => {
+          const { item, shiftKey } = event.detail;
+
+          startItem ??= item;
+          if (shiftKey && startItem !== item) {
+            grid.selectedItems = [...getItemsRange(grid.items, [startItem, item])];
+          } else {
+            grid.selectedItems = [];
+            startItem = null;
+          }
+        });
+      }
     </script>
 
-    <vaadin-grid item-id-path="name" style="height: 800px">
-      <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
-      <vaadin-grid-column path="name"></vaadin-grid-column>
-    </vaadin-grid>
+    <div style="display: flex; gap: 20px;">
+      <vaadin-grid item-id-path="name" style="height: 800px" class="gmail">
+        <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
+        <vaadin-grid-column header="Gmail behavior" path="name"></vaadin-grid-column>
+      </vaadin-grid>
+
+      <vaadin-grid item-id-path="name" style="height: 800px" class="addon">
+        <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
+        <vaadin-grid-column header="Addon behavior" path="name"></vaadin-grid-column>
+      </vaadin-grid>
+    </div>
+
   </body>
 </html>
diff --git a/packages/grid/src/vaadin-grid-selection-column-base-mixin.js b/packages/grid/src/vaadin-grid-selection-column-base-mixin.js
@@ -92,6 +92,9 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
 
         /** @protected */
         _selectAllHidden: Boolean,
+
+        /** @protected */
+        _shiftKeyActive: Boolean,
       };
     }
 
@@ -203,13 +206,13 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
 
     /** @private */
     __onGridKeyboardInteraction(e) {
-      this.__shiftKeyActive = e.shiftKey;
+      this._shiftKeyActive = e.shiftKey;
     }
 
     /** @private */
     __onGridSelectStart(e) {
       // Prevent text selection when shift-selecting a range of items.
-      if (this.__rangeSelectionStartItem && this.__shiftKeyActive) {
+      if (this._shiftKeyActive) {
         e.preventDefault();
       }
     }
@@ -314,18 +317,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __onActiveItemChanged(e) {
-      const activeItem = e.detail.value;
-      if (this.autoSelect) {
-        const item = activeItem || this.__previousActiveItem;
-        if (item) {
-          this.__toggleItem(item);
-        }
-      }
-      this.__previousActiveItem = activeItem;
-    }
-
     /** @private */
     __dragAutoScroller() {
       if (this.__dragStartIndex === undefined) {
@@ -455,12 +446,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       } else {
         this._deselectItem(item);
       }
-
-      const startItem = this.__rangeSelectionStartItem || item;
-      if (this.__shiftKeyActive && !this._grid._itemsEqual(startItem, item)) {
-        this._rangeSelection(startItem, item);
-      }
-      this.__rangeSelectionStartItem = item;
     }
 
     /**

diff --git a/packages/grid/src/vaadin-grid-selection-column-mixin.js b/packages/grid/src/vaadin-grid-selection-column-mixin.js
@@ -113,6 +113,14 @@ export const GridSelectionColumnMixin = (superClass) =>
     _selectItem(item) {
       if (this._grid.__isItemSelectable(item)) {
         this._grid.selectItem(item);
+        this._grid.dispatchEvent(
+          new CustomEvent('item-selected', {
+            detail: {
+              item,
+              shiftKey: this._shiftKeyActive,
+            },
+          }),
+        );
       }
     }
 
@@ -127,6 +135,14 @@ export const GridSelectionColumnMixin = (superClass) =>
     _deselectItem(item) {
       if (this._grid.__isItemSelectable(item)) {
         this._grid.deselectItem(item);
+        this._grid.dispatchEvent(
+          new CustomEvent('item-deselected', {
+            detail: {
+              item,
+              shiftKey: this._shiftKeyActive,
+            },
+          }),
+        );
       }
     }