From b5f82b51eed45f9bc7f7418c90185693887b202a Mon Sep 17 00:00:00 2001 From: amoycode Date: Wed, 20 Apr 2022 22:08:21 +0800 Subject: [PATCH] feat(module:image): nz-image add press `left` or `right` to switch image (#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 --- components/image/doc/index.en-US.md | 2 +- components/image/doc/index.zh-CN.md | 2 +- components/image/image-preview-ref.ts | 21 ++++++++++++++++++--- components/image/image.spec.ts | 16 +++++++++++++++- 4 files changed, 35 insertions(+), 6 deletions(-) diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md index 23cd944aa4..d18554af1e 100644 --- a/components/image/doc/index.en-US.md +++ b/components/image/doc/index.en-US.md @@ -54,7 +54,7 @@ Other attributes [](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 | diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index cf8bc98676..2e8abf22ed 100644 --- a/components/image/doc/index.zh-CN.md +++ b/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 | diff --git a/components/image/image-preview-ref.ts b/components/image/image-preview-ref.ts index ad0d9b018d..d1644fd259 100644 --- a/components/image/image-preview-ref.ts +++ b/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(() => { diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts index c446ce6bd1..8f2852fa7e 100644 --- a/components/image/image.spec.ts +++ b/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); })); });