fix(cdk/collections): add ability to bulk select/deselect values (#33469)

Currently the selection model expects values to be spread into the `select`, `deselect` and `setSelection` methods. This works fine for single values, but can cause an error if the user tries to spread a huge array, because it can hit browser limitations.

These changes expose a `.bulk` member on the list that accepts arrays instead of spreads. We need to do it this way, rather than add an array signature to the existing methods, because the selection model might be working with arrays already and we'd have no way of distinguishing them.

Fixes #33466.

(cherry picked from commit 864dcad)

Author: crisbeto

goldens/cdk/collections/index.api.md

@@ -71,6 +71,11 @@ export interface SelectionChange<T> {
 // @public
 export class SelectionModel<T> {
     constructor(_multiple?: boolean, initiallySelectedValues?: T[], _emitChanges?: boolean, compareWith?: ((o1: T, o2: T) => boolean) | undefined);
+    readonly bulk: Readonly<{
+        select: (values: T[]) => boolean;
+        deselect: (values: T[]) => boolean;
+        setSelection: (values: T[]) => boolean;
+    }>;
     readonly changed: Subject<SelectionChange<T>>;
     clear(flushEvent?: boolean): boolean;
     // (undocumented)

src/cdk/collections/selection-model.ts

@@ -36,6 +36,21 @@ export class SelectionModel<T> {
   /** Event emitted when the value has changed. */
   readonly changed = new Subject<SelectionChange<T>>();
 
+  /**
+   * Exposes selection/deselection methods that work on array of values and don't expect a spread.
+   * This is useful in the cases where you may have a large collection of items that can't be
+   * easily spread into the existing methods without hitting browser limits.
+   */
+  readonly bulk: Readonly<{
+    select: (values: T[]) => boolean;
+    deselect: (values: T[]) => boolean;
+    setSelection: (values: T[]) => boolean;
+  }> = {
+    select: values => this._select(values),
+    deselect: values => this._deselect(values),
+    setSelection: values => this._setSelection(values),
+  };
+
   constructor(
     private _multiple = false,
     initiallySelectedValues?: T[],
@@ -60,11 +75,7 @@ export class SelectionModel<T> {
    * @return Whether the selection changed as a result of this call
    */
   select(...values: T[]): boolean {
-    this._verifyValueAssignment(values);
-    values.forEach(value => this._markSelected(value));
-    const changed = this._hasQueuedChanges();
-    this._emitChangeEvent();
-    return changed;
+    return this._select(values);
   }
 
   /**
@@ -73,11 +84,7 @@ export class SelectionModel<T> {
    * @return Whether the selection changed as a result of this call
    */
   deselect(...values: T[]): boolean {
-    this._verifyValueAssignment(values);
-    values.forEach(value => this._unmarkSelected(value));
-    const changed = this._hasQueuedChanges();
-    this._emitChangeEvent();
-    return changed;
+    return this._deselect(values);
   }
 
   /**
@@ -86,16 +93,7 @@ export class SelectionModel<T> {
    * @return Whether the selection changed as a result of this call
    */
   setSelection(...values: T[]): boolean {
-    this._verifyValueAssignment(values);
-    const oldValues = this.selected;
-    const newSelectedSet = new Set(values.map(value => this._getConcreteValue(value)));
-    values.forEach(value => this._markSelected(value));
-    oldValues
-      .filter(value => !newSelectedSet.has(this._getConcreteValue(value, newSelectedSet)))
-      .forEach(value => this._unmarkSelected(value));
-    const changed = this._hasQueuedChanges();
-    this._emitChangeEvent();
-    return changed;
+    return this._setSelection(values);
   }
 
   /**
@@ -159,6 +157,38 @@ export class SelectionModel<T> {
     return this._multiple;
   }
 
+  /** Selects an array of values. */
+  private _select(values: T[]) {
+    this._verifyValueAssignment(values);
+    values.forEach(value => this._markSelected(value));
+    const changed = this._hasQueuedChanges();
+    this._emitChangeEvent();
+    return changed;
+  }
+
+  /** Deselects an array of values. */
+  private _deselect(values: T[]) {
+    this._verifyValueAssignment(values);
+    values.forEach(value => this._unmarkSelected(value));
+    const changed = this._hasQueuedChanges();
+    this._emitChangeEvent();
+    return changed;
+  }
+
+  /** Sets the current selection from an array of items. */
+  private _setSelection(values: T[]) {
+    this._verifyValueAssignment(values);
+    const oldValues = this.selected;
+    const newSelectedSet = new Set(values.map(value => this._getConcreteValue(value)));
+    values.forEach(value => this._markSelected(value));
+    oldValues
+      .filter(value => !newSelectedSet.has(this._getConcreteValue(value, newSelectedSet)))
+      .forEach(value => this._unmarkSelected(value));
+    const changed = this._hasQueuedChanges();
+    this._emitChangeEvent();
+    return changed;
+  }
+
   /** Emits a change event and clears the records of selected and deselected values. */
   private _emitChangeEvent() {
     // Clear the selected values so they can be re-cached.

src/cdk/collections/selection.spec.ts

@@ -224,6 +224,59 @@ describe('SelectionModel', () => {
     });
   });
 
+  describe('bulk actions', () => {
+    let model: SelectionModel<number>;
+
+    beforeEach(() => (model = new SelectionModel(true)));
+
+    it('should be able to bulk select values', () => {
+      const changedSpy = jasmine.createSpy('changed spy');
+
+      model.changed.subscribe(changedSpy);
+      model.bulk.select([1, 2]);
+
+      expect(model.selected.length).toBe(2);
+      expect(model.isSelected(1)).toBe(true);
+      expect(model.isSelected(2)).toBe(true);
+      expect(changedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should be able to bulk deselect values', () => {
+      model.bulk.select([1, 2]);
+      expect(model.selected.length).toBe(2);
+      expect(model.isSelected(1)).toBe(true);
+      expect(model.isSelected(2)).toBe(true);
+
+      const changedSpy = jasmine.createSpy('changed spy');
+      model.changed.subscribe(changedSpy);
+      model.bulk.deselect([1, 2]);
+
+      expect(model.selected.length).toBe(0);
+      expect(model.isSelected(1)).toBe(false);
+      expect(model.isSelected(2)).toBe(false);
+      expect(changedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should be able to bulk set the selection', () => {
+      model.bulk.setSelection([1, 2]);
+      expect(model.selected.length).toBe(2);
+      expect(model.isSelected(1)).toBe(true);
+      expect(model.isSelected(2)).toBe(true);
+
+      model.bulk.setSelection([2]);
+      expect(model.selected.length).toBe(1);
+      expect(model.isSelected(1)).toBe(false);
+      expect(model.isSelected(2)).toBe(true);
+
+      model.bulk.setSelection([3, 4]);
+      expect(model.selected.length).toBe(2);
+      expect(model.isSelected(1)).toBe(false);
+      expect(model.isSelected(2)).toBe(false);
+      expect(model.isSelected(3)).toBe(true);
+      expect(model.isSelected(4)).toBe(true);
+    });
+  });
+
   it('should be able to determine whether it is empty', () => {
     let model = new SelectionModel();