react-native-reanimated-carousel 0.4.0 → 0.4.4
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 +15 -14
- package/lib/commonjs/Carousel.js +86 -46
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/{useLoop.js → useAutoPlay.js} +7 -6
- package/lib/commonjs/useAutoPlay.js.map +1 -0
- package/lib/commonjs/useCarouselController.js +20 -22
- package/lib/commonjs/useCarouselController.js.map +1 -1
- package/lib/commonjs/useLock.js +41 -0
- package/lib/commonjs/useLock.js.map +1 -0
- package/lib/module/Carousel.js +84 -42
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/{useLoop.js → useAutoPlay.js} +6 -5
- package/lib/module/useAutoPlay.js.map +1 -0
- package/lib/module/useCarouselController.js +21 -21
- package/lib/module/useCarouselController.js.map +1 -1
- package/lib/module/useLock.js +34 -0
- package/lib/module/useLock.js.map +1 -0
- package/lib/typescript/Carousel.d.ts +5 -1
- package/lib/typescript/{useLoop.d.ts → useAutoPlay.d.ts} +3 -1
- package/lib/typescript/useCarouselController.d.ts +4 -0
- package/lib/typescript/useLock.d.ts +9 -0
- package/package.json +1 -1
- package/src/Carousel.tsx +91 -60
- package/src/{useLoop.ts → useAutoPlay.ts} +12 -3
- package/src/useCarouselController.tsx +44 -21
- package/src/useLock.ts +31 -0
- package/lib/commonjs/fillNum.js +0 -30
- package/lib/commonjs/fillNum.js.map +0 -1
- package/lib/commonjs/useLoop.js.map +0 -1
- package/lib/module/fillNum.js +0 -23
- package/lib/module/fillNum.js.map +0 -1
- package/lib/module/useLoop.js.map +0 -1
- package/lib/typescript/fillNum.d.ts +0 -4
- package/src/fillNum.ts +0 -17
package/README.md
CHANGED
|
@@ -52,20 +52,21 @@ import Carousel from "react-native-reanimated-carousel";
|
|
|
52
52
|
|
|
53
53
|
## Props
|
|
54
54
|
|
|
55
|
-
| name | required | default
|
|
56
|
-
| ----------------------- | -------- |
|
|
57
|
-
| data | true |
|
|
58
|
-
| width | true |
|
|
59
|
-
| renderItem | true |
|
|
60
|
-
| autoPlay | false | false
|
|
61
|
-
| autoPlayReverse | false | false
|
|
62
|
-
| autoPlayInterval | false | 1000
|
|
63
|
-
| mode | false | defalut
|
|
64
|
-
| loop | false | true
|
|
65
|
-
| parallaxScrollingOffset | false | 100
|
|
66
|
-
| parallaxScrollingScale | false | 0.8
|
|
67
|
-
| style | false | {}
|
|
68
|
-
| height | false | '100%'
|
|
55
|
+
| name | required | default | types | description |
|
|
56
|
+
| ----------------------- | -------- | --------------- | ------------------------------------------- | ------------------------------------------------------------------------------ |
|
|
57
|
+
| data | true | | T[] | Carousel items data set |
|
|
58
|
+
| width | true | | number | Specified carousel container width |
|
|
59
|
+
| renderItem | true | | (data: T, index: number) => React.ReactNode | Render carousel item |
|
|
60
|
+
| autoPlay | false | false | boolean | Auto play |
|
|
61
|
+
| autoPlayReverse | false | false | boolean | Auto play reverse playback |
|
|
62
|
+
| autoPlayInterval | false | 1000 | autoPlayInterval | Auto play playback interval |
|
|
63
|
+
| mode | false | defalut | 'default'\|'parallax' | Carousel Animated transitions |
|
|
64
|
+
| loop | false | true | boolean | Carousel loop playback |
|
|
65
|
+
| parallaxScrollingOffset | false | 100 | number | When use 'default' Layout props,this prop can be control prev/next item offset |
|
|
66
|
+
| parallaxScrollingScale | false | 0.8 | number | When use 'default' Layout props,this prop can be control prev/next item scale |
|
|
67
|
+
| style | false | {} | ViewStyle | Carousel container style |
|
|
68
|
+
| height | false | '100%' | undefined \| string \| number | Specified carousel container height |
|
|
69
|
+
| timingConfig | false | {duration: 250} | Animated.WithTimingConfig | Timing config of translation animated |
|
|
69
70
|
|
|
70
71
|
## Ref
|
|
71
72
|
|
package/lib/commonjs/Carousel.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default =
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -13,36 +13,28 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
|
|
|
13
13
|
|
|
14
14
|
var _CarouselItem = require("./CarouselItem");
|
|
15
15
|
|
|
16
|
-
var _fillNum = require("./fillNum");
|
|
17
|
-
|
|
18
16
|
var _index = require("./layouts/index");
|
|
19
17
|
|
|
20
18
|
var _useCarouselController = require("./useCarouselController");
|
|
21
19
|
|
|
22
20
|
var _useComputedAnim = require("./useComputedAnim");
|
|
23
21
|
|
|
24
|
-
var
|
|
22
|
+
var _useAutoPlay = require("./useAutoPlay");
|
|
25
23
|
|
|
26
24
|
var _useComputedIndex = require("./useComputedIndex");
|
|
27
25
|
|
|
26
|
+
var _useLock = require("./useLock");
|
|
27
|
+
|
|
28
28
|
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); }
|
|
29
29
|
|
|
30
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
31
|
|
|
32
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
33
33
|
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return (0, _reactNativeReanimated.withTiming)(num, {
|
|
38
|
-
duration: 250
|
|
39
|
-
}, isFinished => {
|
|
40
|
-
!!callback && (0, _reactNativeReanimated.runOnJS)(callback)(isFinished);
|
|
41
|
-
});
|
|
34
|
+
const defaultTimingConfig = {
|
|
35
|
+
duration: 250
|
|
42
36
|
};
|
|
43
37
|
|
|
44
|
-
exports._withTiming = _withTiming;
|
|
45
|
-
|
|
46
38
|
function Carousel(props, ref) {
|
|
47
39
|
const {
|
|
48
40
|
height = '100%',
|
|
@@ -57,11 +49,15 @@ function Carousel(props, ref) {
|
|
|
57
49
|
parallaxScrollingOffset,
|
|
58
50
|
parallaxScrollingScale,
|
|
59
51
|
onSnapToItem,
|
|
60
|
-
style
|
|
52
|
+
style,
|
|
53
|
+
timingConfig = defaultTimingConfig
|
|
61
54
|
} = props;
|
|
55
|
+
const lockController = (0, _useLock.useLockController)();
|
|
62
56
|
const handlerOffsetX = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
63
57
|
|
|
64
58
|
const data = _react.default.useMemo(() => {
|
|
59
|
+
if (!loop) return _data;
|
|
60
|
+
|
|
65
61
|
if (_data.length === 1) {
|
|
66
62
|
return [_data[0], _data[0], _data[0]];
|
|
67
63
|
}
|
|
@@ -71,18 +67,22 @@ function Carousel(props, ref) {
|
|
|
71
67
|
}
|
|
72
68
|
|
|
73
69
|
return _data;
|
|
74
|
-
}, [_data]);
|
|
70
|
+
}, [_data, loop]);
|
|
75
71
|
|
|
76
72
|
const computedAnimResult = (0, _useComputedAnim.useComputedAnim)(width, data.length);
|
|
77
73
|
const carouselController = (0, _useCarouselController.useCarouselController)({
|
|
78
74
|
width,
|
|
79
|
-
handlerOffsetX
|
|
75
|
+
handlerOffsetX,
|
|
76
|
+
lockController,
|
|
77
|
+
timingConfig,
|
|
78
|
+
disable: !data.length
|
|
80
79
|
});
|
|
81
|
-
(0,
|
|
80
|
+
(0, _useAutoPlay.useAutoPlay)({
|
|
82
81
|
autoPlay,
|
|
83
82
|
autoPlayInterval,
|
|
84
83
|
autoPlayReverse,
|
|
85
|
-
carouselController
|
|
84
|
+
carouselController,
|
|
85
|
+
lockController
|
|
86
86
|
});
|
|
87
87
|
const {
|
|
88
88
|
index,
|
|
@@ -96,9 +96,23 @@ function Carousel(props, ref) {
|
|
|
96
96
|
const x = handlerOffsetX.value % computedAnimResult.WL;
|
|
97
97
|
return isNaN(x) ? 0 : x;
|
|
98
98
|
}, [computedAnimResult]);
|
|
99
|
-
(0, _reactNativeReanimated.useAnimatedReaction)(() => index.value, i =>
|
|
99
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => index.value, i => {
|
|
100
|
+
if (loop) {
|
|
101
|
+
switch (_data.length) {
|
|
102
|
+
case 1:
|
|
103
|
+
i = 0;
|
|
104
|
+
break;
|
|
105
|
+
|
|
106
|
+
case 2:
|
|
107
|
+
i = i % 2;
|
|
108
|
+
break;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
onSnapToItem && (0, _reactNativeReanimated.runOnJS)(onSnapToItem)(i);
|
|
112
|
+
}
|
|
113
|
+
}, [onSnapToItem, loop, _data]);
|
|
100
114
|
|
|
101
|
-
const callComputedIndex = _react.default.useCallback(
|
|
115
|
+
const callComputedIndex = _react.default.useCallback(() => computedIndex === null || computedIndex === void 0 ? void 0 : computedIndex(), [computedIndex]);
|
|
102
116
|
|
|
103
117
|
const next = _react.default.useCallback(() => {
|
|
104
118
|
return carouselController.next(callComputedIndex);
|
|
@@ -114,53 +128,79 @@ function Carousel(props, ref) {
|
|
|
114
128
|
|
|
115
129
|
const animatedListScrollHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
|
|
116
130
|
onStart: (_, ctx) => {
|
|
131
|
+
if (lockController.isLock()) return;
|
|
117
132
|
ctx.startContentOffsetX = handlerOffsetX.value;
|
|
133
|
+
ctx.currentContentOffsetX = handlerOffsetX.value;
|
|
134
|
+
ctx.start = true;
|
|
118
135
|
},
|
|
119
136
|
onActive: (e, ctx) => {
|
|
137
|
+
if (lockController.isLock() || !ctx.start) return;
|
|
138
|
+
/**
|
|
139
|
+
* `onActive` and `onEnd` return different values of translationX!So that creates a bias!TAT
|
|
140
|
+
* */
|
|
141
|
+
|
|
142
|
+
ctx.translationX = e.translationX;
|
|
143
|
+
|
|
120
144
|
if (loop) {
|
|
121
|
-
handlerOffsetX.value = ctx.
|
|
145
|
+
handlerOffsetX.value = ctx.currentContentOffsetX + e.translationX;
|
|
122
146
|
return;
|
|
123
147
|
}
|
|
124
148
|
|
|
125
|
-
handlerOffsetX.value = Math.max(Math.min(ctx.
|
|
149
|
+
handlerOffsetX.value = Math.max(Math.min(ctx.currentContentOffsetX + e.translationX, 0), -(data.length - 1) * width);
|
|
126
150
|
},
|
|
127
|
-
onEnd: e => {
|
|
128
|
-
|
|
129
|
-
const
|
|
151
|
+
onEnd: (e, ctx) => {
|
|
152
|
+
if (lockController.isLock() || !ctx.start) return;
|
|
153
|
+
const translationX = ctx.translationX;
|
|
130
154
|
|
|
131
155
|
function _withTimingCallback(num) {
|
|
132
|
-
return
|
|
156
|
+
return (0, _reactNativeReanimated.withTiming)(num, timingConfig, isFinished => {
|
|
157
|
+
if (isFinished) {
|
|
158
|
+
ctx.start = false;
|
|
159
|
+
lockController.unLock();
|
|
160
|
+
(0, _reactNativeReanimated.runOnJS)(callComputedIndex)();
|
|
161
|
+
}
|
|
162
|
+
});
|
|
133
163
|
}
|
|
134
164
|
|
|
135
|
-
if (
|
|
165
|
+
if (translationX > 0) {
|
|
166
|
+
/**
|
|
167
|
+
* If not loop no , longer scroll when sliding to the start.
|
|
168
|
+
* */
|
|
136
169
|
if (!loop && handlerOffsetX.value >= 0) {
|
|
137
170
|
return;
|
|
138
171
|
}
|
|
139
172
|
|
|
140
|
-
|
|
141
|
-
|
|
173
|
+
lockController.lock();
|
|
174
|
+
|
|
175
|
+
if (Math.abs(translationX) + Math.abs(e.velocityX) > width / 2) {
|
|
176
|
+
handlerOffsetX.value = _withTimingCallback(handlerOffsetX.value + width - translationX);
|
|
142
177
|
} else {
|
|
143
|
-
handlerOffsetX.value = _withTimingCallback(
|
|
178
|
+
handlerOffsetX.value = _withTimingCallback(handlerOffsetX.value - translationX);
|
|
144
179
|
}
|
|
145
180
|
|
|
146
181
|
return;
|
|
147
182
|
}
|
|
148
183
|
|
|
149
|
-
if (
|
|
184
|
+
if (translationX < 0) {
|
|
185
|
+
/**
|
|
186
|
+
* If not loop , no longer scroll when sliding to the end.
|
|
187
|
+
* */
|
|
150
188
|
if (!loop && handlerOffsetX.value <= -(data.length - 1) * width) {
|
|
151
189
|
return;
|
|
152
190
|
}
|
|
153
191
|
|
|
154
|
-
|
|
155
|
-
|
|
192
|
+
lockController.lock();
|
|
193
|
+
|
|
194
|
+
if (Math.abs(translationX) + Math.abs(e.velocityX) > width / 2) {
|
|
195
|
+
handlerOffsetX.value = _withTimingCallback(handlerOffsetX.value - width - translationX);
|
|
156
196
|
} else {
|
|
157
|
-
handlerOffsetX.value = _withTimingCallback(
|
|
197
|
+
handlerOffsetX.value = _withTimingCallback(handlerOffsetX.value - translationX);
|
|
158
198
|
}
|
|
159
199
|
|
|
160
200
|
return;
|
|
161
201
|
}
|
|
162
202
|
}
|
|
163
|
-
}, [loop, data]);
|
|
203
|
+
}, [loop, data, lockController]);
|
|
164
204
|
|
|
165
205
|
_react.default.useImperativeHandle(ref, () => {
|
|
166
206
|
return {
|
|
@@ -174,7 +214,7 @@ function Carousel(props, ref) {
|
|
|
174
214
|
switch (mode) {
|
|
175
215
|
case 'parallax':
|
|
176
216
|
return ({
|
|
177
|
-
index,
|
|
217
|
+
index: i,
|
|
178
218
|
children
|
|
179
219
|
}) => /*#__PURE__*/_react.default.createElement(_index.ParallaxLayout, {
|
|
180
220
|
parallaxScrollingOffset: parallaxScrollingOffset,
|
|
@@ -182,22 +222,22 @@ function Carousel(props, ref) {
|
|
|
182
222
|
computedAnimResult: computedAnimResult,
|
|
183
223
|
width: width,
|
|
184
224
|
handlerOffsetX: offsetX,
|
|
185
|
-
index:
|
|
186
|
-
key:
|
|
225
|
+
index: i,
|
|
226
|
+
key: i,
|
|
187
227
|
loop: loop
|
|
188
228
|
}, children);
|
|
189
229
|
|
|
190
230
|
default:
|
|
191
231
|
return ({
|
|
192
|
-
index,
|
|
232
|
+
index: i,
|
|
193
233
|
children
|
|
194
234
|
}) => /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
|
|
195
235
|
computedAnimResult: computedAnimResult,
|
|
196
236
|
width: width,
|
|
197
237
|
height: height,
|
|
198
238
|
handlerOffsetX: offsetX,
|
|
199
|
-
index:
|
|
200
|
-
key:
|
|
239
|
+
index: i,
|
|
240
|
+
key: i,
|
|
201
241
|
loop: loop
|
|
202
242
|
}, children);
|
|
203
243
|
}
|
|
@@ -213,11 +253,11 @@ function Carousel(props, ref) {
|
|
|
213
253
|
flexDirection: 'row',
|
|
214
254
|
position: 'relative'
|
|
215
255
|
}, style]
|
|
216
|
-
}, data.map((item,
|
|
256
|
+
}, data.map((item, i) => {
|
|
217
257
|
return /*#__PURE__*/_react.default.createElement(Layouts, {
|
|
218
|
-
index:
|
|
219
|
-
key:
|
|
220
|
-
}, renderItem(item,
|
|
258
|
+
index: i,
|
|
259
|
+
key: i
|
|
260
|
+
}, renderItem(item, i));
|
|
221
261
|
})));
|
|
222
262
|
}
|
|
223
263
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Carousel.tsx"],"names":["_withTiming","num","callback","duration","isFinished","Carousel","props","ref","height","data","_data","width","loop","mode","renderItem","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","onSnapToItem","style","handlerOffsetX","React","useMemo","length","computedAnimResult","carouselController","index","computedIndex","offsetX","x","value","WL","isNaN","i","callComputedIndex","useCallback","next","prev","getCurrentIndex","animatedListScrollHandler","onStart","_","ctx","startContentOffsetX","onActive","e","Math","round","translationX","max","min","onEnd","intTranslationX","sub","abs","_withTimingCallback","useImperativeHandle","Layouts","children","flexDirection","position","map","item","forwardRef"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport { fillNum } from './fillNum';\nimport type { TMode } from './layouts';\nimport { ParallaxLayout } from './layouts/index';\nimport { useCarouselController } from './useCarouselController';\nimport { useComputedAnim } from './useComputedAnim';\nimport { useLoop } from './useLoop';\nimport { useComputedIndex } from './useComputedIndex';\n\nexport const _withTiming = (\n num: number,\n callback?: (isFinished: boolean) => void\n) => {\n 'worklet';\n return withTiming(\n num,\n {\n duration: 250,\n },\n (isFinished) => {\n !!callback && runOnJS(callback)(isFinished);\n }\n );\n};\n\nexport interface ICarouselProps<T extends unknown> {\n ref?: React.Ref<ICarouselInstance>;\n /**\n * Carousel loop playback.\n * @default true\n */\n loop?: boolean;\n /**\n * Carousel Animated transitions.\n * @default 'default'\n */\n mode?: TMode;\n /**\n * Render carousel item.\n */\n renderItem: (data: T, index: number) => React.ReactNode;\n /**\n * Specified carousel container width.\n */\n width: number;\n /**\n * Specified carousel container height.\n * @default '100%'\n */\n height?: FlexStyle['height'];\n /**\n * Carousel items data set.\n */\n data: T[];\n /**\n * Auto play\n */\n autoPlay?: boolean;\n /**\n * Auto play\n * @description reverse playback\n */\n autoPlayReverse?: boolean;\n /**\n * Auto play\n * @description playback interval\n */\n autoPlayInterval?: number;\n /**\n * Carousel container style\n */\n style?: ViewStyle;\n /**\n * When use 'default' Layout props,this prop can be control prev/next item offset.\n * @default 100\n */\n parallaxScrollingOffset?: number;\n /**\n * When use 'default' Layout props,this prop can be control prev/next item offset.\n * @default 0.8\n */\n parallaxScrollingScale?: number;\n /**\n * Callback fired when navigating to an item\n */\n onSnapToItem?: (index: number) => void;\n}\n\nexport interface ICarouselInstance {\n /**\n * Play the last one\n */\n prev: () => void;\n /**\n * Play the next one\n */\n next: () => void;\n /**\n * Get current item index\n */\n getCurrentIndex: () => number;\n}\n\nfunction Carousel<T extends unknown = any>(\n props: ICarouselProps<T>,\n ref: React.Ref<ICarouselInstance>\n) {\n const {\n height = '100%',\n data: _data = [],\n width,\n loop = true,\n mode = 'default',\n renderItem,\n autoPlay,\n autoPlayReverse,\n autoPlayInterval,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n onSnapToItem,\n style,\n } = props;\n const handlerOffsetX = useSharedValue<number>(0);\n const data = React.useMemo<T[]>(() => {\n if (_data.length === 1) {\n return [_data[0], _data[0], _data[0]];\n }\n if (_data.length === 2) {\n return [_data[0], _data[1], _data[0], _data[1]];\n }\n return _data;\n }, [_data]);\n\n const computedAnimResult = useComputedAnim(width, data.length);\n const carouselController = useCarouselController({ width, handlerOffsetX });\n useLoop({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n });\n const { index, computedIndex } = useComputedIndex({\n length: data.length,\n handlerOffsetX,\n width,\n });\n\n const offsetX = useDerivedValue(() => {\n const x = handlerOffsetX.value % computedAnimResult.WL;\n return isNaN(x) ? 0 : x;\n }, [computedAnimResult]);\n\n useAnimatedReaction(\n () => index.value,\n (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n [onSnapToItem]\n );\n\n const callComputedIndex = React.useCallback(\n (isFinished: boolean) => isFinished && computedIndex?.(),\n [computedIndex]\n );\n\n const next = React.useCallback(() => {\n return carouselController.next(callComputedIndex);\n }, [carouselController, callComputedIndex]);\n\n const prev = React.useCallback(() => {\n return carouselController.prev(callComputedIndex);\n }, [carouselController, callComputedIndex]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\n\n const animatedListScrollHandler =\n useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(\n {\n onStart: (_, ctx: any) => {\n ctx.startContentOffsetX = handlerOffsetX.value;\n },\n onActive: (e, ctx: any) => {\n if (loop) {\n handlerOffsetX.value =\n ctx.startContentOffsetX +\n Math.round(e.translationX);\n return;\n }\n handlerOffsetX.value = Math.max(\n Math.min(\n ctx.startContentOffsetX +\n Math.round(e.translationX),\n 0\n ),\n -(data.length - 1) * width\n );\n },\n onEnd: (e) => {\n const intTranslationX = Math.round(e.translationX);\n const sub = Math.abs(intTranslationX);\n\n function _withTimingCallback(num: number) {\n return _withTiming(num, callComputedIndex);\n }\n\n if (intTranslationX > 0) {\n if (!loop && handlerOffsetX.value >= 0) {\n return;\n }\n\n if (sub > width / 2) {\n handlerOffsetX.value = _withTimingCallback(\n fillNum(\n width,\n handlerOffsetX.value + (width - sub)\n )\n );\n } else {\n handlerOffsetX.value = _withTimingCallback(\n fillNum(width, handlerOffsetX.value - sub)\n );\n }\n return;\n }\n\n if (intTranslationX < 0) {\n if (\n !loop &&\n handlerOffsetX.value <= -(data.length - 1) * width\n ) {\n return;\n }\n\n if (sub > width / 2) {\n handlerOffsetX.value = _withTimingCallback(\n fillNum(\n width,\n handlerOffsetX.value - (width - sub)\n )\n );\n } else {\n handlerOffsetX.value = _withTimingCallback(\n fillNum(width, handlerOffsetX.value + sub)\n );\n }\n return;\n }\n },\n },\n [loop, data]\n );\n\n React.useImperativeHandle(ref, () => {\n return {\n next,\n prev,\n getCurrentIndex,\n };\n });\n\n const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {\n switch (mode) {\n case 'parallax':\n return ({ index, children }) => (\n <ParallaxLayout\n parallaxScrollingOffset={parallaxScrollingOffset}\n parallaxScrollingScale={parallaxScrollingScale}\n computedAnimResult={computedAnimResult}\n width={width}\n handlerOffsetX={offsetX}\n index={index}\n key={index}\n loop={loop}\n >\n {children}\n </ParallaxLayout>\n );\n default:\n return ({ index, children }) => (\n <CarouselItem\n computedAnimResult={computedAnimResult}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={index}\n key={index}\n loop={loop}\n >\n {children}\n </CarouselItem>\n );\n }\n }, [\n loop,\n mode,\n computedAnimResult,\n height,\n offsetX,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n width,\n ]);\n\n return (\n <PanGestureHandler onHandlerStateChange={animatedListScrollHandler}>\n <Animated.View\n style={[\n // eslint-disable-next-line react-native/no-inline-styles\n {\n width,\n height,\n flexDirection: 'row',\n position: 'relative',\n },\n style,\n ]}\n >\n {data.map((item, index) => {\n return (\n <Layouts index={index} key={index}>\n {renderItem(item, index)}\n </Layouts>\n );\n })}\n </Animated.View>\n </PanGestureHandler>\n );\n}\n\nexport default React.forwardRef(Carousel) as typeof Carousel;\n"]}
|
|
1
|
+
{"version":3,"sources":["Carousel.tsx"],"names":["defaultTimingConfig","duration","Carousel","props","ref","height","data","_data","width","loop","mode","renderItem","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","onSnapToItem","style","timingConfig","lockController","handlerOffsetX","React","useMemo","length","computedAnimResult","carouselController","disable","index","computedIndex","offsetX","x","value","WL","isNaN","i","callComputedIndex","useCallback","next","prev","getCurrentIndex","animatedListScrollHandler","onStart","_","ctx","isLock","startContentOffsetX","currentContentOffsetX","start","onActive","e","translationX","Math","max","min","onEnd","_withTimingCallback","num","isFinished","unLock","lock","abs","velocityX","useImperativeHandle","Layouts","children","flexDirection","position","map","item","forwardRef"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewStyle } from 'react-native';\nimport {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport type { TMode } from './layouts';\nimport { ParallaxLayout } from './layouts/index';\nimport { useCarouselController } from './useCarouselController';\nimport { useComputedAnim } from './useComputedAnim';\nimport { useAutoPlay } from './useAutoPlay';\nimport { useComputedIndex } from './useComputedIndex';\nimport { useLockController } from './useLock';\n\nconst defaultTimingConfig: Animated.WithTimingConfig = {\n duration: 250,\n};\n\nexport interface ICarouselProps<T extends unknown> {\n ref?: React.Ref<ICarouselInstance>;\n /**\n * Carousel loop playback.\n * @default true\n */\n loop?: boolean;\n /**\n * Carousel Animated transitions.\n * @default 'default'\n */\n mode?: TMode;\n /**\n * Render carousel item.\n */\n renderItem: (data: T, index: number) => React.ReactNode;\n /**\n * Specified carousel container width.\n */\n width: number;\n /**\n * Specified carousel container height.\n * @default '100%'\n */\n height?: FlexStyle['height'];\n /**\n * Carousel items data set.\n */\n data: T[];\n /**\n * Auto play\n */\n autoPlay?: boolean;\n /**\n * Auto play\n * @description reverse playback\n */\n autoPlayReverse?: boolean;\n /**\n * Auto play\n * @description playback interval\n */\n autoPlayInterval?: number;\n /**\n * Carousel container style\n */\n style?: ViewStyle;\n /**\n * When use 'default' Layout props,this prop can be control prev/next item offset.\n * @default 100\n */\n parallaxScrollingOffset?: number;\n /**\n * When use 'default' Layout props,this prop can be control prev/next item offset.\n * @default 0.8\n */\n parallaxScrollingScale?: number;\n /**\n * Callback fired when navigating to an item\n */\n onSnapToItem?: (index: number) => void;\n /**\n * Timing config of translation animated\n */\n timingConfig?: Animated.WithTimingConfig;\n}\n\nexport interface ICarouselInstance {\n /**\n * Play the last one\n */\n prev: () => void;\n /**\n * Play the next one\n */\n next: () => void;\n /**\n * Get current item index\n */\n getCurrentIndex: () => number;\n}\n\nfunction Carousel<T extends unknown = any>(\n props: ICarouselProps<T>,\n ref: React.Ref<ICarouselInstance>\n) {\n const {\n height = '100%',\n data: _data = [],\n width,\n loop = true,\n mode = 'default',\n renderItem,\n autoPlay,\n autoPlayReverse,\n autoPlayInterval,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n onSnapToItem,\n style,\n timingConfig = defaultTimingConfig,\n } = props;\n const lockController = useLockController();\n const handlerOffsetX = useSharedValue<number>(0);\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 computedAnimResult = useComputedAnim(width, data.length);\n const carouselController = useCarouselController({\n width,\n handlerOffsetX,\n lockController,\n timingConfig,\n disable: !data.length,\n });\n useAutoPlay({\n autoPlay,\n autoPlayInterval,\n autoPlayReverse,\n carouselController,\n lockController,\n });\n const { index, computedIndex } = useComputedIndex({\n length: data.length,\n handlerOffsetX,\n width,\n });\n\n const offsetX = useDerivedValue(() => {\n const x = handlerOffsetX.value % computedAnimResult.WL;\n return isNaN(x) ? 0 : x;\n }, [computedAnimResult]);\n\n useAnimatedReaction(\n () => index.value,\n (i) => {\n if (loop) {\n switch (_data.length) {\n case 1:\n i = 0;\n break;\n case 2:\n i = i % 2;\n break;\n }\n onSnapToItem && runOnJS(onSnapToItem)(i);\n }\n },\n [onSnapToItem, loop, _data]\n );\n\n const callComputedIndex = React.useCallback(\n () => computedIndex?.(),\n [computedIndex]\n );\n\n const next = React.useCallback(() => {\n return carouselController.next(callComputedIndex);\n }, [carouselController, callComputedIndex]);\n\n const prev = React.useCallback(() => {\n return carouselController.prev(callComputedIndex);\n }, [carouselController, callComputedIndex]);\n\n const getCurrentIndex = React.useCallback(() => {\n return index.value;\n }, [index]);\n\n const animatedListScrollHandler =\n useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(\n {\n onStart: (_, ctx: any) => {\n if (lockController.isLock()) return;\n ctx.startContentOffsetX = handlerOffsetX.value;\n ctx.currentContentOffsetX = handlerOffsetX.value;\n ctx.start = true;\n },\n onActive: (e, ctx: any) => {\n if (lockController.isLock() || !ctx.start) return;\n /**\n * `onActive` and `onEnd` return different values of translationX!So that creates a bias!TAT\n * */\n ctx.translationX = e.translationX;\n if (loop) {\n handlerOffsetX.value =\n ctx.currentContentOffsetX + e.translationX;\n return;\n }\n handlerOffsetX.value = Math.max(\n Math.min(ctx.currentContentOffsetX + e.translationX, 0),\n -(data.length - 1) * width\n );\n },\n onEnd: (e, ctx: any) => {\n if (lockController.isLock() || !ctx.start) return;\n const translationX = ctx.translationX;\n function _withTimingCallback(num: number) {\n return withTiming(num, timingConfig, (isFinished) => {\n if (isFinished) {\n ctx.start = false;\n lockController.unLock();\n runOnJS(callComputedIndex)();\n }\n });\n }\n\n if (translationX > 0) {\n /**\n * If not loop no , longer scroll when sliding to the start.\n * */\n if (!loop && handlerOffsetX.value >= 0) {\n return;\n }\n lockController.lock();\n if (\n Math.abs(translationX) + Math.abs(e.velocityX) >\n width / 2\n ) {\n handlerOffsetX.value = _withTimingCallback(\n handlerOffsetX.value + width - translationX\n );\n } else {\n handlerOffsetX.value = _withTimingCallback(\n handlerOffsetX.value - translationX\n );\n }\n return;\n }\n\n if (translationX < 0) {\n /**\n * If not loop , no longer scroll when sliding to the end.\n * */\n if (\n !loop &&\n handlerOffsetX.value <= -(data.length - 1) * width\n ) {\n return;\n }\n lockController.lock();\n if (\n Math.abs(translationX) + Math.abs(e.velocityX) >\n width / 2\n ) {\n handlerOffsetX.value = _withTimingCallback(\n handlerOffsetX.value - width - translationX\n );\n } else {\n handlerOffsetX.value = _withTimingCallback(\n handlerOffsetX.value - translationX\n );\n }\n return;\n }\n },\n },\n [loop, data, lockController]\n );\n\n React.useImperativeHandle(ref, () => {\n return {\n next,\n prev,\n getCurrentIndex,\n };\n });\n\n const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {\n switch (mode) {\n case 'parallax':\n return ({ index: i, children }) => (\n <ParallaxLayout\n parallaxScrollingOffset={parallaxScrollingOffset}\n parallaxScrollingScale={parallaxScrollingScale}\n computedAnimResult={computedAnimResult}\n width={width}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n >\n {children}\n </ParallaxLayout>\n );\n default:\n return ({ index: i, children }) => (\n <CarouselItem\n computedAnimResult={computedAnimResult}\n width={width}\n height={height}\n handlerOffsetX={offsetX}\n index={i}\n key={i}\n loop={loop}\n >\n {children}\n </CarouselItem>\n );\n }\n }, [\n loop,\n mode,\n computedAnimResult,\n height,\n offsetX,\n parallaxScrollingOffset,\n parallaxScrollingScale,\n width,\n ]);\n\n return (\n <PanGestureHandler onHandlerStateChange={animatedListScrollHandler}>\n <Animated.View\n style={[\n // eslint-disable-next-line react-native/no-inline-styles\n {\n width,\n height,\n flexDirection: 'row',\n position: 'relative',\n },\n style,\n ]}\n >\n {data.map((item, i) => {\n return (\n <Layouts index={i} key={i}>\n {renderItem(item, i)}\n </Layouts>\n );\n })}\n </Animated.View>\n </PanGestureHandler>\n );\n}\n\nexport default React.forwardRef(Carousel) as typeof Carousel;\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAutoPlay = useAutoPlay;
|
|
7
7
|
|
|
8
8
|
var React = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -11,12 +11,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function useAutoPlay(opts) {
|
|
15
15
|
const {
|
|
16
16
|
autoPlay = false,
|
|
17
17
|
autoPlayReverse = false,
|
|
18
18
|
autoPlayInterval = 1000,
|
|
19
|
-
carouselController
|
|
19
|
+
carouselController,
|
|
20
|
+
lockController
|
|
20
21
|
} = opts;
|
|
21
22
|
const timer = React.useRef();
|
|
22
23
|
React.useEffect(() => {
|
|
@@ -24,7 +25,7 @@ function useLoop(opts) {
|
|
|
24
25
|
clearInterval(timer.current);
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
if (autoPlay) {
|
|
28
|
+
if (autoPlay && !lockController.isLock()) {
|
|
28
29
|
timer.current = setInterval(() => {
|
|
29
30
|
autoPlayReverse ? carouselController.prev() : carouselController.next();
|
|
30
31
|
}, autoPlayInterval);
|
|
@@ -33,6 +34,6 @@ function useLoop(opts) {
|
|
|
33
34
|
return () => {
|
|
34
35
|
!!timer.current && clearInterval(timer.current);
|
|
35
36
|
};
|
|
36
|
-
}, [autoPlay, autoPlayReverse, autoPlayInterval, carouselController]);
|
|
37
|
+
}, [autoPlay, autoPlayReverse, autoPlayInterval, carouselController, lockController]);
|
|
37
38
|
}
|
|
38
|
-
//# sourceMappingURL=
|
|
39
|
+
//# sourceMappingURL=useAutoPlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useAutoPlay.ts"],"names":["useAutoPlay","opts","autoPlay","autoPlayReverse","autoPlayInterval","carouselController","lockController","timer","React","useRef","useEffect","current","clearInterval","isLock","setInterval","prev","next"],"mappings":";;;;;;;AAAA;;;;;;AAIO,SAASA,WAAT,CAAqBC,IAArB,EAMJ;AACC,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,eAAe,GAAG,KAFhB;AAGFC,IAAAA,gBAAgB,GAAG,IAHjB;AAIFC,IAAAA,kBAJE;AAKFC,IAAAA;AALE,MAMFL,IANJ;AAOA,QAAMM,KAAK,GAAGC,KAAK,CAACC,MAAN,EAAd;AACAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AAClB,QAAIH,KAAK,CAACI,OAAV,EAAmB;AACfC,MAAAA,aAAa,CAACL,KAAK,CAACI,OAAP,CAAb;AACH;;AACD,QAAIT,QAAQ,IAAI,CAACI,cAAc,CAACO,MAAf,EAAjB,EAA0C;AACtCN,MAAAA,KAAK,CAACI,OAAN,GAAgBG,WAAW,CAAC,MAAM;AAC9BX,QAAAA,eAAe,GACTE,kBAAkB,CAACU,IAAnB,EADS,GAETV,kBAAkB,CAACW,IAAnB,EAFN;AAGH,OAJ0B,EAIxBZ,gBAJwB,CAA3B;AAKH;;AACD,WAAO,MAAM;AACT,OAAC,CAACG,KAAK,CAACI,OAAR,IAAmBC,aAAa,CAACL,KAAK,CAACI,OAAP,CAAhC;AACH,KAFD;AAGH,GAdD,EAcG,CACCT,QADD,EAECC,eAFD,EAGCC,gBAHD,EAICC,kBAJD,EAKCC,cALD,CAdH;AAqBH","sourcesContent":["import * as React from 'react';\nimport type { ICarouselController } from './useCarouselController';\nimport type { ILockController } from './useLock';\n\nexport function useAutoPlay(opts: {\n autoPlay?: boolean;\n autoPlayInterval?: number;\n autoPlayReverse?: boolean;\n carouselController: ICarouselController;\n lockController: ILockController;\n}) {\n const {\n autoPlay = false,\n autoPlayReverse = false,\n autoPlayInterval = 1000,\n carouselController,\n lockController,\n } = opts;\n const timer = React.useRef<NodeJS.Timer>();\n React.useEffect(() => {\n if (timer.current) {\n clearInterval(timer.current);\n }\n if (autoPlay && !lockController.isLock()) {\n timer.current = setInterval(() => {\n autoPlayReverse\n ? carouselController.prev()\n : carouselController.next();\n }, autoPlayInterval);\n }\n return () => {\n !!timer.current && clearInterval(timer.current);\n };\n }, [\n autoPlay,\n autoPlayReverse,\n autoPlayInterval,\n carouselController,\n lockController,\n ]);\n}\n"]}
|
|
@@ -7,46 +7,44 @@ exports.useCarouselController = useCarouselController;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _Carousel = require("./Carousel");
|
|
11
|
-
|
|
12
10
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
13
|
|
|
16
14
|
function useCarouselController(opts) {
|
|
17
|
-
const lock = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
18
15
|
const {
|
|
19
16
|
width,
|
|
20
|
-
handlerOffsetX
|
|
17
|
+
handlerOffsetX,
|
|
18
|
+
timingConfig,
|
|
19
|
+
lockController,
|
|
20
|
+
disable = false
|
|
21
21
|
} = opts;
|
|
22
22
|
|
|
23
23
|
const closeLock = _react.default.useCallback(isFinished => {
|
|
24
24
|
if (isFinished) {
|
|
25
|
-
|
|
25
|
+
lockController.unLock();
|
|
26
26
|
}
|
|
27
|
-
}, [
|
|
28
|
-
|
|
29
|
-
const openLock = _react.default.useCallback(() => {
|
|
30
|
-
lock.value = true;
|
|
31
|
-
}, [lock]);
|
|
27
|
+
}, [lockController]);
|
|
32
28
|
|
|
33
29
|
const next = _react.default.useCallback(callback => {
|
|
34
|
-
if (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
if (disable) return;
|
|
31
|
+
if (lockController.isLock()) return;
|
|
32
|
+
lockController.lock();
|
|
33
|
+
handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)(handlerOffsetX.value - width, timingConfig, isFinished => {
|
|
34
|
+
!!callback && (0, _reactNativeReanimated.runOnJS)(callback)(isFinished);
|
|
35
|
+
(0, _reactNativeReanimated.runOnJS)(closeLock)(isFinished);
|
|
39
36
|
});
|
|
40
|
-
}, [width,
|
|
37
|
+
}, [width, lockController, timingConfig, closeLock, handlerOffsetX, disable]);
|
|
41
38
|
|
|
42
39
|
const prev = _react.default.useCallback(callback => {
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
if (disable) return;
|
|
41
|
+
if (lockController.isLock()) return;
|
|
42
|
+
lockController.lock();
|
|
43
|
+
handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)(handlerOffsetX.value + width, timingConfig, isFinished => {
|
|
44
|
+
!!callback && (0, _reactNativeReanimated.runOnJS)(callback)(isFinished);
|
|
45
|
+
(0, _reactNativeReanimated.runOnJS)(closeLock)(isFinished);
|
|
48
46
|
});
|
|
49
|
-
}, [width,
|
|
47
|
+
}, [width, lockController, timingConfig, closeLock, handlerOffsetX, disable]);
|
|
50
48
|
|
|
51
49
|
return {
|
|
52
50
|
next,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselController.tsx"],"names":["useCarouselController","opts","
|
|
1
|
+
{"version":3,"sources":["useCarouselController.tsx"],"names":["useCarouselController","opts","width","handlerOffsetX","timingConfig","lockController","disable","closeLock","React","useCallback","isFinished","unLock","next","callback","isLock","lock","value","prev"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAgBO,SAASA,qBAAT,CAA+BC,IAA/B,EAAiE;AACpE,QAAM;AACFC,IAAAA,KADE;AAEFC,IAAAA,cAFE;AAGFC,IAAAA,YAHE;AAIFC,IAAAA,cAJE;AAKFC,IAAAA,OAAO,GAAG;AALR,MAMFL,IANJ;;AAQA,QAAMM,SAAS,GAAGC,eAAMC,WAAN,CACbC,UAAD,IAAyB;AACrB,QAAIA,UAAJ,EAAgB;AACZL,MAAAA,cAAc,CAACM,MAAf;AACH;AACJ,GALa,EAMd,CAACN,cAAD,CANc,CAAlB;;AASA,QAAMO,IAAI,GAAGJ,eAAMC,WAAN,CACRI,QAAD,IAA8C;AAC1C,QAAIP,OAAJ,EAAa;AACb,QAAID,cAAc,CAACS,MAAf,EAAJ,EAA6B;AAC7BT,IAAAA,cAAc,CAACU,IAAf;AACAZ,IAAAA,cAAc,CAACa,KAAf,GAAuB,uCACnBb,cAAc,CAACa,KAAf,GAAuBd,KADJ,EAEnBE,YAFmB,EAGlBM,UAAD,IAAyB;AACrB,OAAC,CAACG,QAAF,IAAc,oCAAQA,QAAR,EAAkBH,UAAlB,CAAd;AACA,0CAAQH,SAAR,EAAmBG,UAAnB;AACH,KANkB,CAAvB;AAQH,GAbQ,EAcT,CACIR,KADJ,EAEIG,cAFJ,EAGID,YAHJ,EAIIG,SAJJ,EAKIJ,cALJ,EAMIG,OANJ,CAdS,CAAb;;AAwBA,QAAMW,IAAI,GAAGT,eAAMC,WAAN,CACRI,QAAD,IAA8C;AAC1C,QAAIP,OAAJ,EAAa;AACb,QAAID,cAAc,CAACS,MAAf,EAAJ,EAA6B;AAC7BT,IAAAA,cAAc,CAACU,IAAf;AACAZ,IAAAA,cAAc,CAACa,KAAf,GAAuB,uCACnBb,cAAc,CAACa,KAAf,GAAuBd,KADJ,EAEnBE,YAFmB,EAGlBM,UAAD,IAAyB;AACrB,OAAC,CAACG,QAAF,IAAc,oCAAQA,QAAR,EAAkBH,UAAlB,CAAd;AACA,0CAAQH,SAAR,EAAmBG,UAAnB;AACH,KANkB,CAAvB;AAQH,GAbQ,EAcT,CACIR,KADJ,EAEIG,cAFJ,EAGID,YAHJ,EAIIG,SAJJ,EAKIJ,cALJ,EAMIG,OANJ,CAdS,CAAb;;AAwBA,SAAO;AACHM,IAAAA,IADG;AAEHK,IAAAA;AAFG,GAAP;AAIH","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { runOnJS, withTiming } from 'react-native-reanimated';\nimport type { ILockController } from './useLock';\n\ninterface IOpts {\n width: number;\n handlerOffsetX: Animated.SharedValue<number>;\n lockController: ILockController;\n timingConfig: Animated.WithTimingConfig;\n disable?: boolean;\n}\n\nexport interface ICarouselController {\n prev: (callback?: (isFinished: boolean) => void) => void;\n next: (callback?: (isFinished: boolean) => void) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n const {\n width,\n handlerOffsetX,\n timingConfig,\n lockController,\n disable = false,\n } = opts;\n\n const closeLock = React.useCallback(\n (isFinished: boolean) => {\n if (isFinished) {\n lockController.unLock();\n }\n },\n [lockController]\n );\n\n const next = React.useCallback(\n (callback?: (isFinished: boolean) => void) => {\n if (disable) return;\n if (lockController.isLock()) return;\n lockController.lock();\n handlerOffsetX.value = withTiming(\n handlerOffsetX.value - width,\n timingConfig,\n (isFinished: boolean) => {\n !!callback && runOnJS(callback)(isFinished);\n runOnJS(closeLock)(isFinished);\n }\n );\n },\n [\n width,\n lockController,\n timingConfig,\n closeLock,\n handlerOffsetX,\n disable,\n ]\n );\n\n const prev = React.useCallback(\n (callback?: (isFinished: boolean) => void) => {\n if (disable) return;\n if (lockController.isLock()) return;\n lockController.lock();\n handlerOffsetX.value = withTiming(\n handlerOffsetX.value + width,\n timingConfig,\n (isFinished: boolean) => {\n !!callback && runOnJS(callback)(isFinished);\n runOnJS(closeLock)(isFinished);\n }\n );\n },\n [\n width,\n lockController,\n timingConfig,\n closeLock,\n handlerOffsetX,\n disable,\n ]\n );\n\n return {\n next,\n prev,\n };\n}\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useLockController = useLockController;
|
|
7
|
+
|
|
8
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Cannot operate while animation is locking
|
|
12
|
+
*/
|
|
13
|
+
function useLockController() {
|
|
14
|
+
// This value is true if the animation is executing
|
|
15
|
+
const _lock = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
16
|
+
|
|
17
|
+
function lock() {
|
|
18
|
+
'worklet';
|
|
19
|
+
|
|
20
|
+
_lock.value = true;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function unLock() {
|
|
24
|
+
'worklet';
|
|
25
|
+
|
|
26
|
+
_lock.value = false;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function isLock() {
|
|
30
|
+
'worklet';
|
|
31
|
+
|
|
32
|
+
return _lock.value;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return {
|
|
36
|
+
lock,
|
|
37
|
+
unLock,
|
|
38
|
+
isLock
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=useLock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useLock.ts"],"names":["useLockController","_lock","lock","value","unLock","isLock"],"mappings":";;;;;;;AAAA;;AAOA;AACA;AACA;AACO,SAASA,iBAAT,GAA8C;AACjD;AACA,QAAMC,KAAK,GAAG,2CAAwB,KAAxB,CAAd;;AACA,WAASC,IAAT,GAAgB;AACZ;;AACAD,IAAAA,KAAK,CAACE,KAAN,GAAc,IAAd;AACH;;AACD,WAASC,MAAT,GAAkB;AACd;;AACAH,IAAAA,KAAK,CAACE,KAAN,GAAc,KAAd;AACH;;AACD,WAASE,MAAT,GAAkB;AACd;;AACA,WAAOJ,KAAK,CAACE,KAAb;AACH;;AACD,SAAO;AACHD,IAAAA,IADG;AAEHE,IAAAA,MAFG;AAGHC,IAAAA;AAHG,GAAP;AAKH","sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\nexport interface ILockController {\n lock(): void;\n unLock(): void;\n isLock(): boolean;\n}\n\n/**\n * Cannot operate while animation is locking\n */\nexport function useLockController(): ILockController {\n // This value is true if the animation is executing\n const _lock = useSharedValue<boolean>(false);\n function lock() {\n 'worklet';\n _lock.value = true;\n }\n function unLock() {\n 'worklet';\n _lock.value = false;\n }\n function isLock() {\n 'worklet';\n return _lock.value;\n }\n return {\n lock,\n unLock,\n isLock,\n };\n}\n"]}
|