From baed19269062cf1c06cfca5db6cb4927d37e593e Mon Sep 17 00:00:00 2001
From: JuZhao <zhaozhiyi@shouqianba.com>
Date: Tue, 21 May 2019 14:36:25 +0800
Subject: [PATCH] image-loop #comment Add switch for image loop.

---
 README.md                     |  1 +
 src/ViewerCore.tsx            |  4 ++++
 src/ViewerProps.ts            |  2 ++
 src/__tests__/viewer.test.tsx | 31 +++++++++++++++++++++++++++++--
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4adf7c0..af84488 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ class App extends React.Component<any, any> {
 | noLimitInitializationSize | boolean | false | no limit image initialization size | false |
 | defaultScale | number | 1 | set default scale | false |
 | onChange | (activeImage: [ImageDecorator](#imagedecorator), index: number) => void | - | callback when iamge change | false |
+| loop         | boolean      |  true   | whether enable image loop | false |
 
 ### ImageDecorator
 
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index f4b0aeb..d128322 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -49,6 +49,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     noResetZoomAfterChange: false,
     noLimitInitializationSize: false,
     defaultScale: 1,
+    loop: true,
   };
 
   private prefixCls: string;
@@ -242,6 +243,9 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
   }
 
   handleChangeImg = (newIndex: number) => {
+    if (!this.props.loop && (newIndex >= this.props.images.length || newIndex < 0)) {
+      return;
+    }
     if (newIndex >= this.props.images.length) {
       newIndex = 0;
     }
diff --git a/src/ViewerProps.ts b/src/ViewerProps.ts
index f61f901..008ed1a 100644
--- a/src/ViewerProps.ts
+++ b/src/ViewerProps.ts
@@ -50,6 +50,8 @@ interface ViewerProps {
   onMaskClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   /** 是否显示下载按钮 */
   downloadable?: boolean;
+  /** 图片是否可循环 */
+  loop?: boolean;
 
   // no render close button
   noClose?: boolean;
diff --git a/src/__tests__/viewer.test.tsx b/src/__tests__/viewer.test.tsx
index 101e63e..0e5c158 100644
--- a/src/__tests__/viewer.test.tsx
+++ b/src/__tests__/viewer.test.tsx
@@ -337,7 +337,7 @@ describe('Viewer', () => {
     expect(newTransformValue.translateY - oldTransformValue.translateY).toBe(50);
   });
 
-  it('change active iamge whith prev and next button', () => {
+  it('change active image with prev and next button', () => {
     viewerHelper.new();
     viewerHelper.open();
 
@@ -530,7 +530,7 @@ describe('Viewer', () => {
     triggerKeyboard(document, 'keydown', 39, true);
     expect(getTransformValue(imgNode.style.transform).rotate).toBe('0');
 
-    // reset 
+    // reset
     triggerKeyboard(document, 'keydown', 39, true);
     triggerKeyboard(document, 'keydown', 49, true);
     viewerHelper.skipAnimation();
@@ -676,4 +676,31 @@ describe('Viewer', () => {
       src: expect.any(String),
     }), 1);
   });
+
+  it('change image with no loop', () => {
+    viewerHelper.new({
+      loop: false,
+    });
+    viewerHelper.open();
+
+    $$('li[data-key=next]')[0].click();
+    $$('li[data-key=next]')[0].click();
+    expect($$('.react-viewer-attribute')[0].innerHTML).toContain('mountain');
+
+    $$('li[data-key=prev]')[0].click();
+    $$('li[data-key=prev]')[0].click();
+    expect($$('.react-viewer-attribute')[0].innerHTML).toContain('lake');
+
+    // next
+    triggerKeyboard(document, 'keydown', 39);
+    triggerKeyboard(document, 'keydown', 39);
+    viewerHelper.skipAnimation();
+    expect($$('.react-viewer-attribute')[0].innerHTML).toContain('mountain');
+
+    // prev
+    triggerKeyboard(document, 'keydown', 37);
+    triggerKeyboard(document, 'keydown', 37);
+    viewerHelper.skipAnimation();
+    expect($$('.react-viewer-attribute')[0].innerHTML).toContain('lake');
+  });
 });