UNPKG

react-native-page-flipper

Version:
2 lines 16.5 kB
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BookPagePortrait=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _BackShadow=_interopRequireDefault(require("../BookPage/BackShadow"));var _FrontShadow=_interopRequireDefault(require("../BookPage/FrontShadow"));var _PageShadow=_interopRequireDefault(require("../BookPage/PageShadow"));var _utils=require("../utils/utils");var _this=this,_jsxFileName="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var timingConfig={duration:800,easing:_reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.cubic)};var BookPagePortrait=_react.default.forwardRef(function(_ref,ref){var current=_ref.current,prev=_ref.prev,onPageFlip=_ref.onPageFlip,containerSize=_ref.containerSize,enabled=_ref.enabled,isPressable=_ref.isPressable,setIsAnimating=_ref.setIsAnimating,getPageStyle=_ref.getPageStyle,isAnimating=_ref.isAnimating,isAnimatingRef=_ref.isAnimatingRef,next=_ref.next,onFlipStart=_ref.onFlipStart,onPageDrag=_ref.onPageDrag,onPageDragEnd=_ref.onPageDragEnd,onPageDragStart=_ref.onPageDragStart,renderPage=_ref.renderPage;var containerWidth=containerSize.width;var pSnapPoints=!prev?[-containerSize.width,0]:[-containerSize.width,0,containerSize.width];var x=(0,_reactNativeReanimated.useSharedValue)(0);var isMounted=(0,_react.useRef)(false);var rotateYAsDeg=(0,_reactNativeReanimated.useSharedValue)(0);var turnPage=(0,_react.useCallback)(function(id){setIsAnimating(true);if(onFlipStart&&typeof onFlipStart==='function'){onFlipStart(id);}rotateYAsDeg.value=(0,_reactNativeReanimated.withTiming)(id<0?-180:180,timingConfig,function(){var _f=function _f(){(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);};_f._closure={runOnJS:_reactNativeReanimated.runOnJS,onPageFlip:onPageFlip,id:id};_f.asString="function _f(){const{runOnJS,onPageFlip,id}=jsThis._closure;{runOnJS(onPageFlip)(id,false);}}";_f.__workletHash=7773568368045;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (100:20)";return _f;}());},[onFlipStart,onPageFlip,rotateYAsDeg,setIsAnimating]);_react.default.useImperativeHandle(ref,function(){return{turnPage:turnPage};},[turnPage]);(0,_react.useEffect)(function(){isMounted.current=true;return function(){isMounted.current=false;};},[]);var getDegreesForX=function(){var _f=function _f(x){var val=(0,_reactNativeReanimated.interpolate)(x,[-containerSize.width,0,containerSize.width],[180,0,-180],_reactNativeReanimated.Extrapolate.CLAMP);return val;};_f._closure={interpolate:_reactNativeReanimated.interpolate,containerSize:{width:containerSize.width},Extrapolate:{CLAMP:_reactNativeReanimated.Extrapolate.CLAMP}};_f.asString="function _f(x){const{interpolate,containerSize,Extrapolate}=jsThis._closure;{const val=interpolate(x,[-containerSize.width,0,containerSize.width],[180,0,-180],Extrapolate.CLAMP);return val;}}";_f.__workletHash=4914262010215;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (123:31)";return _f;}();var containerStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{flex:1};};_f._closure={};_f.asString="function _f(){return{flex:1};}";_f.__workletHash=13968359809040;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (135:48)";_f.__optimalization=3;return _f;}());var onPanGestureHandler=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function(){var _f=function _f(event,ctx){ctx.x=x.value;if(onPageDragStart&&typeof onPageDragStart==='function'){(0,_reactNativeReanimated.runOnJS)(onPageDragStart)();}};_f._closure={x:x,onPageDragStart:onPageDragStart,runOnJS:_reactNativeReanimated.runOnJS};_f.asString="function _f(event,ctx){const{x,onPageDragStart,runOnJS}=jsThis._closure;{ctx.x=x.value;if(onPageDragStart&&typeof onPageDragStart==='function'){runOnJS(onPageDragStart)();}}}";_f.__workletHash=7007747568079;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (146:21)";return _f;}(),onActive:function(){var _f=function _f(event,ctx){var newX=ctx.x+event.translationX;var degrees=getDegreesForX(newX);x.value=newX;rotateYAsDeg.value=degrees;if(onPageDrag&&typeof onPageDrag==='function'){(0,_reactNativeReanimated.runOnJS)(onPageDrag)();}};_f._closure={getDegreesForX:getDegreesForX,x:x,rotateYAsDeg:rotateYAsDeg,onPageDrag:onPageDrag,runOnJS:_reactNativeReanimated.runOnJS};_f.asString="function _f(event,ctx){const{getDegreesForX,x,rotateYAsDeg,onPageDrag,runOnJS}=jsThis._closure;{const newX=ctx.x+event.translationX;const degrees=getDegreesForX(newX);x.value=newX;rotateYAsDeg.value=degrees;if(onPageDrag&&typeof onPageDrag==='function'){runOnJS(onPageDrag)();}}}";_f.__workletHash=9170084182291;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (152:22)";return _f;}(),onEnd:function(){var _f=function _f(event){if(onPageDragEnd&&typeof onPageDragEnd==='function'){(0,_reactNativeReanimated.runOnJS)(onPageDragEnd)();}var snapTo=(0,_utils.snapPoint)(x.value,event.velocityX,pSnapPoints);var id=snapTo>0?-1:snapTo<0?1:0;if(!next&&id>0){x.value=(0,_reactNativeReanimated.withTiming)(0);rotateYAsDeg.value=(0,_reactNativeReanimated.withTiming)(0);return;}var degrees=getDegreesForX(snapTo);x.value=snapTo;if(rotateYAsDeg.value===degrees){(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);}else{(0,_reactNativeReanimated.runOnJS)(setIsAnimating)(true);var progress=Math.abs(rotateYAsDeg.value-degrees)/100;var duration=(0,_utils.clamp)(800*progress-Math.abs(0.1*event.velocityX),350,1000);rotateYAsDeg.value=(0,_reactNativeReanimated.withTiming)(degrees,(0,_extends2.default)({},timingConfig,{duration:duration}),function(){var _f=function _f(){if(snapTo===0){}(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);};_f._closure={snapTo:snapTo,runOnJS:_reactNativeReanimated.runOnJS,onPageFlip:onPageFlip,id:id};_f.asString="function _f(){const{snapTo,runOnJS,onPageFlip,id}=jsThis._closure;{if(snapTo===0){}runOnJS(onPageFlip)(id,false);}}";_f.__workletHash=5010010046564;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (199:24)";return _f;}());}};_f._closure={onPageDragEnd:onPageDragEnd,runOnJS:_reactNativeReanimated.runOnJS,snapPoint:_utils.snapPoint,x:x,pSnapPoints:pSnapPoints,next:next,withTiming:_reactNativeReanimated.withTiming,rotateYAsDeg:rotateYAsDeg,getDegreesForX:getDegreesForX,onPageFlip:onPageFlip,setIsAnimating:setIsAnimating,clamp:_utils.clamp,timingConfig:timingConfig};_f.asString="function _f(event){const{onPageDragEnd,runOnJS,snapPoint,x,pSnapPoints,next,withTiming,rotateYAsDeg,getDegreesForX,onPageFlip,setIsAnimating,clamp,timingConfig}=jsThis._closure;{if(onPageDragEnd&&typeof onPageDragEnd==='function'){runOnJS(onPageDragEnd)();}const snapTo=snapPoint(x.value,event.velocityX,pSnapPoints);const id=snapTo>0?-1:snapTo<0?1:0;if(!next&&id>0){x.value=withTiming(0);rotateYAsDeg.value=withTiming(0);return;}const degrees=getDegreesForX(snapTo);x.value=snapTo;if(rotateYAsDeg.value===degrees){runOnJS(onPageFlip)(id,false);}else{runOnJS(setIsAnimating)(true);const progress=Math.abs(rotateYAsDeg.value-degrees)/100;const duration=clamp(800*progress-Math.abs(0.1*event.velocityX),350,1000);rotateYAsDeg.value=withTiming(degrees,{...timingConfig,duration:duration},function(){if(snapTo===0){}runOnJS(onPageFlip)(id,false);});}}}";_f.__workletHash=3393621851522;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (161:19)";return _f;}()});var gesturesEnabled=enabled&&!isAnimating;var iPageProps={containerSize:containerSize,containerWidth:containerWidth,getPageStyle:getPageStyle,rotateYAsDeg:rotateYAsDeg,renderPage:renderPage};return _react.default.createElement(_reactNativeReanimated.default.View,{style:containerStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:13}},_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:onPanGestureHandler,enabled:gesturesEnabled,__self:_this,__source:{fileName:_jsxFileName,lineNumber:222,columnNumber:17}},_react.default.createElement(_reactNativeReanimated.default.View,{style:containerStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:226,columnNumber:21}},isPressable&&prev&&_react.default.createElement(_reactNative.Pressable,{disabled:isAnimating,onPress:function onPress(){if(!isAnimatingRef.current)turnPage(-1);},style:{position:'absolute',height:'100%',width:'25%',zIndex:10000,left:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:29}}),isPressable&&next&&_react.default.createElement(_reactNative.Pressable,{disabled:isAnimating,onPress:function onPress(){if(!isAnimatingRef.current)turnPage(1);},style:{position:'absolute',height:'100%',width:'30%',zIndex:10000,right:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:245,columnNumber:29}}),current&&next?_react.default.createElement(IPage,(0,_extends2.default)({page:current,right:true},iPageProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:29}})):_react.default.createElement(_reactNative.View,{style:{height:'100%',width:'100%'},__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:29}},renderPage&&_react.default.createElement(_reactNative.View,{style:getPageStyle(true,true),__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:37}},renderPage(current.right))),prev&&_react.default.createElement(IPage,(0,_extends2.default)({page:prev,right:false},iPageProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:29}})))));});exports.BookPagePortrait=BookPagePortrait;var IPage=function IPage(_ref2){var right=_ref2.right,page=_ref2.page,rotateYAsDeg=_ref2.rotateYAsDeg,containerWidth=_ref2.containerWidth,containerSize=_ref2.containerSize,getPageStyle=_ref2.getPageStyle,renderPage=_ref2.renderPage;var _useState=(0,_react.useState)(right),_useState2=(0,_slicedToArray2.default)(_useState,2),loaded=_useState2[0],setLoaded=_useState2[1];(0,_react.useEffect)(function(){setTimeout(function(){setLoaded(true);},50);},[]);var rotationVal=(0,_reactNativeReanimated.useDerivedValue)(function(){var _f=function _f(){var val=right?rotateYAsDeg.value:(0,_reactNativeReanimated.interpolate)(rotateYAsDeg.value,[-180,0],[0,180]);return val;};_f._closure={right:right,rotateYAsDeg:rotateYAsDeg,interpolate:_reactNativeReanimated.interpolate};_f.asString="function _f(){const{right,rotateYAsDeg,interpolate}=jsThis._closure;{const val=right?rotateYAsDeg.value:interpolate(rotateYAsDeg.value,[-180,0],[0,180]);return val;}}";_f.__workletHash=9240857603336;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (314:40)";return _f;}());var portraitBackStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var x=(0,_reactNativeReanimated.interpolate)(rotationVal.value,[0,180],[containerWidth,-containerWidth/2]);var w=(0,_reactNativeReanimated.interpolate)(rotationVal.value,[0,180],[0,containerWidth/2]);return{width:Math.ceil(w),zIndex:2,opacity:1,transform:[{translateX:x}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,rotationVal:rotationVal,containerWidth:containerWidth};_f.asString="function _f(){const{interpolate,rotationVal,containerWidth}=jsThis._closure;{const x=interpolate(rotationVal.value,[0,180],[containerWidth,-containerWidth/2]);const w=interpolate(rotationVal.value,[0,180],[0,containerWidth/2]);return{width:Math.ceil(w),zIndex:2,opacity:1,transform:[{translateX:x}]};}}";_f.__workletHash=8161634335269;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (321:47)";_f.__optimalization=2;return _f;}());var portraitFrontStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var w=(0,_reactNativeReanimated.interpolate)(rotationVal.value,[0,160],[containerWidth,-20],_reactNativeReanimated.Extrapolate.CLAMP);var style={zIndex:1,width:Math.floor(w)};if(!right){style['left']=0;}else{}return style;};_f._closure={interpolate:_reactNativeReanimated.interpolate,rotationVal:rotationVal,containerWidth:containerWidth,Extrapolate:{CLAMP:_reactNativeReanimated.Extrapolate.CLAMP},right:right};_f.asString="function _f(){const{interpolate,rotationVal,containerWidth,Extrapolate,right}=jsThis._closure;{const w=interpolate(rotationVal.value,[0,160],[containerWidth,-20],Extrapolate.CLAMP);const style={zIndex:1,width:Math.floor(w)};if(!right){style['left']=0;}else{}return style;}}";_f.__workletHash=3527548941017;_f.__location="/Users/chris/Desktop/dev/react-native-page-flipper/src/portrait/BookPagePortrait.tsx (341:48)";return _f;}());var frontPageStyle=getPageStyle(right,true);var backPageStyle=getPageStyle(right,false);if(!loaded){return null;}var shadowProps={right:true,degrees:rotationVal,width:containerSize.width,viewHeight:containerSize.height};return _react.default.createElement(_reactNative.View,{style:(0,_extends2.default)({},_reactNative.StyleSheet.absoluteFillObject,{zIndex:!right?5:0}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:379,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.pageContainer,portraitBackStyle,{overflow:'visible'}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:386,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:styles.pageContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:393,columnNumber:17}},renderPage&&_react.default.createElement(_reactNativeReanimated.default.View,{style:[backPageStyle,{opacity:0.2,transform:[{rotateX:'180deg'},{rotateZ:'180deg'}]}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:395,columnNumber:25}},renderPage(page.left))),_react.default.createElement(_BackShadow.default,{degrees:rotationVal,right:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:412,columnNumber:17}}),_react.default.createElement(_FrontShadow.default,(0,_extends2.default)({},shadowProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:413,columnNumber:17}})),_react.default.createElement(_PageShadow.default,(0,_extends2.default)({},shadowProps,{containerSize:containerSize,__self:_this,__source:{fileName:_jsxFileName,lineNumber:414,columnNumber:17}}))),_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.pageContainer,portraitFrontStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:417,columnNumber:13}},renderPage&&_react.default.createElement(_reactNativeReanimated.default.View,{style:[frontPageStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:419,columnNumber:21}},renderPage(page.left))));};var styles=_reactNative.StyleSheet.create({container:{flex:1},pageContainer:{height:'100%',width:'100%',position:'absolute',backfaceVisibility:'hidden',overflow:'hidden',backgroundColor:'white'}}); //# sourceMappingURL=BookPagePortrait.js.map