@fountain-ui/lab 2.0.0-beta.15 → 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 +11 -20
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js +2 -2
- package/build/commonjs/Carousel/components/ItemView.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 +28 -12
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +3 -3
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/commonjs/Carousel/hooks/{usePagingAnimation.js → usePagingAnimator.js} +45 -21
- package/build/commonjs/Carousel/hooks/usePagingAnimator.js.map +1 -0
- package/build/commonjs/Carousel/types.js +1 -0
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/module/Carousel/Carousel.js +13 -19
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +2 -2
- package/build/module/Carousel/components/ItemView.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 +28 -13
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +3 -3
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/module/Carousel/hooks/{usePagingAnimation.js → usePagingAnimator.js} +44 -21
- package/build/module/Carousel/hooks/usePagingAnimator.js.map +1 -0
- package/build/module/Carousel/types.js +1 -0
- package/build/module/Carousel/types.js.map +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +2 -2
- 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/useIndexController.d.ts +3 -1
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +2 -5
- package/build/typescript/Carousel/hooks/{usePagingAnimation.d.ts → usePagingAnimator.d.ts} +6 -5
- package/build/typescript/Carousel/types.d.ts +14 -1
- package/package.json +2 -2
- package/src/Carousel/Carousel.tsx +12 -20
- package/src/Carousel/CarouselProps.ts +9 -2
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
- package/src/Carousel/components/ItemView.tsx +2 -2
- package/src/Carousel/components/ScrollViewGesture.tsx +8 -4
- package/src/Carousel/hooks/index.ts +1 -1
- package/src/Carousel/hooks/useIndexController.tsx +30 -19
- package/src/Carousel/hooks/useItemVisibilityStore.ts +5 -9
- package/src/Carousel/hooks/{usePagingAnimation.ts → usePagingAnimator.ts} +53 -25
- package/src/Carousel/types.ts +19 -1
- 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");
|
|
@@ -35,48 +33,41 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
35
33
|
itemHeight,
|
|
36
34
|
itemWidth,
|
|
37
35
|
loop = false,
|
|
38
|
-
onIndexChange
|
|
36
|
+
onIndexChange,
|
|
39
37
|
renderItem,
|
|
40
38
|
scrollEnabled = true,
|
|
41
39
|
style,
|
|
42
40
|
windowSize = 5
|
|
43
41
|
} = props;
|
|
44
42
|
const data = (0, _hooks.useLoopedData)(originalData, loop);
|
|
45
|
-
const
|
|
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
|
-
const [itemVisibilityStore, onIndexChange] = (0, _hooks.useItemVisibilityStore)({
|
|
43
|
+
const [itemVisibilityStore, onPositionChange] = (0, _hooks.useItemVisibilityStore)({
|
|
52
44
|
initialIndex,
|
|
53
45
|
numberOfData: data.length,
|
|
54
46
|
windowSize
|
|
55
47
|
});
|
|
56
|
-
const handleIndexChange = (0, _react.useCallback)(newIndex => {
|
|
57
|
-
onIndexChange(newIndex);
|
|
58
|
-
onIndexChangeProp === null || onIndexChangeProp === void 0 ? void 0 : onIndexChangeProp(newIndex);
|
|
59
|
-
}, [onIndexChange, onIndexChangeProp]);
|
|
60
48
|
const indexController = (0, _hooks.useIndexController)({
|
|
61
49
|
initialIndex,
|
|
62
50
|
itemWidth,
|
|
51
|
+
numberOfData: data.length,
|
|
63
52
|
numberOfOriginalData: originalData.length,
|
|
64
|
-
onIndexChange
|
|
53
|
+
onIndexChange,
|
|
54
|
+
onPositionChange
|
|
65
55
|
});
|
|
66
56
|
const {
|
|
67
57
|
getCurrentIndex
|
|
68
58
|
} = indexController;
|
|
69
59
|
const {
|
|
60
|
+
gestureTranslationX,
|
|
61
|
+
globalInterpolation,
|
|
70
62
|
interruptAnimation,
|
|
71
63
|
startPagingAnimation
|
|
72
|
-
} = (0, _hooks.
|
|
64
|
+
} = (0, _hooks.usePagingAnimator)({
|
|
73
65
|
createScrollAnimation,
|
|
74
66
|
itemWidth,
|
|
75
67
|
indexController,
|
|
68
|
+
initialIndex,
|
|
76
69
|
loop,
|
|
77
|
-
numberOfData: data.length
|
|
78
|
-
offsetX,
|
|
79
|
-
translateX
|
|
70
|
+
numberOfData: data.length
|
|
80
71
|
});
|
|
81
72
|
const autoplayController = (0, _hooks.useAutoplayController)({
|
|
82
73
|
enabled: autoplay,
|
|
@@ -120,8 +111,8 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
120
111
|
}
|
|
121
112
|
}, /*#__PURE__*/_react.default.createElement(_components.ScrollViewGesture, {
|
|
122
113
|
autoplayController: autoplayController,
|
|
114
|
+
gestureTranslationX: gestureTranslationX,
|
|
123
115
|
interruptAnimation: interruptAnimation,
|
|
124
|
-
translateX: translateX,
|
|
125
116
|
scrollEnabled: scrollEnabled,
|
|
126
117
|
startPagingAnimation: startPagingAnimation
|
|
127
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","
|
|
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":";;;;;;;AAAA;;AACA;;AAGA;;AAOA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,gBAAG,IAAAC,iBAAA,EAA4C,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB,EAA8B;EACvF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,gBAAgB,GAAG,IAFjB;IAGFC,eAAe,GAAGC,iCAHhB;IAIFC,qBAAqB,GAAGC,uCAJtB;IAKFC,IAAI,EAAEC,YALJ;IAMFC,oBAAoB,GAAG,KANrB;IAOFC,YAAY,GAAG,CAPb;IAQFC,UARE;IASFC,SATE;IAUFC,IAAI,GAAG,KAVL;IAWFC,aAXE;IAYFC,UAZE;IAaFC,aAAa,GAAG,IAbd;IAcFC,KAdE;IAeFC,UAAU,GAAG;EAfX,IAgBFnB,KAhBJ;EAkBA,MAAMQ,IAAI,GAAG,IAAAY,oBAAA,EAAcX,YAAd,EAA4BK,IAA5B,CAAb;EAEA,MAAM,CAACO,mBAAD,EAAsBC,gBAAtB,IAA0C,IAAAC,6BAAA,EAAuB;IACnEZ,YADmE;IAEnEa,YAAY,EAAEhB,IAAI,CAACiB,MAFgD;IAGnEN;EAHmE,CAAvB,CAAhD;EAMA,MAAMO,eAAe,GAAG,IAAAC,yBAAA,EAAmB;IACvChB,YADuC;IAEvCE,SAFuC;IAGvCW,YAAY,EAAEhB,IAAI,CAACiB,MAHoB;IAIvCG,oBAAoB,EAAEnB,YAAY,CAACgB,MAJI;IAKvCV,aALuC;IAMvCO;EANuC,CAAnB,CAAxB;EASA,MAAM;IAAEO;EAAF,IAAsBH,eAA5B;EAEA,MAAM;IACFI,mBADE;IAEFC,mBAFE;IAGFC,kBAHE;IAIFC;EAJE,IAKF,IAAAC,wBAAA,EAAkB;IAClB5B,qBADkB;IAElBO,SAFkB;IAGlBa,eAHkB;IAIlBf,YAJkB;IAKlBG,IALkB;IAMlBU,YAAY,EAAEhB,IAAI,CAACiB;EAND,CAAlB,CALJ;EAcA,MAAMU,kBAAkB,GAAG,IAAAC,4BAAA,EAAsB;IAC7CC,OAAO,EAAEnC,QADoC;IAE7CoC,cAAc,EAAEnC,gBAF6B;IAG7C8B;EAH6C,CAAtB,CAA3B;EAMA,IAAAM,0BAAA,EACItC,GADJ,EAEI,OAAO;IACH4B,eADG;IAEHW,IAAI,EAAE,MAAMP,oBAAoB,CAAC,aAAD,EAAgB;MAAEQ,SAAS,EAAE;IAAb,CAAhB,CAF7B;IAGHC,IAAI,EAAE,MAAMT,oBAAoB,CAAC,aAAD,EAAgB;MAAEQ,SAAS,EAAE;IAAb,CAAhB,CAH7B;IAIHE,QAAQ,EAAGC,MAAD,IAAYX,oBAAoB,CAAC,OAAD,EAAUW,MAAV;EAJvC,CAAP,CAFJ,EAQI,CAACX,oBAAD,EAAuBJ,eAAvB,CARJ;EAWA,MAAMgB,YAAY,GAAG,IAAAC,cAAA,EAAQ,OAAO;IAChC1C,eADgC;IAEhCI,IAFgC;IAGhCuB,mBAHgC;IAIhCnB,UAJgC;IAKhCC,SALgC;IAMhCQ,mBANgC;IAOhCP;EAPgC,CAAP,CAAR,EAQjB,CACAV,eADA,EAEAI,IAFA,EAGAuB,mBAHA,EAIAnB,UAJA,EAKAC,SALA,EAMAQ,mBANA,EAOAP,IAPA,CARiB,CAArB;EAkBA,oBACI,6BAAC,2BAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE+B;EAAjC,gBACI,6BAAC,+BAAD;IACI,OAAO,EAAE3C,QAAQ,IAAI,CAACQ,oBAD1B;IAEI,yBAAyB,EAAEqC,IAAI,CAACC,GAAL,CAAS,IAAT,EAAe7C,gBAAf,CAF/B;IAGI,mBAAmB,EAAE,QAAiB;MAAA,IAAhB;QAAE8C;MAAF,CAAgB;;MAClC,IAAIA,OAAJ,EAAa;QACTd,kBAAkB,CAACe,MAAnB;MACH,CAFD,MAEO;QACHf,kBAAkB,CAACgB,KAAnB;MACH;IACJ;EATL,gBAWI,6BAAC,6BAAD;IACI,kBAAkB,EAAEhB,kBADxB;IAEI,mBAAmB,EAAEL,mBAFzB;IAGI,kBAAkB,EAAEE,kBAHxB;IAII,aAAa,EAAEf,aAJnB;IAKI,oBAAoB,EAAEgB;EAL1B,gBAOI,6BAAC,oBAAD;IACI,IAAI,EAAEzB,IADV;IAEI,UAAU,EAAEI,UAFhB;IAGI,YAAY,EAAEH,YAHlB;IAII,UAAU,EAAEO,UAJhB;IAKI,KAAK,EAAEE;EALX,EAPJ,CAXJ,CADJ,CADJ;AA+BH,CAtHgB,CAAjB;;4BAwHe,IAAAkC,WAAA,EAAKtD,QAAL,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {
|
|
1
|
+
{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n CarouselInstance,\n CreateItemStyle,\n CreateScrollAnimation,\n ItemHeight,\n OnIndexChange,\n RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n ref?: RefObject<CarouselInstance>;\n\n /**\n * If `true`, enable autoplay.\n * @default false\n */\n autoplay?: boolean;\n\n /**\n * Delay in ms until navigating to the next item.\n * @default 3000\n */\n autoplayInterval?: number;\n\n /**\n * The item style creator function.\n * @default createDefaultItemStyle\n */\n createItemStyle?: CreateItemStyle;\n\n /**\n * The scroll animation creator function.\n * @default createDefaultScrollAnimation\n */\n createScrollAnimation?: CreateScrollAnimation;\n\n /**\n * Data for render items.\n */\n data: ReadonlyArray<ItemT>;\n\n /**\n * If `true`, carousel will detect its own viewability and control autoplay automatically.\n * @default false\n */\n disableSmartAutoplay?: boolean;\n\n /**\n * Index of initial item that should be selected.\n * @default 0\n */\n initialIndex?: number;\n\n /**\n * The item height.\n * For a performance reason, always consider to provide a number value.\n */\n itemHeight: ItemHeight;\n\n /**\n * The item width.\n */\n itemWidth: number;\n\n /**\n * Enable infinite loop mode.\n * @default false\n */\n loop?: boolean;\n\n /**\n * Callback fired when an index is changed.\n */\n onIndexChange?: OnIndexChange;\n\n /**\n * Takes an item from data and renders it into the list.\n */\n renderItem: RenderItem<ItemT>;\n\n /**\n * Whether to enable scroll gesture.\n * @default true\n */\n scrollEnabled?: boolean;\n\n /**\n * The maximum number of items that can respond to pan gesture events.\n * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n * 0 means all items will respond to pan gesture events.\n * @default 5\n */\n windowSize?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -10,8 +10,8 @@ var _reactNative = require("react-native");
|
|
|
10
10
|
function createDefaultScrollAnimation(animatedValue, toValue) {
|
|
11
11
|
return _reactNative.Animated.timing(animatedValue, {
|
|
12
12
|
toValue: toValue,
|
|
13
|
-
duration:
|
|
14
|
-
easing: _reactNative.Easing.bezier(0.
|
|
13
|
+
duration: 180,
|
|
14
|
+
easing: _reactNative.Easing.bezier(0.2, 0.2, 0.2, 1),
|
|
15
15
|
useNativeDriver: true
|
|
16
16
|
});
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createDefaultScrollAnimation","animatedValue","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver"],"sources":["createDefaultScrollAnimation.ts"],"sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport default function createDefaultScrollAnimation(\n animatedValue: Animated.Value,\n toValue: number,\n): Animated.CompositeAnimation {\n return Animated.timing(animatedValue, {\n toValue: toValue,\n duration:
|
|
1
|
+
{"version":3,"names":["createDefaultScrollAnimation","animatedValue","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver"],"sources":["createDefaultScrollAnimation.ts"],"sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport default function createDefaultScrollAnimation(\n animatedValue: Animated.Value,\n toValue: number,\n): Animated.CompositeAnimation {\n return Animated.timing(animatedValue, {\n toValue: toValue,\n duration: 180,\n easing: Easing.bezier(0.2, 0.2, 0.2, 1),\n useNativeDriver: true,\n });\n};\n"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,4BAAT,CACXC,aADW,EAEXC,OAFW,EAGgB;EAC3B,OAAOC,qBAAA,CAASC,MAAT,CAAgBH,aAAhB,EAA+B;IAClCC,OAAO,EAAEA,OADyB;IAElCG,QAAQ,EAAE,GAFwB;IAGlCC,MAAM,EAAEC,mBAAA,CAAOC,MAAP,CAAc,GAAd,EAAmB,GAAnB,EAAwB,GAAxB,EAA6B,CAA7B,CAH0B;IAIlCC,eAAe,EAAE;EAJiB,CAA/B,CAAP;AAMH;;AAAA"}
|
|
@@ -35,7 +35,7 @@ function ItemView(props) {
|
|
|
35
35
|
} = (0, _react.useContext)(_InternalContext.default);
|
|
36
36
|
const [visible, setVisible] = (0, _react.useState)(false);
|
|
37
37
|
const interpolation = (0, _useItemInterpolation.default)(index);
|
|
38
|
-
const itemStyle = (0, _react.useMemo)(() => createItemStyle(interpolation, itemWidth), [createItemStyle, interpolation]);
|
|
38
|
+
const itemStyle = (0, _react.useMemo)(() => createItemStyle(interpolation, itemWidth), [createItemStyle, interpolation, itemWidth]);
|
|
39
39
|
(0, _react.useEffect)(() => {
|
|
40
40
|
return itemVisibilityStore.subscribe(ranges => {
|
|
41
41
|
const nextVisible = ranges.some(_ref => {
|
|
@@ -44,7 +44,7 @@ function ItemView(props) {
|
|
|
44
44
|
});
|
|
45
45
|
setVisible(nextVisible);
|
|
46
46
|
});
|
|
47
|
-
}, [itemVisibilityStore]);
|
|
47
|
+
}, [index, itemVisibilityStore]);
|
|
48
48
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
49
49
|
children: visible ? children(interpolation) : null,
|
|
50
50
|
onLayout: onLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [itemVisibilityStore]);\n\n return (\n <Animated.View\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKF,IAAAC,iBAAA,EAAWC,wBAAX,CALJ;EAOA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBZ,KAArB,CAAtB;EAEA,MAAMa,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMZ,eAAe,CAACS,aAAD,EAAgBP,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBS,aAAlB,CAFc,CAAlB;EAKA,
|
|
1
|
+
{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n index: number;\n onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n const {\n children,\n index,\n onLayout,\n } = props;\n\n const {\n createItemStyle,\n itemHeight,\n itemWidth,\n itemVisibilityStore,\n } = useContext(InternalContext);\n\n const [visible, setVisible] = useState(false);\n\n const interpolation = useItemInterpolation(index);\n\n const itemStyle = useMemo(\n () => createItemStyle(interpolation, itemWidth),\n [createItemStyle, interpolation, itemWidth],\n );\n\n useEffect(() => {\n return itemVisibilityStore.subscribe(ranges => {\n const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n setVisible(nextVisible);\n });\n }, [index, itemVisibilityStore]);\n\n return (\n <Animated.View\n children={visible ? children(interpolation) : null}\n onLayout={onLayout}\n style={[\n {\n width: itemWidth,\n height: itemHeight !== 'auto' ? itemHeight : undefined,\n },\n styles.absolute,\n // @ts-ignore\n itemStyle,\n ]}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n absolute: {\n position: 'absolute',\n },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKF,IAAAC,iBAAA,EAAWC,wBAAX,CALJ;EAOA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBZ,KAArB,CAAtB;EAEA,MAAMa,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMZ,eAAe,CAACS,aAAD,EAAgBP,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBS,aAAlB,EAAiCP,SAAjC,CAFc,CAAlB;EAKA,IAAAW,gBAAA,EAAU,MAAM;IACZ,OAAOV,mBAAmB,CAACW,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBrB,KAAK,IAAIoB,IAAT,IAAiBpB,KAAK,IAAIqB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAAClB,KAAD,EAAQK,mBAAR,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,QAAQ,EAAEG,OAAO,GAAGT,QAAQ,CAACY,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEV,QAFd;IAGI,KAAK,EAAE,CACH;MACIqB,KAAK,EAAElB,SADX;MAEImB,MAAM,EAAEpB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCqB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAHX,EADJ;AAeH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -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"}
|
|
@@ -7,31 +7,47 @@ exports.default = useIndexController;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
+
var _core = require("@fountain-ui/core");
|
|
11
|
+
|
|
10
12
|
var _utils = require("@fountain-ui/utils");
|
|
11
13
|
|
|
12
14
|
function useIndexController(params) {
|
|
13
15
|
const {
|
|
14
16
|
initialIndex,
|
|
15
17
|
itemWidth,
|
|
18
|
+
numberOfData,
|
|
16
19
|
numberOfOriginalData,
|
|
17
|
-
onIndexChange
|
|
20
|
+
onIndexChange,
|
|
21
|
+
onPositionChange
|
|
18
22
|
} = params;
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
+
const currentIndex = (0, _core.useImperativeState)(initialIndex);
|
|
24
|
+
const currentPosition = (0, _core.useImperativeState)(initialIndex);
|
|
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));
|
|
23
33
|
|
|
24
|
-
|
|
34
|
+
if (state === 'idle' || state === 'interrupted') {
|
|
35
|
+
if (currentIndex.hasChanged()) {
|
|
36
|
+
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(currentIndex.get());
|
|
37
|
+
}
|
|
25
38
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
39
|
+
if (currentPosition.hasChanged()) {
|
|
40
|
+
onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(currentPosition.get());
|
|
41
|
+
}
|
|
29
42
|
}
|
|
30
|
-
|
|
43
|
+
|
|
44
|
+
currentIndex.set(index);
|
|
45
|
+
currentPosition.set(position);
|
|
46
|
+
}, [itemWidth, numberOfData, numberOfOriginalData, onIndexChange, onPositionChange]);
|
|
31
47
|
return {
|
|
32
|
-
getCurrentIndex,
|
|
48
|
+
getCurrentIndex: currentIndex.get,
|
|
33
49
|
lastIndex: numberOfOriginalData - 1,
|
|
34
|
-
|
|
50
|
+
notifyScrollStateHasChanged
|
|
35
51
|
};
|
|
36
52
|
}
|
|
37
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIndexController","params","initialIndex","itemWidth","numberOfOriginalData","onIndexChange","
|
|
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"}
|
|
@@ -79,8 +79,8 @@ function useItemVisibilityStore(params) {
|
|
|
79
79
|
return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
|
|
80
80
|
});
|
|
81
81
|
const store = (0, _react.useRef)(new SimpleItemVisibilityStore(initialRange)).current;
|
|
82
|
-
const
|
|
83
|
-
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize,
|
|
82
|
+
const onPositionChange = (0, _react.useCallback)(position => {
|
|
83
|
+
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);
|
|
84
84
|
store.dispatch(newRanges);
|
|
85
85
|
}, [numberOfData, windowSize]);
|
|
86
86
|
(0, _react.useEffect)(() => {
|
|
@@ -88,7 +88,7 @@ function useItemVisibilityStore(params) {
|
|
|
88
88
|
store.removeAllListeners();
|
|
89
89
|
};
|
|
90
90
|
}, []);
|
|
91
|
-
return [store,
|
|
91
|
+
return [store, onPositionChange];
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","mod","rightRanges","useItemVisibilityStore","params","initialIndex","initialRange","useState","useRef","current","
|
|
1
|
+
{"version":3,"names":["SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","mod","rightRanges","useItemVisibilityStore","params","initialIndex","initialRange","useState","useRef","current","onPositionChange","useCallback","position","newRanges","useEffect"],"sources":["useItemVisibilityStore.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { mod } from '@fountain-ui/utils';\nimport type { ItemVisibilityStore, OnPositionChange, VisibleIndexRanges } from '../types';\n\nexport interface Parameters {\n initialIndex: number;\n numberOfData: number;\n windowSize: number;\n}\n\nclass SimpleItemVisibilityStore implements ItemVisibilityStore {\n\n private store: VisibleIndexRanges;\n\n constructor(initialValue: VisibleIndexRanges) {\n this.store = initialValue;\n }\n\n private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];\n\n subscribe(listener: (ranges: VisibleIndexRanges) => void) {\n this.listeners.push(listener);\n\n listener(this.store);\n\n return () => {\n const index = this.listeners.indexOf(listener);\n this.listeners.splice(index, 1);\n };\n }\n\n dispatch(ranges: VisibleIndexRanges): void {\n this.store = ranges;\n for (const id in this.listeners) {\n const listener = this.listeners[id];\n listener?.(ranges);\n }\n }\n\n removeAllListeners(): void {\n this.listeners.splice(0, this.listeners.length);\n }\n\n}\n\nfunction normalize(windowSize: number, numberOfData: number): number {\n if (windowSize <= 0) {\n return numberOfData;\n }\n if (windowSize > 0 && windowSize % 2 === 0) {\n return windowSize + 1;\n }\n return windowSize;\n}\n\nfunction makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {\n const ws = normalize(windowSize, numberOfData);\n\n const firstIndex = 0;\n const lastIndex = numberOfData - 1;\n const halfNumberOfAdjacent = Math.floor(ws / 2);\n\n const leftSide = index - halfNumberOfAdjacent;\n const rightSide = index + halfNumberOfAdjacent;\n\n const leftRanges = leftSide >= 0\n ? [[leftSide, index]]\n : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];\n\n const rightRanges = rightSide < numberOfData\n ? [[index, rightSide]]\n : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];\n\n // @ts-ignore\n return [\n ...leftRanges,\n ...rightRanges,\n ];\n}\n\nexport default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange] {\n const {\n initialIndex,\n numberOfData,\n windowSize,\n } = params;\n\n const [initialRange] = useState(() => {\n return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);\n });\n\n const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;\n\n const onPositionChange: OnPositionChange = useCallback((position) => {\n const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);\n\n store.dispatch(newRanges);\n }, [numberOfData, windowSize]);\n\n useEffect(() => {\n return () => {\n store.removeAllListeners();\n };\n }, []);\n\n return [store, onPositionChange];\n};\n"],"mappings":"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"}
|
|
@@ -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,21 +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
|
+
notifyScrollStateHasChanged
|
|
49
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
|
+
}, []);
|
|
50
58
|
const toValueRef = (0, _react.useRef)(0);
|
|
51
59
|
const currentOffsetRef = (0, _react.useRef)(0);
|
|
52
60
|
const isAnimatingRef = (0, _react.useRef)(false);
|
|
@@ -66,31 +74,37 @@ function usePagingAnimation(params) {
|
|
|
66
74
|
const requireNewOffset = (0, _react.useCallback)(newOffset => {
|
|
67
75
|
const nextOffset = ensureOffsetBoundary(newOffset);
|
|
68
76
|
currentOffsetRef.current = nextOffset;
|
|
69
|
-
|
|
77
|
+
accumulativeOffsetX.setValue(nextOffset);
|
|
70
78
|
toValueRef.current = 0;
|
|
71
|
-
|
|
72
|
-
}, [ensureOffsetBoundary
|
|
79
|
+
animationOffsetX.setValue(0);
|
|
80
|
+
}, [ensureOffsetBoundary]);
|
|
73
81
|
const interruptAnimation = (0, _react.useCallback)(() => {
|
|
74
|
-
if (
|
|
75
|
-
// Performance optimization
|
|
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
90
|
requireNewOffset(totalOffset);
|
|
91
|
+
notifyScrollStateHasChanged({
|
|
92
|
+
offset: totalOffset,
|
|
93
|
+
state: 'interrupted'
|
|
94
|
+
});
|
|
85
95
|
});
|
|
86
|
-
}, [
|
|
96
|
+
}, [notifyScrollStateHasChanged, requireNewOffset]);
|
|
87
97
|
const finalizeAnimation = (0, _react.useCallback)(() => {
|
|
88
98
|
isAnimatingRef.current = false;
|
|
89
99
|
const prevOffset = currentOffsetRef.current;
|
|
90
100
|
const toValue = toValueRef.current;
|
|
91
101
|
const totalOffset = prevOffset + toValue;
|
|
92
102
|
requireNewOffset(totalOffset);
|
|
93
|
-
|
|
103
|
+
notifyScrollStateHasChanged({
|
|
104
|
+
offset: totalOffset,
|
|
105
|
+
state: 'idle'
|
|
106
|
+
});
|
|
107
|
+
}, [notifyScrollStateHasChanged, requireNewOffset]);
|
|
94
108
|
const startPagingAnimation = (0, _react.useCallback)((type, config) => {
|
|
95
109
|
if (isAnimatingRef.current) {
|
|
96
110
|
return;
|
|
@@ -148,9 +162,19 @@ function usePagingAnimation(params) {
|
|
|
148
162
|
const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);
|
|
149
163
|
toValueRef.current = toValue;
|
|
150
164
|
isAnimatingRef.current = true;
|
|
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
|
+
}
|
|
151
175
|
|
|
152
176
|
if (configWithDefaults.animated) {
|
|
153
|
-
const animation = createScrollAnimation(
|
|
177
|
+
const animation = createScrollAnimation(animationOffsetX, toValue);
|
|
154
178
|
animation.start(_ref2 => {
|
|
155
179
|
let {
|
|
156
180
|
finished
|
|
@@ -163,14 +187,14 @@ function usePagingAnimation(params) {
|
|
|
163
187
|
} else {
|
|
164
188
|
finalizeAnimation();
|
|
165
189
|
}
|
|
166
|
-
|
|
167
|
-
notifyOffsetHasChanged(currentOffsetRef.current + toValue);
|
|
168
|
-
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop, notifyOffsetHasChanged]);
|
|
190
|
+
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop, notifyScrollStateHasChanged]);
|
|
169
191
|
return {
|
|
192
|
+
gestureTranslationX,
|
|
193
|
+
globalInterpolation,
|
|
170
194
|
interruptAnimation,
|
|
171
195
|
startPagingAnimation
|
|
172
196
|
};
|
|
173
197
|
}
|
|
174
198
|
|
|
175
199
|
;
|
|
176
|
-
//# 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":";;;;;;;AAAA;;AACA;;AA4BA,SAASA,gBAAT,CAA0BC,SAA1B,EAA6C;EACzC,OAAO,UAAUC,SAAV,EAA8C;IACjD,QAAQA,SAAR;MACI,KAAK,MAAL;QACI,OAAO,CAACD,SAAR;;MACJ,KAAK,MAAL;QACI,OAAOA,SAAP;;MACJ,KAAK,MAAL;QACI,OAAO,CAAP;IANR;EAQH,CATD;AAUH;;AAED,SAASE,kBAAT,CAA4BF,SAA5B,EAA+C;EAC3C,OAAO,UAAUG,OAAV,EAA2BC,aAA3B,EAA0D;IAC7D,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAL,CAASH,aAAa,GAAGJ,SAAzB,CAAlB;IAEA,MAAMQ,eAAe,GAAGF,IAAI,CAACC,GAAL,CAASP,SAAS,GAAG,CAArB,CAAxB;IACA,MAAMS,gBAAgB,GAAGJ,SAAS,GAAGG,eAAZ,GACnBH,SAAS,GAAGL,SADO,GAEnBK,SAFN;IAIA,MAAMJ,SAAS,GAAGG,aAAa,GAAG,CAAhB,GAAoB,CAAC,CAArB,GAAyB,CAA3C;IAEA,OAAOD,OAAO,GAAIF,SAAS,GAAGQ,gBAA9B;EACH,CAXD;AAYH;;AAEc,SAASC,iBAAT,CAA2BC,MAA3B,EAAyE;EACpF,MAAM;IACFC,qBADE;IAEFZ,SAFE;IAGFa,eAHE;IAIFC,YAJE;IAKFC,IALE;IAMFC;EANE,IAOFL,MAPJ;EASA,MAAM;IACFM,eADE;IAEFC,SAFE;IAGFC;EAHE,IAIFN,eAJJ;EAMA,MAAMO,cAAc,GAAGpB,SAAS,GAAGc,YAAnC;EACA,MAAMO,mBAAmB,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmBJ,cAAnB,CAAP,EAA2CK,OAAvE;EACA,MAAMC,gBAAgB,GAAG,IAAAJ,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAAvD;EACA,MAAME,mBAAmB,GAAG,IAAAL,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAA1D;EAEA,MAAMG,mBAAmB,GAAG,IAAAC,cAAA,EAAQ,MAAM;IACtC,OAAON,qBAAA,CAASO,GAAT,CACHP,qBAAA,CAASO,GAAT,CAAaT,mBAAb,EAAkCK,gBAAlC,CADG,EAEHC,mBAFG,CAAP;EAIH,CAL2B,EAKzB,EALyB,CAA5B;EAOA,MAAMI,UAAU,GAAG,IAAAT,aAAA,EAAe,CAAf,CAAnB;EACA,MAAMU,gBAAgB,GAAG,IAAAV,aAAA,EAAe,CAAf,CAAzB;EAEA,MAAMW,cAAc,GAAG,IAAAX,aAAA,EAAgB,KAAhB,CAAvB;EAEA,MAAMY,QAAQ,GAAG5B,IAAI,CAACC,GAAL,CAASS,YAAY,GAAGhB,SAAxB,CAAjB;EAEA,MAAMmC,oBAAgD,GAAG,IAAAC,kBAAA,EAAaC,MAAD,IAAoB;IACrF,IAAItB,IAAJ,EAAU;MACN,MAAMuB,YAAY,GAAGhC,IAAI,CAACC,GAAL,CAAS8B,MAAT,KAAqBH,QAAQ,GAAGlC,SAArD;;MACA,IAAIsC,YAAJ,EAAkB;QACd,MAAMC,YAAY,GAAGF,MAAM,GAAG,CAAT,GAAa,CAAb,GAAiB,CAAC,CAAvC;QACA,OAAOA,MAAM,GAAI,CAACE,YAAD,GAAgBL,QAAjC;MACH;IACJ;;IAED,OAAOG,MAAM,GAAGH,QAAhB;EACH,CAVwD,EAUtD,CAAClC,SAAD,EAAYe,IAAZ,EAAkBmB,QAAlB,CAVsD,CAAzD;EAYA,MAAMM,gBAAgB,GAAG,IAAAJ,kBAAA,EAAaK,SAAD,IAAuB;IACxD,MAAMC,UAAU,GAAGP,oBAAoB,CAACM,SAAD,CAAvC;IAEAT,gBAAgB,CAACP,OAAjB,GAA2BiB,UAA3B;IACArB,mBAAmB,CAACsB,QAApB,CAA6BD,UAA7B;IAEAX,UAAU,CAACN,OAAX,GAAqB,CAArB;IACAC,gBAAgB,CAACiB,QAAjB,CAA0B,CAA1B;EACH,CARwB,EAQtB,CACCR,oBADD,CARsB,CAAzB;EAYA,MAAMS,kBAAkB,GAAG,IAAAR,kBAAA,EAAY,MAAM;IACzC,IAAI,CAACH,cAAc,CAACR,OAApB,EAA6B;MACzB;IACH;;IAEDC,gBAAgB,CAACmB,aAAjB,CAA+BC,SAAS,IAAI;MACxCb,cAAc,CAACR,OAAf,GAAyB,KAAzB;MAEA,MAAMsB,UAAU,GAAGf,gBAAgB,CAACP,OAApC;MACA,MAAMuB,WAAW,GAAGD,UAAU,GAAGD,SAAjC;MAEAN,gBAAgB,CAACQ,WAAD,CAAhB;MAEA7B,2BAA2B,CAAC;QAAEkB,MAAM,EAAEW,WAAV;QAAuBC,KAAK,EAAE;MAA9B,CAAD,CAA3B;IACH,CATD;EAUH,CAf0B,EAexB,CACC9B,2BADD,EAECqB,gBAFD,CAfwB,CAA3B;EAoBA,MAAMU,iBAAiB,GAAG,IAAAd,kBAAA,EAAY,MAAM;IACxCH,cAAc,CAACR,OAAf,GAAyB,KAAzB;IAEA,MAAMsB,UAAU,GAAGf,gBAAgB,CAACP,OAApC;IACA,MAAMtB,OAAO,GAAG4B,UAAU,CAACN,OAA3B;IACA,MAAMuB,WAAW,GAAGD,UAAU,GAAG5C,OAAjC;IAEAqC,gBAAgB,CAACQ,WAAD,CAAhB;IAEA7B,2BAA2B,CAAC;MAAEkB,MAAM,EAAEW,WAAV;MAAuBC,KAAK,EAAE;IAA9B,CAAD,CAA3B;EACH,CAVyB,EAUvB,CACC9B,2BADD,EAECqB,gBAFD,CAVuB,CAA1B;EAeA,MAAMW,oBAAoB,GAAG,IAAAf,kBAAA,EAAY,CAACgB,IAAD,EAA4BzC,MAA5B,KAA8D;IACnG,IAAIsB,cAAc,CAACR,OAAnB,EAA4B;MACxB;IACH;;IAED,MAAM4B,kBAAyC,GAAG;MAC9CC,QAAQ,EAAE,IADoC;MAE9C,GAAG3C;IAF2C,CAAlD;IAKA,MAAM4C,YAAY,GAAGtC,eAAe,EAApC;IAEA,MAAMuC,4CAA4C,GAAGzD,gBAAgB,CAACC,SAAD,CAArE;IACA,MAAMyD,iBAAiB,GAAGvD,kBAAkB,CAACF,SAAD,CAA5C;;IAEA,MAAM0D,yCAAyC,GAAIC,OAAD,IAAuD;MACrG,MAAM;QAAE1D,SAAF;QAAa2D;MAAb,IAAyCD,OAA/C;;MAEA,IAAIJ,YAAY,KAAK,CAAjB,IAAsBtD,SAAS,KAAK,MAAxC,EAAgD;QAC5C,OAAO2D,uBAAuB,GACxBJ,4CAA4C,CAAC,MAAD,CADpB,GAExB,CAACtC,SAAD,GAAalB,SAFnB,CAD4C,CAGd;MACjC,CAJD,MAIO,IAAIuD,YAAY,KAAKrC,SAAjB,IAA8BjB,SAAS,KAAK,MAAhD,EAAwD;QAC3D,OAAO2D,uBAAuB,GACxBJ,4CAA4C,CAAC,MAAD,CADpB,GAExBtC,SAAS,GAAGlB,SAFlB,CAD2D,CAG9B;MAChC;;MACD,OAAOwD,4CAA4C,CAACvD,SAAD,CAAnD;IACH,CAbD;;IAeA,MAAM4D,2BAA2B,GAAIF,OAAD,IAAuD;MACvF,MAAMG,mBAAqD,GAAG;QAC1DF,uBAAuB,EAAE,KADiC;QAE1D,GAAGD;MAFuD,CAA9D;MAKA,OAAO5C,IAAI,GACLyC,4CAA4C,CAACM,mBAAmB,CAAC7D,SAArB,CADvC,GAELyD,yCAAyC,CAACI,mBAAD,CAF/C;IAGH,CATD;;IAWA,MAAMC,qBAAqB,GAAG,QAAmD;MAAA,IAAlD;QAAEC;MAAF,CAAkD;;MAC7E,IAAIA,KAAK,GAAG,CAAR,IAAaA,KAAK,GAAG9C,SAArB,IAAkC8C,KAAK,KAAKT,YAAhD,EAA8D;QAC1D;QACA,OAAO,CAAP;MACH;;MAED,MAAMU,QAAQ,GAAG3D,IAAI,CAACC,GAAL,CAASgD,YAAY,GAAGS,KAAxB,IAAiChE,SAAlD;MACA,MAAMC,SAAS,GAAG+D,KAAK,GAAGT,YAAR,GAAuB,CAAC,CAAxB,GAA4B,CAA9C;MAEA,OAAOU,QAAQ,GAAGhE,SAAlB;IACH,CAVD;;IAYA,MAAMiE,aAAa,GAAGd,IAAI,KAAK,aAAT,CAClB;IADkB,EAEhBS,2BAA2B,CAACR,kBAAD,CAFX,CAGlB;IAHkB,EAIhBU,qBAAqB,CAACV,kBAAD,CAJ3B;IAMA,MAAMlD,OAAO,GAAGsD,iBAAiB,CAACS,aAAD,EAAgBlC,gBAAgB,CAACP,OAAjC,CAAjC;IAEAM,UAAU,CAACN,OAAX,GAAqBtB,OAArB;IACA8B,cAAc,CAACR,OAAf,GAAyB,IAAzB;IAEAN,2BAA2B,CAAC;MACxBkB,MAAM,EAAEL,gBAAgB,CAACP,OAAjB,GAA2BtB,OADX;MAExB8C,KAAK,EAAE;IAFiB,CAAD,CAA3B;IAKA,MAAMkB,uBAA+B,GAAGd,kBAAkB,CAACc,uBAAnB,IAA8C,CAAtF;;IACA,IAAIC,MAAM,CAACC,QAAP,CAAgBF,uBAAhB,CAAJ,EAA8C;MAC1CzC,gBAAgB,CAACiB,QAAjB,CAA0BwB,uBAA1B;MACAxC,mBAAmB,CAACgB,QAApB,CAA6B,CAA7B;IACH;;IAED,IAAIU,kBAAkB,CAACC,QAAvB,EAAiC;MAC7B,MAAMgB,SAAS,GAAG1D,qBAAqB,CAACc,gBAAD,EAAmBvB,OAAnB,CAAvC;MAEAmE,SAAS,CAACC,KAAV,CAAgB,SAAkB;QAAA,IAAjB;UAAEC;QAAF,CAAiB;;QAC9B,IAAIA,QAAJ,EAAc;UACVtB,iBAAiB;QACpB;MACJ,CAJD;IAKH,CARD,MAQO;MACHA,iBAAiB;IACpB;EACJ,CAtF4B,EAsF1B,CACCtC,qBADD,EAECK,eAFD,EAGCiC,iBAHD,EAIClD,SAJD,EAKCkB,SALD,EAMCH,IAND,EAOCI,2BAPD,CAtF0B,CAA7B;EAgGA,OAAO;IACHQ,mBADG;IAEHC,mBAFG;IAGHgB,kBAHG;IAIHO;EAJG,CAAP;AAMH;;AAAA"}
|