react-native-reanimated-carousel 1.0.10 → 1.2.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -29
- package/README.zh-CN.md +31 -6
- package/lib/commonjs/Carousel.js +38 -8
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/CarouselItem.js +1 -2
- package/lib/commonjs/CarouselItem.js.map +1 -1
- package/lib/commonjs/ScrollViewGesture.js +32 -26
- package/lib/commonjs/ScrollViewGesture.js.map +1 -1
- package/lib/commonjs/hooks/useCarouselController.js +18 -22
- package/lib/commonjs/hooks/useCarouselController.js.map +1 -1
- package/lib/commonjs/hooks/useOffsetX.js +12 -12
- package/lib/commonjs/hooks/useOffsetX.js.map +1 -1
- package/lib/commonjs/hooks/usePropsErrorBoundary.js +7 -5
- package/lib/commonjs/hooks/usePropsErrorBoundary.js.map +1 -1
- package/lib/commonjs/layouts/ParallaxLayout.js +16 -39
- package/lib/commonjs/layouts/ParallaxLayout.js.map +1 -1
- package/lib/commonjs/layouts/StackLayout.js +190 -0
- package/lib/commonjs/layouts/StackLayout.js.map +1 -0
- package/lib/commonjs/layouts/index.js +8 -0
- package/lib/commonjs/layouts/index.js.map +1 -1
- package/lib/module/Carousel.js +39 -9
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/CarouselItem.js +2 -2
- package/lib/module/CarouselItem.js.map +1 -1
- package/lib/module/ScrollViewGesture.js +34 -26
- package/lib/module/ScrollViewGesture.js.map +1 -1
- package/lib/module/hooks/useCarouselController.js +18 -22
- package/lib/module/hooks/useCarouselController.js.map +1 -1
- package/lib/module/hooks/useOffsetX.js +12 -12
- package/lib/module/hooks/useOffsetX.js.map +1 -1
- package/lib/module/hooks/usePropsErrorBoundary.js +7 -5
- package/lib/module/hooks/usePropsErrorBoundary.js.map +1 -1
- package/lib/module/layouts/ParallaxLayout.js +17 -36
- package/lib/module/layouts/ParallaxLayout.js.map +1 -1
- package/lib/module/layouts/StackLayout.js +165 -0
- package/lib/module/layouts/StackLayout.js.map +1 -0
- package/lib/module/layouts/index.js +1 -0
- package/lib/module/layouts/index.js.map +1 -1
- package/lib/typescript/ScrollViewGesture.d.ts +2 -1
- package/lib/typescript/layouts/StackLayout.d.ts +24 -0
- package/lib/typescript/layouts/index.d.ts +2 -1
- package/lib/typescript/types.d.ts +54 -12
- package/package.json +2 -1
- package/src/.DS_Store +0 -0
- package/src/Carousel.tsx +44 -8
- package/src/CarouselItem.tsx +6 -2
- package/src/ScrollViewGesture.tsx +43 -29
- package/src/hooks/useCarouselController.tsx +25 -35
- package/src/hooks/useOffsetX.ts +20 -18
- package/src/hooks/usePropsErrorBoundary.ts +11 -5
- package/src/layouts/ParallaxLayout.tsx +44 -51
- package/src/layouts/StackLayout.tsx +361 -0
- package/src/layouts/index.tsx +2 -1
- package/src/types.ts +55 -12
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
2
2
|
|
|
3
3
|
# react-native-reanimated-carousel
|
|
4
4
|
|
|
5
|
-
<img src="assets/
|
|
5
|
+
<img src="assets/banner.png" width="100%"/>
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
@@ -10,21 +10,44 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
10
10
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
12
|
|
|
13
|
+
> Click on the image to see the demo. 🍺
|
|
14
|
+
|
|
13
15
|
<p align="center">
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
16
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/normal/index.tsx">
|
|
17
|
+
<img src="assets/normal-horizontal.gif" width="300"/>
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/normal/index.tsx">
|
|
20
|
+
<img src="assets/normal-vertical.gif" width="300"/>
|
|
21
|
+
</a>
|
|
22
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/parallax/index.tsx">
|
|
23
|
+
<img src="assets/parallax-horizontal.gif" width="300"/>
|
|
24
|
+
</a>
|
|
25
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/parallax/index.tsx">
|
|
26
|
+
<img src="assets/parallax-vertical.gif" width="300"/>
|
|
27
|
+
</a>
|
|
28
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
29
|
+
<img src="assets/stack-horizontal-left.gif" width="300"/>
|
|
30
|
+
</a>
|
|
31
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
32
|
+
<img src="assets/stack-horizontal-right.gif" width="300"/>
|
|
33
|
+
</a>
|
|
34
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
35
|
+
<img src="assets/stack-vertical-left.gif" width="300"/>
|
|
36
|
+
</a>
|
|
37
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
38
|
+
<img src="assets/stack-vertical-right.gif" width="300"/>
|
|
39
|
+
</a>
|
|
18
40
|
</p>
|
|
19
41
|
|
|
20
42
|
<br/>
|
|
21
43
|
|
|
22
44
|
## ReactNative community's best use of the carousel component! 🎉🎉🎉
|
|
23
45
|
|
|
24
|
-
-
|
|
25
|
-
-
|
|
46
|
+
- It completely solves this [problem](https://github.com/meliorence/react-native-snap-carousel/issues/632) for `react-native-snap-carousel`! More styles and apis in development... [Try it](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
|
|
47
|
+
- **Simple**、**Infinitely scrolling very smooth**、**Fully implemented using Reanimated 2!**
|
|
26
48
|
|
|
27
49
|
## Reason
|
|
50
|
+
|
|
28
51
|
<details>
|
|
29
52
|
<summary>The common RN infinite scroll component. It get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems.Because using a completely different approach so the best performance is achieved.That's why this library was created.</summary>
|
|
30
53
|
<p align="center">
|
|
@@ -84,28 +107,32 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
84
107
|
|
|
85
108
|
## Props
|
|
86
109
|
|
|
87
|
-
| name | required | default
|
|
88
|
-
| ----------------------- | -------- |
|
|
89
|
-
| data | ✅ |
|
|
90
|
-
| width | ✅ |
|
|
91
|
-
| renderItem | ✅ |
|
|
92
|
-
| defaultIndex | ❌ | 0
|
|
93
|
-
| autoPlay | ❌ | false
|
|
94
|
-
| autoPlayReverse | ❌ | false
|
|
95
|
-
| autoPlayInterval | ❌ | 1000
|
|
96
|
-
| mode | ❌ | defalut
|
|
97
|
-
| loop | ❌ | true
|
|
98
|
-
| parallaxScrollingOffset | ❌ | 100
|
|
99
|
-
| parallaxScrollingScale | ❌ | 0.8
|
|
100
|
-
| style | ❌ | {}
|
|
101
|
-
| height | ❌ | '100%'
|
|
102
|
-
| onSnapToItem | ❌ |
|
|
103
|
-
| onScrollBegin | ❌ |
|
|
104
|
-
| onScrollEnd | ❌ |
|
|
105
|
-
| panGestureHandlerProps | ❌ | {}
|
|
106
|
-
| windowSize | ❌ | 0
|
|
107
|
-
| onProgressChange | ❌ |
|
|
108
|
-
| vertical | ❌ | false
|
|
110
|
+
| name | required | default | types | description |
|
|
111
|
+
| ----------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
112
|
+
| data | ✅ | | T[] | Carousel items data set |
|
|
113
|
+
| width | ✅ | | number | Specified carousel container width |
|
|
114
|
+
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
|
|
115
|
+
| defaultIndex | ❌ | 0 | number | Default index |
|
|
116
|
+
| autoPlay | ❌ | false | boolean | Auto play |
|
|
117
|
+
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
|
|
118
|
+
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
|
|
119
|
+
| mode | ❌ | defalut | 'default'\|'stack'\|'parallax' | Carousel Animated transitions |
|
|
120
|
+
| loop | ❌ | true | boolean | Carousel loop playback |
|
|
121
|
+
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
|
|
122
|
+
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
|
|
123
|
+
| style | ❌ | {} | ViewStyle | Carousel container style |
|
|
124
|
+
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
|
|
125
|
+
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
|
|
126
|
+
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
|
|
127
|
+
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
|
|
128
|
+
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
|
|
129
|
+
| windowSize | ❌ | 0 | number | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events |
|
|
130
|
+
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) |
|
|
131
|
+
| vertical | ❌ | false | boolean | Layout items vertically instead of horizontally |
|
|
132
|
+
| animationConfig | ❌ | { mode: 'vertical',snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {mode: 'vertical' \| 'horizontal';moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | Stack layout animation style |
|
|
133
|
+
| showLength | ❌ | data.length - 1 | number | The maximum number of items will show in stack |
|
|
134
|
+
| pagingEnabled | ❌ | true | boolean | When true, the scroll view stops on multiples of the scroll view's size when scrolling |
|
|
135
|
+
| enableSnap | ❌ | true | boolean | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false |
|
|
109
136
|
|
|
110
137
|
## Ref
|
|
111
138
|
|
package/README.zh-CN.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# react-native-reanimated-carousel
|
|
4
4
|
|
|
5
|
-
<img src="assets/
|
|
5
|
+
<img src="assets/banner-zh.jpeg" width="100%"/>
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
@@ -10,11 +10,32 @@
|
|
|
10
10
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
12
|
|
|
13
|
+
> 点击图片，查看demo。🍺
|
|
13
14
|
<p align="center">
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
15
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/normal/index.tsx">
|
|
16
|
+
<img src="assets/normal-horizontal.gif" width="300"/>
|
|
17
|
+
</a>
|
|
18
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/normal/index.tsx">
|
|
19
|
+
<img src="assets/normal-vertical.gif" width="300"/>
|
|
20
|
+
</a>
|
|
21
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/parallax/index.tsx">
|
|
22
|
+
<img src="assets/parallax-horizontal.gif" width="300"/>
|
|
23
|
+
</a>
|
|
24
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/parallax/index.tsx">
|
|
25
|
+
<img src="assets/parallax-vertical.gif" width="300"/>
|
|
26
|
+
</a>
|
|
27
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
28
|
+
<img src="assets/stack-horizontal-left.gif" width="300"/>
|
|
29
|
+
</a>
|
|
30
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
31
|
+
<img src="assets/stack-horizontal-right.gif" width="300"/>
|
|
32
|
+
</a>
|
|
33
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
34
|
+
<img src="assets/stack-vertical-left.gif" width="300"/>
|
|
35
|
+
</a>
|
|
36
|
+
<a href="https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/src/stack/index.tsx">
|
|
37
|
+
<img src="assets/stack-vertical-right.gif" width="300"/>
|
|
38
|
+
</a>
|
|
18
39
|
</p>
|
|
19
40
|
|
|
20
41
|
<br/>
|
|
@@ -93,7 +114,7 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
93
114
|
| autoPlay | ❌ | false | boolean | 是否自动播放 |
|
|
94
115
|
| autoPlayReverse | ❌ | false | boolean | 是否倒序自动播放 |
|
|
95
116
|
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | 自动播放的间隔 |
|
|
96
|
-
| mode | ❌ | defalut | 'default'\|'parallax' |
|
|
117
|
+
| mode | ❌ | defalut | 'default'\|'stack'\|'parallax' | 轮播图播放模式 |
|
|
97
118
|
| loop | ❌ | true | boolean | 是否循环播放 |
|
|
98
119
|
| parallaxScrollingOffset | ❌ | 100 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片离中间元素的距离 |
|
|
99
120
|
| parallaxScrollingScale | ❌ | 0.8 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片的缩放比例 |
|
|
@@ -106,6 +127,10 @@ import Carousel from 'react-native-reanimated-carousel';
|
|
|
106
127
|
| windowSize | ❌ | 0 | number | 能响应平移手势事件的最大 item 数量，0 表示所有元素都会先响应 |
|
|
107
128
|
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | 当滚动进度发生变化时触发 `offsetProgress`:总的偏移值 (0 390 780 ...); `absoluteProgress`:转化为 index 的进度变化 (0 1 2 ...) |
|
|
108
129
|
| vertical | ❌ | false | boolean | 将元素垂直布局而不是水平 |
|
|
130
|
+
| animationConfig | ❌ | { mode: 'vertical',snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {mode: 'vertical' \| 'horizontal';moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | 堆栈视图的动画样式 |
|
|
131
|
+
| showLength | ❌ | data.length - 1 | number | 堆栈视图中展示元素的最大数量 |
|
|
132
|
+
| pagingEnabled | ❌ | true | boolean | 当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置。 |
|
|
133
|
+
| enableSnap | ❌ | true | boolean | 如果启用，松开触摸会滚动到最近的元素，当 pagingEnabled=false 时有效 |
|
|
109
134
|
|
|
110
135
|
## Ref
|
|
111
136
|
|
package/lib/commonjs/Carousel.js
CHANGED
|
@@ -46,19 +46,32 @@ function Carousel(props, ref) {
|
|
|
46
46
|
parallaxScrollingScale,
|
|
47
47
|
style = {},
|
|
48
48
|
panGestureHandlerProps = {},
|
|
49
|
+
windowSize,
|
|
49
50
|
renderItem,
|
|
51
|
+
onScrollEnd,
|
|
50
52
|
onSnapToItem,
|
|
51
|
-
onProgressChange,
|
|
52
|
-
windowSize,
|
|
53
|
-
vertical,
|
|
54
53
|
onScrollBegin,
|
|
55
|
-
|
|
54
|
+
onProgressChange,
|
|
55
|
+
pagingEnabled = true,
|
|
56
|
+
enableSnap = true
|
|
56
57
|
} = props;
|
|
58
|
+
let animationConfig;
|
|
59
|
+
let vertical = false;
|
|
60
|
+
let showLength;
|
|
61
|
+
|
|
62
|
+
if (!props.mode || props.mode === 'default' || props.mode === 'parallax') {
|
|
63
|
+
vertical = props.vertical;
|
|
64
|
+
} else if (props.mode === 'stack') {
|
|
65
|
+
animationConfig = props.animationConfig;
|
|
66
|
+
showLength = props.showLength;
|
|
67
|
+
}
|
|
68
|
+
|
|
57
69
|
(0, _usePropsErrorBoundary.usePropsErrorBoundary)({ ...props,
|
|
58
70
|
data: _data,
|
|
59
71
|
mode,
|
|
60
72
|
loop,
|
|
61
73
|
style,
|
|
74
|
+
vertical,
|
|
62
75
|
defaultIndex,
|
|
63
76
|
autoPlayInterval,
|
|
64
77
|
panGestureHandlerProps
|
|
@@ -75,7 +88,7 @@ function Carousel(props, ref) {
|
|
|
75
88
|
|
|
76
89
|
_react.default.useEffect(() => {
|
|
77
90
|
handlerOffsetX.value = defaultHandlerOffsetX;
|
|
78
|
-
}, [vertical, handlerOffsetX, defaultHandlerOffsetX]);
|
|
91
|
+
}, [vertical, handlerOffsetX, defaultHandlerOffsetX, loop]);
|
|
79
92
|
|
|
80
93
|
const data = _react.default.useMemo(() => {
|
|
81
94
|
if (!loop) return _data;
|
|
@@ -212,6 +225,22 @@ function Carousel(props, ref) {
|
|
|
212
225
|
vertical: vertical
|
|
213
226
|
}, renderItem(item, i));
|
|
214
227
|
|
|
228
|
+
case 'stack':
|
|
229
|
+
return /*#__PURE__*/_react.default.createElement(_index.StackLayout, {
|
|
230
|
+
data: data,
|
|
231
|
+
width: width,
|
|
232
|
+
showLength: showLength,
|
|
233
|
+
height: height,
|
|
234
|
+
animationConfig: animationConfig,
|
|
235
|
+
handlerOffsetX: offsetX,
|
|
236
|
+
index: i,
|
|
237
|
+
key: i,
|
|
238
|
+
loop: loop,
|
|
239
|
+
visibleRanges: visibleRanges,
|
|
240
|
+
vertical: vertical
|
|
241
|
+
}, renderItem(item, i));
|
|
242
|
+
|
|
243
|
+
case 'default':
|
|
215
244
|
default:
|
|
216
245
|
return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
|
|
217
246
|
data: data,
|
|
@@ -225,17 +254,18 @@ function Carousel(props, ref) {
|
|
|
225
254
|
vertical: vertical
|
|
226
255
|
}, renderItem(item, i));
|
|
227
256
|
}
|
|
228
|
-
}, [loop, mode, data, offsetX, parallaxScrollingOffset, parallaxScrollingScale, renderItem, visibleRanges, vertical, width, height]);
|
|
257
|
+
}, [loop, mode, data, offsetX, parallaxScrollingOffset, parallaxScrollingScale, renderItem, visibleRanges, vertical, animationConfig, width, height, showLength]);
|
|
229
258
|
|
|
230
259
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
231
260
|
style: [styles.container, layoutStyle, style]
|
|
232
261
|
}, /*#__PURE__*/_react.default.createElement(_ScrollViewGesture.ScrollViewGesture, {
|
|
233
|
-
pagingEnabled:
|
|
262
|
+
pagingEnabled: pagingEnabled,
|
|
263
|
+
enableSnap: enableSnap,
|
|
234
264
|
vertical: vertical,
|
|
235
265
|
infinite: loop,
|
|
236
266
|
translation: handlerOffsetX,
|
|
237
267
|
style: style,
|
|
238
|
-
|
|
268
|
+
maxPage: data.length,
|
|
239
269
|
size: size,
|
|
240
270
|
panGestureHandlerProps: panGestureHandlerProps,
|
|
241
271
|
onScrollBegin: scrollViewGestureOnScrollBegin,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["Carousel","props","ref","defaultIndex","data","_data","loop","mode","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","style","panGestureHandlerProps","renderItem","onSnapToItem","onProgressChange","windowSize","vertical","onScrollBegin","onScrollEnd","width","Math","round","height","size","layoutStyle","defaultHandlerOffsetX","abs","handlerOffsetX","React","useEffect","value","useMemo","length","indexController","originalLength","onChange","i","carouselController","disable","_onScrollBegin","_onScrollEnd","run","pause","index","sharedPreIndex","sharedIndex","computedIndex","useCallback","scrollViewGestureOnScrollBegin","current","scrollViewGestureOnScrollEnd","offsetX","totalSize","x","isNaN","absoluteProgress","children","next","prev","getCurrentIndex","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","renderLayout","item","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport { ParallaxLayout } from './layouts/index';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { useIndexController } from './hooks/useIndexController';\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';\n\nfunction Carousel<T>(\n props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const {\n defaultIndex = 0,\n data: _data = [],\n loop = true,\n mode = 'default',\n autoPlay,\n autoPlayReverse,\n autoPlayInterval = 1000,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n style = {},\n panGestureHandlerProps = {},\n renderItem,\n onSnapToItem,\n onProgressChange,\n windowSize,\n vertical,\n onScrollBegin,\n onScrollEnd,\n } = props;\n\n usePropsErrorBoundary({\n ...props,\n data: _data,\n mode,\n loop,\n style,\n defaultIndex,\n autoPlayInterval,\n panGestureHandlerProps,\n });\n\n const width = Math.round(props.width || 0);\n const height = Math.round(props.height || 0);\n const size = vertical ? height : width;\n const layoutStyle = { width: width || '100%', height: height || '100%' };\n const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);\n const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);\n\n React.useEffect(() => {\n handlerOffsetX.value = defaultHandlerOffsetX;\n }, [vertical, handlerOffsetX, defaultHandlerOffsetX]);\n\n const data = React.useMemo<T[]>(() => {\n if (!loop) return _data;\n\n if (_data.length === 1) {\n return [_data[0], _data[0], _data[0]];\n }\n\n if (_data.length === 2) {\n return [_data[0], _data[1], _data[0], _data[1]];\n }\n\n return _data;\n }, [_data, loop]);\n\n const indexController = useIndexController({\n originalLength: data.length,\n length: data.length,\n handlerOffsetX,\n size,\n loop,\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n indexController,\n disable: !data.length,\n onScrollBegin: () => runOnJS(_onScrollBegin)(),\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n });\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const { index, sharedPreIndex, sharedIndex, computedIndex } =\n indexController;\n\n const _onScrollBegin = React.useCallback(() => {\n onScrollBegin?.();\n }, [onScrollBegin]);\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 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 useAnimatedReaction(\n () => offsetX.value,\n (value) => {\n let absoluteProgress = Math.abs(value / size);\n if (value > 0) {\n absoluteProgress = data.length - absoluteProgress;\n }\n !!onProgressChange &&\n runOnJS(onProgressChange)(value, absoluteProgress);\n },\n [onProgressChange, props.children]\n );\n\n const next = React.useCallback(() => {\n return carouselController.next();\n }, [carouselController]);\n\n const prev = React.useCallback(() => {\n return carouselController.prev();\n }, [carouselController]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\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 renderLayout = React.useCallback(\n (item: T, i: number) => {\n switch (mode) {\n case 'parallax':\n return (\n <ParallaxLayout\n parallaxScrollingOffset={parallaxScrollingOffset}\n parallaxScrollingScale={parallaxScrollingScale}\n data={data}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n visibleRanges={visibleRanges}\n vertical={vertical}\n >\n {renderItem(item, i)}\n </ParallaxLayout>\n );\n default:\n return (\n <CarouselItem\n data={data}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n visibleRanges={visibleRanges}\n vertical={vertical}\n >\n {renderItem(item, i)}\n </CarouselItem>\n );\n }\n },\n [\n loop,\n mode,\n data,\n offsetX,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n renderItem,\n visibleRanges,\n vertical,\n width,\n height,\n ]\n );\n\n return (\n <View style={[styles.container, layoutStyle, style]}>\n <ScrollViewGesture\n pagingEnabled\n vertical={vertical}\n infinite={loop}\n translation={handlerOffsetX}\n style={style}\n max={data.length * size}\n size={size}\n panGestureHandlerProps={panGestureHandlerProps}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n >\n <Animated.View\n style={[\n styles.container,\n layoutStyle,\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\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","defaultIndex","data","_data","loop","mode","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","style","panGestureHandlerProps","windowSize","renderItem","onScrollEnd","onSnapToItem","onScrollBegin","onProgressChange","pagingEnabled","enableSnap","animationConfig","vertical","showLength","width","Math","round","height","size","layoutStyle","defaultHandlerOffsetX","abs","handlerOffsetX","React","useEffect","value","useMemo","length","indexController","originalLength","onChange","i","carouselController","disable","_onScrollBegin","_onScrollEnd","run","pause","index","sharedPreIndex","sharedIndex","computedIndex","useCallback","scrollViewGestureOnScrollBegin","current","scrollViewGestureOnScrollEnd","offsetX","totalSize","x","isNaN","absoluteProgress","children","next","prev","getCurrentIndex","goToIndex","animated","to","useImperativeHandle","visibleRanges","total","viewSize","translation","renderLayout","item","styles","container","itemsVertical","itemsHorizontal","map","forwardRef","StyleSheet","create","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport { ParallaxLayout, StackLayout } from './layouts/index';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { useIndexController } from './hooks/useIndexController';\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 type { StackAnimationConfig } from './layouts/StackLayout';\n\nfunction Carousel<T>(\n props: PropsWithChildren<TCarouselProps<T>>,\n ref: React.Ref<ICarouselInstance>\n) {\n const {\n defaultIndex = 0,\n data: _data = [],\n loop = true,\n mode = 'default',\n autoPlay,\n autoPlayReverse,\n autoPlayInterval = 1000,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n style = {},\n panGestureHandlerProps = {},\n windowSize,\n renderItem,\n onScrollEnd,\n onSnapToItem,\n onScrollBegin,\n onProgressChange,\n pagingEnabled = true,\n enableSnap = true,\n } = props;\n\n let animationConfig: StackAnimationConfig | undefined;\n let vertical: boolean | undefined = false;\n let showLength: number | undefined;\n\n if (!props.mode || props.mode === 'default' || props.mode === 'parallax') {\n vertical = props.vertical;\n } else if (props.mode === 'stack') {\n animationConfig = props.animationConfig;\n showLength = props.showLength;\n }\n\n usePropsErrorBoundary({\n ...props,\n data: _data,\n mode,\n loop,\n style,\n vertical,\n defaultIndex,\n autoPlayInterval,\n panGestureHandlerProps,\n });\n\n const width = Math.round(props.width || 0);\n const height = Math.round(props.height || 0);\n const size = vertical ? height : width;\n const layoutStyle = { width: width || '100%', height: height || '100%' };\n const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);\n const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);\n\n React.useEffect(() => {\n handlerOffsetX.value = defaultHandlerOffsetX;\n }, [vertical, handlerOffsetX, defaultHandlerOffsetX, loop]);\n\n const data = React.useMemo<T[]>(() => {\n if (!loop) return _data;\n\n if (_data.length === 1) {\n return [_data[0], _data[0], _data[0]];\n }\n\n if (_data.length === 2) {\n return [_data[0], _data[1], _data[0], _data[1]];\n }\n\n return _data;\n }, [_data, loop]);\n\n const indexController = useIndexController({\n originalLength: data.length,\n length: data.length,\n handlerOffsetX,\n size,\n loop,\n onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n });\n\n const carouselController = useCarouselController({\n loop,\n size,\n handlerOffsetX,\n indexController,\n disable: !data.length,\n onScrollBegin: () => runOnJS(_onScrollBegin)(),\n onScrollEnd: () => runOnJS(_onScrollEnd)(),\n });\n\n const { run, pause } = useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n\n const { index, sharedPreIndex, sharedIndex, computedIndex } =\n indexController;\n\n const _onScrollBegin = React.useCallback(() => {\n onScrollBegin?.();\n }, [onScrollBegin]);\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 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 useAnimatedReaction(\n () => offsetX.value,\n (value) => {\n let absoluteProgress = Math.abs(value / size);\n if (value > 0) {\n absoluteProgress = data.length - absoluteProgress;\n }\n !!onProgressChange &&\n runOnJS(onProgressChange)(value, absoluteProgress);\n },\n [onProgressChange, props.children]\n );\n\n const next = React.useCallback(() => {\n return carouselController.next();\n }, [carouselController]);\n\n const prev = React.useCallback(() => {\n return carouselController.prev();\n }, [carouselController]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\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 renderLayout = React.useCallback(\n (item: T, i: number) => {\n switch (mode) {\n case 'parallax':\n return (\n <ParallaxLayout\n parallaxScrollingOffset={parallaxScrollingOffset}\n parallaxScrollingScale={parallaxScrollingScale}\n data={data}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n visibleRanges={visibleRanges}\n vertical={vertical}\n >\n {renderItem(item, i)}\n </ParallaxLayout>\n );\n case 'stack':\n return (\n <StackLayout\n data={data}\n width={width}\n showLength={showLength}\n height={height}\n animationConfig={animationConfig}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n visibleRanges={visibleRanges}\n vertical={vertical}\n >\n {renderItem(item, i)}\n </StackLayout>\n );\n case 'default':\n default:\n return (\n <CarouselItem\n data={data}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n visibleRanges={visibleRanges}\n vertical={vertical}\n >\n {renderItem(item, i)}\n </CarouselItem>\n );\n }\n },\n [\n loop,\n mode,\n data,\n offsetX,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n renderItem,\n visibleRanges,\n vertical,\n animationConfig,\n width,\n height,\n showLength,\n ]\n );\n\n return (\n <View style={[styles.container, layoutStyle, style]}>\n <ScrollViewGesture\n pagingEnabled={pagingEnabled}\n enableSnap={enableSnap}\n vertical={vertical}\n infinite={loop}\n translation={handlerOffsetX}\n style={style}\n maxPage={data.length}\n size={size}\n panGestureHandlerProps={panGestureHandlerProps}\n onScrollBegin={scrollViewGestureOnScrollBegin}\n onScrollEnd={scrollViewGestureOnScrollEnd}\n >\n <Animated.View\n style={[\n styles.container,\n layoutStyle,\n style,\n vertical\n ? styles.itemsVertical\n : styles.itemsHorizontal,\n ]}\n >\n {data.map(renderLayout)}\n </Animated.View>\n </ScrollViewGesture>\n </View>\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"]}
|
|
@@ -61,10 +61,9 @@ const CarouselItem = props => {
|
|
|
61
61
|
setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
|
|
62
62
|
}, [index]);
|
|
63
63
|
|
|
64
|
-
_reactNativeReanimated.
|
|
64
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => visibleRanges.value, () => {
|
|
65
65
|
(0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
|
|
66
66
|
}, [visibleRanges.value]);
|
|
67
|
-
|
|
68
67
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
69
68
|
style: [offsetXStyle, {
|
|
70
69
|
width: width || '100%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"
|
|
1
|
+
{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;AAEA;;;;;;;;AAEO,MAAMA,YASX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,KAAK,GAAG,CAJN;AAKFC,IAAAA,MAAM,GAAG,CALP;AAMFC,IAAAA,IANE;AAOFC,IAAAA,IAPE;AAQFC,IAAAA,aARE;AASFC,IAAAA;AATE,MAUFT,KAVJ;;AAYA,QAAM,CAACU,YAAD,EAAeC,eAAf,IAAkCC,eAAMC,QAAN,CAAe,KAAf,CAAxC;;AAEA,QAAMC,CAAC,GAAG,4BACN;AACIb,IAAAA,cADJ;AAEIC,IAAAA,KAFJ;AAGIa,IAAAA,IAAI,EAAEN,QAAQ,GAAGJ,MAAH,GAAYD,KAH9B;AAIIG,IAAAA,IAJJ;AAKID,IAAAA;AALJ,GADM,EAQNE,aARM,CAAV;AAWA,QAAMQ,YAAY,GAAG,6CAAiB,MAAM;AACxC,QAAIP,QAAJ,EAAc;AACV,aAAO;AAAEQ,QAAAA,SAAS,EAAE,CAAC;AAAEC,UAAAA,UAAU,EAAEJ,CAAC,CAACK,KAAF,GAAUjB,KAAK,GAAGG;AAAhC,SAAD;AAAb,OAAP;AACH;;AACD,WAAO;AACHY,MAAAA,SAAS,EAAE,CAAC;AAAEG,QAAAA,UAAU,EAAEN,CAAC,CAACK,KAAF,GAAUjB,KAAK,GAAGE;AAAhC,OAAD;AADR,KAAP;AAGH,GAPoB,EAOlB,CAACK,QAAD,CAPkB,CAArB;;AASA,QAAMY,UAAU,GAAGT,eAAMU,WAAN,CACf,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AAClDb,IAAAA,eAAe,CACVT,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAAtB,IAA6BrB,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAApD,IACKrB,KAAK,IAAIsB,aAAa,CAAC,CAAD,CAAtB,IAA6BtB,KAAK,IAAIsB,aAAa,CAAC,CAAD,CAF7C,CAAf;AAIH,GANc,EAOf,CAACtB,KAAD,CAPe,CAAnB;;AAUA,kDACI,MAAMM,aAAa,CAACW,KADxB,EAEI,MAAM;AACF,wCAAQE,UAAR,EACIb,aAAa,CAACW,KAAd,CAAoBI,aADxB,EAEIf,aAAa,CAACW,KAAd,CAAoBK,aAFxB;AAIH,GAPL,EAQI,CAAChB,aAAa,CAACW,KAAf,CARJ;AAWA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACHH,YADG,EAEH;AACIZ,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADpB;AAEIC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAFtB,KAFG;AADX,kBASI,6BAAC,kBAAD;AAAU,IAAA,YAAY,EAAEK;AAAxB,KAAuCP,QAAvC,CATJ,CADJ;AAaH,CA9EM","sourcesContent":["import React from 'react';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from './hooks/useOffsetX';\nimport type { IVisibleRanges } from './hooks/useVisibleRanges';\nimport { LazyView } from './LazyView';\n\nexport const CarouselItem: React.FC<{\n loop?: boolean;\n index: number;\n handlerOffsetX: Animated.SharedValue<number>;\n width?: number;\n height?: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n vertical?: boolean;\n}> = (props) => {\n const {\n handlerOffsetX,\n index,\n children,\n width = 0,\n height = 0,\n loop,\n data,\n visibleRanges,\n vertical,\n } = props;\n\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n const x = useOffsetX(\n {\n handlerOffsetX,\n index,\n size: vertical ? height : width,\n data,\n loop,\n },\n visibleRanges\n );\n\n const offsetXStyle = useAnimatedStyle(() => {\n if (vertical) {\n return { transform: [{ translateY: x.value - index * height }] };\n }\n return {\n transform: [{ translateX: x.value - index * width }],\n };\n }, [vertical]);\n\n const updateView = React.useCallback(\n (negativeRange: number[], positiveRange: number[]) => {\n setShouldUpdate(\n (index >= negativeRange[0] && index <= negativeRange[1]) ||\n (index >= positiveRange[0] && index <= positiveRange[1])\n );\n },\n [index]\n );\n\n useAnimatedReaction(\n () => visibleRanges.value,\n () => {\n runOnJS(updateView)(\n visibleRanges.value.negativeRange,\n visibleRanges.value.positiveRange\n );\n },\n [visibleRanges.value]\n );\n\n return (\n <Animated.View\n style={[\n offsetXStyle,\n {\n width: width || '100%',\n height: height || '100%',\n },\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n"]}
|
|
@@ -27,19 +27,20 @@ const IScrollViewGesture = props => {
|
|
|
27
27
|
infinite,
|
|
28
28
|
vertical,
|
|
29
29
|
translation,
|
|
30
|
-
pagingEnabled,
|
|
30
|
+
pagingEnabled = true,
|
|
31
|
+
enableSnap = true,
|
|
31
32
|
panGestureHandlerProps = {},
|
|
32
33
|
onScrollBegin,
|
|
33
34
|
onScrollEnd,
|
|
34
35
|
size,
|
|
35
|
-
|
|
36
|
+
maxPage
|
|
36
37
|
} = props;
|
|
37
38
|
const isHorizontal = (0, _reactNativeReanimated.useDerivedValue)(() => !vertical, [vertical]);
|
|
38
39
|
const touching = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
39
40
|
const scrollEndTranslation = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
40
41
|
const scrollEndVelocity = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
41
42
|
|
|
42
|
-
const
|
|
43
|
+
const _withSpring = _react.default.useCallback((toValue, onFinished) => {
|
|
43
44
|
'worklet';
|
|
44
45
|
|
|
45
46
|
return (0, _reactNativeReanimated.withSpring)(toValue, {
|
|
@@ -51,19 +52,36 @@ const IScrollViewGesture = props => {
|
|
|
51
52
|
});
|
|
52
53
|
}, []);
|
|
53
54
|
|
|
54
|
-
const
|
|
55
|
+
const endWithSpring = _react.default.useCallback(onFinished => {
|
|
55
56
|
'worklet';
|
|
56
57
|
|
|
58
|
+
const origin = translation.value;
|
|
59
|
+
const velocity = scrollEndVelocity.value;
|
|
60
|
+
|
|
61
|
+
if (!pagingEnabled) {
|
|
62
|
+
if (enableSnap) {
|
|
63
|
+
const nextPage = Math.round((origin + velocity * 0.4) / size) * size;
|
|
64
|
+
translation.value = _withSpring(nextPage, onFinished);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
translation.value = (0, _reactNativeReanimated.withDecay)({
|
|
69
|
+
velocity,
|
|
70
|
+
deceleration: 0.999
|
|
71
|
+
});
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
|
|
57
75
|
const page = Math.round(-translation.value / size);
|
|
58
76
|
const velocityPage = Math.round(-(translation.value + scrollEndVelocity.value) / size);
|
|
59
77
|
let finalPage = Math.min(page + 1, Math.max(page - 1, velocityPage));
|
|
60
78
|
|
|
61
79
|
if (!infinite) {
|
|
62
|
-
finalPage = Math.min(
|
|
80
|
+
finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));
|
|
63
81
|
}
|
|
64
82
|
|
|
65
|
-
translation.value =
|
|
66
|
-
}, [infinite,
|
|
83
|
+
translation.value = _withSpring(-finalPage * size, onFinished);
|
|
84
|
+
}, [infinite, _withSpring, translation, scrollEndVelocity, size, maxPage, pagingEnabled, enableSnap]);
|
|
67
85
|
|
|
68
86
|
const resetBoundary = _react.default.useCallback(() => {
|
|
69
87
|
'worklet';
|
|
@@ -93,23 +111,23 @@ const IScrollViewGesture = props => {
|
|
|
93
111
|
}
|
|
94
112
|
|
|
95
113
|
if (!infinite) {
|
|
96
|
-
translation.value =
|
|
114
|
+
translation.value = _withSpring(0);
|
|
97
115
|
return;
|
|
98
116
|
}
|
|
99
117
|
}
|
|
100
118
|
|
|
101
|
-
if (translation.value < -(
|
|
119
|
+
if (translation.value < -((maxPage - 1) * size)) {
|
|
102
120
|
if (scrollEndTranslation.value > 0) {
|
|
103
121
|
activeDecay();
|
|
104
122
|
return;
|
|
105
123
|
}
|
|
106
124
|
|
|
107
125
|
if (!infinite) {
|
|
108
|
-
translation.value =
|
|
126
|
+
translation.value = _withSpring(-((maxPage - 1) * size));
|
|
109
127
|
return;
|
|
110
128
|
}
|
|
111
129
|
}
|
|
112
|
-
}, [infinite, touching,
|
|
130
|
+
}, [infinite, touching, _withSpring, translation, scrollEndTranslation, scrollEndVelocity, onScrollEnd, maxPage, size]);
|
|
113
131
|
|
|
114
132
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => translation.value, () => {
|
|
115
133
|
if (!pagingEnabled) {
|
|
@@ -121,7 +139,7 @@ const IScrollViewGesture = props => {
|
|
|
121
139
|
touching.value = true;
|
|
122
140
|
(0, _reactNativeReanimated.cancelAnimation)(translation);
|
|
123
141
|
onScrollBegin && (0, _reactNativeReanimated.runOnJS)(onScrollBegin)();
|
|
124
|
-
ctx.max =
|
|
142
|
+
ctx.max = (maxPage - 1) * size;
|
|
125
143
|
ctx.panOffset = translation.value;
|
|
126
144
|
},
|
|
127
145
|
onActive: (e, ctx) => {
|
|
@@ -147,25 +165,13 @@ const IScrollViewGesture = props => {
|
|
|
147
165
|
} = e;
|
|
148
166
|
scrollEndVelocity.value = isHorizontal.value ? velocityX : velocityY;
|
|
149
167
|
scrollEndTranslation.value = isHorizontal.value ? translationX : translationY;
|
|
150
|
-
|
|
151
|
-
if (pagingEnabled) {
|
|
152
|
-
withPaging(() => onScrollEnd && (0, _reactNativeReanimated.runOnJS)(onScrollEnd)());
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
translation.value = (0, _reactNativeReanimated.withDecay)({
|
|
157
|
-
velocity: scrollEndVelocity.value
|
|
158
|
-
}, isFinished => {
|
|
159
|
-
if (isFinished) {
|
|
160
|
-
onScrollEnd && (0, _reactNativeReanimated.runOnJS)(onScrollEnd)();
|
|
161
|
-
}
|
|
162
|
-
});
|
|
168
|
+
endWithSpring(() => onScrollEnd && (0, _reactNativeReanimated.runOnJS)(onScrollEnd)());
|
|
163
169
|
|
|
164
170
|
if (!infinite) {
|
|
165
171
|
touching.value = false;
|
|
166
172
|
}
|
|
167
173
|
}
|
|
168
|
-
}, [pagingEnabled, isHorizontal.value, infinite,
|
|
174
|
+
}, [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]);
|
|
169
175
|
|
|
170
176
|
const directionStyle = _react.default.useMemo(() => {
|
|
171
177
|
return vertical ? styles.contentHorizontal : styles.contentVertical;
|