feat(module:modal): support clicking ESC to close modal #2483

wenqi73 · 2018-11-20T04:14:22Z

close #1999

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

fix: test

codecov · 2018-11-20T04:26:22Z

Codecov Report

Merging #2483 into next will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #2483      +/-   ##
==========================================
+ Coverage   95.72%   95.73%   +0.01%     
==========================================
  Files         491      491              
  Lines       12245    12251       +6     
  Branches     1681     1682       +1     
==========================================
+ Hits        11721    11728       +7     
  Misses        153      153              
+ Partials      371      370       -1

Impacted Files	Coverage Δ
components/modal/nz-modal.component.ts	`95.85% <100%> (+0.1%)`	⬆️
components/layout/nz-sider.component.ts	`92.85% <0%> (+1.78%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f6361b6...9d5e304. Read the comment docs.

vthinkxie · 2018-11-24T12:18:44Z

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

@@ -46,6 +46,7 @@ title: Modal
 | nzCancelLoading   | 取消按钮 loading | boolean | false |
 | nzFooter          | 底部内容。<i>1. 仅在普通模式下有效。<br>2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮（详见案例或下方说明）。<br>3. 当不需要底部时，可以设为 null</i> | string<br>TemplateRef<br>ModalButtonOptions | 默认的确定取消按钮 |
 | nzGetContainer    | 指定 Modal 挂载的 HTML 节点 | HTMLElement<br>() => HTMLElement| 默认容器 |
+| nzKeyboard        | 是否支持键盘esc关闭 | boolean | true |


这个命名可能太宽泛了，从字面上很难看出来是支持esc关闭的含义

名字是从 ant-design 搬过来的

ok，那就保持一致

vthinkxie · 2018-11-24T12:19:24Z

components/modal/nz-modal.component.ts

@@ -108,6 +110,14 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
  @ViewChild('modalContainer') modalContainer: ElementRef;
  @ViewChild('bodyContainer', { read: ViewContainerRef }) bodyContainer: ViewContainerRef;

+  @Input() @InputBoolean() nzKeyboard: boolean = true;
+  @HostListener('keydown', [ '$event' ])
+  public onKeyDown(event: KeyboardEvent): void {


在组件内HostListener keydown 只能获得当modal处于focus状态的事件，可能需要更好的处理方式

* docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * chore: update styles(ant-design 3.10.8) (#2475) * feat: Adds danish locale (#2486) close #2485 * fix(module:menu): fix dropdown menu item selected className (#2434) close #2433 * fix(module:list): fix invalid render empty style when unspecified data source (#2415) close #2385 * docs(module:modal): add missing nzClassName property (#2400) * docs: add faq in icons docs (#2459) * fix(module:menu): fix fold menu (#2454) close #2449 * refactor(module:all): use cdk keycodes instead of magic number (#2499) * release(1.8.1): release 1.8.1 (#2523) * chore: update styles(ant-design 3.10.9) (#2525) * fix(readme): fix misspelling (#2472) * refactor(module:all): support Angular 7.0 (#2372) * refactor(module:all): refactor component to support onPush & SSR * refactor(module:badge): refactor badge * refactor(module:button & card): refactor * test(module:button): fix test case * fix(module:avatar): fix avatar * fix(module:tree): fix tree tslint * fix(module:tree): fix tree module * fix(module:all): fix tslint config * refactor(module:all): upgrade to angular 7.0 * fix(module:all): fix typescript error * fix(module:build): fix build less options * fix(module:integration): fix webpack test * build: rm unused package * build: fix build & ci * test(module:spin): fix test error * docs: update readme * refactor(module:checkbox): support checkbox onPush (#2478) * docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * refactor(module:checkbox): support checkbox onPush * refactor(module:collapse): support onPush in collapse (#2481) * refactor(module:divider): refactor divider (#2482) ref #2381 * refactor(module:form): refactor form (#2493) * refactor(module:grid): refactor grid module (#2498) * refactor(module:layout): refactor layout (#2500) * feat(module:progress): support custom strokeColor and strokeLinecap (#2404) close #2378 * feat(module:avatar): support custom size (#2416) close #2380 * fix(module:timeline): fix loading icon (#2386) close #2377 * feat(module:drawer): add input property in NzDrawerRef (#2464) close #2403 * refactor(module:radio): refactor radio to support OnPush (#2519) * refactor(module:spin): refactor spin (#2530) * refactor(module:alert & card): refactor card & refactor template outlet (#2532) * refactor(module:switch & checkbox): refactor switch & checkbox (#2533) * refactor(module:core): refactor input convert decorators (#2535) ref #2474 * refactor(module:mention): refactor mention (#2510) ref: #2381 * refactor(module:steps): refactor steps (#2512) ref #2381 * feat(module:modal): support clicking ESC to close modal (#2483) close #1999 * refactor(module:breadcrumb): refactor breadcrumb (#2513) ref #2381 * refactor(module:skeleton): refactor skeleton (#2514) ref #2381 * refactor(module:icon): refactor icon (#2517) ref #2381 * refactor(module:tree-select): refactor tree-select (#2528) ref: #2381 * build: bump webpack integration (#2524) build: bump webpack integration * refactor(module:timeline): refactor timeline (#2515) close #2379 * support alternate positions, alternate and right alternate * support reversing * refactor(module:autocomplete): refactor autocomplete (#2505) ref #2381, close #2420 * refactor(module:cascader): refactor cascader (#2516) * refactor(module:cascader): refactor cascader close #2935 ref #2198 * fix(module:cascader): fix isFocused access * refactor(module:avatar): refactor avatar (#2536) * fix(module:avatar): fix text style * refactor(module:avatar): refactor avatar ref: #2381 * refactor(module:upload): refactor upload (#2555) * refactor(module:upload): refactor upload - feat: add `nzOpenFileDialogOnClick` prop to allow setting whether to open the upload dialog when the component is clicked * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:list): refactor list (#2548) * refactor(module:list): refactor list * fix: import scrolling in share module * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:transfer): refactor transfer (#2553) * refactor(module:transfer): refactor transfer - feat: add nzDisabled property - need verify design details, ant-design/ant-design#13330 * chore: search muse be disabled * chore: add encapsulation:ViewEncapsulation.None ref #2381 * refactor(module:back-top): refactor back-top (#2547) refactor(module:back-top): refactor back-top * refactor(module:anchor): refactor anchor (#2546) * refactor(module:anchor): refactor anchor - feat: the nzTarget support string value - fix: invalid id in demo * chore: add encapsulation:ViewEncapsulation.None * chore: add encapsulation:ViewEncapsulation.None * chore: fix display style in host * chore: remove :host ref #2381 * refactor(module:affix): refactor affix (#2544) * refactor(module:affix): refactor affix - the nzTarget support string value * fix: release * style: removed no-any in first line * fix: fix style * chore: fix test * chore: fix display style in host * chore: remove :host

close NG-ZORRO#1999

feat(module:modal): support clicking ESC to close modal

866cba0

fix: test

wzhudev requested a review from wilsoncook November 20, 2018 04:26

vthinkxie reviewed Nov 24, 2018

View reviewed changes

vthinkxie added the PR::scissors: Need Better Solution label Nov 24, 2018

wenqi73 force-pushed the fix-modal branch from 6b4eec1 to e207ed4 Compare November 27, 2018 18:04

fix: move listener on document

9d5e304

wenqi73 force-pushed the fix-modal branch from e207ed4 to 9d5e304 Compare November 28, 2018 04:25

vthinkxie merged commit c72f431 into NG-ZORRO:next Nov 30, 2018

wenqi73 deleted the fix-modal branch January 28, 2019 08:17

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

feat(module:modal): support clicking ESC to close modal (NG-ZORRO#2483)

4ee644c

close NG-ZORRO#1999

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:modal): support clicking ESC to close modal #2483

feat(module:modal): support clicking ESC to close modal #2483

wenqi73 commented Nov 20, 2018

codecov bot commented Nov 20, 2018 •

edited

Loading

vthinkxie Nov 24, 2018

wenqi73 Nov 24, 2018

vthinkxie Nov 24, 2018

vthinkxie Nov 24, 2018

feat(module:modal): support clicking ESC to close modal #2483

feat(module:modal): support clicking ESC to close modal #2483

Conversation

wenqi73 commented Nov 20, 2018

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

codecov bot commented Nov 20, 2018 • edited Loading

Codecov Report

vthinkxie Nov 24, 2018

Choose a reason for hiding this comment

wenqi73 Nov 24, 2018

Choose a reason for hiding this comment

vthinkxie Nov 24, 2018

Choose a reason for hiding this comment

vthinkxie Nov 24, 2018

Choose a reason for hiding this comment

codecov bot commented Nov 20, 2018 •

edited

Loading