Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Aug 9, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions components/drawer/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>` | - |
Expand Down Expand Up @@ -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>` | - |
Expand All @@ -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 changes: 16 additions & 13 deletions components/drawer/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>` | - |
Expand Down Expand Up @@ -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>` | - |
Expand All @@ -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` |
1 change: 1 addition & 0 deletions components/drawer/nz-drawer-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
1 change: 1 addition & 0 deletions components/drawer/nz-drawer-ref.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion components/drawer/nz-drawer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand Down Expand Up @@ -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();
}
});
Expand Down
12 changes: 12 additions & 0 deletions components/drawer/nz-drawer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down