react-native-reanimated-carousel 2.1.0 → 2.1.1
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/CHANGELOG.md +7 -0
- package/README.md +18 -0
- package/README.zh-CN.md +18 -1
- package/lib/commonjs/Carousel.js +2 -1
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/ScrollViewGesture.js +8 -4
- package/lib/commonjs/ScrollViewGesture.js.map +1 -1
- package/lib/commonjs/constants/index.js +9 -1
- package/lib/commonjs/constants/index.js.map +1 -1
- package/lib/commonjs/hooks/useCarouselController.js +15 -11
- package/lib/commonjs/hooks/useCarouselController.js.map +1 -1
- package/lib/module/Carousel.js +2 -1
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/ScrollViewGesture.js +8 -5
- package/lib/module/ScrollViewGesture.js.map +1 -1
- package/lib/module/constants/index.js +5 -0
- package/lib/module/constants/index.js.map +1 -1
- package/lib/module/hooks/useCarouselController.js +15 -12
- package/lib/module/hooks/useCarouselController.js.map +1 -1
- package/lib/typescript/constants/index.d.ts +3 -0
- package/lib/typescript/hooks/useCarouselController.d.ts +3 -2
- package/package.json +2 -2
- package/src/Carousel.tsx +1 -0
- package/src/ScrollViewGesture.tsx +7 -4
- package/src/constants/index.ts +6 -0
- package/src/hooks/useCarouselController.tsx +16 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [2.1.1](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.1.0...v2.1.1) (2022-01-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* autoplay will scroll out of bounds ([2cfacff](https://github.com/dohooo/react-native-reanimated-carousel/commit/2cfacffb62f1e4934393cb5f42e55cbdddc2d8f2))
|
|
7
|
+
|
|
1
8
|
# [2.1.0](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.0.0...v2.1.0) (2022-01-08)
|
|
2
9
|
|
|
3
10
|
|
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
7
7
|

|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
9
9
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
|
+
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
12
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
13
|
[](https://discord.gg/KsXRuDs43y)
|
|
@@ -53,9 +54,21 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
53
54
|
<a href="./example/src/advanced-parallax/index.tsx">
|
|
54
55
|
<img src="assets/advanced-parallax.gif" width="300"/>
|
|
55
56
|
</a>
|
|
57
|
+
<a href="./example/src/pause-advanced-parallax/index.tsx">
|
|
58
|
+
<img src="assets/pause-advanced-parallax.gif" width="300"/>
|
|
59
|
+
</a>
|
|
56
60
|
<a href="./example/src/scale-fade-in-out/index.tsx">
|
|
57
61
|
<img src="assets/scale-fade-in-out.gif" width="300"/>
|
|
58
62
|
</a>
|
|
63
|
+
<a href="./example/src/rotate-scale-fade-in-out/index.tsx">
|
|
64
|
+
<img src="assets/rotate-scale-fade-in-out.gif" width="300"/>
|
|
65
|
+
</a>
|
|
66
|
+
<a href="./example/src/rotate-in-out/index.tsx">
|
|
67
|
+
<img src="assets/rotate-in-out.gif" width="300"/>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="./example/src/anim-tab-bar/index.tsx">
|
|
70
|
+
<img src="assets/anim-tab-bar.gif" width="300"/>
|
|
71
|
+
</a>
|
|
59
72
|
</p>
|
|
60
73
|
|
|
61
74
|
## Table of contents
|
|
@@ -130,7 +143,12 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
130
143
|
|
|
131
144
|
```shell
|
|
132
145
|
yarn ios
|
|
146
|
+
# use pretty images
|
|
147
|
+
yarn ios:pretty
|
|
148
|
+
|
|
133
149
|
yarn android
|
|
150
|
+
# use pretty images
|
|
151
|
+
yarn android:pretty
|
|
134
152
|
```
|
|
135
153
|
|
|
136
154
|
## License
|
package/README.zh-CN.md
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|

|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
9
9
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
|
+
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
12
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
13
|
[](https://discord.gg/KsXRuDs43y)
|
|
@@ -47,16 +48,27 @@
|
|
|
47
48
|
</a>
|
|
48
49
|
</p>
|
|
49
50
|
|
|
50
|
-
|
|
51
51
|
> 现在你可以和我们一起来制作酷炫的动画了! 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
|
|
52
52
|
|
|
53
53
|
<p align="center">
|
|
54
54
|
<a href="./example/src/advanced-parallax/index.tsx">
|
|
55
55
|
<img src="assets/advanced-parallax.gif" width="300"/>
|
|
56
56
|
</a>
|
|
57
|
+
<a href="./example/src/pause-advanced-parallax/index.tsx">
|
|
58
|
+
<img src="assets/pause-advanced-parallax.gif" width="300"/>
|
|
59
|
+
</a>
|
|
57
60
|
<a href="./example/src/scale-fade-in-out/index.tsx">
|
|
58
61
|
<img src="assets/scale-fade-in-out.gif" width="300"/>
|
|
59
62
|
</a>
|
|
63
|
+
<a href="./example/src/rotate-scale-fade-in-out/index.tsx">
|
|
64
|
+
<img src="assets/rotate-scale-fade-in-out.gif" width="300"/>
|
|
65
|
+
</a>
|
|
66
|
+
<a href="./example/src/rotate-in-out/index.tsx">
|
|
67
|
+
<img src="assets/rotate-in-out.gif" width="300"/>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="./example/src/anim-tab-bar/index.tsx">
|
|
70
|
+
<img src="assets/anim-tab-bar.gif" width="300"/>
|
|
71
|
+
</a>
|
|
60
72
|
</p>
|
|
61
73
|
|
|
62
74
|
## 目录
|
|
@@ -130,7 +142,12 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
130
142
|
|
|
131
143
|
```shell
|
|
132
144
|
yarn ios
|
|
145
|
+
# 使用更好看的图片
|
|
146
|
+
yarn ios:pretty
|
|
147
|
+
|
|
133
148
|
yarn android
|
|
149
|
+
# 使用更好看的图片
|
|
150
|
+
yarn android:pretty
|
|
134
151
|
```
|
|
135
152
|
|
|
136
153
|
## 许可
|
package/lib/commonjs/Carousel.js
CHANGED
|
@@ -93,7 +93,8 @@ function Carousel(_props, ref) {
|
|
|
93
93
|
originalLength: data.length,
|
|
94
94
|
onScrollEnd: () => (0, _reactNativeReanimated.runOnJS)(_onScrollEnd)(),
|
|
95
95
|
onScrollBegin: () => !!onScrollBegin && (0, _reactNativeReanimated.runOnJS)(onScrollBegin)(),
|
|
96
|
-
onChange: i => onSnapToItem && (0, _reactNativeReanimated.runOnJS)(onSnapToItem)(i)
|
|
96
|
+
onChange: i => onSnapToItem && (0, _reactNativeReanimated.runOnJS)(onSnapToItem)(i),
|
|
97
|
+
duration: autoPlayInterval
|
|
97
98
|
});
|
|
98
99
|
const {
|
|
99
100
|
next,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["Carousel","_props","ref","props","data","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","commonVariables","size","handlerOffsetX","offsetX","totalSize","length","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","run","pause","scrollViewGestureOnScrollBegin","React","useCallback","current","scrollViewGestureOnScrollEnd","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\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\nfunction Carousel<T>(\n _props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const props = useInitProps(_props);\n\n const {\n data,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\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, data, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n originalLength: data.length,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n run();\n _onScrollEnd();\n }, [_onScrollEnd, run]);\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 }),\n [getCurrentIndex, goToIndex, next, prev]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig<T>({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: T, i: number) => {\n let realIndex = i;\n if (data.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (data.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 data,\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 >\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\nexport default React.forwardRef(Carousel) as typeof Carousel;\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","_props","ref","props","data","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","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","run","pause","scrollViewGestureOnScrollBegin","React","useCallback","current","scrollViewGestureOnScrollEnd","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\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\nfunction Carousel<T>(\n _props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const props = useInitProps(_props);\n\n const {\n data,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\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, data, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n originalLength: data.length,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: autoPlayInterval,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n run();\n _onScrollEnd();\n }, [_onScrollEnd, run]);\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 }),\n [getCurrentIndex, goToIndex, next, prev]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig<T>({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: T, i: number) => {\n let realIndex = i;\n if (data.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (data.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 data,\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 >\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\nexport default React.forwardRef(Carousel) as typeof Carousel;\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"]}
|
|
@@ -13,6 +13,8 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
|
|
13
13
|
|
|
14
14
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
15
15
|
|
|
16
|
+
var _constants = require("./constants");
|
|
17
|
+
|
|
16
18
|
var _store = require("./store");
|
|
17
19
|
|
|
18
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -32,7 +34,8 @@ const IScrollViewGesture = props => {
|
|
|
32
34
|
pagingEnabled,
|
|
33
35
|
enableSnap,
|
|
34
36
|
panGestureHandlerProps,
|
|
35
|
-
loop: infinite
|
|
37
|
+
loop: infinite,
|
|
38
|
+
autoPlayInterval
|
|
36
39
|
}
|
|
37
40
|
} = _react.default.useContext(_store.CTX);
|
|
38
41
|
|
|
@@ -51,14 +54,15 @@ const IScrollViewGesture = props => {
|
|
|
51
54
|
const _withSpring = _react.default.useCallback((toValue, onFinished) => {
|
|
52
55
|
'worklet';
|
|
53
56
|
|
|
54
|
-
return (0, _reactNativeReanimated.
|
|
55
|
-
|
|
57
|
+
return (0, _reactNativeReanimated.withTiming)(toValue, {
|
|
58
|
+
duration: autoPlayInterval,
|
|
59
|
+
easing: _constants.Easing.easeOutQuart
|
|
56
60
|
}, isFinished => {
|
|
57
61
|
if (isFinished) {
|
|
58
62
|
onFinished === null || onFinished === void 0 ? void 0 : onFinished();
|
|
59
63
|
}
|
|
60
64
|
});
|
|
61
|
-
}, []);
|
|
65
|
+
}, [autoPlayInterval]);
|
|
62
66
|
|
|
63
67
|
const endWithSpring = _react.default.useCallback(onFinished => {
|
|
64
68
|
'worklet';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ScrollViewGesture.tsx"],"names":["IScrollViewGesture","props","vertical","style","data","pagingEnabled","enableSnap","panGestureHandlerProps","loop","infinite","React","useContext","CTX","translation","onScrollBegin","onScrollEnd","size","maxPage","length","isHorizontal","touching","scrollEndTranslation","scrollEndVelocity","_withSpring","useCallback","toValue","onFinished","damping","isFinished","endWithSpring","origin","value","velocity","nextPage","Math","round","deceleration","page","velocityPage","finalPage","min","max","resetBoundary","onFinish","activeDecay","panGestureEventHandler","onStart","_","ctx","panOffset","onActive","e","translationX","translationY","panTranslation","onEnd","velocityX","velocityY","directionStyle","useMemo","styles","contentHorizontal","contentVertical","container","children","ScrollViewGesture","StyleSheet","create","flex","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withDecay,\n withSpring,\n} from 'react-native-reanimated';\nimport { CTX } from './store';\n\ntype GestureContext = {\n panOffset: number;\n max: number;\n};\n\ninterface Props {\n size: number;\n infinite?: boolean;\n onScrollEnd?: () => void;\n onScrollBegin?: () => void;\n style?: StyleProp<ViewStyle>;\n translation: Animated.SharedValue<number>;\n}\n\nconst IScrollViewGesture: React.FC<Props> = (props) => {\n const {\n props: {\n vertical,\n style,\n data,\n pagingEnabled,\n enableSnap,\n panGestureHandlerProps,\n loop: infinite,\n },\n } = React.useContext(CTX);\n\n const { translation, onScrollBegin, onScrollEnd, size } = props;\n\n const maxPage = data.length;\n const isHorizontal = useDerivedValue(() => !vertical, [vertical]);\n const touching = useSharedValue(false);\n const scrollEndTranslation = useSharedValue(0);\n const scrollEndVelocity = useSharedValue(0);\n\n const _withSpring = React.useCallback(\n (toValue: number, onFinished?: () => void) => {\n 'worklet';\n return withSpring(\n toValue,\n {\n damping: 100,\n },\n (isFinished) => {\n if (isFinished) {\n onFinished?.();\n }\n }\n );\n },\n []\n );\n\n const endWithSpring = React.useCallback(\n (onFinished?: () => void) => {\n 'worklet';\n const origin = translation.value;\n const velocity = scrollEndVelocity.value;\n if (!pagingEnabled) {\n if (enableSnap) {\n const nextPage =\n Math.round((origin + velocity * 0.4) / size) * size;\n translation.value = _withSpring(nextPage, onFinished);\n return;\n }\n translation.value = withDecay({\n velocity,\n deceleration: 0.999,\n });\n return;\n }\n const page = Math.round(-translation.value / size);\n const velocityPage = Math.round(\n -(translation.value + scrollEndVelocity.value) / size\n );\n let finalPage = Math.min(\n page + 1,\n Math.max(page - 1, velocityPage)\n );\n if (!infinite) {\n finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));\n }\n\n translation.value = _withSpring(-finalPage * size, onFinished);\n },\n [\n infinite,\n _withSpring,\n translation,\n scrollEndVelocity,\n size,\n maxPage,\n pagingEnabled,\n enableSnap,\n ]\n );\n\n const resetBoundary = React.useCallback(() => {\n 'worklet';\n const onFinish = (isFinished: boolean) => {\n if (isFinished) {\n touching.value = false;\n onScrollEnd && runOnJS(onScrollEnd)();\n }\n };\n const activeDecay = () => {\n touching.value = true;\n translation.value = withDecay(\n { velocity: scrollEndVelocity.value },\n onFinish\n );\n };\n\n if (touching.value) {\n return;\n }\n\n if (translation.value > 0) {\n if (scrollEndTranslation.value < 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(0);\n return;\n }\n }\n\n if (translation.value < -((maxPage - 1) * size)) {\n if (scrollEndTranslation.value > 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(-((maxPage - 1) * size));\n return;\n }\n }\n }, [\n infinite,\n touching,\n _withSpring,\n translation,\n scrollEndTranslation,\n scrollEndVelocity,\n onScrollEnd,\n maxPage,\n size,\n ]);\n\n useAnimatedReaction(\n () => translation.value,\n () => {\n if (!pagingEnabled) {\n resetBoundary();\n }\n },\n [pagingEnabled]\n );\n\n const panGestureEventHandler = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n GestureContext\n >(\n {\n onStart: (_, ctx) => {\n touching.value = true;\n cancelAnimation(translation);\n onScrollBegin && runOnJS(onScrollBegin)();\n ctx.max = (maxPage - 1) * size;\n ctx.panOffset = translation.value;\n },\n onActive: (e, ctx) => {\n touching.value = true;\n const { translationX, translationY } = e;\n let panTranslation = isHorizontal.value\n ? translationX\n : translationY;\n\n if (\n !infinite &&\n (translation.value > 0 || translation.value < -ctx.max)\n ) {\n panTranslation = panTranslation * 0.5;\n }\n\n translation.value = ctx.panOffset + panTranslation;\n },\n onEnd: (e) => {\n const { velocityX, velocityY, translationX, translationY } = e;\n scrollEndVelocity.value = isHorizontal.value\n ? velocityX\n : velocityY;\n scrollEndTranslation.value = isHorizontal.value\n ? translationX\n : translationY;\n\n endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());\n\n if (!infinite) {\n touching.value = false;\n }\n },\n },\n [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]\n );\n\n const directionStyle = React.useMemo(() => {\n return vertical ? styles.contentHorizontal : styles.contentVertical;\n }, [vertical]);\n\n return (\n <Animated.View style={[styles.container, directionStyle, style]}>\n <PanGestureHandler\n {...panGestureHandlerProps}\n onGestureEvent={panGestureEventHandler}\n >\n {props.children}\n </PanGestureHandler>\n </Animated.View>\n );\n};\n\nexport const ScrollViewGesture = IScrollViewGesture;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n contentVertical: {\n flexDirection: 'column',\n },\n contentHorizontal: {\n flexDirection: 'row',\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["ScrollViewGesture.tsx"],"names":["IScrollViewGesture","props","vertical","style","data","pagingEnabled","enableSnap","panGestureHandlerProps","loop","infinite","autoPlayInterval","React","useContext","CTX","translation","onScrollBegin","onScrollEnd","size","maxPage","length","isHorizontal","touching","scrollEndTranslation","scrollEndVelocity","_withSpring","useCallback","toValue","onFinished","duration","easing","Easing","easeOutQuart","isFinished","endWithSpring","origin","value","velocity","nextPage","Math","round","deceleration","page","velocityPage","finalPage","min","max","resetBoundary","onFinish","activeDecay","panGestureEventHandler","onStart","_","ctx","panOffset","onActive","e","translationX","translationY","panTranslation","onEnd","velocityX","velocityY","directionStyle","useMemo","styles","contentHorizontal","contentVertical","container","children","ScrollViewGesture","StyleSheet","create","flex","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withDecay,\n withTiming,\n} from 'react-native-reanimated';\nimport { Easing } from './constants';\nimport { CTX } from './store';\n\ntype GestureContext = {\n panOffset: number;\n max: number;\n};\n\ninterface Props {\n size: number;\n infinite?: boolean;\n onScrollEnd?: () => void;\n onScrollBegin?: () => void;\n style?: StyleProp<ViewStyle>;\n translation: Animated.SharedValue<number>;\n}\n\nconst IScrollViewGesture: React.FC<Props> = (props) => {\n const {\n props: {\n vertical,\n style,\n data,\n pagingEnabled,\n enableSnap,\n panGestureHandlerProps,\n loop: infinite,\n autoPlayInterval,\n },\n } = React.useContext(CTX);\n\n const { translation, onScrollBegin, onScrollEnd, size } = props;\n\n const maxPage = data.length;\n const isHorizontal = useDerivedValue(() => !vertical, [vertical]);\n const touching = useSharedValue(false);\n const scrollEndTranslation = useSharedValue(0);\n const scrollEndVelocity = useSharedValue(0);\n\n const _withSpring = React.useCallback(\n (toValue: number, onFinished?: () => void) => {\n 'worklet';\n return withTiming(\n toValue,\n {\n duration: autoPlayInterval,\n easing: Easing.easeOutQuart,\n },\n (isFinished) => {\n if (isFinished) {\n onFinished?.();\n }\n }\n );\n },\n [autoPlayInterval]\n );\n\n const endWithSpring = React.useCallback(\n (onFinished?: () => void) => {\n 'worklet';\n const origin = translation.value;\n const velocity = scrollEndVelocity.value;\n if (!pagingEnabled) {\n if (enableSnap) {\n const nextPage =\n Math.round((origin + velocity * 0.4) / size) * size;\n translation.value = _withSpring(nextPage, onFinished);\n return;\n }\n translation.value = withDecay({\n velocity,\n deceleration: 0.999,\n });\n return;\n }\n const page = Math.round(-translation.value / size);\n const velocityPage = Math.round(\n -(translation.value + scrollEndVelocity.value) / size\n );\n let finalPage = Math.min(\n page + 1,\n Math.max(page - 1, velocityPage)\n );\n if (!infinite) {\n finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));\n }\n\n translation.value = _withSpring(-finalPage * size, onFinished);\n },\n [\n infinite,\n _withSpring,\n translation,\n scrollEndVelocity,\n size,\n maxPage,\n pagingEnabled,\n enableSnap,\n ]\n );\n\n const resetBoundary = React.useCallback(() => {\n 'worklet';\n const onFinish = (isFinished: boolean) => {\n if (isFinished) {\n touching.value = false;\n onScrollEnd && runOnJS(onScrollEnd)();\n }\n };\n const activeDecay = () => {\n touching.value = true;\n translation.value = withDecay(\n { velocity: scrollEndVelocity.value },\n onFinish\n );\n };\n\n if (touching.value) {\n return;\n }\n\n if (translation.value > 0) {\n if (scrollEndTranslation.value < 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(0);\n return;\n }\n }\n\n if (translation.value < -((maxPage - 1) * size)) {\n if (scrollEndTranslation.value > 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(-((maxPage - 1) * size));\n return;\n }\n }\n }, [\n infinite,\n touching,\n _withSpring,\n translation,\n scrollEndTranslation,\n scrollEndVelocity,\n onScrollEnd,\n maxPage,\n size,\n ]);\n\n useAnimatedReaction(\n () => translation.value,\n () => {\n if (!pagingEnabled) {\n resetBoundary();\n }\n },\n [pagingEnabled]\n );\n\n const panGestureEventHandler = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n GestureContext\n >(\n {\n onStart: (_, ctx) => {\n touching.value = true;\n cancelAnimation(translation);\n onScrollBegin && runOnJS(onScrollBegin)();\n ctx.max = (maxPage - 1) * size;\n ctx.panOffset = translation.value;\n },\n onActive: (e, ctx) => {\n touching.value = true;\n const { translationX, translationY } = e;\n let panTranslation = isHorizontal.value\n ? translationX\n : translationY;\n\n if (\n !infinite &&\n (translation.value > 0 || translation.value < -ctx.max)\n ) {\n panTranslation = panTranslation * 0.5;\n }\n\n translation.value = ctx.panOffset + panTranslation;\n },\n onEnd: (e) => {\n const { velocityX, velocityY, translationX, translationY } = e;\n scrollEndVelocity.value = isHorizontal.value\n ? velocityX\n : velocityY;\n scrollEndTranslation.value = isHorizontal.value\n ? translationX\n : translationY;\n\n endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());\n\n if (!infinite) {\n touching.value = false;\n }\n },\n },\n [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]\n );\n\n const directionStyle = React.useMemo(() => {\n return vertical ? styles.contentHorizontal : styles.contentVertical;\n }, [vertical]);\n\n return (\n <Animated.View style={[styles.container, directionStyle, style]}>\n <PanGestureHandler\n {...panGestureHandlerProps}\n onGestureEvent={panGestureEventHandler}\n >\n {props.children}\n </PanGestureHandler>\n </Animated.View>\n );\n};\n\nexport const ScrollViewGesture = IScrollViewGesture;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n contentVertical: {\n flexDirection: 'column',\n },\n contentHorizontal: {\n flexDirection: 'row',\n },\n});\n"]}
|
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DATA_LENGTH = void 0;
|
|
6
|
+
exports.Easing = exports.DATA_LENGTH = void 0;
|
|
7
|
+
|
|
8
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
|
+
|
|
7
10
|
let DATA_LENGTH;
|
|
8
11
|
exports.DATA_LENGTH = DATA_LENGTH;
|
|
9
12
|
|
|
@@ -11,4 +14,9 @@ exports.DATA_LENGTH = DATA_LENGTH;
|
|
|
11
14
|
DATA_LENGTH[DATA_LENGTH["SINGLE_ITEM"] = 1] = "SINGLE_ITEM";
|
|
12
15
|
DATA_LENGTH[DATA_LENGTH["DOUBLE_ITEM"] = 2] = "DOUBLE_ITEM";
|
|
13
16
|
})(DATA_LENGTH || (exports.DATA_LENGTH = DATA_LENGTH = {}));
|
|
17
|
+
|
|
18
|
+
const Easing = {
|
|
19
|
+
easeOutQuart: _reactNativeReanimated.Easing.bezier(0.25, 1, 0.5, 1)
|
|
20
|
+
};
|
|
21
|
+
exports.Easing = Easing;
|
|
14
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["DATA_LENGTH"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["DATA_LENGTH","Easing","easeOutQuart","_Easing","bezier"],"mappings":";;;;;;;AAAA;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,2BAAAA,W;;AAKL,MAAMC,MAAM,GAAG;AAClBC,EAAAA,YAAY,EAAEC,8BAAQC,MAAR,CAAe,IAAf,EAAqB,CAArB,EAAwB,GAAxB,EAA6B,CAA7B;AADI,CAAf","sourcesContent":["import { Easing as _Easing } from 'react-native-reanimated';\n\nexport enum DATA_LENGTH {\n SINGLE_ITEM = 1,\n DOUBLE_ITEM = 2,\n}\n\nexport const Easing = {\n easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),\n};\n"]}
|
|
@@ -7,6 +7,8 @@ exports.useCarouselController = useCarouselController;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _constants = require("../constants");
|
|
11
|
+
|
|
10
12
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
11
13
|
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -19,7 +21,8 @@ function useCarouselController(opts) {
|
|
|
19
21
|
disable = false,
|
|
20
22
|
originalLength,
|
|
21
23
|
length,
|
|
22
|
-
onChange
|
|
24
|
+
onChange,
|
|
25
|
+
duration
|
|
23
26
|
} = opts;
|
|
24
27
|
const index = (0, _reactNativeReanimated.useSharedValue)(0); // The Index displayed to the user
|
|
25
28
|
|
|
@@ -73,9 +76,10 @@ function useCarouselController(opts) {
|
|
|
73
76
|
(_opts$onScrollBegin = opts.onScrollBegin) === null || _opts$onScrollBegin === void 0 ? void 0 : _opts$onScrollBegin.call(opts);
|
|
74
77
|
}, [opts]);
|
|
75
78
|
|
|
76
|
-
const
|
|
77
|
-
return (0, _reactNativeReanimated.
|
|
78
|
-
|
|
79
|
+
const scrollWithTiming = _react.default.useCallback((toValue, callback) => {
|
|
80
|
+
return (0, _reactNativeReanimated.withTiming)(toValue, {
|
|
81
|
+
duration,
|
|
82
|
+
easing: _constants.Easing.easeOutQuart
|
|
79
83
|
}, isFinished => {
|
|
80
84
|
callback === null || callback === void 0 ? void 0 : callback();
|
|
81
85
|
|
|
@@ -83,21 +87,21 @@ function useCarouselController(opts) {
|
|
|
83
87
|
(0, _reactNativeReanimated.runOnJS)(onScrollEnd)();
|
|
84
88
|
}
|
|
85
89
|
});
|
|
86
|
-
}, [onScrollEnd]);
|
|
90
|
+
}, [onScrollEnd, duration]);
|
|
87
91
|
|
|
88
92
|
const next = _react.default.useCallback(() => {
|
|
89
93
|
if (!canSliding() || !loop && index.value === length - 1) return;
|
|
90
94
|
onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
|
|
91
95
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
92
|
-
handlerOffsetX.value =
|
|
93
|
-
}, [canSliding, loop, index.value, length, onScrollBegin, handlerOffsetX, size,
|
|
96
|
+
handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);
|
|
97
|
+
}, [canSliding, loop, index.value, length, onScrollBegin, handlerOffsetX, size, scrollWithTiming]);
|
|
94
98
|
|
|
95
99
|
const prev = _react.default.useCallback(() => {
|
|
96
100
|
if (!canSliding() || !loop && index.value === 0) return;
|
|
97
101
|
onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
|
|
98
102
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
99
|
-
handlerOffsetX.value =
|
|
100
|
-
}, [canSliding, loop, index.value, onScrollBegin, handlerOffsetX, size,
|
|
103
|
+
handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);
|
|
104
|
+
}, [canSliding, loop, index.value, onScrollBegin, handlerOffsetX, size, scrollWithTiming]);
|
|
101
105
|
|
|
102
106
|
const to = _react.default.useCallback((idx, animated = false) => {
|
|
103
107
|
if (idx === index.value) return;
|
|
@@ -106,7 +110,7 @@ function useCarouselController(opts) {
|
|
|
106
110
|
const offset = handlerOffsetX.value + (index.value - idx) * size;
|
|
107
111
|
|
|
108
112
|
if (animated) {
|
|
109
|
-
handlerOffsetX.value =
|
|
113
|
+
handlerOffsetX.value = scrollWithTiming(offset, () => {
|
|
110
114
|
index.value = idx;
|
|
111
115
|
});
|
|
112
116
|
} else {
|
|
@@ -114,7 +118,7 @@ function useCarouselController(opts) {
|
|
|
114
118
|
index.value = idx;
|
|
115
119
|
(0, _reactNativeReanimated.runOnJS)(onScrollEnd)();
|
|
116
120
|
}
|
|
117
|
-
}, [index, canSliding, onScrollBegin, handlerOffsetX, size,
|
|
121
|
+
}, [index, canSliding, onScrollBegin, handlerOffsetX, size, scrollWithTiming, onScrollEnd]);
|
|
118
122
|
|
|
119
123
|
return {
|
|
120
124
|
next,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselController.tsx"],"names":["useCarouselController","opts","size","loop","handlerOffsetX","disable","originalLength","length","onChange","index","sharedIndex","React","useRef","sharedPreIndex","convertToSharedIndex","useCallback","i","computedIndex","current","toInt","value","Math","abs","_sharedIndex","getCurrentIndex","canSliding","onScrollEnd","onScrollBegin","
|
|
1
|
+
{"version":3,"sources":["useCarouselController.tsx"],"names":["useCarouselController","opts","size","loop","handlerOffsetX","disable","originalLength","length","onChange","duration","index","sharedIndex","React","useRef","sharedPreIndex","convertToSharedIndex","useCallback","i","computedIndex","current","toInt","value","Math","abs","_sharedIndex","getCurrentIndex","canSliding","onScrollEnd","onScrollBegin","scrollWithTiming","toValue","callback","easing","Easing","easeOutQuart","isFinished","next","currentPage","round","prev","to","idx","animated","offset"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { Easing } from '../constants';\nimport { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';\n\ninterface IOpts {\n loop: boolean;\n size: number;\n handlerOffsetX: Animated.SharedValue<number>;\n disable?: boolean;\n duration?: number;\n originalLength: number;\n length: number;\n onScrollBegin?: () => void;\n onScrollEnd?: () => void;\n // the length before fill data\n onChange: (index: number) => void;\n}\n\nexport interface ICarouselController {\n length: number;\n index: Animated.SharedValue<number>;\n sharedIndex: React.MutableRefObject<number>;\n sharedPreIndex: React.MutableRefObject<number>;\n prev: () => void;\n next: () => void;\n computedIndex: () => void;\n getCurrentIndex: () => number;\n to: (index: number, animated?: boolean) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n const {\n size,\n loop,\n handlerOffsetX,\n disable = false,\n originalLength,\n length,\n onChange,\n duration,\n } = opts;\n\n const index = useSharedValue<number>(0);\n // The Index displayed to the user\n const sharedIndex = React.useRef<number>(0);\n const sharedPreIndex = React.useRef<number>(0);\n\n const convertToSharedIndex = React.useCallback(\n (i: number) => {\n if (loop) {\n switch (originalLength) {\n case 1:\n return 0;\n case 2:\n return i % 2;\n }\n }\n return i;\n },\n [originalLength, loop]\n );\n\n const computedIndex = React.useCallback(() => {\n sharedPreIndex.current = sharedIndex.current;\n const toInt = (handlerOffsetX.value / size) % length;\n const i =\n handlerOffsetX.value <= 0\n ? Math.abs(toInt)\n : Math.abs(toInt > 0 ? length - toInt : 0);\n index.value = i;\n const _sharedIndex = convertToSharedIndex(i);\n sharedIndex.current = _sharedIndex;\n onChange(_sharedIndex);\n }, [\n length,\n handlerOffsetX,\n sharedPreIndex,\n index,\n size,\n sharedIndex,\n convertToSharedIndex,\n onChange,\n ]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\n\n const canSliding = React.useCallback(() => {\n return !disable;\n }, [disable]);\n\n const onScrollEnd = React.useCallback(() => {\n opts.onScrollEnd?.();\n }, [opts]);\n\n const onScrollBegin = React.useCallback(() => {\n opts.onScrollBegin?.();\n }, [opts]);\n\n const scrollWithTiming = React.useCallback(\n (toValue: number, callback?: () => void) => {\n return withTiming(\n toValue,\n { duration, easing: Easing.easeOutQuart },\n (isFinished: boolean) => {\n callback?.();\n if (isFinished) {\n runOnJS(onScrollEnd)();\n }\n }\n );\n },\n [onScrollEnd, duration]\n );\n\n const next = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === length - 1)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n length,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n ]);\n\n const prev = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === 0)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n ]);\n\n const to = React.useCallback(\n (idx: number, animated: boolean = false) => {\n if (idx === index.value) return;\n if (!canSliding()) return;\n\n onScrollBegin?.();\n\n const offset = handlerOffsetX.value + (index.value - idx) * size;\n\n if (animated) {\n handlerOffsetX.value = scrollWithTiming(offset, () => {\n index.value = idx;\n });\n } else {\n handlerOffsetX.value = offset;\n index.value = idx;\n runOnJS(onScrollEnd)();\n }\n },\n [\n index,\n canSliding,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n onScrollEnd,\n ]\n );\n\n return {\n next,\n prev,\n to,\n index,\n length,\n sharedIndex,\n sharedPreIndex,\n computedIndex,\n getCurrentIndex,\n };\n}\n"]}
|
package/lib/module/Carousel.js
CHANGED
|
@@ -66,7 +66,8 @@ function Carousel(_props, ref) {
|
|
|
66
66
|
originalLength: data.length,
|
|
67
67
|
onScrollEnd: () => runOnJS(_onScrollEnd)(),
|
|
68
68
|
onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
|
|
69
|
-
onChange: i => onSnapToItem && runOnJS(onSnapToItem)(i)
|
|
69
|
+
onChange: i => onSnapToItem && runOnJS(onSnapToItem)(i),
|
|
70
|
+
duration: autoPlayInterval
|
|
70
71
|
});
|
|
71
72
|
const {
|
|
72
73
|
next,
|
|
@@ -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","_props","ref","props","data","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","customAnimation","commonVariables","size","handlerOffsetX","offsetX","totalSize","length","x","value","isNaN","carouselController","disable","originalLength","_onScrollEnd","onChange","i","next","prev","sharedPreIndex","sharedIndex","computedIndex","getCurrentIndex","run","pause","scrollViewGestureOnScrollBegin","useCallback","current","scrollViewGestureOnScrollEnd","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\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\nfunction Carousel<T>(\n _props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const props = useInitProps(_props);\n\n const {\n data,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\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, data, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n originalLength: data.length,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n run();\n _onScrollEnd();\n }, [_onScrollEnd, run]);\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 }),\n [getCurrentIndex, goToIndex, next, prev]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig<T>({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: T, i: number) => {\n let realIndex = i;\n if (data.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (data.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 data,\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 >\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\nexport default React.forwardRef(Carousel) as typeof Carousel;\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","_props","ref","props","data","loop","mode","style","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","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","run","pause","scrollViewGestureOnScrollBegin","useCallback","current","scrollViewGestureOnScrollEnd","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","layoutConfig","renderLayout","item","realIndex","SINGLE_ITEM","DOUBLE_ITEM","animationValue","index","common","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\nimport { ScrollViewGesture } from './ScrollViewGesture';\nimport { useVisibleRanges } from './hooks/useVisibleRanges';\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\nfunction Carousel<T>(\n _props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const props = useInitProps(_props);\n\n const {\n data,\n loop,\n mode,\n style,\n width,\n height,\n vertical,\n autoPlay,\n windowSize,\n autoPlayReverse,\n autoPlayInterval,\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, data, onProgressChange });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n length: data.length,\n disable: !data.length,\n originalLength: data.length,\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n duration: autoPlayInterval,\n });\n\n const {\n next,\n prev,\n sharedPreIndex,\n sharedIndex,\n computedIndex,\n getCurrentIndex,\n } = carouselController;\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const scrollViewGestureOnScrollBegin = React.useCallback(() => {\n pause();\n onScrollBegin?.();\n }, [onScrollBegin, pause]);\n\n const _onScrollEnd = React.useCallback(() => {\n computedIndex();\n onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);\n\n const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n run();\n _onScrollEnd();\n }, [_onScrollEnd, run]);\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 }),\n [getCurrentIndex, goToIndex, next, prev]\n );\n\n const visibleRanges = useVisibleRanges({\n total: data.length,\n viewSize: size,\n translation: handlerOffsetX,\n windowSize,\n });\n\n const layoutConfig = useLayoutConfig<T>({ ...props, size });\n\n const renderLayout = React.useCallback(\n (item: T, i: number) => {\n let realIndex = i;\n if (data.length === DATA_LENGTH.SINGLE_ITEM) {\n realIndex = i % 1;\n }\n\n if (data.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 data,\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 >\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\nexport default React.forwardRef(Carousel) as typeof Carousel;\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"]}
|
|
@@ -3,7 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { StyleSheet } from 'react-native';
|
|
5
5
|
import { PanGestureHandler } from 'react-native-gesture-handler';
|
|
6
|
-
import Animated, { cancelAnimation, runOnJS, useAnimatedGestureHandler, useAnimatedReaction, useDerivedValue, useSharedValue, withDecay,
|
|
6
|
+
import Animated, { cancelAnimation, runOnJS, useAnimatedGestureHandler, useAnimatedReaction, useDerivedValue, useSharedValue, withDecay, withTiming } from 'react-native-reanimated';
|
|
7
|
+
import { Easing } from './constants';
|
|
7
8
|
import { CTX } from './store';
|
|
8
9
|
|
|
9
10
|
const IScrollViewGesture = props => {
|
|
@@ -15,7 +16,8 @@ const IScrollViewGesture = props => {
|
|
|
15
16
|
pagingEnabled,
|
|
16
17
|
enableSnap,
|
|
17
18
|
panGestureHandlerProps,
|
|
18
|
-
loop: infinite
|
|
19
|
+
loop: infinite,
|
|
20
|
+
autoPlayInterval
|
|
19
21
|
}
|
|
20
22
|
} = React.useContext(CTX);
|
|
21
23
|
const {
|
|
@@ -33,14 +35,15 @@ const IScrollViewGesture = props => {
|
|
|
33
35
|
const _withSpring = React.useCallback((toValue, onFinished) => {
|
|
34
36
|
'worklet';
|
|
35
37
|
|
|
36
|
-
return
|
|
37
|
-
|
|
38
|
+
return withTiming(toValue, {
|
|
39
|
+
duration: autoPlayInterval,
|
|
40
|
+
easing: Easing.easeOutQuart
|
|
38
41
|
}, isFinished => {
|
|
39
42
|
if (isFinished) {
|
|
40
43
|
onFinished === null || onFinished === void 0 ? void 0 : onFinished();
|
|
41
44
|
}
|
|
42
45
|
});
|
|
43
|
-
}, []);
|
|
46
|
+
}, [autoPlayInterval]);
|
|
44
47
|
|
|
45
48
|
const endWithSpring = React.useCallback(onFinished => {
|
|
46
49
|
'worklet';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ScrollViewGesture.tsx"],"names":["React","StyleSheet","PanGestureHandler","Animated","cancelAnimation","runOnJS","useAnimatedGestureHandler","useAnimatedReaction","useDerivedValue","useSharedValue","withDecay","withSpring","CTX","IScrollViewGesture","props","vertical","style","data","pagingEnabled","enableSnap","panGestureHandlerProps","loop","infinite","useContext","translation","onScrollBegin","onScrollEnd","size","maxPage","length","isHorizontal","touching","scrollEndTranslation","scrollEndVelocity","_withSpring","useCallback","toValue","onFinished","damping","isFinished","endWithSpring","origin","value","velocity","nextPage","Math","round","deceleration","page","velocityPage","finalPage","min","max","resetBoundary","onFinish","activeDecay","panGestureEventHandler","onStart","_","ctx","panOffset","onActive","e","translationX","translationY","panTranslation","onEnd","velocityX","velocityY","directionStyle","useMemo","styles","contentHorizontal","contentVertical","container","children","ScrollViewGesture","create","flex","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withDecay,\n withSpring,\n} from 'react-native-reanimated';\nimport { CTX } from './store';\n\ntype GestureContext = {\n panOffset: number;\n max: number;\n};\n\ninterface Props {\n size: number;\n infinite?: boolean;\n onScrollEnd?: () => void;\n onScrollBegin?: () => void;\n style?: StyleProp<ViewStyle>;\n translation: Animated.SharedValue<number>;\n}\n\nconst IScrollViewGesture: React.FC<Props> = (props) => {\n const {\n props: {\n vertical,\n style,\n data,\n pagingEnabled,\n enableSnap,\n panGestureHandlerProps,\n loop: infinite,\n },\n } = React.useContext(CTX);\n\n const { translation, onScrollBegin, onScrollEnd, size } = props;\n\n const maxPage = data.length;\n const isHorizontal = useDerivedValue(() => !vertical, [vertical]);\n const touching = useSharedValue(false);\n const scrollEndTranslation = useSharedValue(0);\n const scrollEndVelocity = useSharedValue(0);\n\n const _withSpring = React.useCallback(\n (toValue: number, onFinished?: () => void) => {\n 'worklet';\n return withSpring(\n toValue,\n {\n damping: 100,\n },\n (isFinished) => {\n if (isFinished) {\n onFinished?.();\n }\n }\n );\n },\n []\n );\n\n const endWithSpring = React.useCallback(\n (onFinished?: () => void) => {\n 'worklet';\n const origin = translation.value;\n const velocity = scrollEndVelocity.value;\n if (!pagingEnabled) {\n if (enableSnap) {\n const nextPage =\n Math.round((origin + velocity * 0.4) / size) * size;\n translation.value = _withSpring(nextPage, onFinished);\n return;\n }\n translation.value = withDecay({\n velocity,\n deceleration: 0.999,\n });\n return;\n }\n const page = Math.round(-translation.value / size);\n const velocityPage = Math.round(\n -(translation.value + scrollEndVelocity.value) / size\n );\n let finalPage = Math.min(\n page + 1,\n Math.max(page - 1, velocityPage)\n );\n if (!infinite) {\n finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));\n }\n\n translation.value = _withSpring(-finalPage * size, onFinished);\n },\n [\n infinite,\n _withSpring,\n translation,\n scrollEndVelocity,\n size,\n maxPage,\n pagingEnabled,\n enableSnap,\n ]\n );\n\n const resetBoundary = React.useCallback(() => {\n 'worklet';\n const onFinish = (isFinished: boolean) => {\n if (isFinished) {\n touching.value = false;\n onScrollEnd && runOnJS(onScrollEnd)();\n }\n };\n const activeDecay = () => {\n touching.value = true;\n translation.value = withDecay(\n { velocity: scrollEndVelocity.value },\n onFinish\n );\n };\n\n if (touching.value) {\n return;\n }\n\n if (translation.value > 0) {\n if (scrollEndTranslation.value < 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(0);\n return;\n }\n }\n\n if (translation.value < -((maxPage - 1) * size)) {\n if (scrollEndTranslation.value > 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(-((maxPage - 1) * size));\n return;\n }\n }\n }, [\n infinite,\n touching,\n _withSpring,\n translation,\n scrollEndTranslation,\n scrollEndVelocity,\n onScrollEnd,\n maxPage,\n size,\n ]);\n\n useAnimatedReaction(\n () => translation.value,\n () => {\n if (!pagingEnabled) {\n resetBoundary();\n }\n },\n [pagingEnabled]\n );\n\n const panGestureEventHandler = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n GestureContext\n >(\n {\n onStart: (_, ctx) => {\n touching.value = true;\n cancelAnimation(translation);\n onScrollBegin && runOnJS(onScrollBegin)();\n ctx.max = (maxPage - 1) * size;\n ctx.panOffset = translation.value;\n },\n onActive: (e, ctx) => {\n touching.value = true;\n const { translationX, translationY } = e;\n let panTranslation = isHorizontal.value\n ? translationX\n : translationY;\n\n if (\n !infinite &&\n (translation.value > 0 || translation.value < -ctx.max)\n ) {\n panTranslation = panTranslation * 0.5;\n }\n\n translation.value = ctx.panOffset + panTranslation;\n },\n onEnd: (e) => {\n const { velocityX, velocityY, translationX, translationY } = e;\n scrollEndVelocity.value = isHorizontal.value\n ? velocityX\n : velocityY;\n scrollEndTranslation.value = isHorizontal.value\n ? translationX\n : translationY;\n\n endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());\n\n if (!infinite) {\n touching.value = false;\n }\n },\n },\n [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]\n );\n\n const directionStyle = React.useMemo(() => {\n return vertical ? styles.contentHorizontal : styles.contentVertical;\n }, [vertical]);\n\n return (\n <Animated.View style={[styles.container, directionStyle, style]}>\n <PanGestureHandler\n {...panGestureHandlerProps}\n onGestureEvent={panGestureEventHandler}\n >\n {props.children}\n </PanGestureHandler>\n </Animated.View>\n );\n};\n\nexport const ScrollViewGesture = IScrollViewGesture;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n contentVertical: {\n flexDirection: 'column',\n },\n contentHorizontal: {\n flexDirection: 'row',\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["ScrollViewGesture.tsx"],"names":["React","StyleSheet","PanGestureHandler","Animated","cancelAnimation","runOnJS","useAnimatedGestureHandler","useAnimatedReaction","useDerivedValue","useSharedValue","withDecay","withTiming","Easing","CTX","IScrollViewGesture","props","vertical","style","data","pagingEnabled","enableSnap","panGestureHandlerProps","loop","infinite","autoPlayInterval","useContext","translation","onScrollBegin","onScrollEnd","size","maxPage","length","isHorizontal","touching","scrollEndTranslation","scrollEndVelocity","_withSpring","useCallback","toValue","onFinished","duration","easing","easeOutQuart","isFinished","endWithSpring","origin","value","velocity","nextPage","Math","round","deceleration","page","velocityPage","finalPage","min","max","resetBoundary","onFinish","activeDecay","panGestureEventHandler","onStart","_","ctx","panOffset","onActive","e","translationX","translationY","panTranslation","onEnd","velocityX","velocityY","directionStyle","useMemo","styles","contentHorizontal","contentVertical","container","children","ScrollViewGesture","create","flex","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n cancelAnimation,\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withDecay,\n withTiming,\n} from 'react-native-reanimated';\nimport { Easing } from './constants';\nimport { CTX } from './store';\n\ntype GestureContext = {\n panOffset: number;\n max: number;\n};\n\ninterface Props {\n size: number;\n infinite?: boolean;\n onScrollEnd?: () => void;\n onScrollBegin?: () => void;\n style?: StyleProp<ViewStyle>;\n translation: Animated.SharedValue<number>;\n}\n\nconst IScrollViewGesture: React.FC<Props> = (props) => {\n const {\n props: {\n vertical,\n style,\n data,\n pagingEnabled,\n enableSnap,\n panGestureHandlerProps,\n loop: infinite,\n autoPlayInterval,\n },\n } = React.useContext(CTX);\n\n const { translation, onScrollBegin, onScrollEnd, size } = props;\n\n const maxPage = data.length;\n const isHorizontal = useDerivedValue(() => !vertical, [vertical]);\n const touching = useSharedValue(false);\n const scrollEndTranslation = useSharedValue(0);\n const scrollEndVelocity = useSharedValue(0);\n\n const _withSpring = React.useCallback(\n (toValue: number, onFinished?: () => void) => {\n 'worklet';\n return withTiming(\n toValue,\n {\n duration: autoPlayInterval,\n easing: Easing.easeOutQuart,\n },\n (isFinished) => {\n if (isFinished) {\n onFinished?.();\n }\n }\n );\n },\n [autoPlayInterval]\n );\n\n const endWithSpring = React.useCallback(\n (onFinished?: () => void) => {\n 'worklet';\n const origin = translation.value;\n const velocity = scrollEndVelocity.value;\n if (!pagingEnabled) {\n if (enableSnap) {\n const nextPage =\n Math.round((origin + velocity * 0.4) / size) * size;\n translation.value = _withSpring(nextPage, onFinished);\n return;\n }\n translation.value = withDecay({\n velocity,\n deceleration: 0.999,\n });\n return;\n }\n const page = Math.round(-translation.value / size);\n const velocityPage = Math.round(\n -(translation.value + scrollEndVelocity.value) / size\n );\n let finalPage = Math.min(\n page + 1,\n Math.max(page - 1, velocityPage)\n );\n if (!infinite) {\n finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));\n }\n\n translation.value = _withSpring(-finalPage * size, onFinished);\n },\n [\n infinite,\n _withSpring,\n translation,\n scrollEndVelocity,\n size,\n maxPage,\n pagingEnabled,\n enableSnap,\n ]\n );\n\n const resetBoundary = React.useCallback(() => {\n 'worklet';\n const onFinish = (isFinished: boolean) => {\n if (isFinished) {\n touching.value = false;\n onScrollEnd && runOnJS(onScrollEnd)();\n }\n };\n const activeDecay = () => {\n touching.value = true;\n translation.value = withDecay(\n { velocity: scrollEndVelocity.value },\n onFinish\n );\n };\n\n if (touching.value) {\n return;\n }\n\n if (translation.value > 0) {\n if (scrollEndTranslation.value < 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(0);\n return;\n }\n }\n\n if (translation.value < -((maxPage - 1) * size)) {\n if (scrollEndTranslation.value > 0) {\n activeDecay();\n return;\n }\n if (!infinite) {\n translation.value = _withSpring(-((maxPage - 1) * size));\n return;\n }\n }\n }, [\n infinite,\n touching,\n _withSpring,\n translation,\n scrollEndTranslation,\n scrollEndVelocity,\n onScrollEnd,\n maxPage,\n size,\n ]);\n\n useAnimatedReaction(\n () => translation.value,\n () => {\n if (!pagingEnabled) {\n resetBoundary();\n }\n },\n [pagingEnabled]\n );\n\n const panGestureEventHandler = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n GestureContext\n >(\n {\n onStart: (_, ctx) => {\n touching.value = true;\n cancelAnimation(translation);\n onScrollBegin && runOnJS(onScrollBegin)();\n ctx.max = (maxPage - 1) * size;\n ctx.panOffset = translation.value;\n },\n onActive: (e, ctx) => {\n touching.value = true;\n const { translationX, translationY } = e;\n let panTranslation = isHorizontal.value\n ? translationX\n : translationY;\n\n if (\n !infinite &&\n (translation.value > 0 || translation.value < -ctx.max)\n ) {\n panTranslation = panTranslation * 0.5;\n }\n\n translation.value = ctx.panOffset + panTranslation;\n },\n onEnd: (e) => {\n const { velocityX, velocityY, translationX, translationY } = e;\n scrollEndVelocity.value = isHorizontal.value\n ? velocityX\n : velocityY;\n scrollEndTranslation.value = isHorizontal.value\n ? translationX\n : translationY;\n\n endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());\n\n if (!infinite) {\n touching.value = false;\n }\n },\n },\n [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]\n );\n\n const directionStyle = React.useMemo(() => {\n return vertical ? styles.contentHorizontal : styles.contentVertical;\n }, [vertical]);\n\n return (\n <Animated.View style={[styles.container, directionStyle, style]}>\n <PanGestureHandler\n {...panGestureHandlerProps}\n onGestureEvent={panGestureEventHandler}\n >\n {props.children}\n </PanGestureHandler>\n </Animated.View>\n );\n};\n\nexport const ScrollViewGesture = IScrollViewGesture;\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n overflow: 'hidden',\n },\n contentVertical: {\n flexDirection: 'column',\n },\n contentHorizontal: {\n flexDirection: 'row',\n },\n});\n"]}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
import { Easing as _Easing } from 'react-native-reanimated';
|
|
1
2
|
export let DATA_LENGTH;
|
|
2
3
|
|
|
3
4
|
(function (DATA_LENGTH) {
|
|
4
5
|
DATA_LENGTH[DATA_LENGTH["SINGLE_ITEM"] = 1] = "SINGLE_ITEM";
|
|
5
6
|
DATA_LENGTH[DATA_LENGTH["DOUBLE_ITEM"] = 2] = "DOUBLE_ITEM";
|
|
6
7
|
})(DATA_LENGTH || (DATA_LENGTH = {}));
|
|
8
|
+
|
|
9
|
+
export const Easing = {
|
|
10
|
+
easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1)
|
|
11
|
+
};
|
|
7
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["DATA_LENGTH"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["Easing","_Easing","DATA_LENGTH","easeOutQuart","bezier"],"mappings":"AAAA,SAASA,MAAM,IAAIC,OAAnB,QAAkC,yBAAlC;AAEA,WAAYC,WAAZ;;WAAYA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,KAAAA,W;;AAKZ,OAAO,MAAMF,MAAM,GAAG;AAClBG,EAAAA,YAAY,EAAEF,OAAO,CAACG,MAAR,CAAe,IAAf,EAAqB,CAArB,EAAwB,GAAxB,EAA6B,CAA7B;AADI,CAAf","sourcesContent":["import { Easing as _Easing } from 'react-native-reanimated';\n\nexport enum DATA_LENGTH {\n SINGLE_ITEM = 1,\n DOUBLE_ITEM = 2,\n}\n\nexport const Easing = {\n easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),\n};\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Easing } from '../constants';
|
|
3
|
+
import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
3
4
|
export function useCarouselController(opts) {
|
|
4
5
|
const {
|
|
5
6
|
size,
|
|
@@ -8,7 +9,8 @@ export function useCarouselController(opts) {
|
|
|
8
9
|
disable = false,
|
|
9
10
|
originalLength,
|
|
10
11
|
length,
|
|
11
|
-
onChange
|
|
12
|
+
onChange,
|
|
13
|
+
duration
|
|
12
14
|
} = opts;
|
|
13
15
|
const index = useSharedValue(0); // The Index displayed to the user
|
|
14
16
|
|
|
@@ -54,9 +56,10 @@ export function useCarouselController(opts) {
|
|
|
54
56
|
|
|
55
57
|
(_opts$onScrollBegin = opts.onScrollBegin) === null || _opts$onScrollBegin === void 0 ? void 0 : _opts$onScrollBegin.call(opts);
|
|
56
58
|
}, [opts]);
|
|
57
|
-
const
|
|
58
|
-
return
|
|
59
|
-
|
|
59
|
+
const scrollWithTiming = React.useCallback((toValue, callback) => {
|
|
60
|
+
return withTiming(toValue, {
|
|
61
|
+
duration,
|
|
62
|
+
easing: Easing.easeOutQuart
|
|
60
63
|
}, isFinished => {
|
|
61
64
|
callback === null || callback === void 0 ? void 0 : callback();
|
|
62
65
|
|
|
@@ -64,19 +67,19 @@ export function useCarouselController(opts) {
|
|
|
64
67
|
runOnJS(onScrollEnd)();
|
|
65
68
|
}
|
|
66
69
|
});
|
|
67
|
-
}, [onScrollEnd]);
|
|
70
|
+
}, [onScrollEnd, duration]);
|
|
68
71
|
const next = React.useCallback(() => {
|
|
69
72
|
if (!canSliding() || !loop && index.value === length - 1) return;
|
|
70
73
|
onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
|
|
71
74
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
72
|
-
handlerOffsetX.value =
|
|
73
|
-
}, [canSliding, loop, index.value, length, onScrollBegin, handlerOffsetX, size,
|
|
75
|
+
handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);
|
|
76
|
+
}, [canSliding, loop, index.value, length, onScrollBegin, handlerOffsetX, size, scrollWithTiming]);
|
|
74
77
|
const prev = React.useCallback(() => {
|
|
75
78
|
if (!canSliding() || !loop && index.value === 0) return;
|
|
76
79
|
onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
|
|
77
80
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
78
|
-
handlerOffsetX.value =
|
|
79
|
-
}, [canSliding, loop, index.value, onScrollBegin, handlerOffsetX, size,
|
|
81
|
+
handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);
|
|
82
|
+
}, [canSliding, loop, index.value, onScrollBegin, handlerOffsetX, size, scrollWithTiming]);
|
|
80
83
|
const to = React.useCallback((idx, animated = false) => {
|
|
81
84
|
if (idx === index.value) return;
|
|
82
85
|
if (!canSliding()) return;
|
|
@@ -84,7 +87,7 @@ export function useCarouselController(opts) {
|
|
|
84
87
|
const offset = handlerOffsetX.value + (index.value - idx) * size;
|
|
85
88
|
|
|
86
89
|
if (animated) {
|
|
87
|
-
handlerOffsetX.value =
|
|
90
|
+
handlerOffsetX.value = scrollWithTiming(offset, () => {
|
|
88
91
|
index.value = idx;
|
|
89
92
|
});
|
|
90
93
|
} else {
|
|
@@ -92,7 +95,7 @@ export function useCarouselController(opts) {
|
|
|
92
95
|
index.value = idx;
|
|
93
96
|
runOnJS(onScrollEnd)();
|
|
94
97
|
}
|
|
95
|
-
}, [index, canSliding, onScrollBegin, handlerOffsetX, size,
|
|
98
|
+
}, [index, canSliding, onScrollBegin, handlerOffsetX, size, scrollWithTiming, onScrollEnd]);
|
|
96
99
|
return {
|
|
97
100
|
next,
|
|
98
101
|
prev,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselController.tsx"],"names":["React","runOnJS","useSharedValue","withSpring","useCarouselController","opts","size","loop","handlerOffsetX","disable","originalLength","length","onChange","index","sharedIndex","useRef","sharedPreIndex","convertToSharedIndex","useCallback","i","computedIndex","current","toInt","value","Math","abs","_sharedIndex","getCurrentIndex","canSliding","onScrollEnd","onScrollBegin","scrollWithSpring","toValue","callback","damping","isFinished","next","currentPage","round","prev","to","idx","animated","offset"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { runOnJS, useSharedValue, withSpring } from 'react-native-reanimated';\n\ninterface IOpts {\n loop: boolean;\n size: number;\n handlerOffsetX: Animated.SharedValue<number>;\n disable?: boolean;\n onScrollBegin?: () => void;\n onScrollEnd?: () => void;\n // the length before fill data\n originalLength: number;\n length: number;\n onChange: (index: number) => void;\n}\n\nexport interface ICarouselController {\n length: number;\n index: Animated.SharedValue<number>;\n sharedIndex: React.MutableRefObject<number>;\n sharedPreIndex: React.MutableRefObject<number>;\n prev: () => void;\n next: () => void;\n computedIndex: () => void;\n getCurrentIndex: () => number;\n to: (index: number, animated?: boolean) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n const {\n size,\n loop,\n handlerOffsetX,\n disable = false,\n originalLength,\n length,\n onChange,\n } = opts;\n\n const index = useSharedValue<number>(0);\n // The Index displayed to the user\n const sharedIndex = React.useRef<number>(0);\n const sharedPreIndex = React.useRef<number>(0);\n\n const convertToSharedIndex = React.useCallback(\n (i: number) => {\n if (loop) {\n switch (originalLength) {\n case 1:\n return 0;\n case 2:\n return i % 2;\n }\n }\n return i;\n },\n [originalLength, loop]\n );\n\n const computedIndex = React.useCallback(() => {\n sharedPreIndex.current = sharedIndex.current;\n const toInt = (handlerOffsetX.value / size) % length;\n const i =\n handlerOffsetX.value <= 0\n ? Math.abs(toInt)\n : Math.abs(toInt > 0 ? length - toInt : 0);\n index.value = i;\n const _sharedIndex = convertToSharedIndex(i);\n sharedIndex.current = _sharedIndex;\n onChange(_sharedIndex);\n }, [\n length,\n handlerOffsetX,\n sharedPreIndex,\n index,\n size,\n sharedIndex,\n convertToSharedIndex,\n onChange,\n ]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\n\n const canSliding = React.useCallback(() => {\n return !disable;\n }, [disable]);\n\n const onScrollEnd = React.useCallback(() => {\n opts.onScrollEnd?.();\n }, [opts]);\n\n const onScrollBegin = React.useCallback(() => {\n opts.onScrollBegin?.();\n }, [opts]);\n\n const scrollWithSpring = React.useCallback(\n (toValue: number, callback?: () => void) => {\n return withSpring(\n toValue,\n { damping: 100 },\n (isFinished: boolean) => {\n callback?.();\n if (isFinished) {\n runOnJS(onScrollEnd)();\n }\n }\n );\n },\n [onScrollEnd]\n );\n\n const next = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === length - 1)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithSpring((currentPage - 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n length,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithSpring,\n ]);\n\n const prev = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === 0)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithSpring((currentPage + 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithSpring,\n ]);\n\n const to = React.useCallback(\n (idx: number, animated: boolean = false) => {\n if (idx === index.value) return;\n if (!canSliding()) return;\n\n onScrollBegin?.();\n\n const offset = handlerOffsetX.value + (index.value - idx) * size;\n\n if (animated) {\n handlerOffsetX.value = scrollWithSpring(offset, () => {\n index.value = idx;\n });\n } else {\n handlerOffsetX.value = offset;\n index.value = idx;\n runOnJS(onScrollEnd)();\n }\n },\n [\n index,\n canSliding,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithSpring,\n onScrollEnd,\n ]\n );\n\n return {\n next,\n prev,\n to,\n index,\n length,\n sharedIndex,\n sharedPreIndex,\n computedIndex,\n getCurrentIndex,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["useCarouselController.tsx"],"names":["React","Easing","runOnJS","useSharedValue","withTiming","useCarouselController","opts","size","loop","handlerOffsetX","disable","originalLength","length","onChange","duration","index","sharedIndex","useRef","sharedPreIndex","convertToSharedIndex","useCallback","i","computedIndex","current","toInt","value","Math","abs","_sharedIndex","getCurrentIndex","canSliding","onScrollEnd","onScrollBegin","scrollWithTiming","toValue","callback","easing","easeOutQuart","isFinished","next","currentPage","round","prev","to","idx","animated","offset"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { Easing } from '../constants';\nimport { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';\n\ninterface IOpts {\n loop: boolean;\n size: number;\n handlerOffsetX: Animated.SharedValue<number>;\n disable?: boolean;\n duration?: number;\n originalLength: number;\n length: number;\n onScrollBegin?: () => void;\n onScrollEnd?: () => void;\n // the length before fill data\n onChange: (index: number) => void;\n}\n\nexport interface ICarouselController {\n length: number;\n index: Animated.SharedValue<number>;\n sharedIndex: React.MutableRefObject<number>;\n sharedPreIndex: React.MutableRefObject<number>;\n prev: () => void;\n next: () => void;\n computedIndex: () => void;\n getCurrentIndex: () => number;\n to: (index: number, animated?: boolean) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n const {\n size,\n loop,\n handlerOffsetX,\n disable = false,\n originalLength,\n length,\n onChange,\n duration,\n } = opts;\n\n const index = useSharedValue<number>(0);\n // The Index displayed to the user\n const sharedIndex = React.useRef<number>(0);\n const sharedPreIndex = React.useRef<number>(0);\n\n const convertToSharedIndex = React.useCallback(\n (i: number) => {\n if (loop) {\n switch (originalLength) {\n case 1:\n return 0;\n case 2:\n return i % 2;\n }\n }\n return i;\n },\n [originalLength, loop]\n );\n\n const computedIndex = React.useCallback(() => {\n sharedPreIndex.current = sharedIndex.current;\n const toInt = (handlerOffsetX.value / size) % length;\n const i =\n handlerOffsetX.value <= 0\n ? Math.abs(toInt)\n : Math.abs(toInt > 0 ? length - toInt : 0);\n index.value = i;\n const _sharedIndex = convertToSharedIndex(i);\n sharedIndex.current = _sharedIndex;\n onChange(_sharedIndex);\n }, [\n length,\n handlerOffsetX,\n sharedPreIndex,\n index,\n size,\n sharedIndex,\n convertToSharedIndex,\n onChange,\n ]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\n\n const canSliding = React.useCallback(() => {\n return !disable;\n }, [disable]);\n\n const onScrollEnd = React.useCallback(() => {\n opts.onScrollEnd?.();\n }, [opts]);\n\n const onScrollBegin = React.useCallback(() => {\n opts.onScrollBegin?.();\n }, [opts]);\n\n const scrollWithTiming = React.useCallback(\n (toValue: number, callback?: () => void) => {\n return withTiming(\n toValue,\n { duration, easing: Easing.easeOutQuart },\n (isFinished: boolean) => {\n callback?.();\n if (isFinished) {\n runOnJS(onScrollEnd)();\n }\n }\n );\n },\n [onScrollEnd, duration]\n );\n\n const next = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === length - 1)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n length,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n ]);\n\n const prev = React.useCallback(() => {\n if (!canSliding() || (!loop && index.value === 0)) return;\n\n onScrollBegin?.();\n\n const currentPage = Math.round(handlerOffsetX.value / size);\n\n handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);\n }, [\n canSliding,\n loop,\n index.value,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n ]);\n\n const to = React.useCallback(\n (idx: number, animated: boolean = false) => {\n if (idx === index.value) return;\n if (!canSliding()) return;\n\n onScrollBegin?.();\n\n const offset = handlerOffsetX.value + (index.value - idx) * size;\n\n if (animated) {\n handlerOffsetX.value = scrollWithTiming(offset, () => {\n index.value = idx;\n });\n } else {\n handlerOffsetX.value = offset;\n index.value = idx;\n runOnJS(onScrollEnd)();\n }\n },\n [\n index,\n canSliding,\n onScrollBegin,\n handlerOffsetX,\n size,\n scrollWithTiming,\n onScrollEnd,\n ]\n );\n\n return {\n next,\n prev,\n to,\n index,\n length,\n sharedIndex,\n sharedPreIndex,\n computedIndex,\n getCurrentIndex,\n };\n}\n"]}
|
|
@@ -5,10 +5,11 @@ interface IOpts {
|
|
|
5
5
|
size: number;
|
|
6
6
|
handlerOffsetX: Animated.SharedValue<number>;
|
|
7
7
|
disable?: boolean;
|
|
8
|
-
|
|
9
|
-
onScrollEnd?: () => void;
|
|
8
|
+
duration?: number;
|
|
10
9
|
originalLength: number;
|
|
11
10
|
length: number;
|
|
11
|
+
onScrollBegin?: () => void;
|
|
12
|
+
onScrollEnd?: () => void;
|
|
12
13
|
onChange: (index: number) => void;
|
|
13
14
|
}
|
|
14
15
|
export interface ICarouselController {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-reanimated-carousel",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"!**/__mocks__"
|
|
23
23
|
],
|
|
24
24
|
"scripts": {
|
|
25
|
-
"
|
|
25
|
+
"gif": "node scripts/makegif.js ./scripts/gif-works-directory",
|
|
26
26
|
"test": "jest",
|
|
27
27
|
"typescript": "tsc --noEmit",
|
|
28
28
|
"lint": "eslint \"src/**/*.{js,ts,tsx}\"",
|
package/src/Carousel.tsx
CHANGED
|
@@ -12,8 +12,9 @@ import Animated, {
|
|
|
12
12
|
useDerivedValue,
|
|
13
13
|
useSharedValue,
|
|
14
14
|
withDecay,
|
|
15
|
-
|
|
15
|
+
withTiming,
|
|
16
16
|
} from 'react-native-reanimated';
|
|
17
|
+
import { Easing } from './constants';
|
|
17
18
|
import { CTX } from './store';
|
|
18
19
|
|
|
19
20
|
type GestureContext = {
|
|
@@ -40,6 +41,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
|
|
|
40
41
|
enableSnap,
|
|
41
42
|
panGestureHandlerProps,
|
|
42
43
|
loop: infinite,
|
|
44
|
+
autoPlayInterval,
|
|
43
45
|
},
|
|
44
46
|
} = React.useContext(CTX);
|
|
45
47
|
|
|
@@ -54,10 +56,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
|
|
|
54
56
|
const _withSpring = React.useCallback(
|
|
55
57
|
(toValue: number, onFinished?: () => void) => {
|
|
56
58
|
'worklet';
|
|
57
|
-
return
|
|
59
|
+
return withTiming(
|
|
58
60
|
toValue,
|
|
59
61
|
{
|
|
60
|
-
|
|
62
|
+
duration: autoPlayInterval,
|
|
63
|
+
easing: Easing.easeOutQuart,
|
|
61
64
|
},
|
|
62
65
|
(isFinished) => {
|
|
63
66
|
if (isFinished) {
|
|
@@ -66,7 +69,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
|
|
|
66
69
|
}
|
|
67
70
|
);
|
|
68
71
|
},
|
|
69
|
-
[]
|
|
72
|
+
[autoPlayInterval]
|
|
70
73
|
);
|
|
71
74
|
|
|
72
75
|
const endWithSpring = React.useCallback(
|
package/src/constants/index.ts
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type Animated from 'react-native-reanimated';
|
|
3
|
-
import {
|
|
3
|
+
import { Easing } from '../constants';
|
|
4
|
+
import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
5
|
|
|
5
6
|
interface IOpts {
|
|
6
7
|
loop: boolean;
|
|
7
8
|
size: number;
|
|
8
9
|
handlerOffsetX: Animated.SharedValue<number>;
|
|
9
10
|
disable?: boolean;
|
|
11
|
+
duration?: number;
|
|
12
|
+
originalLength: number;
|
|
13
|
+
length: number;
|
|
10
14
|
onScrollBegin?: () => void;
|
|
11
15
|
onScrollEnd?: () => void;
|
|
12
16
|
// the length before fill data
|
|
13
|
-
originalLength: number;
|
|
14
|
-
length: number;
|
|
15
17
|
onChange: (index: number) => void;
|
|
16
18
|
}
|
|
17
19
|
|
|
@@ -36,6 +38,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
36
38
|
originalLength,
|
|
37
39
|
length,
|
|
38
40
|
onChange,
|
|
41
|
+
duration,
|
|
39
42
|
} = opts;
|
|
40
43
|
|
|
41
44
|
const index = useSharedValue<number>(0);
|
|
@@ -96,11 +99,11 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
96
99
|
opts.onScrollBegin?.();
|
|
97
100
|
}, [opts]);
|
|
98
101
|
|
|
99
|
-
const
|
|
102
|
+
const scrollWithTiming = React.useCallback(
|
|
100
103
|
(toValue: number, callback?: () => void) => {
|
|
101
|
-
return
|
|
104
|
+
return withTiming(
|
|
102
105
|
toValue,
|
|
103
|
-
{
|
|
106
|
+
{ duration, easing: Easing.easeOutQuart },
|
|
104
107
|
(isFinished: boolean) => {
|
|
105
108
|
callback?.();
|
|
106
109
|
if (isFinished) {
|
|
@@ -109,7 +112,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
109
112
|
}
|
|
110
113
|
);
|
|
111
114
|
},
|
|
112
|
-
[onScrollEnd]
|
|
115
|
+
[onScrollEnd, duration]
|
|
113
116
|
);
|
|
114
117
|
|
|
115
118
|
const next = React.useCallback(() => {
|
|
@@ -119,7 +122,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
119
122
|
|
|
120
123
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
121
124
|
|
|
122
|
-
handlerOffsetX.value =
|
|
125
|
+
handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);
|
|
123
126
|
}, [
|
|
124
127
|
canSliding,
|
|
125
128
|
loop,
|
|
@@ -128,7 +131,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
128
131
|
onScrollBegin,
|
|
129
132
|
handlerOffsetX,
|
|
130
133
|
size,
|
|
131
|
-
|
|
134
|
+
scrollWithTiming,
|
|
132
135
|
]);
|
|
133
136
|
|
|
134
137
|
const prev = React.useCallback(() => {
|
|
@@ -138,7 +141,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
138
141
|
|
|
139
142
|
const currentPage = Math.round(handlerOffsetX.value / size);
|
|
140
143
|
|
|
141
|
-
handlerOffsetX.value =
|
|
144
|
+
handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);
|
|
142
145
|
}, [
|
|
143
146
|
canSliding,
|
|
144
147
|
loop,
|
|
@@ -146,7 +149,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
146
149
|
onScrollBegin,
|
|
147
150
|
handlerOffsetX,
|
|
148
151
|
size,
|
|
149
|
-
|
|
152
|
+
scrollWithTiming,
|
|
150
153
|
]);
|
|
151
154
|
|
|
152
155
|
const to = React.useCallback(
|
|
@@ -159,7 +162,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
159
162
|
const offset = handlerOffsetX.value + (index.value - idx) * size;
|
|
160
163
|
|
|
161
164
|
if (animated) {
|
|
162
|
-
handlerOffsetX.value =
|
|
165
|
+
handlerOffsetX.value = scrollWithTiming(offset, () => {
|
|
163
166
|
index.value = idx;
|
|
164
167
|
});
|
|
165
168
|
} else {
|
|
@@ -174,7 +177,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
|
|
|
174
177
|
onScrollBegin,
|
|
175
178
|
handlerOffsetX,
|
|
176
179
|
size,
|
|
177
|
-
|
|
180
|
+
scrollWithTiming,
|
|
178
181
|
onScrollEnd,
|
|
179
182
|
]
|
|
180
183
|
);
|