@fountain-ui/lab 2.0.0-beta.13 → 2.0.0-beta.16
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 +27 -30
- package/build/commonjs/Carousel/Carousel.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/animation/parallaxItemStyleFactory.js +2 -2
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.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 +6 -6
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/commonjs/Carousel/{hooks → components}/useItemInterpolation.js +6 -4
- package/build/commonjs/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/commonjs/Carousel/hooks/index.js +0 -16
- package/build/commonjs/Carousel/hooks/index.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useIndexController.js +23 -45
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +12 -12
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +72 -56
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/commonjs/Carousel/tick.js +16 -0
- package/build/commonjs/Carousel/tick.js.map +1 -0
- package/build/commonjs/Carousel/types.js +1 -0
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/InternalContext.js +17 -0
- package/build/commonjs/ViewPager/InternalContext.js.map +1 -0
- package/build/commonjs/ViewPager/ViewPagerNative.js +40 -17
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +19 -8
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/types.js +6 -0
- package/build/commonjs/ViewPager/types.js.map +1 -0
- package/build/commonjs/ViewPager/usePageStore.js +35 -0
- package/build/commonjs/ViewPager/usePageStore.js.map +1 -0
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +6 -6
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/Carousel/Carousel.js +27 -32
- package/build/module/Carousel/Carousel.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/animation/parallaxItemStyleFactory.js +2 -2
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +1 -1
- package/build/module/Carousel/components/ItemView.js.map +1 -1
- package/build/module/Carousel/components/ScrollViewGesture.js +6 -6
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/module/Carousel/{hooks → components}/useItemInterpolation.js +3 -3
- package/build/module/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/module/Carousel/hooks/index.js +0 -2
- package/build/module/Carousel/hooks/index.js.map +1 -1
- package/build/module/Carousel/hooks/useIndexController.js +23 -39
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +10 -11
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/module/Carousel/hooks/usePagingAnimation.js +73 -56
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/module/Carousel/tick.js +6 -0
- package/build/module/Carousel/tick.js.map +1 -0
- package/build/module/Carousel/types.js +1 -0
- package/build/module/Carousel/types.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/InternalContext.js +7 -0
- package/build/module/ViewPager/InternalContext.js.map +1 -0
- package/build/module/ViewPager/ViewPagerNative.js +38 -17
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +16 -8
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/types.js +2 -0
- package/build/module/ViewPager/types.js.map +1 -0
- package/build/module/ViewPager/usePageStore.js +25 -0
- package/build/module/ViewPager/usePageStore.js.map +1 -0
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/ViewabilityTrackerView/measureViewability.js +2 -2
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +2 -2
- package/build/typescript/Carousel/{hooks → components}/useItemInterpolation.d.ts +0 -0
- package/build/typescript/Carousel/hooks/index.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useIndexController.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +5 -2
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +5 -7
- package/build/typescript/Carousel/tick.d.ts +2 -0
- package/build/typescript/Carousel/types.d.ts +4 -2
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +1 -1
- package/build/typescript/ViewPager/InternalContext.d.ts +7 -0
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +2 -2
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +4 -22
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +2 -2
- package/build/typescript/ViewPager/index.d.ts +2 -1
- package/build/typescript/ViewPager/types.d.ts +19 -0
- package/build/typescript/ViewPager/usePageStore.d.ts +2 -0
- package/build/typescript/ViewPager/utils.d.ts +1 -1
- package/package.json +3 -3
- package/src/Carousel/Carousel.tsx +25 -34
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +1 -1
- package/src/Carousel/components/ItemView.tsx +1 -1
- package/src/Carousel/components/ScrollViewGesture.tsx +8 -7
- package/src/Carousel/{hooks → components}/useItemInterpolation.ts +3 -3
- package/src/Carousel/hooks/index.ts +0 -2
- package/src/Carousel/hooks/useIndexController.tsx +25 -47
- package/src/Carousel/hooks/useItemVisibilityStore.ts +17 -13
- package/src/Carousel/hooks/usePagingAnimation.ts +104 -64
- package/src/Carousel/tick.ts +6 -0
- package/src/Carousel/types.ts +6 -2
- package/src/ViewPager/ChildrenMemoizedPage.tsx +53 -50
- package/src/ViewPager/InternalContext.ts +13 -0
- package/src/ViewPager/ViewPagerNative.tsx +53 -39
- package/src/ViewPager/ViewPagerProps.ts +4 -27
- package/src/ViewPager/ViewPagerWeb.tsx +23 -18
- package/src/ViewPager/index.ts +2 -1
- package/src/ViewPager/types.ts +24 -0
- package/src/ViewPager/usePageStore.ts +30 -0
- package/src/ViewPager/utils.tsx +1 -1
- package/src/ViewabilityTrackerView/measureViewability.ts +1 -3
- package/src/hooks/useUnstableCollapsibleAppBar.ts +1 -1
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +0 -23
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js +0 -14
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/module/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +0 -7
- package/src/Carousel/hooks/useDimensionChangeReaction.ts +0 -25
|
@@ -35,7 +35,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
35
35
|
itemHeight,
|
|
36
36
|
itemWidth,
|
|
37
37
|
loop = false,
|
|
38
|
-
onIndexChange,
|
|
38
|
+
onIndexChange: onIndexChangeProp,
|
|
39
39
|
renderItem,
|
|
40
40
|
scrollEnabled = true,
|
|
41
41
|
style,
|
|
@@ -43,49 +43,46 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
43
43
|
} = props;
|
|
44
44
|
const data = (0, _hooks.useLoopedData)(originalData, loop);
|
|
45
45
|
const initialTx = itemWidth * initialIndex;
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
monitorElement
|
|
53
|
-
} = (0, _hooks.useIndexController)({
|
|
54
|
-
controlledTx,
|
|
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)({
|
|
55
52
|
initialIndex,
|
|
56
|
-
itemWidth,
|
|
57
|
-
numberOfOriginalData: originalData.length,
|
|
58
|
-
onIndexChange
|
|
59
|
-
});
|
|
60
|
-
const itemVisibilityStore = (0, _hooks.useItemVisibilityStore)({
|
|
61
|
-
currentIndex,
|
|
62
53
|
numberOfData: data.length,
|
|
63
54
|
windowSize
|
|
64
55
|
});
|
|
56
|
+
const handleIndexChange = (0, _react.useCallback)(newIndex => {
|
|
57
|
+
onIndexChange(newIndex);
|
|
58
|
+
onIndexChangeProp === null || onIndexChangeProp === void 0 ? void 0 : onIndexChangeProp(newIndex);
|
|
59
|
+
}, [onIndexChange, onIndexChangeProp]);
|
|
60
|
+
const indexController = (0, _hooks.useIndexController)({
|
|
61
|
+
initialIndex,
|
|
62
|
+
itemWidth,
|
|
63
|
+
numberOfOriginalData: originalData.length,
|
|
64
|
+
onIndexChange: handleIndexChange
|
|
65
|
+
});
|
|
65
66
|
const {
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
getCurrentIndex
|
|
68
|
+
} = indexController;
|
|
69
|
+
const {
|
|
70
|
+
interruptAnimation,
|
|
68
71
|
startPagingAnimation
|
|
69
72
|
} = (0, _hooks.usePagingAnimation)({
|
|
70
|
-
controlledTx,
|
|
71
73
|
createScrollAnimation,
|
|
72
|
-
getCurrentIndex,
|
|
73
74
|
itemWidth,
|
|
74
|
-
|
|
75
|
+
indexController,
|
|
75
76
|
loop,
|
|
76
77
|
numberOfData: data.length,
|
|
77
|
-
|
|
78
|
+
offsetX,
|
|
79
|
+
translateX
|
|
78
80
|
});
|
|
79
81
|
const autoplayController = (0, _hooks.useAutoplayController)({
|
|
80
82
|
enabled: autoplay,
|
|
81
83
|
intervalMillis: autoplayInterval,
|
|
82
84
|
startPagingAnimation
|
|
83
85
|
});
|
|
84
|
-
(0, _hooks.useDimensionChangeReaction)({
|
|
85
|
-
controlledTx,
|
|
86
|
-
currentIndex,
|
|
87
|
-
itemWidth
|
|
88
|
-
});
|
|
89
86
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
90
87
|
getCurrentIndex,
|
|
91
88
|
next: () => startPagingAnimation('directional', {
|
|
@@ -107,7 +104,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
107
104
|
}), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
|
|
108
105
|
return /*#__PURE__*/_react.default.createElement(_components.InternalContext.Provider, {
|
|
109
106
|
value: contextValue
|
|
110
|
-
},
|
|
107
|
+
}, /*#__PURE__*/_react.default.createElement(_ViewabilityTrackerView.default, {
|
|
111
108
|
enabled: autoplay && !disableSmartAutoplay,
|
|
112
109
|
measurementIntervalMillis: Math.max(3000, autoplayInterval),
|
|
113
110
|
onViewabilityChange: _ref => {
|
|
@@ -123,8 +120,8 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
|
|
|
123
120
|
}
|
|
124
121
|
}, /*#__PURE__*/_react.default.createElement(_components.ScrollViewGesture, {
|
|
125
122
|
autoplayController: autoplayController,
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
interruptAnimation: interruptAnimation,
|
|
124
|
+
translateX: translateX,
|
|
128
125
|
scrollEnabled: scrollEnabled,
|
|
129
126
|
startPagingAnimation: startPagingAnimation
|
|
130
127
|
}, /*#__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","initialTx","
|
|
1
|
+
{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","onIndexChangeProp","renderItem","scrollEnabled","style","windowSize","useLoopedData","initialTx","offsetX","useRef","Animated","Value","current","translateX","globalInterpolation","add","itemVisibilityStore","useItemVisibilityStore","numberOfData","length","handleIndexChange","useCallback","newIndex","indexController","useIndexController","numberOfOriginalData","getCurrentIndex","interruptAnimation","startPagingAnimation","usePagingAnimation","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, useCallback, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n useAutoplayController,\n useIndexController,\n useItemVisibilityStore,\n useLoopedData,\n usePagingAnimation,\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: onIndexChangeProp,\n renderItem,\n scrollEnabled = true,\n style,\n windowSize = 5,\n } = props;\n\n const data = useLoopedData(originalData, loop);\n\n const initialTx = itemWidth * initialIndex;\n const offsetX = useRef(new Animated.Value(initialTx)).current;\n const translateX = useRef(new Animated.Value(0)).current;\n const globalInterpolation = Animated.add(offsetX, translateX);\n\n const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({\n initialIndex,\n numberOfData: data.length,\n windowSize,\n });\n\n const handleIndexChange = useCallback((newIndex: number) => {\n onIndexChange(newIndex);\n onIndexChangeProp?.(newIndex);\n }, [onIndexChange, onIndexChangeProp]);\n\n const indexController = useIndexController({\n initialIndex,\n itemWidth,\n numberOfOriginalData: originalData.length,\n onIndexChange: handleIndexChange,\n });\n\n const { getCurrentIndex } = indexController;\n\n const {\n interruptAnimation,\n startPagingAnimation,\n } = usePagingAnimation({\n createScrollAnimation,\n itemWidth,\n indexController,\n loop,\n numberOfData: data.length,\n offsetX,\n translateX,\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 interruptAnimation={interruptAnimation}\n translateX={translateX}\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;;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,aAAa,EAAEC,iBAXb;IAYFC,UAZE;IAaFC,aAAa,GAAG,IAbd;IAcFC,KAdE;IAeFC,UAAU,GAAG;EAfX,IAgBFpB,KAhBJ;EAkBA,MAAMQ,IAAI,GAAG,IAAAa,oBAAA,EAAcZ,YAAd,EAA4BK,IAA5B,CAAb;EAEA,MAAMQ,SAAS,GAAGT,SAAS,GAAGF,YAA9B;EACA,MAAMY,OAAO,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmBJ,SAAnB,CAAP,EAAsCK,OAAtD;EACA,MAAMC,UAAU,GAAG,IAAAJ,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAAjD;;EACA,MAAME,mBAAmB,GAAGJ,qBAAA,CAASK,GAAT,CAAaP,OAAb,EAAsBK,UAAtB,CAA5B;;EAEA,MAAM,CAACG,mBAAD,EAAsBhB,aAAtB,IAAuC,IAAAiB,6BAAA,EAAuB;IAChErB,YADgE;IAEhEsB,YAAY,EAAEzB,IAAI,CAAC0B,MAF6C;IAGhEd;EAHgE,CAAvB,CAA7C;EAMA,MAAMe,iBAAiB,GAAG,IAAAC,kBAAA,EAAaC,QAAD,IAAsB;IACxDtB,aAAa,CAACsB,QAAD,CAAb;IACArB,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB,CAAGqB,QAAH,CAAjB;EACH,CAHyB,EAGvB,CAACtB,aAAD,EAAgBC,iBAAhB,CAHuB,CAA1B;EAKA,MAAMsB,eAAe,GAAG,IAAAC,yBAAA,EAAmB;IACvC5B,YADuC;IAEvCE,SAFuC;IAGvC2B,oBAAoB,EAAE/B,YAAY,CAACyB,MAHI;IAIvCnB,aAAa,EAAEoB;EAJwB,CAAnB,CAAxB;EAOA,MAAM;IAAEM;EAAF,IAAsBH,eAA5B;EAEA,MAAM;IACFI,kBADE;IAEFC;EAFE,IAGF,IAAAC,yBAAA,EAAmB;IACnBtC,qBADmB;IAEnBO,SAFmB;IAGnByB,eAHmB;IAInBxB,IAJmB;IAKnBmB,YAAY,EAAEzB,IAAI,CAAC0B,MALA;IAMnBX,OANmB;IAOnBK;EAPmB,CAAnB,CAHJ;EAaA,MAAMiB,kBAAkB,GAAG,IAAAC,4BAAA,EAAsB;IAC7CC,OAAO,EAAE7C,QADoC;IAE7C8C,cAAc,EAAE7C,gBAF6B;IAG7CwC;EAH6C,CAAtB,CAA3B;EAMA,IAAAM,0BAAA,EACIhD,GADJ,EAEI,OAAO;IACHwC,eADG;IAEHS,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,EAAuBF,eAAvB,CARJ;EAWA,MAAMc,YAAY,GAAG,IAAAC,cAAA,EAAQ,OAAO;IAChCpD,eADgC;IAEhCI,IAFgC;IAGhCqB,mBAHgC;IAIhCjB,UAJgC;IAKhCC,SALgC;IAMhCkB,mBANgC;IAOhCjB;EAPgC,CAAP,CAAR,EAQjB,CACAV,eADA,EAEAI,IAFA,EAGAqB,mBAHA,EAIAjB,UAJA,EAKAC,SALA,EAMAkB,mBANA,EAOAjB,IAPA,CARiB,CAArB;EAkBA,oBACI,6BAAC,2BAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAEyC;EAAjC,gBACI,6BAAC,+BAAD;IACI,OAAO,EAAErD,QAAQ,IAAI,CAACQ,oBAD1B;IAEI,yBAAyB,EAAE+C,IAAI,CAACC,GAAL,CAAS,IAAT,EAAevD,gBAAf,CAF/B;IAGI,mBAAmB,EAAE,QAAiB;MAAA,IAAhB;QAAEwD;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,kBAAkB,EAAEH,kBAFxB;IAGI,UAAU,EAAEd,UAHhB;IAII,aAAa,EAAEV,aAJnB;IAKI,oBAAoB,EAAEyB;EAL1B,gBAOI,6BAAC,oBAAD;IACI,IAAI,EAAEnC,IADV;IAEI,UAAU,EAAEI,UAFhB;IAGI,YAAY,EAAEH,YAHlB;IAII,UAAU,EAAEQ,UAJhB;IAKI,KAAK,EAAEE;EALX,EAPJ,CAXJ,CADJ,CADJ;AA+BH,CA7HgB,CAAjB;;4BA+He,IAAA2C,WAAA,EAAKhE,QAAL,C"}
|
|
@@ -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"}
|
|
@@ -23,8 +23,8 @@ function parallaxItemStyleFactory() {
|
|
|
23
23
|
adjacentItemOpacity,
|
|
24
24
|
adjacentItemScale,
|
|
25
25
|
scrollingOffset
|
|
26
|
-
} = { ...
|
|
27
|
-
...
|
|
26
|
+
} = { ...defaultParallaxAnimationConfig,
|
|
27
|
+
...config
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
const createItemStyle = (itemInterpolation, itemWidth) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","itemInterpolationInputRange","outputRange","zIndex","extrapolate","scale","opacity","transform","translateX"],"sources":["parallaxItemStyleFactory.ts"],"sourcesContent":["import type { CreateItemStyle } from '../types';\nimport { itemInterpolationInputRange } from './animationUtils';\n\nexport interface ParallaxAnimationConfig {\n activeItemScale?: number;\n activeItemOpacity?: number;\n adjacentItemScale?: number;\n adjacentItemOpacity?: number;\n scrollingOffset?: number;\n}\n\nconst defaultParallaxAnimationConfig: Required<Readonly<ParallaxAnimationConfig>> = {\n activeItemScale: 0.9,\n activeItemOpacity: 1,\n adjacentItemScale: Math.pow(0.9, 2),\n adjacentItemOpacity: 0.5,\n scrollingOffset: 50,\n};\n\nexport default function parallaxItemStyleFactory(config: ParallaxAnimationConfig = defaultParallaxAnimationConfig) {\n const {\n activeItemOpacity,\n activeItemScale,\n adjacentItemOpacity,\n adjacentItemScale,\n scrollingOffset,\n }: Required<ParallaxAnimationConfig> = {\n ...
|
|
1
|
+
{"version":3,"names":["defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","itemInterpolationInputRange","outputRange","zIndex","extrapolate","scale","opacity","transform","translateX"],"sources":["parallaxItemStyleFactory.ts"],"sourcesContent":["import type { CreateItemStyle } from '../types';\nimport { itemInterpolationInputRange } from './animationUtils';\n\nexport interface ParallaxAnimationConfig {\n activeItemScale?: number;\n activeItemOpacity?: number;\n adjacentItemScale?: number;\n adjacentItemOpacity?: number;\n scrollingOffset?: number;\n}\n\nconst defaultParallaxAnimationConfig: Required<Readonly<ParallaxAnimationConfig>> = {\n activeItemScale: 0.9,\n activeItemOpacity: 1,\n adjacentItemScale: Math.pow(0.9, 2),\n adjacentItemOpacity: 0.5,\n scrollingOffset: 50,\n};\n\nexport default function parallaxItemStyleFactory(config: ParallaxAnimationConfig = defaultParallaxAnimationConfig) {\n const {\n activeItemOpacity,\n activeItemScale,\n adjacentItemOpacity,\n adjacentItemScale,\n scrollingOffset,\n }: Required<ParallaxAnimationConfig> = {\n ...defaultParallaxAnimationConfig,\n ...config,\n };\n\n const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {\n const translate = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n -itemWidth + scrollingOffset,\n 0,\n itemWidth - scrollingOffset,\n ],\n });\n\n const zIndex = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [0, itemWidth, 0],\n extrapolate: 'clamp',\n });\n\n const scale = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n adjacentItemScale,\n activeItemScale,\n adjacentItemScale,\n ],\n extrapolate: 'clamp',\n });\n\n const opacity = itemInterpolation.interpolate({\n inputRange: itemInterpolationInputRange,\n outputRange: [\n adjacentItemOpacity,\n activeItemOpacity,\n adjacentItemOpacity,\n ],\n extrapolate: 'clamp',\n });\n\n return {\n transform: [\n { translateX: translate },\n { scale },\n ],\n zIndex,\n opacity,\n };\n };\n\n return createItemStyle;\n};\n"],"mappings":";;;;;;;AACA;;AAUA,MAAMA,8BAA2E,GAAG;EAChFC,eAAe,EAAE,GAD+D;EAEhFC,iBAAiB,EAAE,CAF6D;EAGhFC,iBAAiB,EAAEC,IAAI,CAACC,GAAL,CAAS,GAAT,EAAc,CAAd,CAH6D;EAIhFC,mBAAmB,EAAE,GAJ2D;EAKhFC,eAAe,EAAE;AAL+D,CAApF;;AAQe,SAASC,wBAAT,GAAoG;EAAA,IAAlEC,MAAkE,uEAAhCT,8BAAgC;EAC/G,MAAM;IACFE,iBADE;IAEFD,eAFE;IAGFK,mBAHE;IAIFH,iBAJE;IAKFI;EALE,IAMiC,EACnC,GAAGP,8BADgC;IAEnC,GAAGS;EAFgC,CANvC;;EAWA,MAAMC,eAAgC,GAAG,CAACC,iBAAD,EAAoBC,SAApB,KAAkC;IACvE,MAAMC,SAAS,GAAGF,iBAAiB,CAACG,WAAlB,CAA8B;MAC5CC,UAAU,EAAEC,2CADgC;MAE5CC,WAAW,EAAE,CACT,CAACL,SAAD,GAAaL,eADJ,EAET,CAFS,EAGTK,SAAS,GAAGL,eAHH;IAF+B,CAA9B,CAAlB;IASA,MAAMW,MAAM,GAAGP,iBAAiB,CAACG,WAAlB,CAA8B;MACzCC,UAAU,EAAEC,2CAD6B;MAEzCC,WAAW,EAAE,CAAC,CAAD,EAAIL,SAAJ,EAAe,CAAf,CAF4B;MAGzCO,WAAW,EAAE;IAH4B,CAA9B,CAAf;IAMA,MAAMC,KAAK,GAAGT,iBAAiB,CAACG,WAAlB,CAA8B;MACxCC,UAAU,EAAEC,2CAD4B;MAExCC,WAAW,EAAE,CACTd,iBADS,EAETF,eAFS,EAGTE,iBAHS,CAF2B;MAOxCgB,WAAW,EAAE;IAP2B,CAA9B,CAAd;IAUA,MAAME,OAAO,GAAGV,iBAAiB,CAACG,WAAlB,CAA8B;MAC1CC,UAAU,EAAEC,2CAD8B;MAE1CC,WAAW,EAAE,CACTX,mBADS,EAETJ,iBAFS,EAGTI,mBAHS,CAF6B;MAO1Ca,WAAW,EAAE;IAP6B,CAA9B,CAAhB;IAUA,OAAO;MACHG,SAAS,EAAE,CACP;QAAEC,UAAU,EAAEV;MAAd,CADO,EAEP;QAAEO;MAAF,CAFO,CADR;MAKHF,MALG;MAMHG;IANG,CAAP;EAQH,CA5CD;;EA8CA,OAAOX,eAAP;AACH;;AAAA"}
|
|
@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _core = require("@fountain-ui/core");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _useItemInterpolation = _interopRequireDefault(require("./useItemInterpolation"));
|
|
15
15
|
|
|
16
16
|
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
17
17
|
|
|
@@ -34,7 +34,7 @@ function ItemView(props) {
|
|
|
34
34
|
itemVisibilityStore
|
|
35
35
|
} = (0, _react.useContext)(_InternalContext.default);
|
|
36
36
|
const [visible, setVisible] = (0, _react.useState)(false);
|
|
37
|
-
const interpolation = (0,
|
|
37
|
+
const interpolation = (0, _useItemInterpolation.default)(index);
|
|
38
38
|
const itemStyle = (0, _react.useMemo)(() => createItemStyle(interpolation, itemWidth), [createItemStyle, interpolation]);
|
|
39
39
|
(0, _react.useEffect)(() => {
|
|
40
40
|
return itemVisibilityStore.subscribe(ranges => {
|
|
@@ -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
|
|
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,IAAAI,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,CAACb,mBAAD,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"}
|
|
@@ -19,7 +19,7 @@ const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
|
|
|
19
19
|
const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
|
|
20
20
|
const ACTIVE_OFFSET_ABS_X = 5;
|
|
21
21
|
const activeOffsetX = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
|
|
22
|
-
const endAnimationStates = [_reactNativeGestureHandler.State.CANCELLED, _reactNativeGestureHandler.State.END];
|
|
22
|
+
const endAnimationStates = [_reactNativeGestureHandler.State.CANCELLED, _reactNativeGestureHandler.State.END, _reactNativeGestureHandler.State.FAILED];
|
|
23
23
|
|
|
24
24
|
function shouldScrollToAdjacent(translationX, velocityX) {
|
|
25
25
|
const isSameDirection = translationX * velocityX > 0;
|
|
@@ -31,8 +31,8 @@ function ScrollViewGesture(props) {
|
|
|
31
31
|
const {
|
|
32
32
|
autoplayController,
|
|
33
33
|
children,
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
interruptAnimation,
|
|
35
|
+
translateX,
|
|
36
36
|
scrollEnabled,
|
|
37
37
|
startPagingAnimation
|
|
38
38
|
} = props;
|
|
@@ -42,11 +42,11 @@ function ScrollViewGesture(props) {
|
|
|
42
42
|
} = autoplayController;
|
|
43
43
|
const handleGestureBegin = (0, _react.useCallback)(() => {
|
|
44
44
|
pauseAutoplay();
|
|
45
|
-
|
|
46
|
-
}, [
|
|
45
|
+
interruptAnimation();
|
|
46
|
+
}, [interruptAnimation, pauseAutoplay]);
|
|
47
47
|
const handleGestureEvent = (0, _react.useCallback)(_reactNative.Animated.event([{
|
|
48
48
|
nativeEvent: {
|
|
49
|
-
translationX:
|
|
49
|
+
translationX: translateX
|
|
50
50
|
}
|
|
51
51
|
}], {
|
|
52
52
|
useNativeDriver: true
|
|
@@ -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","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","
|
|
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","translateX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","useCallback","handleGestureEvent","Animated","event","nativeEvent","useNativeDriver","handleHandlerStateChange","state","includes","direction","isOriginatedFromGesture"],"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 interruptAnimation: () => void;\n translateX: Animated.Value,\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 translateX,\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: translateX } }],\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 { direction: direction, isOriginatedFromGesture: true },\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,UAJE;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;QAAEe,SAAS,EAAEA,SAAb;QAAwBC,uBAAuB,EAAE;MAAjD,CAFgB,CAApB;MAKAZ,cAAc;IACjB;EACJ,CAfgC,EAe9B,CAACJ,oBAAD,EAAuBI,cAAvB,CAf8B,CAAjC;EAiBA,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"}
|
|
@@ -9,7 +9,9 @@ var _react = require("react");
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
const OVERSCROLL_FRICTION_FACTOR = 4;
|
|
15
17
|
|
|
@@ -19,7 +21,7 @@ function useItemInterpolation(index) {
|
|
|
19
21
|
data,
|
|
20
22
|
globalInterpolation,
|
|
21
23
|
loop
|
|
22
|
-
} = (0, _react.useContext)(
|
|
24
|
+
} = (0, _react.useContext)(_InternalContext.default);
|
|
23
25
|
const numberOfData = data.length;
|
|
24
26
|
const interpolationConfigOnLoop = (0, _react.useMemo)(() => {
|
|
25
27
|
const lastIndex = numberOfData - 1;
|
|
@@ -54,8 +56,8 @@ function useItemInterpolation(index) {
|
|
|
54
56
|
}, [index, itemWidth, numberOfData]);
|
|
55
57
|
return (0, _react.useMemo)(() => {
|
|
56
58
|
const interpolationConfig = loop ? interpolationConfigOnLoop : interpolationConfigOnNoLoop;
|
|
57
|
-
const
|
|
58
|
-
return _reactNative.Animated.divide(
|
|
59
|
+
const localOffsetX = globalInterpolation.interpolate(interpolationConfig);
|
|
60
|
+
return _reactNative.Animated.divide(localOffsetX, itemWidth);
|
|
59
61
|
}, [globalInterpolation, interpolationConfigOnLoop, interpolationConfigOnNoLoop, itemWidth, loop]);
|
|
60
62
|
}
|
|
61
63
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport InternalContext from './InternalContext';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const localOffsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(localOffsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -9,24 +9,12 @@ Object.defineProperty(exports, "useAutoplayController", {
|
|
|
9
9
|
return _useAutoplayController.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "useDimensionChangeReaction", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _useDimensionChangeReaction.default;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
12
|
Object.defineProperty(exports, "useIndexController", {
|
|
19
13
|
enumerable: true,
|
|
20
14
|
get: function () {
|
|
21
15
|
return _useIndexController.default;
|
|
22
16
|
}
|
|
23
17
|
});
|
|
24
|
-
Object.defineProperty(exports, "useItemInterpolation", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _useItemInterpolation.default;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
18
|
Object.defineProperty(exports, "useItemVisibilityStore", {
|
|
31
19
|
enumerable: true,
|
|
32
20
|
get: function () {
|
|
@@ -48,12 +36,8 @@ Object.defineProperty(exports, "usePagingAnimation", {
|
|
|
48
36
|
|
|
49
37
|
var _useAutoplayController = _interopRequireDefault(require("./useAutoplayController"));
|
|
50
38
|
|
|
51
|
-
var _useDimensionChangeReaction = _interopRequireDefault(require("./useDimensionChangeReaction"));
|
|
52
|
-
|
|
53
39
|
var _useIndexController = _interopRequireDefault(require("./useIndexController"));
|
|
54
40
|
|
|
55
|
-
var _useItemInterpolation = _interopRequireDefault(require("./useItemInterpolation"));
|
|
56
|
-
|
|
57
41
|
var _useLoopedData = _interopRequireDefault(require("./useLoopedData"));
|
|
58
42
|
|
|
59
43
|
var _usePagingAnimation = _interopRequireDefault(require("./usePagingAnimation"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useAutoplayController } from './useAutoplayController';\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 usePagingAnimation } from './usePagingAnimation';\nexport { default as useItemVisibilityStore } from './useItemVisibilityStore';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA"}
|
|
@@ -5,64 +5,42 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useIndexController;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
|
|
14
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
-
|
|
16
|
-
const normalizeIndex = (maybeIndex, numberOfData) => Math.abs(Math.floor(maybeIndex)) % numberOfData;
|
|
10
|
+
var _utils = require("@fountain-ui/utils");
|
|
17
11
|
|
|
18
12
|
function useIndexController(params) {
|
|
19
13
|
const {
|
|
20
|
-
controlledTx,
|
|
21
14
|
initialIndex,
|
|
22
15
|
itemWidth,
|
|
23
16
|
numberOfOriginalData,
|
|
24
17
|
onIndexChange
|
|
25
18
|
} = params;
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const normalized = _reactNative.Animated.divide(reversedTx, itemWidth);
|
|
34
|
-
|
|
35
|
-
return _reactNative.Animated.modulo(normalized, numberOfOriginalData);
|
|
36
|
-
}, [controlledTx, itemWidth, numberOfOriginalData]);
|
|
37
|
-
(0, _react.useEffect)(() => {
|
|
38
|
-
const subscriptionId = maybeIndex.addListener(observedValue => {
|
|
39
|
-
const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
|
|
40
|
-
|
|
41
|
-
if (indexRef.current !== newIndex) {
|
|
42
|
-
indexRef.current = newIndex;
|
|
43
|
-
setIndex(newIndex);
|
|
44
|
-
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newIndex);
|
|
19
|
+
const currentIndexRef = (0, _react.useRef)(initialIndex);
|
|
20
|
+
const indexChangedRef = (0, _react.useRef)(false);
|
|
21
|
+
const getCurrentIndex = (0, _react.useCallback)(() => currentIndexRef.current, []);
|
|
22
|
+
const notifyAnimationState = (0, _react.useCallback)(state => {
|
|
23
|
+
if (state === 'finished' || state === 'interrupted') {
|
|
24
|
+
if (indexChangedRef.current) {
|
|
25
|
+
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getCurrentIndex());
|
|
45
26
|
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
27
|
+
}
|
|
28
|
+
}, [getCurrentIndex, onIndexChange]);
|
|
29
|
+
const notifyOffsetHasChanged = (0, _react.useCallback)(offset => {
|
|
30
|
+
const roundedOffset = Math.round(offset / itemWidth) * itemWidth; // To prevent floating point problem, make sure index is integer type.
|
|
31
|
+
|
|
32
|
+
const nextIndex = Math.floor((0, _utils.mod)(-roundedOffset / itemWidth, numberOfOriginalData));
|
|
33
|
+
|
|
34
|
+
if (nextIndex !== currentIndexRef.current) {
|
|
35
|
+
currentIndexRef.current = nextIndex;
|
|
36
|
+
indexChangedRef.current = true;
|
|
37
|
+
}
|
|
38
|
+
}, [itemWidth, numberOfOriginalData]);
|
|
52
39
|
return {
|
|
53
|
-
currentIndex: index,
|
|
54
40
|
getCurrentIndex,
|
|
55
41
|
lastIndex: numberOfOriginalData - 1,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
style: [{
|
|
59
|
-
zIndex: maybeIndex
|
|
60
|
-
}, {
|
|
61
|
-
width: 1,
|
|
62
|
-
height: 1,
|
|
63
|
-
position: 'absolute'
|
|
64
|
-
}]
|
|
65
|
-
})
|
|
42
|
+
notifyAnimationState,
|
|
43
|
+
notifyOffsetHasChanged
|
|
66
44
|
};
|
|
67
45
|
}
|
|
68
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useIndexController","params","initialIndex","itemWidth","numberOfOriginalData","onIndexChange","currentIndexRef","useRef","indexChangedRef","getCurrentIndex","useCallback","current","notifyAnimationState","state","notifyOffsetHasChanged","offset","roundedOffset","Math","round","nextIndex","floor","mod","lastIndex"],"sources":["useIndexController.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport { mod } from '@fountain-ui/utils';\nimport type { AnimationState, IndexController } from '../types';\n\nexport interface UseIndexControllerParameters {\n initialIndex: number;\n itemWidth: number;\n numberOfOriginalData: number;\n onIndexChange?: (newIndex: number) => void;\n}\n\nexport default function useIndexController(params: UseIndexControllerParameters): IndexController {\n const {\n initialIndex,\n itemWidth,\n numberOfOriginalData,\n onIndexChange,\n } = params;\n\n const currentIndexRef = useRef<number>(initialIndex);\n const indexChangedRef = useRef<boolean>(false);\n\n const getCurrentIndex = useCallback(() => currentIndexRef.current, []);\n\n const notifyAnimationState = useCallback((state: AnimationState) => {\n if (state === 'finished' || state === 'interrupted') {\n if (indexChangedRef.current) {\n onIndexChange?.(getCurrentIndex());\n }\n }\n }, [\n getCurrentIndex,\n onIndexChange,\n ]);\n\n const notifyOffsetHasChanged = useCallback((offset: number) => {\n const roundedOffset = Math.round(offset / itemWidth) * itemWidth;\n\n // To prevent floating point problem, make sure index is integer type.\n const nextIndex = Math.floor(mod((-roundedOffset / itemWidth), numberOfOriginalData));\n\n if (nextIndex !== currentIndexRef.current) {\n currentIndexRef.current = nextIndex;\n indexChangedRef.current = true;\n }\n }, [itemWidth, numberOfOriginalData]);\n\n return {\n getCurrentIndex,\n lastIndex: numberOfOriginalData - 1,\n notifyAnimationState,\n notifyOffsetHasChanged,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAUe,SAASA,kBAAT,CAA4BC,MAA5B,EAAmF;EAC9F,MAAM;IACFC,YADE;IAEFC,SAFE;IAGFC,oBAHE;IAIFC;EAJE,IAKFJ,MALJ;EAOA,MAAMK,eAAe,GAAG,IAAAC,aAAA,EAAeL,YAAf,CAAxB;EACA,MAAMM,eAAe,GAAG,IAAAD,aAAA,EAAgB,KAAhB,CAAxB;EAEA,MAAME,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAMJ,eAAe,CAACK,OAAlC,EAA2C,EAA3C,CAAxB;EAEA,MAAMC,oBAAoB,GAAG,IAAAF,kBAAA,EAAaG,KAAD,IAA2B;IAChE,IAAIA,KAAK,KAAK,UAAV,IAAwBA,KAAK,KAAK,aAAtC,EAAqD;MACjD,IAAIL,eAAe,CAACG,OAApB,EAA6B;QACzBN,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGI,eAAe,EAAlB,CAAb;MACH;IACJ;EACJ,CAN4B,EAM1B,CACCA,eADD,EAECJ,aAFD,CAN0B,CAA7B;EAWA,MAAMS,sBAAsB,GAAG,IAAAJ,kBAAA,EAAaK,MAAD,IAAoB;IAC3D,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAWH,MAAM,GAAGZ,SAApB,IAAiCA,SAAvD,CAD2D,CAG3D;;IACA,MAAMgB,SAAS,GAAGF,IAAI,CAACG,KAAL,CAAW,IAAAC,UAAA,EAAK,CAACL,aAAD,GAAiBb,SAAtB,EAAkCC,oBAAlC,CAAX,CAAlB;;IAEA,IAAIe,SAAS,KAAKb,eAAe,CAACK,OAAlC,EAA2C;MACvCL,eAAe,CAACK,OAAhB,GAA0BQ,SAA1B;MACAX,eAAe,CAACG,OAAhB,GAA0B,IAA1B;IACH;EACJ,CAV8B,EAU5B,CAACR,SAAD,EAAYC,oBAAZ,CAV4B,CAA/B;EAYA,OAAO;IACHK,eADG;IAEHa,SAAS,EAAElB,oBAAoB,GAAG,CAF/B;IAGHQ,oBAHG;IAIHE;EAJG,CAAP;AAMH;;AAAA"}
|
|
@@ -7,6 +7,8 @@ exports.default = useItemVisibilityStore;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
+
var _utils = require("@fountain-ui/utils");
|
|
11
|
+
|
|
10
12
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
11
13
|
|
|
12
14
|
class SimpleItemVisibilityStore {
|
|
@@ -54,10 +56,6 @@ function normalize(windowSize, numberOfData) {
|
|
|
54
56
|
return windowSize;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
|
-
function mod(value, modulo) {
|
|
58
|
-
return (value % modulo + modulo) % modulo;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
59
|
function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
62
60
|
const ws = normalize(windowSize, numberOfData);
|
|
63
61
|
const firstIndex = 0;
|
|
@@ -65,30 +63,32 @@ function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
|
65
63
|
const halfNumberOfAdjacent = Math.floor(ws / 2);
|
|
66
64
|
const leftSide = index - halfNumberOfAdjacent;
|
|
67
65
|
const rightSide = index + halfNumberOfAdjacent;
|
|
68
|
-
const leftRanges = leftSide >= 0 ? [[leftSide, index]] : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];
|
|
69
|
-
const rightRanges = rightSide < numberOfData ? [[index, rightSide]] : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]]; // @ts-ignore
|
|
66
|
+
const leftRanges = leftSide >= 0 ? [[leftSide, index]] : [[firstIndex, index], [(0, _utils.mod)(leftSide, numberOfData), lastIndex]];
|
|
67
|
+
const rightRanges = rightSide < numberOfData ? [[index, rightSide]] : [[index, lastIndex], [firstIndex, (0, _utils.mod)(rightSide, numberOfData)]]; // @ts-ignore
|
|
70
68
|
|
|
71
69
|
return [...leftRanges, ...rightRanges];
|
|
72
70
|
}
|
|
73
71
|
|
|
74
72
|
function useItemVisibilityStore(params) {
|
|
75
73
|
const {
|
|
76
|
-
|
|
74
|
+
initialIndex,
|
|
77
75
|
numberOfData,
|
|
78
76
|
windowSize
|
|
79
77
|
} = params;
|
|
80
|
-
const [initialRange] = (0, _react.useState)(() =>
|
|
78
|
+
const [initialRange] = (0, _react.useState)(() => {
|
|
79
|
+
return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
|
|
80
|
+
});
|
|
81
81
|
const store = (0, _react.useRef)(new SimpleItemVisibilityStore(initialRange)).current;
|
|
82
|
-
(0, _react.
|
|
83
|
-
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize,
|
|
82
|
+
const onIndexChange = (0, _react.useCallback)(newIndex => {
|
|
83
|
+
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, newIndex);
|
|
84
84
|
store.dispatch(newRanges);
|
|
85
|
-
}, [
|
|
85
|
+
}, [numberOfData, windowSize]);
|
|
86
86
|
(0, _react.useEffect)(() => {
|
|
87
87
|
return () => {
|
|
88
88
|
store.removeAllListeners();
|
|
89
89
|
};
|
|
90
90
|
}, []);
|
|
91
|
-
return store;
|
|
91
|
+
return [store, onIndexChange];
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
;
|