react-native-flip-book/lib/commonjs/BookPage/index.js

Page Flipper

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BookPage=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("./BackShadow"));var _FrontShadow=_interopRequireDefault(require("./FrontShadow"));var _PageShadow=_interopRequireDefault(require("./PageShadow"));var _BookSpine=require("./BookSpine");var _BookSpine2=require("./BookSpine2");var _utils=require("../utils/utils");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="C:\\Users\\shara\\react-native-page-flipper\\src\\BookPage\\index.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 BookPage=exports.BookPage=_react.default.forwardRef(function(_ref,ref){var right=_ref.right,front=_ref.front,back=_ref.back,onPageFlip=_ref.onPageFlip,containerSize=_ref.containerSize,isAnimatingRef=_ref.isAnimatingRef,setIsAnimating=_ref.setIsAnimating,isAnimating=_ref.isAnimating,enabled=_ref.enabled,isPressable=_ref.isPressable,getPageStyle=_ref.getPageStyle,single=_ref.single,onFlipStart=_ref.onFlipStart,onPageDrag=_ref.onPageDrag,onPageDragEnd=_ref.onPageDragEnd,onPageDragStart=_ref.onPageDragStart,renderPage=_ref.renderPage;var x=(0,_reactNativeReanimated.useSharedValue)(0);var isMounted=(0,_react.useRef)(false);var rotateYAsDeg=(0,_reactNativeReanimated.useSharedValue)(0);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isDragging=_useState2[0],setIsDragging=_useState2[1];var isDraggingRef=(0,_react.useRef)(false);var containerWidth=containerSize.width;var containerHeight=containerSize.height;var leftPSnapPoints=[0,containerWidth];var rightPSnapPoints=[-containerWidth,0];var pSnapPoints=right?rightPSnapPoints:leftPSnapPoints;var gesturesEnabled=enabled&&!isAnimating;var showSpine=true;(0,_react.useEffect)(function(){isMounted.current=true;return function(){isMounted.current=false;};},[]);var turnPage=(0,_react.useCallback)(function(){setIsDragging(true);setIsAnimating(true);var id=right?1:-1;if(onFlipStart&&typeof onFlipStart==='function'){onFlipStart(id);}rotateYAsDeg.value=(0,_reactNativeReanimated.withTiming)(right?180:-180,timingConfig,function(){(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);});},[onFlipStart,setIsDragging,right,onPageFlip,rotateYAsDeg,setIsAnimating]);_react.default.useImperativeHandle(ref,function(){return{turnPage:turnPage};},[turnPage]);var onDrag=(0,_react.useCallback)(function(val){if(!isMounted.current){return;}if(isDraggingRef.current===val){return;}setIsDragging(val);isDraggingRef.current=val;},[]);var backStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var degrees=rotateYAsDeg.value;var x=right?(0,_reactNativeReanimated.interpolate)(degrees,[0,180],[containerWidth/2,-containerWidth/2]):(0,_reactNativeReanimated.interpolate)(degrees,[-180,0],[containerWidth/2,0]);var w=right?(0,_reactNativeReanimated.interpolate)(degrees,[0,180],[0,containerWidth/2]):(0,_reactNativeReanimated.interpolate)(degrees,[-180,0],[containerWidth/2,0]);return{width:Math.ceil(w),zIndex:2,transform:[{translateX:x}]};});var frontStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var degrees=rotateYAsDeg.value;var w=right?(0,_reactNativeReanimated.interpolate)(degrees,[0,90],[containerWidth/2,0],_reactNativeReanimated.Extrapolate.CLAMP):(0,_reactNativeReanimated.interpolate)(degrees,[-90,0],[0,containerWidth/2],_reactNativeReanimated.Extrapolate.CLAMP);var style={zIndex:1,width:Math.floor(w)};if(right){style['left']=0;}else{style['right']=0;}return style;});var containerStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){return{flex:1,zIndex:isDragging?100:0};});var animatedBackPageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var l=right?0:(0,_reactNativeReanimated.interpolate)(rotateYAsDeg.value,[-180,0],single?[0,-containerWidth/2]:[-containerWidth/2,-containerWidth]);return{left:l};});var onPanGestureHandler=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function onStart(event,ctx){if(onPageDragStart&&typeof onPageDragStart==='function'){(0,_reactNativeReanimated.runOnJS)(onPageDragStart)();}ctx.x=x.value;},onActive:function onActive(event,ctx){(0,_reactNativeReanimated.runOnJS)(onDrag)(true);x.value=ctx.x+event.translationX;rotateYAsDeg.value=(0,_reactNativeReanimated.interpolate)(x.value,[-containerWidth,0,containerWidth],[180,0,-180],_reactNativeReanimated.Extrapolate.CLAMP);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;var degrees=snapTo>0?-180:snapTo<0?180:0;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)(onDrag)(false);}(0,_reactNativeReanimated.runOnJS)(onPageFlip)(id,false);});}}});if(!front||!back){return null;}var frontPageStyle=getPageStyle(right,true);var backPageStyle=getPageStyle(right,false);var frontUrl=right?front.right:front.left;var backUrl=right?back.left:back.right;return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:onPanGestureHandler,enabled:gesturesEnabled,children:(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:containerStyle,children:[isPressable&&(0,_jsxRuntime.jsx)(_reactNative.Pressable,{disabled:isAnimating,onPress:function onPress(){if(!isAnimatingRef.current)turnPage();},style:[{position:'absolute',height:'100%',width:'25%',zIndex:10000},right?{right:0}:{left:0}]}),(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[styles.pageContainer,backStyle,{overflow:'visible'}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.pageContainer,children:backUrl?renderPage&&(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[backPageStyle,animatedBackPageStyle],children:renderPage(backUrl)}):(0,_jsxRuntime.jsx)(BlankPage,{})}),(0,_jsxRuntime.jsx)(_BackShadow.default,{degrees:rotateYAsDeg,right:right}),(0,_jsxRuntime.jsx)(_FrontShadow.default,{right:right,degrees:rotateYAsDeg,width:containerWidth,viewHeight:containerHeight}),(0,_jsxRuntime.jsx)(_PageShadow.default,{right:right,degrees:rotateYAsDeg,width:containerWidth,viewHeight:containerHeight,containerSize:containerSize}),showSpine&&(0,_jsxRuntime.jsx)(_BookSpine2.BookSpine2,{right:right,degrees:rotateYAsDeg,containerSize:containerSize})]}),(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[styles.pageContainer,frontStyle],children:[frontUrl?renderPage&&(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[frontPageStyle],children:renderPage(frontUrl)}):(0,_jsxRuntime.jsx)(BlankPage,{}),showSpine&&(0,_jsxRuntime.jsx)(_BookSpine.BookSpine,{right:right,containerSize:containerSize})]})]})});});var BlankPage=function BlankPage(){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:Object.assign({},_reactNative.StyleSheet.absoluteFillObject,{backgroundColor:'#fff'})});};var styles=_reactNative.StyleSheet.create({container:{flex:1},pageContainer:{height:'100%',width:'100%',position:'absolute',backfaceVisibility:'hidden',overflow:'hidden'}});
//# sourceMappingURL=index.js.map