@fountain-ui/lab 2.0.0-beta.10 → 2.0.0-beta.13
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 +142 -0
- package/build/commonjs/Carousel/Carousel.js.map +1 -0
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/animationUtils.js +9 -0
- package/build/commonjs/Carousel/animation/animationUtils.js.map +1 -0
- package/build/commonjs/Carousel/animation/createDefaultItemStyle.js +15 -0
- package/build/commonjs/Carousel/animation/createDefaultItemStyle.js.map +1 -0
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +20 -0
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -0
- package/build/commonjs/Carousel/animation/index.js +40 -0
- package/build/commonjs/Carousel/animation/index.js.map +1 -0
- package/build/commonjs/Carousel/animation/normalItemStyleFactory.js +27 -0
- package/build/commonjs/Carousel/animation/normalItemStyleFactory.js.map +1 -0
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +65 -0
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -0
- package/build/commonjs/Carousel/components/InternalContext.js +29 -0
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -0
- package/build/commonjs/Carousel/components/ItemView.js +66 -0
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -0
- package/build/commonjs/Carousel/components/RootView.js +86 -0
- package/build/commonjs/Carousel/components/RootView.js.map +1 -0
- package/build/commonjs/Carousel/components/ScrollViewGesture.js +81 -0
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -0
- package/build/commonjs/Carousel/components/index.js +40 -0
- package/build/commonjs/Carousel/components/index.js.map +1 -0
- package/build/commonjs/Carousel/hooks/index.js +64 -0
- package/build/commonjs/Carousel/hooks/index.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useAutoplayController.js +58 -0
- package/build/commonjs/Carousel/hooks/useAutoplayController.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +23 -0
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useIndexController.js +70 -0
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js +63 -0
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +95 -0
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -0
- package/build/commonjs/Carousel/hooks/useLoopedData.js +33 -0
- package/build/commonjs/Carousel/hooks/useLoopedData.js.map +1 -0
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +162 -0
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -0
- package/build/commonjs/Carousel/index.js +16 -2
- package/build/commonjs/Carousel/index.js.map +1 -1
- package/build/commonjs/Carousel/types.js +7 -0
- package/build/commonjs/Carousel/types.js.map +1 -0
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +86 -21
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/PageStateContext.js +22 -0
- package/build/commonjs/ViewPager/PageStateContext.js.map +1 -0
- package/build/commonjs/ViewPager/ViewPagerNative.js +82 -34
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +35 -26
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js +8 -0
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/index.native.js +8 -0
- package/build/commonjs/ViewPager/index.native.js.map +1 -1
- package/build/commonjs/ViewPager/utils.js +5 -41
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/Viewability.js +2 -0
- package/build/commonjs/ViewabilityTrackerView/Viewability.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerView.js +45 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerView.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerViewProps.js +2 -0
- package/build/commonjs/ViewabilityTrackerView/ViewabilityTrackerViewProps.js.map +1 -0
- package/build/commonjs/{Carousel/index.native.js → ViewabilityTrackerView/index.js} +3 -3
- package/build/commonjs/ViewabilityTrackerView/index.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +42 -0
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -0
- package/build/commonjs/ViewabilityTrackerView/useViewabilityTracker.js +88 -0
- package/build/commonjs/ViewabilityTrackerView/useViewabilityTracker.js.map +1 -0
- package/build/commonjs/hooks/index.js +16 -0
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useDeferredExecutor.js +45 -0
- package/build/commonjs/hooks/useDeferredExecutor.js.map +1 -0
- package/build/commonjs/hooks/useIsMounted.js +22 -0
- package/build/commonjs/hooks/useIsMounted.js.map +1 -0
- package/build/commonjs/index.js +22 -1
- package/build/commonjs/index.js.map +1 -1
- package/build/module/Carousel/Carousel.js +120 -0
- package/build/module/Carousel/Carousel.js.map +1 -0
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/animationUtils.js +2 -0
- package/build/module/Carousel/animation/animationUtils.js.map +1 -0
- package/build/module/Carousel/animation/createDefaultItemStyle.js +3 -0
- package/build/module/Carousel/animation/createDefaultItemStyle.js.map +1 -0
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js +11 -0
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -0
- package/build/module/Carousel/animation/index.js +5 -0
- package/build/module/Carousel/animation/index.js.map +1 -0
- package/build/module/Carousel/animation/normalItemStyleFactory.js +18 -0
- package/build/module/Carousel/animation/normalItemStyleFactory.js.map +1 -0
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js +55 -0
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -0
- package/build/module/Carousel/components/InternalContext.js +19 -0
- package/build/module/Carousel/components/InternalContext.js.map +1 -0
- package/build/module/Carousel/components/ItemView.js +46 -0
- package/build/module/Carousel/components/ItemView.js.map +1 -0
- package/build/module/Carousel/components/RootView.js +65 -0
- package/build/module/Carousel/components/RootView.js.map +1 -0
- package/build/module/Carousel/components/ScrollViewGesture.js +67 -0
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -0
- package/build/module/Carousel/components/index.js +5 -0
- package/build/module/Carousel/components/index.js.map +1 -0
- package/build/module/Carousel/hooks/index.js +8 -0
- package/build/module/Carousel/hooks/index.js.map +1 -0
- package/build/module/Carousel/hooks/useAutoplayController.js +48 -0
- package/build/module/Carousel/hooks/useAutoplayController.js.map +1 -0
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js +14 -0
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +1 -0
- package/build/module/Carousel/hooks/useIndexController.js +54 -0
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -0
- package/build/module/Carousel/hooks/useItemInterpolation.js +51 -0
- package/build/module/Carousel/hooks/useItemInterpolation.js.map +1 -0
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +87 -0
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -0
- package/build/module/Carousel/hooks/useLoopedData.js +24 -0
- package/build/module/Carousel/hooks/useLoopedData.js.map +1 -0
- package/build/module/Carousel/hooks/usePagingAnimation.js +153 -0
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -0
- package/build/module/Carousel/index.js +2 -1
- package/build/module/Carousel/index.js.map +1 -1
- package/build/module/Carousel/types.js +3 -0
- package/build/module/Carousel/types.js.map +1 -0
- package/build/module/ViewPager/ChildrenMemoizedPage.js +80 -23
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/PageStateContext.js +10 -0
- package/build/module/ViewPager/PageStateContext.js.map +1 -0
- package/build/module/ViewPager/ViewPagerNative.js +81 -34
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +29 -24
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js +1 -0
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/index.native.js +1 -0
- package/build/module/ViewPager/index.native.js.map +1 -1
- package/build/module/ViewPager/utils.js +2 -32
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/ViewabilityTrackerView/Viewability.js +2 -0
- package/build/module/ViewabilityTrackerView/Viewability.js.map +1 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js +28 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js.map +1 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js +2 -0
- package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js.map +1 -0
- package/build/module/ViewabilityTrackerView/index.js +2 -0
- package/build/module/ViewabilityTrackerView/index.js.map +1 -0
- package/build/module/ViewabilityTrackerView/measureViewability.js +34 -0
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -0
- package/build/module/ViewabilityTrackerView/useViewabilityTracker.js +73 -0
- package/build/module/ViewabilityTrackerView/useViewabilityTracker.js.map +1 -0
- package/build/module/hooks/index.js +2 -0
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useDeferredExecutor.js +33 -0
- package/build/module/hooks/useDeferredExecutor.js.map +1 -0
- package/build/module/hooks/useIsMounted.js +13 -0
- package/build/module/hooks/useIsMounted.js.map +1 -0
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/typescript/Carousel/Carousel.d.ts +5 -0
- package/build/typescript/Carousel/CarouselProps.d.ts +33 -48
- package/build/typescript/Carousel/animation/animationUtils.d.ts +1 -0
- package/build/typescript/Carousel/animation/createDefaultItemStyle.d.ts +2 -0
- package/build/typescript/Carousel/animation/createDefaultScrollAnimation.d.ts +2 -0
- package/build/typescript/Carousel/animation/index.d.ts +4 -0
- package/build/typescript/Carousel/animation/normalItemStyleFactory.d.ts +2 -0
- package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts +9 -0
- package/build/typescript/Carousel/components/InternalContext.d.ts +14 -0
- package/build/typescript/Carousel/components/ItemView.d.ts +9 -0
- package/build/typescript/Carousel/components/RootView.d.ts +16 -0
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +12 -0
- package/build/typescript/Carousel/components/index.d.ts +4 -0
- package/build/typescript/Carousel/hooks/index.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useAutoplayController.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useIndexController.d.ts +10 -0
- package/build/typescript/Carousel/hooks/useItemInterpolation.d.ts +2 -0
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +7 -0
- package/build/typescript/Carousel/hooks/useLoopedData.d.ts +1 -0
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +18 -0
- package/build/typescript/Carousel/index.d.ts +3 -1
- package/build/typescript/Carousel/types.d.ts +79 -0
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +2 -1
- package/build/typescript/ViewPager/PageStateContext.d.ts +7 -0
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +4 -1
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +31 -19
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +4 -1
- package/build/typescript/ViewPager/index.d.ts +2 -1
- package/build/typescript/ViewPager/index.native.d.ts +1 -0
- package/build/typescript/ViewPager/utils.d.ts +3 -19
- package/build/typescript/ViewabilityTrackerView/Viewability.d.ts +3 -0
- package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts +2 -0
- package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerViewProps.d.ts +22 -0
- package/build/typescript/ViewabilityTrackerView/index.d.ts +2 -0
- package/build/typescript/ViewabilityTrackerView/measureViewability.d.ts +11 -0
- package/build/typescript/ViewabilityTrackerView/useViewabilityTracker.d.ts +11 -0
- package/build/typescript/hooks/index.d.ts +2 -0
- package/build/typescript/hooks/useDeferredExecutor.d.ts +11 -0
- package/build/typescript/hooks/useIsMounted.d.ts +4 -0
- package/build/typescript/index.d.ts +2 -0
- package/package.json +4 -19
- package/src/Carousel/Carousel.tsx +152 -0
- package/src/Carousel/CarouselProps.ts +35 -53
- package/src/Carousel/animation/animationUtils.ts +1 -0
- package/src/Carousel/animation/createDefaultItemStyle.ts +3 -0
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +13 -0
- package/src/Carousel/animation/index.ts +4 -0
- package/src/Carousel/animation/normalItemStyleFactory.ts +19 -0
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +79 -0
- package/src/Carousel/components/InternalContext.ts +33 -0
- package/src/Carousel/components/ItemView.tsx +66 -0
- package/src/Carousel/components/RootView.tsx +79 -0
- package/src/Carousel/components/ScrollViewGesture.tsx +87 -0
- package/src/Carousel/components/index.ts +4 -0
- package/src/Carousel/hooks/index.ts +7 -0
- package/src/Carousel/hooks/useAutoplayController.ts +57 -0
- package/src/Carousel/hooks/useDimensionChangeReaction.ts +25 -0
- package/src/Carousel/hooks/useIndexController.tsx +76 -0
- package/src/Carousel/hooks/useItemInterpolation.ts +107 -0
- package/src/Carousel/hooks/useItemVisibilityStore.ts +107 -0
- package/src/Carousel/hooks/useLoopedData.ts +26 -0
- package/src/Carousel/hooks/usePagingAnimation.ts +195 -0
- package/src/Carousel/index.ts +4 -2
- package/src/Carousel/types.ts +97 -0
- package/src/ViewPager/ChildrenMemoizedPage.tsx +97 -23
- package/src/ViewPager/PageStateContext.ts +15 -0
- package/src/ViewPager/ViewPagerNative.tsx +101 -39
- package/src/ViewPager/ViewPagerProps.ts +33 -19
- package/src/ViewPager/ViewPagerWeb.tsx +38 -29
- package/src/ViewPager/index.native.ts +1 -0
- package/src/ViewPager/index.ts +2 -1
- package/src/ViewPager/utils.tsx +4 -56
- package/src/ViewabilityTrackerView/Viewability.ts +3 -0
- package/src/ViewabilityTrackerView/ViewabilityTrackerView.tsx +33 -0
- package/src/ViewabilityTrackerView/ViewabilityTrackerViewProps.ts +25 -0
- package/src/ViewabilityTrackerView/index.ts +2 -0
- package/src/ViewabilityTrackerView/measureViewability.ts +56 -0
- package/src/ViewabilityTrackerView/useViewabilityTracker.ts +85 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useDeferredExecutor.ts +46 -0
- package/src/hooks/useIsMounted.ts +19 -0
- package/src/index.ts +3 -0
- package/build/commonjs/Carousel/CarouselNative.js +0 -72
- package/build/commonjs/Carousel/CarouselNative.js.map +0 -1
- package/build/commonjs/Carousel/CarouselWeb.js +0 -237
- package/build/commonjs/Carousel/CarouselWeb.js.map +0 -1
- package/build/commonjs/Carousel/index.native.js.map +0 -1
- package/build/commonjs/Carousel/utils.js +0 -19
- package/build/commonjs/Carousel/utils.js.map +0 -1
- package/build/module/Carousel/CarouselNative.js +0 -54
- package/build/module/Carousel/CarouselNative.js.map +0 -1
- package/build/module/Carousel/CarouselWeb.js +0 -215
- package/build/module/Carousel/CarouselWeb.js.map +0 -1
- package/build/module/Carousel/index.native.js +0 -2
- package/build/module/Carousel/index.native.js.map +0 -1
- package/build/module/Carousel/utils.js +0 -7
- package/build/module/Carousel/utils.js.map +0 -1
- package/build/typescript/Carousel/CarouselNative.d.ts +0 -2
- package/build/typescript/Carousel/CarouselWeb.d.ts +0 -4
- package/build/typescript/Carousel/index.native.d.ts +0 -1
- package/build/typescript/Carousel/utils.d.ts +0 -6
- package/src/Carousel/CarouselNative.tsx +0 -67
- package/src/Carousel/CarouselWeb.tsx +0 -222
- package/src/Carousel/index.native.ts +0 -1
- package/src/Carousel/utils.ts +0 -11
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","useDeferredExecutor","useAutoplayController","config","enabled","intervalMillis","startPagingAnimation","paused","executor","play","current","execute","direction","isOriginatedFromGesture","pause","cancel","resume"],"sources":["useAutoplayController.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { AutoplayController, StartPagingAnimation } from '../types';\nimport { useDeferredExecutor } from '../../hooks';\n\nexport interface AutoplayConfig {\n enabled: boolean;\n intervalMillis: number;\n startPagingAnimation: StartPagingAnimation;\n}\n\nexport default function useAutoplayController(config: AutoplayConfig): AutoplayController {\n const {\n enabled,\n intervalMillis,\n startPagingAnimation,\n } = config;\n\n const paused = useRef<boolean>(false);\n\n const executor = useDeferredExecutor();\n\n const play = useCallback(() => {\n if (paused.current) {\n return;\n }\n\n executor.execute(() => {\n startPagingAnimation(\n 'directional',\n { direction: 'next', isOriginatedFromGesture: false },\n );\n play();\n }, intervalMillis);\n }, [intervalMillis, startPagingAnimation]);\n\n const pause = useCallback(() => {\n executor.cancel();\n paused.current = true;\n }, []);\n\n const resume = useCallback(() => {\n paused.current = false;\n if (enabled) {\n play();\n }\n }, [play, enabled]);\n\n useEffect(() => {\n if (enabled) {\n resume();\n } else {\n pause();\n }\n }, [enabled]);\n\n return { pause, resume };\n};\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,OAA/C;AAEA,SAASC,mBAAT,QAAoC,aAApC;AAQA,eAAe,SAASC,qBAAT,CAA+BC,MAA/B,EAA2E;EACtF,MAAM;IACFC,OADE;IAEFC,cAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAMI,MAAM,GAAGP,MAAM,CAAU,KAAV,CAArB;EAEA,MAAMQ,QAAQ,GAAGP,mBAAmB,EAApC;EAEA,MAAMQ,IAAI,GAAGX,WAAW,CAAC,MAAM;IAC3B,IAAIS,MAAM,CAACG,OAAX,EAAoB;MAChB;IACH;;IAEDF,QAAQ,CAACG,OAAT,CAAiB,MAAM;MACnBL,oBAAoB,CAChB,aADgB,EAEhB;QAAEM,SAAS,EAAE,MAAb;QAAqBC,uBAAuB,EAAE;MAA9C,CAFgB,CAApB;MAIAJ,IAAI;IACP,CAND,EAMGJ,cANH;EAOH,CAZuB,EAYrB,CAACA,cAAD,EAAiBC,oBAAjB,CAZqB,CAAxB;EAcA,MAAMQ,KAAK,GAAGhB,WAAW,CAAC,MAAM;IAC5BU,QAAQ,CAACO,MAAT;IACAR,MAAM,CAACG,OAAP,GAAiB,IAAjB;EACH,CAHwB,EAGtB,EAHsB,CAAzB;EAKA,MAAMM,MAAM,GAAGlB,WAAW,CAAC,MAAM;IAC7BS,MAAM,CAACG,OAAP,GAAiB,KAAjB;;IACA,IAAIN,OAAJ,EAAa;MACTK,IAAI;IACP;EACJ,CALyB,EAKvB,CAACA,IAAD,EAAOL,OAAP,CALuB,CAA1B;EAOAL,SAAS,CAAC,MAAM;IACZ,IAAIK,OAAJ,EAAa;MACTY,MAAM;IACT,CAFD,MAEO;MACHF,KAAK;IACR;EACJ,CANQ,EAMN,CAACV,OAAD,CANM,CAAT;EAQA,OAAO;IAAEU,KAAF;IAASE;EAAT,CAAP;AACH;AAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
export default function useDimensionChangeReaction(params) {
|
|
3
|
+
const {
|
|
4
|
+
controlledTx,
|
|
5
|
+
currentIndex,
|
|
6
|
+
itemWidth
|
|
7
|
+
} = params;
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const newTx = -currentIndex * itemWidth;
|
|
10
|
+
controlledTx.setValue(newTx);
|
|
11
|
+
}, [controlledTx, currentIndex, itemWidth]);
|
|
12
|
+
}
|
|
13
|
+
;
|
|
14
|
+
//# sourceMappingURL=useDimensionChangeReaction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n controlledTx: Animated.AnimatedValue;\n currentIndex: number;\n itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n const {\n controlledTx,\n currentIndex,\n itemWidth,\n } = params;\n\n useEffect(() => {\n const newTx = -currentIndex * itemWidth;\n controlledTx.setValue(newTx);\n }, [\n controlledTx,\n currentIndex,\n itemWidth,\n ]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AASA,eAAe,SAASC,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMAF,SAAS,CAAC,MAAM;IACZ,MAAMM,KAAK,GAAG,CAACF,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACI,QAAb,CAAsBD,KAAtB;EACH,CAHQ,EAGN,CACCH,YADD,EAECC,YAFD,EAGCC,SAHD,CAHM,CAAT;AAQH;AAAA"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { Animated } from 'react-native';
|
|
3
|
+
|
|
4
|
+
const normalizeIndex = (maybeIndex, numberOfData) => Math.abs(Math.floor(maybeIndex)) % numberOfData;
|
|
5
|
+
|
|
6
|
+
export default function useIndexController(params) {
|
|
7
|
+
const {
|
|
8
|
+
controlledTx,
|
|
9
|
+
initialIndex,
|
|
10
|
+
itemWidth,
|
|
11
|
+
numberOfOriginalData,
|
|
12
|
+
onIndexChange
|
|
13
|
+
} = params;
|
|
14
|
+
const indexRef = useRef(initialIndex);
|
|
15
|
+
const [index, setIndex] = useState(indexRef.current);
|
|
16
|
+
const maybeIndex = useMemo(() => {
|
|
17
|
+
const negative = new Animated.Value(-1);
|
|
18
|
+
const reversedTx = Animated.multiply(controlledTx, negative);
|
|
19
|
+
const normalized = Animated.divide(reversedTx, itemWidth);
|
|
20
|
+
return Animated.modulo(normalized, numberOfOriginalData);
|
|
21
|
+
}, [controlledTx, itemWidth, numberOfOriginalData]);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
const subscriptionId = maybeIndex.addListener(observedValue => {
|
|
24
|
+
const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
|
|
25
|
+
|
|
26
|
+
if (indexRef.current !== newIndex) {
|
|
27
|
+
indexRef.current = newIndex;
|
|
28
|
+
setIndex(newIndex);
|
|
29
|
+
onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newIndex);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
return () => {
|
|
33
|
+
maybeIndex.removeListener(subscriptionId);
|
|
34
|
+
};
|
|
35
|
+
}, [maybeIndex, numberOfOriginalData, onIndexChange]);
|
|
36
|
+
const getCurrentIndex = useCallback(() => indexRef.current, []);
|
|
37
|
+
return {
|
|
38
|
+
currentIndex: index,
|
|
39
|
+
getCurrentIndex,
|
|
40
|
+
lastIndex: numberOfOriginalData - 1,
|
|
41
|
+
monitorElement: /*#__PURE__*/React.createElement(Animated.View, {
|
|
42
|
+
collapsable: false,
|
|
43
|
+
style: [{
|
|
44
|
+
zIndex: maybeIndex
|
|
45
|
+
}, {
|
|
46
|
+
width: 1,
|
|
47
|
+
height: 1,
|
|
48
|
+
position: 'absolute'
|
|
49
|
+
}]
|
|
50
|
+
})
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
;
|
|
54
|
+
//# sourceMappingURL=useIndexController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","Animated","normalizeIndex","maybeIndex","numberOfData","Math","abs","floor","useIndexController","params","controlledTx","initialIndex","itemWidth","numberOfOriginalData","onIndexChange","indexRef","index","setIndex","current","negative","Value","reversedTx","multiply","normalized","divide","modulo","subscriptionId","addListener","observedValue","newIndex","value","removeListener","getCurrentIndex","currentIndex","lastIndex","monitorElement","zIndex","width","height","position"],"sources":["useIndexController.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport type { IndexController } from '../types';\n\nexport interface UseIndexControllerParameters {\n controlledTx: Animated.AnimatedValue;\n initialIndex: number;\n itemWidth: number;\n numberOfOriginalData: number;\n onIndexChange?: (newIndex: number) => void;\n}\n\nconst normalizeIndex = (maybeIndex: number, numberOfData: number): number =>\n Math.abs(Math.floor(maybeIndex)) % numberOfData;\n\nexport default function useIndexController(params: UseIndexControllerParameters): IndexController {\n const {\n controlledTx,\n initialIndex,\n itemWidth,\n numberOfOriginalData,\n onIndexChange,\n } = params;\n\n const indexRef = useRef<number>(initialIndex);\n const [index, setIndex] = useState<number>(indexRef.current);\n\n const maybeIndex = useMemo(() => {\n const negative = new Animated.Value(-1);\n const reversedTx = Animated.multiply(controlledTx, negative);\n const normalized = Animated.divide(reversedTx, itemWidth);\n return Animated.modulo(normalized, numberOfOriginalData);\n }, [\n controlledTx,\n itemWidth,\n numberOfOriginalData,\n ]);\n\n useEffect(() => {\n const subscriptionId = maybeIndex.addListener((observedValue) => {\n const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);\n\n if (indexRef.current !== newIndex) {\n indexRef.current = newIndex;\n setIndex(newIndex);\n\n onIndexChange?.(newIndex);\n }\n });\n\n return () => {\n maybeIndex.removeListener(subscriptionId);\n };\n }, [\n maybeIndex,\n numberOfOriginalData,\n onIndexChange,\n ]);\n\n const getCurrentIndex = useCallback(() => indexRef.current, []);\n\n return {\n currentIndex: index,\n getCurrentIndex,\n lastIndex: numberOfOriginalData - 1,\n monitorElement: (\n <Animated.View\n collapsable={false}\n style={[\n { zIndex: maybeIndex },\n { width: 1, height: 1, position: 'absolute' },\n ]}\n />\n ),\n };\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,EAAyDC,QAAzD,QAAyE,OAAzE;AACA,SAASC,QAAT,QAAyB,cAAzB;;AAWA,MAAMC,cAAc,GAAG,CAACC,UAAD,EAAqBC,YAArB,KACnBC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,KAAL,CAAWJ,UAAX,CAAT,IAAmCC,YADvC;;AAGA,eAAe,SAASI,kBAAT,CAA4BC,MAA5B,EAAmF;EAC9F,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC,SAHE;IAIFC,oBAJE;IAKFC;EALE,IAMFL,MANJ;EAQA,MAAMM,QAAQ,GAAGhB,MAAM,CAASY,YAAT,CAAvB;EACA,MAAM,CAACK,KAAD,EAAQC,QAAR,IAAoBjB,QAAQ,CAASe,QAAQ,CAACG,OAAlB,CAAlC;EAEA,MAAMf,UAAU,GAAGL,OAAO,CAAC,MAAM;IAC7B,MAAMqB,QAAQ,GAAG,IAAIlB,QAAQ,CAACmB,KAAb,CAAmB,CAAC,CAApB,CAAjB;IACA,MAAMC,UAAU,GAAGpB,QAAQ,CAACqB,QAAT,CAAkBZ,YAAlB,EAAgCS,QAAhC,CAAnB;IACA,MAAMI,UAAU,GAAGtB,QAAQ,CAACuB,MAAT,CAAgBH,UAAhB,EAA4BT,SAA5B,CAAnB;IACA,OAAOX,QAAQ,CAACwB,MAAT,CAAgBF,UAAhB,EAA4BV,oBAA5B,CAAP;EACH,CALyB,EAKvB,CACCH,YADD,EAECE,SAFD,EAGCC,oBAHD,CALuB,CAA1B;EAWAhB,SAAS,CAAC,MAAM;IACZ,MAAM6B,cAAc,GAAGvB,UAAU,CAACwB,WAAX,CAAwBC,aAAD,IAAmB;MAC7D,MAAMC,QAAQ,GAAG3B,cAAc,CAAC0B,aAAa,CAACE,KAAf,EAAsBjB,oBAAtB,CAA/B;;MAEA,IAAIE,QAAQ,CAACG,OAAT,KAAqBW,QAAzB,EAAmC;QAC/Bd,QAAQ,CAACG,OAAT,GAAmBW,QAAnB;QACAZ,QAAQ,CAACY,QAAD,CAAR;QAEAf,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAGe,QAAH,CAAb;MACH;IACJ,CATsB,CAAvB;IAWA,OAAO,MAAM;MACT1B,UAAU,CAAC4B,cAAX,CAA0BL,cAA1B;IACH,CAFD;EAGH,CAfQ,EAeN,CACCvB,UADD,EAECU,oBAFD,EAGCC,aAHD,CAfM,CAAT;EAqBA,MAAMkB,eAAe,GAAGpC,WAAW,CAAC,MAAMmB,QAAQ,CAACG,OAAhB,EAAyB,EAAzB,CAAnC;EAEA,OAAO;IACHe,YAAY,EAAEjB,KADX;IAEHgB,eAFG;IAGHE,SAAS,EAAErB,oBAAoB,GAAG,CAH/B;IAIHsB,cAAc,eACV,oBAAC,QAAD,CAAU,IAAV;MACI,WAAW,EAAE,KADjB;MAEI,KAAK,EAAE,CACH;QAAEC,MAAM,EAAEjC;MAAV,CADG,EAEH;QAAEkC,KAAK,EAAE,CAAT;QAAYC,MAAM,EAAE,CAApB;QAAuBC,QAAQ,EAAE;MAAjC,CAFG;IAFX;EALD,CAAP;AAcH;AAAA"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useContext, useMemo } from 'react';
|
|
2
|
+
import { Animated } from 'react-native';
|
|
3
|
+
import { InternalContext } from '../components';
|
|
4
|
+
const OVERSCROLL_FRICTION_FACTOR = 4;
|
|
5
|
+
export default function useItemInterpolation(index) {
|
|
6
|
+
const {
|
|
7
|
+
itemWidth,
|
|
8
|
+
data,
|
|
9
|
+
globalInterpolation,
|
|
10
|
+
loop
|
|
11
|
+
} = useContext(InternalContext);
|
|
12
|
+
const numberOfData = data.length;
|
|
13
|
+
const interpolationConfigOnLoop = useMemo(() => {
|
|
14
|
+
const lastIndex = numberOfData - 1;
|
|
15
|
+
const maxWidth = Math.abs(itemWidth * numberOfData);
|
|
16
|
+
const halfOfItemWidth = 0.5 * itemWidth;
|
|
17
|
+
const positiveCount = Math.round(lastIndex / 2);
|
|
18
|
+
const startPosition = index > positiveCount ? (index - numberOfData) * itemWidth : itemWidth * index;
|
|
19
|
+
const max = positiveCount * itemWidth;
|
|
20
|
+
const min = -((lastIndex - positiveCount) * itemWidth);
|
|
21
|
+
const inputRange = [-maxWidth, min - halfOfItemWidth - startPosition - Number.MIN_VALUE, min - halfOfItemWidth - startPosition, 0, max + halfOfItemWidth - startPosition, max + halfOfItemWidth - startPosition + Number.MIN_VALUE, maxWidth];
|
|
22
|
+
const outputRange = [startPosition, max + halfOfItemWidth - Number.MIN_VALUE, min - halfOfItemWidth, startPosition, max + halfOfItemWidth, min - halfOfItemWidth + Number.MIN_VALUE, startPosition];
|
|
23
|
+
return {
|
|
24
|
+
inputRange,
|
|
25
|
+
outputRange,
|
|
26
|
+
extrapolate: 'clamp'
|
|
27
|
+
};
|
|
28
|
+
}, [index, itemWidth, numberOfData]);
|
|
29
|
+
const interpolationConfigOnNoLoop = useMemo(() => {
|
|
30
|
+
const lastIndex = numberOfData - 1;
|
|
31
|
+
const maxWidth = itemWidth * lastIndex;
|
|
32
|
+
const startPosition = itemWidth * index;
|
|
33
|
+
const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;
|
|
34
|
+
const inputRange = [-(maxWidth + itemWidth), // overscroll
|
|
35
|
+
-maxWidth, 0, itemWidth // overscroll
|
|
36
|
+
];
|
|
37
|
+
const outputRange = [-maxWidth + startPosition - friction, -maxWidth + startPosition, startPosition, startPosition + friction];
|
|
38
|
+
return {
|
|
39
|
+
inputRange,
|
|
40
|
+
outputRange,
|
|
41
|
+
extrapolate: 'clamp'
|
|
42
|
+
};
|
|
43
|
+
}, [index, itemWidth, numberOfData]);
|
|
44
|
+
return useMemo(() => {
|
|
45
|
+
const interpolationConfig = loop ? interpolationConfigOnLoop : interpolationConfigOnNoLoop;
|
|
46
|
+
const offsetX = globalInterpolation.interpolate(interpolationConfig);
|
|
47
|
+
return Animated.divide(offsetX, itemWidth);
|
|
48
|
+
}, [globalInterpolation, interpolationConfigOnLoop, interpolationConfigOnNoLoop, itemWidth, loop]);
|
|
49
|
+
}
|
|
50
|
+
;
|
|
51
|
+
//# sourceMappingURL=useItemInterpolation.js.map
|
|
@@ -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","offsetX","interpolate","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\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 offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(offsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,87 @@
|
|
|
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
|
+
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
class SimpleItemVisibilityStore {
|
|
6
|
+
constructor(initialValue) {
|
|
7
|
+
_defineProperty(this, "store", void 0);
|
|
8
|
+
|
|
9
|
+
_defineProperty(this, "listeners", []);
|
|
10
|
+
|
|
11
|
+
this.store = initialValue;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
subscribe(listener) {
|
|
15
|
+
this.listeners.push(listener);
|
|
16
|
+
listener(this.store);
|
|
17
|
+
return () => {
|
|
18
|
+
const index = this.listeners.indexOf(listener);
|
|
19
|
+
this.listeners.splice(index, 1);
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
dispatch(ranges) {
|
|
24
|
+
this.store = ranges;
|
|
25
|
+
|
|
26
|
+
for (const id in this.listeners) {
|
|
27
|
+
const listener = this.listeners[id];
|
|
28
|
+
listener === null || listener === void 0 ? void 0 : listener(ranges);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
removeAllListeners() {
|
|
33
|
+
this.listeners.splice(0, this.listeners.length);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function normalize(windowSize, numberOfData) {
|
|
39
|
+
if (windowSize <= 0) {
|
|
40
|
+
return numberOfData;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (windowSize > 0 && windowSize % 2 === 0) {
|
|
44
|
+
return windowSize + 1;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return windowSize;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function mod(value, modulo) {
|
|
51
|
+
return (value % modulo + modulo) % modulo;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function makeVisibleIndexRanges(numberOfData, windowSize, index) {
|
|
55
|
+
const ws = normalize(windowSize, numberOfData);
|
|
56
|
+
const firstIndex = 0;
|
|
57
|
+
const lastIndex = numberOfData - 1;
|
|
58
|
+
const halfNumberOfAdjacent = Math.floor(ws / 2);
|
|
59
|
+
const leftSide = index - halfNumberOfAdjacent;
|
|
60
|
+
const rightSide = index + halfNumberOfAdjacent;
|
|
61
|
+
const leftRanges = leftSide >= 0 ? [[leftSide, index]] : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];
|
|
62
|
+
const rightRanges = rightSide < numberOfData ? [[index, rightSide]] : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]]; // @ts-ignore
|
|
63
|
+
|
|
64
|
+
return [...leftRanges, ...rightRanges];
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export default function useItemVisibilityStore(params) {
|
|
68
|
+
const {
|
|
69
|
+
currentIndex,
|
|
70
|
+
numberOfData,
|
|
71
|
+
windowSize
|
|
72
|
+
} = params;
|
|
73
|
+
const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));
|
|
74
|
+
const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);
|
|
77
|
+
store.dispatch(newRanges);
|
|
78
|
+
}, [currentIndex, numberOfData, windowSize]);
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
return () => {
|
|
81
|
+
store.removeAllListeners();
|
|
82
|
+
};
|
|
83
|
+
}, []);
|
|
84
|
+
return store;
|
|
85
|
+
}
|
|
86
|
+
;
|
|
87
|
+
//# sourceMappingURL=useItemVisibilityStore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","mod","value","modulo","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","rightRanges","useItemVisibilityStore","params","currentIndex","initialRange","current","newRanges"],"sources":["useItemVisibilityStore.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ItemVisibilityStore, VisibleIndexRanges } from '../types';\n\nexport interface Parameters {\n currentIndex: number;\n numberOfData: number;\n windowSize: number;\n}\n\nclass SimpleItemVisibilityStore implements ItemVisibilityStore {\n\n private store: VisibleIndexRanges;\n\n constructor(initialValue: VisibleIndexRanges) {\n this.store = initialValue;\n }\n\n private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];\n\n subscribe(listener: (ranges: VisibleIndexRanges) => void) {\n this.listeners.push(listener);\n\n listener(this.store);\n\n return () => {\n const index = this.listeners.indexOf(listener);\n this.listeners.splice(index, 1);\n };\n }\n\n dispatch(ranges: VisibleIndexRanges): void {\n this.store = ranges;\n for (const id in this.listeners) {\n const listener = this.listeners[id];\n listener?.(ranges);\n }\n }\n\n removeAllListeners(): void {\n this.listeners.splice(0, this.listeners.length);\n }\n\n}\n\nfunction normalize(windowSize: number, numberOfData: number): number {\n if (windowSize <= 0) {\n return numberOfData;\n }\n if (windowSize > 0 && windowSize % 2 === 0) {\n return windowSize + 1;\n }\n return windowSize;\n}\n\nfunction mod(value: number, modulo: number): number {\n return ((value % modulo) + modulo) % modulo;\n}\n\nfunction makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {\n const ws = normalize(windowSize, numberOfData);\n\n const firstIndex = 0;\n const lastIndex = numberOfData - 1;\n const halfNumberOfAdjacent = Math.floor(ws / 2);\n\n const leftSide = index - halfNumberOfAdjacent;\n const rightSide = index + halfNumberOfAdjacent;\n\n const leftRanges = leftSide >= 0\n ? [[leftSide, index]]\n : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];\n\n const rightRanges = rightSide < numberOfData\n ? [[index, rightSide]]\n : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];\n\n // @ts-ignore\n return [\n ...leftRanges,\n ...rightRanges,\n ];\n}\n\nexport default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {\n const {\n currentIndex,\n numberOfData,\n windowSize,\n } = params;\n\n const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));\n const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;\n\n useEffect(() => {\n const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);\n\n store.dispatch(newRanges);\n }, [currentIndex, numberOfData, windowSize]);\n\n useEffect(() => {\n return () => {\n store.removeAllListeners();\n };\n }, []);\n\n return store;\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
export default function useLoopedData(originalData, loop) {
|
|
3
|
+
return useMemo(() => {
|
|
4
|
+
if (!loop) {
|
|
5
|
+
return originalData;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const numberOfData = originalData.length;
|
|
9
|
+
|
|
10
|
+
if (numberOfData === 1) {
|
|
11
|
+
const [first] = originalData;
|
|
12
|
+
return [first, first, first];
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (numberOfData === 2) {
|
|
16
|
+
const [first, second] = originalData;
|
|
17
|
+
return [first, second, first, second];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return originalData;
|
|
21
|
+
}, [originalData, loop]);
|
|
22
|
+
}
|
|
23
|
+
;
|
|
24
|
+
//# sourceMappingURL=useLoopedData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","useLoopedData","originalData","loop","numberOfData","length","first","second"],"sources":["useLoopedData.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport default function useLoopedData<ItemT>(\n originalData: ReadonlyArray<ItemT>,\n loop: boolean,\n): ReadonlyArray<ItemT> {\n return useMemo(() => {\n if (!loop) {\n return originalData;\n }\n\n const numberOfData = originalData.length;\n\n if (numberOfData === 1) {\n const [first] = originalData;\n return [first, first, first];\n }\n\n if (numberOfData === 2) {\n const [first, second] = originalData;\n return [first, second, first, second];\n }\n\n return originalData;\n }, [originalData, loop]);\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,eAAe,SAASC,aAAT,CACXC,YADW,EAEXC,IAFW,EAGS;EACpB,OAAOH,OAAO,CAAC,MAAM;IACjB,IAAI,CAACG,IAAL,EAAW;MACP,OAAOD,YAAP;IACH;;IAED,MAAME,YAAY,GAAGF,YAAY,CAACG,MAAlC;;IAEA,IAAID,YAAY,KAAK,CAArB,EAAwB;MACpB,MAAM,CAACE,KAAD,IAAUJ,YAAhB;MACA,OAAO,CAACI,KAAD,EAAQA,KAAR,EAAeA,KAAf,CAAP;IACH;;IAED,IAAIF,YAAY,KAAK,CAArB,EAAwB;MACpB,MAAM,CAACE,KAAD,EAAQC,MAAR,IAAkBL,YAAxB;MACA,OAAO,CAACI,KAAD,EAAQC,MAAR,EAAgBD,KAAhB,EAAuBC,MAAvB,CAAP;IACH;;IAED,OAAOL,YAAP;EACH,CAlBa,EAkBX,CAACA,YAAD,EAAeC,IAAf,CAlBW,CAAd;AAmBH;AAAA"}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import { Animated, Platform } from 'react-native';
|
|
3
|
+
|
|
4
|
+
function directionToValue(itemWidth) {
|
|
5
|
+
return function (direction) {
|
|
6
|
+
switch (direction) {
|
|
7
|
+
case 'next':
|
|
8
|
+
return -itemWidth;
|
|
9
|
+
|
|
10
|
+
case 'prev':
|
|
11
|
+
return itemWidth;
|
|
12
|
+
|
|
13
|
+
case 'stay':
|
|
14
|
+
return 0;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default function usePagingAnimation(params) {
|
|
20
|
+
const {
|
|
21
|
+
controlledTx,
|
|
22
|
+
createScrollAnimation,
|
|
23
|
+
getCurrentIndex,
|
|
24
|
+
itemWidth,
|
|
25
|
+
lastIndex,
|
|
26
|
+
loop,
|
|
27
|
+
numberOfData,
|
|
28
|
+
offsetTx
|
|
29
|
+
} = params;
|
|
30
|
+
const animationRef = useRef(null);
|
|
31
|
+
const toValueRef = useRef(0);
|
|
32
|
+
const globalInterpolation = useMemo(() => Animated.add(controlledTx, offsetTx), [controlledTx, offsetTx]);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
const subscriptionId = controlledTx.addListener(value => {
|
|
35
|
+
const currentTx = value.value; // Prevent infinite loop
|
|
36
|
+
|
|
37
|
+
if (currentTx !== 0) {
|
|
38
|
+
const maxWidth = numberOfData * itemWidth;
|
|
39
|
+
|
|
40
|
+
if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {
|
|
41
|
+
// reset position
|
|
42
|
+
controlledTx.setValue(0);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
return () => {
|
|
47
|
+
controlledTx.removeListener(subscriptionId);
|
|
48
|
+
};
|
|
49
|
+
}, [numberOfData, itemWidth]);
|
|
50
|
+
const finalizeAnimation = useCallback(() => {
|
|
51
|
+
const stopUnfinishedSnapAnimation = () => {
|
|
52
|
+
if (animationRef.current) {
|
|
53
|
+
var _animationRef$current;
|
|
54
|
+
|
|
55
|
+
(_animationRef$current = animationRef.current) === null || _animationRef$current === void 0 ? void 0 : _animationRef$current.stop();
|
|
56
|
+
animationRef.current = null;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const resetBoundary = () => {
|
|
61
|
+
controlledTx.setOffset(toValueRef.current);
|
|
62
|
+
controlledTx.flattenOffset(); // FIXME: react-native-web bug maybe?
|
|
63
|
+
// `AnimatedValue.flattenOffset()` does not trigger any event listener.
|
|
64
|
+
// Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).
|
|
65
|
+
// So setting same value with `value.setValue(value._value)` will trigger event listener.
|
|
66
|
+
|
|
67
|
+
if (Platform.OS === 'web') {
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
controlledTx.setValue(controlledTx._value);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
offsetTx.setValue(0);
|
|
73
|
+
toValueRef.current = 0;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
stopUnfinishedSnapAnimation();
|
|
77
|
+
resetBoundary();
|
|
78
|
+
}, [controlledTx]);
|
|
79
|
+
const startPagingAnimation = useCallback((type, config) => {
|
|
80
|
+
const configWithDefaults = {
|
|
81
|
+
animated: true,
|
|
82
|
+
...config
|
|
83
|
+
};
|
|
84
|
+
const currentIndex = getCurrentIndex();
|
|
85
|
+
const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
|
|
86
|
+
|
|
87
|
+
const getValueByDirectionalPagingOnLoopDisabled = _config => {
|
|
88
|
+
const {
|
|
89
|
+
direction,
|
|
90
|
+
isOriginatedFromGesture
|
|
91
|
+
} = _config;
|
|
92
|
+
|
|
93
|
+
if (currentIndex === 0 && direction === 'prev') {
|
|
94
|
+
return isOriginatedFromGesture ? getValueByDirectionOnAllAdjacentItemsVisible('stay') : -lastIndex * itemWidth; // last position
|
|
95
|
+
} else if (currentIndex === lastIndex && direction === 'next') {
|
|
96
|
+
return isOriginatedFromGesture ? getValueByDirectionOnAllAdjacentItemsVisible('stay') : lastIndex * itemWidth; // first position
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
return getValueByDirectionOnAllAdjacentItemsVisible(direction);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const getValueByDirectionalPaging = _config => {
|
|
103
|
+
const _configWithDefaults = {
|
|
104
|
+
isOriginatedFromGesture: false,
|
|
105
|
+
..._config
|
|
106
|
+
};
|
|
107
|
+
return loop ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction) : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
const getValueByIndexPaging = _ref => {
|
|
111
|
+
let {
|
|
112
|
+
index
|
|
113
|
+
} = _ref;
|
|
114
|
+
|
|
115
|
+
if (index < 0 || index > lastIndex || index === currentIndex) {
|
|
116
|
+
// no animation if index is invalid or equals to current index
|
|
117
|
+
return 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
const distance = Math.abs(currentIndex - index) * itemWidth;
|
|
121
|
+
const direction = index > currentIndex ? -1 : 1;
|
|
122
|
+
return distance * direction;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
const toValue = type === 'directional' // @ts-ignore
|
|
126
|
+
? getValueByDirectionalPaging(configWithDefaults) // @ts-ignore
|
|
127
|
+
: getValueByIndexPaging(configWithDefaults);
|
|
128
|
+
toValueRef.current = toValue;
|
|
129
|
+
|
|
130
|
+
if (configWithDefaults.animated) {
|
|
131
|
+
const animation = createScrollAnimation(offsetTx, toValue);
|
|
132
|
+
animationRef.current = animation;
|
|
133
|
+
animation.start(_ref2 => {
|
|
134
|
+
let {
|
|
135
|
+
finished
|
|
136
|
+
} = _ref2;
|
|
137
|
+
|
|
138
|
+
if (finished) {
|
|
139
|
+
finalizeAnimation();
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
} else {
|
|
143
|
+
finalizeAnimation();
|
|
144
|
+
}
|
|
145
|
+
}, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop]);
|
|
146
|
+
return {
|
|
147
|
+
globalInterpolation,
|
|
148
|
+
finalizeAnimation,
|
|
149
|
+
startPagingAnimation
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
;
|
|
153
|
+
//# sourceMappingURL=usePagingAnimation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","useRef","Animated","Platform","directionToValue","itemWidth","direction","usePagingAnimation","params","controlledTx","createScrollAnimation","getCurrentIndex","lastIndex","loop","numberOfData","offsetTx","animationRef","toValueRef","globalInterpolation","add","subscriptionId","addListener","value","currentTx","maxWidth","Math","abs","round","setValue","removeListener","finalizeAnimation","stopUnfinishedSnapAnimation","current","stop","resetBoundary","setOffset","flattenOffset","OS","_value","startPagingAnimation","type","config","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","toValue","animation","start","finished"],"sources":["usePagingAnimation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport type {\n CreateScrollAnimation,\n DirectionalPagingAnimationConfig,\n GetCurrentIndex,\n IndexPagingAnimationConfig,\n PagingAnimationConfig,\n PagingAnimationType,\n PagingDirection,\n StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimationParameters {\n controlledTx: Animated.Value;\n createScrollAnimation: CreateScrollAnimation;\n getCurrentIndex: GetCurrentIndex;\n itemWidth: number;\n lastIndex: number;\n loop: boolean;\n numberOfData: number;\n offsetTx: Animated.Value;\n}\n\nexport interface UsePagingAnimation {\n finalizeAnimation: () => void;\n globalInterpolation: Animated.AnimatedInterpolation;\n startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n return function (direction: PagingDirection): number {\n switch (direction) {\n case 'next':\n return -itemWidth;\n case 'prev':\n return itemWidth;\n case 'stay':\n return 0;\n }\n };\n}\n\nexport default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {\n const {\n controlledTx,\n createScrollAnimation,\n getCurrentIndex,\n itemWidth,\n lastIndex,\n loop,\n numberOfData,\n offsetTx,\n } = params;\n\n const animationRef = useRef<Animated.CompositeAnimation | null>(null);\n const toValueRef = useRef<number>(0);\n\n const globalInterpolation = useMemo(\n () => Animated.add(controlledTx, offsetTx),\n [controlledTx, offsetTx],\n );\n\n useEffect(() => {\n const subscriptionId = controlledTx.addListener((value) => {\n const currentTx = value.value;\n\n // Prevent infinite loop\n if (currentTx !== 0) {\n const maxWidth = numberOfData * itemWidth;\n\n if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {\n // reset position\n controlledTx.setValue(0);\n }\n }\n });\n\n return () => {\n controlledTx.removeListener(subscriptionId);\n };\n }, [numberOfData, itemWidth]);\n\n const finalizeAnimation = useCallback(() => {\n const stopUnfinishedSnapAnimation = () => {\n if (animationRef.current) {\n animationRef.current?.stop();\n animationRef.current = null;\n }\n };\n\n const resetBoundary = () => {\n controlledTx.setOffset(toValueRef.current);\n controlledTx.flattenOffset();\n\n // FIXME: react-native-web bug maybe?\n // `AnimatedValue.flattenOffset()` does not trigger any event listener.\n // Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).\n // So setting same value with `value.setValue(value._value)` will trigger event listener.\n if (Platform.OS === 'web') {\n // @ts-ignore\n controlledTx.setValue(controlledTx._value);\n }\n\n offsetTx.setValue(0);\n toValueRef.current = 0;\n };\n\n stopUnfinishedSnapAnimation();\n\n resetBoundary();\n }, [controlledTx]);\n\n const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n const configWithDefaults: PagingAnimationConfig = {\n animated: true,\n ...config,\n };\n\n const currentIndex = getCurrentIndex();\n\n const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n\n const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n const { direction, isOriginatedFromGesture } = _config;\n\n if (currentIndex === 0 && direction === 'prev') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : -lastIndex * itemWidth; // last position\n } else if (currentIndex === lastIndex && direction === 'next') {\n return isOriginatedFromGesture\n ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n : lastIndex * itemWidth; // first position\n }\n return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n };\n\n const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n const _configWithDefaults: DirectionalPagingAnimationConfig = {\n isOriginatedFromGesture: false,\n ..._config,\n };\n\n return loop\n ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n };\n\n const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n if (index < 0 || index > lastIndex || index === currentIndex) {\n // no animation if index is invalid or equals to current index\n return 0;\n }\n\n const distance = Math.abs(currentIndex - index) * itemWidth;\n const direction = index > currentIndex ? -1 : 1;\n\n return distance * direction;\n };\n\n const toValue = type === 'directional'\n // @ts-ignore\n ? getValueByDirectionalPaging(configWithDefaults)\n // @ts-ignore\n : getValueByIndexPaging(configWithDefaults);\n\n toValueRef.current = toValue;\n\n if (configWithDefaults.animated) {\n const animation = createScrollAnimation(offsetTx, toValue);\n animationRef.current = animation;\n animation.start(({ finished }) => {\n if (finished) {\n finalizeAnimation();\n }\n });\n } else {\n finalizeAnimation();\n }\n }, [\n createScrollAnimation,\n getCurrentIndex,\n finalizeAnimation,\n itemWidth,\n lastIndex,\n loop,\n ]);\n\n return {\n globalInterpolation,\n finalizeAnimation,\n startPagingAnimation,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './
|
|
1
|
+
{"version":3,"names":["default","normalItemStyleFactory","parallaxItemStyleFactory"],"sources":["index.ts"],"sourcesContent":["export { default } from './Carousel';\nexport type { default as CarouselProps } from './CarouselProps';\nexport type { CarouselInstance } from './types';\nexport { normalItemStyleFactory, parallaxItemStyleFactory } from './animation';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AAGA,SAASC,sBAAT,EAAiCC,wBAAjC,QAAiE,aAAjE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["directions"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n (): number;\n}\n\nexport interface IndexController {\n currentIndex: number;\n getCurrentIndex: GetCurrentIndex;\n lastIndex: number;\n monitorElement: ReactElement;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n animated?: boolean;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n direction: PagingDirection;\n isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n (): void;\n}\n\nexport interface ItemVisibilityStore {\n dispatch: (ranges: VisibleIndexRanges) => void;\n subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n pause: () => void;\n resume: () => void;\n}\n\nexport interface ScrollToOption {\n index: number;\n animated?: boolean;\n}\n\nexport interface CarouselInstance {\n /**\n * Get current visible item index.\n */\n getCurrentIndex: GetCurrentIndex;\n\n /**\n * Scroll to next visible item.\n */\n next: () => void;\n\n /**\n * Scroll to previous visible item.\n */\n prev: () => void;\n\n /**\n * Scroll to desired indexed item.\n * Invalid index is ignored.\n */\n scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":"AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB"}
|
|
@@ -1,37 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
1
|
+
import React, { memo, useMemo, useState } from 'react';
|
|
2
|
+
import { Platform, View } from 'react-native';
|
|
3
|
+
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
|
|
4
|
+
import { StyleSheet } from '@fountain-ui/core';
|
|
5
|
+
import PageStateContext from './PageStateContext';
|
|
6
|
+
const styles = StyleSheet.create({
|
|
7
|
+
fill: {
|
|
8
|
+
width: '100%',
|
|
9
|
+
height: '100%'
|
|
10
|
+
},
|
|
11
|
+
none: {
|
|
12
|
+
display: 'none'
|
|
13
|
+
}
|
|
14
|
+
});
|
|
5
15
|
|
|
6
|
-
|
|
16
|
+
function Page(props) {
|
|
7
17
|
const {
|
|
8
|
-
|
|
9
|
-
|
|
18
|
+
index,
|
|
19
|
+
children,
|
|
20
|
+
loading,
|
|
21
|
+
offscreenPageRerenderLimit,
|
|
22
|
+
sharedIndex
|
|
10
23
|
} = props;
|
|
11
|
-
return /*#__PURE__*/React.createElement(View, _extends({
|
|
12
|
-
collapsable: false
|
|
13
|
-
}, otherProps));
|
|
14
|
-
};
|
|
15
24
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} // isVisible is an important condition for determining memos on the web.
|
|
20
|
-
// Reference ViewPagerWeb's return.
|
|
25
|
+
const assumeInitialPageState = () => {
|
|
26
|
+
const activeIndex = sharedIndex.value;
|
|
27
|
+
const isActive = index === activeIndex;
|
|
21
28
|
|
|
29
|
+
if (loading === 'eager') {
|
|
30
|
+
return {
|
|
31
|
+
isActive,
|
|
32
|
+
isLoaded: true
|
|
33
|
+
};
|
|
34
|
+
}
|
|
22
35
|
|
|
23
|
-
|
|
24
|
-
return
|
|
25
|
-
|
|
36
|
+
const isLoaded = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
|
|
37
|
+
return {
|
|
38
|
+
isActive,
|
|
39
|
+
isLoaded
|
|
40
|
+
};
|
|
41
|
+
};
|
|
26
42
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
43
|
+
const [pageState, setPageState] = useState(assumeInitialPageState);
|
|
44
|
+
const content = pageState.isLoaded ? children : null;
|
|
45
|
+
|
|
46
|
+
const onActiveStateChange = isActive => {
|
|
47
|
+
setPageState(prevState => ({ ...prevState,
|
|
48
|
+
isActive,
|
|
49
|
+
isLoaded: isActive || prevState.isLoaded
|
|
50
|
+
}));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const onBecomeNeighbor = () => {
|
|
54
|
+
setPageState(prevState => ({ ...prevState,
|
|
55
|
+
isLoaded: true
|
|
56
|
+
}));
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
useAnimatedReaction(() => {
|
|
60
|
+
const activeIndex = sharedIndex.value;
|
|
61
|
+
const isActive = index === activeIndex;
|
|
62
|
+
const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
|
|
63
|
+
const becomeNeighbor = shouldRerender && !isActive;
|
|
64
|
+
return {
|
|
65
|
+
isActive,
|
|
66
|
+
becomeNeighbor
|
|
67
|
+
};
|
|
68
|
+
}, (nextState, prevState) => {
|
|
69
|
+
if (nextState.isActive !== (prevState === null || prevState === void 0 ? void 0 : prevState.isActive)) {
|
|
70
|
+
runOnJS(onActiveStateChange)(nextState.isActive);
|
|
71
|
+
} else if (nextState.becomeNeighbor) {
|
|
72
|
+
runOnJS(onBecomeNeighbor)();
|
|
73
|
+
}
|
|
74
|
+
}, [index]);
|
|
75
|
+
const contextValue = useMemo(() => ({
|
|
76
|
+
isActive: pageState.isActive
|
|
77
|
+
}), [pageState.isActive]);
|
|
78
|
+
const style = Platform.OS === 'web' ? pageState.isActive ? StyleSheet.absoluteFill : styles.none : styles.fill;
|
|
79
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
80
|
+
collapsable: false,
|
|
81
|
+
style: style
|
|
82
|
+
}, /*#__PURE__*/React.createElement(PageStateContext.Provider, {
|
|
83
|
+
value: contextValue
|
|
84
|
+
}, content));
|
|
85
|
+
}
|
|
30
86
|
|
|
87
|
+
export default /*#__PURE__*/memo(Page, (prevProps, nextProps) => {
|
|
31
88
|
if (prevProps.rerenderKey !== nextProps.rerenderKey) {
|
|
32
89
|
return false;
|
|
33
90
|
}
|
|
34
91
|
|
|
35
|
-
return prevProps.
|
|
92
|
+
return prevProps.index !== nextProps.index;
|
|
36
93
|
});
|
|
37
94
|
//# sourceMappingURL=ChildrenMemoizedPage.js.map
|