react-native-reanimated-carousel 2.3.2 → 2.3.3
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/README.md +18 -1
- package/README.zh-CN.md +16 -0
- package/lib/commonjs/Carousel.js +1 -1
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/hooks/useOnProgressChange.js +1 -1
- package/lib/commonjs/hooks/useOnProgressChange.js.map +1 -1
- package/lib/module/Carousel.js +3 -2
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/hooks/useOnProgressChange.js +5 -4
- package/lib/module/hooks/useOnProgressChange.js.map +1 -1
- package/package.json +1 -1
- package/src/Carousel.tsx +3 -2
- package/src/hooks/useOnProgressChange.ts +5 -4
package/README.md
CHANGED
|
@@ -74,6 +74,10 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
74
74
|
<a href="./example/src/marquee/index.tsx">
|
|
75
75
|
<img src="assets/marquee.gif" width="300"/>
|
|
76
76
|
</a>
|
|
77
|
+
<br/>
|
|
78
|
+
<a href="./example/src/flow/index.tsx">
|
|
79
|
+
<img src="assets/flow.gif" width="300"/>
|
|
80
|
+
</a>
|
|
77
81
|
</p>
|
|
78
82
|
|
|
79
83
|
## Table of contents
|
|
@@ -119,6 +123,19 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
119
123
|
- Optimizing
|
|
120
124
|
|
|
121
125
|
- When rendering a large number of elements, you can use the 'windowSize' property to control how many items of the current element are rendered. The default is full rendering. After testing without this property, frames will drop when rendering 200 empty views. After setting this property, rendering 1000 empty views is still smooth. (The specific number depends on the phone model tested)
|
|
126
|
+
|
|
127
|
+
- Used in `ScrollView/FlastList`
|
|
128
|
+
|
|
129
|
+
- **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlastList scroll gesture handler:** When using a carousel with a layout oriented to only one direction (vertical/horizontal) and inside a ScrollView/FlatList, it is important for the user experience that the unused axis does not impede the scroll of the list. So that, for example, the x-axis is free we can change the [activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx) of the gesture handler:
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<Carousel
|
|
133
|
+
{...}
|
|
134
|
+
panGestureHandlerProps={{
|
|
135
|
+
activeOffsetX: [-10, 10],
|
|
136
|
+
}}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
122
139
|
|
|
123
140
|
- RTL
|
|
124
141
|
- Support to RTL mode with no more configuration needed. But in RTL mode, need to manually set the autoPlayReverse props for autoplay to control scrolling direction.
|
|
@@ -161,7 +178,7 @@ yarn web:pretty
|
|
|
161
178
|
|
|
162
179
|
<p align="center">
|
|
163
180
|
<a href="./sponsorkit/sponsors.svg">
|
|
164
|
-
<img src='./sponsorkit/sponsors.
|
|
181
|
+
<img src='./sponsorkit/sponsors.png'/>
|
|
165
182
|
</a>
|
|
166
183
|
</p>
|
|
167
184
|
|
package/README.zh-CN.md
CHANGED
|
@@ -74,6 +74,10 @@
|
|
|
74
74
|
<a href="./example/src/marquee/index.tsx">
|
|
75
75
|
<img src="assets/marquee.gif" width="300"/>
|
|
76
76
|
</a>
|
|
77
|
+
<br/>
|
|
78
|
+
<a href="./example/src/flow/index.tsx">
|
|
79
|
+
<img src="assets/flow.gif" width="300"/>
|
|
80
|
+
</a>
|
|
77
81
|
</p>
|
|
78
82
|
|
|
79
83
|
## 目录
|
|
@@ -120,6 +124,18 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
120
124
|
|
|
121
125
|
- 优化
|
|
122
126
|
- 当渲染大量元素时，可使用`windowSize`属性，来控制当前元素的两侧渲染数量，默认为全量渲染。经测试不加此属性，渲染 200 个空 view 时会出现掉帧情况，设置此属性后渲染 1000 个空 view 依旧流畅。（具体数量与测试的手机型号相关）
|
|
127
|
+
- 在`ScrollView/FlastList`中使用
|
|
128
|
+
- **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlastList scroll gesture handler:** 当轮播图被放置在ScrollView/FlatList中时，轮播图的部分将无法控制列表滚动，解决办法是我们只允许手势系统识别某一方向，而不是所有方向，在下方例子中我们为了让列表可以向下滑动，所以我们使用[activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx)属性来控制轮播图只识别横向手势:
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
<Carousel
|
|
132
|
+
{...}
|
|
133
|
+
panGestureHandlerProps={{
|
|
134
|
+
activeOffsetX: [-10, 10],
|
|
135
|
+
}}
|
|
136
|
+
/>
|
|
137
|
+
```
|
|
138
|
+
|
|
123
139
|
- RTL
|
|
124
140
|
- 所有 layout 均完美支持 RTL 模式，并且无需再做任何配置。但在 RTL 模式下使用自动播放时，默认不会自动转换方向，需要结合 autoPlayReverse 来手动控制方向。
|
|
125
141
|
- EXPO
|
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 _constants=require("./constants");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 _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,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;var commonVariables=(0,_useCommonVariables.useCommonVariables)(props);var size=commonVariables.size,handlerOffsetX=commonVariables.handlerOffsetX;var offsetX=(0,_reactNativeReanimated.useDerivedValue)(function(){var _f=function _f(){var totalSize=size*
|
|
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 _constants=require("./constants");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 _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,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;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 (51:40)";global.__reanimatedWorkletInit(_f);return _f;}(),[loop,size,dataLength]);(0,_usePropsErrorBoundary.usePropsErrorBoundary)(props);(0,_useOnProgressChange.useOnProgressChange)({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,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=i;if(rawData.length===_constants.DATA_LENGTH.SINGLE_ITEM){realIndex=i%1;}if(rawData.length===_constants.DATA_LENGTH.DOUBLE_ITEM){realIndex=i%2;}return _react.default.createElement(_BaseLayout.BaseLayout,{key:i,index:i,handlerOffsetX:offsetX,visibleRanges:visibleRanges,animationStyle:customAnimation||layoutConfig,__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:21}},function(_ref){var animationValue=_ref.animationValue;return renderItem({item:item,index:realIndex,animationValue:animationValue});});},[rawData,offsetX,visibleRanges,renderItem,layoutConfig,customAnimation]);return _react.default.createElement(_store.CTX.Provider,{value:{props:props,common:commonVariables},__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:[styles.container,{width:width||'100%',height:height||'100%'},style],__self:_this,__source:{fileName:_jsxFileName,lineNumber:188,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:195,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:203,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","commonVariables","size","handlerOffsetX","offsetX","totalSize","length","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 } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * data.length;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, data]);\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 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","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","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 } = 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 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,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});exports.useOnProgressChange=useOnProgressChange;var _reactNativeReanimated=require("react-native-reanimated");var _constants=require("../constants");function useOnProgressChange(opts){var offsetX=opts.offsetX,rawData=opts.rawData,size=opts.size,onProgressChange=opts.onProgressChange;(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 (
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.useOnProgressChange=useOnProgressChange;var _reactNativeReanimated=require("react-native-reanimated");var _constants=require("../constants");function useOnProgressChange(opts){var 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 (18:8)";global.__reanimatedWorkletInit(_f);return _f;}(),function(){var _f=function _f(_value){var value=_value;if(rawDataLength===_constants.DATA_LENGTH.SINGLE_ITEM){value=value%size;}if(rawDataLength===_constants.DATA_LENGTH.DOUBLE_ITEM){value=value%(size*2);}var absoluteProgress=Math.abs(value/size);if(value>0){absoluteProgress=rawDataLength-absoluteProgress;}!!onProgressChange&&(0,_reactNativeReanimated.runOnJS)(onProgressChange)(value,absoluteProgress);};_f._closure={rawDataLength:rawDataLength,DATA_LENGTH:{SINGLE_ITEM:_constants.DATA_LENGTH.SINGLE_ITEM,DOUBLE_ITEM:_constants.DATA_LENGTH.DOUBLE_ITEM},size:size,onProgressChange:onProgressChange,runOnJS:_reactNativeReanimated.runOnJS};_f.asString="function _f(_value){const{rawDataLength,DATA_LENGTH,size,onProgressChange,runOnJS}=jsThis._closure;{let value=_value;if(rawDataLength===DATA_LENGTH.SINGLE_ITEM){value=value%size;}if(rawDataLength===DATA_LENGTH.DOUBLE_ITEM){value=value%(size*2);}let absoluteProgress=Math.abs(value/size);if(value>0){absoluteProgress=rawDataLength-absoluteProgress;}!!onProgressChange&&runOnJS(onProgressChange)(value,absoluteProgress);}}";_f.__workletHash=13919234910402;_f.__location="/Users/zhaodonghao/code/react-native-reanimated-carousel/src/hooks/useOnProgressChange.ts (19:8)";global.__reanimatedWorkletInit(_f);return _f;}(),[onProgressChange,rawDataLength]);}
|
|
2
2
|
//# sourceMappingURL=useOnProgressChange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOnProgressChange.ts"],"names":["useOnProgressChange","opts","offsetX","rawData","size","onProgressChange","
|
|
1
|
+
{"version":3,"sources":["useOnProgressChange.ts"],"names":["useOnProgressChange","opts","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","absoluteProgress","Math","abs","runOnJS"],"mappings":"yGAAA,8DAIA,uCAGO,QAASA,CAAAA,mBAAT,CACHC,IADG,CAML,CACE,GAAQC,CAAAA,OAAR,CAAqDD,IAArD,CAAQC,OAAR,CAAiBC,OAAjB,CAAqDF,IAArD,CAAiBE,OAAjB,CAA0BC,IAA1B,CAAqDH,IAArD,CAA0BG,IAA1B,CAAgCC,gBAAhC,CAAqDJ,IAArD,CAAgCI,gBAAhC,CACA,GAAMC,CAAAA,aAAa,CAAGH,OAAO,CAACI,MAA9B,CACA,iEACI,oBAAML,CAAAA,OAAO,CAACM,KAAd,EADJ,sBAfGN,OAeH,sTAEKO,MAFL,CAEgB,CACR,GAAID,CAAAA,KAAK,CAAGC,MAAZ,CAEA,GAAIH,aAAa,GAAKI,uBAAYC,WAAlC,CAA+C,CAC3CH,KAAK,CAAGA,KAAK,CAAGJ,IAAhB,CACH,CAED,GAAIE,aAAa,GAAKI,uBAAYE,WAAlC,CAA+C,CAC3CJ,KAAK,CAAGA,KAAK,EAAIJ,IAAI,CAAG,CAAX,CAAb,CACH,CAED,GAAIS,CAAAA,gBAAgB,CAAGC,IAAI,CAACC,GAAL,CAASP,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,CArBL,4BADmBP,aACnB,0BAZoBI,uBAAYC,WAYhC,aARoBD,uBAAYE,WAQhC,OAJsCR,IAItC,kBAE4BC,gBAF5B,SAEoBW,8BAFpB,unBAsBI,CAACX,gBAAD,CAAmBC,aAAnB,CAtBJ,EAwBH","sourcesContent":["import Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport { DATA_LENGTH } from '../constants';\nimport type { TCarouselProps } from '../types';\n\nexport function useOnProgressChange(\n opts: {\n size: number;\n offsetX: Animated.SharedValue<number>;\n rawData: TCarouselProps['data'];\n } & Pick<TCarouselProps, 'onProgressChange'>\n) {\n const { offsetX, rawData, size, onProgressChange } = opts;\n const rawDataLength = rawData.length;\n useAnimatedReaction(\n () => offsetX.value,\n (_value) => {\n let value = _value;\n\n if (rawDataLength === DATA_LENGTH.SINGLE_ITEM) {\n value = value % size;\n }\n\n if (rawDataLength === DATA_LENGTH.DOUBLE_ITEM) {\n value = value % (size * 2);\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 [onProgressChange, rawDataLength]\n );\n}\n"]}
|
package/lib/module/Carousel.js
CHANGED
|
@@ -42,8 +42,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
42
42
|
size,
|
|
43
43
|
handlerOffsetX
|
|
44
44
|
} = commonVariables;
|
|
45
|
+
const dataLength = data.length;
|
|
45
46
|
const offsetX = useDerivedValue(() => {
|
|
46
|
-
const totalSize = size *
|
|
47
|
+
const totalSize = size * dataLength;
|
|
47
48
|
const x = handlerOffsetX.value % totalSize;
|
|
48
49
|
|
|
49
50
|
if (!loop) {
|
|
@@ -51,7 +52,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_props, ref) => {
|
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
return isNaN(x) ? 0 : x;
|
|
54
|
-
}, [loop, size,
|
|
55
|
+
}, [loop, size, dataLength]);
|
|
55
56
|
usePropsErrorBoundary(props);
|
|
56
57
|
useOnProgressChange({
|
|
57
58
|
size,
|
|
@@ -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","commonVariables","size","handlerOffsetX","offsetX","totalSize","length","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 } = props;\n\n const commonVariables = useCommonVariables(props);\n const { size, handlerOffsetX } = commonVariables;\n\n const offsetX = useDerivedValue(() => {\n const totalSize = size * data.length;\n const x = handlerOffsetX.value % totalSize;\n\n if (!loop) {\n return handlerOffsetX.value;\n }\n return isNaN(x) ? 0 : x;\n }, [loop, size, data]);\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 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","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","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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IAAmBC,OAAnB,EAA4BC,eAA5B,QAAmD,yBAAnD;AAEA,SAASC,qBAAT,QAAsC,+BAAtC;AACA,SAASC,WAAT,QAA4B,qBAA5B;AACA,SAASC,qBAAT,QAAsC,+BAAtC;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,gBAAT,QAAiC,0BAAjC;AAGA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,SAASC,WAAT,QAA4B,aAA5B;AACA,SAASC,UAAT,QAA2B,sBAA3B;AACA,SAASC,eAAT,QAAgC,yBAAhC;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,kBAAT,QAAmC,4BAAnC;AACA,SAASC,mBAAT,QAAoC,6BAApC;AAEA,MAAMC,QAAQ,gBAAGlB,KAAK,CAACmB,UAAN,CACb,CAACC,MAAD,EAASC,GAAT,KAAiB;AACb,QAAMC,KAAK,GAAGR,YAAY,CAACM,MAAD,CAA1B;AAEA,QAAM;AACFG,IAAAA,IADE;AAEFC,IAAAA,OAFE;AAGFC,IAAAA,IAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,MAPE;AAQFC,IAAAA,QARE;AASFC,IAAAA,QATE;AAUFC,IAAAA,UAVE;AAWFC,IAAAA,eAXE;AAYFC,IAAAA,gBAZE;AAaFC,IAAAA,uBAbE;AAcFC,IAAAA,aAdE;AAeFC,IAAAA,UAfE;AAgBFC,IAAAA,WAhBE;AAiBFC,IAAAA,YAjBE;AAkBFC,IAAAA,aAlBE;AAmBFC,IAAAA,gBAnBE;AAoBFC,IAAAA;AApBE,MAqBFpB,KArBJ;AAuBA,QAAMqB,eAAe,GAAG3B,kBAAkB,CAACM,KAAD,CAA1C;AACA,QAAM;AAAEsB,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAA2BF,eAAjC;AACA,QAAMG,UAAU,GAAGvB,IAAI,CAACwB,MAAxB;AAEA,QAAMC,OAAO,GAAG7C,eAAe,CAAC,MAAM;AAClC,UAAM8C,SAAS,GAAGL,IAAI,GAAGE,UAAzB;AACA,UAAMI,CAAC,GAAGL,cAAc,CAACM,KAAf,GAAuBF,SAAjC;;AAEA,QAAI,CAACxB,IAAL,EAAW;AACP,aAAOoB,cAAc,CAACM,KAAtB;AACH;;AACD,WAAOC,KAAK,CAACF,CAAD,CAAL,GAAW,CAAX,GAAeA,CAAtB;AACH,GAR8B,EAQ5B,CAACzB,IAAD,EAAOmB,IAAP,EAAaE,UAAb,CAR4B,CAA/B;AAUAxC,EAAAA,qBAAqB,CAACgB,KAAD,CAArB;AACAL,EAAAA,mBAAmB,CAAC;AAAE2B,IAAAA,IAAF;AAAQI,IAAAA,OAAR;AAAiBxB,IAAAA,OAAjB;AAA0BiB,IAAAA;AAA1B,GAAD,CAAnB;AAEA,QAAMY,kBAAkB,GAAGjD,qBAAqB,CAAC;AAC7CqB,IAAAA,IAD6C;AAE7CmB,IAAAA,IAF6C;AAG7CC,IAAAA,cAH6C;AAI7CE,IAAAA,MAAM,EAAExB,IAAI,CAACwB,MAJgC;AAK7CO,IAAAA,OAAO,EAAE,CAAC/B,IAAI,CAACwB,MAL8B;AAM7CX,IAAAA,aAN6C;AAO7CmB,IAAAA,cAAc,EAAEhC,IAAI,CAACwB,MAPwB;AAQ7CT,IAAAA,WAAW,EAAE,MAAMpC,OAAO,CAACsD,YAAD,CAAP,EAR0B;AAS7ChB,IAAAA,aAAa,EAAE,MAAM,CAAC,CAACA,aAAF,IAAmBtC,OAAO,CAACsC,aAAD,CAAP,EATK;AAU7CiB,IAAAA,QAAQ,EAAGC,CAAD,IAAO,CAAC,CAACnB,YAAF,IAAkBrC,OAAO,CAACqC,YAAD,CAAP,CAAsBmB,CAAtB,CAVU;AAW7CC,IAAAA,QAAQ,EAAExB;AAXmC,GAAD,CAAhD;AAcA,QAAM;AACFyB,IAAAA,IADE;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,cAHE;AAIFC,IAAAA,WAJE;AAKFC,IAAAA,aALE;AAMFC,IAAAA;AANE,MAOFZ,kBAPJ;AASA,QAAM;AAAEa,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmB9D,WAAW,CAAC;AACjC0B,IAAAA,QADiC;AAEjCG,IAAAA,gBAFiC;AAGjCD,IAAAA,eAHiC;AAIjCoB,IAAAA;AAJiC,GAAD,CAApC;;AAOA,QAAMG,YAAY,GAAGxD,KAAK,CAACoE,WAAN,CAAkB,MAAM;AACzCJ,IAAAA,aAAa;AACb1B,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAGwB,cAAc,CAACO,OAAlB,EAA2BN,WAAW,CAACM,OAAvC,CAAX;AACH,GAHoB,EAGlB,CAACP,cAAD,EAAiBC,WAAjB,EAA8BC,aAA9B,EAA6C1B,WAA7C,CAHkB,CAArB;;AAKA,QAAMgC,8BAA8B,GAAGtE,KAAK,CAACoE,WAAN,CAAkB,MAAM;AAC3DD,IAAAA,KAAK;AACL3B,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;AAChB,GAHsC,EAGpC,CAACA,aAAD,EAAgB2B,KAAhB,CAHoC,CAAvC;AAKA,QAAMI,4BAA4B,GAAGvE,KAAK,CAACoE,WAAN,CAAkB,MAAM;AACzDF,IAAAA,KAAK;;AACLV,IAAAA,YAAY;AACf,GAHoC,EAGlC,CAACA,YAAD,EAAeU,KAAf,CAHkC,CAArC;AAKA,QAAMM,6BAA6B,GAAGxE,KAAK,CAACoE,WAAN,CAAkBD,KAAlB,EAAyB,CAACA,KAAD,CAAzB,CAAtC;AAEA,QAAMM,2BAA2B,GAAGzE,KAAK,CAACoE,WAAN,CAAkBF,KAAlB,EAAyB,CAACA,KAAD,CAAzB,CAApC;AAEA,QAAMQ,SAAS,GAAG1E,KAAK,CAACoE,WAAN,CACd,CAACV,CAAD,EAAYiB,QAAZ,KAAmC;AAC/BtB,IAAAA,kBAAkB,CAACuB,EAAnB,CAAsBlB,CAAtB,EAAyBiB,QAAzB;AACH,GAHa,EAId,CAACtB,kBAAD,CAJc,CAAlB;AAOArD,EAAAA,KAAK,CAAC6E,mBAAN,CACIxD,GADJ,EAEI,OAAO;AACHuC,IAAAA,IADG;AAEHC,IAAAA,IAFG;AAGHI,IAAAA,eAHG;AAIHS,IAAAA,SAJG;AAKHI,IAAAA,QAAQ,EAAEzB,kBAAkB,CAACyB;AAL1B,GAAP,CAFJ,EASI,CACIb,eADJ,EAEIS,SAFJ,EAGId,IAHJ,EAIIC,IAJJ,EAKIR,kBAAkB,CAACyB,QALvB,CATJ;AAkBA,QAAMC,aAAa,GAAGvE,gBAAgB,CAAC;AACnCwE,IAAAA,KAAK,EAAEzD,IAAI,CAACwB,MADuB;AAEnCkC,IAAAA,QAAQ,EAAErC,IAFyB;AAGnCsC,IAAAA,WAAW,EAAErC,cAHsB;AAInCb,IAAAA;AAJmC,GAAD,CAAtC;AAOA,QAAMmD,YAAY,GAAGtE,eAAe,CAAC,EAAE,GAAGS,KAAL;AAAYsB,IAAAA;AAAZ,GAAD,CAApC;AAEA,QAAMwC,YAAY,GAAGpF,KAAK,CAACoE,WAAN,CACjB,CAACiB,IAAD,EAAY3B,CAAZ,KAA0B;AACtB,QAAI4B,SAAS,GAAG5B,CAAhB;;AACA,QAAIlC,OAAO,CAACuB,MAAR,KAAmBpC,WAAW,CAAC4E,WAAnC,EAAgD;AAC5CD,MAAAA,SAAS,GAAG5B,CAAC,GAAG,CAAhB;AACH;;AAED,QAAIlC,OAAO,CAACuB,MAAR,KAAmBpC,WAAW,CAAC6E,WAAnC,EAAgD;AAC5CF,MAAAA,SAAS,GAAG5B,CAAC,GAAG,CAAhB;AACH;;AAED,wBACI,oBAAC,UAAD;AACI,MAAA,GAAG,EAAEA,CADT;AAEI,MAAA,KAAK,EAAEA,CAFX;AAGI,MAAA,cAAc,EAAEV,OAHpB;AAII,MAAA,aAAa,EAAE+B,aAJnB;AAKI,MAAA,cAAc,EAAErC,eAAe,IAAIyC;AALvC,OAOK;AAAA,UAAC;AAAEM,QAAAA;AAAF,OAAD;AAAA,aACGpD,UAAU,CAAC;AACPgD,QAAAA,IADO;AAEPK,QAAAA,KAAK,EAAEJ,SAFA;AAGPG,QAAAA;AAHO,OAAD,CADb;AAAA,KAPL,CADJ;AAiBH,GA5BgB,EA6BjB,CACIjE,OADJ,EAEIwB,OAFJ,EAGI+B,aAHJ,EAII1C,UAJJ,EAKI8C,YALJ,EAMIzC,eANJ,CA7BiB,CAArB;AAuCA,sBACI,oBAAC,GAAD,CAAK,QAAL;AAAc,IAAA,KAAK,EAAE;AAAEpB,MAAAA,KAAF;AAASqE,MAAAA,MAAM,EAAEhD;AAAjB;AAArB,kBACI,oBAAC,IAAD;AACI,IAAA,KAAK,EAAE,CACHiD,MAAM,CAACC,SADJ,EAEH;AAAEjE,MAAAA,KAAK,EAAEA,KAAK,IAAI,MAAlB;AAA0BC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAA5C,KAFG,EAGHF,KAHG;AADX,kBAOI,oBAAC,iBAAD;AACI,IAAA,IAAI,EAAEiB,IADV;AAEI,IAAA,WAAW,EAAEC,cAFjB;AAGI,IAAA,aAAa,EAAEyB,8BAHnB;AAII,IAAA,WAAW,EAAEC,4BAJjB;AAKI,IAAA,YAAY,EAAEC,6BALlB;AAMI,IAAA,UAAU,EAAEC;AANhB,kBAQI,oBAAC,QAAD,CAAU,IAAV;AACI,IAAA,GAAG,EAAE/C,IADT;AAEI,IAAA,KAAK,EAAE,CACHkE,MAAM,CAACC,SADJ,EAEH;AACIjE,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADpB;AAEIC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAFtB,KAFG,EAMHF,KANG,EAOHG,QAAQ,GACF8D,MAAM,CAACE,aADL,GAEFF,MAAM,CAACG,eATV;AAFX,KAcKxE,IAAI,CAACyE,GAAL,CAASZ,YAAT,CAdL,CARJ,CAPJ,CADJ,CADJ;AAqCH,CA3MY,CAAjB;AA8MA,eAAelE,QAAf;AAIA,MAAM0E,MAAM,GAAGnF,UAAU,CAACwF,MAAX,CAAkB;AAC7BJ,EAAAA,SAAS,EAAE;AACPK,IAAAA,QAAQ,EAAE;AADH,GADkB;AAI7BH,EAAAA,eAAe,EAAE;AACbI,IAAAA,aAAa,EAAE;AADF,GAJY;AAO7BL,EAAAA,aAAa,EAAE;AACXK,IAAAA,aAAa,EAAE;AADJ;AAPc,CAAlB,CAAf","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 } = 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 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"]}
|
|
@@ -7,24 +7,25 @@ export function useOnProgressChange(opts) {
|
|
|
7
7
|
size,
|
|
8
8
|
onProgressChange
|
|
9
9
|
} = opts;
|
|
10
|
+
const rawDataLength = rawData.length;
|
|
10
11
|
useAnimatedReaction(() => offsetX.value, _value => {
|
|
11
12
|
let value = _value;
|
|
12
13
|
|
|
13
|
-
if (
|
|
14
|
+
if (rawDataLength === DATA_LENGTH.SINGLE_ITEM) {
|
|
14
15
|
value = value % size;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
if (
|
|
18
|
+
if (rawDataLength === DATA_LENGTH.DOUBLE_ITEM) {
|
|
18
19
|
value = value % (size * 2);
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
let absoluteProgress = Math.abs(value / size);
|
|
22
23
|
|
|
23
24
|
if (value > 0) {
|
|
24
|
-
absoluteProgress =
|
|
25
|
+
absoluteProgress = rawDataLength - absoluteProgress;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
!!onProgressChange && runOnJS(onProgressChange)(value, absoluteProgress);
|
|
28
|
-
}, [onProgressChange,
|
|
29
|
+
}, [onProgressChange, rawDataLength]);
|
|
29
30
|
}
|
|
30
31
|
//# sourceMappingURL=useOnProgressChange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","DATA_LENGTH","useOnProgressChange","opts","offsetX","rawData","size","onProgressChange","
|
|
1
|
+
{"version":3,"sources":["useOnProgressChange.ts"],"names":["runOnJS","useAnimatedReaction","DATA_LENGTH","useOnProgressChange","opts","offsetX","rawData","size","onProgressChange","rawDataLength","length","value","_value","SINGLE_ITEM","DOUBLE_ITEM","absoluteProgress","Math","abs"],"mappings":"AAAA,SACIA,OADJ,EAEIC,mBAFJ,QAGO,yBAHP;AAIA,SAASC,WAAT,QAA4B,cAA5B;AAGA,OAAO,SAASC,mBAAT,CACHC,IADG,EAML;AACE,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,OAAX;AAAoBC,IAAAA,IAApB;AAA0BC,IAAAA;AAA1B,MAA+CJ,IAArD;AACA,QAAMK,aAAa,GAAGH,OAAO,CAACI,MAA9B;AACAT,EAAAA,mBAAmB,CACf,MAAMI,OAAO,CAACM,KADC,EAEdC,MAAD,IAAY;AACR,QAAID,KAAK,GAAGC,MAAZ;;AAEA,QAAIH,aAAa,KAAKP,WAAW,CAACW,WAAlC,EAA+C;AAC3CF,MAAAA,KAAK,GAAGA,KAAK,GAAGJ,IAAhB;AACH;;AAED,QAAIE,aAAa,KAAKP,WAAW,CAACY,WAAlC,EAA+C;AAC3CH,MAAAA,KAAK,GAAGA,KAAK,IAAIJ,IAAI,GAAG,CAAX,CAAb;AACH;;AAED,QAAIQ,gBAAgB,GAAGC,IAAI,CAACC,GAAL,CAASN,KAAK,GAAGJ,IAAjB,CAAvB;;AAEA,QAAII,KAAK,GAAG,CAAZ,EAAe;AACXI,MAAAA,gBAAgB,GAAGN,aAAa,GAAGM,gBAAnC;AACH;;AAED,KAAC,CAACP,gBAAF,IACIR,OAAO,CAACQ,gBAAD,CAAP,CAA0BG,KAA1B,EAAiCI,gBAAjC,CADJ;AAEH,GArBc,EAsBf,CAACP,gBAAD,EAAmBC,aAAnB,CAtBe,CAAnB;AAwBH","sourcesContent":["import Animated, {\n runOnJS,\n useAnimatedReaction,\n} from 'react-native-reanimated';\nimport { DATA_LENGTH } from '../constants';\nimport type { TCarouselProps } from '../types';\n\nexport function useOnProgressChange(\n opts: {\n size: number;\n offsetX: Animated.SharedValue<number>;\n rawData: TCarouselProps['data'];\n } & Pick<TCarouselProps, 'onProgressChange'>\n) {\n const { offsetX, rawData, size, onProgressChange } = opts;\n const rawDataLength = rawData.length;\n useAnimatedReaction(\n () => offsetX.value,\n (_value) => {\n let value = _value;\n\n if (rawDataLength === DATA_LENGTH.SINGLE_ITEM) {\n value = value % size;\n }\n\n if (rawDataLength === DATA_LENGTH.DOUBLE_ITEM) {\n value = value % (size * 2);\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 [onProgressChange, rawDataLength]\n );\n}\n"]}
|
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.3",
|
|
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
|
@@ -46,16 +46,17 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
|
|
|
46
46
|
|
|
47
47
|
const commonVariables = useCommonVariables(props);
|
|
48
48
|
const { size, handlerOffsetX } = commonVariables;
|
|
49
|
+
const dataLength = data.length;
|
|
49
50
|
|
|
50
51
|
const offsetX = useDerivedValue(() => {
|
|
51
|
-
const totalSize = size *
|
|
52
|
+
const totalSize = size * dataLength;
|
|
52
53
|
const x = handlerOffsetX.value % totalSize;
|
|
53
54
|
|
|
54
55
|
if (!loop) {
|
|
55
56
|
return handlerOffsetX.value;
|
|
56
57
|
}
|
|
57
58
|
return isNaN(x) ? 0 : x;
|
|
58
|
-
}, [loop, size,
|
|
59
|
+
}, [loop, size, dataLength]);
|
|
59
60
|
|
|
60
61
|
usePropsErrorBoundary(props);
|
|
61
62
|
useOnProgressChange({ size, offsetX, rawData, onProgressChange });
|
|
@@ -13,28 +13,29 @@ export function useOnProgressChange(
|
|
|
13
13
|
} & Pick<TCarouselProps, 'onProgressChange'>
|
|
14
14
|
) {
|
|
15
15
|
const { offsetX, rawData, size, onProgressChange } = opts;
|
|
16
|
+
const rawDataLength = rawData.length;
|
|
16
17
|
useAnimatedReaction(
|
|
17
18
|
() => offsetX.value,
|
|
18
19
|
(_value) => {
|
|
19
20
|
let value = _value;
|
|
20
21
|
|
|
21
|
-
if (
|
|
22
|
+
if (rawDataLength === DATA_LENGTH.SINGLE_ITEM) {
|
|
22
23
|
value = value % size;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
if (
|
|
26
|
+
if (rawDataLength === DATA_LENGTH.DOUBLE_ITEM) {
|
|
26
27
|
value = value % (size * 2);
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
let absoluteProgress = Math.abs(value / size);
|
|
30
31
|
|
|
31
32
|
if (value > 0) {
|
|
32
|
-
absoluteProgress =
|
|
33
|
+
absoluteProgress = rawDataLength - absoluteProgress;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
!!onProgressChange &&
|
|
36
37
|
runOnJS(onProgressChange)(value, absoluteProgress);
|
|
37
38
|
},
|
|
38
|
-
[onProgressChange,
|
|
39
|
+
[onProgressChange, rawDataLength]
|
|
39
40
|
);
|
|
40
41
|
}
|