From 6c3442a2482e6baa0259e73deb9d1893eab09438 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 7 Aug 2018 22:38:44 +0200 Subject: [PATCH] refactor(dialog): normalize event names (#11549) --- src/cdk-experimental/dialog/dialog-ref.ts | 8 ++--- src/cdk-experimental/dialog/dialog.spec.ts | 6 ++-- src/cdk-experimental/dialog/dialog.ts | 19 +++++----- src/demo-app/dialog/dialog-demo.ts | 2 +- src/lib/dialog/dialog-ref.ts | 42 +++++++++++++++------- src/lib/dialog/dialog.spec.ts | 6 ++-- src/lib/dialog/dialog.ts | 15 ++++++-- src/lib/select/select.ts | 4 +-- 8 files changed, 66 insertions(+), 36 deletions(-) diff --git a/src/cdk-experimental/dialog/dialog-ref.ts b/src/cdk-experimental/dialog/dialog-ref.ts index 39ad2869b11..d8b26381311 100644 --- a/src/cdk-experimental/dialog/dialog-ref.ts +++ b/src/cdk-experimental/dialog/dialog-ref.ts @@ -44,7 +44,7 @@ export class DialogRef { }); } - this.beforeClose().subscribe(() => { + this.beforeClosed().subscribe(() => { this._overlayRef.detachBackdrop(); }); @@ -127,17 +127,17 @@ export class DialogRef { } /** Gets an observable that emits when dialog begins opening. */ - beforeOpen(): Observable { + beforeOpened(): Observable { return this._containerInstance._beforeEnter.asObservable(); } /** Gets an observable that emits when dialog is finished opening. */ - afterOpen(): Observable { + afterOpened(): Observable { return this._containerInstance._afterEnter.asObservable(); } /** Gets an observable that emits when dialog begins closing. */ - beforeClose(): Observable { + beforeClosed(): Observable { return this._containerInstance._beforeExit.pipe(map(() => this._result)); } diff --git a/src/cdk-experimental/dialog/dialog.spec.ts b/src/cdk-experimental/dialog/dialog.spec.ts index f7432bdc411..9c8762fb245 100644 --- a/src/cdk-experimental/dialog/dialog.spec.ts +++ b/src/cdk-experimental/dialog/dialog.spec.ts @@ -108,7 +108,7 @@ describe('Dialog', () => { const dialogRef = dialog.openFromComponent(PizzaMsg, {viewContainerRef: testViewContainerRef}); const spy = jasmine.createSpy('afterOpen spy'); - dialogRef.afterOpen().subscribe(spy); + dialogRef.afterOpened().subscribe(spy); viewContainerFixture.detectChanges(); @@ -203,7 +203,7 @@ describe('Dialog', () => { .not.toBeNull('dialog container exists when beforeClose is called'); }); - dialogRef.beforeClose().subscribe(beforeCloseHandler); + dialogRef.beforeClosed().subscribe(beforeCloseHandler); dialogRef.close('Bulbasaur'); viewContainerFixture.detectChanges(); flush(); @@ -298,7 +298,7 @@ describe('Dialog', () => { })); it('should notify the observers if a dialog has been opened', () => { - dialog.afterOpen.subscribe(ref => { + dialog.afterOpened.subscribe(ref => { expect(dialog.openFromComponent(PizzaMsg, { viewContainerRef: testViewContainerRef })).toBe(ref); diff --git a/src/cdk-experimental/dialog/dialog.ts b/src/cdk-experimental/dialog/dialog.ts index 208b7857b3e..5f18c9a4524 100644 --- a/src/cdk-experimental/dialog/dialog.ts +++ b/src/cdk-experimental/dialog/dialog.ts @@ -53,10 +53,10 @@ export class Dialog { this._afterAllClosed : this._afterAllClosed.pipe(startWith(undefined))); /** Stream that emits when a dialog is opened. */ - get afterOpen(): Subject> { - return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpen; + get afterOpened(): Subject> { + return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpened; } - _afterOpen: Subject> = new Subject(); + _afterOpened: Subject> = new Subject(); /** Stream that emits when a dialog is opened. */ get openDialogs(): DialogRef[] { @@ -130,14 +130,17 @@ export class Dialog { private registerDialogRef(dialogRef: DialogRef): void { this.openDialogs.push(dialogRef); - let dialogOpenSub = dialogRef.afterOpen().subscribe(() => { - this.afterOpen.next(dialogRef); + const dialogOpenSub = dialogRef.afterOpened().subscribe(() => { + this.afterOpened.next(dialogRef); dialogOpenSub.unsubscribe(); }); - let dialogCloseSub = dialogRef.afterClosed().subscribe(() => { - let dialogIdx = this._openDialogs.indexOf(dialogRef); - if (dialogIdx !== -1) { this._openDialogs.splice(dialogIdx, 1); } + const dialogCloseSub = dialogRef.afterClosed().subscribe(() => { + let dialogIndex = this._openDialogs.indexOf(dialogRef); + + if (dialogIndex > -1) { + this._openDialogs.splice(dialogIndex, 1); + } if (!this._openDialogs.length) { this._afterAllClosedBase.next(); diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 822332ef260..d9e54bd2288 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -66,7 +66,7 @@ export class DialogDemo { openJazz() { this.dialogRef = this.dialog.open(JazzDialog, this.config); - this.dialogRef.beforeClose().subscribe((result: string) => { + this.dialogRef.beforeClosed().subscribe((result: string) => { this.lastBeforeCloseResult = result; }); this.dialogRef.afterClosed().subscribe((result: string) => { diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts index 10b855e9d50..3eb56318802 100644 --- a/src/lib/dialog/dialog-ref.ts +++ b/src/lib/dialog/dialog-ref.ts @@ -31,13 +31,13 @@ export class MatDialogRef { disableClose: boolean | undefined = this._containerInstance._config.disableClose; /** Subject for notifying the user that the dialog has finished opening. */ - private readonly _afterOpen = new Subject(); + private readonly _afterOpened = new Subject(); /** Subject for notifying the user that the dialog has finished closing. */ private readonly _afterClosed = new Subject(); /** Subject for notifying the user that the dialog has started closing. */ - private readonly _beforeClose = new Subject(); + private readonly _beforeClosed = new Subject(); /** Result to be passed to afterClosed. */ private _result: R | undefined; @@ -60,8 +60,8 @@ export class MatDialogRef { take(1) ) .subscribe(() => { - this._afterOpen.next(); - this._afterOpen.complete(); + this._afterOpened.next(); + this._afterOpened.complete(); }); // Dispose overlay when closing animation is complete @@ -71,8 +71,8 @@ export class MatDialogRef { ).subscribe(() => this._overlayRef.dispose()); _overlayRef.detachments().subscribe(() => { - this._beforeClose.next(this._result); - this._beforeClose.complete(); + this._beforeClosed.next(this._result); + this._beforeClosed.complete(); this._locationChanges.unsubscribe(); this._afterClosed.next(this._result); this._afterClosed.complete(); @@ -109,8 +109,8 @@ export class MatDialogRef { take(1) ) .subscribe(() => { - this._beforeClose.next(dialogResult); - this._beforeClose.complete(); + this._beforeClosed.next(dialogResult); + this._beforeClosed.complete(); this._overlayRef.detachBackdrop(); }); @@ -120,8 +120,8 @@ export class MatDialogRef { /** * Gets an observable that is notified when the dialog is finished opening. */ - afterOpen(): Observable { - return this._afterOpen.asObservable(); + afterOpened(): Observable { + return this._afterOpened.asObservable(); } /** @@ -134,8 +134,8 @@ export class MatDialogRef { /** * Gets an observable that is notified when the dialog has started closing. */ - beforeClose(): Observable { - return this._beforeClose.asObservable(); + beforeClosed(): Observable { + return this._beforeClosed.asObservable(); } /** @@ -187,6 +187,24 @@ export class MatDialogRef { return this; } + /** + * Gets an observable that is notified when the dialog is finished opening. + * @deprecated Use `afterOpened` instead. + * @deletion-target 8.0.0 + */ + afterOpen(): Observable { + return this.afterOpened(); + } + + /** + * Gets an observable that is notified when the dialog has started closing. + * @deprecated Use `beforeClosed` instead. + * @deletion-target 8.0.0 + */ + beforeClose(): Observable { + return this.beforeClosed(); + } + /** Fetches the position strategy object from the overlay ref. */ private _getPositionStrategy(): GlobalPositionStrategy { return this._overlayRef.getConfig().positionStrategy as GlobalPositionStrategy; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index d1edf75cccb..12bb6023482 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -122,7 +122,7 @@ describe('MatDialog', () => { const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef}); const spy = jasmine.createSpy('afterOpen spy'); - dialogRef.afterOpen().subscribe(spy); + dialogRef.afterOpened().subscribe(spy); viewContainerFixture.detectChanges(); @@ -225,7 +225,7 @@ describe('MatDialog', () => { .not.toBeNull('dialog container exists when beforeClose is called'); }); - dialogRef.beforeClose().subscribe(beforeCloseHandler); + dialogRef.beforeClosed().subscribe(beforeCloseHandler); dialogRef.close('Bulbasaur'); viewContainerFixture.detectChanges(); flush(); @@ -328,7 +328,7 @@ describe('MatDialog', () => { })); it('should notify the observers if a dialog has been opened', () => { - dialog.afterOpen.subscribe(ref => { + dialog.afterOpened.subscribe(ref => { expect(dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef })).toBe(ref); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 3467c66bb5c..a92d006faba 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -69,7 +69,7 @@ export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = { export class MatDialog { private _openDialogsAtThisLevel: MatDialogRef[] = []; private readonly _afterAllClosedAtThisLevel = new Subject(); - private readonly _afterOpenAtThisLevel = new Subject>(); + private readonly _afterOpenedAtThisLevel = new Subject>(); private _ariaHiddenElements = new Map(); /** Keeps track of the currently-open dialogs. */ @@ -78,8 +78,17 @@ export class MatDialog { } /** Stream that emits when a dialog has been opened. */ + get afterOpened(): Subject> { + return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel; + } + + /** + * Stream that emits when a dialog has been opened. + * @deprecated Use `afterOpened` instead. + * @deletion-target 8.0.0 + */ get afterOpen(): Subject> { - return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpenAtThisLevel; + return this.afterOpened; } get _afterAllClosed() { @@ -134,7 +143,7 @@ export class MatDialog { this.openDialogs.push(dialogRef); dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef)); - this.afterOpen.next(dialogRef); + this.afterOpened.next(dialogRef); return dialogRef; } diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 55ab9830a17..0bb7f74def5 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -445,8 +445,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, .pipe(take(1), switchMap(() => this.optionSelectionChanges)); }); - /** Event emitted when the select panel has been toggled. */ - @Output() readonly openedChange: EventEmitter = new EventEmitter(); + /** Event emitted when the select panel has been toggled. */ + @Output() readonly openedChange: EventEmitter = new EventEmitter(); /** Event emitted when the select has been opened. */ @Output('opened') readonly _openedStream: Observable =