upd

.babelrc

@@ -1,4 +1,13 @@
 {
-  "ignore": ["node-modules/**"],
-  "presets": ["env", "stage-2", "react"]
+  "ignore": ["node-modules"],
+  "presets": ["env", "react"],
+  "plugins": [ ["transform-object-rest-spread", { "useBuiltIns": true }], "transform-object-assign"],
+  "env": {
+    "test": {
+      "presets": [
+        ["env"], "react"
+      ],
+      "plugins": ["istanbul"]
+    }
+  }
 }

.editorconfig

@@ -0,0 +1,13 @@
+
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+root = true
+ [*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+ [*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,4 @@
+lib/*
+dist/*
+coverage/*
+node_modules/*

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     browser: true,
     commonjs: true,
     es6: true,
+    jest: true,
   },
   extends: [
     'eslint:recommended',

.gitignore

@@ -5,6 +5,17 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Build
+# lib
+# dist
+# examples/dist
+
+# Webstorm
+.idea/
+
+# VSCode
+.vscode/
+
 # Runtime data
 pids
 *.pid
@@ -69,3 +80,10 @@ typings/
 
 # next.js build output
 .next
+
+__test__/__snapshots__/
+
+.js.snap
+
+# MacOS generated file
+.DS_Store

.npmignore

@@ -0,0 +1 @@
+examples

.travis.yml

@@ -14,6 +14,7 @@ install:
   npm install --registry https://registry.npmjs.org
 
 script:
+  - npm run lint
   - npm run test
   # - npm run dev
   # - npm run build

README.md

@@ -2,6 +2,7 @@
 
 [![Build Status](https://travis-ci.org/guonanci/react-images-viewer.svg?branch=master)](https://travis-ci.org/guonanci/react-images-viewer)
 [![Coverage Status](https://coveralls.io/repos/github/guonanci/react-images-viewer/badge.svg?branch=master)](https://coveralls.io/github/guonanci/react-images-viewer?branch=master)
+[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
 
 A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.
 
@@ -68,6 +69,7 @@ const IMG_SET = [
   {
     src: 'http://example.com/img1.svg',
     caption: 'A forest',
+    // As an array
     srcSet: [
       'http://example.com/img1_1024.jpg 1024w',
       'http://example.com/img1_800.jpg 800w',
@@ -77,12 +79,8 @@ const IMG_SET = [
   },
   {
     src: 'http://example.com/img2.svg',
-    srcSet: [
-      'http://example.com/img2_1024.jpg 1024w',
-      'http://example.com/img2_800.jpg 800w',
-      'http://example.com/img2_500.jpg 500w',
-      'http://example.com/img2_320.jpg 320w'
-    ]
+    // As a string
+    srcSet: 'http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w',
   }
 ]
 ```
@@ -120,6 +118,6 @@ preventAutoScroll | bool | true | Determines whether auto-scrolling is prevented
 Property      | Type     | Default      | Description
 :----------|:----------|:----------|:----------
 src     | str     | undefined     | Required
-srcSet      | arr of str      | undefined     | Optional
+srcSet      | arr of str or str     | undefined     | Optional
 caption     | str     | undefined     | Optional
 alt     | str     | undefined     | Optional

README_CN.md

@@ -68,6 +68,7 @@ const IMG_SET = [
   {
     src: 'http://example.com/img1.svg',
     caption: 'A forest',
+    // As an array
     srcSet: [
       'http://example.com/img1_1024.jpg 1024w',
       'http://example.com/img1_800.jpg 800w',
@@ -77,12 +78,8 @@ const IMG_SET = [
   },
   {
     src: 'http://example.com/img2.svg',
-    srcSet: [
-      'http://example.com/img2_1024.jpg 1024w',
-      'http://example.com/img2_800.jpg 800w',
-      'http://example.com/img2_500.jpg 500w',
-      'http://example.com/img2_320.jpg 320w'
-    ]
+    // As a string
+    srcSet: 'http://example.com/img2_1024.jpg 1024w, http://example.com/img2_800.jpg 800w, http://example.com/img2_500.jpg 500w, http://example.com/img2_320.jpg 320w',
   }
 ]
 ```
@@ -120,6 +117,6 @@ preventAutoScroll | 布尔值 | true | 是否阻止自动滚动
 Property      | Type     | Default      | Description
 :----------|:----------|:----------|:----------
 src     | 字符串     | undefined     | 必须项
-srcSet      | 字符串数组     | undefined     | 可选项
+srcSet      | 字符串数组或者字符串     | undefined     | 可选项
 caption     | 字符串     | undefined     | 可选项
 alt     | 字符串     | undefined     | 可选项

__test__/Gallery.test.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import ImgsViewer from '../src/ImgsViewer'
+import { mount } from 'enzyme'
+
+const props1 = {
+  imgs: [
+    {
+      src: 'https://images.unsplash.com/photo-1526382551041-3c817fc3d478?dpr=2&auto=format&w=1024&h=1024'
+    },
+    {
+      src: 'https://images.unsplash.com/photo-1522985225914-17a10a58c8ec?dpr=2&auto=format&w=1024&h=1024',
+      caption: 'Photo by Blake Cheek',
+    }
+  ]
+}
+const props2 = {
+  imgs: [
+    {
+      src: 'https://images.unsplash.com/photo-1522931698295-e7b4d3e4188f?dpr=2&auto=format&w=1024&h=1024',
+      thumnail: 'https://images.unsplash.com/photo-1522931698295-e7b4d3e4188f?dpr=2&auto=format&crop=faces&fit=crop&w=300&h=300',
+    },
+    {
+      src: 'https://images.unsplash.com/photo-1482398650355-d4c6462afa0e?dpr=2&auto=format&w=1024&h=1024',
+      thumnail: 'https://images.unsplash.com/photo-1482398650355-d4c6462afa0e?dpr=2&auto=format&crop=faces&fit=crop&w=240&h=159',
+    }
+  ]
+}
+it('renders correctly',  () => {
+  const component = mount(
+    <ImgsViewer { ...props1 } />
+  )
+  component.setState({ isOpen: true })
+  expect(component).toMatchSnapshot()
+})
+it('renders with thumbnail correctly',  () => {
+  const component = mount(
+    <ImgsViewer { ...props2 } />
+  )
+  component.setState({ isOpen: true })
+  expect(component).toMatchSnapshot()
+})
+it('renders correctly after click',  () => {
+  const component = mount(
+    <ImgsViewer { ...props2 } />
+  )
+  component.setState({ isOpen: true })
+  setTimeout(() => {
+    component.find('figure').first() && component.find('figure').first().simulate('click')
+    expect(component).toMatchSnapshot()
+  }, 10000)
+})
+it('unmount',  () => {
+  const component = mount(
+    <ImgsViewer { ...props2 } />
+  )
+  component.setState({ isOpen: true })
+  component.unmount()
+})

__test__/jestsetup.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })

__test__/rafShim.js

@@ -0,0 +1 @@
+global.requestAnimationFrame = callback => setTimeout(callback, 0)

__test__/utils.test.js

@@ -0,0 +1,29 @@
+import { deepMerge, canUseDom, bindFunctions } from '../src/utils/util'
+
+describe('the deepMerge function', () => {
+  test('merge numb, stri in one level', () => expect(
+    deepMerge({ a: 1, b: 2 }, { a: '3', b: 4 })).toEqual({ a: '3', b: 4 })
+  )
+  test('replace str with arr', () => expect(
+    deepMerge({ a: 1 }, { a: ['3', 4] })).toEqual({ a: { 0: '3', 1: 4} })
+  )
+  test('replace arr with obj', () => expect(
+    deepMerge({ a: [1, 2] }, { a: { b: 1, c: '2' } })).toEqual({ a: { 0: 1, 1: 2, b: 1, c: '2' } })
+  )
+  test('replace arr with obj', () => expect(
+    deepMerge({ a: [1, 2] }, { a: { b: 1, c: '2' } })).toEqual({ a: { 0: 1, 1: 2, b: 1, c: '2' } })
+  )
+  test('replace obj with obj', () => expect(
+    deepMerge({ a: { b: 1 } }, { a: { b: '2' } })).toEqual({ a: { b: '2' } })
+  )
+  test('replace arr with arr', () => expect(
+    deepMerge({ a: [1] }, { a: { b: [2, 3] } })).toEqual({ a: { 0: 1, b: [2, 3] } })
+  )
+  test('replace obj with num', () => expect(
+    deepMerge({ a: 1 }, 2)).toEqual({ a: 1 })
+  )
+  test('replace num with num', () => expect(
+    deepMerge(1, 2)).toEqual({ })
+  )
+
+})

dist/react-images-viewer.es.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { css, StyleSheet } from 'aphrodite/no-important';
-import { CSSTransitionGroup } from 'react-transition-group';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { StyleSheet as StyleSheet$1, css as css$1 } from 'aphrodite';
 import ScrollLock from 'react-scrolllock';
@@ -431,6 +431,7 @@ var defaultStyles$3 = {
     position: 'relative',
     top: 0,
     verticalAlign: 'bottom',
+    zIndex: 1,
 
     // increase hit area
     height: 40,
@@ -721,7 +722,7 @@ var Portal = function (_Component) {
     value: function componentDidUpdate() {
       // Animate fade on mount/unmount
       var duration = 200;
-      var styles = '\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ' + duration + 'ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity ' + duration + 'ms; }\n\t\t';
+      var styles = '\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ' + duration + 'ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: .01; transition: opacity ' + duration + 'ms; }\n\t\t';
 
       render(React.createElement(
         'div',
@@ -731,12 +732,15 @@ var Portal = function (_Component) {
           null,
           styles
         ),
-        React.createElement(CSSTransitionGroup, _extends({
-          component: 'div',
-          transitionName: 'fade',
-          transitionEnterTimeout: duration,
-          transitionLeaveTimeout: duration
-        }, this.props))
+        React.createElement(
+          TransitionGroup,
+          this.props,
+          React.createElement(
+            CSSTransition,
+            { timeout: { enter: duration, exit: duration }, className: 'fade' },
+            this.props.children
+          )
+        )
       ), this.portalElement);
     }
   }, {
@@ -754,6 +758,11 @@ var Portal = function (_Component) {
   return Portal;
 }(Component);
 
+
+Portal.propTypes = {
+  children: PropTypes.element
+};
+
 var Spinner = function Spinner(props) {
   var classes = StyleSheet.create(styles(props));
 
@@ -873,8 +882,8 @@ var ImgsViewer = function (_Component) {
       }
       // preload currImg
       if (this.props.currImg !== nextProps.currImg || !this.props.isOpen && nextProps.isOpen) {
-        var img = this.preloadImg(nextProps.currImg, this.handleImgLoaded);
-        this.setState({ imgLoaded: img.complete });
+        var img = this.preloadImgData(nextProps.imgs[nextProps.currImg], this.handleImgLoaded);
+        if (img) this.setState({ imgLoaded: img.complete });
       }
 
       // add/remove event listeners
@@ -902,8 +911,11 @@ var ImgsViewer = function (_Component) {
   }, {
     key: 'preloadImg',
     value: function preloadImg(idx, onload) {
-      var data = this.props.imgs[idx];
-
+      return this.prelaodImgData(this.props.imgs[idx], onload);
+    }
+  }, {
+    key: 'preloadImgData',
+    value: function preloadImgData(data, onload) {
       if (!data) return;
 
       var img = new Image();
@@ -1205,7 +1217,6 @@ var ImgsViewer = function (_Component) {
 }(Component);
 
 ImgsViewer.propTypes = {
-  lang: PropTypes.string,
   backdropCloseable: PropTypes.bool,
   closeBtnTitle: PropTypes.string,
   currImg: PropTypes.number,
@@ -1214,7 +1225,7 @@ ImgsViewer.propTypes = {
   imgCountSeparator: PropTypes.string,
   imgs: PropTypes.arrayOf(PropTypes.shape({
     src: PropTypes.string.isRequired,
-    srcSet: PropTypes.array,
+    srcSet: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     thumbnail: PropTypes.string
   })).isRequired,
@@ -1239,7 +1250,6 @@ ImgsViewer.propTypes = {
   width: PropTypes.number
 };
 ImgsViewer.defaultProps = {
-  lang: 'zh_CN',
   closeBtnTitle: '关闭（空格键）',
   currImg: 0,
   enableKeyboardInput: true,
@@ -1291,7 +1301,8 @@ var defaultStyles$5 = {
 
     // opacity animation to make spinner appear with delay
     opacity: 0,
-    transition: 'opacity .3s'
+    transition: 'opacity .3s',
+    pointerEvents: 'none'
   },
   spinnerActive: {
     opacity: 1