From 9ee08160289c70c9fa4f8f48a5a4eae40af03155 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 26 Apr 2021 14:43:26 +0200 Subject: [PATCH] refactor(multiple): resolve rxjs 7 compilation errors Fixes a few places that will become compilation errors in rxjs version 7. All of the changes are backwards-compatible so we can merge them now so that we have less issues to resolve once we make the switch. --- src/cdk-experimental/combobox/combobox-panel.ts | 2 +- src/cdk-experimental/menu/context-menu.ts | 4 ++-- src/cdk-experimental/menu/menu-bar.ts | 14 ++++++++------ src/cdk-experimental/menu/menu-stack.ts | 10 +++++----- src/cdk-experimental/menu/menu.ts | 14 ++++++++------ .../cdk-selection-column-example.ts | 12 ++---------- .../cdk-selection-list-example.ts | 15 +++------------ .../mat-selection-column-example.ts | 12 ++---------- .../mat-selection-list-example.ts | 13 ++----------- src/material/datepicker/datepicker-toggle.ts | 4 ++-- src/material/menu/menu-trigger.ts | 4 ++-- src/material/menu/menu.ts | 4 ++-- src/material/tabs/paginated-tab-header.ts | 2 +- .../tree/data-source/nested-data-source.ts | 6 ++---- 14 files changed, 42 insertions(+), 74 deletions(-) diff --git a/src/cdk-experimental/combobox/combobox-panel.ts b/src/cdk-experimental/combobox/combobox-panel.ts index e1654e6d0d8c..16374c998852 100644 --- a/src/cdk-experimental/combobox/combobox-panel.ts +++ b/src/cdk-experimental/combobox/combobox-panel.ts @@ -33,7 +33,7 @@ export class CdkComboboxPanel { /** Tells the parent combobox to close the panel and sends back the content value. */ closePanel(data?: T | T[]) { - this.valueUpdated.next(data); + this.valueUpdated.next(data || []); } // TODO: instead of using a focus function, potentially use cdk/a11y focus trapping diff --git a/src/cdk-experimental/menu/context-menu.ts b/src/cdk-experimental/menu/context-menu.ts index 461b664ab93d..226db1788436 100644 --- a/src/cdk-experimental/menu/context-menu.ts +++ b/src/cdk-experimental/menu/context-menu.ts @@ -31,7 +31,7 @@ import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion'; import {Subject, merge} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {CdkMenuPanel} from './menu-panel'; -import {MenuStack, MenuStackItem} from './menu-stack'; +import {MenuStack} from './menu-stack'; import {throwExistingMenuStackError} from './menu-errors'; import {isClickInsideMenuOverlay} from './menu-item-trigger'; @@ -271,7 +271,7 @@ export class CdkContextMenuTrigger implements OnDestroy { /** Subscribe to the menu stack close events and close this menu when requested. */ private _setMenuStackListener() { - this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe((item: MenuStackItem) => { + this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => { if (item === this._menuPanel._menu && this.isOpen()) { this.closed.next(); this._overlayRef!.detach(); diff --git a/src/cdk-experimental/menu/menu-bar.ts b/src/cdk-experimental/menu/menu-bar.ts index b8214798b8bf..24ad4b950b72 100644 --- a/src/cdk-experimental/menu/menu-bar.ts +++ b/src/cdk-experimental/menu/menu-bar.ts @@ -199,25 +199,27 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit, private _subscribeToMenuStack() { this._menuStack.closed .pipe(takeUntil(this._destroyed)) - .subscribe((item: MenuStackItem) => this._closeOpenMenu(item)); + .subscribe(item => this._closeOpenMenu(item)); this._menuStack.emptied .pipe(takeUntil(this._destroyed)) - .subscribe((event: FocusNext) => this._toggleOpenMenu(event)); + .subscribe(event => this._toggleOpenMenu(event)); } /** * Close the open menu if the current active item opened the requested MenuStackItem. * @param item the MenuStackItem requested to be closed. */ - private _closeOpenMenu(menu: MenuStackItem) { + private _closeOpenMenu(menu: MenuStackItem | undefined) { const trigger = this._openItem; const keyManager = this._keyManager; if (menu === trigger?.getMenuTrigger()?.getMenu()) { - trigger.getMenuTrigger()?.closeMenu(); + trigger?.getMenuTrigger()?.closeMenu(); // If the user has moused over a sibling item we want to focus the element under mouse focus // not the trigger which previously opened the now closed menu. - keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger); + if (trigger) { + keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger); + } } } @@ -225,7 +227,7 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit, * Set focus to either the current, previous or next item based on the FocusNext event, then * open the previous or next item. */ - private _toggleOpenMenu(event: FocusNext) { + private _toggleOpenMenu(event: FocusNext | undefined) { const keyManager = this._keyManager; switch (event) { case FocusNext.nextItem: diff --git a/src/cdk-experimental/menu/menu-stack.ts b/src/cdk-experimental/menu/menu-stack.ts index 47ad9a2f7272..b90fe01c2fc5 100644 --- a/src/cdk-experimental/menu/menu-stack.ts +++ b/src/cdk-experimental/menu/menu-stack.ts @@ -34,20 +34,20 @@ export class MenuStack { private readonly _elements: MenuStackItem[] = []; /** Emits the element which was popped off of the stack when requested by a closer. */ - private readonly _close: Subject = new Subject(); + private readonly _close: Subject = new Subject(); /** Emits once the MenuStack has become empty after popping off elements. */ - private readonly _empty: Subject = new Subject(); + private readonly _empty: Subject = new Subject(); /** Observable which emits the MenuStackItem which has been requested to close. */ - readonly closed: Observable = this._close; + readonly closed: Observable = this._close; /** * Observable which emits when the MenuStack is empty after popping off the last element. It * emits a FocusNext event which specifies the action the closer has requested the listener * perform. */ - readonly emptied: Observable = this._empty; + readonly emptied: Observable = this._empty; /** @param menu the MenuStackItem to put on the stack. */ push(menu: MenuStackItem) { @@ -64,7 +64,7 @@ export class MenuStack { */ close(lastItem: MenuStackItem, focusNext?: FocusNext) { if (this._elements.indexOf(lastItem) >= 0) { - let poppedElement; + let poppedElement: MenuStackItem | undefined; do { poppedElement = this._elements.pop(); this._close.next(poppedElement); diff --git a/src/cdk-experimental/menu/menu.ts b/src/cdk-experimental/menu/menu.ts index cb2a304ddf61..ef6e0f7b6b62 100644 --- a/src/cdk-experimental/menu/menu.ts +++ b/src/cdk-experimental/menu/menu.ts @@ -261,30 +261,32 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI private _subscribeToMenuStack() { this._menuStack.closed .pipe(takeUntil(this.closed)) - .subscribe((item: MenuStackItem) => this._closeOpenMenu(item)); + .subscribe(item => this._closeOpenMenu(item)); this._menuStack.emptied .pipe(takeUntil(this.closed)) - .subscribe((event: FocusNext) => this._toggleMenuFocus(event)); + .subscribe(event => this._toggleMenuFocus(event)); } /** * Close the open menu if the current active item opened the requested MenuStackItem. * @param item the MenuStackItem requested to be closed. */ - private _closeOpenMenu(menu: MenuStackItem) { + private _closeOpenMenu(menu: MenuStackItem | undefined) { const keyManager = this._keyManager; const trigger = this._openItem; if (menu === trigger?.getMenuTrigger()?.getMenu()) { - trigger.getMenuTrigger()?.closeMenu(); + trigger?.getMenuTrigger()?.closeMenu(); // If the user has moused over a sibling item we want to focus the element under mouse focus // not the trigger which previously opened the now closed menu. - keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger); + if (trigger) { + keyManager.setActiveItem(this._pointerTracker?.activeElement || trigger); + } } } /** Set focus the either the current, previous or next item based on the FocusNext event. */ - private _toggleMenuFocus(event: FocusNext) { + private _toggleMenuFocus(event: FocusNext | undefined) { const keyManager = this._keyManager; switch (event) { case FocusNext.nextItem: diff --git a/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts b/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts index 6c5d8357d607..7a079a4b9027 100644 --- a/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts +++ b/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts @@ -1,6 +1,5 @@ import {SelectionChange} from '@angular/cdk-experimental/selection'; -import {Component, OnDestroy} from '@angular/core'; -import {ReplaySubject} from 'rxjs'; +import {Component} from '@angular/core'; /** * @title CDK Selection Column on a CDK table. @@ -10,18 +9,11 @@ import {ReplaySubject} from 'rxjs'; templateUrl: 'cdk-selection-column-example.html', styleUrls: ['cdk-selection-column-example.css'], }) -export class CdkSelectionColumnExample implements OnDestroy { - private readonly _destroyed = new ReplaySubject(1); - +export class CdkSelectionColumnExample { displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; selected: string[] = []; - ngOnDestroy() { - this._destroyed.next(); - this._destroyed.complete(); - } - selectionChanged(event: SelectionChange) { this.selected = event.after.map((select) => select.value.name); } diff --git a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts index 5b0f3f65fe09..e2da17a43338 100644 --- a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts +++ b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts @@ -1,6 +1,5 @@ import {SelectionChange} from '@angular/cdk-experimental/selection'; -import {Component, OnDestroy} from '@angular/core'; -import {ReplaySubject} from 'rxjs'; +import {Component} from '@angular/core'; /** * @title CDK Selection on a simple list. @@ -9,26 +8,18 @@ import {ReplaySubject} from 'rxjs'; selector: 'cdk-selection-list-example', templateUrl: 'cdk-selection-list-example.html', }) -export class CdkSelectionListExample implements OnDestroy { - private readonly _destroyed = new ReplaySubject(1); - +export class CdkSelectionListExample { data = ELEMENT_NAMES; - selected1: string[] = []; selected2: string[] = []; selected3: string[] = []; selected4: string[] = []; - ngOnDestroy() { - this._destroyed.next(); - this._destroyed.complete(); - } - getCurrentSelected(event: SelectionChange) { return event.after.map((select) => select.value); } - trackByFn(index: number, value: string) { + trackByFn(index: number) { return index; } diff --git a/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts b/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts index 72b8eed687e4..e2bbd4ba2ba4 100644 --- a/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts +++ b/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts @@ -1,6 +1,5 @@ -import {Component, OnDestroy} from '@angular/core'; +import {Component} from '@angular/core'; import {SelectionChange} from '@angular/material-experimental/selection'; -import {ReplaySubject} from 'rxjs'; /** * @title Table that uses `matSelectionColumn` which allows users to select rows. @@ -10,18 +9,11 @@ import {ReplaySubject} from 'rxjs'; templateUrl: 'mat-selection-column-example.html', styleUrls: ['mat-selection-column-example.css'], }) -export class MatSelectionColumnExample implements OnDestroy { - private readonly _destroyed = new ReplaySubject(1); - +export class MatSelectionColumnExample { displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; selected: string[] = []; - ngOnDestroy() { - this._destroyed.next(); - this._destroyed.complete(); - } - selectionChanged(event: SelectionChange) { this.selected = event.after.map((select) => select.value.name); } diff --git a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts index c9af7c0b300e..c7fdcf7f2d3e 100644 --- a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts +++ b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts @@ -1,6 +1,5 @@ import {SelectionChange} from '@angular/cdk-experimental/selection'; -import {Component, OnDestroy} from '@angular/core'; -import {ReplaySubject} from 'rxjs'; +import {Component} from '@angular/core'; /** * @title Mat Selection on a simple list. @@ -9,21 +8,13 @@ import {ReplaySubject} from 'rxjs'; selector: 'mat-selection-list-example', templateUrl: 'mat-selection-list-example.html', }) -export class MatSelectionListExample implements OnDestroy { - private readonly _destroyed = new ReplaySubject(1); - +export class MatSelectionListExample { data = ELEMENT_NAMES; - selected1: string[] = []; selected2: string[] = []; selected3: string[] = []; selected4: string[] = []; - ngOnDestroy() { - this._destroyed.next(); - this._destroyed.complete(); - } - getCurrentSelected(event: SelectionChange) { return event.after.map((select) => select.value); } diff --git a/src/material/datepicker/datepicker-toggle.ts b/src/material/datepicker/datepicker-toggle.ts index 3d0d50a95b80..34c8e9fbc16b 100644 --- a/src/material/datepicker/datepicker-toggle.ts +++ b/src/material/datepicker/datepicker-toggle.ts @@ -23,7 +23,7 @@ import { ViewChild, } from '@angular/core'; import {MatButton} from '@angular/material/button'; -import {merge, of as observableOf, Subscription} from 'rxjs'; +import {merge, Observable, of as observableOf, Subscription} from 'rxjs'; import {MatDatepickerIntl} from './datepicker-intl'; import {MatDatepickerControl, MatDatepickerPanel} from './datepicker-base'; @@ -132,7 +132,7 @@ export class MatDatepickerToggle implements AfterContentInit, OnChanges, OnDe this._stateChanges.unsubscribe(); this._stateChanges = merge( this._intl.changes, - datepickerStateChanged, + datepickerStateChanged as Observable, inputStateChanged, datepickerToggled ).subscribe(() => this._changeDetectorRef.markForCheck()); diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts index fc88cd9a2958..96d157ec256d 100644 --- a/src/material/menu/menu-trigger.ts +++ b/src/material/menu/menu-trigger.ts @@ -39,7 +39,7 @@ import { ViewContainerRef, } from '@angular/core'; import {normalizePassiveListenerOptions} from '@angular/cdk/platform'; -import {asapScheduler, merge, of as observableOf, Subscription} from 'rxjs'; +import {asapScheduler, merge, Observable, of as observableOf, Subscription} from 'rxjs'; import {delay, filter, take, takeUntil} from 'rxjs/operators'; import {MenuCloseReason, _MatMenuBase} from './menu'; import {throwMatMenuMissingError, throwMatMenuRecursiveError} from './menu-errors'; @@ -504,7 +504,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { filter(() => this._menuOpen) ) : observableOf(); - return merge(backdrop, parentClose, hover, detachments); + return merge(backdrop, parentClose as Observable, hover, detachments); } /** Handles mouse presses on the trigger. */ diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index 285c13cf2584..6f17ff03512b 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -277,8 +277,8 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel // is internal and we know that it gets completed on destroy. this._directDescendantItems.changes.pipe( startWith(this._directDescendantItems), - switchMap(items => merge(...items.map((item: MatMenuItem) => item._focused))) - ).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem)); + switchMap(items => merge(...items.map((item: MatMenuItem) => item._focused))) + ).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem as MatMenuItem)); } ngOnDestroy() { diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts index 862ec8093179..946dc06fa239 100644 --- a/src/material/tabs/paginated-tab-header.ts +++ b/src/material/tabs/paginated-tab-header.ts @@ -180,7 +180,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte } ngAfterContentInit() { - const dirChange = this._dir ? this._dir.change : observableOf(null); + const dirChange = this._dir ? this._dir.change : observableOf('ltr'); const resize = this._viewportRuler.change(150); const realign = () => { this.updatePagination(); diff --git a/src/material/tree/data-source/nested-data-source.ts b/src/material/tree/data-source/nested-data-source.ts index 3a4e89d67799..a3998e1e4de8 100644 --- a/src/material/tree/data-source/nested-data-source.ts +++ b/src/material/tree/data-source/nested-data-source.ts @@ -26,10 +26,8 @@ export class MatTreeNestedDataSource extends DataSource { private readonly _data = new BehaviorSubject([]); connect(collectionViewer: CollectionViewer): Observable { - return merge(...[collectionViewer.viewChange, this._data]) - .pipe(map(() => { - return this.data; - })); + return merge(...[collectionViewer.viewChange, this._data] as Observable[]) + .pipe(map(() => this.data)); } disconnect() {