@cake-fxd/rn-case/lib/ChpaterCase/ChapterCaseScroll.js

ReactNative Case

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _Portal=require("@cake-fxd/rn-elements/lib/Portal");var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _CoverCase=_interopRequireDefault(require("../CoverCase"));var _config=require("../util/config");var _px2dp=_interopRequireDefault(require("../util/px2dp"));var _ChpaterItem=_interopRequireDefault(require("./lib/ChpaterItem"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Date.prototype.toString.call(Reflect.construct(Date,[],function(){}));return true;}catch(e){return false;}}var ChapterCaseScroll=function(_React$Component){(0,_inherits2["default"])(ChapterCaseScroll,_React$Component);var _super=_createSuper(ChapterCaseScroll);function ChapterCaseScroll(){var _this;(0,_classCallCheck2["default"])(this,ChapterCaseScroll);_this=_super.apply(this,arguments);_this.ref=_react["default"].createRef();_this.lastX=0;_this.page=0;_this.state={isScrolling:false};_this.timer=null;_this.onMomentumScrollEnd=function(e){var _a,_b;var x=e.nativeEvent.contentOffset.x;var page=Math.ceil(x/_config.WIDTH);_this.page=page;(_b=(_a=_this.props).onPageChange)===null||_b===void 0?void 0:_b.call(_a,_this.page);if(_this.timer){clearTimeout(_this.timer);}_this.timer=setTimeout(function(){_this.handleScroll(false);clearTimeout(_this.timer);_this.timer=null;},1000);};_this.animateScroll=function(x){var _a;(_a=_this.ref.current)===null||_a===void 0?void 0:_a.scrollTo({x:x});};_this.handleScroll=function(isScroll){_this.setState({isScrolling:isScroll});};_this.onTouchStart=function(event){_this.handleScroll(true);var chapterTotal=_this.props.chapters.length;if(_this.page>0&&_this.page<chapterTotal+1){return;}_this.lastX=event.nativeEvent.pageX;};_this.onTouchEnd=function(event){var direction=_this.getPullDirection(event);var chapterTotal=_this.props.chapters.length;var total=chapterTotal+2;if(_this.page>0&&_this.page<chapterTotal+1){return;}var isPullLeft=direction==='left';var isPullRight=direction==='right';if(isPullLeft&&_this.page<total){var nextPage=++_this.page;_this.animateScroll(nextPage*_config.WIDTH);}if(isPullRight&&_this.page>0){var prevPage=--_this.page;_this.animateScroll(prevPage*_config.WIDTH);}};_this.getPullDirection=function(event){var direction='';var releaseX=event.nativeEvent.pageX;if(releaseX>_this.lastX){direction='right';}else{direction='left';}return direction;};return _this;}(0,_createClass2["default"])(ChapterCaseScroll,[{key:"render",value:function render(){var _this2=this;var props=this.props;return _react["default"].createElement(_reactNativeSafeAreaContext.SafeAreaContext.Consumer,null,function(context){var _a;return _react["default"].createElement(_reactNative.View,{style:{flex:1,paddingTop:(0,_px2dp["default"])(124)-((_a=context===null||context===void 0?void 0:context.top)!==null&&_a!==void 0?_a:0),backgroundColor:'#FFF9EC'}},_react["default"].createElement(_reactNativeGestureHandler.ScrollView,{horizontal:true,style:{flex:1},pagingEnabled:true,ref:_this2.ref,scrollEnabled:false,showsHorizontalScrollIndicator:false,bounces:false,onTouchStart:_this2.onTouchStart,onMomentumScrollEnd:_this2.onMomentumScrollEnd,onTouchEnd:_this2.onTouchEnd},_react["default"].createElement(_CoverCase["default"],(0,_extends2["default"])({},props.cover,{position:0,isScrolling:_this2.state.isScrolling})),props.chapters.map(function(item,index){return _react["default"].createElement(_ChpaterItem["default"],(0,_extends2["default"])({key:index,isScrolling:_this2.state.isScrolling},item,{handleScroll:_this2.handleScroll,total:props.chapters.length,current:index+1,onComplete:props.onComplete}));})));});}}]);return ChapterCaseScroll;}(_react["default"].Component);ChapterCaseScroll.contextType=_Portal.PortalContext;var _default=ChapterCaseScroll;exports["default"]=_default;