Skip to content
Permalink
Browse files

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

  • Loading branch information...
hsuanxyz authored and wendzhue committed Aug 9, 2019
1 parent ab4bcbe commit 38062fb62a0f218a5fab92d8f61e2841cd9138ea
@@ -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` |
@@ -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` |
@@ -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>;
@@ -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;
@@ -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();
}
});
@@ -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();

0 comments on commit 38062fb

Please sign in to comment.
You can’t perform that action at this time.