From 38062fb62a0f218a5fab92d8f61e2841cd9138ea Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Fri, 9 Aug 2019 12:17:19 +0800 Subject: [PATCH] feat(module:drawer): support `nzKeyboard` property (#3896) --- components/drawer/doc/index.en-US.md | 29 +++++++++++++----------- components/drawer/doc/index.zh-CN.md | 29 +++++++++++++----------- components/drawer/nz-drawer-options.ts | 1 + components/drawer/nz-drawer-ref.ts | 1 + components/drawer/nz-drawer.component.ts | 3 ++- components/drawer/nz-drawer.spec.ts | 12 ++++++++++ 6 files changed, 48 insertions(+), 27 deletions(-) diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md index 0e67c5aed8c..7e0ab44552a 100755 --- 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` | - | @@ -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` | - | | 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` | - | @@ -84,16 +86,17 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; | --- | --- | --- | | afterOpen | Callback called after open. | `Observable` | | afterClose | Callback called after close. | `Observable` | -| 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` | - | -| 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` | \ No newline at end of file +| 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` | +| 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` | \ No newline at end of file diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md index cba3bddde77..a82a688be2c 100755 --- 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` | - | @@ -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` | - | @@ -84,16 +86,17 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer'; | --- | --- | --- | | afterOpen | 打开之后的回调 | `Observable` | | afterClose | 关闭之后的回调 | `Observable` | -| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` | -| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | -| nzMask | 是否展示遮罩 | `boolean` | `true` | -| nzMaskStyle | 遮罩样式 | `object` | `{}` | -| nzBodyStyle | Modal body 样式 | `object` | `{}` | -| nzTitle | 标题 | `string \| TemplateRef` | - | -| 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` | \ No newline at end of file +| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | +| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | +| nzMask | 是否展示遮罩 | `boolean` | +| nzMaskStyle | 遮罩样式 | `object` | +| nzKeyboard | 是否支持键盘esc关闭 | `boolean` | +| nzBodyStyle | Modal body 样式 | `object` | +| nzTitle | 标题 | `string \| TemplateRef` | +| 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` | \ No newline at end of file diff --git a/components/drawer/nz-drawer-options.ts b/components/drawer/nz-drawer-options.ts index 8cce2b4d8d9..8925932cf0f 100644 --- a/components/drawer/nz-drawer-options.ts +++ b/components/drawer/nz-drawer-options.ts @@ -16,6 +16,7 @@ export interface NzDrawerOptionsOfComponent { nzClosable?: boolean; nzMaskClosable?: boolean; nzMask?: boolean; + nzKeyboard?: boolean; nzNoAnimation?: boolean; nzTitle?: string | TemplateRef<{}>; nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type; diff --git a/components/drawer/nz-drawer-ref.ts b/components/drawer/nz-drawer-ref.ts index 5a213d5a97f..7d0340f7294 100644 --- a/components/drawer/nz-drawer-ref.ts +++ b/components/drawer/nz-drawer-ref.ts @@ -20,6 +20,7 @@ export abstract class NzDrawerRef { 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 index c8c09b0a655..224688d0389 100644 --- a/components/drawer/nz-drawer.component.ts +++ b/components/drawer/nz-drawer.component.ts @@ -58,6 +58,7 @@ export class NzDrawerComponent extends NzDrawerRef @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 extends NzDrawerRef 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 index 14232a73041..e25181c3673 100644 --- 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();