feat: add defaultSize prop

src/ViewerCore.tsx

@@ -135,8 +135,18 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     return [width, height];
   }
 
-  loadImgSuccess = (imgWidth, imgHeight) => {
-    const [width, height] = this.getImgWidthHeight(imgWidth, imgHeight);
+  loadImgSuccess = (activeImage: ImageDecorator, imgWidth, imgHeight) => {
+    let realImgWidth = imgWidth;
+    let realImgHeight = imgHeight;
+    if (this.props.defaultSize) {
+      realImgWidth = this.props.defaultSize.width;
+      realImgHeight = this.props.defaultSize.height;
+    }
+    if (activeImage.defaultSize) {
+      realImgWidth = activeImage.defaultSize.width;
+      realImgHeight = activeImage.defaultSize.height;
+    }
+    const [width, height] = this.getImgWidthHeight(realImgWidth, realImgHeight);
     let left = (this.containerWidth - width) / 2;
     let top = (this.containerHeight - height - this.footerHeight) / 2;
     this.setState({
@@ -154,10 +164,10 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
   }
 
   loadImg(activeIndex, firstLoad: boolean = false) {
-    let imgSrc = '';
+    let activeImage: ImageDecorator = null;
     let images = this.props.images || [];
     if (images.length > 0) {
-      imgSrc = images[activeIndex].src;
+      activeImage = images[activeIndex];
     }
     let loadComplete = false;
     let img = new Image();
@@ -167,7 +177,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     });
     img.onload = () => {
       if (!loadComplete) {
-        this.loadImgSuccess(img.width, img.height);
+        this.loadImgSuccess(activeImage, img.width, img.height);
       }
     };
     img.onerror = () => {
@@ -178,10 +188,10 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         loading: false,
       });
     };
-    img.src = imgSrc;
+    img.src = activeImage.src;
     if (img.complete) {
       loadComplete = true;
-      this.loadImgSuccess(img.width, img.height);
+      this.loadImgSuccess(activeImage, img.width, img.height);
     }
   }
 

src/ViewerProps.ts

@@ -1,7 +1,13 @@
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
 export interface ImageDecorator {
   src: string;
   alt?: string;
   downloadUrl?: string;
+  defaultSize?: ImageSize;
 }
 
 export interface ToolbarConfig {
@@ -62,6 +68,8 @@ interface ViewerProps {
 
   // zoom speed
   zoomSpeed?: number;
+
+  defaultSize?: ImageSize;
 }
 
 export default ViewerProps;

src/__tests__/viewer.test.tsx

@@ -332,7 +332,7 @@ describe('Viewer', () => {
   });
 
   it('change active iamge whith prev and next button', () => {
-    viewerHelper.open();
+    viewerHelper.new();
     viewerHelper.open();
 
     $$('li[data-key=next]')[0].click();
@@ -530,4 +530,37 @@ describe('Viewer', () => {
     imgNode = $$('img.react-viewer-image')[0];
     expect(getTransformValue(imgNode.style.transform).rotate).toBe('0');
   });
+
+  it('set default size', () => {
+    viewerHelper.new({
+      downloadable: true,
+      defaultSize: {
+        width: 100,
+        height: 100,
+      },
+      images: [{
+        src: img,
+        alt: 'lake',
+        downloadUrl: '',
+      }, {
+        src: img2,
+        alt: 'mountain',
+        downloadUrl: '',
+        defaultSize: {
+          width: 200,
+          height: 200,
+        },
+      }],
+    });
+    viewerHelper.open();
+
+    let imgNode = $$('img.react-viewer-image')[0];
+    expect(imgNode.style.width).toBe('100px');
+    expect(imgNode.style.width).toBe('100px');
+
+    $$('li[data-key=next]')[0].click();
+    imgNode = $$('img.react-viewer-image')[0];
+    expect(imgNode.style.width).toBe('200px');
+    expect(imgNode.style.width).toBe('200px');
+  });
 });