@fountain-ui/lab 2.0.0-beta.17 → 2.0.0-beta.18
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/build/commonjs/Carousel/Carousel.js +6 -13
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/components/ScrollViewGesture.js +4 -3
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/commonjs/Carousel/hooks/index.js +3 -3
- package/build/commonjs/Carousel/hooks/index.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useIndexController.js +14 -13
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/{usePagingAnimation.js → usePagingAnimator.js} +44 -22
- package/build/commonjs/Carousel/hooks/usePagingAnimator.js.map +1 -0
- package/build/commonjs/Carousel/types.js +1 -1
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/module/Carousel/Carousel.js +8 -12
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/components/ScrollViewGesture.js +4 -3
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/module/Carousel/hooks/index.js +1 -1
- package/build/module/Carousel/hooks/index.js.map +1 -1
- package/build/module/Carousel/hooks/useIndexController.js +14 -13
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/module/Carousel/hooks/{usePagingAnimation.js → usePagingAnimator.js} +43 -22
- package/build/module/Carousel/hooks/usePagingAnimator.js.map +1 -0
- package/build/module/Carousel/types.js +1 -1
- package/build/module/Carousel/types.js.map +1 -1
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +1 -1
- package/build/typescript/Carousel/hooks/index.d.ts +1 -1
- package/build/typescript/Carousel/hooks/{usePagingAnimation.d.ts → usePagingAnimator.d.ts} +6 -5
- package/build/typescript/Carousel/types.d.ts +8 -4
- package/package.json +2 -2
- package/src/Carousel/Carousel.tsx +7 -12
- package/src/Carousel/components/ScrollViewGesture.tsx +8 -4
- package/src/Carousel/hooks/index.ts +1 -1
- package/src/Carousel/hooks/useIndexController.tsx +12 -20
- package/src/Carousel/hooks/{usePagingAnimation.ts → usePagingAnimator.ts} +48 -29
- package/src/Carousel/types.ts +9 -4
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +0 -1
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +0 -1
|
@@ -7,8 +7,6 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
-
var _reactNative = require("react-native");
|
|
11
|
-
|
|
12
10
|
var _ViewabilityTrackerView = _interopRequireDefault(require("../ViewabilityTrackerView"));
|
|
13
11
|
|
|
14
12
|
var _hooks = require("./hooks");
|
|
@@ -42,12 +40,6 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
42
40
|
windowSize = 5
|
|
43
41
|
} = props;
|
|
44
42
|
const data = (0, _hooks.useLoopedData)(originalData, loop);
|
|
45
|
-
const initialTx = itemWidth * initialIndex;
|
|
46
|
-
const offsetX = (0, _react.useRef)(new _reactNative.Animated.Value(initialTx)).current;
|
|
47
|
-
const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
48
|
-
|
|
49
|
-
const globalInterpolation = _reactNative.Animated.add(offsetX, translateX);
|
|
50
|
-
|
|
51
43
|
const [itemVisibilityStore, onPositionChange] = (0, _hooks.useItemVisibilityStore)({
|
|
52
44
|
initialIndex,
|
|
53
45
|
numberOfData: data.length,
|
|
@@ -65,16 +57,17 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
65
57
|
getCurrentIndex
|
|
66
58
|
} = indexController;
|
|
67
59
|
const {
|
|
60
|
+
gestureTranslationX,
|
|
61
|
+
globalInterpolation,
|
|
68
62
|
interruptAnimation,
|
|
69
63
|
startPagingAnimation
|
|
70
|
-
} = (0, _hooks.
|
|
64
|
+
} = (0, _hooks.usePagingAnimator)({
|
|
71
65
|
createScrollAnimation,
|
|
72
66
|
itemWidth,
|
|
73
67
|
indexController,
|
|
68
|
+
initialIndex,
|
|
74
69
|
loop,
|
|
75
|
-
numberOfData: data.length
|
|
76
|
-
offsetX,
|
|
77
|
-
translateX
|
|
70
|
+
numberOfData: data.length
|
|
78
71
|
});
|
|
79
72
|
const autoplayController = (0, _hooks.useAutoplayController)({
|
|
80
73
|
enabled: autoplay,
|
|
@@ -118,8 +111,8 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
118
111
|
}
|
|
119
112
|
}, /*#__PURE__*/_react.default.createElement(_components.ScrollViewGesture, {
|
|
120
113
|
autoplayController: autoplayController,
|
|
114
|
+
gestureTranslationX: gestureTranslationX,
|
|
121
115
|
interruptAnimation: interruptAnimation,
|
|
122
|
-
translateX: translateX,
|
|
123
116
|
scrollEnabled: scrollEnabled,
|
|
124
117
|
startPagingAnimation: startPagingAnimation
|
|
125
118
|
}, /*#__PURE__*/_react.default.createElement(_components.RootView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","
|
|
1
|
+
{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","itemVisibilityStore","onPositionChange","useItemVisibilityStore","numberOfData","length","indexController","useIndexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","usePagingAnimator","autoplayController","useAutoplayController","enabled","intervalMillis","useImperativeHandle","next","direction","prev","scrollTo","option","contextValue","useMemo","Math","max","visible","resume","pause","memo"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n useAutoplayController,\n useIndexController,\n useItemVisibilityStore,\n useLoopedData,\n usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n const {\n autoplay = false,\n autoplayInterval = 3000,\n createItemStyle = createDefaultItemStyle,\n createScrollAnimation = createDefaultScrollAnimation,\n data: originalData,\n disableSmartAutoplay = false,\n initialIndex = 0,\n itemHeight,\n itemWidth,\n loop = false,\n onIndexChange,\n renderItem,\n scrollEnabled = true,\n style,\n windowSize = 5,\n } = props;\n\n const data = useLoopedData(originalData, loop);\n\n const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n initialIndex,\n numberOfData: data.length,\n windowSize,\n });\n\n const indexController = useIndexController({\n initialIndex,\n itemWidth,\n numberOfData: data.length,\n numberOfOriginalData: originalData.length,\n onIndexChange,\n onPositionChange,\n });\n\n const { getCurrentIndex } = indexController;\n\n const {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n } = usePagingAnimator({\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData: data.length,\n });\n\n const autoplayController = useAutoplayController({\n enabled: autoplay,\n intervalMillis: autoplayInterval,\n startPagingAnimation,\n });\n\n useImperativeHandle(\n ref,\n () => ({\n getCurrentIndex,\n next: () => startPagingAnimation('directional', { direction: 'next' }),\n prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n scrollTo: (option) => startPagingAnimation('index', option),\n }),\n [startPagingAnimation, getCurrentIndex],\n );\n\n const contextValue = useMemo(() => ({\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n }), [\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n ]);\n\n return (\n <InternalContext.Provider value={contextValue}>\n <ViewabilityTrackerView\n enabled={autoplay && !disableSmartAutoplay}\n measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n onViewabilityChange={({ visible }) => {\n if (visible) {\n autoplayController.resume();\n } else {\n autoplayController.pause();\n }\n }}\n >\n <ScrollViewGesture\n autoplayController={autoplayController}\n gestureTranslationX={gestureTranslationX}\n interruptAnimation={interruptAnimation}\n scrollEnabled={scrollEnabled}\n startPagingAnimation={startPagingAnimation}\n >\n <RootView\n data={data}\n itemHeight={itemHeight}\n originalData={originalData}\n renderItem={renderItem}\n style={style}\n />\n </ScrollViewGesture>\n </ViewabilityTrackerView>\n </InternalContext.Provider>\n );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ function ScrollViewGesture(props) {
|
|
|
32
32
|
autoplayController,
|
|
33
33
|
children,
|
|
34
34
|
interruptAnimation,
|
|
35
|
-
|
|
35
|
+
gestureTranslationX,
|
|
36
36
|
scrollEnabled,
|
|
37
37
|
startPagingAnimation
|
|
38
38
|
} = props;
|
|
@@ -46,7 +46,7 @@ function ScrollViewGesture(props) {
|
|
|
46
46
|
}, [interruptAnimation, pauseAutoplay]);
|
|
47
47
|
const handleGestureEvent = (0, _react.useCallback)(_reactNative.Animated.event([{
|
|
48
48
|
nativeEvent: {
|
|
49
|
-
translationX:
|
|
49
|
+
translationX: gestureTranslationX
|
|
50
50
|
}
|
|
51
51
|
}], {
|
|
52
52
|
useNativeDriver: true
|
|
@@ -64,7 +64,8 @@ function ScrollViewGesture(props) {
|
|
|
64
64
|
const direction = shouldScrollToAdjacent(translationX, velocityX) ? translationX < 0 ? 'next' : 'prev' : 'stay';
|
|
65
65
|
startPagingAnimation('directional', {
|
|
66
66
|
direction: direction,
|
|
67
|
-
isOriginatedFromGesture: true
|
|
67
|
+
isOriginatedFromGesture: true,
|
|
68
|
+
lastGestureTranslationX: translationX
|
|
68
69
|
});
|
|
69
70
|
resumeAutoplay();
|
|
70
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","GestureHandlerState","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","
|
|
1
|
+
{"version":3,"names":["SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","GestureHandlerState","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","gestureTranslationX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","useCallback","handleGestureEvent","Animated","event","nativeEvent","useNativeDriver","handleHandlerStateChange","state","includes","direction","isOriginatedFromGesture","lastGestureTranslationX"],"sources":["ScrollViewGesture.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback } from 'react';\nimport { Animated } from 'react-native';\nimport type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';\nimport type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface ScrollViewGestureProps {\n autoplayController: AutoplayController;\n children: ReactNode;\n gestureTranslationX: Animated.Value,\n interruptAnimation: () => void;\n scrollEnabled: boolean;\n startPagingAnimation: StartPagingAnimation;\n}\n\nconst SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;\nconst SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;\n\nconst ACTIVE_OFFSET_ABS_X = 5;\nconst activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];\n\nconst endAnimationStates: Readonly<GestureHandlerState[]> = [\n GestureHandlerState.CANCELLED,\n GestureHandlerState.END,\n GestureHandlerState.FAILED,\n];\n\nfunction shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {\n const isSameDirection = translationX * velocityX > 0;\n const isEnoughMovement =\n Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD\n || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;\n\n return isSameDirection && isEnoughMovement;\n}\n\nexport default function ScrollViewGesture(props: ScrollViewGestureProps) {\n const {\n autoplayController,\n children,\n interruptAnimation,\n gestureTranslationX,\n scrollEnabled,\n startPagingAnimation,\n } = props;\n\n const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;\n\n const handleGestureBegin = useCallback(() => {\n pauseAutoplay();\n\n interruptAnimation();\n }, [interruptAnimation, pauseAutoplay]);\n\n const handleGestureEvent = useCallback(Animated.event(\n [{ nativeEvent: { translationX: gestureTranslationX } }],\n { useNativeDriver: true },\n ), []);\n\n const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {\n const { nativeEvent: { translationX, velocityX, state } } = event;\n\n if (endAnimationStates.includes(state)) {\n const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)\n ? (translationX < 0 ? 'next' : 'prev')\n : 'stay';\n\n startPagingAnimation(\n 'directional',\n {\n direction: direction,\n isOriginatedFromGesture: true,\n lastGestureTranslationX: translationX,\n },\n );\n\n resumeAutoplay();\n }\n }, [startPagingAnimation, resumeAutoplay]);\n\n return (\n <PanGestureHandler\n activeOffsetX={activeOffsetX}\n children={children}\n enabled={scrollEnabled}\n onBegan={handleGestureBegin}\n onGestureEvent={handleGestureEvent}\n onHandlerStateChange={handleHandlerStateChange}\n />\n );\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAYA,MAAMA,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,aAAuB,GAAG,CAAC,CAACD,mBAAF,EAAuBA,mBAAvB,CAAhC;AAEA,MAAME,kBAAmD,GAAG,CACxDC,gCAAA,CAAoBC,SADoC,EAExDD,gCAAA,CAAoBE,GAFoC,EAGxDF,gCAAA,CAAoBG,MAHoC,CAA5D;;AAMA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BV,+BAA1B,IACGc,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBV,+BAF9B;EAIA,OAAOW,eAAe,IAAIC,gBAA1B;AACH;;AAEc,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,kBAHE;IAIFC,mBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;EAEA,MAAMU,kBAAkB,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACzCJ,aAAa;IAEbL,kBAAkB;EACrB,CAJ0B,EAIxB,CAACA,kBAAD,EAAqBK,aAArB,CAJwB,CAA3B;EAMA,MAAMK,kBAAkB,GAAG,IAAAD,kBAAA,EAAYE,qBAAA,CAASC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAEvB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEa,eAAe,EAAE;EAAnB,CAFmC,CAAZ,EAGxB,EAHwB,CAA3B;EAKA,MAAMC,wBAAwB,GAAG,IAAAN,kBAAA,EAAaG,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAEvB,YAAF;QAAgBC,SAAhB;QAA2ByB;MAA3B;IAAf,IAAsDJ,KAA5D;;IAEA,IAAI5B,kBAAkB,CAACiC,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAG7B,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QACIe,SAAS,EAAEA,SADf;QAEIC,uBAAuB,EAAE,IAF7B;QAGIC,uBAAuB,EAAE9B;MAH7B,CAFgB,CAApB;MASAiB,cAAc;IACjB;EACJ,CAnBgC,EAmB9B,CAACJ,oBAAD,EAAuBI,cAAvB,CAnB8B,CAAjC;EAqBA,oBACI,6BAAC,4CAAD;IACI,aAAa,EAAExB,aADnB;IAEI,QAAQ,EAAEgB,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEE,kBALpB;IAMI,oBAAoB,EAAEK;EAN1B,EADJ;AAUH"}
|
|
@@ -27,10 +27,10 @@ Object.defineProperty(exports, "useLoopedData", {
|
|
|
27
27
|
return _useLoopedData.default;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
Object.defineProperty(exports, "
|
|
30
|
+
Object.defineProperty(exports, "usePagingAnimator", {
|
|
31
31
|
enumerable: true,
|
|
32
32
|
get: function () {
|
|
33
|
-
return
|
|
33
|
+
return _usePagingAnimator.default;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
|
|
@@ -40,7 +40,7 @@ var _useIndexController = _interopRequireDefault(require("./useIndexController")
|
|
|
40
40
|
|
|
41
41
|
var _useLoopedData = _interopRequireDefault(require("./useLoopedData"));
|
|
42
42
|
|
|
43
|
-
var
|
|
43
|
+
var _usePagingAnimator = _interopRequireDefault(require("./usePagingAnimator"));
|
|
44
44
|
|
|
45
45
|
var _useItemVisibilityStore = _interopRequireDefault(require("./useItemVisibilityStore"));
|
|
46
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useAutoplayController } from './useAutoplayController';\nexport { default as useIndexController } from './useIndexController';\nexport { default as useLoopedData } from './useLoopedData';\nexport { default as
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useAutoplayController } from './useAutoplayController';\nexport { default as useIndexController } from './useIndexController';\nexport { default as useLoopedData } from './useLoopedData';\nexport { default as usePagingAnimator } from './usePagingAnimator';\nexport { default as useItemVisibilityStore } from './useItemVisibilityStore';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA"}
|
|
@@ -22,8 +22,16 @@ function useIndexController(params) {
|
|
|
22
22
|
} = params;
|
|
23
23
|
const currentIndex = (0, _core.useImperativeState)(initialIndex);
|
|
24
24
|
const currentPosition = (0, _core.useImperativeState)(initialIndex);
|
|
25
|
-
const
|
|
26
|
-
|
|
25
|
+
const notifyScrollStateHasChanged = (0, _react.useCallback)(_ref => {
|
|
26
|
+
let {
|
|
27
|
+
offset,
|
|
28
|
+
state
|
|
29
|
+
} = _ref;
|
|
30
|
+
const normalized = -Math.round(offset / itemWidth);
|
|
31
|
+
const index = Math.floor((0, _utils.mod)(normalized, numberOfOriginalData));
|
|
32
|
+
const position = Math.floor((0, _utils.mod)(normalized, numberOfData));
|
|
33
|
+
|
|
34
|
+
if (state === 'idle' || state === 'interrupted') {
|
|
27
35
|
if (currentIndex.hasChanged()) {
|
|
28
36
|
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(currentIndex.get());
|
|
29
37
|
}
|
|
@@ -32,21 +40,14 @@ function useIndexController(params) {
|
|
|
32
40
|
onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(currentPosition.get());
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
|
-
}, [onIndexChange, onPositionChange]);
|
|
36
|
-
const notifyOffsetHasChanged = (0, _react.useCallback)(offset => {
|
|
37
|
-
const roundedOffset = Math.round(offset / itemWidth) * itemWidth; // To prevent floating point problem, make sure index is integer type.
|
|
38
43
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const nextPosition = Math.floor((0, _utils.mod)(-roundedOffset / itemWidth, numberOfData));
|
|
43
|
-
currentPosition.set(nextPosition);
|
|
44
|
-
}, [itemWidth, numberOfData, numberOfOriginalData]);
|
|
44
|
+
currentIndex.set(index);
|
|
45
|
+
currentPosition.set(position);
|
|
46
|
+
}, [itemWidth, numberOfData, numberOfOriginalData, onIndexChange, onPositionChange]);
|
|
45
47
|
return {
|
|
46
48
|
getCurrentIndex: currentIndex.get,
|
|
47
49
|
lastIndex: numberOfOriginalData - 1,
|
|
48
|
-
|
|
49
|
-
notifyOffsetHasChanged
|
|
50
|
+
notifyScrollStateHasChanged
|
|
50
51
|
};
|
|
51
52
|
}
|
|
52
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIndexController","params","initialIndex","itemWidth","numberOfData","numberOfOriginalData","onIndexChange","onPositionChange","currentIndex","useImperativeState","currentPosition","
|
|
1
|
+
{"version":3,"names":["useIndexController","params","initialIndex","itemWidth","numberOfData","numberOfOriginalData","onIndexChange","onPositionChange","currentIndex","useImperativeState","currentPosition","notifyScrollStateHasChanged","useCallback","offset","state","normalized","Math","round","index","floor","mod","position","hasChanged","get","set","getCurrentIndex","lastIndex"],"sources":["useIndexController.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { useImperativeState } from '@fountain-ui/core';\nimport { mod } from '@fountain-ui/utils';\nimport type { IndexController, ScrollStateChangeEvent } from '../types';\n\nexport interface UseIndexControllerParameters {\n initialIndex: number;\n itemWidth: number;\n numberOfData: number;\n numberOfOriginalData: number;\n onIndexChange?: (itemIndex: number) => void;\n onPositionChange?: (position: number) => void;\n}\n\nexport default function useIndexController(params: UseIndexControllerParameters): IndexController {\n const {\n initialIndex,\n itemWidth,\n numberOfData,\n numberOfOriginalData,\n onIndexChange,\n onPositionChange,\n } = params;\n\n const currentIndex = useImperativeState(initialIndex);\n const currentPosition = useImperativeState(initialIndex);\n\n const notifyScrollStateHasChanged = useCallback(({ offset, state }: ScrollStateChangeEvent) => {\n const normalized = -Math.round(offset / itemWidth);\n const index = Math.floor(mod(normalized, numberOfOriginalData));\n const position = Math.floor(mod(normalized, numberOfData));\n\n if (state === 'idle' || state === 'interrupted') {\n if (currentIndex.hasChanged()) {\n onIndexChange?.(currentIndex.get());\n }\n if (currentPosition.hasChanged()) {\n onPositionChange?.(currentPosition.get());\n }\n }\n\n currentIndex.set(index);\n currentPosition.set(position);\n }, [\n itemWidth,\n numberOfData,\n numberOfOriginalData,\n onIndexChange,\n onPositionChange,\n ]);\n\n return {\n getCurrentIndex: currentIndex.get,\n lastIndex: numberOfOriginalData - 1,\n notifyScrollStateHasChanged,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAYe,SAASA,kBAAT,CAA4BC,MAA5B,EAAmF;EAC9F,MAAM;IACFC,YADE;IAEFC,SAFE;IAGFC,YAHE;IAIFC,oBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,MAPJ;EASA,MAAMO,YAAY,GAAG,IAAAC,wBAAA,EAAmBP,YAAnB,CAArB;EACA,MAAMQ,eAAe,GAAG,IAAAD,wBAAA,EAAmBP,YAAnB,CAAxB;EAEA,MAAMS,2BAA2B,GAAG,IAAAC,kBAAA,EAAY,QAA+C;IAAA,IAA9C;MAAEC,MAAF;MAAUC;IAAV,CAA8C;IAC3F,MAAMC,UAAU,GAAG,CAACC,IAAI,CAACC,KAAL,CAAWJ,MAAM,GAAGV,SAApB,CAApB;IACA,MAAMe,KAAK,GAAGF,IAAI,CAACG,KAAL,CAAW,IAAAC,UAAA,EAAIL,UAAJ,EAAgBV,oBAAhB,CAAX,CAAd;IACA,MAAMgB,QAAQ,GAAGL,IAAI,CAACG,KAAL,CAAW,IAAAC,UAAA,EAAIL,UAAJ,EAAgBX,YAAhB,CAAX,CAAjB;;IAEA,IAAIU,KAAK,KAAK,MAAV,IAAoBA,KAAK,KAAK,aAAlC,EAAiD;MAC7C,IAAIN,YAAY,CAACc,UAAb,EAAJ,EAA+B;QAC3BhB,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGE,YAAY,CAACe,GAAb,EAAH,CAAb;MACH;;MACD,IAAIb,eAAe,CAACY,UAAhB,EAAJ,EAAkC;QAC9Bf,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAGG,eAAe,CAACa,GAAhB,EAAH,CAAhB;MACH;IACJ;;IAEDf,YAAY,CAACgB,GAAb,CAAiBN,KAAjB;IACAR,eAAe,CAACc,GAAhB,CAAoBH,QAApB;EACH,CAhBmC,EAgBjC,CACClB,SADD,EAECC,YAFD,EAGCC,oBAHD,EAICC,aAJD,EAKCC,gBALD,CAhBiC,CAApC;EAwBA,OAAO;IACHkB,eAAe,EAAEjB,YAAY,CAACe,GAD3B;IAEHG,SAAS,EAAErB,oBAAoB,GAAG,CAF/B;IAGHM;EAHG,CAAP;AAKH;;AAAA"}
|
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default =
|
|
6
|
+
exports.default = usePagingAnimator;
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
10
12
|
function directionToValue(itemWidth) {
|
|
11
13
|
return function (direction) {
|
|
12
14
|
switch (direction) {
|
|
@@ -32,22 +34,27 @@ function toValueCompensator(itemWidth) {
|
|
|
32
34
|
};
|
|
33
35
|
}
|
|
34
36
|
|
|
35
|
-
function
|
|
37
|
+
function usePagingAnimator(config) {
|
|
36
38
|
const {
|
|
37
39
|
createScrollAnimation,
|
|
38
40
|
itemWidth,
|
|
39
41
|
indexController,
|
|
42
|
+
initialIndex,
|
|
40
43
|
loop,
|
|
41
|
-
numberOfData
|
|
42
|
-
|
|
43
|
-
translateX
|
|
44
|
-
} = params;
|
|
44
|
+
numberOfData
|
|
45
|
+
} = config;
|
|
45
46
|
const {
|
|
46
47
|
getCurrentIndex,
|
|
47
48
|
lastIndex,
|
|
48
|
-
|
|
49
|
-
notifyOffsetHasChanged
|
|
49
|
+
notifyScrollStateHasChanged
|
|
50
50
|
} = indexController;
|
|
51
|
+
const initialOffsetX = itemWidth * initialIndex;
|
|
52
|
+
const accumulativeOffsetX = (0, _react.useRef)(new _reactNative.Animated.Value(initialOffsetX)).current;
|
|
53
|
+
const animationOffsetX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
54
|
+
const gestureTranslationX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
55
|
+
const globalInterpolation = (0, _react.useMemo)(() => {
|
|
56
|
+
return _reactNative.Animated.add(_reactNative.Animated.add(accumulativeOffsetX, animationOffsetX), gestureTranslationX);
|
|
57
|
+
}, []);
|
|
51
58
|
const toValueRef = (0, _react.useRef)(0);
|
|
52
59
|
const currentOffsetRef = (0, _react.useRef)(0);
|
|
53
60
|
const isAnimatingRef = (0, _react.useRef)(false);
|
|
@@ -67,32 +74,37 @@ function usePagingAnimation(params) {
|
|
|
67
74
|
const requireNewOffset = (0, _react.useCallback)(newOffset => {
|
|
68
75
|
const nextOffset = ensureOffsetBoundary(newOffset);
|
|
69
76
|
currentOffsetRef.current = nextOffset;
|
|
70
|
-
|
|
77
|
+
accumulativeOffsetX.setValue(nextOffset);
|
|
71
78
|
toValueRef.current = 0;
|
|
72
|
-
|
|
73
|
-
}, [ensureOffsetBoundary
|
|
79
|
+
animationOffsetX.setValue(0);
|
|
80
|
+
}, [ensureOffsetBoundary]);
|
|
74
81
|
const interruptAnimation = (0, _react.useCallback)(() => {
|
|
75
82
|
if (!isAnimatingRef.current) {
|
|
76
83
|
return;
|
|
77
84
|
}
|
|
78
85
|
|
|
79
|
-
|
|
86
|
+
animationOffsetX.stopAnimation(lastValue => {
|
|
80
87
|
isAnimatingRef.current = false;
|
|
81
88
|
const prevOffset = currentOffsetRef.current;
|
|
82
89
|
const totalOffset = prevOffset + lastValue;
|
|
83
|
-
notifyOffsetHasChanged(totalOffset);
|
|
84
|
-
notifyAnimationState('interrupted');
|
|
85
90
|
requireNewOffset(totalOffset);
|
|
91
|
+
notifyScrollStateHasChanged({
|
|
92
|
+
offset: totalOffset,
|
|
93
|
+
state: 'interrupted'
|
|
94
|
+
});
|
|
86
95
|
});
|
|
87
|
-
}, [
|
|
96
|
+
}, [notifyScrollStateHasChanged, requireNewOffset]);
|
|
88
97
|
const finalizeAnimation = (0, _react.useCallback)(() => {
|
|
89
|
-
notifyAnimationState('finished');
|
|
90
98
|
isAnimatingRef.current = false;
|
|
91
99
|
const prevOffset = currentOffsetRef.current;
|
|
92
100
|
const toValue = toValueRef.current;
|
|
93
101
|
const totalOffset = prevOffset + toValue;
|
|
94
102
|
requireNewOffset(totalOffset);
|
|
95
|
-
|
|
103
|
+
notifyScrollStateHasChanged({
|
|
104
|
+
offset: totalOffset,
|
|
105
|
+
state: 'idle'
|
|
106
|
+
});
|
|
107
|
+
}, [notifyScrollStateHasChanged, requireNewOffset]);
|
|
96
108
|
const startPagingAnimation = (0, _react.useCallback)((type, config) => {
|
|
97
109
|
if (isAnimatingRef.current) {
|
|
98
110
|
return;
|
|
@@ -150,10 +162,19 @@ function usePagingAnimation(params) {
|
|
|
150
162
|
const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);
|
|
151
163
|
toValueRef.current = toValue;
|
|
152
164
|
isAnimatingRef.current = true;
|
|
153
|
-
|
|
165
|
+
notifyScrollStateHasChanged({
|
|
166
|
+
offset: currentOffsetRef.current + toValue,
|
|
167
|
+
state: 'dragging'
|
|
168
|
+
});
|
|
169
|
+
const lastGestureTranslationX = configWithDefaults.lastGestureTranslationX ?? 0;
|
|
170
|
+
|
|
171
|
+
if (Number.isFinite(lastGestureTranslationX)) {
|
|
172
|
+
animationOffsetX.setValue(lastGestureTranslationX);
|
|
173
|
+
gestureTranslationX.setValue(0);
|
|
174
|
+
}
|
|
154
175
|
|
|
155
176
|
if (configWithDefaults.animated) {
|
|
156
|
-
const animation = createScrollAnimation(
|
|
177
|
+
const animation = createScrollAnimation(animationOffsetX, toValue);
|
|
157
178
|
animation.start(_ref2 => {
|
|
158
179
|
let {
|
|
159
180
|
finished
|
|
@@ -163,16 +184,17 @@ function usePagingAnimation(params) {
|
|
|
163
184
|
finalizeAnimation();
|
|
164
185
|
}
|
|
165
186
|
});
|
|
166
|
-
notifyAnimationState('started');
|
|
167
187
|
} else {
|
|
168
188
|
finalizeAnimation();
|
|
169
189
|
}
|
|
170
|
-
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop,
|
|
190
|
+
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop, notifyScrollStateHasChanged]);
|
|
171
191
|
return {
|
|
192
|
+
gestureTranslationX,
|
|
193
|
+
globalInterpolation,
|
|
172
194
|
interruptAnimation,
|
|
173
195
|
startPagingAnimation
|
|
174
196
|
};
|
|
175
197
|
}
|
|
176
198
|
|
|
177
199
|
;
|
|
178
|
-
//# sourceMappingURL=
|
|
200
|
+
//# sourceMappingURL=usePagingAnimator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","useRef","Animated","Value","current","animationOffsetX","gestureTranslationX","globalInterpolation","useMemo","add","toValueRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","useCallback","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n IndexController,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n createScrollAnimation: CreateScrollAnimation;\n itemWidth: number;\n indexController: IndexController;\n initialIndex: number;\n loop: boolean;\n numberOfData: number;\n}\n\nexport interface PagingAnimator {\n gestureTranslationX: Animated.Value;\n globalInterpolation: Animated.AnimatedInterpolation;\n interruptAnimation: () => void;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n return function (toValue: number, currentOffset: number): number {\n const remainder = Math.abs(currentOffset % itemWidth);\n\n const halfOfItemWidth = Math.abs(itemWidth / 2);\n const compensateVector = remainder > halfOfItemWidth\n ? remainder - itemWidth\n : remainder;\n\n const direction = currentOffset > 0 ? -1 : 1;\n\n return toValue + (direction * compensateVector);\n };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n const {\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData,\n } = config;\n\n const {\n getCurrentIndex,\n lastIndex,\n notifyScrollStateHasChanged,\n } = indexController;\n\n const initialOffsetX = itemWidth * initialIndex;\n const accumulativeOffsetX = useRef(new Animated.Value(initialOffsetX)).current;\n const animationOffsetX = useRef(new Animated.Value(0)).current;\n const gestureTranslationX = useRef(new Animated.Value(0)).current;\n\n const globalInterpolation = useMemo(() => {\n return Animated.add(\n Animated.add(accumulativeOffsetX, animationOffsetX),\n gestureTranslationX,\n );\n }, []);\n\n const toValueRef = useRef<number>(0);\n const currentOffsetRef = useRef<number>(0);\n\n const isAnimatingRef = useRef<boolean>(false);\n\n const maxWidth = Math.abs(numberOfData * itemWidth);\n\n const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n if (loop) {\n const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n if (isCloseToEnd) {\n const signOfOffset = offset > 0 ? 1 : -1;\n return offset + (-signOfOffset * maxWidth);\n }\n }\n\n return offset % maxWidth;\n }, [itemWidth, loop, maxWidth]);\n\n const requireNewOffset = useCallback((newOffset: number) => {\n const nextOffset = ensureOffsetBoundary(newOffset);\n\n currentOffsetRef.current = nextOffset;\n accumulativeOffsetX.setValue(nextOffset);\n\n toValueRef.current = 0;\n animationOffsetX.setValue(0);\n }, [\n ensureOffsetBoundary,\n ]);\n\n const interruptAnimation = useCallback(() => {\n if (!isAnimatingRef.current) {\n return;\n }\n\n animationOffsetX.stopAnimation(lastValue => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const totalOffset = prevOffset + lastValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const finalizeAnimation = useCallback(() => {\n isAnimatingRef.current = false;\n\n const prevOffset = currentOffsetRef.current;\n const toValue = toValueRef.current;\n const totalOffset = prevOffset + toValue;\n\n requireNewOffset(totalOffset);\n\n notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n }, [\n notifyScrollStateHasChanged,\n requireNewOffset,\n ]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n if (isAnimatingRef.current) {\n return;\n }\n\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n const compensateToValue = toValueCompensator(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const wantedToValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n toValueRef.current = toValue;\n isAnimatingRef.current = true;\n\n notifyScrollStateHasChanged({\n offset: currentOffsetRef.current + toValue,\n state: 'dragging',\n });\n\n const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n if (Number.isFinite(lastGestureTranslationX)) {\n animationOffsetX.setValue(lastGestureTranslationX);\n gestureTranslationX.setValue(0);\n }\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(animationOffsetX, toValue);\n\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n notifyScrollStateHasChanged,\n ]);\n\n return {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
const directions = ['next', 'prev', 'stay'];
|
|
7
|
-
const
|
|
7
|
+
const scrollStates = ['idle', 'dragging', 'interrupted'];
|
|
8
8
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["directions","
|
|
1
|
+
{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface OnIndexChange {\n (itemIndex: number): void;\n}\n\nexport interface OnPositionChange {\n (position: number): void;\n}\n\nexport interface ScrollStateChangeEvent {\n offset: number;\n state: ScrollState;\n}\n\nexport interface IndexController {\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n animated?: boolean;\n lastGestureTranslationX?: number;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n direction: PagingDirection;\n isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n (): void;\n}\n\nexport interface ItemVisibilityStore {\n dispatch: (ranges: VisibleIndexRanges) => void;\n subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n pause: () => void;\n resume: () => void;\n}\n\nexport interface ScrollToOption {\n index: number;\n animated?: boolean;\n}\n\nexport interface CarouselInstance {\n /**\n * Get current visible item index.\n */\n getCurrentIndex: GetCurrentIndex;\n\n /**\n * Scroll to next visible item.\n */\n next: () => void;\n\n /**\n * Scroll to previous visible item.\n */\n prev: () => void;\n\n /**\n * Scroll to desired indexed item.\n * Invalid index is ignored.\n */\n scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":";;;;;AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB;AAIA,MAAMC,YAAY,GAAG,CAAC,MAAD,EAAS,UAAT,EAAqB,aAArB,CAArB"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React, { forwardRef, memo, useImperativeHandle, useMemo
|
|
2
|
-
import { Animated } from 'react-native';
|
|
1
|
+
import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
|
|
3
2
|
import ViewabilityTrackerView from '../ViewabilityTrackerView';
|
|
4
|
-
import { useAutoplayController, useIndexController, useItemVisibilityStore, useLoopedData,
|
|
3
|
+
import { useAutoplayController, useIndexController, useItemVisibilityStore, useLoopedData, usePagingAnimator } from './hooks';
|
|
5
4
|
import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
|
|
6
5
|
import { InternalContext, RootView, ScrollViewGesture } from './components';
|
|
7
6
|
const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
@@ -23,10 +22,6 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
23
22
|
windowSize = 5
|
|
24
23
|
} = props;
|
|
25
24
|
const data = useLoopedData(originalData, loop);
|
|
26
|
-
const initialTx = itemWidth * initialIndex;
|
|
27
|
-
const offsetX = useRef(new Animated.Value(initialTx)).current;
|
|
28
|
-
const translateX = useRef(new Animated.Value(0)).current;
|
|
29
|
-
const globalInterpolation = Animated.add(offsetX, translateX);
|
|
30
25
|
const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({
|
|
31
26
|
initialIndex,
|
|
32
27
|
numberOfData: data.length,
|
|
@@ -44,16 +39,17 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
44
39
|
getCurrentIndex
|
|
45
40
|
} = indexController;
|
|
46
41
|
const {
|
|
42
|
+
gestureTranslationX,
|
|
43
|
+
globalInterpolation,
|
|
47
44
|
interruptAnimation,
|
|
48
45
|
startPagingAnimation
|
|
49
|
-
} =
|
|
46
|
+
} = usePagingAnimator({
|
|
50
47
|
createScrollAnimation,
|
|
51
48
|
itemWidth,
|
|
52
49
|
indexController,
|
|
50
|
+
initialIndex,
|
|
53
51
|
loop,
|
|
54
|
-
numberOfData: data.length
|
|
55
|
-
offsetX,
|
|
56
|
-
translateX
|
|
52
|
+
numberOfData: data.length
|
|
57
53
|
});
|
|
58
54
|
const autoplayController = useAutoplayController({
|
|
59
55
|
enabled: autoplay,
|
|
@@ -97,8 +93,8 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
97
93
|
}
|
|
98
94
|
}, /*#__PURE__*/React.createElement(ScrollViewGesture, {
|
|
99
95
|
autoplayController: autoplayController,
|
|
96
|
+
gestureTranslationX: gestureTranslationX,
|
|
100
97
|
interruptAnimation: interruptAnimation,
|
|
101
|
-
translateX: translateX,
|
|
102
98
|
scrollEnabled: scrollEnabled,
|
|
103
99
|
startPagingAnimation: startPagingAnimation
|
|
104
100
|
}, /*#__PURE__*/React.createElement(RootView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","ViewabilityTrackerView","useAutoplayController","useIndexController","useItemVisibilityStore","useLoopedData","usePagingAnimator","createDefaultItemStyle","createDefaultScrollAnimation","InternalContext","RootView","ScrollViewGesture","Carousel","props","ref","autoplay","autoplayInterval","createItemStyle","createScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","itemVisibilityStore","onPositionChange","numberOfData","length","indexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","autoplayController","enabled","intervalMillis","next","direction","prev","scrollTo","option","contextValue","Math","max","visible","resume","pause"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n useAutoplayController,\n useIndexController,\n useItemVisibilityStore,\n useLoopedData,\n usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n const {\n autoplay = false,\n autoplayInterval = 3000,\n createItemStyle = createDefaultItemStyle,\n createScrollAnimation = createDefaultScrollAnimation,\n data: originalData,\n disableSmartAutoplay = false,\n initialIndex = 0,\n itemHeight,\n itemWidth,\n loop = false,\n onIndexChange,\n renderItem,\n scrollEnabled = true,\n style,\n windowSize = 5,\n } = props;\n\n const data = useLoopedData(originalData, loop);\n\n const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n initialIndex,\n numberOfData: data.length,\n windowSize,\n });\n\n const indexController = useIndexController({\n initialIndex,\n itemWidth,\n numberOfData: data.length,\n numberOfOriginalData: originalData.length,\n onIndexChange,\n onPositionChange,\n });\n\n const { getCurrentIndex } = indexController;\n\n const {\n gestureTranslationX,\n globalInterpolation,\n interruptAnimation,\n startPagingAnimation,\n } = usePagingAnimator({\n createScrollAnimation,\n itemWidth,\n indexController,\n initialIndex,\n loop,\n numberOfData: data.length,\n });\n\n const autoplayController = useAutoplayController({\n enabled: autoplay,\n intervalMillis: autoplayInterval,\n startPagingAnimation,\n });\n\n useImperativeHandle(\n ref,\n () => ({\n getCurrentIndex,\n next: () => startPagingAnimation('directional', { direction: 'next' }),\n prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n scrollTo: (option) => startPagingAnimation('index', option),\n }),\n [startPagingAnimation, getCurrentIndex],\n );\n\n const contextValue = useMemo(() => ({\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n }), [\n createItemStyle,\n data,\n globalInterpolation,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n loop,\n ]);\n\n return (\n <InternalContext.Provider value={contextValue}>\n <ViewabilityTrackerView\n enabled={autoplay && !disableSmartAutoplay}\n measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n onViewabilityChange={({ visible }) => {\n if (visible) {\n autoplayController.resume();\n } else {\n autoplayController.pause();\n }\n }}\n >\n <ScrollViewGesture\n autoplayController={autoplayController}\n gestureTranslationX={gestureTranslationX}\n interruptAnimation={interruptAnimation}\n scrollEnabled={scrollEnabled}\n startPagingAnimation={startPagingAnimation}\n >\n <RootView\n data={data}\n itemHeight={itemHeight}\n originalData={originalData}\n renderItem={renderItem}\n style={style}\n />\n </ScrollViewGesture>\n </ViewabilityTrackerView>\n </InternalContext.Provider>\n );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ export default function ScrollViewGesture(props) {
|
|
|
18
18
|
autoplayController,
|
|
19
19
|
children,
|
|
20
20
|
interruptAnimation,
|
|
21
|
-
|
|
21
|
+
gestureTranslationX,
|
|
22
22
|
scrollEnabled,
|
|
23
23
|
startPagingAnimation
|
|
24
24
|
} = props;
|
|
@@ -32,7 +32,7 @@ export default function ScrollViewGesture(props) {
|
|
|
32
32
|
}, [interruptAnimation, pauseAutoplay]);
|
|
33
33
|
const handleGestureEvent = useCallback(Animated.event([{
|
|
34
34
|
nativeEvent: {
|
|
35
|
-
translationX:
|
|
35
|
+
translationX: gestureTranslationX
|
|
36
36
|
}
|
|
37
37
|
}], {
|
|
38
38
|
useNativeDriver: true
|
|
@@ -50,7 +50,8 @@ export default function ScrollViewGesture(props) {
|
|
|
50
50
|
const direction = shouldScrollToAdjacent(translationX, velocityX) ? translationX < 0 ? 'next' : 'prev' : 'stay';
|
|
51
51
|
startPagingAnimation('directional', {
|
|
52
52
|
direction: direction,
|
|
53
|
-
isOriginatedFromGesture: true
|
|
53
|
+
isOriginatedFromGesture: true,
|
|
54
|
+
lastGestureTranslationX: translationX
|
|
54
55
|
});
|
|
55
56
|
resumeAutoplay();
|
|
56
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","Animated","PanGestureHandler","State","GestureHandlerState","SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","
|
|
1
|
+
{"version":3,"names":["React","useCallback","Animated","PanGestureHandler","State","GestureHandlerState","SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","gestureTranslationX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","handleGestureEvent","event","nativeEvent","useNativeDriver","handleHandlerStateChange","state","includes","direction","isOriginatedFromGesture","lastGestureTranslationX"],"sources":["ScrollViewGesture.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback } from 'react';\nimport { Animated } from 'react-native';\nimport type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';\nimport type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface ScrollViewGestureProps {\n autoplayController: AutoplayController;\n children: ReactNode;\n gestureTranslationX: Animated.Value,\n interruptAnimation: () => void;\n scrollEnabled: boolean;\n startPagingAnimation: StartPagingAnimation;\n}\n\nconst SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;\nconst SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;\n\nconst ACTIVE_OFFSET_ABS_X = 5;\nconst activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];\n\nconst endAnimationStates: Readonly<GestureHandlerState[]> = [\n GestureHandlerState.CANCELLED,\n GestureHandlerState.END,\n GestureHandlerState.FAILED,\n];\n\nfunction shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {\n const isSameDirection = translationX * velocityX > 0;\n const isEnoughMovement =\n Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD\n || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;\n\n return isSameDirection && isEnoughMovement;\n}\n\nexport default function ScrollViewGesture(props: ScrollViewGestureProps) {\n const {\n autoplayController,\n children,\n interruptAnimation,\n gestureTranslationX,\n scrollEnabled,\n startPagingAnimation,\n } = props;\n\n const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;\n\n const handleGestureBegin = useCallback(() => {\n pauseAutoplay();\n\n interruptAnimation();\n }, [interruptAnimation, pauseAutoplay]);\n\n const handleGestureEvent = useCallback(Animated.event(\n [{ nativeEvent: { translationX: gestureTranslationX } }],\n { useNativeDriver: true },\n ), []);\n\n const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {\n const { nativeEvent: { translationX, velocityX, state } } = event;\n\n if (endAnimationStates.includes(state)) {\n const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)\n ? (translationX < 0 ? 'next' : 'prev')\n : 'stay';\n\n startPagingAnimation(\n 'directional',\n {\n direction: direction,\n isOriginatedFromGesture: true,\n lastGestureTranslationX: translationX,\n },\n );\n\n resumeAutoplay();\n }\n }, [startPagingAnimation, resumeAutoplay]);\n\n return (\n <PanGestureHandler\n activeOffsetX={activeOffsetX}\n children={children}\n enabled={scrollEnabled}\n onBegan={handleGestureBegin}\n onGestureEvent={handleGestureEvent}\n onHandlerStateChange={handleHandlerStateChange}\n />\n );\n}\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,iBAAT,EAA4BC,KAAK,IAAIC,mBAArC,QAAgE,8BAAhE;AAYA,MAAMC,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,aAAuB,GAAG,CAAC,CAACD,mBAAF,EAAuBA,mBAAvB,CAAhC;AAEA,MAAME,kBAAmD,GAAG,CACxDL,mBAAmB,CAACM,SADoC,EAExDN,mBAAmB,CAACO,GAFoC,EAGxDP,mBAAmB,CAACQ,MAHoC,CAA5D;;AAMA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BT,+BAA1B,IACGa,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBT,+BAF9B;EAIA,OAAOU,eAAe,IAAIC,gBAA1B;AACH;;AAED,eAAe,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,kBAHE;IAIFC,mBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;EAEA,MAAMU,kBAAkB,GAAGhC,WAAW,CAAC,MAAM;IACzC6B,aAAa;IAEbL,kBAAkB;EACrB,CAJqC,EAInC,CAACA,kBAAD,EAAqBK,aAArB,CAJmC,CAAtC;EAMA,MAAMI,kBAAkB,GAAGjC,WAAW,CAACC,QAAQ,CAACiC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAErB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEW,eAAe,EAAE;EAAnB,CAFmC,CAAD,EAGnC,EAHmC,CAAtC;EAKA,MAAMC,wBAAwB,GAAGrC,WAAW,CAAEkC,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAErB,YAAF;QAAgBC,SAAhB;QAA2BuB;MAA3B;IAAf,IAAsDJ,KAA5D;;IAEA,IAAIzB,kBAAkB,CAAC8B,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAG3B,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QACIa,SAAS,EAAEA,SADf;QAEIC,uBAAuB,EAAE,IAF7B;QAGIC,uBAAuB,EAAE5B;MAH7B,CAFgB,CAApB;MASAiB,cAAc;IACjB;EACJ,CAnB2C,EAmBzC,CAACJ,oBAAD,EAAuBI,cAAvB,CAnByC,CAA5C;EAqBA,oBACI,oBAAC,iBAAD;IACI,aAAa,EAAEvB,aADnB;IAEI,QAAQ,EAAEe,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEC,kBALpB;IAMI,oBAAoB,EAAEI;EAN1B,EADJ;AAUH"}
|