@fountain-ui/lab 2.0.0-beta.14 → 2.0.0-beta.17
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 +24 -29
- 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/animation/parallaxItemStyleFactory.js +2 -2
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js +4 -4
- 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 +28 -44
- 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 +44 -35
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js +2 -3
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/usePageStore.js +5 -0
- package/build/commonjs/ViewPager/usePageStore.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +6 -6
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/module/Carousel/Carousel.js +23 -30
- 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/animation/parallaxItemStyleFactory.js +2 -2
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +3 -3
- 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 +29 -40
- 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 +44 -35
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js +2 -3
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/usePageStore.js +5 -0
- package/build/module/ViewPager/usePageStore.js.map +1 -1
- package/build/module/ViewabilityTrackerView/measureViewability.js +2 -2
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +2 -2
- 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 +3 -3
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +3 -3
- 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 +10 -2
- package/package.json +3 -3
- package/src/Carousel/Carousel.tsx +19 -31
- package/src/Carousel/CarouselProps.ts +9 -2
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +1 -1
- package/src/Carousel/components/ItemView.tsx +3 -3
- 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 +36 -47
- package/src/Carousel/hooks/useItemVisibilityStore.ts +14 -14
- package/src/Carousel/hooks/usePagingAnimation.ts +104 -64
- package/src/Carousel/tick.ts +6 -0
- package/src/Carousel/types.ts +14 -2
- package/src/ViewPager/ChildrenMemoizedPage.tsx +46 -39
- package/src/ViewPager/ViewPagerNative.tsx +3 -3
- package/src/ViewPager/usePageStore.ts +6 -0
- package/src/ViewabilityTrackerView/measureViewability.ts +1 -3
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","
|
|
1
|
+
{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","measureViewability","view","windowWidth","windowHeight","onViewabilityDetailMeasured","measure","x","y","width","height","pageX","pageY","safePageX","safePageY","visibleRect","clamp","visibleRectSize","viewSize","visiblePercent","Math","round"],"sources":["measureViewability.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport { clamp } from '@fountain-ui/utils';\n\ninterface Rect {\n top: number,\n bottom: number;\n left: number;\n right: number;\n}\n\nexport interface ViewabilityDetail {\n visiblePercent: number;\n}\n\nexport interface MeasureViewabilityParameters {\n view: View;\n windowWidth: number;\n windowHeight: number;\n onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;\n}\n\nconst computeRectSize = (rect: Rect): number =>\n (rect.bottom - rect.top) * (rect.right - rect.left);\n\nconst normalizePagePosition = (value?: number): number =>\n (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;\n\nconst normalizeViewSize = (size: number): number =>\n Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;\n\nexport default function measureViewability({\n view,\n windowWidth,\n windowHeight,\n onViewabilityDetailMeasured,\n}: MeasureViewabilityParameters) {\n view.measure((x, y, width, height, pageX?: number, pageY?: number) => {\n const safePageX = normalizePagePosition(pageX);\n const safePageY = normalizePagePosition(pageY);\n\n const visibleRect: Rect = {\n top: clamp(safePageY, 0, windowHeight),\n bottom: clamp(safePageY + height, 0, windowHeight),\n left: clamp(safePageX, 0, windowWidth),\n right: clamp(safePageX + width, 0, windowWidth),\n };\n\n const visibleRectSize = computeRectSize(visibleRect);\n const viewSize = normalizeViewSize(width * height);\n const visiblePercent = Math.round(visibleRectSize / viewSize * 100);\n\n onViewabilityDetailMeasured?.({ visiblePercent });\n });\n};\n"],"mappings":";;;;;;;AACA;;AAoBA,MAAMA,eAAe,GAAIC,IAAD,IACpB,CAACA,IAAI,CAACC,MAAL,GAAcD,IAAI,CAACE,GAApB,KAA4BF,IAAI,CAACG,KAAL,GAAaH,IAAI,CAACI,IAA9C,CADJ;;AAGA,MAAMC,qBAAqB,GAAIC,KAAD,IACzBA,KAAK,IAAI,IAAT,IAAiBC,MAAM,CAACC,QAAP,CAAgBF,KAAhB,CAAlB,GAA4CA,KAA5C,GAAoDC,MAAM,CAACE,gBAD/D;;AAGA,MAAMC,iBAAiB,GAAIC,IAAD,IACtBJ,MAAM,CAACC,QAAP,CAAgBG,IAAhB,KAAyBA,IAAI,GAAG,CAAhC,GAAoCA,IAApC,GAA2CJ,MAAM,CAACE,gBADtD;;AAGe,SAASG,kBAAT,OAKkB;EAAA,IALU;IACvCC,IADuC;IAEvCC,WAFuC;IAGvCC,YAHuC;IAIvCC;EAJuC,CAKV;EAC7BH,IAAI,CAACI,OAAL,CAAa,CAACC,CAAD,EAAIC,CAAJ,EAAOC,KAAP,EAAcC,MAAd,EAAsBC,KAAtB,EAAsCC,KAAtC,KAAyD;IAClE,MAAMC,SAAS,GAAGnB,qBAAqB,CAACiB,KAAD,CAAvC;IACA,MAAMG,SAAS,GAAGpB,qBAAqB,CAACkB,KAAD,CAAvC;IAEA,MAAMG,WAAiB,GAAG;MACtBxB,GAAG,EAAE,IAAAyB,YAAA,EAAMF,SAAN,EAAiB,CAAjB,EAAoBV,YAApB,CADiB;MAEtBd,MAAM,EAAE,IAAA0B,YAAA,EAAMF,SAAS,GAAGJ,MAAlB,EAA0B,CAA1B,EAA6BN,YAA7B,CAFc;MAGtBX,IAAI,EAAE,IAAAuB,YAAA,EAAMH,SAAN,EAAiB,CAAjB,EAAoBV,WAApB,CAHgB;MAItBX,KAAK,EAAE,IAAAwB,YAAA,EAAMH,SAAS,GAAGJ,KAAlB,EAAyB,CAAzB,EAA4BN,WAA5B;IAJe,CAA1B;IAOA,MAAMc,eAAe,GAAG7B,eAAe,CAAC2B,WAAD,CAAvC;IACA,MAAMG,QAAQ,GAAGnB,iBAAiB,CAACU,KAAK,GAAGC,MAAT,CAAlC;IACA,MAAMS,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAWJ,eAAe,GAAGC,QAAlB,GAA6B,GAAxC,CAAvB;IAEAb,2BAA2B,SAA3B,IAAAA,2BAA2B,WAA3B,YAAAA,2BAA2B,CAAG;MAAEc;IAAF,CAAH,CAA3B;EACH,CAhBD;AAiBH;;AAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
import ViewabilityTrackerView from '../ViewabilityTrackerView';
|
|
4
|
-
import { useAutoplayController,
|
|
4
|
+
import { useAutoplayController, useIndexController, useItemVisibilityStore, useLoopedData, usePagingAnimation } from './hooks';
|
|
5
5
|
import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
|
|
6
6
|
import { InternalContext, RootView, ScrollViewGesture } from './components';
|
|
7
7
|
const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
@@ -24,49 +24,42 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
24
24
|
} = props;
|
|
25
25
|
const data = useLoopedData(originalData, loop);
|
|
26
26
|
const initialTx = itemWidth * initialIndex;
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
getCurrentIndex,
|
|
32
|
-
lastIndex,
|
|
33
|
-
monitorElement
|
|
34
|
-
} = useIndexController({
|
|
35
|
-
controlledTx,
|
|
27
|
+
const offsetX = useRef(new Animated.Value(initialTx)).current;
|
|
28
|
+
const translateX = useRef(new Animated.Value(0)).current;
|
|
29
|
+
const globalInterpolation = Animated.add(offsetX, translateX);
|
|
30
|
+
const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({
|
|
36
31
|
initialIndex,
|
|
37
|
-
itemWidth,
|
|
38
|
-
numberOfOriginalData: originalData.length,
|
|
39
|
-
onIndexChange
|
|
40
|
-
});
|
|
41
|
-
const itemVisibilityStore = useItemVisibilityStore({
|
|
42
|
-
currentIndex,
|
|
43
32
|
numberOfData: data.length,
|
|
44
33
|
windowSize
|
|
45
34
|
});
|
|
35
|
+
const indexController = useIndexController({
|
|
36
|
+
initialIndex,
|
|
37
|
+
itemWidth,
|
|
38
|
+
numberOfData: data.length,
|
|
39
|
+
numberOfOriginalData: originalData.length,
|
|
40
|
+
onIndexChange,
|
|
41
|
+
onPositionChange
|
|
42
|
+
});
|
|
46
43
|
const {
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
getCurrentIndex
|
|
45
|
+
} = indexController;
|
|
46
|
+
const {
|
|
47
|
+
interruptAnimation,
|
|
49
48
|
startPagingAnimation
|
|
50
49
|
} = usePagingAnimation({
|
|
51
|
-
controlledTx,
|
|
52
50
|
createScrollAnimation,
|
|
53
|
-
getCurrentIndex,
|
|
54
51
|
itemWidth,
|
|
55
|
-
|
|
52
|
+
indexController,
|
|
56
53
|
loop,
|
|
57
54
|
numberOfData: data.length,
|
|
58
|
-
|
|
55
|
+
offsetX,
|
|
56
|
+
translateX
|
|
59
57
|
});
|
|
60
58
|
const autoplayController = useAutoplayController({
|
|
61
59
|
enabled: autoplay,
|
|
62
60
|
intervalMillis: autoplayInterval,
|
|
63
61
|
startPagingAnimation
|
|
64
62
|
});
|
|
65
|
-
useDimensionChangeReaction({
|
|
66
|
-
controlledTx,
|
|
67
|
-
currentIndex,
|
|
68
|
-
itemWidth
|
|
69
|
-
});
|
|
70
63
|
useImperativeHandle(ref, () => ({
|
|
71
64
|
getCurrentIndex,
|
|
72
65
|
next: () => startPagingAnimation('directional', {
|
|
@@ -88,7 +81,7 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
88
81
|
}), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
|
|
89
82
|
return /*#__PURE__*/React.createElement(InternalContext.Provider, {
|
|
90
83
|
value: contextValue
|
|
91
|
-
},
|
|
84
|
+
}, /*#__PURE__*/React.createElement(ViewabilityTrackerView, {
|
|
92
85
|
enabled: autoplay && !disableSmartAutoplay,
|
|
93
86
|
measurementIntervalMillis: Math.max(3000, autoplayInterval),
|
|
94
87
|
onViewabilityChange: _ref => {
|
|
@@ -104,8 +97,8 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
|
|
|
104
97
|
}
|
|
105
98
|
}, /*#__PURE__*/React.createElement(ScrollViewGesture, {
|
|
106
99
|
autoplayController: autoplayController,
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
interruptAnimation: interruptAnimation,
|
|
101
|
+
translateX: translateX,
|
|
109
102
|
scrollEnabled: scrollEnabled,
|
|
110
103
|
startPagingAnimation: startPagingAnimation
|
|
111
104
|
}, /*#__PURE__*/React.createElement(RootView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","useRef","Animated","ViewabilityTrackerView","useAutoplayController","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","useRef","Animated","ViewabilityTrackerView","useAutoplayController","useIndexController","useItemVisibilityStore","useLoopedData","usePagingAnimation","createDefaultItemStyle","createDefaultScrollAnimation","InternalContext","RootView","ScrollViewGesture","Carousel","props","ref","autoplay","autoplayInterval","createItemStyle","createScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","initialTx","offsetX","Value","current","translateX","globalInterpolation","add","itemVisibilityStore","onPositionChange","numberOfData","length","indexController","numberOfOriginalData","getCurrentIndex","interruptAnimation","startPagingAnimation","autoplayController","enabled","intervalMillis","next","direction","prev","scrollTo","option","contextValue","Math","max","visible","resume","pause"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo, 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,\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, 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 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":"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"}
|
|
@@ -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":""}
|
|
@@ -2,8 +2,8 @@ import { Animated, Easing } from 'react-native';
|
|
|
2
2
|
export default function createDefaultScrollAnimation(animatedValue, toValue) {
|
|
3
3
|
return Animated.timing(animatedValue, {
|
|
4
4
|
toValue: toValue,
|
|
5
|
-
duration:
|
|
6
|
-
easing: Easing.bezier(0.
|
|
5
|
+
duration: 180,
|
|
6
|
+
easing: Easing.bezier(0.2, 0.2, 0.2, 1),
|
|
7
7
|
useNativeDriver: true
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","Easing","createDefaultScrollAnimation","animatedValue","toValue","timing","duration","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":["Animated","Easing","createDefaultScrollAnimation","animatedValue","toValue","timing","duration","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,SAASA,QAAT,EAAmBC,MAAnB,QAAiC,cAAjC;AAEA,eAAe,SAASC,4BAAT,CACXC,aADW,EAEXC,OAFW,EAGgB;EAC3B,OAAOJ,QAAQ,CAACK,MAAT,CAAgBF,aAAhB,EAA+B;IAClCC,OAAO,EAAEA,OADyB;IAElCE,QAAQ,EAAE,GAFwB;IAGlCC,MAAM,EAAEN,MAAM,CAACO,MAAP,CAAc,GAAd,EAAmB,GAAnB,EAAwB,GAAxB,EAA6B,CAA7B,CAH0B;IAIlCC,eAAe,EAAE;EAJiB,CAA/B,CAAP;AAMH;AAAA"}
|
|
@@ -14,8 +14,8 @@ export default function parallaxItemStyleFactory() {
|
|
|
14
14
|
adjacentItemOpacity,
|
|
15
15
|
adjacentItemScale,
|
|
16
16
|
scrollingOffset
|
|
17
|
-
} = { ...
|
|
18
|
-
...
|
|
17
|
+
} = { ...defaultParallaxAnimationConfig,
|
|
18
|
+
...config
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
const createItemStyle = (itemInterpolation, itemWidth) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["itemInterpolationInputRange","defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","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":["itemInterpolationInputRange","defaultParallaxAnimationConfig","activeItemScale","activeItemOpacity","adjacentItemScale","Math","pow","adjacentItemOpacity","scrollingOffset","parallaxItemStyleFactory","config","createItemStyle","itemInterpolation","itemWidth","translate","interpolate","inputRange","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,SAASA,2BAAT,QAA4C,kBAA5C;AAUA,MAAMC,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;AAQA,eAAe,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,EAAEhB,2BADgC;MAE5CiB,WAAW,EAAE,CACT,CAACJ,SAAD,GAAaL,eADJ,EAET,CAFS,EAGTK,SAAS,GAAGL,eAHH;IAF+B,CAA9B,CAAlB;IASA,MAAMU,MAAM,GAAGN,iBAAiB,CAACG,WAAlB,CAA8B;MACzCC,UAAU,EAAEhB,2BAD6B;MAEzCiB,WAAW,EAAE,CAAC,CAAD,EAAIJ,SAAJ,EAAe,CAAf,CAF4B;MAGzCM,WAAW,EAAE;IAH4B,CAA9B,CAAf;IAMA,MAAMC,KAAK,GAAGR,iBAAiB,CAACG,WAAlB,CAA8B;MACxCC,UAAU,EAAEhB,2BAD4B;MAExCiB,WAAW,EAAE,CACTb,iBADS,EAETF,eAFS,EAGTE,iBAHS,CAF2B;MAOxCe,WAAW,EAAE;IAP2B,CAA9B,CAAd;IAUA,MAAME,OAAO,GAAGT,iBAAiB,CAACG,WAAlB,CAA8B;MAC1CC,UAAU,EAAEhB,2BAD8B;MAE1CiB,WAAW,EAAE,CACTV,mBADS,EAETJ,iBAFS,EAGTI,mBAHS,CAF6B;MAO1CY,WAAW,EAAE;IAP6B,CAA9B,CAAhB;IAUA,OAAO;MACHG,SAAS,EAAE,CACP;QAAEC,UAAU,EAAET;MAAd,CADO,EAEP;QAAEM;MAAF,CAFO,CADR;MAKHF,MALG;MAMHG;IANG,CAAP;EAQH,CA5CD;;EA8CA,OAAOV,eAAP;AACH;AAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
import { StyleSheet } from '@fountain-ui/core';
|
|
4
|
-
import
|
|
4
|
+
import useItemInterpolation from './useItemInterpolation';
|
|
5
5
|
import InternalContext from './InternalContext';
|
|
6
6
|
export default function ItemView(props) {
|
|
7
7
|
const {
|
|
@@ -17,7 +17,7 @@ export default function ItemView(props) {
|
|
|
17
17
|
} = useContext(InternalContext);
|
|
18
18
|
const [visible, setVisible] = useState(false);
|
|
19
19
|
const interpolation = useItemInterpolation(index);
|
|
20
|
-
const itemStyle = useMemo(() => createItemStyle(interpolation, itemWidth), [createItemStyle, interpolation]);
|
|
20
|
+
const itemStyle = useMemo(() => createItemStyle(interpolation, itemWidth), [createItemStyle, interpolation, itemWidth]);
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
return itemVisibilityStore.subscribe(ranges => {
|
|
23
23
|
const nextVisible = ranges.some(_ref => {
|
|
@@ -26,7 +26,7 @@ export default function ItemView(props) {
|
|
|
26
26
|
});
|
|
27
27
|
setVisible(nextVisible);
|
|
28
28
|
});
|
|
29
|
-
}, [itemVisibilityStore]);
|
|
29
|
+
}, [index, itemVisibilityStore]);
|
|
30
30
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
31
31
|
children: visible ? children(interpolation) : null,
|
|
32
32
|
onLayout: onLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","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":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","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,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKFhB,UAAU,CAACO,eAAD,CALd;EAOA,MAAM,CAACU,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMgB,aAAa,GAAGb,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMS,SAAS,GAAGlB,OAAO,CACrB,MAAMW,eAAe,CAACM,aAAD,EAAgBJ,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBM,aAAlB,EAAiCJ,SAAjC,CAFqB,CAAzB;EAKAd,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACK,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBf,KAAK,IAAIc,IAAT,IAAiBd,KAAK,IAAIe,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACZ,KAAD,EAAQK,mBAAR,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAEC,OAAO,GAAGP,QAAQ,CAACS,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEP,QAFd;IAGI,KAAK,EAAE,CACH;MACIe,KAAK,EAAEZ,SADX;MAEIa,MAAM,EAAEd,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCe;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAHX,EADJ;AAeH;AAAA;AAED,MAAMU,MAAM,GAAGzB,UAAU,CAAC2B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
|
|
@@ -5,7 +5,7 @@ const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
|
|
|
5
5
|
const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
|
|
6
6
|
const ACTIVE_OFFSET_ABS_X = 5;
|
|
7
7
|
const activeOffsetX = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
|
|
8
|
-
const endAnimationStates = [GestureHandlerState.CANCELLED, GestureHandlerState.END];
|
|
8
|
+
const endAnimationStates = [GestureHandlerState.CANCELLED, GestureHandlerState.END, GestureHandlerState.FAILED];
|
|
9
9
|
|
|
10
10
|
function shouldScrollToAdjacent(translationX, velocityX) {
|
|
11
11
|
const isSameDirection = translationX * velocityX > 0;
|
|
@@ -17,8 +17,8 @@ export default function ScrollViewGesture(props) {
|
|
|
17
17
|
const {
|
|
18
18
|
autoplayController,
|
|
19
19
|
children,
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
interruptAnimation,
|
|
21
|
+
translateX,
|
|
22
22
|
scrollEnabled,
|
|
23
23
|
startPagingAnimation
|
|
24
24
|
} = props;
|
|
@@ -28,11 +28,11 @@ export default function ScrollViewGesture(props) {
|
|
|
28
28
|
} = autoplayController;
|
|
29
29
|
const handleGestureBegin = useCallback(() => {
|
|
30
30
|
pauseAutoplay();
|
|
31
|
-
|
|
32
|
-
}, [
|
|
31
|
+
interruptAnimation();
|
|
32
|
+
}, [interruptAnimation, pauseAutoplay]);
|
|
33
33
|
const handleGestureEvent = useCallback(Animated.event([{
|
|
34
34
|
nativeEvent: {
|
|
35
|
-
translationX:
|
|
35
|
+
translationX: translateX
|
|
36
36
|
}
|
|
37
37
|
}], {
|
|
38
38
|
useNativeDriver: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","Animated","PanGestureHandler","State","GestureHandlerState","SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","CANCELLED","END","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","
|
|
1
|
+
{"version":3,"names":["React","useCallback","Animated","PanGestureHandler","State","GestureHandlerState","SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","translateX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","handleGestureEvent","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,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,iBAAT,EAA4BC,KAAK,IAAIC,mBAArC,QAAgE,8BAAhE;AAYA,MAAMC,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,aAAuB,GAAG,CAAC,CAACD,mBAAF,EAAuBA,mBAAvB,CAAhC;AAEA,MAAME,kBAAmD,GAAG,CACxDL,mBAAmB,CAACM,SADoC,EAExDN,mBAAmB,CAACO,GAFoC,EAGxDP,mBAAmB,CAACQ,MAHoC,CAA5D;;AAMA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BT,+BAA1B,IACGa,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBT,+BAF9B;EAIA,OAAOU,eAAe,IAAIC,gBAA1B;AACH;;AAED,eAAe,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,kBAHE;IAIFC,UAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;EAEA,MAAMU,kBAAkB,GAAGhC,WAAW,CAAC,MAAM;IACzC6B,aAAa;IAEbL,kBAAkB;EACrB,CAJqC,EAInC,CAACA,kBAAD,EAAqBK,aAArB,CAJmC,CAAtC;EAMA,MAAMI,kBAAkB,GAAGjC,WAAW,CAACC,QAAQ,CAACiC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAErB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEW,eAAe,EAAE;EAAnB,CAFmC,CAAD,EAGnC,EAHmC,CAAtC;EAKA,MAAMC,wBAAwB,GAAGrC,WAAW,CAAEkC,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAErB,YAAF;QAAgBC,SAAhB;QAA2BuB;MAA3B;IAAf,IAAsDJ,KAA5D;;IAEA,IAAIzB,kBAAkB,CAAC8B,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAG3B,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QAAEa,SAAS,EAAEA,SAAb;QAAwBC,uBAAuB,EAAE;MAAjD,CAFgB,CAApB;MAKAV,cAAc;IACjB;EACJ,CAf2C,EAezC,CAACJ,oBAAD,EAAuBI,cAAvB,CAfyC,CAA5C;EAiBA,oBACI,oBAAC,iBAAD;IACI,aAAa,EAAEvB,aADnB;IAEI,QAAQ,EAAEe,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEC,kBALpB;IAMI,oBAAoB,EAAEI;EAN1B,EADJ;AAUH"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useContext, useMemo } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
|
-
import
|
|
3
|
+
import InternalContext from './InternalContext';
|
|
4
4
|
const OVERSCROLL_FRICTION_FACTOR = 4;
|
|
5
5
|
export default function useItemInterpolation(index) {
|
|
6
6
|
const {
|
|
@@ -43,8 +43,8 @@ export default function useItemInterpolation(index) {
|
|
|
43
43
|
}, [index, itemWidth, numberOfData]);
|
|
44
44
|
return useMemo(() => {
|
|
45
45
|
const interpolationConfig = loop ? interpolationConfigOnLoop : interpolationConfigOnNoLoop;
|
|
46
|
-
const
|
|
47
|
-
return Animated.divide(
|
|
46
|
+
const localOffsetX = globalInterpolation.interpolate(interpolationConfig);
|
|
47
|
+
return Animated.divide(localOffsetX, itemWidth);
|
|
48
48
|
}, [globalInterpolation, interpolationConfigOnLoop, interpolationConfigOnNoLoop, itemWidth, loop]);
|
|
49
49
|
}
|
|
50
50
|
;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useContext","useMemo","Animated","InternalContext","OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","numberOfData","length","interpolationConfigOnLoop","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","localOffsetX","interpolate","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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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
export { default as useAutoplayController } from './useAutoplayController';
|
|
2
|
-
export { default as useDimensionChangeReaction } from './useDimensionChangeReaction';
|
|
3
2
|
export { default as useIndexController } from './useIndexController';
|
|
4
|
-
export { default as useItemInterpolation } from './useItemInterpolation';
|
|
5
3
|
export { default as useLoopedData } from './useLoopedData';
|
|
6
4
|
export { default as usePagingAnimation } from './usePagingAnimation';
|
|
7
5
|
export { default as useItemVisibilityStore } from './useItemVisibilityStore';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","useAutoplayController","
|
|
1
|
+
{"version":3,"names":["default","useAutoplayController","useIndexController","useLoopedData","usePagingAnimation","useItemVisibilityStore"],"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,SAASA,OAAO,IAAIC,qBAApB,QAAiD,yBAAjD;AACA,SAASD,OAAO,IAAIE,kBAApB,QAA8C,sBAA9C;AACA,SAASF,OAAO,IAAIG,aAApB,QAAyC,iBAAzC;AACA,SAASH,OAAO,IAAII,kBAApB,QAA8C,sBAA9C;AACA,SAASJ,OAAO,IAAIK,sBAApB,QAAkD,0BAAlD"}
|
|
@@ -1,53 +1,42 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const normalizeIndex = (maybeIndex, numberOfData) => Math.abs(Math.floor(maybeIndex)) % numberOfData;
|
|
5
|
-
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import { useImperativeState } from '@fountain-ui/core';
|
|
3
|
+
import { mod } from '@fountain-ui/utils';
|
|
6
4
|
export default function useIndexController(params) {
|
|
7
5
|
const {
|
|
8
|
-
controlledTx,
|
|
9
6
|
initialIndex,
|
|
10
7
|
itemWidth,
|
|
8
|
+
numberOfData,
|
|
11
9
|
numberOfOriginalData,
|
|
12
|
-
onIndexChange
|
|
10
|
+
onIndexChange,
|
|
11
|
+
onPositionChange
|
|
13
12
|
} = params;
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}, [controlledTx, itemWidth, numberOfOriginalData]);
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
const subscriptionId = maybeIndex.addListener(observedValue => {
|
|
24
|
-
const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
|
|
13
|
+
const currentIndex = useImperativeState(initialIndex);
|
|
14
|
+
const currentPosition = useImperativeState(initialIndex);
|
|
15
|
+
const notifyAnimationState = useCallback(state => {
|
|
16
|
+
if (state === 'finished' || state === 'interrupted') {
|
|
17
|
+
if (currentIndex.hasChanged()) {
|
|
18
|
+
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(currentIndex.get());
|
|
19
|
+
}
|
|
25
20
|
|
|
26
|
-
if (
|
|
27
|
-
|
|
28
|
-
setIndex(newIndex);
|
|
29
|
-
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newIndex);
|
|
21
|
+
if (currentPosition.hasChanged()) {
|
|
22
|
+
onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(currentPosition.get());
|
|
30
23
|
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
}
|
|
25
|
+
}, [onIndexChange, onPositionChange]);
|
|
26
|
+
const notifyOffsetHasChanged = useCallback(offset => {
|
|
27
|
+
const roundedOffset = Math.round(offset / itemWidth) * itemWidth; // To prevent floating point problem, make sure index is integer type.
|
|
28
|
+
|
|
29
|
+
const nextIndex = Math.floor(mod(-roundedOffset / itemWidth, numberOfOriginalData));
|
|
30
|
+
currentIndex.set(nextIndex); // To prevent floating point problem, make sure index is integer type.
|
|
31
|
+
|
|
32
|
+
const nextPosition = Math.floor(mod(-roundedOffset / itemWidth, numberOfData));
|
|
33
|
+
currentPosition.set(nextPosition);
|
|
34
|
+
}, [itemWidth, numberOfData, numberOfOriginalData]);
|
|
37
35
|
return {
|
|
38
|
-
|
|
39
|
-
getCurrentIndex,
|
|
36
|
+
getCurrentIndex: currentIndex.get,
|
|
40
37
|
lastIndex: numberOfOriginalData - 1,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
style: [{
|
|
44
|
-
zIndex: maybeIndex
|
|
45
|
-
}, {
|
|
46
|
-
width: 1,
|
|
47
|
-
height: 1,
|
|
48
|
-
position: 'absolute'
|
|
49
|
-
}]
|
|
50
|
-
})
|
|
38
|
+
notifyAnimationState,
|
|
39
|
+
notifyOffsetHasChanged
|
|
51
40
|
};
|
|
52
41
|
}
|
|
53
42
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useCallback","useImperativeState","mod","useIndexController","params","initialIndex","itemWidth","numberOfData","numberOfOriginalData","onIndexChange","onPositionChange","currentIndex","currentPosition","notifyAnimationState","state","hasChanged","get","notifyOffsetHasChanged","offset","roundedOffset","Math","round","nextIndex","floor","set","nextPosition","getCurrentIndex","lastIndex"],"sources":["useIndexController.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { useImperativeState } from '@fountain-ui/core';\nimport { mod } from '@fountain-ui/utils';\nimport type { AnimationState, IndexController } 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 notifyAnimationState = useCallback((state: AnimationState) => {\n if (state === 'finished' || state === 'interrupted') {\n if (currentIndex.hasChanged()) {\n onIndexChange?.(currentIndex.get());\n }\n\n if (currentPosition.hasChanged()) {\n onPositionChange?.(currentPosition.get());\n }\n }\n }, [\n onIndexChange,\n onPositionChange,\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 currentIndex.set(nextIndex);\n\n // To prevent floating point problem, make sure index is integer type.\n const nextPosition = Math.floor(mod((-roundedOffset / itemWidth), numberOfData));\n currentPosition.set(nextPosition);\n }, [\n itemWidth,\n numberOfData,\n numberOfOriginalData,\n ]);\n\n return {\n getCurrentIndex: currentIndex.get,\n lastIndex: numberOfOriginalData - 1,\n notifyAnimationState,\n notifyOffsetHasChanged,\n };\n};\n"],"mappings":"AAAA,SAASA,WAAT,QAA4B,OAA5B;AACA,SAASC,kBAAT,QAAmC,mBAAnC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAYA,eAAe,SAASC,kBAAT,CAA4BC,MAA5B,EAAmF;EAC9F,MAAM;IACFC,YADE;IAEFC,SAFE;IAGFC,YAHE;IAIFC,oBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,MAPJ;EASA,MAAMO,YAAY,GAAGV,kBAAkB,CAACI,YAAD,CAAvC;EACA,MAAMO,eAAe,GAAGX,kBAAkB,CAACI,YAAD,CAA1C;EAEA,MAAMQ,oBAAoB,GAAGb,WAAW,CAAEc,KAAD,IAA2B;IAChE,IAAIA,KAAK,KAAK,UAAV,IAAwBA,KAAK,KAAK,aAAtC,EAAqD;MACjD,IAAIH,YAAY,CAACI,UAAb,EAAJ,EAA+B;QAC3BN,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGE,YAAY,CAACK,GAAb,EAAH,CAAb;MACH;;MAED,IAAIJ,eAAe,CAACG,UAAhB,EAAJ,EAAkC;QAC9BL,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAGE,eAAe,CAACI,GAAhB,EAAH,CAAhB;MACH;IACJ;EACJ,CAVuC,EAUrC,CACCP,aADD,EAECC,gBAFD,CAVqC,CAAxC;EAeA,MAAMO,sBAAsB,GAAGjB,WAAW,CAAEkB,MAAD,IAAoB;IAC3D,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAWH,MAAM,GAAGZ,SAApB,IAAiCA,SAAvD,CAD2D,CAG3D;;IACA,MAAMgB,SAAS,GAAGF,IAAI,CAACG,KAAL,CAAWrB,GAAG,CAAE,CAACiB,aAAD,GAAiBb,SAAnB,EAA+BE,oBAA/B,CAAd,CAAlB;IACAG,YAAY,CAACa,GAAb,CAAiBF,SAAjB,EAL2D,CAO3D;;IACA,MAAMG,YAAY,GAAGL,IAAI,CAACG,KAAL,CAAWrB,GAAG,CAAE,CAACiB,aAAD,GAAiBb,SAAnB,EAA+BC,YAA/B,CAAd,CAArB;IACAK,eAAe,CAACY,GAAhB,CAAoBC,YAApB;EACH,CAVyC,EAUvC,CACCnB,SADD,EAECC,YAFD,EAGCC,oBAHD,CAVuC,CAA1C;EAgBA,OAAO;IACHkB,eAAe,EAAEf,YAAY,CAACK,GAD3B;IAEHW,SAAS,EAAEnB,oBAAoB,GAAG,CAF/B;IAGHK,oBAHG;IAIHI;EAJG,CAAP;AAMH;AAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
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; }
|
|
2
2
|
|
|
3
|
-
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { mod } from '@fountain-ui/utils';
|
|
4
5
|
|
|
5
6
|
class SimpleItemVisibilityStore {
|
|
6
7
|
constructor(initialValue) {
|
|
@@ -47,10 +48,6 @@ function normalize(windowSize, numberOfData) {
|
|
|
47
48
|
return windowSize;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
function mod(value, modulo) {
|
|
51
|
-
return (value % modulo + modulo) % modulo;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
51
|
function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
55
52
|
const ws = normalize(windowSize, numberOfData);
|
|
56
53
|
const firstIndex = 0;
|
|
@@ -66,22 +63,24 @@ function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
|
66
63
|
|
|
67
64
|
export default function useItemVisibilityStore(params) {
|
|
68
65
|
const {
|
|
69
|
-
|
|
66
|
+
initialIndex,
|
|
70
67
|
numberOfData,
|
|
71
68
|
windowSize
|
|
72
69
|
} = params;
|
|
73
|
-
const [initialRange] = useState(() =>
|
|
70
|
+
const [initialRange] = useState(() => {
|
|
71
|
+
return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
|
|
72
|
+
});
|
|
74
73
|
const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
|
|
75
|
-
|
|
76
|
-
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize,
|
|
74
|
+
const onPositionChange = useCallback(position => {
|
|
75
|
+
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);
|
|
77
76
|
store.dispatch(newRanges);
|
|
78
|
-
}, [
|
|
77
|
+
}, [numberOfData, windowSize]);
|
|
79
78
|
useEffect(() => {
|
|
80
79
|
return () => {
|
|
81
80
|
store.removeAllListeners();
|
|
82
81
|
};
|
|
83
82
|
}, []);
|
|
84
|
-
return store;
|
|
83
|
+
return [store, onPositionChange];
|
|
85
84
|
}
|
|
86
85
|
;
|
|
87
86
|
//# sourceMappingURL=useItemVisibilityStore.js.map
|