ok

Author: kimown

react-swipeable/src/App.js

@@ -1,37 +1,8 @@
 import React, {Component} from "react";
-import SwipeableViews from "react-swipeable-views";
-import virtualize from "react-swipeable-views/lib/virtualize";
-import mod from "react-swipeable-views/lib/utils/mod";
-
-const EnhancedSwipeableViews = virtualize(SwipeableViews);
-
-const CONFIG = {
-    loop: true
-}
+import CustomAutoPlay from "./CustomAutoPlay";
 
 class App extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {index: 0};
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.timer);
-    }
-
-    timer = null;
-
-    slideRenderer = (params, children)=> {
-        let childrenLength = children.length;
-        const {index, key} = params;
-        if (mod(index, childrenLength) < childrenLength) {
-            return this.dealChild(children[mod(index, childrenLength)], key)
-        }
-        return null
-    }
-
-    middle = (params)=> {
+    render() {
         let children = [
             <div id="test">
                 {'slide n°0'}
@@ -42,79 +13,16 @@ class App extends Component {
             <div id="test">
                 {'slide n°2'}
             </div>,
+            <div id="test">
+                {'slide n°3'}
+            </div>,
         ];
 
-        return this.slideRenderer(params, children);
-    }
-
-
-    dealChild = (div, key)=> {
-        return <div key={key}>
-            {div}
-        </div>
-    }
-
-    componentDidMount() {
-        this.startInterval();
-    }
-
-
-    startInterval(interval = 2000) {
-        if (CONFIG.loop != true) {
-            return
-        }
-        clearInterval(this.timer);
-        this.timer = setInterval(this.handleInterval, interval);
-    }
-
-    handleInterval = () => {
-        const indexLatest = this.state.index;
-        //Todo use props.children.length
-        let indexNew = mod((indexLatest + 1), 3);
-        console.info('setTimer:indexNew' + indexNew)
-        this.setState({
-            index: indexNew,
-        });
-    };
-
-
-    onChangeIndex = (index, indexLatest)=> {
-        console.info('onChangeIndexindex:[' + index + "]===indexLatest[" + indexLatest + "]---this.state.index=[" + (this.state.index) + "]")
-        let stateIndex = this.state.index;
-        if ((index - indexLatest) > 0) {
-            stateIndex = (stateIndex + 1);
-        } else if ((index - indexLatest) < 0) {
-            stateIndex = (stateIndex - 1);
-        }
-        console.info('result===' + stateIndex + "mod=" + (mod(stateIndex, 3)));
-        this.setState({
-            index: stateIndex
-        })
-    }
-
-    handleSwitching = (index, type) => {
-        if (this.timer) {
-            console.error('clear timer');
-            clearInterval(this.timer);
-            this.timer = null;
-        } else if (type === 'end') {
-            console.error('start timer');
-            this.startInterval();
-        }
-
-        console.log('invoke handleSwitching');
-    };
-
-
-    render() {
-        let {index}=this.state;
-        return (
-            <EnhancedSwipeableViews
-                index={index}
-                onSwitching={this.handleSwitching}
-                onChangeIndex={this.onChangeIndex}
-                slideRenderer={this.middle}/>
-        );
+        return <CustomAutoPlay
+            children={children}
+            autoplay={true}
+            interval={3500}
+        />;
     }
 }
 

react-swipeable/src/autoplay.js renamed to react-swipeable/src/CustomAutoPlay.js

@@ -11,7 +11,7 @@ import mod from "react-swipeable-views/lib/utils/mod";
 const EnhancedSwipeableViews = virtualize(SwipeableViews);
 
 
-class App extends Component {
+class CustomAutoPlay extends Component {
 
     constructor(props) {
         super(props);
@@ -21,7 +21,7 @@ class App extends Component {
     static defaultProps = {
         autoplay: true,
         index: 0,
-        interval: 3000,
+        interval: 1000,
     };
 
     componentWillUnmount() {
@@ -78,9 +78,9 @@ class App extends Component {
     onChangeIndex = (index, indexLatest)=> {
         let stateIndex = this.state.index;
         if ((index - indexLatest) > 0) {
-            stateIndex = (stateIndex + 1);
+            stateIndex += 1;
         } else if ((index - indexLatest) < 0) {
-            stateIndex = (stateIndex - 1);
+            stateIndex -= 1;
         }
         this.setState({
             index: stateIndex
@@ -100,7 +100,6 @@ class App extends Component {
 
     render() {
         let {index}=this.state;
-        let {children, autoplay, interval}=this.props;
         return (
             <EnhancedSwipeableViews
                 index={index}
@@ -112,4 +111,4 @@ class App extends Component {
 }
 
 
-export default Autoplay;
+export default CustomAutoPlay;