cancel state

Author: kimown

react-swipeable/src/App.js

@@ -1,9 +1,17 @@
 import React, {Component} from "react";
 import CustomAutoPlay from "./CustomAutoPlay";
+import mod from "react-swipeable-views/lib/utils/mod";
+
 
 class App extends Component {
-    render() {
-        let children = [
+
+    constructor(props) {
+        super(props);
+        this.state = {index: 0};
+    }
+
+    static defaultProps = {
+        children: [
             <div id="test">
                 {'slide n°0'}
             </div>,
@@ -16,27 +24,48 @@ class App extends Component {
             <div id="test">
                 {'slide n°3'}
             </div>,
-        ];
+        ]
+    };
 
-        return(
+    render() {
+        let {children} = this.props;
+        let {index}=this.state;
+        return (
             <div>
                 <CustomAutoPlay
                     ref="customAutoplay"
                     children={children}
                     autoplay={false}
                     interval={3500}
-                    changeIndexCallBack={(index)=>{
-                        console.debug(index);
+                    index={index}
+                    changeIndexCallBack={(index)=> {
+                        this.setIndex(index);
+                        console.info("changing index"+index);
                     }}
                 />
-                <div className="button" onClick={this._click}>Click Me</div>
+                <div className="button" onClick={this._click.bind(this, +1)}>Click Me++++</div>
+                <div className="button" onClick={this._click.bind(this, +1)}>{"index=" + index}</div>
+                <div className="button" onClick={this._click.bind(this, -1)}>Click Me----</div>
+
             </div>
         );
     }
 
-    _click=()=>{
-        this.refs.customAutoplay.changeIndex(2)
+    setIndex = (index)=> {
+        this.setState({index})
+    }
+
+    _click = (number)=> {
+        let {children} = this.props;
+        let childrenLength = children.length;
+
+        let index = mod(this.state.index + number, childrenLength)
+        this.setState({
+            index: index
+        })
     }
+
+
 }
 
 export default App;

react-swipeable/src/CustomAutoPlay.js

@@ -17,7 +17,6 @@ class CustomAutoPlay extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {index: 0};
     }
 
     static defaultProps = {
@@ -27,6 +26,7 @@ class CustomAutoPlay extends Component {
     };
 
     shouldComponentUpdate(nextProps, nextState) {
+        console.log('begin compare');
         return shallowCompare(this, nextProps, nextState);
     }
 
@@ -72,15 +72,15 @@ class CustomAutoPlay extends Component {
     }
 
     handleInterval = () => {
-        let indexLatest = this.state.index;
+        let indexLatest = this.props.index;
         let {children}=this.props;
         let indexNew = mod((indexLatest + 1), children.length);
         this.changeIndex(indexNew)
     };
 
 
     onChangeIndex = (index, indexLatest)=> {
-        let stateIndex = this.state.index;
+        let stateIndex = this.props.index;
         if ((index - indexLatest) > 0) {
             stateIndex += 1;
         } else if ((index - indexLatest) < 0) {
@@ -102,18 +102,15 @@ class CustomAutoPlay extends Component {
     changeIndex = (index)=> {
         let {children}=this.props;
         let childrenLength = children.length;
-        index = mod(index, childrenLength)
-        this.setState({
-            index: index
-        })
+        index = mod(index, childrenLength);
         let {changeIndexCallBack}=this.props;
         changeIndexCallBack && changeIndexCallBack(index)
 
     }
 
 
     render() {
-        let {index}=this.state;
+        let {index}=this.props;
         return (
             <EnhancedSwipeableViews
                 index={index}