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

Page Flipper

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _usePrevious=_interopRequireDefault(require("./hooks/usePrevious"));var _useSetState3=_interopRequireDefault(require("./hooks/useSetState"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _BookPage=require("./BookPage");var _BookPagePortrait=require("./portrait/BookPagePortrait");var _utils=require("./utils/utils");var _BookPageBackground=require("./BookPageBackground");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="C:\\Users\\shara\\react-native-page-flipper\\src\\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 debug=true;var logger=function logger(msg){if(debug){console.log(msg);}};var PageFlipper=_react.default.forwardRef(function(_ref,ref){var data=_ref.data,_ref$enabled=_ref.enabled,enabled=_ref$enabled===void 0?true:_ref$enabled,_ref$pressable=_ref.pressable,pressable=_ref$pressable===void 0?true:_ref$pressable,_ref$singleImageMode=_ref.singleImageMode,singleImageMode=_ref$singleImageMode===void 0?true:_ref$singleImageMode,renderLastPage=_ref.renderLastPage,_ref$portrait=_ref.portrait,portrait=_ref$portrait===void 0?false:_ref$portrait,onFlippedEnd=_ref.onFlippedEnd,onFlipStart=_ref.onFlipStart,onPageDrag=_ref.onPageDrag,onPageDragEnd=_ref.onPageDragEnd,onPageDragStart=_ref.onPageDragStart,onEndReached=_ref.onEndReached,onInitialized=_ref.onInitialized,renderContainer=_ref.renderContainer,renderPage=_ref.renderPage,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?{height:600,width:400}:_ref$pageSize,contentContainerStyle=_ref.contentContainerStyle;var _useState=(0,_react.useState)({height:0,width:0}),_useState2=(0,_slicedToArray2.default)(_useState,2),_useState2$=_useState2[0],width=_useState2$.width,height=_useState2$.height,setLayout=_useState2[1];var _useSetState=(0,_useSetState3.default)({pageIndex:0,pages:[],isAnimating:false,initialized:false,prev:{left:'',right:''},current:{left:'',right:''},next:{left:'',right:''},nextPageIndex:undefined,isPortrait:portrait}),_useSetState2=(0,_slicedToArray2.default)(_useSetState,2),state=_useSetState2[0],setState=_useSetState2[1];var isAnimatingRef=(0,_react.useRef)(false);var prevBookPage=(0,_react.useRef)(null);var nextBookPage=(0,_react.useRef)(null);var portraitBookPage=(0,_react.useRef)(null);var previousPortrait=(0,_usePrevious.default)(portrait);var containerSize=(0,_react.useMemo)(function(){if(!state.initialized){return{width:0,height:0};}var size={height:pageSize.height,width:singleImageMode&&!state.isPortrait?pageSize.width*2:pageSize.width};if(!singleImageMode&&state.isPortrait){size={height:pageSize.height,width:pageSize.width/2};}var finalSize;if(size.height>size.width){var ratio=size.height/size.width;finalSize={height:width*ratio,width:width};if(finalSize.height>height){var diff=finalSize.height/height;finalSize.height=height;finalSize.width=finalSize.width/diff;}}else{var _ratio=size.width/size.height;finalSize={height:height,width:height*_ratio};if(finalSize.width>width){var _diff=finalSize.width/width;finalSize.width=width;finalSize.height=finalSize.height/_diff;}}return finalSize;},[height,singleImageMode,width,state.initialized,state.isPortrait,pageSize.height,pageSize.width]);(0,_react.useEffect)(function(){var initialize=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){try{var allPages=(0,_utils.createPages)({portrait:portrait,singleImageMode:singleImageMode,data:data});var adjustedIndex=getAdjustedIndex(allPages);setState({initialized:true,pages:allPages,prev:allPages[adjustedIndex-1],current:allPages[adjustedIndex],next:allPages[adjustedIndex+1],pageIndex:adjustedIndex,isPortrait:portrait});if(onInitialized){onInitialized({pages:allPages,index:adjustedIndex});}}catch(error){console.error('error',error);}});return function initialize(){return _ref2.apply(this,arguments);};}();initialize();},[data,portrait,singleImageMode]);(0,_react.useEffect)(function(){if(state.nextPageIndex!==undefined){if(!state.isPortrait){if(state.nextPageIndex>state.pageIndex){var _nextBookPage$current;(_nextBookPage$current=nextBookPage.current)==null?void 0:_nextBookPage$current.turnPage();}else{var _prevBookPage$current;(_prevBookPage$current=prevBookPage.current)==null?void 0:_prevBookPage$current.turnPage();}}else{var _portraitBookPage$cur;(_portraitBookPage$cur=portraitBookPage.current)==null?void 0:_portraitBookPage$cur.turnPage(state.nextPageIndex>state.pageIndex?1:-1);}}},[state.nextPageIndex]);var goToPage=(0,_react.useCallback)(function(index){if(index===undefined||index===null){logger('index cannot be undefined or null');return;}if(typeof index!=='number'||isNaN(index)){logger('index must be a number');return;}if(index<0||index>state.pages.length-1){logger('invalid page');return;}if(isAnimatingRef.current){logger('is already animating');return;}if(index===state.pageIndex){logger('same page');return;}if(index>state.pageIndex){setState({next:state.pages[index],nextPageIndex:index});}else{setState({prev:state.pages[index],nextPageIndex:index});}},[setState,state.pageIndex,state.pages]);var previousPage=(0,_react.useCallback)(function(){var newIndex=state.pageIndex-1;goToPage(newIndex);},[goToPage,state.pageIndex]);var nextPage=(0,_react.useCallback)(function(){var newIndex=state.pageIndex+1;goToPage(newIndex);},[goToPage,state.pageIndex]);_react.default.useImperativeHandle(ref,function(){return{goToPage:goToPage,nextPage:nextPage,previousPage:previousPage};},[goToPage,nextPage,previousPage]);var getAdjustedIndex=function getAdjustedIndex(allPages){var adjustedIndex=state.pageIndex;if(previousPortrait!==undefined&&previousPortrait!==portrait&&singleImageMode){if(portrait){adjustedIndex*=2;}else{adjustedIndex=Math.floor(adjustedIndex%2===0?adjustedIndex/2:(adjustedIndex-1)/2);}}if(adjustedIndex<0||adjustedIndex>allPages.length-1){adjustedIndex=0;}return adjustedIndex;};var onLayout=function onLayout(e){setLayout({height:e.nativeEvent.layout.height,width:e.nativeEvent.layout.width});};var onPageFlipped=(0,_react.useCallback)(function(index){var newIndex=state.nextPageIndex!==undefined?state.nextPageIndex:state.pageIndex+index;if(newIndex<0||newIndex>state.pages.length-1){logger('invalid page');setState({isAnimating:false,nextPageIndex:undefined});isAnimatingRef.current=false;return;}var prev=state.pages[newIndex-1];var current=state.pages[newIndex];var next=state.pages[newIndex+1];setState({pageIndex:newIndex,isAnimating:false,prev:prev,current:current,next:next,nextPageIndex:undefined});isAnimatingRef.current=false;if(onFlippedEnd&&typeof onFlippedEnd==='function'){onFlippedEnd(newIndex);}if(newIndex===state.pages.length-1&&onEndReached){onEndReached();}},[onEndReached,onFlippedEnd,setState,state.nextPageIndex,state.pageIndex,state.pages]);var setIsAnimating=(0,_react.useCallback)(function(val){setState({isAnimating:val});isAnimatingRef.current=val;},[setState]);var getPageStyle=function getPageStyle(right,front){if(!singleImageMode&&isPortrait){var _pageStyle={height:containerSize.height,width:containerSize.width*2,position:'absolute'};var isEvenPage=pageIndex%2===0;if(front){if(isEvenPage){_pageStyle.left=right?0:-containerSize.width;}else{_pageStyle.left=right?-containerSize.width:0;}}else{if(isEvenPage){_pageStyle.left=right?-containerSize.width:0;}else{_pageStyle.left=right?0:-containerSize.width;}}return _pageStyle;}var pageStyle={height:containerSize.height,width:singleImageMode&&!isPortrait?containerSize.width/2:containerSize.width,position:'absolute'};var offset=singleImageMode?0:-containerSize.width/2;if(isPortrait&&front){pageStyle.left=0;}else if(front&&right||!front&&right){pageStyle.left=offset;}else if(front&&!right){pageStyle.right=offset;}return pageStyle;};if(!state.initialized){return null;}var current=state.current,pageIndex=state.pageIndex,pages=state.pages,next=state.next,prev=state.prev,isPortrait=state.isPortrait,isAnimating=state.isAnimating;var isFirstPage=pageIndex===0;var isLastPage=pageIndex===pages.length-1;var isSecondToLastPage=pageIndex===pages.length-2;var shouldRenderLastPage=(isSecondToLastPage||isLastPage)&&singleImageMode&&data.length%2!==0;var bookPageProps={containerSize:containerSize,isAnimating:isAnimating,enabled:enabled,setIsAnimating:setIsAnimating,isAnimatingRef:isAnimatingRef,onPageFlip:onPageFlipped,getPageStyle:getPageStyle,single:singleImageMode,onFlipStart:onFlipStart,onPageDrag:onPageDrag,onPageDragEnd:onPageDragEnd,onPageDragStart:onPageDragStart,isPressable:pressable,renderPage:renderPage};var ContentWrapper=renderContainer?renderContainer:Wrapper;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,onLayout:onLayout,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.contentContainer,{height:containerSize.height,width:containerSize.width},contentContainerStyle],children:(0,_jsxRuntime.jsx)(ContentWrapper,{children:!isPortrait?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[!prev?(0,_jsxRuntime.jsx)(Empty,{}):(0,_jsxRuntime.jsx)(_BookPage.BookPage,Object.assign({ref:prevBookPage,right:false,front:current,back:prev},bookPageProps),`left${pageIndex}`),!next?(0,_jsxRuntime.jsx)(Empty,{}):(0,_jsxRuntime.jsx)(_BookPage.BookPage,Object.assign({ref:nextBookPage,right:true,front:current,back:next},bookPageProps),`right${pageIndex}`),(0,_jsxRuntime.jsx)(_BookPageBackground.BookPageBackground,{left:!prev?current.left:prev.left,right:!next?current.right:next.right,isFirstPage:isFirstPage,isLastPage:isLastPage,getPageStyle:getPageStyle,containerSize:containerSize,renderPage:renderPage,renderLastPage:renderLastPage,shouldRenderLastPage:shouldRenderLastPage})]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.portraitContent,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:Object.assign({},_reactNative.StyleSheet.absoluteFillObject),children:(0,_react.createElement)(_BookPagePortrait.BookPagePortrait,Object.assign({},bookPageProps,{current:current,prev:prev,next:next,onPageFlip:onPageFlipped,key:`right${pageIndex}`,ref:portraitBookPage,__self:_this,__source:{fileName:_jsxFileName,lineNumber:520,columnNumber:37}}))}),next&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:Object.assign({},_reactNative.StyleSheet.absoluteFillObject,{zIndex:-5,overflow:'hidden'}),children:renderPage&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:getPageStyle(true,false),children:renderPage(next.right)})})]})})})});});var _default=exports.default=_react.default.memo(PageFlipper);var Wrapper=function Wrapper(props){return(0,_jsxRuntime.jsx)(_reactNative.View,Object.assign({style:styles.wrap},props));};var Empty=function Empty(){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,pointerEvents:"none"});};var styles=_reactNative.StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center'},wrap:{flex:1},contentContainer:{flexDirection:'row',backgroundColor:'white'},content:{flex:1,flexDirection:'row',overflow:'hidden'},portraitContent:{flex:1,overflow:'hidden'}});
//# sourceMappingURL=index.js.map