From b97c98c3a5354c9c586c76f88182651796255d90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A1=BA=E5=A0=82?= <wuming.xiaowm@alibaba-inc.com>
Date: Tue, 30 Oct 2018 19:08:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md           |  9 +++++++++
 src/Viewer.jsx      | 16 ++++++++++------
 tests/Album.spec.js | 21 ++++++++++-----------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 4ef8e9d..0bf318a 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,7 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/
 
  With this method, the component can be used by calling `Album.show({src: 'foo/url'})` or `Album.show({photos: [<Photo src="#url1" />, <Photo src="#url2" />]})` directly.
 
+
 #### config
 
 | Name | Type | Required | Default | Comments |
@@ -104,3 +105,11 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/
 | getContainer | function | false | the function will append a new div to document body. | define the container which album rendered into |
 | showButton | boolean | no | false | show the function button(zoomIn/zoomOut) |
 | customButtons | { icon: ReactElement, onClick: function } \| Array<{ icon: ReactElement, onClick: function }> | no | [] | custom function buttons which would be put between zoomIn button and zoomOut button  |
+
+
+## Props
+| Name | Type |  Default | Comments |
+|---|---|---|---|---|
+| onChange | function(index) | | Callback method when change |
+| onOpen | function(index) | | Callback method when open |
+| onClose | function | | Callback method when close |
\ No newline at end of file
diff --git a/src/Viewer.jsx b/src/Viewer.jsx
index 474aaa2..4122ee4 100644
--- a/src/Viewer.jsx
+++ b/src/Viewer.jsx
@@ -97,15 +97,17 @@ class Viewer extends React.Component {
   }
 
   prev() {
-    const current = this.state.current;
+    const { current } = this.state;
     if (current === 0) return;
     this.setState({
       current: current - 1,
     });
+    const { onChange } = this.props;
+    onChange(current);
   }
 
   next() {
-    const current = this.state.current;
+    const { current } = this.state;
     let { children } = this.props;
     if (!Array.isArray(children)) {
       children = [children];
@@ -114,6 +116,8 @@ class Viewer extends React.Component {
     this.setState({
       current: current + 1,
     });
+    const { onChange } = this.props;
+    onChange(current);
   }
 
   handleImageZoomIn() {
@@ -244,10 +248,10 @@ Viewer.defaultProps = {
   hasControl: true,
   showButton: false,
   customButtons: [],
-  prev() {},
-  next() {},
-  onClose() {},
-  onSetCurrent() {},
+  prev() { },
+  next() { },
+  onClose() { },
+  onSetCurrent() { },
   enableKeyBoardControl: true,
   coordinate: null,
   current: 0,
diff --git a/tests/Album.spec.js b/tests/Album.spec.js
index 8765848..498d83c 100644
--- a/tests/Album.spec.js
+++ b/tests/Album.spec.js
@@ -36,13 +36,12 @@ function renderAlbumWithProps(props) {
       <Photo src="https://img.alicdn.com/imgextra/i2/290551947/TB1W.ZrLpXXXXbMXpXXXXXXXXXX_!!0-tstar.jpg" key={5} />
       <Photo src="https://img.alicdn.com/imgextra/i1/673400424/TB1Jze1KXXXXXcfXFXXXXXXXXXX_!!673400424-0-tstar.jpg" key={6} />
       <Photo src="https://img.alicdn.com/imgextra/i4/673400424/TB1d2PkKXXXXXbiXXXXXXXXXXXX_!!673400424-0-tstar.jpg" key={7} />
-    </Album>
+    </Album>,
   );
   return wrapper;
 }
 
 describe('Album', () => {
-
   describe('render', () => {
     it('should render correctly', (done) => {
       const wrapper = renderAlbumWithProps();
@@ -86,7 +85,7 @@ describe('Album', () => {
           showButton: true,
           customButtons: {
             icon: <Icon name="xiazai" />,
-            onClick: () => {}
+            onClick: () => { },
           },
         });
         expect(wrapper.find('.album-func-button-item').length).to.be(3);
@@ -98,13 +97,13 @@ describe('Album', () => {
           customButtons: [
             {
               icon: <Icon name="xiazai" />,
-              onClick: () => {},
+              onClick: () => { },
             },
             {
               icon: <Icon name="dayin" />,
-              onClick: () => {},
+              onClick: () => { },
             },
-          ]
+          ],
         });
         expect(wrapper.find('.album-func-button-item').length).to.be(4);
       });
@@ -174,7 +173,7 @@ describe('Album', () => {
 
   describe('api', () => {
     it('should open the album cover with calling api:Album.show', (done) => {
-      const container = mount(<div></div>);
+      const container = mount(<div />);
       Album.show({
         photos: [
           <Photo
@@ -189,13 +188,13 @@ describe('Album', () => {
         ],
         getContainer() {
           return container.instance();
-        }
+        },
       });
       expect(container.instance().children.length).to.be(1);
-      done()
+      done();
     });
     it('should work with config.src', (done) => {
-      const container = mount(<div></div>);
+      const container = mount(<div />);
       Album.show({
         src: '//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg',
         getContainer() {
@@ -206,4 +205,4 @@ describe('Album', () => {
       done();
     });
   });
-});
\ No newline at end of file
+});