Skip to content

Commit

Permalink
feat(module:image): nz-image add press left or right to switch im…
Browse files Browse the repository at this point in the history
…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>
  • Loading branch information
amoycode and lxm23 authored Apr 20, 2022
1 parent 7f3c4e1 commit b5f82b5
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 6 deletions.
2 changes: 1 addition & 1 deletion components/image/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
2 changes: 1 addition & 1 deletion components/image/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
21 changes: 18 additions & 3 deletions components/image/image-preview-ref.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(() => {
Expand Down
16 changes: 15 additions & 1 deletion components/image/image.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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);
}));
});

Expand Down

0 comments on commit b5f82b5

Please sign in to comment.