feat(module:image): close image preview when escape key pressed (#8809)

Author: ParsaArvanehPA

components/image/image-preview.component.ts

@@ -5,12 +5,15 @@
 
 import { AnimationEvent } from '@angular/animations';
 import { CdkDrag, CdkDragEnd, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   NgZone,
   OnInit,
   ViewChild,
@@ -248,7 +251,8 @@ export class NzImagePreviewComponent implements OnInit {
     public nzConfigService: NzConfigService,
     public config: NzImagePreviewOptions,
     private destroy$: NzDestroyService,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    @Inject(DOCUMENT) private document: Document
   ) {
     this.zoom = this.config.nzZoom ?? this._defaultNzZoom;
     this.scaleStep = this.config.nzScaleStep ?? this._defaultNzScaleStep;
@@ -273,6 +277,17 @@ export class NzImagePreviewComponent implements OnInit {
         .subscribe(event => {
           this.ngZone.run(() => this.wheelZoomEventHandler(event));
         });
+
+      fromEvent<KeyboardEvent>(this.document, 'keydown')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          this.ngZone.run(() => {
+            if (event.keyCode === ESCAPE) {
+              this.onClose();
+              this.markForCheck();
+            }
+          });
+        });
     });
   }
 

components/image/image.spec.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { ESCAPE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement, NgModule, NgZone, ViewChild } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
@@ -463,6 +463,23 @@ describe('Preview', () => {
       expect(previewInstance['reCenterImage']).toHaveBeenCalled();
     }));
 
+    it('should close image preview when escape is pressed', fakeAsync(() => {
+      context.images = [{ src: QUICK_SRC }];
+      context.createUsingService();
+      const previewInstance = context.previewRef?.previewInstance!;
+      previewInstance.ngOnInit();
+      tickChanges();
+      spyOn(previewInstance, 'onClose');
+
+      const event: KeyboardEvent = new KeyboardEvent('keydown', {
+        keyCode: ESCAPE
+      });
+      document.dispatchEvent(event);
+      tick();
+
+      expect(previewInstance.onClose).toHaveBeenCalled();
+    }));
+
     it('should container click work', fakeAsync(() => {
       context.firstSrc = QUICK_SRC;
       fixture.detectChanges();