feat(module:drawer): support nzKeyboard property (#3896)

NG-ZORRO · Aug 9, 2019 · 38062fb · 38062fb
1 parent ab4bcbe
commit 38062fb
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 27 deletions.
diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md
@@ -30,6 +30,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
 | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` |
 | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
+| `[nzKeyboard]` | Whether support press esc to close | `boolean` | `true` |
 | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` |
 | `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` |
 | `[nzTitle]` | The title for Drawer. | `string \| TemplateRef<void>` | - |
@@ -59,6 +60,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | 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` |
+| nzKeyboard | Whether support press esc to close | `boolean` | `true` |
 | nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` |
 | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
 | nzTitle | The title for Drawer. | `string \| TemplateRef<void>` | - |
@@ -84,16 +86,17 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- |
 | afterOpen | Callback called after open. | `Observable<void>` |
 | afterClose | Callback called after close. | `Observable<R>` |
-| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
-| 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` | `{}` |
-| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
-| nzTitle | The title for Drawer. | `string \| TemplateRef<void>` | - |
-| nzWidth |  Width of the Drawer dialog.  | `number \| string` | `256` |
-| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` | `256` |
-| nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
-| nzZIndex| The `z-index` of the Drawer. | `number` | `1000` |
-| nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| nzOffsetX | The the X coordinate offset(px). | `number` | `0` |
-| nzOffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` |
+| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` |
+| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` |
+| nzMask | Whether to show mask or not. | `boolean` |
+| nzKeyboard | Whether support press esc to close | `boolean` |
+| nzMaskStyle | Style for Drawer's mask element. | `object` |
+| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` |
+| nzTitle | The title for Drawer. | `string \| TemplateRef<void>` |
+| nzWidth |  Width of the Drawer dialog.  | `number \| string` |
+| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.  | `number \| string` |
+| nzWrapClassName | The class name of the container of the Drawer dialog. | `string` |
+| nzZIndex| The `z-index` of the Drawer. | `number` |
+| nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` |
+| nzOffsetX | The the X coordinate offset(px). | `number` |
+| nzOffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` |
diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md
@@ -29,6 +29,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
 | `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | `[nzMask]` | 是否展示遮罩 | `boolean` | `true` |
+| `[nzKeyboard]` | 是否支持键盘esc关闭 | `boolean` | `true` |
 | `[nzMaskStyle]` | 遮罩样式 | `object` | `{}` |
 | `[nzBodyStyle]` | Drawer body 样式 | `object` | `{}` |
 | `[nzTitle]` | 标题 | `string \| TemplateRef<void>` | - |
@@ -58,6 +59,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | nzMask | 是否展示遮罩 | `boolean` | `true` |
+| nzKeyboard | 是否支持键盘esc关闭 | `boolean` | `true` |
 | nzMaskStyle | 遮罩样式 | `object` | `{}` |
 | nzBodyStyle | Modal body 样式 | `object` | `{}` |
 | nzTitle | 标题 | `string \| TemplateRef<void>` | - |
@@ -84,16 +86,17 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- |
 | afterOpen | 打开之后的回调 | `Observable<void>` |
 | afterClose | 关闭之后的回调 | `Observable<R>` |
-| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
-| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
-| nzMask | 是否展示遮罩 | `boolean` | `true` |
-| nzMaskStyle | 遮罩样式 | `object` | `{}` |
-| nzBodyStyle | Modal body 样式 | `object` | `{}` |
-| nzTitle | 标题 | `string \| TemplateRef<void>` | - |
-| nzWidth | 宽度 | `number \| string` | `256` |
-| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
-| nzWrapClassName | 对话框外层容器的类名 | `string` | - |
-| nzZIndex| 设置 Drawer 的 `z-index` | `number` | `1000` |
-| nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| nzOffsetX | x 坐标移量(px) | `number` | `0` |
-| nzOffsetY | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` |
+| nzClosable | 是否显示右上角的关闭按钮 | `boolean` |
+| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` |
+| nzMask | 是否展示遮罩 | `boolean` |
+| nzMaskStyle | 遮罩样式 | `object` |
+| nzKeyboard | 是否支持键盘esc关闭 | `boolean` |
+| nzBodyStyle | Modal body 样式 | `object` |
+| nzTitle | 标题 | `string \| TemplateRef<void>` |
+| nzWidth | 宽度 | `number \| string` |
+| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` |
+| nzWrapClassName | 对话框外层容器的类名 | `string` |
+| nzZIndex| 设置 Drawer 的 `z-index` | `number` |
+| nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` |
+| nzOffsetX | x 坐标移量(px) | `number` |
+| nzOffsetY | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` |
diff --git a/components/drawer/nz-drawer-options.ts b/components/drawer/nz-drawer-options.ts
@@ -16,6 +16,7 @@ export interface NzDrawerOptionsOfComponent<T = any, D = any> {
   nzClosable?: boolean;
   nzMaskClosable?: boolean;
   nzMask?: boolean;
+  nzKeyboard?: boolean;
   nzNoAnimation?: boolean;
   nzTitle?: string | TemplateRef<{}>;
   nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type<T>;

diff --git a/components/drawer/nz-drawer-ref.ts b/components/drawer/nz-drawer-ref.ts
@@ -20,6 +20,7 @@ export abstract class NzDrawerRef<R = any> {
   abstract nzClosable: boolean;
   abstract nzNoAnimation: boolean;
   abstract nzMaskClosable: boolean;
+  abstract nzKeyboard: boolean;
   abstract nzMask: boolean;
   abstract nzTitle: string | TemplateRef<{}>;
   abstract nzPlacement: NzDrawerPlacement;

diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts
@@ -58,6 +58,7 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
   @Input() @InputBoolean() nzMaskClosable = true;
   @Input() @InputBoolean() nzMask = true;
   @Input() @InputBoolean() nzNoAnimation = false;
+  @Input() @InputBoolean() nzKeyboard: boolean = true;
   @Input() nzTitle: string | TemplateRef<{}>;
   @Input() nzPlacement: NzDrawerPlacement = 'right';
   @Input() nzMaskStyle: object = {};
@@ -265,7 +266,7 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
       this.overlayRef!.keydownEvents()
         .pipe(takeUntil(this.destroy$))
         .subscribe((event: KeyboardEvent) => {
-          if (event.keyCode === ESCAPE && this.isOpen) {
+          if (event.keyCode === ESCAPE && this.isOpen && this.nzKeyboard) {
             this.nzOnClose.emit();
           }
         });

diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts
@@ -120,6 +120,18 @@ describe('NzDrawerComponent', () => {
     expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(false);
   });
 
+  it('should disabled ESC keydown', () => {
+    component.open();
+    component.drawerComponent.nzKeyboard = false;
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+    component.close();
+    fixture.detectChanges();
+  });
+
   it('should close when click mask', () => {
     component.maskClosable = true;
     component.open();