feat(module:drawer): support nzOnCancel for service mode (#3376)

close #3372

* feat(module:drawer): support `nzOnCancel` for service mode

* docs(module:drawer): fix docs

* docs(module:drawer): fix docs

components/drawer/doc/index.en-US.md

@@ -56,6 +56,7 @@ import { NzDrawerModule } from 'ng-zorro-antd';
 | nzContent |  The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }>｜Type<T>` | - |
 | nzContentParams | The component inputs the param / The Template context. | `D` | - |
 | nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
 | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
 | nzMask | Whether to show mask or not. | `boolean` | `true` |
 | nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` |

components/drawer/doc/index.zh-CN.md

@@ -42,7 +42,7 @@ import { NzDrawerModule } from 'ng-zorro-antd';
 | `[nzOffsetY]` | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` |
 | `[nzWrapClassName]` | 对话框外层容器的类名 | `string` | - |
 | `[nzZIndex]` | 设置 Drawer 的 `z-index` | `number` | `1000` |
-| `(nzOnClose)` | 点击遮罩层或右上角叉或取消按钮的回调 | `EventEmitter<MouseEvent>` | - |
+| `(nzOnClose)` | 点击遮罩层或右上角叉的回调 | `EventEmitter<MouseEvent>` | - |
 
 ### NzDrawerService
 
@@ -56,6 +56,7 @@ import { NzDrawerModule } from 'ng-zorro-antd';
 | --- | --- | --- | --- |
 | nzContent | Drawer body 的内容 | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }>｜ Type<T>` | - |
 | nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - |
+| nzOnCancel | 点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时，将自动关闭对话框（返回false可阻止关闭） | `() => Promise<any>` | - |
 | nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | nzMask | 是否展示遮罩 | `boolean` | `true` |

components/drawer/nz-drawer-options.ts

@@ -12,7 +12,7 @@ import { NzDrawerRef } from './nz-drawer-ref';
 export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 
 // tslint:disable-next-line:no-any
-export interface NzDrawerOptions<T = any, D = any> {
+export interface NzDrawerOptionsOfComponent<T = any, D = any> {
   nzClosable?: boolean;
   nzMaskClosable?: boolean;
   nzMask?: boolean;
@@ -30,3 +30,9 @@ export interface NzDrawerOptions<T = any, D = any> {
   nzOffsetX?: number;
   nzOffsetY?: number;
 }
+
+// tslint:disable-next-line:no-any
+export interface NzDrawerOptions<T = any, D = any> extends NzDrawerOptionsOfComponent<T, D> {
+  // tslint:disable-next-line:no-any
+  nzOnCancel?(): Promise<any>;
+}

components/drawer/nz-drawer.component.ts

@@ -36,7 +36,7 @@ import { CdkPortalOutlet, ComponentPortal, PortalInjector, TemplatePortal } from
 import { Observable, Subject } from 'rxjs';
 
 import { toCssPixel, InputBoolean } from 'ng-zorro-antd/core';
-import { NzDrawerOptions, NzDrawerPlacement } from './nz-drawer-options';
+import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './nz-drawer-options';
 import { NzDrawerRef } from './nz-drawer-ref';
 
 export const DRAWER_ANIMATE_DURATION = 300;
@@ -50,7 +50,7 @@ export const DRAWER_ANIMATE_DURATION = 300;
 })
 // tslint:disable-next-line:no-any
 export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
-  implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptions {
+  implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent {
   @Input() nzContent: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef<R> }> | Type<T>;
   @Input() @InputBoolean() nzClosable = true;
   @Input() @InputBoolean() nzMaskClosable = true;

components/drawer/nz-drawer.service.ts

@@ -11,7 +11,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef, Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { NzDrawerOptions } from './nz-drawer-options';
+import { NzDrawerOptions, NzDrawerOptionsOfComponent } from './nz-drawer-options';
 import { NzDrawerRef } from './nz-drawer-ref';
 import { NzDrawerComponent } from './nz-drawer.component';
 
@@ -21,16 +21,25 @@ export class DrawerBuilderForService<R> {
   private unsubscribe$ = new Subject<void>();
 
   constructor(private overlay: Overlay, private options: NzDrawerOptions) {
+    /** pick {@link NzDrawerOptions.nzOnCancel} and omit this option */
+    const { nzOnCancel, ...componentOption } = this.options;
     this.createDrawer();
-    this.updateOptions(this.options);
+    this.updateOptions(componentOption);
     // Prevent repeatedly open drawer when tap focus element.
     this.drawerRef!.instance.savePreviouslyFocusedElement();
     this.drawerRef!.instance.nzOnViewInit.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
       this.drawerRef!.instance.open();
     });
-
     this.drawerRef!.instance.nzOnClose.subscribe(() => {
-      this.drawerRef!.instance.close();
+      if (nzOnCancel) {
+        nzOnCancel().then(canClose => {
+          if (canClose !== false) {
+            this.drawerRef!.instance.close();
+          }
+        });
+      } else {
+        this.drawerRef!.instance.close();
+      }
     });
 
     this.drawerRef!.instance.afterClose.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
@@ -50,7 +59,7 @@ export class DrawerBuilderForService<R> {
     this.drawerRef = this.overlayRef.attach(new ComponentPortal(NzDrawerComponent));
   }
 
-  updateOptions(options: NzDrawerOptions): void {
+  updateOptions(options: NzDrawerOptionsOfComponent): void {
     Object.assign(this.drawerRef!.instance, options);
   }
 }

components/drawer/nz-drawer.spec.ts

@@ -385,7 +385,7 @@ describe('NzDrawerService', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NzDrawerModule],
+      imports: [NzDrawerModule, NoopAnimationsModule],
       providers: [NzDrawerService],
       declarations: [NzTestDrawerWithServiceComponent, NzDrawerCustomComponent]
     });
@@ -431,7 +431,7 @@ describe('NzDrawerService', () => {
       nzContentParams: { value: 1 }
     });
     drawerRef.afterOpen.subscribe(openSpy);
-    drawerRef.afterOpen.subscribe(closeSpy);
+    drawerRef.afterClose.subscribe(closeSpy);
     fixture.detectChanges();
     expect(openSpy).not.toHaveBeenCalled();
     tick(300);
@@ -440,6 +440,34 @@ describe('NzDrawerService', () => {
     fixture.detectChanges();
     tick(300);
     expect(closeSpy).toHaveBeenCalled();
+    fixture.detectChanges();
+  }));
+
+  it('should `nzOnCancel` work', fakeAsync(() => {
+    let canClose = false;
+    const openSpy = jasmine.createSpy('afterOpen spy');
+    const closeSpy = jasmine.createSpy('afterClose spy').and.returnValue(1);
+    const drawerRef = drawerService.create({
+      nzTitle: 'Service nzOnCancel',
+      nzContent: NzDrawerCustomComponent,
+      nzOnCancel: () => Promise.resolve(canClose)
+    });
+    drawerRef.afterOpen.subscribe(openSpy);
+    drawerRef.afterClose.subscribe(closeSpy);
+    fixture.detectChanges();
+    expect(openSpy).not.toHaveBeenCalled();
+    tick(300);
+    expect(openSpy).toHaveBeenCalled();
+    (overlayContainerElement.querySelector('.ant-drawer .ant-drawer-close') as HTMLElement).click();
+    fixture.detectChanges();
+    tick(300);
+    expect(closeSpy).not.toHaveBeenCalled();
+    fixture.detectChanges();
+    canClose = true;
+    (overlayContainerElement.querySelector('.ant-drawer .ant-drawer-close') as HTMLElement).click();
+    fixture.detectChanges();
+    tick(300);
+    expect(closeSpy).toHaveBeenCalled();
   }));
 });