UNPKG

react-native-reanimated-carousel

Version:

Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.

2 lines 7.83 kB
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CarouselLayout=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=require("react-native-reanimated");var _useAutoPlay2=require("../hooks/useAutoPlay");var _useCarouselController=require("../hooks/useCarouselController");var _useCommonVariables=require("../hooks/useCommonVariables");var _useLayoutConfig=require("../hooks/useLayoutConfig");var _useOnProgressChange=require("../hooks/useOnProgressChange");var _store=require("../store");var _computedWithAutoFillData=require("../utils/computed-with-auto-fill-data");var _ItemRenderer=require("./ItemRenderer");var _ScrollViewGesture=require("./ScrollViewGesture");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/components/CarouselLayout.tsx";var _worklet_12600340162670_init_data={code:"function anonymous(){const{size,dataLength,handlerOffset,loop}=this.__closure;const totalSize=size*dataLength;const x=handlerOffset.value%totalSize;if(!loop)return handlerOffset.value;return Number.isNaN(x)?0:x;}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/components/CarouselLayout.tsx",sourceMap:"{\"version\":3,\"mappings\":\"AAyDkC,QAAAA,UAAA,EAAM,0DACpC,KAAMC,UAAS,CAAGC,IAAI,CAAGC,UAAzB,CACA,KAAMC,EAAC,CAAGC,aAAa,CAACC,KAAdD,CAAsBJ,SAAhC,CAEA,GAAI,CAACM,IAAL,CAAW,MAAOF,cAAa,CAACC,KAArB,CAEX,MAAOE,OAAM,CAACC,KAAPD,CAAaJ,CAAbI,EAAkB,CAAlBA,CAAsBJ,CAA7B,CAN8B\",\"names\":[\"anonymous\",\"totalSize\",\"size\",\"dataLength\",\"x\",\"handlerOffset\",\"value\",\"loop\",\"Number\",\"isNaN\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/components/CarouselLayout.tsx\"]}",version:"3.10.1"};var _worklet_4516433107907_init_data={code:"function anonymous(){const{width,height}=this.__closure;return{width:width||\"100%\",height:height||\"100%\"};}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/components/CarouselLayout.tsx",sourceMap:"{\"version\":3,\"mappings\":\"AAmIuC,QAAAA,UAAA,EAAM,oCAOvC,OAGAC,MAAMC,KAAED,EAAM,MAHd,CADFA,MAAA,CAAAA,MAAA,QACE\",\"names\":[\"anonymous\",\"height\",\"width\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/components/CarouselLayout.tsx\"]}",version:"3.10.1"};var CarouselLayout=_react.default.forwardRef(function(_props,ref){var _useGlobalState=(0,_store.useGlobalState)(),props=_useGlobalState.props,layout=_useGlobalState.layout;var itemDimensions=layout.itemDimensions;var testID=props.testID,loop=props.loop,autoFillData=props.autoFillData,data=props.data,dataLength=props.dataLength,rawDataLength=props.rawDataLength,mode=props.mode,style=props.style,containerStyle=props.containerStyle,width=props.width,height=props.height,vertical=props.vertical,autoPlay=props.autoPlay,windowSize=props.windowSize,autoPlayReverse=props.autoPlayReverse,autoPlayInterval=props.autoPlayInterval,scrollAnimationDuration=props.scrollAnimationDuration,withAnimation=props.withAnimation,fixedDirection=props.fixedDirection,renderItem=props.renderItem,onScrollEnd=props.onScrollEnd,onSnapToItem=props.onSnapToItem,_onScrollStart=props.onScrollStart,onProgressChange=props.onProgressChange,customAnimation=props.customAnimation,defaultIndex=props.defaultIndex;var commonVariables=(0,_useCommonVariables.useCommonVariables)(props);var size=commonVariables.size,handlerOffset=commonVariables.handlerOffset;var layoutConfig=(0,_useLayoutConfig.useLayoutConfig)(Object.assign({},props,{size:size}));var offsetX=(0,_reactNativeReanimated.useDerivedValue)(function(){var _e=[new global.Error(),-5,-27];var anonymous=function anonymous(){var totalSize=size*dataLength;var x=handlerOffset.value%totalSize;if(!loop)return handlerOffset.value;return Number.isNaN(x)?0:x;};anonymous.__closure={size:size,dataLength:dataLength,handlerOffset:handlerOffset,loop:loop};anonymous.__workletHash=12600340162670;anonymous.__initData=_worklet_12600340162670_init_data;anonymous.__stackDetails=_e;return anonymous;}(),[loop,size,dataLength,handlerOffset]);(0,_useOnProgressChange.useOnProgressChange)({autoFillData:autoFillData,loop:loop,size:size,offsetX:offsetX,rawDataLength:rawDataLength,onProgressChange:onProgressChange});var carouselController=(0,_useCarouselController.useCarouselController)({ref:ref,loop:loop,size:size,dataLength:dataLength,autoFillData:autoFillData,handlerOffset:handlerOffset,withAnimation:withAnimation,defaultIndex:defaultIndex,fixedDirection:fixedDirection,duration:scrollAnimationDuration,onScrollEnd:function onScrollEnd(){return(0,_reactNativeReanimated.runOnJS)(_onScrollEnd)();},onScrollStart:function onScrollStart(){return!!_onScrollStart&&(0,_reactNativeReanimated.runOnJS)(_onScrollStart)();}});var getSharedIndex=carouselController.getSharedIndex;var _onScrollEnd=_react.default.useCallback(function(){var _sharedIndex=Math.round(getSharedIndex());var realIndex=(0,_computedWithAutoFillData.computedRealIndexWithAutoFillData)({index:_sharedIndex,dataLength:rawDataLength,loop:loop,autoFillData:autoFillData});if(onSnapToItem)onSnapToItem(realIndex);if(onScrollEnd)onScrollEnd(realIndex);},[loop,autoFillData,rawDataLength,getSharedIndex,onSnapToItem,onScrollEnd]);var _useAutoPlay=(0,_useAutoPlay2.useAutoPlay)({autoPlay:autoPlay,autoPlayInterval:autoPlayInterval,autoPlayReverse:autoPlayReverse,carouselController:carouselController}),startAutoPlay=_useAutoPlay.start,pauseAutoPlay=_useAutoPlay.pause;var scrollViewGestureOnScrollStart=_react.default.useCallback(function(){pauseAutoPlay();_onScrollStart==null?void 0:_onScrollStart();},[_onScrollStart,pauseAutoPlay]);var scrollViewGestureOnScrollEnd=_react.default.useCallback(function(){startAutoPlay();_onScrollEnd();},[_onScrollEnd,startAutoPlay]);var scrollViewGestureOnTouchBegin=_react.default.useCallback(pauseAutoPlay,[pauseAutoPlay]);var scrollViewGestureOnTouchEnd=_react.default.useCallback(startAutoPlay,[startAutoPlay]);var layoutStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _e=[new global.Error(),-3,-27];var anonymous=function anonymous(){return{width:width||"100%",height:height||"100%"};};anonymous.__closure={width:width,height:height};anonymous.__workletHash=4516433107907;anonymous.__initData=_worklet_4516433107907_init_data;anonymous.__stackDetails=_e;return anonymous;}(),[width,height,size,itemDimensions]);return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView,{style:[styles.layoutContainer,containerStyle],children:(0,_jsxRuntime.jsx)(_ScrollViewGesture.ScrollViewGesture,{size:size,translation:handlerOffset,style:[styles.contentContainer,layoutStyle,style,vertical?styles.itemsVertical:styles.itemsHorizontal],testID:testID,onScrollStart:scrollViewGestureOnScrollStart,onScrollEnd:scrollViewGestureOnScrollEnd,onTouchBegin:scrollViewGestureOnTouchBegin,onTouchEnd:scrollViewGestureOnTouchEnd,children:(0,_jsxRuntime.jsx)(_ItemRenderer.ItemRenderer,{data:data,dataLength:dataLength,rawDataLength:rawDataLength,loop:loop,size:size,windowSize:windowSize,autoFillData:autoFillData,offsetX:offsetX,handlerOffset:handlerOffset,layoutConfig:layoutConfig,renderItem:renderItem,customAnimation:customAnimation})},mode)});});exports.CarouselLayout=CarouselLayout;var styles=_reactNative.StyleSheet.create({layoutContainer:{display:"flex"},contentContainer:{overflow:"hidden"},itemsHorizontal:{flexDirection:"row"},itemsVertical:{flexDirection:"column"}}); //# sourceMappingURL=CarouselLayout.js.map