mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
committed by
Jeremy Elbourn
parent
dcd9c795c3
commit
98a6910593
@@ -18,7 +18,7 @@ import {MatBottomSheetContainer} from './bottom-sheet-container';
|
||||
/**
|
||||
* Reference to a bottom sheet dispatched from the bottom sheet service.
|
||||
*/
|
||||
export class MatBottomSheetRef<T = any> {
|
||||
export class MatBottomSheetRef<T = any, R = any> {
|
||||
/** Instance of the component making up the content of the bottom sheet. */
|
||||
instance: T;
|
||||
|
||||
@@ -29,11 +29,14 @@ export class MatBottomSheetRef<T = any> {
|
||||
containerInstance: MatBottomSheetContainer;
|
||||
|
||||
/** Subject for notifying the user that the bottom sheet has been dismissed. */
|
||||
private readonly _afterDismissed = new Subject<void>();
|
||||
private readonly _afterDismissed = new Subject<R | undefined>();
|
||||
|
||||
/** Subject for notifying the user that the bottom sheet has opened and appeared. */
|
||||
private readonly _afterOpened = new Subject<void>();
|
||||
|
||||
/** 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<T = any> {
|
||||
)
|
||||
.subscribe(() => {
|
||||
this._overlayRef.dispose();
|
||||
this._afterDismissed.next();
|
||||
this._afterDismissed.next(this._result);
|
||||
this._afterDismissed.complete();
|
||||
});
|
||||
|
||||
@@ -66,8 +69,11 @@ export class MatBottomSheetRef<T = any> {
|
||||
}
|
||||
}
|
||||
|
||||
/** 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<T = any> {
|
||||
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<void> {
|
||||
afterDismissed(): Observable<R | undefined> {
|
||||
return this._afterDismissed.asObservable();
|
||||
}
|
||||
|
||||
|
||||
@@ -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, any, number>(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 = {
|
||||
|
||||
@@ -39,18 +39,18 @@ export class MatBottomSheet {
|
||||
private _injector: Injector,
|
||||
@Optional() @SkipSelf() private _parentBottomSheet: MatBottomSheet) {}
|
||||
|
||||
open<T, D = any>(component: ComponentType<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T>;
|
||||
open<T, D = any>(template: TemplateRef<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T>;
|
||||
open<T, D = any, R = any>(component: ComponentType<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
|
||||
open<T, D = any, R = any>(template: TemplateRef<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R>;
|
||||
|
||||
open<T, D = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T> {
|
||||
open<T, D = any, R = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
|
||||
config?: MatBottomSheetConfig<D>): MatBottomSheetRef<T, R> {
|
||||
|
||||
const _config = _applyConfigDefaults(config);
|
||||
const overlayRef = this._createOverlay(_config);
|
||||
const container = this._attachContainer(overlayRef, _config);
|
||||
const ref = new MatBottomSheetRef<T>(container, overlayRef);
|
||||
const ref = new MatBottomSheetRef<T, R>(container, overlayRef);
|
||||
|
||||
if (componentOrTemplateRef instanceof TemplateRef) {
|
||||
container.attachTemplatePortal(new TemplatePortal<T>(componentOrTemplateRef, null!, {
|
||||
|
||||
Reference in New Issue
Block a user