refactor(material/bottom-sheet): use classList.toggle

With Angular dropping IE11 support in version 13, we can now use `classList.toggle` with the second `force` param. Related to #7374
angular · Aug 2, 2021 · 42a9eed · 42a9eed
1 parent 5ba8c4b
commit 42a9eed
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/src/material-experimental/mdc-snack-bar/snack-bar-container.ts b/src/material-experimental/mdc-snack-bar/snack-bar-container.ts
@@ -204,8 +204,7 @@ export class MatSnackBarContainer extends BasePortalOutlet
   }
 
   private _setClass(cssClass: string, active: boolean) {
-    const classList = this._elementRef.nativeElement.classList;
-    active ? classList.add(cssClass) : classList.remove(cssClass);
+    this._elementRef.nativeElement.classList.toggle(cssClass, active);
   }
 
   /** Applies the user-configured CSS classes to the snack bar. */

diff --git a/src/material/bottom-sheet/BUILD.bazel b/src/material/bottom-sheet/BUILD.bazel
@@ -23,6 +23,7 @@ ng_module(
         "//src:dev_mode_types",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
+        "//src/cdk/coercion",
         "//src/cdk/keycodes",
         "//src/cdk/layout",
         "//src/cdk/overlay",

diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts
@@ -6,36 +6,37 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {AnimationEvent} from '@angular/animations';
+import {FocusTrap, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
+import {coerceArray} from '@angular/cdk/coercion';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {
+  BasePortalOutlet,
+  CdkPortalOutlet,
+  ComponentPortal,
+  DomPortal,
+  TemplatePortal,
+} from '@angular/cdk/portal';
+import {DOCUMENT} from '@angular/common';
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ComponentRef,
-  EmbeddedViewRef,
-  ViewChild,
-  OnDestroy,
   ElementRef,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  ChangeDetectorRef,
+  EmbeddedViewRef,
   EventEmitter,
   Inject,
-  Optional,
   NgZone,
+  OnDestroy,
+  Optional,
+  ViewChild,
+  ViewEncapsulation,
 } from '@angular/core';
-import {AnimationEvent} from '@angular/animations';
-import {
-  BasePortalOutlet,
-  ComponentPortal,
-  TemplatePortal,
-  CdkPortalOutlet,
-  DomPortal,
-} from '@angular/cdk/portal';
-import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {MatBottomSheetConfig} from './bottom-sheet-config';
-import {matBottomSheetAnimations} from './bottom-sheet-animations';
 import {Subscription} from 'rxjs';
-import {DOCUMENT} from '@angular/common';
-import {FocusTrap, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
-import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {matBottomSheetAnimations} from './bottom-sheet-animations';
+import {MatBottomSheetConfig} from './bottom-sheet-config';
 
 // TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar
 
@@ -178,8 +179,7 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
   }
 
   private _toggleClass(cssClass: string, add: boolean) {
-    const classList = this._elementRef.nativeElement.classList;
-    add ? classList.add(cssClass) : classList.remove(cssClass);
+    this._elementRef.nativeElement.classList.toggle(cssClass, add);
   }
 
   private _validatePortalAttached() {
@@ -190,14 +190,7 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
 
   private _setPanelClass() {
     const element: HTMLElement = this._elementRef.nativeElement;
-    const panelClass = this.bottomSheetConfig.panelClass;
-
-    if (Array.isArray(panelClass)) {
-      // Note that we can't use a spread here, because IE doesn't support multiple arguments.
-      panelClass.forEach(cssClass => element.classList.add(cssClass));
-    } else if (panelClass) {
-      element.classList.add(panelClass);
-    }
+    element.classList.add(...coerceArray(this.bottomSheetConfig.panelClass || []));
   }
 
   /**