image-loop #comment Add switch for image loop.

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
 

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;
     }

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;

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');
+  });
 });