Merge branch 'Cox-Automotive-master'

dist/index.js

@@ -1,4 +1,9 @@
 'use strict';
+/*
+react-native-swiper
+
+@author leecade<leecade@163.com>
+ */
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
@@ -7,22 +12,16 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-/*
-react-native-swiper
-
-@author leecade<leecade@163.com>
- */
-
 var _reactNative = require('react-native');
 
-var _reactNative2 = _interopRequireDefault(_reactNative);
-
 // Using bare setTimeout, setInterval, setImmediate
 // and requestAnimationFrame calls is very dangerous
 // because if you forget to cancel the request before
 // the component is unmounted, you risk the callback
 // throwing an exception.
 
+var _reactNative2 = _interopRequireDefault(_reactNative);
+
 var _reactTimerMixin = require('react-timer-mixin');
 
 var _reactTimerMixin2 = _interopRequireDefault(_reactTimerMixin);
@@ -33,13 +32,12 @@ var _Dimensions2 = _interopRequireDefault(_Dimensions);
 
 var _Dimensions$get = _Dimensions2['default'].get('window');
 
-var width = _Dimensions$get.width;
-var height = _Dimensions$get.height;
-
 /**
  * Default styles
  * @type {StyleSheetPropType}
  */
+var width = _Dimensions$get.width;
+var height = _Dimensions$get.height;
 var styles = _reactNative.StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
@@ -177,21 +175,12 @@ exports['default'] = _reactNative2['default'].createClass({
       autoplayEnd: false
     };
 
-    initState.total = props.children ? props.children.length || 1 : 0;
-
-    initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0;
-
     // Default: horizontal
     initState.dir = props.horizontal == false ? 'y' : 'x';
     initState.width = props.width || width;
     initState.height = props.height || height;
     initState.offset = {};
 
-    if (initState.total > 1) {
-      var setup = props.loop ? 1 : initState.index;
-      initState.offset[initState.dir] = initState.dir == 'y' ? initState.height * setup : initState.width * setup;
-    }
-
     return initState;
   },
 
@@ -205,6 +194,23 @@ exports['default'] = _reactNative2['default'].createClass({
     this.props = this.injectState(this.props);
   },
 
+  componentWillReceiveProps: function componentWillReceiveProps(newProps) {
+    var newState = {};
+
+    newState.total = newProps.children ? newProps.children.length || 1 : 0;
+
+    newState.index = newState.total > 1 ? Math.min(this.props.index, newState.total - 1) : 0;
+
+    newState.offset = {};
+
+    if (newState.total > 1) {
+      var setup = this.props.loop ? 1 : newState.index;
+      newState.offset[this.state.dir] = this.state.dir == 'y' ? this.state.height * setup : this.state.width * setup;
+    }
+
+    this.setState(newState);
+  },
+
   componentDidMount: function componentDidMount() {
     this.autoplay();
   },
@@ -513,7 +519,7 @@ exports['default'] = _reactNative2['default'].createClass({
         }] },
       _reactNative2['default'].createElement(
         _reactNative.ScrollView,
-        _extends({ ref: 'scrollView'
+        _extends({ ref: "scrollView"
         }, props, {
           contentContainerStyle: [styles.wrapper, props.style],
           contentOffset: state.offset,

examples/examples/dynamic.js

@@ -0,0 +1,65 @@
+var React = require('react-native')
+var Swiper = require('./')
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React
+
+var styles = StyleSheet.create({
+  wrapper: {
+  },
+  slide1: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#9DD6EB',
+  },
+  slide2: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#97CAE5',
+  },
+  slide3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#92BBD9',
+  },
+  text: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: 'bold',
+  }
+})
+
+var swiper = React.createClass({
+  getInitialState: function() {
+    return {
+      items: []
+    };
+  },
+  componentDidMount: function() {
+    this.setState({
+      items: [ { title: 'Hello Swiper', css: styles.slide1 }, { title: 'Beautiful', css: styles.slide2 }, 
+        { title: 'And simple', css: styles.slide3 } ]
+    });
+  },
+  render: function() {
+    return(
+      <Swiper showsButtons={true}>
+        {this.state.items.map(function(item){
+          return (
+            <View style={item.css}>
+              <Text style={styles.text}>{item.title}</Text>
+            </View>
+          );         
+        })}
+      </Swiper>
+    );
+  }
+})
+
+module.exports = swiper
+

src/index.js

@@ -162,27 +162,12 @@ export default React.createClass({
       autoplayEnd: false,
     }
 
-    initState.total = props.children
-      ? (props.children.length || 1)
-      : 0
-
-    initState.index = initState.total > 1
-      ? Math.min(props.index, initState.total - 1)
-      : 0
-
     // Default: horizontal
     initState.dir = props.horizontal == false ? 'y' : 'x'
     initState.width = props.width || width
     initState.height = props.height || height
     initState.offset = {}
 
-    if(initState.total > 1) {
-      let setup = props.loop ? 1 : initState.index
-      initState.offset[initState.dir] = initState.dir == 'y'
-        ? initState.height * setup
-        : initState.width * setup
-    }
-
     return initState
   },
 
@@ -196,6 +181,29 @@ export default React.createClass({
     this.props = this.injectState(this.props)
   },
 
+  componentWillReceiveProps(newProps) {
+    let newState = {}
+
+    newState.total = newProps.children
+      ? (newProps.children.length || 1)
+      : 0
+
+    newState.index = newState.total > 1
+      ? Math.min(this.props.index, newState.total - 1)
+      : 0
+
+    newState.offset = {}
+
+    if(newState.total > 1) {
+      let setup = this.props.loop ? 1 : newState.index
+      newState.offset[this.state.dir] = this.state.dir == 'y'
+        ? this.state.height * setup
+        : this.state.width * setup
+    }
+
+    this.setState(newState);
+  },
+
   componentDidMount() {
     this.autoplay()
   },