react-native-scrollable-page-view/lib/commonjs/PageView.js

A ViewPager react-native and react-native-web.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.PageView=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var PageView=(0,_react.forwardRef)(function PageView(_ref,ref){var _ref$delay=_ref.delay,delay=_ref$delay===void 0?100:_ref$delay,onChangePage=_ref.onChangePage,currentPage=_ref.currentPage,scrollEnabled=_ref.scrollEnabled,style=_ref.style,children=_ref.children;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),ready=_useState2[0],setReady=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),width=_useState4[0],setWidth=_useState4[1];var _useState5=(0,_react.useState)(0),_useState6=(0,_slicedToArray2.default)(_useState5,2),height=_useState6[0],setHeight=_useState6[1];var contentOffsetX=(0,_react.useRef)(0);var paning=(0,_react.useRef)(false);var onScrollTimer=(0,_react.useRef)();var scrollViewRef=(0,_react.useRef)(null);(0,_react.useImperativeHandle)(ref,function(){return{next:function next(){}};},[]);var onLayout=(0,_react.useCallback)(function(event){var layout=event.nativeEvent.layout;setWidth(layout.width);setHeight(layout.height);setReady(true);},[]);var isTouchable=(0,_react.useMemo)(function(){if(_reactNative.Platform.OS==="web"){if(window.navigator.maxTouchPoints===0){return false;}}return true;},[]);var childCount=(0,_react.useMemo)(function(){return _react.Children.count(children);},[children]);var animate=(0,_react.useCallback)(function(){var _scrollViewRef$curren;if(paning.current){onScrollTimer.current=setTimeout(animate,16);return;}var x=contentOffsetX.current;var halfWidth=width/2;var index=0;var left=0;while(true){if(index===childCount){break;}if(Math.abs(x-left)<halfWidth){break;}index++;left+=width;}(_scrollViewRef$curren=scrollViewRef.current)==null?void 0:_scrollViewRef$curren.scrollTo({x:left,animated:true});if(onChangePage){onChangePage(index);}},[width,childCount,onChangePage]);var onScroll=(0,_react.useCallback)(function(event){contentOffsetX.current=event.nativeEvent.contentOffset.x;if(onScrollTimer.current){clearTimeout(onScrollTimer.current);}onScrollTimer.current=setTimeout(function(){animate();},delay);},[isTouchable,animate]);var childs=(0,_react.useMemo)(function(){if(!ready){return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{});}return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:_react.Children.map(children,function(child,index){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",top:0,left:index*width,width:width,height:height},children:child},index);})});},[children,width,height,ready]);(0,_react.useEffect)(function(){if(ready&&typeof currentPage==="number"&&currentPage>-1&&currentPage<childCount){contentOffsetX.current=width*currentPage;animate();}},[ready,currentPage,childCount,width]);(0,_react.useEffect)(function(){var onMouseDown=function onMouseDown(){paning.current=true;};var onMouseUp=function onMouseUp(){paning.current=false;};if(!isTouchable){var _scrollViewRef$curren2,_scrollViewRef$curren3;var addEventListener=(_scrollViewRef$curren2=scrollViewRef.current)==null?void 0:_scrollViewRef$curren2.addEventListener;var removeEventListener=(_scrollViewRef$curren3=scrollViewRef.current)==null?void 0:_scrollViewRef$curren3.removeEventListener;if(addEventListener&&removeEventListener){addEventListener("mouseup",onMouseUp);addEventListener("mousedown",onMouseDown);return function(){removeEventListener("mouseup",onMouseUp);removeEventListener("mousedown",onMouseDown);};}}},[]);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{scrollEventThrottle:16,onResponderGrant:function onResponderGrant(){paning.current=true;},onResponderMove:function onResponderMove(){paning.current=true;},onResponderRelease:function onResponderRelease(){paning.current=false;},onScroll:onScroll,ref:scrollViewRef,scrollEnabled:scrollEnabled,horizontal:true,style:style,onLayout:onLayout,children:ready?childs:null});});exports.PageView=PageView;
//# sourceMappingURL=PageView.js.map