From 98a69105935c0a91146dbdabd313c85c46f82c7f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 13 Feb 2018 16:43:46 +0100 Subject: [PATCH] feat(bottom-sheet): add result param when dismissing bottom sheet (#9810) Something that came up while doing the docs. Adds the ability for the consumer to pass back a result from a bottom sheet. Also adds a test for `afterDismissed` since it didn't have one. --- src/lib/bottom-sheet/bottom-sheet-ref.ts | 19 ++++++++++----- src/lib/bottom-sheet/bottom-sheet.spec.ts | 28 +++++++++++++++++++++++ src/lib/bottom-sheet/bottom-sheet.ts | 14 ++++++------ 3 files changed, 48 insertions(+), 13 deletions(-) diff --git a/src/lib/bottom-sheet/bottom-sheet-ref.ts b/src/lib/bottom-sheet/bottom-sheet-ref.ts index 479977a8a1c..9337aad2081 100644 --- a/src/lib/bottom-sheet/bottom-sheet-ref.ts +++ b/src/lib/bottom-sheet/bottom-sheet-ref.ts @@ -18,7 +18,7 @@ import {MatBottomSheetContainer} from './bottom-sheet-container'; /** * Reference to a bottom sheet dispatched from the bottom sheet service. */ -export class MatBottomSheetRef { +export class MatBottomSheetRef { /** Instance of the component making up the content of the bottom sheet. */ instance: T; @@ -29,11 +29,14 @@ export class MatBottomSheetRef { containerInstance: MatBottomSheetContainer; /** Subject for notifying the user that the bottom sheet has been dismissed. */ - private readonly _afterDismissed = new Subject(); + private readonly _afterDismissed = new Subject(); /** Subject for notifying the user that the bottom sheet has opened and appeared. */ private readonly _afterOpened = new Subject(); + /** Result to be passed down to the `afterDismissed` stream. */ + private _result: R | undefined; + constructor(containerInstance: MatBottomSheetContainer, private _overlayRef: OverlayRef) { this.containerInstance = containerInstance; @@ -54,7 +57,7 @@ export class MatBottomSheetRef { ) .subscribe(() => { this._overlayRef.dispose(); - this._afterDismissed.next(); + this._afterDismissed.next(this._result); this._afterDismissed.complete(); }); @@ -66,8 +69,11 @@ export class MatBottomSheetRef { } } - /** Dismisses the bottom sheet. */ - dismiss(): void { + /** + * Dismisses the bottom sheet. + * @param result Data to be passed back to the bottom sheet opener. + */ + dismiss(result?: R): void { if (!this._afterDismissed.closed) { // Transition the backdrop in parallel to the bottom sheet. this.containerInstance._animationStateChanged.pipe( @@ -75,12 +81,13 @@ export class MatBottomSheetRef { take(1) ).subscribe(() => this._overlayRef.detachBackdrop()); + this._result = result; this.containerInstance.exit(); } } /** Gets an observable that is notified when the bottom sheet is finished closing. */ - afterDismissed(): Observable { + afterDismissed(): Observable { return this._afterDismissed.asObservable(); } diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index 0c23327deee..3cc2d863e1d 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -295,6 +295,34 @@ describe('MatBottomSheet', () => { tick(500); })); + it('should emit after being dismissed', fakeAsync(() => { + const bottomSheetRef = bottomSheet.open(PizzaMsg); + const spy = jasmine.createSpy('afterDismissed spy'); + + bottomSheetRef.afterDismissed().subscribe(spy); + viewContainerFixture.detectChanges(); + + bottomSheetRef.dismiss(); + viewContainerFixture.detectChanges(); + flush(); + + expect(spy).toHaveBeenCalledTimes(1); + })); + + it('should be able to pass a result back to the dismissed stream', fakeAsync(() => { + const bottomSheetRef = bottomSheet.open(PizzaMsg); + const spy = jasmine.createSpy('afterDismissed spy'); + + bottomSheetRef.afterDismissed().subscribe(spy); + viewContainerFixture.detectChanges(); + + bottomSheetRef.dismiss(1337); + viewContainerFixture.detectChanges(); + flush(); + + expect(spy).toHaveBeenCalledWith(1337); + })); + describe('passing in data', () => { it('should be able to pass in data', () => { const config = { diff --git a/src/lib/bottom-sheet/bottom-sheet.ts b/src/lib/bottom-sheet/bottom-sheet.ts index e30f9974c6a..33641a87fac 100644 --- a/src/lib/bottom-sheet/bottom-sheet.ts +++ b/src/lib/bottom-sheet/bottom-sheet.ts @@ -39,18 +39,18 @@ export class MatBottomSheet { private _injector: Injector, @Optional() @SkipSelf() private _parentBottomSheet: MatBottomSheet) {} - open(component: ComponentType, - config?: MatBottomSheetConfig): MatBottomSheetRef; - open(template: TemplateRef, - config?: MatBottomSheetConfig): MatBottomSheetRef; + open(component: ComponentType, + config?: MatBottomSheetConfig): MatBottomSheetRef; + open(template: TemplateRef, + config?: MatBottomSheetConfig): MatBottomSheetRef; - open(componentOrTemplateRef: ComponentType | TemplateRef, - config?: MatBottomSheetConfig): MatBottomSheetRef { + open(componentOrTemplateRef: ComponentType | TemplateRef, + config?: MatBottomSheetConfig): MatBottomSheetRef { const _config = _applyConfigDefaults(config); const overlayRef = this._createOverlay(_config); const container = this._attachContainer(overlayRef, _config); - const ref = new MatBottomSheetRef(container, overlayRef); + const ref = new MatBottomSheetRef(container, overlayRef); if (componentOrTemplateRef instanceof TemplateRef) { container.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null!, {