diff --git a/dist/index.js b/dist/index.js index dc57445..58d2bb4 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,9 @@ 'use strict'; +/* +react-native-swiper + +@author leecade + */ 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 - */ - 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, diff --git a/examples/examples/dynamic.js b/examples/examples/dynamic.js new file mode 100644 index 0000000..452f24a --- /dev/null +++ b/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( + + {this.state.items.map(function(item){ + return ( + + {item.title} + + ); + })} + + ); + } +}) + +module.exports = swiper + diff --git a/src/index.js b/src/index.js index 6cf7a2b..0dd5e28 100644 --- a/src/index.js +++ b/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() },