@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Page","props","
|
|
1
|
+
{"version":3,"names":["React","memo","useMemo","useState","Platform","View","runOnJS","useAnimatedReaction","StyleSheet","PageStateContext","styles","create","fill","width","height","none","display","Page","props","index","children","loading","offscreenPageRerenderLimit","sharedIndex","assumeInitialPageState","activeIndex","value","isActive","isLoaded","pageState","setPageState","content","onActiveStateChange","prevState","onBecomeNeighbor","shouldRerender","becomeNeighbor","nextState","contextValue","style","OS","absoluteFill","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useMemo, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './ViewPagerProps';\nimport PageStateContext from './PageStateContext';\n\nconst styles = StyleSheet.create({\n fill: { width: '100%', height: '100%' },\n none: { display: 'none' },\n});\n\ninterface InternalPageState {\n isActive: boolean;\n isLoaded: boolean;\n}\n\nfunction Page(props: PageProps) {\n const {\n index,\n children,\n loading,\n offscreenPageRerenderLimit,\n sharedIndex,\n } = props;\n\n const assumeInitialPageState = (): InternalPageState => {\n const activeIndex = sharedIndex.value;\n\n const isActive = index === activeIndex;\n\n if (loading === 'eager') {\n return { isActive, isLoaded: true };\n }\n\n const isLoaded = index >= activeIndex - offscreenPageRerenderLimit\n && index <= activeIndex + offscreenPageRerenderLimit;\n\n return { isActive, isLoaded };\n };\n\n const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);\n\n const content = pageState.isLoaded ? children : null;\n\n const onActiveStateChange = (isActive: boolean) => {\n setPageState(prevState => ({\n ...prevState,\n isActive,\n isLoaded: isActive || prevState.isLoaded,\n }));\n };\n\n const onBecomeNeighbor = () => {\n setPageState(prevState => ({\n ...prevState,\n isLoaded: true,\n }));\n };\n\n useAnimatedReaction(\n () => {\n const activeIndex = sharedIndex.value;\n\n const isActive = index === activeIndex;\n\n const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit\n && index <= activeIndex + offscreenPageRerenderLimit;\n\n const becomeNeighbor = shouldRerender && !isActive;\n\n return { isActive, becomeNeighbor };\n },\n (nextState, prevState) => {\n if (nextState.isActive !== prevState?.isActive) {\n runOnJS(onActiveStateChange)(nextState.isActive);\n } else if (nextState.becomeNeighbor) {\n runOnJS(onBecomeNeighbor)();\n }\n },\n [index],\n );\n\n const contextValue = useMemo(() => ({\n isActive: pageState.isActive,\n }), [pageState.isActive]);\n\n const style = Platform.OS === 'web'\n ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)\n : styles.fill;\n\n return (\n <View\n collapsable={false}\n style={style}\n >\n <PageStateContext.Provider value={contextValue}>\n {content}\n </PageStateContext.Provider>\n </View>\n );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n return false;\n }\n\n return prevProps.index !== nextProps.index;\n});\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
const initialPageState = {
|
|
3
|
+
isActive: false
|
|
4
|
+
};
|
|
5
|
+
const PageStateContext = /*#__PURE__*/createContext(initialPageState);
|
|
6
|
+
export const useViewPagerPageState = () => {
|
|
7
|
+
return useContext(PageStateContext);
|
|
8
|
+
};
|
|
9
|
+
export default PageStateContext;
|
|
10
|
+
//# sourceMappingURL=PageStateContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","initialPageState","isActive","PageStateContext","useViewPagerPageState"],"sources":["PageStateContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface PageState {\n isActive: boolean;\n}\n\nconst initialPageState: Readonly<PageState> = { isActive: false };\n\nconst PageStateContext = createContext<PageState>(initialPageState);\n\nexport const useViewPagerPageState = () => {\n return useContext(PageStateContext);\n};\n\nexport default PageStateContext;\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAMA,MAAMC,gBAAqC,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAA9C;AAEA,MAAMC,gBAAgB,gBAAGJ,aAAa,CAAYE,gBAAZ,CAAtC;AAEA,OAAO,MAAMG,qBAAqB,GAAG,MAAM;EACvC,OAAOJ,UAAU,CAACG,gBAAD,CAAjB;AACH,CAFM;AAIP,eAAeA,gBAAf"}
|
|
@@ -1,58 +1,105 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useRef } from 'react';
|
|
1
|
+
import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
2
2
|
import RNViewPager from 'react-native-pager-view';
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
|
|
4
|
+
import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
|
|
5
|
+
const ViewPager = /*#__PURE__*/forwardRef(function ViewPager(props, ref) {
|
|
5
6
|
const {
|
|
6
7
|
children,
|
|
7
|
-
|
|
8
|
-
index,
|
|
8
|
+
initialPage = defaultInitialPage,
|
|
9
9
|
keyboardDismissMode = 'on-drag',
|
|
10
10
|
loading = defaultLoading,
|
|
11
|
+
offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
|
|
11
12
|
onChange,
|
|
12
13
|
pageComponent = defaultPageComponent,
|
|
13
|
-
enableNeighborPageRerender = defaultEnableNeighborPageRerender,
|
|
14
14
|
pageForceRerenderKey,
|
|
15
15
|
scrollEnabled = true,
|
|
16
|
-
style
|
|
16
|
+
style,
|
|
17
|
+
UNSTABLE_sharedPage
|
|
17
18
|
} = props;
|
|
18
|
-
const
|
|
19
|
+
const fallbackSharedPage = useSharedValue(initialPage);
|
|
20
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
21
|
+
const desiredPageRef = useRef(NaN);
|
|
19
22
|
const pagerRef = useRef(null);
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
pageComponent,
|
|
25
|
-
pageForceRerenderKey,
|
|
26
|
-
enableNeighborPageRerender
|
|
27
|
-
});
|
|
28
|
-
const handlePageSelected = useCallback(e => {
|
|
29
|
-
indexRef.current = e.nativeEvent.position;
|
|
30
|
-
|
|
31
|
-
if (onChange) {
|
|
32
|
-
onChange(indexRef.current);
|
|
23
|
+
const animationFrameRef = useRef(NaN);
|
|
24
|
+
const setPage = useCallback(newPage => {
|
|
25
|
+
if (!Number.isInteger(newPage)) {
|
|
26
|
+
return;
|
|
33
27
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const handleNumber = index !== indexRef.current ? requestAnimationFrame(() => {
|
|
28
|
+
|
|
29
|
+
animationFrameRef.current = requestAnimationFrame(() => {
|
|
37
30
|
var _pagerRef$current;
|
|
38
31
|
|
|
39
|
-
|
|
40
|
-
|
|
32
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
33
|
+
if (sharedPage.value === desiredPageRef.current) {
|
|
34
|
+
// end of state machine. clear desired page.
|
|
35
|
+
desiredPageRef.current = NaN;
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (newPage === desiredPageRef.current) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
desiredPageRef.current = newPage;
|
|
45
|
+
(_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(newPage);
|
|
46
|
+
});
|
|
47
|
+
}, []);
|
|
48
|
+
useEffect(() => {
|
|
41
49
|
return () => {
|
|
42
|
-
if (
|
|
43
|
-
cancelAnimationFrame(
|
|
50
|
+
if (animationFrameRef.current) {
|
|
51
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
44
52
|
}
|
|
45
53
|
};
|
|
46
|
-
}, [
|
|
54
|
+
}, []);
|
|
55
|
+
useAnimatedReaction(() => sharedPage.value, result => {
|
|
56
|
+
runOnJS(setPage)(result);
|
|
57
|
+
}, [setPage]);
|
|
58
|
+
const handlePageSelected = useCallback(e => {
|
|
59
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
60
|
+
// onPageSelected is called from outer controlling mechanism
|
|
61
|
+
// e.g. sharedPage.value is changed, setPage() is called
|
|
62
|
+
// Due to the onPageSelected bug,
|
|
63
|
+
// we don't trust the value from event, (e.nativeEvent.position)
|
|
64
|
+
// other than that trust the value from desiredPageRef.
|
|
65
|
+
const desiredPage = desiredPageRef.current;
|
|
66
|
+
|
|
67
|
+
if (sharedPage.value === desiredPage) {
|
|
68
|
+
// end of state machine. clear desired page.
|
|
69
|
+
desiredPageRef.current = NaN;
|
|
70
|
+
} else {
|
|
71
|
+
sharedPage.value = desiredPage;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(desiredPage);
|
|
75
|
+
} else {
|
|
76
|
+
const trustfulNextPage = e.nativeEvent.position;
|
|
77
|
+
desiredPageRef.current = trustfulNextPage;
|
|
78
|
+
sharedPage.value = trustfulNextPage;
|
|
79
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(trustfulNextPage);
|
|
80
|
+
}
|
|
81
|
+
}, [onChange]);
|
|
82
|
+
useImperativeHandle(ref, () => ({
|
|
83
|
+
setPage
|
|
84
|
+
}), [setPage]);
|
|
85
|
+
const PageComponent = pageComponent;
|
|
47
86
|
return /*#__PURE__*/React.createElement(RNViewPager, {
|
|
48
|
-
|
|
87
|
+
ref: pagerRef,
|
|
88
|
+
initialPage: sharedPage.value,
|
|
49
89
|
keyboardDismissMode: keyboardDismissMode,
|
|
50
90
|
onPageSelected: handlePageSelected,
|
|
51
91
|
pageMargin: 8,
|
|
52
|
-
ref: pagerRef,
|
|
53
92
|
scrollEnabled: scrollEnabled,
|
|
54
93
|
style: style
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
|
|
94
|
+
}, Children.map(children, (child, index) => /*#__PURE__*/React.createElement(PageComponent, {
|
|
95
|
+
key: index,
|
|
96
|
+
children: child,
|
|
97
|
+
index: index,
|
|
98
|
+
loading: loading,
|
|
99
|
+
offscreenPageRerenderLimit: offscreenPageRerenderLimit,
|
|
100
|
+
rerenderKey: pageForceRerenderKey,
|
|
101
|
+
sharedIndex: sharedPage
|
|
102
|
+
})));
|
|
103
|
+
});
|
|
104
|
+
export default ViewPager;
|
|
58
105
|
//# sourceMappingURL=ViewPagerNative.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useRef","RNViewPager","
|
|
1
|
+
{"version":3,"names":["React","Children","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","RNViewPager","runOnJS","useAnimatedReaction","useSharedValue","defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent","ViewPager","props","ref","children","initialPage","keyboardDismissMode","loading","offscreenPageRerenderLimit","onChange","pageComponent","pageForceRerenderKey","scrollEnabled","style","UNSTABLE_sharedPage","fallbackSharedPage","sharedPage","desiredPageRef","NaN","pagerRef","animationFrameRef","setPage","newPage","Number","isInteger","current","requestAnimationFrame","isFinite","value","cancelAnimationFrame","result","handlePageSelected","e","desiredPage","trustfulNextPage","nativeEvent","position","PageComponent","map","child","index"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n const {\n children,\n initialPage = defaultInitialPage,\n keyboardDismissMode = 'on-drag',\n loading = defaultLoading,\n offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,\n onChange,\n pageComponent = defaultPageComponent,\n pageForceRerenderKey,\n scrollEnabled = true,\n style,\n UNSTABLE_sharedPage,\n } = props;\n\n const fallbackSharedPage = useSharedValue<number>(initialPage);\n\n const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n const desiredPageRef = useRef<number>(NaN);\n\n const pagerRef = useRef<RNViewPager | null>(null);\n\n const animationFrameRef = useRef<number>(NaN);\n\n const setPage = useCallback((newPage: number) => {\n if (!Number.isInteger(newPage)) {\n return;\n }\n\n animationFrameRef.current = requestAnimationFrame(() => {\n if (Number.isFinite(desiredPageRef.current)) {\n if (sharedPage.value === desiredPageRef.current) {\n // end of state machine. clear desired page.\n desiredPageRef.current = NaN;\n return;\n }\n\n if (newPage === desiredPageRef.current) {\n return;\n }\n }\n\n desiredPageRef.current = newPage;\n pagerRef.current?.setPage(newPage);\n });\n }, []);\n\n useEffect(() => {\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, []);\n\n useAnimatedReaction(\n () => sharedPage.value,\n (result) => {\n runOnJS(setPage)(result);\n },\n [setPage],\n );\n\n const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n if (Number.isFinite(desiredPageRef.current)) {\n // onPageSelected is called from outer controlling mechanism\n // e.g. sharedPage.value is changed, setPage() is called\n // Due to the onPageSelected bug,\n // we don't trust the value from event, (e.nativeEvent.position)\n // other than that trust the value from desiredPageRef.\n\n const desiredPage = desiredPageRef.current;\n\n if (sharedPage.value === desiredPage) {\n // end of state machine. clear desired page.\n desiredPageRef.current = NaN;\n } else {\n sharedPage.value = desiredPage;\n }\n\n onChange?.(desiredPage);\n } else {\n const trustfulNextPage = e.nativeEvent.position;\n\n desiredPageRef.current = trustfulNextPage;\n\n sharedPage.value = trustfulNextPage;\n\n onChange?.(trustfulNextPage);\n }\n }, [onChange]);\n\n useImperativeHandle(\n ref,\n () => ({ setPage }),\n [setPage],\n );\n\n const PageComponent = pageComponent;\n\n return (\n <RNViewPager\n ref={pagerRef}\n initialPage={sharedPage.value}\n keyboardDismissMode={keyboardDismissMode}\n onPageSelected={handlePageSelected}\n pageMargin={8}\n scrollEnabled={scrollEnabled}\n style={style}\n >\n {Children.map(children, (child, index) => (\n <PageComponent\n key={index}\n children={child}\n index={index}\n loading={loading}\n offscreenPageRerenderLimit={offscreenPageRerenderLimit}\n rerenderKey={pageForceRerenderKey}\n sharedIndex={sharedPage}\n />\n ))}\n </RNViewPager>\n );\n});\n\nexport default ViewPager;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = PropsWithChildren<ViewProps> & {\n index: number;\n loading: ViewPagerProps['loading'];\n offscreenPageRerenderLimit: number;\n sharedIndex: SharedValue<number>;\n rerenderKey?: ViewPagerProps['pageForceRerenderKey'];\n};\n\nexport type PageComponent = ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport interface ViewPagerInstance {\n /**\n * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.\n * @param index\n */\n setPage: (index: number) => void;\n}\n\nexport default interface ViewPagerProps extends ComponentProps<{\n ref?: Ref<ViewPagerInstance>;\n\n /**\n * Collection of ViewPager components.\n */\n children?: ReactNode;\n\n /**\n * Index of initial page that should be selected.\n * @default 0\n */\n initialPage?: number;\n\n /**\n * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n * @default 'lazy'\n */\n loading?: Loading;\n\n /**\n * Mobile only. The number of pages that should be re-rendered to either side of the current page.\n * Changing this value after the component mount has no effect.\n * @default 0\n */\n offscreenPageRerenderLimit?: number;\n\n /**\n * Callback fired when an index is changed.\n */\n onChange?: (newIndex: number) => void,\n\n /**\n * The component used to render the wrapper of the page.\n * @default 'ChildrenMemoizedPage'\n */\n pageComponent?: PageComponent,\n\n /**\n * When this value is changed, page will be rerender.\n */\n pageForceRerenderKey?: any;\n\n /**\n * Mobile only. Should pager view scroll, when scroll enabled.\n * @default true\n */\n scrollEnabled?: boolean;\n\n /**\n * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n * @default 'on-drag'\n */\n keyboardDismissMode?: KeyboardDismissMode;\n\n /**\n * Unstable API.\n */\n UNSTABLE_sharedPage?: SharedValue<number>;\n}> {}\n"],"mappings":""}
|
|
@@ -1,41 +1,46 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { useSharedValue } from 'react-native-reanimated';
|
|
4
|
+
import { StyleSheet } from '@fountain-ui/core';
|
|
5
|
+
import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
|
|
4
6
|
const styles = StyleSheet.create({
|
|
5
7
|
root: {
|
|
6
8
|
// @ts-ignore
|
|
7
9
|
overflow: 'auto',
|
|
8
10
|
position: 'relative'
|
|
9
|
-
},
|
|
10
|
-
none: {
|
|
11
|
-
display: 'none'
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
|
-
|
|
13
|
+
const ViewPager = /*#__PURE__*/forwardRef(function ViewPager(props, ref) {
|
|
15
14
|
const {
|
|
16
15
|
children,
|
|
17
|
-
|
|
18
|
-
enableNeighborPageRerender = defaultEnableNeighborPageRerender,
|
|
19
|
-
index,
|
|
16
|
+
initialPage = defaultInitialPage,
|
|
20
17
|
loading = defaultLoading,
|
|
21
18
|
pageComponent = defaultPageComponent,
|
|
22
19
|
pageForceRerenderKey,
|
|
23
|
-
style
|
|
20
|
+
style,
|
|
21
|
+
UNSTABLE_sharedPage
|
|
24
22
|
} = props;
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
});
|
|
23
|
+
const fallbackSharedPage = useSharedValue(initialPage);
|
|
24
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
25
|
+
const setPage = useCallback(newPage => {
|
|
26
|
+
sharedPage.value = newPage;
|
|
27
|
+
}, [sharedPage]);
|
|
28
|
+
useImperativeHandle(ref, () => ({
|
|
29
|
+
setPage
|
|
30
|
+
}), [setPage]);
|
|
31
|
+
const PageComponent = pageComponent;
|
|
33
32
|
return /*#__PURE__*/React.createElement(View, {
|
|
34
33
|
style: [styles.root, style]
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
}, Children.map(children, (child, index) => /*#__PURE__*/React.createElement(PageComponent, {
|
|
35
|
+
key: index,
|
|
36
|
+
children: child,
|
|
37
|
+
index: index,
|
|
38
|
+
loading: loading,
|
|
39
|
+
offscreenPageRerenderLimit: 0 // All offscreen pages will not be re-rendered
|
|
40
|
+
,
|
|
41
|
+
rerenderKey: pageForceRerenderKey,
|
|
42
|
+
sharedIndex: sharedPage
|
|
38
43
|
})));
|
|
39
|
-
}
|
|
40
|
-
;
|
|
44
|
+
});
|
|
45
|
+
export default ViewPager;
|
|
41
46
|
//# sourceMappingURL=ViewPagerWeb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","Children","forwardRef","useCallback","useImperativeHandle","View","useSharedValue","StyleSheet","defaultInitialPage","defaultLoading","defaultPageComponent","styles","create","root","overflow","position","ViewPager","props","ref","children","initialPage","loading","pageComponent","pageForceRerenderKey","style","UNSTABLE_sharedPage","fallbackSharedPage","sharedPage","setPage","newPage","value","PageComponent","map","child","index"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';\nimport { View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\n\nconst styles = StyleSheet.create({\n root: {\n // @ts-ignore\n overflow: 'auto',\n position: 'relative',\n },\n});\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n const {\n children,\n initialPage = defaultInitialPage,\n loading = defaultLoading,\n pageComponent = defaultPageComponent,\n pageForceRerenderKey,\n style,\n UNSTABLE_sharedPage,\n } = props;\n\n const fallbackSharedPage = useSharedValue<number>(initialPage);\n\n const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n const setPage = useCallback((newPage: number) => {\n sharedPage.value = newPage;\n }, [sharedPage]);\n\n useImperativeHandle(\n ref,\n () => ({ setPage }),\n [setPage],\n );\n\n const PageComponent = pageComponent;\n\n return (\n <View style={[styles.root, style]}>\n {Children.map(children, (child, index) => (\n <PageComponent\n key={index}\n children={child}\n index={index}\n loading={loading}\n offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered\n rerenderKey={pageForceRerenderKey}\n sharedIndex={sharedPage}\n />\n ))}\n </View>\n );\n});\n\nexport default ViewPager;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,UAA1B,EAAsCC,WAAtC,EAAmDC,mBAAnD,QAA8E,OAA9E;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,cAAT,QAA+B,yBAA/B;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAGA,SAASC,kBAAT,EAA6BC,cAA7B,EAA6CC,oBAA7C,QAAyE,SAAzE;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR;AADuB,CAAlB,CAAf;AAQA,MAAMC,SAAS,gBAAGd,UAAU,CAAoC,SAASc,SAAT,CAAmBC,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGZ,kBAFZ;IAGFa,OAAO,GAAGZ,cAHR;IAIFa,aAAa,GAAGZ,oBAJd;IAKFa,oBALE;IAMFC,KANE;IAOFC;EAPE,IAQFR,KARJ;EAUA,MAAMS,kBAAkB,GAAGpB,cAAc,CAASc,WAAT,CAAzC;EAEA,MAAMO,UAAU,GAAGF,mBAAmB,IAAIC,kBAA1C;EAEA,MAAME,OAAO,GAAGzB,WAAW,CAAE0B,OAAD,IAAqB;IAC7CF,UAAU,CAACG,KAAX,GAAmBD,OAAnB;EACH,CAF0B,EAExB,CAACF,UAAD,CAFwB,CAA3B;EAIAvB,mBAAmB,CACfc,GADe,EAEf,OAAO;IAAEU;EAAF,CAAP,CAFe,EAGf,CAACA,OAAD,CAHe,CAAnB;EAMA,MAAMG,aAAa,GAAGT,aAAtB;EAEA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACX,MAAM,CAACE,IAAR,EAAcW,KAAd;EAAb,GACKvB,QAAQ,CAAC+B,GAAT,CAAab,QAAb,EAAuB,CAACc,KAAD,EAAQC,KAAR,kBACpB,oBAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,OAAO,EAAEb,OAJb;IAKI,0BAA0B,EAAE,CALhC,CAKmC;IALnC;IAMI,WAAW,EAAEE,oBANjB;IAOI,WAAW,EAAEI;EAPjB,EADH,CADL,CADJ;AAeH,CA1C2B,CAA5B;AA4CA,eAAeX,SAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps } from './ViewPagerProps'
|
|
1
|
+
{"version":3,"names":["default","useViewPagerPageState"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';\nexport { useViewPagerPageState } from './PageStateContext';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB;AAEA,SAASC,qBAAT,QAAsC,oBAAtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.native.ts"],"sourcesContent":["export { default } from './ViewPagerNative';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB"}
|
|
1
|
+
{"version":3,"names":["default","useViewPagerPageState"],"sources":["index.native.ts"],"sourcesContent":["export { default } from './ViewPagerNative';\nexport { useViewPagerPageState } from './PageStateContext';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB;AACA,SAASC,qBAAT,QAAsC,oBAAtC"}
|
|
@@ -1,36 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import ChildrenMemoizedPage from './ChildrenMemoizedPage';
|
|
3
|
-
export const
|
|
4
|
-
export const defaultEnableNeighborPageRerender = false;
|
|
2
|
+
export const defaultInitialPage = 0;
|
|
5
3
|
export const defaultLoading = 'lazy';
|
|
4
|
+
export const defaultOffscreenPageRerenderLimit = 0;
|
|
6
5
|
export const defaultPageComponent = ChildrenMemoizedPage;
|
|
7
|
-
export const usePageRenderer = _ref => {
|
|
8
|
-
let {
|
|
9
|
-
enableVisibleHint,
|
|
10
|
-
index: currentIndex,
|
|
11
|
-
loading,
|
|
12
|
-
pageComponent: PageComponent,
|
|
13
|
-
pageForceRerenderKey,
|
|
14
|
-
enableNeighborPageRerender
|
|
15
|
-
} = _ref;
|
|
16
|
-
const pagesStateRef = React.useRef([]);
|
|
17
|
-
pagesStateRef.current[currentIndex] = { ...pagesStateRef.current[currentIndex],
|
|
18
|
-
visited: true
|
|
19
|
-
};
|
|
20
|
-
return children => React.Children.map(children, (child, index) => {
|
|
21
|
-
var _pagesStateRef$curren;
|
|
22
|
-
|
|
23
|
-
const visited = ((_pagesStateRef$curren = pagesStateRef.current[index]) === null || _pagesStateRef$curren === void 0 ? void 0 : _pagesStateRef$curren.visited) ?? false;
|
|
24
|
-
const content = loading === 'eager' || visited ? child : null;
|
|
25
|
-
const isVisible = enableVisibleHint ? index === currentIndex : false;
|
|
26
|
-
const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
|
|
27
|
-
return /*#__PURE__*/React.createElement(PageComponent, {
|
|
28
|
-
key: index,
|
|
29
|
-
children: content,
|
|
30
|
-
isNeighbor: enableNeighborPageRerender && isNeighborIndex,
|
|
31
|
-
isVisible: isVisible,
|
|
32
|
-
rerenderKey: pageForceRerenderKey
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
6
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["ChildrenMemoizedPage","defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent"],"sources":["utils.tsx"],"sourcesContent":["import { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport const defaultInitialPage: number = 0;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultOffscreenPageRerenderLimit: number = 0;\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n"],"mappings":"AACA,OAAOA,oBAAP,MAAiC,wBAAjC;AAEA,OAAO,MAAMC,kBAA0B,GAAG,CAAnC;AAEP,OAAO,MAAMC,cAAuB,GAAG,MAAhC;AAEP,OAAO,MAAMC,iCAAyC,GAAG,CAAlD;AAEP,OAAO,MAAMC,oBAAmC,GAAGJ,oBAA5C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["Viewability.ts"],"sourcesContent":["export default interface Viewability {\n visible: boolean;\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React, { useRef } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import useViewabilityTracker from './useViewabilityTracker';
|
|
6
|
+
export default function ViewabilityTrackerView(props) {
|
|
7
|
+
const {
|
|
8
|
+
enabled = true,
|
|
9
|
+
measurementIntervalMillis = 1000,
|
|
10
|
+
onViewabilityChange,
|
|
11
|
+
visiblePercentThreshold = 50,
|
|
12
|
+
...otherProps
|
|
13
|
+
} = props;
|
|
14
|
+
const viewRef = useRef(null);
|
|
15
|
+
useViewabilityTracker({
|
|
16
|
+
enabled,
|
|
17
|
+
measurementIntervalMillis,
|
|
18
|
+
onViewabilityChange,
|
|
19
|
+
viewRef,
|
|
20
|
+
visiblePercentThreshold
|
|
21
|
+
});
|
|
22
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, otherProps, {
|
|
23
|
+
ref: viewRef,
|
|
24
|
+
collapsable: false
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
;
|
|
28
|
+
//# sourceMappingURL=ViewabilityTrackerView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useRef","View","useViewabilityTracker","ViewabilityTrackerView","props","enabled","measurementIntervalMillis","onViewabilityChange","visiblePercentThreshold","otherProps","viewRef"],"sources":["ViewabilityTrackerView.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { View } from 'react-native';\nimport useViewabilityTracker from './useViewabilityTracker';\nimport type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';\n\n\nexport default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps) {\n const {\n enabled = true,\n measurementIntervalMillis = 1000,\n onViewabilityChange,\n visiblePercentThreshold = 50,\n ...otherProps\n } = props;\n\n const viewRef = useRef<View>(null);\n\n useViewabilityTracker({\n enabled,\n measurementIntervalMillis,\n onViewabilityChange,\n viewRef,\n visiblePercentThreshold,\n });\n\n return (\n <View\n {...otherProps}\n ref={viewRef}\n collapsable={false}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AAIA,eAAe,SAASC,sBAAT,CAAgCC,KAAhC,EAAoE;EAC/E,MAAM;IACFC,OAAO,GAAG,IADR;IAEFC,yBAAyB,GAAG,IAF1B;IAGFC,mBAHE;IAIFC,uBAAuB,GAAG,EAJxB;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,OAAO,GAAGV,MAAM,CAAO,IAAP,CAAtB;EAEAE,qBAAqB,CAAC;IAClBG,OADkB;IAElBC,yBAFkB;IAGlBC,mBAHkB;IAIlBG,OAJkB;IAKlBF;EALkB,CAAD,CAArB;EAQA,oBACI,oBAAC,IAAD,eACQC,UADR;IAEI,GAAG,EAAEC,OAFT;IAGI,WAAW,EAAE;EAHjB,GADJ;AAOH;AAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["ViewabilityTrackerViewProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '@fountain-ui/core';\nimport type Viewability from './Viewability';\n\nexport default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {\n /**\n * @default true\n */\n enabled?: boolean;\n\n /**\n * @default 1000\n */\n measurementIntervalMillis?: number;\n\n /**\n *\n */\n onViewabilityChange?: (viewability: Viewability) => void;\n\n /**\n * @default 50\n */\n visiblePercentThreshold?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewabilityTrackerView';\nexport type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,0BAAxB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const computeRectSize = rect => (rect.bottom - rect.top) * (rect.right - rect.left);
|
|
2
|
+
|
|
3
|
+
const normalizePagePosition = value => value != null && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
|
|
4
|
+
|
|
5
|
+
const normalizeViewSize = size => Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
|
|
6
|
+
|
|
7
|
+
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
8
|
+
|
|
9
|
+
export default function measureViewability(_ref) {
|
|
10
|
+
let {
|
|
11
|
+
view,
|
|
12
|
+
windowWidth,
|
|
13
|
+
windowHeight,
|
|
14
|
+
onViewabilityDetailMeasured
|
|
15
|
+
} = _ref;
|
|
16
|
+
view.measure((x, y, width, height, pageX, pageY) => {
|
|
17
|
+
const safePageX = normalizePagePosition(pageX);
|
|
18
|
+
const safePageY = normalizePagePosition(pageY);
|
|
19
|
+
const visibleRect = {
|
|
20
|
+
top: clamp(safePageY, 0, windowHeight),
|
|
21
|
+
bottom: clamp(safePageY + height, 0, windowHeight),
|
|
22
|
+
left: clamp(safePageX, 0, windowWidth),
|
|
23
|
+
right: clamp(safePageX + width, 0, windowWidth)
|
|
24
|
+
};
|
|
25
|
+
const visibleRectSize = computeRectSize(visibleRect);
|
|
26
|
+
const viewSize = normalizeViewSize(width * height);
|
|
27
|
+
const visiblePercent = Math.round(visibleRectSize / viewSize * 100);
|
|
28
|
+
onViewabilityDetailMeasured === null || onViewabilityDetailMeasured === void 0 ? void 0 : onViewabilityDetailMeasured({
|
|
29
|
+
visiblePercent
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
;
|
|
34
|
+
//# sourceMappingURL=measureViewability.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","clamp","min","max","Math","measureViewability","view","windowWidth","windowHeight","onViewabilityDetailMeasured","measure","x","y","width","height","pageX","pageY","safePageX","safePageY","visibleRect","visibleRectSize","viewSize","visiblePercent","round"],"sources":["measureViewability.ts"],"sourcesContent":["import type { View } from 'react-native';\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\nconst clamp = (value: number, min: number, max: number): number =>\n Math.min(Math.max(value, min), max);\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":"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;;AAGA,MAAMG,KAAK,GAAG,CAACN,KAAD,EAAgBO,GAAhB,EAA6BC,GAA7B,KACVC,IAAI,CAACF,GAAL,CAASE,IAAI,CAACD,GAAL,CAASR,KAAT,EAAgBO,GAAhB,CAAT,EAA+BC,GAA/B,CADJ;;AAGA,eAAe,SAASE,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,GAAGvB,qBAAqB,CAACqB,KAAD,CAAvC;IACA,MAAMG,SAAS,GAAGxB,qBAAqB,CAACsB,KAAD,CAAvC;IAEA,MAAMG,WAAiB,GAAG;MACtB5B,GAAG,EAAEU,KAAK,CAACiB,SAAD,EAAY,CAAZ,EAAeV,YAAf,CADY;MAEtBlB,MAAM,EAAEW,KAAK,CAACiB,SAAS,GAAGJ,MAAb,EAAqB,CAArB,EAAwBN,YAAxB,CAFS;MAGtBf,IAAI,EAAEQ,KAAK,CAACgB,SAAD,EAAY,CAAZ,EAAeV,WAAf,CAHW;MAItBf,KAAK,EAAES,KAAK,CAACgB,SAAS,GAAGJ,KAAb,EAAoB,CAApB,EAAuBN,WAAvB;IAJU,CAA1B;IAOA,MAAMa,eAAe,GAAGhC,eAAe,CAAC+B,WAAD,CAAvC;IACA,MAAME,QAAQ,GAAGtB,iBAAiB,CAACc,KAAK,GAAGC,MAAT,CAAlC;IACA,MAAMQ,cAAc,GAAGlB,IAAI,CAACmB,KAAL,CAAWH,eAAe,GAAGC,QAAlB,GAA6B,GAAxC,CAAvB;IAEAZ,2BAA2B,SAA3B,IAAAA,2BAA2B,WAA3B,YAAAA,2BAA2B,CAAG;MAAEa;IAAF,CAAH,CAA3B;EACH,CAhBD;AAiBH;AAAA"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { useValidWindowDimensions } from '@fountain-ui/core';
|
|
3
|
+
import { useDeferredExecutor } from '../hooks';
|
|
4
|
+
import measureViewability from './measureViewability';
|
|
5
|
+
const initialViewability = {
|
|
6
|
+
visible: false
|
|
7
|
+
};
|
|
8
|
+
export default function useViewabilityTracker(config) {
|
|
9
|
+
const {
|
|
10
|
+
enabled,
|
|
11
|
+
measurementIntervalMillis,
|
|
12
|
+
onViewabilityChange,
|
|
13
|
+
viewRef,
|
|
14
|
+
visiblePercentThreshold
|
|
15
|
+
} = config;
|
|
16
|
+
const viewabilityRef = useRef(initialViewability);
|
|
17
|
+
const executor = useDeferredExecutor();
|
|
18
|
+
const window = useValidWindowDimensions();
|
|
19
|
+
|
|
20
|
+
const maybeMeasureRecursive = () => {
|
|
21
|
+
if (!enabled) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const mapViewabilityDetailToViewability = detail => {
|
|
26
|
+
return {
|
|
27
|
+
visible: detail.visiblePercent >= visiblePercentThreshold
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const isViewabilityEquals = (a, b) => {
|
|
32
|
+
return a.visible === b.visible;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const dispatchViewabilityChanged = viewability => {
|
|
36
|
+
executor.execute(() => onViewabilityChange === null || onViewabilityChange === void 0 ? void 0 : onViewabilityChange(viewability));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const onViewabilityDetailMeasured = detail => {
|
|
40
|
+
const nextViewability = mapViewabilityDetailToViewability(detail);
|
|
41
|
+
|
|
42
|
+
if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {
|
|
43
|
+
viewabilityRef.current = nextViewability;
|
|
44
|
+
dispatchViewabilityChanged(nextViewability);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
maybeMeasureRecursive();
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const maybeMeasure = () => {
|
|
51
|
+
if (viewRef.current) {
|
|
52
|
+
measureViewability({
|
|
53
|
+
view: viewRef.current,
|
|
54
|
+
windowWidth: window.width,
|
|
55
|
+
windowHeight: window.height,
|
|
56
|
+
onViewabilityDetailMeasured
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
executor.execute(maybeMeasure, measurementIntervalMillis);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (enabled) {
|
|
66
|
+
maybeMeasureRecursive();
|
|
67
|
+
} else {
|
|
68
|
+
executor.cancel();
|
|
69
|
+
}
|
|
70
|
+
}, [enabled]);
|
|
71
|
+
}
|
|
72
|
+
;
|
|
73
|
+
//# sourceMappingURL=useViewabilityTracker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useValidWindowDimensions","useDeferredExecutor","measureViewability","initialViewability","visible","useViewabilityTracker","config","enabled","measurementIntervalMillis","onViewabilityChange","viewRef","visiblePercentThreshold","viewabilityRef","executor","window","maybeMeasureRecursive","mapViewabilityDetailToViewability","detail","visiblePercent","isViewabilityEquals","a","b","dispatchViewabilityChanged","viewability","execute","onViewabilityDetailMeasured","nextViewability","current","maybeMeasure","view","windowWidth","width","windowHeight","height","cancel"],"sources":["useViewabilityTracker.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { View } from 'react-native';\nimport { useValidWindowDimensions } from '@fountain-ui/core';\nimport { useDeferredExecutor } from '../hooks';\nimport type { ViewabilityDetail } from './measureViewability';\nimport measureViewability from './measureViewability';\nimport type Viewability from './Viewability';\n\nexport interface ViewabilityTrackerConfig {\n enabled: boolean;\n measurementIntervalMillis: number;\n onViewabilityChange?: (viewability: Viewability) => void;\n viewRef: RefObject<View>;\n visiblePercentThreshold: number;\n}\n\nconst initialViewability: Readonly<Viewability> = { visible: false };\n\nexport default function useViewabilityTracker(config: ViewabilityTrackerConfig) {\n const {\n enabled,\n measurementIntervalMillis,\n onViewabilityChange,\n viewRef,\n visiblePercentThreshold,\n } = config;\n\n const viewabilityRef = useRef<Viewability>(initialViewability);\n\n const executor = useDeferredExecutor();\n\n const window = useValidWindowDimensions();\n\n const maybeMeasureRecursive = () => {\n if (!enabled) {\n return;\n }\n\n const mapViewabilityDetailToViewability = (detail: ViewabilityDetail): Viewability => {\n return { visible: detail.visiblePercent >= visiblePercentThreshold };\n };\n\n const isViewabilityEquals = (a: Viewability, b: Viewability): boolean => {\n return a.visible === b.visible;\n };\n\n const dispatchViewabilityChanged = (viewability: Viewability) => {\n executor.execute(() => onViewabilityChange?.(viewability));\n };\n\n const onViewabilityDetailMeasured = (detail: ViewabilityDetail) => {\n const nextViewability = mapViewabilityDetailToViewability(detail);\n\n if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {\n viewabilityRef.current = nextViewability;\n\n dispatchViewabilityChanged(nextViewability);\n }\n\n maybeMeasureRecursive();\n };\n\n const maybeMeasure = () => {\n if (viewRef.current) {\n measureViewability({\n view: viewRef.current,\n windowWidth: window.width,\n windowHeight: window.height,\n onViewabilityDetailMeasured,\n });\n }\n };\n\n executor.execute(maybeMeasure, measurementIntervalMillis);\n };\n\n useEffect(() => {\n if (enabled) {\n maybeMeasureRecursive();\n } else {\n executor.cancel();\n }\n }, [enabled]);\n};\n"],"mappings":"AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AAEA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,mBAAT,QAAoC,UAApC;AAEA,OAAOC,kBAAP,MAA+B,sBAA/B;AAWA,MAAMC,kBAAyC,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAlD;AAEA,eAAe,SAASC,qBAAT,CAA+BC,MAA/B,EAAiE;EAC5E,MAAM;IACFC,OADE;IAEFC,yBAFE;IAGFC,mBAHE;IAIFC,OAJE;IAKFC;EALE,IAMFL,MANJ;EAQA,MAAMM,cAAc,GAAGb,MAAM,CAAcI,kBAAd,CAA7B;EAEA,MAAMU,QAAQ,GAAGZ,mBAAmB,EAApC;EAEA,MAAMa,MAAM,GAAGd,wBAAwB,EAAvC;;EAEA,MAAMe,qBAAqB,GAAG,MAAM;IAChC,IAAI,CAACR,OAAL,EAAc;MACV;IACH;;IAED,MAAMS,iCAAiC,GAAIC,MAAD,IAA4C;MAClF,OAAO;QAAEb,OAAO,EAAEa,MAAM,CAACC,cAAP,IAAyBP;MAApC,CAAP;IACH,CAFD;;IAIA,MAAMQ,mBAAmB,GAAG,CAACC,CAAD,EAAiBC,CAAjB,KAA6C;MACrE,OAAOD,CAAC,CAAChB,OAAF,KAAciB,CAAC,CAACjB,OAAvB;IACH,CAFD;;IAIA,MAAMkB,0BAA0B,GAAIC,WAAD,IAA8B;MAC7DV,QAAQ,CAACW,OAAT,CAAiB,MAAMf,mBAAN,aAAMA,mBAAN,uBAAMA,mBAAmB,CAAGc,WAAH,CAA1C;IACH,CAFD;;IAIA,MAAME,2BAA2B,GAAIR,MAAD,IAA+B;MAC/D,MAAMS,eAAe,GAAGV,iCAAiC,CAACC,MAAD,CAAzD;;MAEA,IAAI,CAACE,mBAAmB,CAACP,cAAc,CAACe,OAAhB,EAAyBD,eAAzB,CAAxB,EAAmE;QAC/Dd,cAAc,CAACe,OAAf,GAAyBD,eAAzB;QAEAJ,0BAA0B,CAACI,eAAD,CAA1B;MACH;;MAEDX,qBAAqB;IACxB,CAVD;;IAYA,MAAMa,YAAY,GAAG,MAAM;MACvB,IAAIlB,OAAO,CAACiB,OAAZ,EAAqB;QACjBzB,kBAAkB,CAAC;UACf2B,IAAI,EAAEnB,OAAO,CAACiB,OADC;UAEfG,WAAW,EAAEhB,MAAM,CAACiB,KAFL;UAGfC,YAAY,EAAElB,MAAM,CAACmB,MAHN;UAIfR;QAJe,CAAD,CAAlB;MAMH;IACJ,CATD;;IAWAZ,QAAQ,CAACW,OAAT,CAAiBI,YAAjB,EAA+BpB,yBAA/B;EACH,CAzCD;;EA2CAV,SAAS,CAAC,MAAM;IACZ,IAAIS,OAAJ,EAAa;MACTQ,qBAAqB;IACxB,CAFD,MAEO;MACHF,QAAQ,CAACqB,MAAT;IACH;EACJ,CANQ,EAMN,CAAC3B,OAAD,CANM,CAAT;AAOH;AAAA"}
|