UNPKG

react-native-ui-lib

Version:

UI Components Library for React Native ###### Lateset version support RN44

122 lines (80 loc) • 5.34 kB
Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react); var _reactNative=require('react-native'); var _lodash=require('lodash');var _lodash2=_interopRequireDefault(_lodash); var _commons=require('../../commons'); var _view=require('../view');var _view2=_interopRequireDefault(_view); var _helpers=require('../../helpers'); var _CarouselPresenter=require('./CarouselPresenter');var presenter=_interopRequireWildcard(_CarouselPresenter);function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var Carousel=function(_BaseComponent){_inherits(Carousel,_BaseComponent); function Carousel(props){_classCallCheck(this,Carousel);var _this=_possibleConstructorReturn(this,(Carousel.__proto__||Object.getPrototypeOf(Carousel)).call(this, props)); _this.state={ currentPage:props.initialPage}; _this.onScroll=_this.onScroll.bind(_this); _this.updateOffset=_this.updateOffset.bind(_this);return _this; }_createClass(Carousel,[{key:'generateStyles',value:function generateStyles() { this.styles=createStyles(this.props); }},{key:'onScroll',value:function onScroll( event){var _this2=this; var offsetX=event.nativeEvent.contentOffset.x; if(offsetX>=0){var currentPage=this.state.currentPage; var newPage=presenter.calcPageIndex(offsetX,this.props); this.setState({ currentPage:newPage}, function(){ if(currentPage!==newPage){ _lodash2.default.invoke(_this2.props,'onChangePage',newPage,currentPage); } }); if(presenter.isOutOfBounds(offsetX,this.props)){ this.updateOffset(); } } }},{key:'updateOffset',value:function updateOffset() {var animated=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false; var x=presenter.calcOffset(this.props,this.state); this.carousel.scrollTo({x:x,animated:animated}); }},{key:'componentDidMount',value:function componentDidMount() {var _this3=this; setTimeout(function(){ _this3.updateOffset(); },_helpers.Constants.isIOS?0:50); }},{key:'cloneChild',value:function cloneChild( child){ if(!child.key){ return child; } return _react2.default.cloneElement(child,{ key:child.key+'-clone'}); }},{key:'renderChildren',value:function renderChildren() {var children=this.props.children; var length=presenter.getChildrenLength(this.props); return[ this.cloneChild(children[length-1])].concat(_toConsumableArray( children),[ this.cloneChild(children[0])]); }},{key:'render',value:function render() {var _this4=this;var containerStyle=this.props.containerStyle; return( _react2.default.createElement(_view2.default,{flex:true,style:containerStyle}, _react2.default.createElement(_reactNative.ScrollView,{ ref:function ref(scrollView){_this4.carousel=scrollView;}, horizontal:true, showsHorizontalScrollIndicator:false, pagingEnabled:true, onScroll:this.onScroll, scrollEventThrottle:200}, this.renderChildren()))); }},{key:'goToPage',value:function goToPage( pageIndex){var _this5=this;var animated=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true; this.setState({ currentPage:pageIndex}, function(){return _this5.updateOffset(animated);}); }}]);return Carousel;}(_commons.BaseComponent);Carousel.displayName='Carousel';Carousel.propTypes={initialPage:_react.PropTypes.number,pageWidth:_react.PropTypes.number,onChangePage:_react.PropTypes.func,containerStyle:_react.PropTypes.oneOfType([_react.PropTypes.object,_react.PropTypes.number,_react.PropTypes.array])};Carousel.defaultProps={initialPage:0,pageWidth:_helpers.Constants.screenWidth};exports.default=Carousel; function createStyles(){ return _reactNative.StyleSheet.create({}); }