react-native-flip-book/lib/commonjs/portrait/BookPagePortrait.js

Page Flipper

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 _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 _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="C:\\Users\\shara\\react-native-page-flipper\\src\\portrait\\BookPagePortrait.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var timingConfig={duration:800,easing:_reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.cubic)};var BookPagePortrait=exports.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(){(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);});},[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 getDegreesForX(x){'worklet';var val=(0,_reactNativeReanimated.interpolate)(x,[-containerSize.width,0,containerSize.width],[180,0,-180],_reactNativeReanimated.Extrapolate.CLAMP);return val;};var containerStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){return{flex:1};});var onPanGestureHandler=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function onStart(event,ctx){ctx.x=x.value;if(onPageDragStart&&typeof onPageDragStart==='function'){(0,_reactNativeReanimated.runOnJS)(onPageDragStart)();}},onActive:function onActive(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)();}},onEnd:function onEnd(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,Object.assign({},timingConfig,{duration:duration}),function(){if(snapTo===0){}(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);});}}});var gesturesEnabled=enabled&&!isAnimating;var iPageProps={containerSize:containerSize,containerWidth:containerWidth,getPageStyle:getPageStyle,rotateYAsDeg:rotateYAsDeg,renderPage:renderPage};return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:containerStyle,children:(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:onPanGestureHandler,enabled:gesturesEnabled,children:(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:containerStyle,children:[isPressable&&prev&&(0,_jsxRuntime.jsx)(_reactNative.Pressable,{disabled:isAnimating,onPress:function onPress(){if(!isAnimatingRef.current)turnPage(-1);},style:{position:'absolute',height:'100%',width:'25%',zIndex:10000,left:0}}),isPressable&&next&&(0,_jsxRuntime.jsx)(_reactNative.Pressable,{disabled:isAnimating,onPress:function onPress(){if(!isAnimatingRef.current)turnPage(1);},style:{position:'absolute',height:'100%',width:'30%',zIndex:10000,right:0}}),current&&next?(0,_jsxRuntime.jsx)(IPage,Object.assign({page:current,right:true},iPageProps)):(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:'100%',width:'100%'},children:renderPage&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:getPageStyle(true,true),children:renderPage(current.right)})}),prev&&(0,_jsxRuntime.jsx)(IPage,Object.assign({page:prev,right:false},iPageProps))]})})});});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 val=right?rotateYAsDeg.value:(0,_reactNativeReanimated.interpolate)(rotateYAsDeg.value,[-180,0],[0,180]);return val;});var portraitBackStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){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}]};});var portraitFrontStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){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;});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(0,_jsxRuntime.jsxs)(_reactNative.View,{style:Object.assign({},_reactNative.StyleSheet.absoluteFillObject,{zIndex:!right?5:0}),children:[(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[styles.pageContainer,portraitBackStyle,{overflow:'visible'}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.pageContainer,children:renderPage&&(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[backPageStyle,{opacity:0.2,transform:[{rotateX:'180deg'},{rotateZ:'180deg'}]}],children:renderPage(page.left)})}),(0,_jsxRuntime.jsx)(_BackShadow.default,{degrees:rotationVal,right:true}),(0,_jsxRuntime.jsx)(_FrontShadow.default,Object.assign({},shadowProps)),(0,_jsxRuntime.jsx)(_PageShadow.default,Object.assign({},shadowProps,{containerSize:containerSize}))]}),(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[styles.pageContainer,portraitFrontStyle],children:renderPage&&(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[frontPageStyle],children: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