feat(module:image): nz-image add press left or right to switch im…

…age (#7321)

* feat(module:image): nz-image add press `left` or `right` to switch image

The nz-image add nzEnableLeftRightArrow to support press `left` or `right` to switch image

* feat(module:image): nz-image add press `left` or `right` to switch image

The nz-image add support press `left` or `right` to switch image

Co-authored-by: lxm23 <lxm2322@163.com>

components/image/doc/index.en-US.md

@@ -54,7 +54,7 @@ Other attributes [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| nzKeyboard      | Whether support press `esc` to close | `boolean` | `true` |
+| nzKeyboard      | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` |
 | nzMaskClosable      | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` |
 | nzCloseOnNavigation      | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` |
 | nzZIndex      | The z-index of the image preview | `number` | 1000 |

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

@@ -54,7 +54,7 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| nzKeyboard      | 是否支持键盘 esc 关闭 | `boolean` | `true` |
+| nzKeyboard      | 是否支持键盘 esc 关闭、左右键切换图片 | `boolean` | `true` |
 | nzMaskClosable      | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | nzCloseOnNavigation      | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` |
 | nzZIndex      | 设置预览层的 z-index | `number` | 1000 |

components/image/image-preview-ref.ts

@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { ESCAPE, hasModifierKey, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Subject } from 'rxjs';
 import { filter, take, takeUntil } from 'rxjs/operators';
@@ -21,10 +21,25 @@ export class NzImagePreviewRef {
   ) {
     overlayRef
       .keydownEvents()
-      .pipe(filter(event => (this.config.nzKeyboard as boolean) && event.keyCode === ESCAPE && !hasModifierKey(event)))
+      .pipe(
+        filter(
+          event =>
+            (this.config.nzKeyboard as boolean) &&
+            (event.keyCode === ESCAPE || event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW) &&
+            !hasModifierKey(event)
+        )
+      )
       .subscribe(event => {
         event.preventDefault();
-        this.close();
+        if (event.keyCode === ESCAPE) {
+          this.close();
+        }
+        if (event.keyCode === LEFT_ARROW) {
+          this.prev();
+        }
+        if (event.keyCode === RIGHT_ARROW) {
+          this.next();
+        }
       });
 
     overlayRef.detachments().subscribe(() => {

components/image/image.spec.ts

@@ -3,6 +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 { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement, NgModule, ViewChild } from '@angular/core';
 import {
@@ -27,7 +28,7 @@ import {
   ZoomOutOutline
 } from '@ant-design/icons-angular/icons';
 
-import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing';
+import { dispatchFakeEvent, dispatchKeyboardEvent } from 'ng-zorro-antd/core/testing';
 import { NzIconModule, NZ_ICONS } from 'ng-zorro-antd/icon';
 import {
   getFitContentPosition,
@@ -400,6 +401,19 @@ describe('Preview', () => {
       fixture.detectChanges();
       previewImageElement = getPreviewImageElement();
       expect(previewImageElement.src).toContain(images[1].src);
+
+      dispatchKeyboardEvent(overlayContainerElement, 'keydown', RIGHT_ARROW);
+      tickChanges();
+      previewImageElement = getPreviewImageElement();
+      expect(previewImageElement.src).toContain(images[1].src);
+      dispatchKeyboardEvent(overlayContainerElement, 'keydown', LEFT_ARROW);
+      tickChanges();
+      previewImageElement = getPreviewImageElement();
+      expect(previewImageElement.src).toContain(images[0].src);
+      dispatchKeyboardEvent(overlayContainerElement, 'keydown', RIGHT_ARROW);
+      tickChanges();
+      previewImageElement = getPreviewImageElement();
+      expect(previewImageElement.src).toContain(images[1].src);
     }));
   });