upate

uxcore · Oct 30, 2018 · 5c53c0e · 5c53c0e
1 parent ff31cae
commit 5c53c0e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,8 @@ Yes please! See the [CONTRIBUTING](https://github.com/uxcore/uxcore/blob/master/
 | src | string | false | null | the image src |
 | photos | array of `Photo` | false | [] | array of Photo element |
 | getContainer | function | false | the function will append a new div to document body. | define the container which album rendered into |
+| onChnage | function(index) | false |  | Callback method when change |
+| onClose | function() | false | | Callback method when close |
 | 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  |
 
diff --git a/demo/AlbumDemo.jsx b/demo/AlbumDemo.jsx
@@ -40,6 +40,12 @@ export default class Demo extends React.Component {
 
   onClickMultiple() {
     Album.show({
+      onChange: (index) => {
+        console.log('onChange', index);
+      },
+      onClose: () => {
+        console.log('close');
+      },
       photos: [
         <Photo
           src="//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg"
@@ -75,9 +81,9 @@ export default class Demo extends React.Component {
           thumbPlacement="right"
           thumbBackground="#000"
           ref={(album) => { this.album = album; }}
-          onChange={(index) => { console.log('onChange', index); }}
-          onOpen={(index) => { console.log('onOpen', index); }}
-          onClose={() => { console.log('onClose'); }}
+          // onChange={(index) => { console.log('onChange', index); }}
+          // onOpen={(index) => { console.log('onOpen', index); }}
+          // onClose={() => { console.log('onClose'); }}
         >
           <Photo
             src="//img.alicdn.com/imgextra/i2/927018118/TB13fBjKFXXXXbPXpXXXXXXXXXX_!!0-tstar.jpg"

diff --git a/src/Album.jsx b/src/Album.jsx
@@ -91,8 +91,10 @@ class Album extends React.Component {
     if (current === 0) return;
     this.setState({
       current: current - 1,
+    }, () => {
+      this.handleChange();
     });
-    this.handleChange();
+
   }
 
   next() {
@@ -104,8 +106,9 @@ class Album extends React.Component {
     if (current === children.length - 1) return;
     this.setState({
       current: current + 1,
+    }, () => {
+      this.handleChange();
     });
-    this.handleChange();
   }
 
   openAlbum() {
@@ -349,6 +352,25 @@ Album.show = (option = {}) => {
     hasControl = true;
   }
 
+  /**
+   * 切换
+   * @param {Number} index
+   */
+  const handleChange = (index) => {
+    if (typeof config.onChange === 'function') {
+      config.onChange(index);
+    }
+  }
+
+  /**
+   * 关闭
+   */
+  const handleCloce = () => {
+    if (typeof config.onClose === 'function') {
+      config.onClose();
+    }
+  }
+
   const prefixCls = option.prefixCls || 'kuma-uxcore-album';
 
   ReactDOM.render(
@@ -367,12 +389,14 @@ Album.show = (option = {}) => {
       >
         <Viewer
           onClose={() => {
+            handleCloce();
             document.body.removeChild(container);
           }}
           current={config.current}
           hasControl={hasControl}
           showButton={config.showButton}
           customButtons={config.customButtons}
+          onChange={handleChange}
         >
           {photos}
         </Viewer>

diff --git a/src/Carousel.jsx b/src/Carousel.jsx
@@ -160,7 +160,9 @@ class Carousel extends React.Component {
                   className={classnames('item', current === i ? 'active' : '')}
                   key={`c-${i}`}
                   onClick={() => {
-                    onChange(i);
+                    if (typeof onChange === 'function') {
+                      onChange(i);
+                    }
                     onSetCurrent(i);
                   }}
                 >

diff --git a/src/Photo.jsx b/src/Photo.jsx
@@ -9,7 +9,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default class Photo extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {};

diff --git a/src/Viewer.jsx b/src/Viewer.jsx
@@ -9,9 +9,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon from 'uxcore-icon';
+import { polyfill } from 'react-lifecycles-compat';
 import Carousel from './Carousel';
 import { transformOriginProperty } from './transform-detect';
-import { polyfill } from 'react-lifecycles-compat';
 
 class Viewer extends React.Component {
   static stage = undefined;
@@ -101,9 +101,7 @@ class Viewer extends React.Component {
     if (current === 0) return;
     this.setState({
       current: current - 1,
-    });
-    const { onChange } = this.props;
-    onChange(current);
+    }, this.handleChange.bind(this));
   }
 
   next() {
@@ -115,9 +113,18 @@ class Viewer extends React.Component {
     if (current === children.length - 1) return;
     this.setState({
       current: current + 1,
-    });
+    }, this.handleChange.bind(this));
+  }
+
+  handleChange(index) {
     const { onChange } = this.props;
-    onChange(current);
+    let { current } = this.state;
+    if (index !== undefined) {
+      current = index;
+    }
+    if (typeof onChange === 'function') {
+      onChange(current);
+    }
   }
 
   handleImageZoomIn() {
@@ -154,6 +161,7 @@ class Viewer extends React.Component {
         onPrev={this.prev}
         onNext={this.next}
         onSetCurrent={this.setCurrent}
+        onChange={this.handleChange.bind(this)}
         inView
       >
         {this.props.children}
@@ -181,7 +189,10 @@ class Viewer extends React.Component {
               key={i}
               className="album-func-button-item"
               onClick={onClick}
-            >{icon}</div>
+            >
+              {icon}
+
+            </div>
           ))
         }
         <div
@@ -197,7 +208,9 @@ class Viewer extends React.Component {
 
   render() {
     const { current } = this.state;
-    const { children, hasControl, onClose, open, showButton } = this.props;
+    const {
+      children, hasControl, onClose, open, showButton
+    } = this.props;
     const prevDisabled = current === 0;
     const nextDisabled = current === children.length - 1;
     return (
@@ -235,7 +248,9 @@ class Viewer extends React.Component {
 }
 
 const createCustomButtonsChecker = () => {
-  const { oneOfType, arrayOf, shape, element, func } = PropTypes;
+  const {
+    oneOfType, arrayOf, shape, element, func
+  } = PropTypes;
   const objectType = shape({
     icon: element.isRequired,
     onClick: func.isRequired,