react-native-reanimated-carousel 2.3.5 → 2.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/Carousel.js +1 -1
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/hooks/useCommonVariables.js +1 -1
- package/lib/commonjs/hooks/useCommonVariables.js.map +1 -1
- package/lib/commonjs/hooks/useInitProps.js +1 -1
- package/lib/commonjs/hooks/useInitProps.js.map +1 -1
- package/lib/commonjs/hooks/useOnProgressChange.js +1 -1
- package/lib/commonjs/hooks/useOnProgressChange.js.map +1 -1
- package/lib/commonjs/utils/computedWithAutoFillData.js +2 -0
- package/lib/commonjs/utils/computedWithAutoFillData.js.map +1 -0
- package/lib/module/Carousel.js +12 -13
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/hooks/useCommonVariables.js +3 -6
- package/lib/module/hooks/useCommonVariables.js.map +1 -1
- package/lib/module/hooks/useInitProps.js +9 -14
- package/lib/module/hooks/useInitProps.js.map +1 -1
- package/lib/module/hooks/useOnProgressChange.js +13 -9
- package/lib/module/hooks/useOnProgressChange.js.map +1 -1
- package/lib/module/utils/computedWithAutoFillData.js +85 -0
- package/lib/module/utils/computedWithAutoFillData.js.map +1 -0
- package/lib/typescript/exampleBare/App.d.ts +2 -0
- package/lib/typescript/{Carousel.d.ts → src/Carousel.d.ts} +0 -0
- package/lib/typescript/{LazyView.d.ts → src/LazyView.d.ts} +0 -0
- package/lib/typescript/{ScrollViewGesture.d.ts → src/ScrollViewGesture.d.ts} +0 -0
- package/lib/typescript/{constants → src/constants}/index.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useAutoPlay.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useCarouselController.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useCheckMounted.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useCommonVariables.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useInitProps.d.ts +1 -1
- package/lib/typescript/{hooks → src/hooks}/useLayoutConfig.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useOffsetX.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useOnProgressChange.d.ts +2 -0
- package/lib/typescript/{hooks → src/hooks}/usePropsErrorBoundary.d.ts +0 -0
- package/lib/typescript/{hooks → src/hooks}/useVisibleRanges.d.ts +0 -0
- package/lib/typescript/{index.d.ts → src/index.d.ts} +0 -0
- package/lib/typescript/{layouts → src/layouts}/BaseLayout.d.ts +0 -0
- package/lib/typescript/{layouts → src/layouts}/ParallaxLayout.d.ts +0 -0
- package/lib/typescript/{layouts → src/layouts}/index.d.ts +0 -0
- package/lib/typescript/{layouts → src/layouts}/normal.d.ts +0 -0
- package/lib/typescript/{layouts → src/layouts}/parallax.d.ts +0 -0
- package/lib/typescript/{layouts → src/layouts}/stack.d.ts +0 -0
- package/lib/typescript/{store → src/store}/index.d.ts +0 -0
- package/lib/typescript/{types.d.ts → src/types.d.ts} +8 -1
- package/lib/typescript/src/utils/computedWithAutoFillData.d.ts +18 -0
- package/lib/typescript/{utils → src/utils}/dealWithAnimation.d.ts +0 -0
- package/lib/typescript/{utils → src/utils}/log.d.ts +0 -0
- package/package.json +1 -1
- package/src/Carousel.tsx +18 -11
- package/src/hooks/useCommonVariables.ts +2 -6
- package/src/hooks/useInitProps.ts +14 -14
- package/src/hooks/useOnProgressChange.ts +20 -10
- package/src/types.ts +8 -0
- package/src/utils/computedWithAutoFillData.ts +76 -0
package/lib/commonjs/Carousel.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _useCarouselController=require("./hooks/useCarouselController");var _useAutoPlay2=require("./hooks/useAutoPlay");var _usePropsErrorBoundary=require("./hooks/usePropsErrorBoundary");var _ScrollViewGesture=require("./ScrollViewGesture");var _useVisibleRanges=require("./hooks/useVisibleRanges");var _reactNative=require("react-native");var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _useCarouselController=require("./hooks/useCarouselController");var _useAutoPlay2=require("./hooks/useAutoPlay");var _usePropsErrorBoundary=require("./hooks/usePropsErrorBoundary");var _ScrollViewGesture=require("./ScrollViewGesture");var _useVisibleRanges=require("./hooks/useVisibleRanges");var _reactNative=require("react-native");var _BaseLayout=require("./layouts/BaseLayout");var _useLayoutConfig=require("./hooks/useLayoutConfig");var _useInitProps=require("./hooks/useInitProps");var _store=require("./store");var _useCommonVariables=require("./hooks/useCommonVariables");var _useOnProgressChange=require("./hooks/useOnProgressChange");var _computedWithAutoFillData=require("./utils/computedWithAutoFillData");var _this=this,_jsxFileName="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/Carousel.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var Carousel=_react.default.forwardRef(function(_props,ref){var props=(0,_useInitProps.useInitProps)(_props);var data=props.data,rawData=props.rawData,loop=props.loop,autoFillData=props.autoFillData,mode=props.mode,style=props.style,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,renderItem=props.renderItem,onScrollEnd=props.onScrollEnd,onSnapToItem=props.onSnapToItem,_onScrollBegin=props.onScrollBegin,onProgressChange=props.onProgressChange,customAnimation=props.customAnimation,defaultIndex=props.defaultIndex;var commonVariables=(0,_useCommonVariables.useCommonVariables)(props);var size=commonVariables.size,handlerOffsetX=commonVariables.handlerOffsetX;var dataLength=data.length;var offsetX=(0,_reactNativeReanimated.useDerivedValue)(function(){var _f=function _f(){var totalSize=size*dataLength;var x=handlerOffsetX.value%totalSize;if(!loop){return handlerOffsetX.value;}return isNaN(x)?0:x;};_f._closure={size:size,dataLength:dataLength,handlerOffsetX:handlerOffsetX,loop:loop};_f.asString="function _f(){const{size,dataLength,handlerOffsetX,loop}=jsThis._closure;{const totalSize=size*dataLength;const x=handlerOffsetX.value%totalSize;if(!loop){return handlerOffsetX.value;}return isNaN(x)?0:x;}}";_f.__workletHash=17456063948631;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/Carousel.tsx (53:40)";global.__reanimatedWorkletInit(_f);return _f;}(),[loop,size,dataLength]);(0,_usePropsErrorBoundary.usePropsErrorBoundary)(props);(0,_useOnProgressChange.useOnProgressChange)({autoFillData:autoFillData,loop:loop,size:size,offsetX:offsetX,rawData:rawData,onProgressChange:onProgressChange});var carouselController=(0,_useCarouselController.useCarouselController)({loop:loop,size:size,handlerOffsetX:handlerOffsetX,length:data.length,disable:!data.length,withAnimation:withAnimation,originalLength:data.length,defaultIndex:defaultIndex,onScrollEnd:function onScrollEnd(){return(0,_reactNativeReanimated.runOnJS)(_onScrollEnd)();},onScrollBegin:function onScrollBegin(){return!!_onScrollBegin&&(0,_reactNativeReanimated.runOnJS)(_onScrollBegin)();},onChange:function onChange(i){return!!onSnapToItem&&(0,_reactNativeReanimated.runOnJS)(onSnapToItem)(i);},duration:scrollAnimationDuration});var next=carouselController.next,prev=carouselController.prev,sharedPreIndex=carouselController.sharedPreIndex,sharedIndex=carouselController.sharedIndex,computedIndex=carouselController.computedIndex,getCurrentIndex=carouselController.getCurrentIndex;var _useAutoPlay=(0,_useAutoPlay2.useAutoPlay)({autoPlay:autoPlay,autoPlayInterval:autoPlayInterval,autoPlayReverse:autoPlayReverse,carouselController:carouselController}),start=_useAutoPlay.start,pause=_useAutoPlay.pause;var _onScrollEnd=_react.default.useCallback(function(){computedIndex();onScrollEnd==null?void 0:onScrollEnd(sharedPreIndex.current,sharedIndex.current);},[sharedPreIndex,sharedIndex,computedIndex,onScrollEnd]);var scrollViewGestureOnScrollBegin=_react.default.useCallback(function(){pause();_onScrollBegin==null?void 0:_onScrollBegin();},[_onScrollBegin,pause]);var scrollViewGestureOnScrollEnd=_react.default.useCallback(function(){start();_onScrollEnd();},[_onScrollEnd,start]);var scrollViewGestureOnTouchBegin=_react.default.useCallback(pause,[pause]);var scrollViewGestureOnTouchEnd=_react.default.useCallback(start,[start]);var goToIndex=_react.default.useCallback(function(i,animated){carouselController.to(i,animated);},[carouselController]);_react.default.useImperativeHandle(ref,function(){return{next:next,prev:prev,getCurrentIndex:getCurrentIndex,goToIndex:goToIndex,scrollTo:carouselController.scrollTo};},[getCurrentIndex,goToIndex,next,prev,carouselController.scrollTo]);var visibleRanges=(0,_useVisibleRanges.useVisibleRanges)({total:data.length,viewSize:size,translation:handlerOffsetX,windowSize:windowSize});var layoutConfig=(0,_useLayoutConfig.useLayoutConfig)(_objectSpread(_objectSpread({},props),{},{size:size}));var renderLayout=_react.default.useCallback(function(item,i){var realIndex=(0,_computedWithAutoFillData.computedRealIndexWithAutoFillData)({index:i,dataLength:rawData.length,loop:loop,autoFillData:autoFillData});return _react.default.createElement(_BaseLayout.BaseLayout,{key:i,index:i,handlerOffsetX:offsetX,visibleRanges:visibleRanges,animationStyle:customAnimation||layoutConfig,__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:21}},function(_ref){var animationValue=_ref.animationValue;return renderItem({item:item,index:realIndex,animationValue:animationValue});});},[loop,rawData,offsetX,visibleRanges,autoFillData,renderItem,layoutConfig,customAnimation]);return _react.default.createElement(_store.CTX.Provider,{value:{props:props,common:commonVariables},__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:[styles.container,{width:width||'100%',height:height||'100%'}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:17}},_react.default.createElement(_ScrollViewGesture.ScrollViewGesture,{size:size,translation:handlerOffsetX,onScrollBegin:scrollViewGestureOnScrollBegin,onScrollEnd:scrollViewGestureOnScrollEnd,onTouchBegin:scrollViewGestureOnTouchBegin,onTouchEnd:scrollViewGestureOnTouchEnd,__self:_this,__source:{fileName:_jsxFileName,lineNumber:204,columnNumber:21}},_react.default.createElement(_reactNativeReanimated.default.View,{key:mode,style:[styles.container,{width:width||'100%',height:height||'100%'},style,vertical?styles.itemsVertical:styles.itemsHorizontal],__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:25}},data.map(renderLayout)))));});var _default=Carousel;exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{overflow:'hidden'},itemsHorizontal:{flexDirection:'row'},itemsVertical:{flexDirection:'column'}});
|
|
2
2
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["Carousel","React","forwardRef","_props","ref","props","data","rawData","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffsetX","dataLength","length","offsetX","totalSize","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","duration","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","start","pause","useCallback","current","scrollViewGestureOnScrollBegin","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","goToIndex","animated","to","useImperativeHandle","scrollTo","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\n\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\n\nimport type { ICarouselInstance, TCarouselProps } from './types';\nimport { StyleSheet, View } from 'react-native';\nimport { DATA_LENGTH } from './constants';\nimport { BaseLayout } from './layouts/BaseLayout';\nimport { useLayoutConfig } from './hooks/useLayoutConfig';\nimport { useInitProps } from './hooks/useInitProps';\nimport { CTX } from './store';\nimport { useCommonVariables } from './hooks/useCommonVariables';\nimport { useOnProgressChange } from './hooks/useOnProgressChange';\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n (_props, ref) => {\n const props = useInitProps(_props);\n\n const {\n data,\n rawData,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\n scrollAnimationDuration,\n withAnimation,\n renderItem,\n onScrollEnd,\n onSnapToItem,\n onScrollBegin,\n onProgressChange,\n customAnimation,\n defaultIndex,\n } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n const dataLength = data.length;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * dataLength;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, dataLength]);\n\n usePropsErrorBoundary(props);\n useOnProgressChange({ size, offsetX, rawData, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n withAnimation,\n originalLength: data.length,\n defaultIndex,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: scrollAnimationDuration,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { start, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n start();\n _onScrollEnd();\n }, [_onScrollEnd, start]);\n\n const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);\n\n const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);\n\n const goToIndex = React.useCallback(\n (i: number, animated?: boolean) => {\n carouselController.to(i, animated);\n },\n [carouselController]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n next,\n prev,\n getCurrentIndex,\n goToIndex,\n scrollTo: carouselController.scrollTo,\n }),\n [\n getCurrentIndex,\n goToIndex,\n next,\n prev,\n carouselController.scrollTo,\n ]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: any, i: number) => {\n let realIndex = i;\n if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {\n realIndex = i % 2;\n }\n\n return (\n <BaseLayout\n key={i}\n index={i}\n handlerOffsetX={offsetX}\n visibleRanges={visibleRanges}\n animationStyle={customAnimation || layoutConfig}\n >\n {({ animationValue }) =>\n renderItem({\n item,\n index: realIndex,\n animationValue,\n })\n }\n </BaseLayout>\n );\n },\n [\n rawData,\n offsetX,\n visibleRanges,\n renderItem,\n layoutConfig,\n customAnimation,\n ]\n );\n\n return (\n <CTX.Provider value={{ props, common: commonVariables }}>\n <View\n style={[\n styles.container,\n { width: width || '100%', height: height || '100%' },\n style,\n ]}\n >\n <ScrollViewGesture\n size={size}\n translation={handlerOffsetX}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n onTouchBegin={scrollViewGestureOnTouchBegin}\n onTouchEnd={scrollViewGestureOnTouchEnd}\n >\n <Animated.View\n key={mode}\n style={[\n styles.container,\n {\n width: width || '100%',\n height: height || '100%',\n },\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\n </CTX.Provider>\n );\n }\n);\n\nexport default Carousel as <T extends any>(\n props: React.PropsWithChildren<TCarouselProps<T>>\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: 'hidden',\n },\n itemsHorizontal: {\n flexDirection: 'row',\n },\n itemsVertical: {\n flexDirection: 'column',\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Carousel.tsx"],"names":["Carousel","React","forwardRef","_props","ref","props","data","rawData","loop","autoFillData","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffsetX","dataLength","length","offsetX","totalSize","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","duration","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","start","pause","useCallback","current","scrollViewGestureOnScrollBegin","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","goToIndex","animated","to","useImperativeHandle","scrollTo","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","index","animationValue","common","styles","container","itemsVertical","itemsHorizontal","map","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\n\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\n\nimport type { ICarouselInstance, TCarouselProps } from './types';\nimport { StyleSheet, View } from 'react-native';\nimport { BaseLayout } from './layouts/BaseLayout';\nimport { useLayoutConfig } from './hooks/useLayoutConfig';\nimport { useInitProps } from './hooks/useInitProps';\nimport { CTX } from './store';\nimport { useCommonVariables } from './hooks/useCommonVariables';\nimport { useOnProgressChange } from './hooks/useOnProgressChange';\nimport { computedRealIndexWithAutoFillData } from './utils/computedWithAutoFillData';\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n (_props, ref) => {\n const props = useInitProps(_props);\n\n const {\n data,\n rawData,\n loop,\n autoFillData,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\n scrollAnimationDuration,\n withAnimation,\n renderItem,\n onScrollEnd,\n onSnapToItem,\n onScrollBegin,\n onProgressChange,\n customAnimation,\n defaultIndex,\n } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n const dataLength = data.length;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * dataLength;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, dataLength]);\n\n usePropsErrorBoundary(props);\n useOnProgressChange({\n autoFillData,\n loop,\n size,\n offsetX,\n rawData,\n onProgressChange,\n });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n withAnimation,\n originalLength: data.length,\n defaultIndex,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: scrollAnimationDuration,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { start, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n start();\n _onScrollEnd();\n }, [_onScrollEnd, start]);\n\n const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);\n\n const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);\n\n const goToIndex = React.useCallback(\n (i: number, animated?: boolean) => {\n carouselController.to(i, animated);\n },\n [carouselController]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n next,\n prev,\n getCurrentIndex,\n goToIndex,\n scrollTo: carouselController.scrollTo,\n }),\n [\n getCurrentIndex,\n goToIndex,\n next,\n prev,\n carouselController.scrollTo,\n ]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: any, i: number) => {\n const realIndex = computedRealIndexWithAutoFillData({\n index: i,\n dataLength: rawData.length,\n loop,\n autoFillData,\n });\n\n return (\n <BaseLayout\n key={i}\n index={i}\n handlerOffsetX={offsetX}\n visibleRanges={visibleRanges}\n animationStyle={customAnimation || layoutConfig}\n >\n {({ animationValue }) =>\n renderItem({\n item,\n index: realIndex,\n animationValue,\n })\n }\n </BaseLayout>\n );\n },\n [\n loop,\n rawData,\n offsetX,\n visibleRanges,\n autoFillData,\n renderItem,\n layoutConfig,\n customAnimation,\n ]\n );\n\n return (\n <CTX.Provider value={{ props, common: commonVariables }}>\n <View\n style={[\n styles.container,\n { width: width || '100%', height: height || '100%' },\n ]}\n >\n <ScrollViewGesture\n size={size}\n translation={handlerOffsetX}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n onTouchBegin={scrollViewGestureOnTouchBegin}\n onTouchEnd={scrollViewGestureOnTouchEnd}\n >\n <Animated.View\n key={mode}\n style={[\n styles.container,\n {\n width: width || '100%',\n height: height || '100%',\n },\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\n </CTX.Provider>\n );\n }\n);\n\nexport default Carousel as <T extends any>(\n props: React.PropsWithChildren<TCarouselProps<T>>\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: 'hidden',\n },\n itemsHorizontal: {\n flexDirection: 'row',\n },\n itemsVertical: {\n flexDirection: 'column',\n },\n});\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useCommonVariables=useCommonVariables;var _react=_interopRequireDefault(require("react"));var _reactNativeReanimated=require("react-native-reanimated");function useCommonVariables(props){var vertical=props.vertical,height=props.height,width=props.width,data=props.data,defaultIndex=props.defaultIndex;var size=vertical?height:width;var validLength=data.length-1;var defaultHandlerOffsetX=-Math.abs(defaultIndex*size);var handlerOffsetX=(0,_reactNativeReanimated.useSharedValue)(defaultHandlerOffsetX);_react.default.useEffect(function(){handlerOffsetX.value=defaultHandlerOffsetX;},[vertical,handlerOffsetX,defaultHandlerOffsetX]);return{size:size,validLength:validLength,handlerOffsetX:handlerOffsetX};}
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useCommonVariables=useCommonVariables;var _react=_interopRequireDefault(require("react"));var _reactNativeReanimated=require("react-native-reanimated");function useCommonVariables(props){var vertical=props.vertical,height=props.height,width=props.width,data=props.data,defaultIndex=props.defaultIndex,rawData=props.rawData;var size=vertical?height:width;var validLength=data.length-1;var defaultHandlerOffsetX=-Math.abs(defaultIndex*size);var handlerOffsetX=(0,_reactNativeReanimated.useSharedValue)(defaultHandlerOffsetX);_react.default.useEffect(function(){handlerOffsetX.value=defaultHandlerOffsetX;},[vertical,handlerOffsetX,defaultHandlerOffsetX,rawData]);return{size:size,validLength:validLength,handlerOffsetX:handlerOffsetX};}
|
|
2
2
|
//# sourceMappingURL=useCommonVariables.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCommonVariables.ts"],"names":["useCommonVariables","props","vertical","height","width","data","defaultIndex","size","validLength","length","defaultHandlerOffsetX","Math","abs","handlerOffsetX","React","useEffect","value"],"mappings":"0LAAA,oDACA,8DASO,QAASA,CAAAA,kBAAT,CACHC,KADG,CAEa,CAChB,GAAQC,CAAAA,QAAR,
|
|
1
|
+
{"version":3,"sources":["useCommonVariables.ts"],"names":["useCommonVariables","props","vertical","height","width","data","defaultIndex","rawData","size","validLength","length","defaultHandlerOffsetX","Math","abs","handlerOffsetX","React","useEffect","value"],"mappings":"0LAAA,oDACA,8DASO,QAASA,CAAAA,kBAAT,CACHC,KADG,CAEa,CAChB,GAAQC,CAAAA,QAAR,CAAiED,KAAjE,CAAQC,QAAR,CAAkBC,MAAlB,CAAiEF,KAAjE,CAAkBE,MAAlB,CAA0BC,KAA1B,CAAiEH,KAAjE,CAA0BG,KAA1B,CAAiCC,IAAjC,CAAiEJ,KAAjE,CAAiCI,IAAjC,CAAuCC,YAAvC,CAAiEL,KAAjE,CAAuCK,YAAvC,CAAqDC,OAArD,CAAiEN,KAAjE,CAAqDM,OAArD,CACA,GAAMC,CAAAA,IAAI,CAAGN,QAAQ,CAAGC,MAAH,CAAYC,KAAjC,CACA,GAAMK,CAAAA,WAAW,CAAGJ,IAAI,CAACK,MAAL,CAAc,CAAlC,CACA,GAAMC,CAAAA,qBAAqB,CAAG,CAACC,IAAI,CAACC,GAAL,CAASP,YAAY,CAAGE,IAAxB,CAA/B,CACA,GAAMM,CAAAA,cAAc,CAAG,0CAAuBH,qBAAvB,CAAvB,CAEAI,eAAMC,SAAN,CAAgB,UAAM,CAClBF,cAAc,CAACG,KAAf,CAAuBN,qBAAvB,CACH,CAFD,CAEG,CAACT,QAAD,CAAWY,cAAX,CAA2BH,qBAA3B,CAAkDJ,OAAlD,CAFH,EAIA,MAAO,CACHC,IAAI,CAAJA,IADG,CAEHC,WAAW,CAAXA,WAFG,CAGHK,cAAc,CAAdA,cAHG,CAAP,CAKH","sourcesContent":["import React from 'react';\nimport Animated, { useSharedValue } from 'react-native-reanimated';\nimport type { TInitializeCarouselProps } from './useInitProps';\n\ninterface ICommonVariables {\n size: number;\n validLength: number;\n handlerOffsetX: Animated.SharedValue<number>;\n}\n\nexport function useCommonVariables(\n props: TInitializeCarouselProps<any>\n): ICommonVariables {\n const { vertical, height, width, data, defaultIndex, rawData } = props;\n const size = vertical ? height : width;\n const validLength = data.length - 1;\n const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);\n const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);\n\n React.useEffect(() => {\n handlerOffsetX.value = defaultHandlerOffsetX;\n }, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);\n\n return {\n size,\n validLength,\n handlerOffsetX,\n };\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useInitProps=useInitProps;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useInitProps=useInitProps;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _computedWithAutoFillData=require("../utils/computedWithAutoFillData");var _react=_interopRequireDefault(require("react"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function useInitProps(props){var _props$enableSnap;var _props$defaultIndex=props.defaultIndex,defaultIndex=_props$defaultIndex===void 0?0:_props$defaultIndex,_props$data=props.data,rawData=_props$data===void 0?[]:_props$data,_props$loop=props.loop,loop=_props$loop===void 0?true:_props$loop,_props$enabled=props.enabled,enabled=_props$enabled===void 0?true:_props$enabled,_props$autoPlayInterv=props.autoPlayInterval,_autoPlayInterval=_props$autoPlayInterv===void 0?1000:_props$autoPlayInterv,_props$scrollAnimatio=props.scrollAnimationDuration,scrollAnimationDuration=_props$scrollAnimatio===void 0?500:_props$scrollAnimatio,_props$style=props.style,style=_props$style===void 0?{}:_props$style,_props$panGestureHand=props.panGestureHandlerProps,panGestureHandlerProps=_props$panGestureHand===void 0?{}:_props$panGestureHand,_props$pagingEnabled=props.pagingEnabled,pagingEnabled=_props$pagingEnabled===void 0?true:_props$pagingEnabled,_props$autoFillData=props.autoFillData,autoFillData=_props$autoFillData===void 0?true:_props$autoFillData,_props$snapEnabled=props.snapEnabled,snapEnabled=_props$snapEnabled===void 0?(_props$enableSnap=props.enableSnap)!=null?_props$enableSnap:true:_props$snapEnabled,_width=props.width,_height=props.height;var width=Math.round(_width||0);var height=Math.round(_height||0);var autoPlayInterval=Math.max(_autoPlayInterval,0);var data=_react.default.useMemo(function(){return(0,_computedWithAutoFillData.computedFillDataWithAutoFillData)({loop:loop,autoFillData:autoFillData,data:rawData,dataLength:rawData.length});},[rawData,loop,autoFillData]);if(props.mode==='vertical-stack'||props.mode==='horizontal-stack'){var _props$modeConfig$sho,_props$modeConfig;if(!props.modeConfig){props.modeConfig={};}props.modeConfig.showLength=(_props$modeConfig$sho=(_props$modeConfig=props.modeConfig)==null?void 0:_props$modeConfig.showLength)!=null?_props$modeConfig$sho:data.length-1;}return _objectSpread(_objectSpread({},props),{},{defaultIndex:defaultIndex,autoFillData:autoFillData,data:data,rawData:rawData,loop:loop,enabled:enabled,autoPlayInterval:autoPlayInterval,scrollAnimationDuration:scrollAnimationDuration,style:style,panGestureHandlerProps:panGestureHandlerProps,pagingEnabled:pagingEnabled,snapEnabled:snapEnabled,width:width,height:height});}
|
|
2
2
|
//# sourceMappingURL=useInitProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInitProps.ts"],"names":["useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","snapEnabled","enableSnap","_width","width","_height","height","Math","round","max","React","useMemo","
|
|
1
|
+
{"version":3,"sources":["useInitProps.ts"],"names":["useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","autoFillData","snapEnabled","enableSnap","_width","width","_height","height","Math","round","max","React","useMemo","dataLength","length","mode","modeConfig","showLength"],"mappings":"4QAAA,2EACA,oD,kxBAsBO,QAASA,CAAAA,YAAT,CACHC,KADG,CAEwB,uBAC3B,wBAcIA,KAdJ,CACIC,YADJ,CACIA,YADJ,8BACmB,CADnB,iCAcID,KAdJ,CAEIE,IAFJ,CAEUC,OAFV,sBAEoB,EAFpB,yBAcIH,KAdJ,CAGII,IAHJ,CAGIA,IAHJ,sBAGW,IAHX,4BAcIJ,KAdJ,CAIIK,OAJJ,CAIIA,OAJJ,yBAIc,IAJd,sCAcIL,KAdJ,CAKIM,gBALJ,CAKsBC,iBALtB,gCAK0C,IAL1C,6CAcIP,KAdJ,CAMIQ,uBANJ,CAMIA,uBANJ,gCAM8B,GAN9B,oCAcIR,KAdJ,CAOIS,KAPJ,CAOIA,KAPJ,uBAOY,EAPZ,oCAcIT,KAdJ,CAQIU,sBARJ,CAQIA,sBARJ,gCAQ6B,EAR7B,4CAcIV,KAdJ,CASIW,aATJ,CASIA,aATJ,+BASoB,IATpB,0CAcIX,KAdJ,CAUIY,YAVJ,CAUIA,YAVJ,8BAUmB,IAVnB,wCAcIZ,KAdJ,CAWIa,WAXJ,CAWIA,WAXJ,gDAWkBb,KAAK,CAACc,UAXxB,0BAWsC,IAXtC,oBAYWC,MAZX,CAcIf,KAdJ,CAYIgB,KAZJ,CAaYC,OAbZ,CAcIjB,KAdJ,CAaIkB,MAbJ,CAgBA,GAAMF,CAAAA,KAAK,CAAGG,IAAI,CAACC,KAAL,CAAWL,MAAM,EAAI,CAArB,CAAd,CACA,GAAMG,CAAAA,MAAM,CAAGC,IAAI,CAACC,KAAL,CAAWH,OAAO,EAAI,CAAtB,CAAf,CACA,GAAMX,CAAAA,gBAAgB,CAAGa,IAAI,CAACE,GAAL,CAASd,iBAAT,CAA4B,CAA5B,CAAzB,CAEA,GAAML,CAAAA,IAAI,CAAGoB,eAAMC,OAAN,CACT,iBACI,+DAAoC,CAChCnB,IAAI,CAAJA,IADgC,CAEhCQ,YAAY,CAAZA,YAFgC,CAGhCV,IAAI,CAAEC,OAH0B,CAIhCqB,UAAU,CAAErB,OAAO,CAACsB,MAJY,CAApC,CADJ,EADS,CAQT,CAACtB,OAAD,CAAUC,IAAV,CAAgBQ,YAAhB,CARS,CAAb,CAWA,GAAIZ,KAAK,CAAC0B,IAAN,GAAe,gBAAf,EAAmC1B,KAAK,CAAC0B,IAAN,GAAe,kBAAtD,CAA0E,6CACtE,GAAI,CAAC1B,KAAK,CAAC2B,UAAX,CAAuB,CACnB3B,KAAK,CAAC2B,UAAN,CAAmB,EAAnB,CACH,CACD3B,KAAK,CAAC2B,UAAN,CAAiBC,UAAjB,2CACI5B,KAAK,CAAC2B,UADV,eACI,kBAAkBC,UADtB,8BACoC1B,IAAI,CAACuB,MAAL,CAAc,CADlD,CAEH,CACD,sCACOzB,KADP,MAEIC,YAAY,CAAZA,YAFJ,CAGIW,YAAY,CAAZA,YAHJ,CAIIV,IAAI,CAAJA,IAJJ,CAKIC,OAAO,CAAPA,OALJ,CAMIC,IAAI,CAAJA,IANJ,CAOIC,OAAO,CAAPA,OAPJ,CAQIC,gBAAgB,CAAhBA,gBARJ,CASIE,uBAAuB,CAAvBA,uBATJ,CAUIC,KAAK,CAALA,KAVJ,CAWIC,sBAAsB,CAAtBA,sBAXJ,CAYIC,aAAa,CAAbA,aAZJ,CAaIE,WAAW,CAAXA,WAbJ,CAcIG,KAAK,CAALA,KAdJ,CAeIE,MAAM,CAANA,MAfJ,GAiBH","sourcesContent":["import { computedFillDataWithAutoFillData } from '@/utils/computedWithAutoFillData';\nimport React from 'react';\nimport type { TCarouselProps } from '../types';\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\n P,\n Required<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\n TGetRequiredProps<\n | 'defaultIndex'\n | 'loop'\n | 'width'\n | 'height'\n | 'scrollAnimationDuration'\n | 'autoPlayInterval'\n | 'autoFillData'\n > & {\n // Raw data that has not been processed\n rawData: T[];\n };\n\nexport function useInitProps<T>(\n props: TCarouselProps<T>\n): TInitializeCarouselProps<T> {\n const {\n defaultIndex = 0,\n data: rawData = [],\n loop = true,\n enabled = true,\n autoPlayInterval: _autoPlayInterval = 1000,\n scrollAnimationDuration = 500,\n style = {},\n panGestureHandlerProps = {},\n pagingEnabled = true,\n autoFillData = true,\n snapEnabled = props.enableSnap ?? true,\n width: _width,\n height: _height,\n } = props;\n\n const width = Math.round(_width || 0);\n const height = Math.round(_height || 0);\n const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n const data = React.useMemo<T[]>(\n () =>\n computedFillDataWithAutoFillData<T>({\n loop,\n autoFillData,\n data: rawData,\n dataLength: rawData.length,\n }),\n [rawData, loop, autoFillData]\n );\n\n if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {\n if (!props.modeConfig) {\n props.modeConfig = {};\n }\n props.modeConfig.showLength =\n props.modeConfig?.showLength ?? data.length - 1;\n }\n return {\n ...props,\n defaultIndex,\n autoFillData,\n data,\n rawData,\n loop,\n enabled,\n autoPlayInterval,\n scrollAnimationDuration,\n style,\n panGestureHandlerProps,\n pagingEnabled,\n snapEnabled,\n width,\n height,\n };\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.useOnProgressChange=useOnProgressChange;var _reactNativeReanimated=require("react-native-reanimated");var
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.useOnProgressChange=useOnProgressChange;var _reactNativeReanimated=require("react-native-reanimated");var _computedWithAutoFillData=require("../utils/computedWithAutoFillData");function useOnProgressChange(opts){var autoFillData=opts.autoFillData,loop=opts.loop,offsetX=opts.offsetX,rawData=opts.rawData,size=opts.size,onProgressChange=opts.onProgressChange;var rawDataLength=rawData.length;(0,_reactNativeReanimated.useAnimatedReaction)(function(){var _f=function _f(){return offsetX.value;};_f._closure={offsetX:offsetX};_f.asString="function _f(){const{offsetX}=jsThis._closure;{return offsetX.value;}}";_f.__workletHash=11091407603539;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/hooks/useOnProgressChange.ts (23:8)";global.__reanimatedWorkletInit(_f);return _f;}(),function(){var _f=function _f(_value){var value=(0,_computedWithAutoFillData.computedOffsetXValueWithAutoFillData)({value:_value,rawDataLength:rawDataLength,size:size,autoFillData:autoFillData,loop:loop});if(!loop){value=Math.max(-((rawDataLength-1)*size),Math.min(value,0));}var absoluteProgress=Math.abs(value/size);if(value>0){absoluteProgress=rawDataLength-absoluteProgress;}!!onProgressChange&&(0,_reactNativeReanimated.runOnJS)(onProgressChange)(value,absoluteProgress);};_f._closure={computedOffsetXValueWithAutoFillData:_computedWithAutoFillData.computedOffsetXValueWithAutoFillData,rawDataLength:rawDataLength,size:size,autoFillData:autoFillData,loop:loop,onProgressChange:onProgressChange,runOnJS:_reactNativeReanimated.runOnJS};_f.asString="function _f(_value){const{computedOffsetXValueWithAutoFillData,rawDataLength,size,autoFillData,loop,onProgressChange,runOnJS}=jsThis._closure;{let value=computedOffsetXValueWithAutoFillData({value:_value,rawDataLength:rawDataLength,size:size,autoFillData:autoFillData,loop:loop});if(!loop){value=Math.max(-((rawDataLength-1)*size),Math.min(value,0));}let absoluteProgress=Math.abs(value/size);if(value>0){absoluteProgress=rawDataLength-absoluteProgress;}!!onProgressChange&&runOnJS(onProgressChange)(value,absoluteProgress);}}";_f.__workletHash=10178584953814;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/hooks/useOnProgressChange.ts (24:8)";global.__reanimatedWorkletInit(_f);return _f;}(),[loop,autoFillData,rawDataLength,onProgressChange]);}
|
|
2
2
|
//# sourceMappingURL=useOnProgressChange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOnProgressChange.ts"],"names":["useOnProgressChange","opts","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","
|
|
1
|
+
{"version":3,"sources":["useOnProgressChange.ts"],"names":["useOnProgressChange","opts","autoFillData","loop","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","Math","max","min","absoluteProgress","abs","computedOffsetXValueWithAutoFillData","runOnJS"],"mappings":"yGAAA,8DAIA,2EAGO,QAASA,CAAAA,mBAAT,CACHC,IADG,CAQL,CACE,GAAQC,CAAAA,YAAR,CACID,IADJ,CAAQC,YAAR,CAAsBC,IAAtB,CACIF,IADJ,CAAsBE,IAAtB,CAA4BC,OAA5B,CACIH,IADJ,CAA4BG,OAA5B,CAAqCC,OAArC,CACIJ,IADJ,CAAqCI,OAArC,CAA8CC,IAA9C,CACIL,IADJ,CAA8CK,IAA9C,CAAoDC,gBAApD,CACIN,IADJ,CAAoDM,gBAApD,CAGA,GAAMC,CAAAA,aAAa,CAAGH,OAAO,CAACI,MAA9B,CAEA,iEACI,oBAAML,CAAAA,OAAO,CAACM,KAAd,EADJ,sBApBGN,OAoBH,sTAEKO,MAFL,CAEgB,CACR,GAAID,CAAAA,KAAK,CAAG,mEAAqC,CAC7CA,KAAK,CAAEC,MADsC,CAE7CH,aAAa,CAAbA,aAF6C,CAG7CF,IAAI,CAAJA,IAH6C,CAI7CJ,YAAY,CAAZA,YAJ6C,CAK7CC,IAAI,CAAJA,IAL6C,CAArC,CAAZ,CAQA,GAAI,CAACA,IAAL,CAAW,CACPO,KAAK,CAAGE,IAAI,CAACC,GAAL,CACJ,EAAE,CAACL,aAAa,CAAG,CAAjB,EAAsBF,IAAxB,CADI,CAEJM,IAAI,CAACE,GAAL,CAASJ,KAAT,CAAgB,CAAhB,CAFI,CAAR,CAIH,CAED,GAAIK,CAAAA,gBAAgB,CAAGH,IAAI,CAACI,GAAL,CAASN,KAAK,CAAGJ,IAAjB,CAAvB,CAEA,GAAII,KAAK,CAAG,CAAZ,CAAe,CACXK,gBAAgB,CAAGP,aAAa,CAAGO,gBAAnC,CACH,CAED,CAAC,CAACR,gBAAF,EACI,mCAAQA,gBAAR,EAA0BG,KAA1B,CAAiCK,gBAAjC,CADJ,CAEH,CA1BL,mDAnBUE,8DAmBV,eAJmBT,aAInB,MAPsCF,IAOtC,cAfAJ,YAeA,MAXGC,IAWH,kBAD4BI,gBAC5B,SADoBW,8BACpB,iuBA2BI,CAACf,IAAD,CAAOD,YAAP,CAAqBM,aAArB,CAAoCD,gBAApC,CA3BJ,EA6BH","sourcesContent":["import Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport { computedOffsetXValueWithAutoFillData } from '@/utils/computedWithAutoFillData';\nimport type { TCarouselProps } from '../types';\n\nexport function useOnProgressChange(\n opts: {\n size: number;\n autoFillData: boolean;\n loop: boolean;\n offsetX: Animated.SharedValue<number>;\n rawData: TCarouselProps['data'];\n } & Pick<TCarouselProps, 'onProgressChange'>\n) {\n const { autoFillData, loop, offsetX, rawData, size, onProgressChange } =\n opts;\n\n const rawDataLength = rawData.length;\n\n useAnimatedReaction(\n () => offsetX.value,\n (_value) => {\n let value = computedOffsetXValueWithAutoFillData({\n value: _value,\n rawDataLength,\n size,\n autoFillData,\n loop,\n });\n\n if (!loop) {\n value = Math.max(\n -((rawDataLength - 1) * size),\n Math.min(value, 0)\n );\n }\n\n let absoluteProgress = Math.abs(value / size);\n\n if (value > 0) {\n absoluteProgress = rawDataLength - absoluteProgress;\n }\n\n !!onProgressChange &&\n runOnJS(onProgressChange)(value, absoluteProgress);\n },\n [loop, autoFillData, rawDataLength, onProgressChange]\n );\n}\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.computedFillDataWithAutoFillData=computedFillDataWithAutoFillData;exports.computedOffsetXValueWithAutoFillData=void 0;exports.computedRealIndexWithAutoFillData=computedRealIndexWithAutoFillData;var _constants=require("../constants");var SINGLE_ITEM=_constants.DATA_LENGTH.SINGLE_ITEM,DOUBLE_ITEM=_constants.DATA_LENGTH.DOUBLE_ITEM;var isAutoFillData=function(){var _f=function _f(params){return!!params.loop&&!!params.autoFillData;};_f._closure={};_f.asString="function isAutoFillData(params){return!!params.loop&&!!params.autoFillData;}";_f.__workletHash=12581181073993;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/utils/computedWithAutoFillData.ts (5:0)";global.__reanimatedWorkletInit(_f);return _f;}();var computedOffsetXValueWithAutoFillData=function(){var _f=function _f(params){var rawDataLength=params.rawDataLength,value=params.value,size=params.size,loop=params.loop,autoFillData=params.autoFillData;if(isAutoFillData({loop:loop,autoFillData:autoFillData})){switch(rawDataLength){case SINGLE_ITEM:return value%size;case DOUBLE_ITEM:return value%(size*2);}}return value;};_f._closure={isAutoFillData:isAutoFillData,SINGLE_ITEM:SINGLE_ITEM,DOUBLE_ITEM:DOUBLE_ITEM};_f.asString="function computedOffsetXValueWithAutoFillData(params){const{isAutoFillData,SINGLE_ITEM,DOUBLE_ITEM}=jsThis._closure;{const{rawDataLength:rawDataLength,value:value,size:size,loop:loop,autoFillData:autoFillData}=params;if(isAutoFillData({loop:loop,autoFillData:autoFillData})){switch(rawDataLength){case SINGLE_ITEM:return value%size;case DOUBLE_ITEM:return value%(size*2);}}return value;}}";_f.__workletHash=8949924672961;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/utils/computedWithAutoFillData.ts (15:7)";global.__reanimatedWorkletInit(_f);return _f;}();exports.computedOffsetXValueWithAutoFillData=computedOffsetXValueWithAutoFillData;function computedRealIndexWithAutoFillData(params){var index=params.index,dataLength=params.dataLength,loop=params.loop,autoFillData=params.autoFillData;if(isAutoFillData({loop:loop,autoFillData:autoFillData})){switch(dataLength){case SINGLE_ITEM:return index%1;case DOUBLE_ITEM:return index%2;}}return index;}function computedFillDataWithAutoFillData(params){var data=params.data,loop=params.loop,autoFillData=params.autoFillData,dataLength=params.dataLength;if(isAutoFillData({loop:loop,autoFillData:autoFillData})){switch(dataLength){case SINGLE_ITEM:return[data[0],data[0],data[0]];case DOUBLE_ITEM:return[data[0],data[1],data[0],data[1]];}}return data;}
|
|
2
|
+
//# sourceMappingURL=computedWithAutoFillData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["computedWithAutoFillData.ts"],"names":["SINGLE_ITEM","DATA_LENGTH","DOUBLE_ITEM","isAutoFillData","params","loop","autoFillData","computedOffsetXValueWithAutoFillData","rawDataLength","value","size","computedRealIndexWithAutoFillData","index","dataLength","computedFillDataWithAutoFillData","data"],"mappings":"mQAAA,uCAEA,GAAQA,CAAAA,WAAR,CAAqCC,sBAArC,CAAQD,WAAR,CAAqBE,WAArB,CAAqCD,sBAArC,CAAqBC,WAArB,C,GAESC,CAAAA,c,+BAAeC,M,CAAkD,CAEtE,MAAO,CAAC,CAACA,MAAM,CAACC,IAAT,EAAiB,CAAC,CAACD,MAAM,CAACE,YAAjC,CACH,C,oTAOeC,CAAAA,oC,+BACZH,M,CAKF,CAGE,GAAQI,CAAAA,aAAR,CAA2DJ,MAA3D,CAAQI,aAAR,CAAuBC,KAAvB,CAA2DL,MAA3D,CAAuBK,KAAvB,CAA8BC,IAA9B,CAA2DN,MAA3D,CAA8BM,IAA9B,CAAoCL,IAApC,CAA2DD,MAA3D,CAAoCC,IAApC,CAA0CC,YAA1C,CAA2DF,MAA3D,CAA0CE,YAA1C,CAEA,GAAIH,cAAc,CAAC,CAAEE,IAAI,CAAJA,IAAF,CAAQC,YAAY,CAAZA,YAAR,CAAD,CAAlB,CAA4C,CACxC,OAAQE,aAAR,EACI,IAAKR,CAAAA,WAAL,CACI,MAAOS,CAAAA,KAAK,CAAGC,IAAf,CACJ,IAAKR,CAAAA,WAAL,CACI,MAAOO,CAAAA,KAAK,EAAIC,IAAI,CAAG,CAAX,CAAZ,CAJR,CAMH,CAED,MAAOD,CAAAA,KAAP,CACH,C,6BArBKN,c,aAKKH,W,aAGAE,W,6qBAeJ,QAASS,CAAAA,iCAAT,CACHP,MADG,CAKL,CACE,GAAQQ,CAAAA,KAAR,CAAkDR,MAAlD,CAAQQ,KAAR,CAAeC,UAAf,CAAkDT,MAAlD,CAAeS,UAAf,CAA2BR,IAA3B,CAAkDD,MAAlD,CAA2BC,IAA3B,CAAiCC,YAAjC,CAAkDF,MAAlD,CAAiCE,YAAjC,CAEA,GAAIH,cAAc,CAAC,CAAEE,IAAI,CAAJA,IAAF,CAAQC,YAAY,CAAZA,YAAR,CAAD,CAAlB,CAA4C,CACxC,OAAQO,UAAR,EACI,IAAKb,CAAAA,WAAL,CACI,MAAOY,CAAAA,KAAK,CAAG,CAAf,CACJ,IAAKV,CAAAA,WAAL,CACI,MAAOU,CAAAA,KAAK,CAAG,CAAf,CAJR,CAMH,CAED,MAAOA,CAAAA,KAAP,CACH,CAEM,QAASE,CAAAA,gCAAT,CACHV,MADG,CAKA,CACH,GAAQW,CAAAA,IAAR,CAAiDX,MAAjD,CAAQW,IAAR,CAAcV,IAAd,CAAiDD,MAAjD,CAAcC,IAAd,CAAoBC,YAApB,CAAiDF,MAAjD,CAAoBE,YAApB,CAAkCO,UAAlC,CAAiDT,MAAjD,CAAkCS,UAAlC,CAEA,GAAIV,cAAc,CAAC,CAAEE,IAAI,CAAJA,IAAF,CAAQC,YAAY,CAAZA,YAAR,CAAD,CAAlB,CAA4C,CACxC,OAAQO,UAAR,EACI,IAAKb,CAAAA,WAAL,CACI,MAAO,CAACe,IAAI,CAAC,CAAD,CAAL,CAAUA,IAAI,CAAC,CAAD,CAAd,CAAmBA,IAAI,CAAC,CAAD,CAAvB,CAAP,CACJ,IAAKb,CAAAA,WAAL,CACI,MAAO,CAACa,IAAI,CAAC,CAAD,CAAL,CAAUA,IAAI,CAAC,CAAD,CAAd,CAAmBA,IAAI,CAAC,CAAD,CAAvB,CAA4BA,IAAI,CAAC,CAAD,CAAhC,CAAP,CAJR,CAMH,CAED,MAAOA,CAAAA,IAAP,CACH","sourcesContent":["import { DATA_LENGTH } from 'src/constants';\n\nconst { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;\n\nfunction isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {\n 'worklet';\n return !!params.loop && !!params.autoFillData;\n}\n\ntype BaseParams<T extends object = {}> = {\n autoFillData: boolean;\n loop: boolean;\n} & T;\n\nexport function computedOffsetXValueWithAutoFillData(\n params: BaseParams<{\n rawDataLength: number;\n value: number;\n size: number;\n }>\n) {\n 'worklet';\n\n const { rawDataLength, value, size, loop, autoFillData } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (rawDataLength) {\n case SINGLE_ITEM:\n return value % size;\n case DOUBLE_ITEM:\n return value % (size * 2);\n }\n }\n\n return value;\n}\n\nexport function computedRealIndexWithAutoFillData(\n params: BaseParams<{\n index: number;\n dataLength: number;\n }>\n) {\n const { index, dataLength, loop, autoFillData } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (dataLength) {\n case SINGLE_ITEM:\n return index % 1;\n case DOUBLE_ITEM:\n return index % 2;\n }\n }\n\n return index;\n}\n\nexport function computedFillDataWithAutoFillData<T>(\n params: BaseParams<{\n data: T[];\n dataLength: number;\n }>\n): T[] {\n const { data, loop, autoFillData, dataLength } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (dataLength) {\n case SINGLE_ITEM:\n return [data[0], data[0], data[0]];\n case DOUBLE_ITEM:\n return [data[0], data[1], data[0], data[1]];\n }\n }\n\n return data;\n}\n"]}
|
package/lib/module/Carousel.js
CHANGED
|
@@ -6,19 +6,20 @@ import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
|
|
|
6
6
|
import { ScrollViewGesture } from './ScrollViewGesture';
|
|
7
7
|
import { useVisibleRanges } from './hooks/useVisibleRanges';
|
|
8
8
|
import { StyleSheet, View } from 'react-native';
|
|
9
|
-
import { DATA_LENGTH } from './constants';
|
|
10
9
|
import { BaseLayout } from './layouts/BaseLayout';
|
|
11
10
|
import { useLayoutConfig } from './hooks/useLayoutConfig';
|
|
12
11
|
import { useInitProps } from './hooks/useInitProps';
|
|
13
12
|
import { CTX } from './store';
|
|
14
13
|
import { useCommonVariables } from './hooks/useCommonVariables';
|
|
15
14
|
import { useOnProgressChange } from './hooks/useOnProgressChange';
|
|
15
|
+
import { computedRealIndexWithAutoFillData } from './utils/computedWithAutoFillData';
|
|
16
16
|
const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
17
17
|
const props = useInitProps(_props);
|
|
18
18
|
const {
|
|
19
19
|
data,
|
|
20
20
|
rawData,
|
|
21
21
|
loop,
|
|
22
|
+
autoFillData,
|
|
22
23
|
mode,
|
|
23
24
|
style,
|
|
24
25
|
width,
|
|
@@ -56,6 +57,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
56
57
|
}, [loop, size, dataLength]);
|
|
57
58
|
usePropsErrorBoundary(props);
|
|
58
59
|
useOnProgressChange({
|
|
60
|
+
autoFillData,
|
|
61
|
+
loop,
|
|
59
62
|
size,
|
|
60
63
|
offsetX,
|
|
61
64
|
rawData,
|
|
@@ -129,16 +132,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
129
132
|
size
|
|
130
133
|
});
|
|
131
134
|
const renderLayout = React.useCallback((item, i) => {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
|
|
139
|
-
realIndex = i % 2;
|
|
140
|
-
}
|
|
141
|
-
|
|
135
|
+
const realIndex = computedRealIndexWithAutoFillData({
|
|
136
|
+
index: i,
|
|
137
|
+
dataLength: rawData.length,
|
|
138
|
+
loop,
|
|
139
|
+
autoFillData
|
|
140
|
+
});
|
|
142
141
|
return /*#__PURE__*/React.createElement(BaseLayout, {
|
|
143
142
|
key: i,
|
|
144
143
|
index: i,
|
|
@@ -155,7 +154,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
155
154
|
animationValue
|
|
156
155
|
});
|
|
157
156
|
});
|
|
158
|
-
}, [rawData, offsetX, visibleRanges, renderItem, layoutConfig, customAnimation]);
|
|
157
|
+
}, [loop, rawData, offsetX, visibleRanges, autoFillData, renderItem, layoutConfig, customAnimation]);
|
|
159
158
|
return /*#__PURE__*/React.createElement(CTX.Provider, {
|
|
160
159
|
value: {
|
|
161
160
|
props,
|
|
@@ -165,7 +164,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
165
164
|
style: [styles.container, {
|
|
166
165
|
width: width || '100%',
|
|
167
166
|
height: height || '100%'
|
|
168
|
-
}
|
|
167
|
+
}]
|
|
169
168
|
}, /*#__PURE__*/React.createElement(ScrollViewGesture, {
|
|
170
169
|
size: size,
|
|
171
170
|
translation: handlerOffsetX,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["React","Animated","runOnJS","useDerivedValue","useCarouselController","useAutoPlay","usePropsErrorBoundary","ScrollViewGesture","useVisibleRanges","StyleSheet","View","DATA_LENGTH","BaseLayout","useLayoutConfig","useInitProps","CTX","useCommonVariables","useOnProgressChange","Carousel","forwardRef","_props","ref","props","data","rawData","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffsetX","dataLength","length","offsetX","totalSize","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","duration","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","start","pause","useCallback","current","scrollViewGestureOnScrollBegin","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","goToIndex","animated","to","useImperativeHandle","scrollTo","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\n\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\n\nimport type { ICarouselInstance, TCarouselProps } from './types';\nimport { StyleSheet, View } from 'react-native';\nimport { DATA_LENGTH } from './constants';\nimport { BaseLayout } from './layouts/BaseLayout';\nimport { useLayoutConfig } from './hooks/useLayoutConfig';\nimport { useInitProps } from './hooks/useInitProps';\nimport { CTX } from './store';\nimport { useCommonVariables } from './hooks/useCommonVariables';\nimport { useOnProgressChange } from './hooks/useOnProgressChange';\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n (_props, ref) => {\n const props = useInitProps(_props);\n\n const {\n data,\n rawData,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\n scrollAnimationDuration,\n withAnimation,\n renderItem,\n onScrollEnd,\n onSnapToItem,\n onScrollBegin,\n onProgressChange,\n customAnimation,\n defaultIndex,\n } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n const dataLength = data.length;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * dataLength;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, dataLength]);\n\n usePropsErrorBoundary(props);\n useOnProgressChange({ size, offsetX, rawData, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n withAnimation,\n originalLength: data.length,\n defaultIndex,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: scrollAnimationDuration,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { start, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n start();\n _onScrollEnd();\n }, [_onScrollEnd, start]);\n\n const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);\n\n const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);\n\n const goToIndex = React.useCallback(\n (i: number, animated?: boolean) => {\n carouselController.to(i, animated);\n },\n [carouselController]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n next,\n prev,\n getCurrentIndex,\n goToIndex,\n scrollTo: carouselController.scrollTo,\n }),\n [\n getCurrentIndex,\n goToIndex,\n next,\n prev,\n carouselController.scrollTo,\n ]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: any, i: number) => {\n let realIndex = i;\n if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {\n realIndex = i % 2;\n }\n\n return (\n <BaseLayout\n key={i}\n index={i}\n handlerOffsetX={offsetX}\n visibleRanges={visibleRanges}\n animationStyle={customAnimation || layoutConfig}\n >\n {({ animationValue }) =>\n renderItem({\n item,\n index: realIndex,\n animationValue,\n })\n }\n </BaseLayout>\n );\n },\n [\n rawData,\n offsetX,\n visibleRanges,\n renderItem,\n layoutConfig,\n customAnimation,\n ]\n );\n\n return (\n <CTX.Provider value={{ props, common: commonVariables }}>\n <View\n style={[\n styles.container,\n { width: width || '100%', height: height || '100%' },\n style,\n ]}\n >\n <ScrollViewGesture\n size={size}\n translation={handlerOffsetX}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n onTouchBegin={scrollViewGestureOnTouchBegin}\n onTouchEnd={scrollViewGestureOnTouchEnd}\n >\n <Animated.View\n key={mode}\n style={[\n styles.container,\n {\n width: width || '100%',\n height: height || '100%',\n },\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\n </CTX.Provider>\n );\n }\n);\n\nexport default Carousel as <T extends any>(\n props: React.PropsWithChildren<TCarouselProps<T>>\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: 'hidden',\n },\n itemsHorizontal: {\n flexDirection: 'row',\n },\n itemsVertical: {\n flexDirection: 'column',\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Carousel.tsx"],"names":["React","Animated","runOnJS","useDerivedValue","useCarouselController","useAutoPlay","usePropsErrorBoundary","ScrollViewGesture","useVisibleRanges","StyleSheet","View","BaseLayout","useLayoutConfig","useInitProps","CTX","useCommonVariables","useOnProgressChange","computedRealIndexWithAutoFillData","Carousel","forwardRef","_props","ref","props","data","rawData","loop","autoFillData","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffsetX","dataLength","length","offsetX","totalSize","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","duration","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","start","pause","useCallback","current","scrollViewGestureOnScrollBegin","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","goToIndex","animated","to","useImperativeHandle","scrollTo","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","index","animationValue","common","styles","container","itemsVertical","itemsHorizontal","map","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\n\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\n\nimport type { ICarouselInstance, TCarouselProps } from './types';\nimport { StyleSheet, View } from 'react-native';\nimport { BaseLayout } from './layouts/BaseLayout';\nimport { useLayoutConfig } from './hooks/useLayoutConfig';\nimport { useInitProps } from './hooks/useInitProps';\nimport { CTX } from './store';\nimport { useCommonVariables } from './hooks/useCommonVariables';\nimport { useOnProgressChange } from './hooks/useOnProgressChange';\nimport { computedRealIndexWithAutoFillData } from './utils/computedWithAutoFillData';\n\nconst Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(\n (_props, ref) => {\n const props = useInitProps(_props);\n\n const {\n data,\n rawData,\n loop,\n autoFillData,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\n scrollAnimationDuration,\n withAnimation,\n renderItem,\n onScrollEnd,\n onSnapToItem,\n onScrollBegin,\n onProgressChange,\n customAnimation,\n defaultIndex,\n } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n const dataLength = data.length;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * dataLength;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, dataLength]);\n\n usePropsErrorBoundary(props);\n useOnProgressChange({\n autoFillData,\n loop,\n size,\n offsetX,\n rawData,\n onProgressChange,\n });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n withAnimation,\n originalLength: data.length,\n defaultIndex,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: scrollAnimationDuration,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { start, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n start();\n _onScrollEnd();\n }, [_onScrollEnd, start]);\n\n const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);\n\n const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);\n\n const goToIndex = React.useCallback(\n (i: number, animated?: boolean) => {\n carouselController.to(i, animated);\n },\n [carouselController]\n );\n\n React.useImperativeHandle(\n ref,\n () => ({\n next,\n prev,\n getCurrentIndex,\n goToIndex,\n scrollTo: carouselController.scrollTo,\n }),\n [\n getCurrentIndex,\n goToIndex,\n next,\n prev,\n carouselController.scrollTo,\n ]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: any, i: number) => {\n const realIndex = computedRealIndexWithAutoFillData({\n index: i,\n dataLength: rawData.length,\n loop,\n autoFillData,\n });\n\n return (\n <BaseLayout\n key={i}\n index={i}\n handlerOffsetX={offsetX}\n visibleRanges={visibleRanges}\n animationStyle={customAnimation || layoutConfig}\n >\n {({ animationValue }) =>\n renderItem({\n item,\n index: realIndex,\n animationValue,\n })\n }\n </BaseLayout>\n );\n },\n [\n loop,\n rawData,\n offsetX,\n visibleRanges,\n autoFillData,\n renderItem,\n layoutConfig,\n customAnimation,\n ]\n );\n\n return (\n <CTX.Provider value={{ props, common: commonVariables }}>\n <View\n style={[\n styles.container,\n { width: width || '100%', height: height || '100%' },\n ]}\n >\n <ScrollViewGesture\n size={size}\n translation={handlerOffsetX}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n onTouchBegin={scrollViewGestureOnTouchBegin}\n onTouchEnd={scrollViewGestureOnTouchEnd}\n >\n <Animated.View\n key={mode}\n style={[\n styles.container,\n {\n width: width || '100%',\n height: height || '100%',\n },\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\n </CTX.Provider>\n );\n }\n);\n\nexport default Carousel as <T extends any>(\n props: React.PropsWithChildren<TCarouselProps<T>>\n) => React.ReactElement;\n\nconst styles = StyleSheet.create({\n container: {\n overflow: 'hidden',\n },\n itemsHorizontal: {\n flexDirection: 'row',\n },\n itemsVertical: {\n flexDirection: 'column',\n },\n});\n"]}
|
|
@@ -6,19 +6,16 @@ export function useCommonVariables(props) {
|
|
|
6
6
|
height,
|
|
7
7
|
width,
|
|
8
8
|
data,
|
|
9
|
-
defaultIndex
|
|
9
|
+
defaultIndex,
|
|
10
|
+
rawData
|
|
10
11
|
} = props;
|
|
11
12
|
const size = vertical ? height : width;
|
|
12
13
|
const validLength = data.length - 1;
|
|
13
14
|
const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);
|
|
14
15
|
const handlerOffsetX = useSharedValue(defaultHandlerOffsetX);
|
|
15
16
|
React.useEffect(() => {
|
|
16
|
-
/**
|
|
17
|
-
* TODO @dohooo @gxxgcn
|
|
18
|
-
* #163 add deps with rawData.
|
|
19
|
-
**/
|
|
20
17
|
handlerOffsetX.value = defaultHandlerOffsetX;
|
|
21
|
-
}, [vertical, handlerOffsetX, defaultHandlerOffsetX]);
|
|
18
|
+
}, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);
|
|
22
19
|
return {
|
|
23
20
|
size,
|
|
24
21
|
validLength,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCommonVariables.ts"],"names":["React","useSharedValue","useCommonVariables","props","vertical","height","width","data","defaultIndex","size","validLength","length","defaultHandlerOffsetX","Math","abs","handlerOffsetX","useEffect","value"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAmBC,cAAnB,QAAyC,yBAAzC;AASA,OAAO,SAASC,kBAAT,CACHC,KADG,EAEa;AAChB,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA,KAApB;AAA2BC,IAAAA,IAA3B;AAAiCC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["useCommonVariables.ts"],"names":["React","useSharedValue","useCommonVariables","props","vertical","height","width","data","defaultIndex","rawData","size","validLength","length","defaultHandlerOffsetX","Math","abs","handlerOffsetX","useEffect","value"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAmBC,cAAnB,QAAyC,yBAAzC;AASA,OAAO,SAASC,kBAAT,CACHC,KADG,EAEa;AAChB,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA,KAApB;AAA2BC,IAAAA,IAA3B;AAAiCC,IAAAA,YAAjC;AAA+CC,IAAAA;AAA/C,MAA2DN,KAAjE;AACA,QAAMO,IAAI,GAAGN,QAAQ,GAAGC,MAAH,GAAYC,KAAjC;AACA,QAAMK,WAAW,GAAGJ,IAAI,CAACK,MAAL,GAAc,CAAlC;AACA,QAAMC,qBAAqB,GAAG,CAACC,IAAI,CAACC,GAAL,CAASP,YAAY,GAAGE,IAAxB,CAA/B;AACA,QAAMM,cAAc,GAAGf,cAAc,CAASY,qBAAT,CAArC;AAEAb,EAAAA,KAAK,CAACiB,SAAN,CAAgB,MAAM;AAClBD,IAAAA,cAAc,CAACE,KAAf,GAAuBL,qBAAvB;AACH,GAFD,EAEG,CAACT,QAAD,EAAWY,cAAX,EAA2BH,qBAA3B,EAAkDJ,OAAlD,CAFH;AAIA,SAAO;AACHC,IAAAA,IADG;AAEHC,IAAAA,WAFG;AAGHK,IAAAA;AAHG,GAAP;AAKH","sourcesContent":["import React from 'react';\nimport Animated, { useSharedValue } from 'react-native-reanimated';\nimport type { TInitializeCarouselProps } from './useInitProps';\n\ninterface ICommonVariables {\n size: number;\n validLength: number;\n handlerOffsetX: Animated.SharedValue<number>;\n}\n\nexport function useCommonVariables(\n props: TInitializeCarouselProps<any>\n): ICommonVariables {\n const { vertical, height, width, data, defaultIndex, rawData } = props;\n const size = vertical ? height : width;\n const validLength = data.length - 1;\n const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);\n const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);\n\n React.useEffect(() => {\n handlerOffsetX.value = defaultHandlerOffsetX;\n }, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);\n\n return {\n size,\n validLength,\n handlerOffsetX,\n };\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { computedFillDataWithAutoFillData } from '@/utils/computedWithAutoFillData';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { DATA_LENGTH } from '../constants';
|
|
3
3
|
export function useInitProps(props) {
|
|
4
4
|
var _props$enableSnap;
|
|
5
5
|
|
|
@@ -13,6 +13,7 @@ export function useInitProps(props) {
|
|
|
13
13
|
style = {},
|
|
14
14
|
panGestureHandlerProps = {},
|
|
15
15
|
pagingEnabled = true,
|
|
16
|
+
autoFillData = true,
|
|
16
17
|
snapEnabled = (_props$enableSnap = props.enableSnap) !== null && _props$enableSnap !== void 0 ? _props$enableSnap : true,
|
|
17
18
|
width: _width,
|
|
18
19
|
height: _height
|
|
@@ -20,19 +21,12 @@ export function useInitProps(props) {
|
|
|
20
21
|
const width = Math.round(_width || 0);
|
|
21
22
|
const height = Math.round(_height || 0);
|
|
22
23
|
const autoPlayInterval = Math.max(_autoPlayInterval, 0);
|
|
23
|
-
const data = React.useMemo(() => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
|
|
31
|
-
return [rawData[0], rawData[1], rawData[0], rawData[1]];
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return rawData;
|
|
35
|
-
}, [rawData, loop]);
|
|
24
|
+
const data = React.useMemo(() => computedFillDataWithAutoFillData({
|
|
25
|
+
loop,
|
|
26
|
+
autoFillData,
|
|
27
|
+
data: rawData,
|
|
28
|
+
dataLength: rawData.length
|
|
29
|
+
}), [rawData, loop, autoFillData]);
|
|
36
30
|
|
|
37
31
|
if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
|
|
38
32
|
var _props$modeConfig$sho, _props$modeConfig;
|
|
@@ -46,6 +40,7 @@ export function useInitProps(props) {
|
|
|
46
40
|
|
|
47
41
|
return { ...props,
|
|
48
42
|
defaultIndex,
|
|
43
|
+
autoFillData,
|
|
49
44
|
data,
|
|
50
45
|
rawData,
|
|
51
46
|
loop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInitProps.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["useInitProps.ts"],"names":["computedFillDataWithAutoFillData","React","useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","autoFillData","snapEnabled","enableSnap","width","_width","height","_height","Math","round","max","useMemo","dataLength","length","mode","modeConfig","showLength"],"mappings":"AAAA,SAASA,gCAAT,QAAiD,kCAAjD;AACA,OAAOC,KAAP,MAAkB,OAAlB;AAsBA,OAAO,SAASC,YAAT,CACHC,KADG,EAEwB;AAAA;;AAC3B,QAAM;AACFC,IAAAA,YAAY,GAAG,CADb;AAEFC,IAAAA,IAAI,EAAEC,OAAO,GAAG,EAFd;AAGFC,IAAAA,IAAI,GAAG,IAHL;AAIFC,IAAAA,OAAO,GAAG,IAJR;AAKFC,IAAAA,gBAAgB,EAAEC,iBAAiB,GAAG,IALpC;AAMFC,IAAAA,uBAAuB,GAAG,GANxB;AAOFC,IAAAA,KAAK,GAAG,EAPN;AAQFC,IAAAA,sBAAsB,GAAG,EARvB;AASFC,IAAAA,aAAa,GAAG,IATd;AAUFC,IAAAA,YAAY,GAAG,IAVb;AAWFC,IAAAA,WAAW,wBAAGb,KAAK,CAACc,UAAT,iEAAuB,IAXhC;AAYFC,IAAAA,KAAK,EAAEC,MAZL;AAaFC,IAAAA,MAAM,EAAEC;AAbN,MAcFlB,KAdJ;AAgBA,QAAMe,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWJ,MAAM,IAAI,CAArB,CAAd;AACA,QAAMC,MAAM,GAAGE,IAAI,CAACC,KAAL,CAAWF,OAAO,IAAI,CAAtB,CAAf;AACA,QAAMZ,gBAAgB,GAAGa,IAAI,CAACE,GAAL,CAASd,iBAAT,EAA4B,CAA5B,CAAzB;AAEA,QAAML,IAAI,GAAGJ,KAAK,CAACwB,OAAN,CACT,MACIzB,gCAAgC,CAAI;AAChCO,IAAAA,IADgC;AAEhCQ,IAAAA,YAFgC;AAGhCV,IAAAA,IAAI,EAAEC,OAH0B;AAIhCoB,IAAAA,UAAU,EAAEpB,OAAO,CAACqB;AAJY,GAAJ,CAF3B,EAQT,CAACrB,OAAD,EAAUC,IAAV,EAAgBQ,YAAhB,CARS,CAAb;;AAWA,MAAIZ,KAAK,CAACyB,IAAN,KAAe,gBAAf,IAAmCzB,KAAK,CAACyB,IAAN,KAAe,kBAAtD,EAA0E;AAAA;;AACtE,QAAI,CAACzB,KAAK,CAAC0B,UAAX,EAAuB;AACnB1B,MAAAA,KAAK,CAAC0B,UAAN,GAAmB,EAAnB;AACH;;AACD1B,IAAAA,KAAK,CAAC0B,UAAN,CAAiBC,UAAjB,iDACI3B,KAAK,CAAC0B,UADV,sDACI,kBAAkBC,UADtB,yEACoCzB,IAAI,CAACsB,MAAL,GAAc,CADlD;AAEH;;AACD,SAAO,EACH,GAAGxB,KADA;AAEHC,IAAAA,YAFG;AAGHW,IAAAA,YAHG;AAIHV,IAAAA,IAJG;AAKHC,IAAAA,OALG;AAMHC,IAAAA,IANG;AAOHC,IAAAA,OAPG;AAQHC,IAAAA,gBARG;AASHE,IAAAA,uBATG;AAUHC,IAAAA,KAVG;AAWHC,IAAAA,sBAXG;AAYHC,IAAAA,aAZG;AAaHE,IAAAA,WAbG;AAcHE,IAAAA,KAdG;AAeHE,IAAAA;AAfG,GAAP;AAiBH","sourcesContent":["import { computedFillDataWithAutoFillData } from '@/utils/computedWithAutoFillData';\nimport React from 'react';\nimport type { TCarouselProps } from '../types';\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\n P,\n Required<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\n TGetRequiredProps<\n | 'defaultIndex'\n | 'loop'\n | 'width'\n | 'height'\n | 'scrollAnimationDuration'\n | 'autoPlayInterval'\n | 'autoFillData'\n > & {\n // Raw data that has not been processed\n rawData: T[];\n };\n\nexport function useInitProps<T>(\n props: TCarouselProps<T>\n): TInitializeCarouselProps<T> {\n const {\n defaultIndex = 0,\n data: rawData = [],\n loop = true,\n enabled = true,\n autoPlayInterval: _autoPlayInterval = 1000,\n scrollAnimationDuration = 500,\n style = {},\n panGestureHandlerProps = {},\n pagingEnabled = true,\n autoFillData = true,\n snapEnabled = props.enableSnap ?? true,\n width: _width,\n height: _height,\n } = props;\n\n const width = Math.round(_width || 0);\n const height = Math.round(_height || 0);\n const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n const data = React.useMemo<T[]>(\n () =>\n computedFillDataWithAutoFillData<T>({\n loop,\n autoFillData,\n data: rawData,\n dataLength: rawData.length,\n }),\n [rawData, loop, autoFillData]\n );\n\n if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {\n if (!props.modeConfig) {\n props.modeConfig = {};\n }\n props.modeConfig.showLength =\n props.modeConfig?.showLength ?? data.length - 1;\n }\n return {\n ...props,\n defaultIndex,\n autoFillData,\n data,\n rawData,\n loop,\n enabled,\n autoPlayInterval,\n scrollAnimationDuration,\n style,\n panGestureHandlerProps,\n pagingEnabled,\n snapEnabled,\n width,\n height,\n };\n}\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
|
|
2
|
-
import {
|
|
2
|
+
import { computedOffsetXValueWithAutoFillData } from '@/utils/computedWithAutoFillData';
|
|
3
3
|
export function useOnProgressChange(opts) {
|
|
4
4
|
const {
|
|
5
|
+
autoFillData,
|
|
6
|
+
loop,
|
|
5
7
|
offsetX,
|
|
6
8
|
rawData,
|
|
7
9
|
size,
|
|
@@ -9,14 +11,16 @@ export function useOnProgressChange(opts) {
|
|
|
9
11
|
} = opts;
|
|
10
12
|
const rawDataLength = rawData.length;
|
|
11
13
|
useAnimatedReaction(() => offsetX.value, _value => {
|
|
12
|
-
let value =
|
|
14
|
+
let value = computedOffsetXValueWithAutoFillData({
|
|
15
|
+
value: _value,
|
|
16
|
+
rawDataLength,
|
|
17
|
+
size,
|
|
18
|
+
autoFillData,
|
|
19
|
+
loop
|
|
20
|
+
});
|
|
13
21
|
|
|
14
|
-
if (
|
|
15
|
-
value =
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
if (rawDataLength === DATA_LENGTH.DOUBLE_ITEM) {
|
|
19
|
-
value = value % (size * 2);
|
|
22
|
+
if (!loop) {
|
|
23
|
+
value = Math.max(-((rawDataLength - 1) * size), Math.min(value, 0));
|
|
20
24
|
}
|
|
21
25
|
|
|
22
26
|
let absoluteProgress = Math.abs(value / size);
|
|
@@ -26,6 +30,6 @@ export function useOnProgressChange(opts) {
|
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
!!onProgressChange && runOnJS(onProgressChange)(value, absoluteProgress);
|
|
29
|
-
}, [
|
|
33
|
+
}, [loop, autoFillData, rawDataLength, onProgressChange]);
|
|
30
34
|
}
|
|
31
35
|
//# sourceMappingURL=useOnProgressChange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","
|
|
1
|
+
{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","computedOffsetXValueWithAutoFillData","useOnProgressChange","opts","autoFillData","loop","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","Math","max","min","absoluteProgress","abs"],"mappings":"AAAA,SACIA,OADJ,EAEIC,mBAFJ,QAGO,yBAHP;AAIA,SAASC,oCAAT,QAAqD,kCAArD;AAGA,OAAO,SAASC,mBAAT,CACHC,IADG,EAQL;AACE,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,IAAhB;AAAsBC,IAAAA,OAAtB;AAA+BC,IAAAA,OAA/B;AAAwCC,IAAAA,IAAxC;AAA8CC,IAAAA;AAA9C,MACFN,IADJ;AAGA,QAAMO,aAAa,GAAGH,OAAO,CAACI,MAA9B;AAEAX,EAAAA,mBAAmB,CACf,MAAMM,OAAO,CAACM,KADC,EAEdC,MAAD,IAAY;AACR,QAAID,KAAK,GAAGX,oCAAoC,CAAC;AAC7CW,MAAAA,KAAK,EAAEC,MADsC;AAE7CH,MAAAA,aAF6C;AAG7CF,MAAAA,IAH6C;AAI7CJ,MAAAA,YAJ6C;AAK7CC,MAAAA;AAL6C,KAAD,CAAhD;;AAQA,QAAI,CAACA,IAAL,EAAW;AACPO,MAAAA,KAAK,GAAGE,IAAI,CAACC,GAAL,CACJ,EAAE,CAACL,aAAa,GAAG,CAAjB,IAAsBF,IAAxB,CADI,EAEJM,IAAI,CAACE,GAAL,CAASJ,KAAT,EAAgB,CAAhB,CAFI,CAAR;AAIH;;AAED,QAAIK,gBAAgB,GAAGH,IAAI,CAACI,GAAL,CAASN,KAAK,GAAGJ,IAAjB,CAAvB;;AAEA,QAAII,KAAK,GAAG,CAAZ,EAAe;AACXK,MAAAA,gBAAgB,GAAGP,aAAa,GAAGO,gBAAnC;AACH;;AAED,KAAC,CAACR,gBAAF,IACIV,OAAO,CAACU,gBAAD,CAAP,CAA0BG,KAA1B,EAAiCK,gBAAjC,CADJ;AAEH,GA1Bc,EA2Bf,CAACZ,IAAD,EAAOD,YAAP,EAAqBM,aAArB,EAAoCD,gBAApC,CA3Be,CAAnB;AA6BH","sourcesContent":["import Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport { computedOffsetXValueWithAutoFillData } from '@/utils/computedWithAutoFillData';\nimport type { TCarouselProps } from '../types';\n\nexport function useOnProgressChange(\n opts: {\n size: number;\n autoFillData: boolean;\n loop: boolean;\n offsetX: Animated.SharedValue<number>;\n rawData: TCarouselProps['data'];\n } & Pick<TCarouselProps, 'onProgressChange'>\n) {\n const { autoFillData, loop, offsetX, rawData, size, onProgressChange } =\n opts;\n\n const rawDataLength = rawData.length;\n\n useAnimatedReaction(\n () => offsetX.value,\n (_value) => {\n let value = computedOffsetXValueWithAutoFillData({\n value: _value,\n rawDataLength,\n size,\n autoFillData,\n loop,\n });\n\n if (!loop) {\n value = Math.max(\n -((rawDataLength - 1) * size),\n Math.min(value, 0)\n );\n }\n\n let absoluteProgress = Math.abs(value / size);\n\n if (value > 0) {\n absoluteProgress = rawDataLength - absoluteProgress;\n }\n\n !!onProgressChange &&\n runOnJS(onProgressChange)(value, absoluteProgress);\n },\n [loop, autoFillData, rawDataLength, onProgressChange]\n );\n}\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { DATA_LENGTH } from 'src/constants';
|
|
2
|
+
const {
|
|
3
|
+
SINGLE_ITEM,
|
|
4
|
+
DOUBLE_ITEM
|
|
5
|
+
} = DATA_LENGTH;
|
|
6
|
+
|
|
7
|
+
function isAutoFillData(params) {
|
|
8
|
+
'worklet';
|
|
9
|
+
|
|
10
|
+
return !!params.loop && !!params.autoFillData;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function computedOffsetXValueWithAutoFillData(params) {
|
|
14
|
+
'worklet';
|
|
15
|
+
|
|
16
|
+
const {
|
|
17
|
+
rawDataLength,
|
|
18
|
+
value,
|
|
19
|
+
size,
|
|
20
|
+
loop,
|
|
21
|
+
autoFillData
|
|
22
|
+
} = params;
|
|
23
|
+
|
|
24
|
+
if (isAutoFillData({
|
|
25
|
+
loop,
|
|
26
|
+
autoFillData
|
|
27
|
+
})) {
|
|
28
|
+
switch (rawDataLength) {
|
|
29
|
+
case SINGLE_ITEM:
|
|
30
|
+
return value % size;
|
|
31
|
+
|
|
32
|
+
case DOUBLE_ITEM:
|
|
33
|
+
return value % (size * 2);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return value;
|
|
38
|
+
}
|
|
39
|
+
export function computedRealIndexWithAutoFillData(params) {
|
|
40
|
+
const {
|
|
41
|
+
index,
|
|
42
|
+
dataLength,
|
|
43
|
+
loop,
|
|
44
|
+
autoFillData
|
|
45
|
+
} = params;
|
|
46
|
+
|
|
47
|
+
if (isAutoFillData({
|
|
48
|
+
loop,
|
|
49
|
+
autoFillData
|
|
50
|
+
})) {
|
|
51
|
+
switch (dataLength) {
|
|
52
|
+
case SINGLE_ITEM:
|
|
53
|
+
return index % 1;
|
|
54
|
+
|
|
55
|
+
case DOUBLE_ITEM:
|
|
56
|
+
return index % 2;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return index;
|
|
61
|
+
}
|
|
62
|
+
export function computedFillDataWithAutoFillData(params) {
|
|
63
|
+
const {
|
|
64
|
+
data,
|
|
65
|
+
loop,
|
|
66
|
+
autoFillData,
|
|
67
|
+
dataLength
|
|
68
|
+
} = params;
|
|
69
|
+
|
|
70
|
+
if (isAutoFillData({
|
|
71
|
+
loop,
|
|
72
|
+
autoFillData
|
|
73
|
+
})) {
|
|
74
|
+
switch (dataLength) {
|
|
75
|
+
case SINGLE_ITEM:
|
|
76
|
+
return [data[0], data[0], data[0]];
|
|
77
|
+
|
|
78
|
+
case DOUBLE_ITEM:
|
|
79
|
+
return [data[0], data[1], data[0], data[1]];
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return data;
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=computedWithAutoFillData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["computedWithAutoFillData.ts"],"names":["DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","isAutoFillData","params","loop","autoFillData","computedOffsetXValueWithAutoFillData","rawDataLength","value","size","computedRealIndexWithAutoFillData","index","dataLength","computedFillDataWithAutoFillData","data"],"mappings":"AAAA,SAASA,WAAT,QAA4B,eAA5B;AAEA,MAAM;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAA+BF,WAArC;;AAEA,SAASG,cAAT,CAAwBC,MAAxB,EAA0E;AACtE;;AACA,SAAO,CAAC,CAACA,MAAM,CAACC,IAAT,IAAiB,CAAC,CAACD,MAAM,CAACE,YAAjC;AACH;;AAOD,OAAO,SAASC,oCAAT,CACHH,MADG,EAML;AACE;;AAEA,QAAM;AAAEI,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,IAAxB;AAA8BL,IAAAA,IAA9B;AAAoCC,IAAAA;AAApC,MAAqDF,MAA3D;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQE,aAAR;AACI,WAAKP,WAAL;AACI,eAAOQ,KAAK,GAAGC,IAAf;;AACJ,WAAKR,WAAL;AACI,eAAOO,KAAK,IAAIC,IAAI,GAAG,CAAX,CAAZ;AAJR;AAMH;;AAED,SAAOD,KAAP;AACH;AAED,OAAO,SAASE,iCAAT,CACHP,MADG,EAKL;AACE,QAAM;AAAEQ,IAAAA,KAAF;AAASC,IAAAA,UAAT;AAAqBR,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAA4CF,MAAlD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQO,UAAR;AACI,WAAKZ,WAAL;AACI,eAAOW,KAAK,GAAG,CAAf;;AACJ,WAAKV,WAAL;AACI,eAAOU,KAAK,GAAG,CAAf;AAJR;AAMH;;AAED,SAAOA,KAAP;AACH;AAED,OAAO,SAASE,gCAAT,CACHV,MADG,EAKA;AACH,QAAM;AAAEW,IAAAA,IAAF;AAAQV,IAAAA,IAAR;AAAcC,IAAAA,YAAd;AAA4BO,IAAAA;AAA5B,MAA2CT,MAAjD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQO,UAAR;AACI,WAAKZ,WAAL;AACI,eAAO,CAACc,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,CAAP;;AACJ,WAAKb,WAAL;AACI,eAAO,CAACa,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,EAA4BA,IAAI,CAAC,CAAD,CAAhC,CAAP;AAJR;AAMH;;AAED,SAAOA,IAAP;AACH","sourcesContent":["import { DATA_LENGTH } from 'src/constants';\n\nconst { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;\n\nfunction isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {\n 'worklet';\n return !!params.loop && !!params.autoFillData;\n}\n\ntype BaseParams<T extends object = {}> = {\n autoFillData: boolean;\n loop: boolean;\n} & T;\n\nexport function computedOffsetXValueWithAutoFillData(\n params: BaseParams<{\n rawDataLength: number;\n value: number;\n size: number;\n }>\n) {\n 'worklet';\n\n const { rawDataLength, value, size, loop, autoFillData } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (rawDataLength) {\n case SINGLE_ITEM:\n return value % size;\n case DOUBLE_ITEM:\n return value % (size * 2);\n }\n }\n\n return value;\n}\n\nexport function computedRealIndexWithAutoFillData(\n params: BaseParams<{\n index: number;\n dataLength: number;\n }>\n) {\n const { index, dataLength, loop, autoFillData } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (dataLength) {\n case SINGLE_ITEM:\n return index % 1;\n case DOUBLE_ITEM:\n return index % 2;\n }\n }\n\n return index;\n}\n\nexport function computedFillDataWithAutoFillData<T>(\n params: BaseParams<{\n data: T[];\n dataLength: number;\n }>\n): T[] {\n const { data, loop, autoFillData, dataLength } = params;\n\n if (isAutoFillData({ loop, autoFillData })) {\n switch (dataLength) {\n case SINGLE_ITEM:\n return [data[0], data[0], data[0]];\n case DOUBLE_ITEM:\n return [data[0], data[1], data[0], data[1]];\n }\n }\n\n return data;\n}\n"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TCarouselProps } from '../types';
|
|
2
2
|
declare type TGetRequiredProps<P extends keyof TCarouselProps> = Record<P, Required<TCarouselProps>[P]>;
|
|
3
|
-
export declare type TInitializeCarouselProps<T> = TCarouselProps<T> & TGetRequiredProps<'defaultIndex' | 'loop' | 'width' | 'height' | 'scrollAnimationDuration' | 'autoPlayInterval'> & {
|
|
3
|
+
export declare type TInitializeCarouselProps<T> = TCarouselProps<T> & TGetRequiredProps<'defaultIndex' | 'loop' | 'width' | 'height' | 'scrollAnimationDuration' | 'autoPlayInterval' | 'autoFillData'> & {
|
|
4
4
|
rawData: T[];
|
|
5
5
|
};
|
|
6
6
|
export declare function useInitProps<T>(props: TCarouselProps<T>): TInitializeCarouselProps<T>;
|
|
File without changes
|
|
File without changes
|
|
@@ -2,6 +2,8 @@ import Animated from 'react-native-reanimated';
|
|
|
2
2
|
import type { TCarouselProps } from '../types';
|
|
3
3
|
export declare function useOnProgressChange(opts: {
|
|
4
4
|
size: number;
|
|
5
|
+
autoFillData: boolean;
|
|
6
|
+
loop: boolean;
|
|
5
7
|
offsetX: Animated.SharedValue<number>;
|
|
6
8
|
rawData: TCarouselProps['data'];
|
|
7
9
|
} & Pick<TCarouselProps, 'onProgressChange'>): void;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { ViewStyle } from 'react-native';
|
|
3
2
|
import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
|
|
4
3
|
import type { AnimatedStyleProp, WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
|
|
@@ -56,6 +55,14 @@ export declare type TCarouselProps<T = any> = {
|
|
|
56
55
|
* Carousel items data set.
|
|
57
56
|
*/
|
|
58
57
|
data: T[];
|
|
58
|
+
/**
|
|
59
|
+
* Auto fill data array to allow loop playback when the loop props is true.
|
|
60
|
+
* @default true
|
|
61
|
+
* @example
|
|
62
|
+
* [1] => [1, 1, 1]
|
|
63
|
+
* [1, 2] => [1, 2, 1, 2]
|
|
64
|
+
*/
|
|
65
|
+
autoFillData?: boolean;
|
|
59
66
|
/**
|
|
60
67
|
* Default index
|
|
61
68
|
* @default 0
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare type BaseParams<T extends object = {}> = {
|
|
2
|
+
autoFillData: boolean;
|
|
3
|
+
loop: boolean;
|
|
4
|
+
} & T;
|
|
5
|
+
export declare function computedOffsetXValueWithAutoFillData(params: BaseParams<{
|
|
6
|
+
rawDataLength: number;
|
|
7
|
+
value: number;
|
|
8
|
+
size: number;
|
|
9
|
+
}>): number;
|
|
10
|
+
export declare function computedRealIndexWithAutoFillData(params: BaseParams<{
|
|
11
|
+
index: number;
|
|
12
|
+
dataLength: number;
|
|
13
|
+
}>): number;
|
|
14
|
+
export declare function computedFillDataWithAutoFillData<T>(params: BaseParams<{
|
|
15
|
+
data: T[];
|
|
16
|
+
dataLength: number;
|
|
17
|
+
}>): T[];
|
|
18
|
+
export {};
|
|
File without changes
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-reanimated-carousel",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.6",
|
|
4
4
|
"description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"types": "lib/typescript/index.d.ts",
|
package/src/Carousel.tsx
CHANGED
|
@@ -9,13 +9,13 @@ import { useVisibleRanges } from './hooks/useVisibleRanges';
|
|
|
9
9
|
|
|
10
10
|
import type { ICarouselInstance, TCarouselProps } from './types';
|
|
11
11
|
import { StyleSheet, View } from 'react-native';
|
|
12
|
-
import { DATA_LENGTH } from './constants';
|
|
13
12
|
import { BaseLayout } from './layouts/BaseLayout';
|
|
14
13
|
import { useLayoutConfig } from './hooks/useLayoutConfig';
|
|
15
14
|
import { useInitProps } from './hooks/useInitProps';
|
|
16
15
|
import { CTX } from './store';
|
|
17
16
|
import { useCommonVariables } from './hooks/useCommonVariables';
|
|
18
17
|
import { useOnProgressChange } from './hooks/useOnProgressChange';
|
|
18
|
+
import { computedRealIndexWithAutoFillData } from './utils/computedWithAutoFillData';
|
|
19
19
|
|
|
20
20
|
const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
21
21
|
(_props, ref) => {
|
|
@@ -25,6 +25,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
25
25
|
data,
|
|
26
26
|
rawData,
|
|
27
27
|
loop,
|
|
28
|
+
autoFillData,
|
|
28
29
|
mode,
|
|
29
30
|
style,
|
|
30
31
|
width,
|
|
@@ -60,7 +61,14 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
60
61
|
}, [loop, size, dataLength]);
|
|
61
62
|
|
|
62
63
|
usePropsErrorBoundary(props);
|
|
63
|
-
useOnProgressChange({
|
|
64
|
+
useOnProgressChange({
|
|
65
|
+
autoFillData,
|
|
66
|
+
loop,
|
|
67
|
+
size,
|
|
68
|
+
offsetX,
|
|
69
|
+
rawData,
|
|
70
|
+
onProgressChange,
|
|
71
|
+
});
|
|
64
72
|
|
|
65
73
|
const carouselController = useCarouselController({
|
|
66
74
|
loop,
|
|
@@ -148,14 +156,12 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
148
156
|
|
|
149
157
|
const renderLayout = React.useCallback(
|
|
150
158
|
(item: any, i: number) => {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
realIndex = i % 2;
|
|
158
|
-
}
|
|
159
|
+
const realIndex = computedRealIndexWithAutoFillData({
|
|
160
|
+
index: i,
|
|
161
|
+
dataLength: rawData.length,
|
|
162
|
+
loop,
|
|
163
|
+
autoFillData,
|
|
164
|
+
});
|
|
159
165
|
|
|
160
166
|
return (
|
|
161
167
|
<BaseLayout
|
|
@@ -176,9 +182,11 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
176
182
|
);
|
|
177
183
|
},
|
|
178
184
|
[
|
|
185
|
+
loop,
|
|
179
186
|
rawData,
|
|
180
187
|
offsetX,
|
|
181
188
|
visibleRanges,
|
|
189
|
+
autoFillData,
|
|
182
190
|
renderItem,
|
|
183
191
|
layoutConfig,
|
|
184
192
|
customAnimation,
|
|
@@ -191,7 +199,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
191
199
|
style={[
|
|
192
200
|
styles.container,
|
|
193
201
|
{ width: width || '100%', height: height || '100%' },
|
|
194
|
-
style,
|
|
195
202
|
]}
|
|
196
203
|
>
|
|
197
204
|
<ScrollViewGesture
|
|
@@ -11,19 +11,15 @@ interface ICommonVariables {
|
|
|
11
11
|
export function useCommonVariables(
|
|
12
12
|
props: TInitializeCarouselProps<any>
|
|
13
13
|
): ICommonVariables {
|
|
14
|
-
const { vertical, height, width, data, defaultIndex } = props;
|
|
14
|
+
const { vertical, height, width, data, defaultIndex, rawData } = props;
|
|
15
15
|
const size = vertical ? height : width;
|
|
16
16
|
const validLength = data.length - 1;
|
|
17
17
|
const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);
|
|
18
18
|
const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);
|
|
19
19
|
|
|
20
20
|
React.useEffect(() => {
|
|
21
|
-
/**
|
|
22
|
-
* TODO @dohooo @gxxgcn
|
|
23
|
-
* #163 add deps with rawData.
|
|
24
|
-
**/
|
|
25
21
|
handlerOffsetX.value = defaultHandlerOffsetX;
|
|
26
|
-
}, [vertical, handlerOffsetX, defaultHandlerOffsetX]);
|
|
22
|
+
}, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);
|
|
27
23
|
|
|
28
24
|
return {
|
|
29
25
|
size,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { computedFillDataWithAutoFillData } from '@/utils/computedWithAutoFillData';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { DATA_LENGTH } from '../constants';
|
|
3
3
|
import type { TCarouselProps } from '../types';
|
|
4
4
|
|
|
5
5
|
type TGetRequiredProps<P extends keyof TCarouselProps> = Record<
|
|
@@ -15,6 +15,7 @@ export type TInitializeCarouselProps<T> = TCarouselProps<T> &
|
|
|
15
15
|
| 'height'
|
|
16
16
|
| 'scrollAnimationDuration'
|
|
17
17
|
| 'autoPlayInterval'
|
|
18
|
+
| 'autoFillData'
|
|
18
19
|
> & {
|
|
19
20
|
// Raw data that has not been processed
|
|
20
21
|
rawData: T[];
|
|
@@ -33,6 +34,7 @@ export function useInitProps<T>(
|
|
|
33
34
|
style = {},
|
|
34
35
|
panGestureHandlerProps = {},
|
|
35
36
|
pagingEnabled = true,
|
|
37
|
+
autoFillData = true,
|
|
36
38
|
snapEnabled = props.enableSnap ?? true,
|
|
37
39
|
width: _width,
|
|
38
40
|
height: _height,
|
|
@@ -42,19 +44,16 @@ export function useInitProps<T>(
|
|
|
42
44
|
const height = Math.round(_height || 0);
|
|
43
45
|
const autoPlayInterval = Math.max(_autoPlayInterval, 0);
|
|
44
46
|
|
|
45
|
-
const data = React.useMemo<T[]>(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return rawData;
|
|
57
|
-
}, [rawData, loop]);
|
|
47
|
+
const data = React.useMemo<T[]>(
|
|
48
|
+
() =>
|
|
49
|
+
computedFillDataWithAutoFillData<T>({
|
|
50
|
+
loop,
|
|
51
|
+
autoFillData,
|
|
52
|
+
data: rawData,
|
|
53
|
+
dataLength: rawData.length,
|
|
54
|
+
}),
|
|
55
|
+
[rawData, loop, autoFillData]
|
|
56
|
+
);
|
|
58
57
|
|
|
59
58
|
if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
|
|
60
59
|
if (!props.modeConfig) {
|
|
@@ -66,6 +65,7 @@ export function useInitProps<T>(
|
|
|
66
65
|
return {
|
|
67
66
|
...props,
|
|
68
67
|
defaultIndex,
|
|
68
|
+
autoFillData,
|
|
69
69
|
data,
|
|
70
70
|
rawData,
|
|
71
71
|
loop,
|
|
@@ -2,29 +2,39 @@ import Animated, {
|
|
|
2
2
|
runOnJS,
|
|
3
3
|
useAnimatedReaction,
|
|
4
4
|
} from 'react-native-reanimated';
|
|
5
|
-
import {
|
|
5
|
+
import { computedOffsetXValueWithAutoFillData } from '@/utils/computedWithAutoFillData';
|
|
6
6
|
import type { TCarouselProps } from '../types';
|
|
7
7
|
|
|
8
8
|
export function useOnProgressChange(
|
|
9
9
|
opts: {
|
|
10
10
|
size: number;
|
|
11
|
+
autoFillData: boolean;
|
|
12
|
+
loop: boolean;
|
|
11
13
|
offsetX: Animated.SharedValue<number>;
|
|
12
14
|
rawData: TCarouselProps['data'];
|
|
13
15
|
} & Pick<TCarouselProps, 'onProgressChange'>
|
|
14
16
|
) {
|
|
15
|
-
const { offsetX, rawData, size, onProgressChange } =
|
|
17
|
+
const { autoFillData, loop, offsetX, rawData, size, onProgressChange } =
|
|
18
|
+
opts;
|
|
19
|
+
|
|
16
20
|
const rawDataLength = rawData.length;
|
|
21
|
+
|
|
17
22
|
useAnimatedReaction(
|
|
18
23
|
() => offsetX.value,
|
|
19
24
|
(_value) => {
|
|
20
|
-
let value =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
let value = computedOffsetXValueWithAutoFillData({
|
|
26
|
+
value: _value,
|
|
27
|
+
rawDataLength,
|
|
28
|
+
size,
|
|
29
|
+
autoFillData,
|
|
30
|
+
loop,
|
|
31
|
+
});
|
|
25
32
|
|
|
26
|
-
if (
|
|
27
|
-
value =
|
|
33
|
+
if (!loop) {
|
|
34
|
+
value = Math.max(
|
|
35
|
+
-((rawDataLength - 1) * size),
|
|
36
|
+
Math.min(value, 0)
|
|
37
|
+
);
|
|
28
38
|
}
|
|
29
39
|
|
|
30
40
|
let absoluteProgress = Math.abs(value / size);
|
|
@@ -36,6 +46,6 @@ export function useOnProgressChange(
|
|
|
36
46
|
!!onProgressChange &&
|
|
37
47
|
runOnJS(onProgressChange)(value, absoluteProgress);
|
|
38
48
|
},
|
|
39
|
-
[
|
|
49
|
+
[loop, autoFillData, rawDataLength, onProgressChange]
|
|
40
50
|
);
|
|
41
51
|
}
|
package/src/types.ts
CHANGED
|
@@ -69,6 +69,14 @@ export type TCarouselProps<T = any> = {
|
|
|
69
69
|
* Carousel items data set.
|
|
70
70
|
*/
|
|
71
71
|
data: T[];
|
|
72
|
+
/**
|
|
73
|
+
* Auto fill data array to allow loop playback when the loop props is true.
|
|
74
|
+
* @default true
|
|
75
|
+
* @example
|
|
76
|
+
* [1] => [1, 1, 1]
|
|
77
|
+
* [1, 2] => [1, 2, 1, 2]
|
|
78
|
+
*/
|
|
79
|
+
autoFillData?: boolean;
|
|
72
80
|
/**
|
|
73
81
|
* Default index
|
|
74
82
|
* @default 0
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { DATA_LENGTH } from 'src/constants';
|
|
2
|
+
|
|
3
|
+
const { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;
|
|
4
|
+
|
|
5
|
+
function isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {
|
|
6
|
+
'worklet';
|
|
7
|
+
return !!params.loop && !!params.autoFillData;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
type BaseParams<T extends object = {}> = {
|
|
11
|
+
autoFillData: boolean;
|
|
12
|
+
loop: boolean;
|
|
13
|
+
} & T;
|
|
14
|
+
|
|
15
|
+
export function computedOffsetXValueWithAutoFillData(
|
|
16
|
+
params: BaseParams<{
|
|
17
|
+
rawDataLength: number;
|
|
18
|
+
value: number;
|
|
19
|
+
size: number;
|
|
20
|
+
}>
|
|
21
|
+
) {
|
|
22
|
+
'worklet';
|
|
23
|
+
|
|
24
|
+
const { rawDataLength, value, size, loop, autoFillData } = params;
|
|
25
|
+
|
|
26
|
+
if (isAutoFillData({ loop, autoFillData })) {
|
|
27
|
+
switch (rawDataLength) {
|
|
28
|
+
case SINGLE_ITEM:
|
|
29
|
+
return value % size;
|
|
30
|
+
case DOUBLE_ITEM:
|
|
31
|
+
return value % (size * 2);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return value;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function computedRealIndexWithAutoFillData(
|
|
39
|
+
params: BaseParams<{
|
|
40
|
+
index: number;
|
|
41
|
+
dataLength: number;
|
|
42
|
+
}>
|
|
43
|
+
) {
|
|
44
|
+
const { index, dataLength, loop, autoFillData } = params;
|
|
45
|
+
|
|
46
|
+
if (isAutoFillData({ loop, autoFillData })) {
|
|
47
|
+
switch (dataLength) {
|
|
48
|
+
case SINGLE_ITEM:
|
|
49
|
+
return index % 1;
|
|
50
|
+
case DOUBLE_ITEM:
|
|
51
|
+
return index % 2;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return index;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export function computedFillDataWithAutoFillData<T>(
|
|
59
|
+
params: BaseParams<{
|
|
60
|
+
data: T[];
|
|
61
|
+
dataLength: number;
|
|
62
|
+
}>
|
|
63
|
+
): T[] {
|
|
64
|
+
const { data, loop, autoFillData, dataLength } = params;
|
|
65
|
+
|
|
66
|
+
if (isAutoFillData({ loop, autoFillData })) {
|
|
67
|
+
switch (dataLength) {
|
|
68
|
+
case SINGLE_ITEM:
|
|
69
|
+
return [data[0], data[0], data[0]];
|
|
70
|
+
case DOUBLE_ITEM:
|
|
71
|
+
return [data[0], data[1], data[0], data[1]];
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return data;
|
|
76
|
+
}
|