From 309d5644aa610ee083c56a823ce7c422988730e8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 11 Apr 2019 20:07:15 +0200 Subject: [PATCH] refactor(tabs): constructor breaking changes for 8.0 (#15738) Handles the constructor-related breaking changes for 8.0. BREAKING CHANGES: * `_ngZone` and `_platform` parameters in `MatTabHeader` constructor are now required. * `changeDetectorRef` parameter in `MatTabBody` constructor is now required. --- .../ng-update/data/constructor-checks.ts | 4 +++ src/lib/tabs/tab-body.ts | 9 ++--- src/lib/tabs/tab-header.ts | 35 ++++++------------- tools/public_api_guard/lib/tabs.d.ts | 5 ++- 4 files changed, 20 insertions(+), 33 deletions(-) diff --git a/src/lib/schematics/ng-update/data/constructor-checks.ts b/src/lib/schematics/ng-update/data/constructor-checks.ts index 3f73d741a2e..8f189cbb2ac 100644 --- a/src/lib/schematics/ng-update/data/constructor-checks.ts +++ b/src/lib/schematics/ng-update/data/constructor-checks.ts @@ -38,6 +38,10 @@ export const constructorChecks: VersionChanges = { { pr: 'https://github.com/angular/material2/pull/15722', changes: ['MatExpansionPanel'] + }, + { + pr: 'https://github.com/angular/material2/pull/15737', + changes: ['MatTabHeader', 'MatTabBody'] } ], diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 9c51cfb97a8..521f0767e9b 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -163,13 +163,10 @@ export class MatTabBody implements OnInit, OnDestroy { constructor(private _elementRef: ElementRef, @Optional() private _dir: Directionality, - /** - * @breaking-change 8.0.0 changeDetectorRef to be made required. - */ - changeDetectorRef?: ChangeDetectorRef) { + changeDetectorRef: ChangeDetectorRef) { - if (this._dir && changeDetectorRef) { - this._dirChangeSubscription = this._dir.change.subscribe((dir: Direction) => { + if (_dir) { + this._dirChangeSubscription = _dir.change.subscribe((dir: Direction) => { this._computePositionAnimationState(dir); changeDetectorRef.markForCheck(); }); diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index e8491afd84f..5d9d1cce7e4 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -164,27 +164,18 @@ export class MatTabHeader extends _MatTabHeaderMixinBase private _changeDetectorRef: ChangeDetectorRef, private _viewportRuler: ViewportRuler, @Optional() private _dir: Directionality, - // @breaking-change 8.0.0 `_ngZone` and `_platforms` parameters to be made required. - private _ngZone?: NgZone, - private _platform?: Platform) { + private _ngZone: NgZone, + private _platform: Platform) { super(); - const element = _elementRef.nativeElement; - const bindEvent = () => { - fromEvent(element, 'mouseleave') + // Bind the `mouseleave` event on the outside since it doesn't change anything in the view. + _ngZone.runOutsideAngular(() => { + fromEvent(_elementRef.nativeElement, 'mouseleave') .pipe(takeUntil(this._destroyed)) .subscribe(() => { this._stopInterval(); }); - }; - - // @breaking-change 8.0.0 remove null check once _ngZone is made into a required parameter. - if (_ngZone) { - // Bind the `mouseleave` event on the outside since it doesn't change anything in the view. - _ngZone.runOutsideAngular(bindEvent); - } else { - bindEvent(); - } + }); } ngAfterContentChecked(): void { @@ -310,16 +301,13 @@ export class MatTabHeader extends _MatTabHeaderMixinBase if (textContent !== this._currentTextContent) { this._currentTextContent = textContent; - const zoneCallback = () => { + // The content observer runs outside the `NgZone` by default, which + // means that we need to bring the callback back in ourselves. + this._ngZone.run(() => { this.updatePagination(); this._alignInkBarToSelectedTab(); this._changeDetectorRef.markForCheck(); - }; - - // The content observer runs outside the `NgZone` by default, which - // means that we need to bring the callback back in ourselves. - // @breaking-change 8.0.0 Remove null check for `_ngZone` once it's a required parameter. - this._ngZone ? this._ngZone.run(zoneCallback) : zoneCallback(); + }); } } @@ -410,8 +398,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase // position to be thrown off in some cases. We have to reset it ourselves to ensure that // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing // with the scroll position throws off Chrome 71+ in RTL mode (see #14689). - // @breaking-change 8.0.0 Remove null check for `platform`. - if (platform && (platform.TRIDENT || platform.EDGE)) { + if (platform.TRIDENT || platform.EDGE) { this._tabListContainer.nativeElement.scrollLeft = 0; } } diff --git a/tools/public_api_guard/lib/tabs.d.ts b/tools/public_api_guard/lib/tabs.d.ts index 99c03997b39..a5a41111a85 100644 --- a/tools/public_api_guard/lib/tabs.d.ts +++ b/tools/public_api_guard/lib/tabs.d.ts @@ -48,8 +48,7 @@ export declare class MatTabBody implements OnInit, OnDestroy { animationDuration: string; origin: number; position: number; - constructor(_elementRef: ElementRef, _dir: Directionality, - changeDetectorRef?: ChangeDetectorRef); + constructor(_elementRef: ElementRef, _dir: Directionality, changeDetectorRef: ChangeDetectorRef); _getLayoutDirection(): Direction; _isCenterPosition(position: MatTabBodyPositionState | string): boolean; _onTranslateTabStarted(event: AnimationEvent): void; @@ -124,7 +123,7 @@ export declare class MatTabHeader extends _MatTabHeaderMixinBase implements Afte scrollDistance: number; readonly selectFocusedIndex: EventEmitter; selectedIndex: number; - constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone?: NgZone | undefined, _platform?: Platform | undefined); + constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone: NgZone, _platform: Platform); _alignInkBarToSelectedTab(): void; _checkPaginationEnabled(): void; _checkScrollingControls(): void;