@fountain-ui/lab 2.0.0-beta.12 → 2.0.0-beta.15
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 +39 -37
- package/build/commonjs/Carousel/Carousel.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +15 -15
- package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/commonjs/Carousel/components/InternalContext.js.map +1 -1
- package/build/commonjs/Carousel/components/ItemView.js +6 -4
- package/build/commonjs/Carousel/components/ItemView.js.map +1 -1
- package/build/commonjs/Carousel/components/RootView.js +21 -3
- package/build/commonjs/Carousel/components/RootView.js.map +1 -1
- package/build/commonjs/Carousel/components/ScrollViewGesture.js +18 -13
- package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/commonjs/Carousel/{hooks → components}/useItemInterpolation.js +6 -4
- package/build/commonjs/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/commonjs/Carousel/hooks/index.js +0 -16
- package/build/commonjs/Carousel/hooks/index.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useAutoplayController.js +4 -1
- package/build/commonjs/Carousel/hooks/useAutoplayController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useIndexController.js +15 -46
- package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +12 -12
- package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js +121 -69
- package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/commonjs/Carousel/tick.js +16 -0
- package/build/commonjs/Carousel/tick.js.map +1 -0
- package/build/commonjs/Carousel/types.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/InternalContext.js +17 -0
- package/build/commonjs/ViewPager/InternalContext.js.map +1 -0
- package/build/commonjs/ViewPager/ViewPagerNative.js +74 -23
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js +23 -12
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/types.js +6 -0
- package/build/commonjs/ViewPager/types.js.map +1 -0
- package/build/commonjs/ViewPager/usePageStore.js +35 -0
- package/build/commonjs/ViewPager/usePageStore.js.map +1 -0
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js +6 -6
- package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/Carousel/Carousel.js +39 -39
- package/build/module/Carousel/Carousel.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js +2 -2
- package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js +15 -15
- package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
- package/build/module/Carousel/components/InternalContext.js.map +1 -1
- package/build/module/Carousel/components/ItemView.js +5 -3
- package/build/module/Carousel/components/ItemView.js.map +1 -1
- package/build/module/Carousel/components/RootView.js +22 -4
- package/build/module/Carousel/components/RootView.js.map +1 -1
- package/build/module/Carousel/components/ScrollViewGesture.js +18 -13
- package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
- package/build/module/Carousel/{hooks → components}/useItemInterpolation.js +3 -3
- package/build/module/Carousel/components/useItemInterpolation.js.map +1 -0
- package/build/module/Carousel/hooks/index.js +0 -2
- package/build/module/Carousel/hooks/index.js.map +1 -1
- package/build/module/Carousel/hooks/useAutoplayController.js +4 -1
- package/build/module/Carousel/hooks/useAutoplayController.js.map +1 -1
- package/build/module/Carousel/hooks/useIndexController.js +14 -39
- package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
- package/build/module/Carousel/hooks/useItemVisibilityStore.js +10 -11
- package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
- package/build/module/Carousel/hooks/usePagingAnimation.js +122 -69
- package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -1
- package/build/module/Carousel/tick.js +6 -0
- package/build/module/Carousel/tick.js.map +1 -0
- package/build/module/Carousel/types.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +53 -47
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/InternalContext.js +7 -0
- package/build/module/ViewPager/InternalContext.js.map +1 -0
- package/build/module/ViewPager/ViewPagerNative.js +72 -23
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js +21 -13
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/types.js +2 -0
- package/build/module/ViewPager/types.js.map +1 -0
- package/build/module/ViewPager/usePageStore.js +25 -0
- package/build/module/ViewPager/usePageStore.js.map +1 -0
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/ViewabilityTrackerView/measureViewability.js +2 -2
- package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/typescript/Carousel/CarouselProps.d.ts +4 -3
- package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts +5 -5
- package/build/typescript/Carousel/components/InternalContext.d.ts +2 -2
- package/build/typescript/Carousel/components/ItemView.d.ts +2 -0
- package/build/typescript/Carousel/components/RootView.d.ts +4 -4
- package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +3 -3
- package/build/typescript/Carousel/{hooks → components}/useItemInterpolation.d.ts +0 -0
- package/build/typescript/Carousel/hooks/index.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useIndexController.d.ts +0 -2
- package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +5 -2
- package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +8 -10
- package/build/typescript/Carousel/tick.d.ts +2 -0
- package/build/typescript/Carousel/types.d.ts +26 -5
- package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +1 -1
- package/build/typescript/ViewPager/InternalContext.d.ts +7 -0
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +2 -2
- package/build/typescript/ViewPager/ViewPagerProps.d.ts +4 -22
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +2 -2
- package/build/typescript/ViewPager/index.d.ts +2 -1
- package/build/typescript/ViewPager/types.d.ts +19 -0
- package/build/typescript/ViewPager/usePageStore.d.ts +2 -0
- package/build/typescript/ViewPager/utils.d.ts +1 -1
- package/package.json +3 -3
- package/src/Carousel/Carousel.tsx +32 -40
- package/src/Carousel/CarouselProps.ts +4 -3
- package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
- package/src/Carousel/animation/parallaxItemStyleFactory.ts +24 -24
- package/src/Carousel/components/InternalContext.ts +2 -2
- package/src/Carousel/components/ItemView.tsx +13 -3
- package/src/Carousel/components/RootView.tsx +19 -6
- package/src/Carousel/components/ScrollViewGesture.tsx +23 -15
- package/src/Carousel/{hooks → components}/useItemInterpolation.ts +3 -3
- package/src/Carousel/hooks/index.ts +0 -2
- package/src/Carousel/hooks/useAutoplayController.ts +4 -1
- package/src/Carousel/hooks/useIndexController.tsx +14 -44
- package/src/Carousel/hooks/useItemVisibilityStore.ts +17 -13
- package/src/Carousel/hooks/usePagingAnimation.ts +161 -83
- package/src/Carousel/tick.ts +6 -0
- package/src/Carousel/types.ts +34 -5
- package/src/ViewPager/ChildrenMemoizedPage.tsx +53 -50
- package/src/ViewPager/InternalContext.ts +13 -0
- package/src/ViewPager/ViewPagerNative.tsx +91 -44
- package/src/ViewPager/ViewPagerProps.ts +4 -27
- package/src/ViewPager/ViewPagerWeb.tsx +28 -23
- package/src/ViewPager/index.ts +2 -1
- package/src/ViewPager/types.ts +24 -0
- package/src/ViewPager/usePageStore.ts +30 -0
- package/src/ViewPager/utils.tsx +1 -1
- package/src/ViewabilityTrackerView/measureViewability.ts +1 -3
- package/src/hooks/useUnstableCollapsibleAppBar.ts +1 -1
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +0 -23
- package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js +0 -14
- package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
- package/build/module/Carousel/hooks/useItemInterpolation.js.map +0 -1
- package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +0 -7
- package/src/Carousel/hooks/useDimensionChangeReaction.ts +0 -25
|
@@ -9,12 +9,12 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
|
-
|
|
14
12
|
var _core = require("@fountain-ui/core");
|
|
15
13
|
|
|
16
14
|
var _PageStateContext = _interopRequireDefault(require("./PageStateContext"));
|
|
17
15
|
|
|
16
|
+
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
17
|
+
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -34,66 +34,72 @@ const styles = _core.StyleSheet.create({
|
|
|
34
34
|
function Page(props) {
|
|
35
35
|
const {
|
|
36
36
|
index,
|
|
37
|
+
initialPage,
|
|
37
38
|
children,
|
|
38
39
|
loading,
|
|
39
|
-
offscreenPageRerenderLimit
|
|
40
|
-
sharedIndex
|
|
40
|
+
offscreenPageRerenderLimit
|
|
41
41
|
} = props;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
const {
|
|
43
|
+
pageStore
|
|
44
|
+
} = (0, _react.useContext)(_InternalContext.default);
|
|
45
|
+
const computePageDescription = (0, _react.useCallback)(page => {
|
|
46
|
+
const activeIndex = page;
|
|
45
47
|
const isActive = index === activeIndex;
|
|
48
|
+
const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
|
|
49
|
+
const becomeNeighbor = shouldRerender && !isActive;
|
|
50
|
+
return {
|
|
51
|
+
isActive,
|
|
52
|
+
becomeNeighbor
|
|
53
|
+
};
|
|
54
|
+
}, [index]);
|
|
55
|
+
const [initialState] = (0, _react.useState)(() => {
|
|
56
|
+
const {
|
|
57
|
+
isActive,
|
|
58
|
+
becomeNeighbor
|
|
59
|
+
} = computePageDescription(initialPage);
|
|
46
60
|
|
|
47
61
|
if (loading === 'eager') {
|
|
48
62
|
return {
|
|
49
|
-
isActive,
|
|
50
|
-
|
|
63
|
+
active: isActive,
|
|
64
|
+
loaded: true
|
|
51
65
|
};
|
|
52
66
|
}
|
|
53
67
|
|
|
54
|
-
const isLoaded = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
|
|
55
68
|
return {
|
|
56
|
-
isActive,
|
|
57
|
-
|
|
69
|
+
active: isActive,
|
|
70
|
+
loaded: isActive || becomeNeighbor
|
|
58
71
|
};
|
|
59
|
-
};
|
|
72
|
+
}); // `Bailing out of a state update` is not working as expected.
|
|
60
73
|
|
|
61
|
-
const
|
|
62
|
-
const
|
|
74
|
+
const pageStateRef = (0, _react.useRef)(initialState);
|
|
75
|
+
const [, forceRender] = (0, _react.useReducer)(s => s + 1, 0);
|
|
76
|
+
const {
|
|
77
|
+
active,
|
|
78
|
+
loaded
|
|
79
|
+
} = pageStateRef.current;
|
|
80
|
+
const content = loaded ? children : null;
|
|
81
|
+
(0, _react.useEffect)(() => {
|
|
82
|
+
return pageStore.subscribe(newPage => {
|
|
83
|
+
const {
|
|
84
|
+
isActive,
|
|
85
|
+
becomeNeighbor
|
|
86
|
+
} = computePageDescription(newPage);
|
|
87
|
+
const currentState = pageStateRef.current;
|
|
88
|
+
const newState = {
|
|
89
|
+
active: isActive,
|
|
90
|
+
loaded: isActive || becomeNeighbor ? true : currentState.loaded
|
|
91
|
+
};
|
|
63
92
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
})
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const onBecomeNeighbor = () => {
|
|
72
|
-
setPageState(prevState => ({ ...prevState,
|
|
73
|
-
isLoaded: true
|
|
74
|
-
}));
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
|
|
78
|
-
const activeIndex = sharedIndex.value;
|
|
79
|
-
const isActive = index === activeIndex;
|
|
80
|
-
const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
|
|
81
|
-
const becomeNeighbor = shouldRerender && !isActive;
|
|
82
|
-
return {
|
|
83
|
-
isActive,
|
|
84
|
-
becomeNeighbor
|
|
85
|
-
};
|
|
86
|
-
}, (nextState, prevState) => {
|
|
87
|
-
if (nextState.isActive !== (prevState === null || prevState === void 0 ? void 0 : prevState.isActive)) {
|
|
88
|
-
(0, _reactNativeReanimated.runOnJS)(onActiveStateChange)(nextState.isActive);
|
|
89
|
-
} else if (nextState.becomeNeighbor) {
|
|
90
|
-
(0, _reactNativeReanimated.runOnJS)(onBecomeNeighbor)();
|
|
91
|
-
}
|
|
92
|
-
}, [index]);
|
|
93
|
+
if (currentState.active !== newState.active || currentState.loaded !== newState.loaded) {
|
|
94
|
+
pageStateRef.current = newState;
|
|
95
|
+
forceRender();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}, [pageStore, computePageDescription]);
|
|
93
99
|
const contextValue = (0, _react.useMemo)(() => ({
|
|
94
|
-
isActive:
|
|
95
|
-
}), [
|
|
96
|
-
const style = _reactNative.Platform.OS === 'web' ?
|
|
100
|
+
isActive: active
|
|
101
|
+
}), [active]);
|
|
102
|
+
const style = _reactNative.Platform.OS === 'web' ? active ? _core.StyleSheet.absoluteFill : styles.none : styles.fill;
|
|
97
103
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
98
104
|
collapsable: false,
|
|
99
105
|
style: style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","fill","width","height","none","display","Page","props","index","children","loading","offscreenPageRerenderLimit","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","fill","width","height","none","display","Page","props","index","initialPage","children","loading","offscreenPageRerenderLimit","pageStore","useContext","InternalContext","computePageDescription","useCallback","page","activeIndex","isActive","shouldRerender","becomeNeighbor","initialState","useState","active","loaded","pageStateRef","useRef","forceRender","useReducer","s","current","content","useEffect","subscribe","newPage","currentState","newState","contextValue","useMemo","style","Platform","OS","absoluteFill","memo","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './types';\nimport PageStateContext from './PageStateContext';\nimport InternalContext from './InternalContext';\n\nconst styles = StyleSheet.create({\n fill: { width: '100%', height: '100%' },\n none: { display: 'none' },\n});\n\ninterface InternalPageDescription {\n isActive: boolean;\n becomeNeighbor: boolean;\n}\n\ninterface InternalPageState {\n active: boolean;\n loaded: boolean;\n}\n\nfunction Page(props: PageProps) {\n const {\n index,\n initialPage,\n children,\n loading,\n offscreenPageRerenderLimit,\n } = props;\n\n const { pageStore } = useContext(InternalContext);\n\n const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {\n const activeIndex = page;\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 }, [index]);\n\n const [initialState] = useState<InternalPageState>(() => {\n const { isActive, becomeNeighbor } = computePageDescription(initialPage);\n\n if (loading === 'eager') {\n return { active: isActive, loaded: true };\n }\n\n return { active: isActive, loaded: isActive || becomeNeighbor };\n });\n\n // `Bailing out of a state update` is not working as expected.\n const pageStateRef = useRef<InternalPageState>(initialState);\n const [, forceRender] = useReducer((s) => s + 1, 0);\n\n const { active, loaded } = pageStateRef.current;\n\n const content = loaded ? children : null;\n\n useEffect(() => {\n return pageStore.subscribe(newPage => {\n const { isActive, becomeNeighbor } = computePageDescription(newPage);\n\n const currentState = pageStateRef.current;\n\n const newState: InternalPageState = {\n active: isActive,\n loaded: isActive || becomeNeighbor ? true : currentState.loaded,\n };\n\n if (\n currentState.active !== newState.active\n || currentState.loaded !== newState.loaded\n ) {\n pageStateRef.current = newState;\n\n forceRender();\n }\n });\n }, [pageStore, computePageDescription]);\n\n const contextValue = useMemo(() => ({\n isActive: active,\n }), [active]);\n\n const style = Platform.OS === 'web'\n ? (active ? 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,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _core = require("@fountain-ui/core");
|
|
11
|
+
|
|
12
|
+
const InternalContext = /*#__PURE__*/(0, _react.createContext)({
|
|
13
|
+
pageStore: new _core.MockStore()
|
|
14
|
+
});
|
|
15
|
+
var _default = InternalContext;
|
|
16
|
+
exports.default = _default;
|
|
17
|
+
//# sourceMappingURL=InternalContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["InternalContext","createContext","pageStore","MockStore"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { MonoStore } from '@fountain-ui/core';\nimport { MockStore } from '@fountain-ui/core';\n\nexport interface InternalContextValue {\n pageStore: MonoStore<number>;\n}\n\nconst InternalContext = createContext<InternalContextValue>({\n pageStore: new MockStore(),\n});\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAMA,MAAMA,eAAe,gBAAG,IAAAC,oBAAA,EAAoC;EACxDC,SAAS,EAAE,IAAIC,eAAJ;AAD6C,CAApC,CAAxB;eAIeH,e"}
|
|
@@ -9,10 +9,14 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNativePagerView = _interopRequireDefault(require("react-native-pager-view"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _core = require("@fountain-ui/core");
|
|
13
13
|
|
|
14
14
|
var _utils = require("./utils");
|
|
15
15
|
|
|
16
|
+
var _usePageStore = _interopRequireDefault(require("./usePageStore"));
|
|
17
|
+
|
|
18
|
+
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
19
|
+
|
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
21
|
|
|
18
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -31,17 +35,38 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
|
|
|
31
35
|
pageForceRerenderKey,
|
|
32
36
|
scrollEnabled = true,
|
|
33
37
|
style,
|
|
34
|
-
|
|
38
|
+
UNSTABLE_sharedPage
|
|
35
39
|
} = props;
|
|
36
|
-
const
|
|
37
|
-
|
|
40
|
+
const fallbackSharedPage = (0, _core.useSyncAnimatedValue)({
|
|
41
|
+
initialValue: initialPage
|
|
42
|
+
});
|
|
43
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
44
|
+
const pageRef = (0, _react.useRef)(sharedPage.initialValue);
|
|
45
|
+
const desiredPageRef = (0, _react.useRef)(NaN);
|
|
38
46
|
const pagerRef = (0, _react.useRef)(null);
|
|
39
47
|
const animationFrameRef = (0, _react.useRef)(NaN);
|
|
40
|
-
const setPage = (0, _react.useCallback)(
|
|
48
|
+
const setPage = (0, _react.useCallback)(newPage => {
|
|
49
|
+
if (!Number.isInteger(newPage)) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
|
|
41
53
|
animationFrameRef.current = requestAnimationFrame(() => {
|
|
42
54
|
var _pagerRef$current;
|
|
43
55
|
|
|
44
|
-
(
|
|
56
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
57
|
+
if (pageRef.current === desiredPageRef.current) {
|
|
58
|
+
// end of state machine. clear desired page.
|
|
59
|
+
desiredPageRef.current = NaN;
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (newPage === desiredPageRef.current) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
desiredPageRef.current = newPage;
|
|
69
|
+
(_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(newPage);
|
|
45
70
|
});
|
|
46
71
|
}, []);
|
|
47
72
|
(0, _react.useEffect)(() => {
|
|
@@ -51,30 +76,56 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
|
|
|
51
76
|
}
|
|
52
77
|
};
|
|
53
78
|
}, []);
|
|
54
|
-
(0,
|
|
55
|
-
|
|
56
|
-
|
|
79
|
+
(0, _react.useEffect)(() => {
|
|
80
|
+
const animatedValue = sharedPage.animatedValue;
|
|
81
|
+
const id = animatedValue.addListener(newValue => {
|
|
82
|
+
const newPage = newValue.value;
|
|
83
|
+
pageRef.current = newPage;
|
|
84
|
+
setPage(newPage);
|
|
85
|
+
});
|
|
86
|
+
return () => {
|
|
87
|
+
animatedValue.removeListener(id);
|
|
88
|
+
};
|
|
89
|
+
}, [sharedPage, setPage]);
|
|
57
90
|
const handlePageSelected = (0, _react.useCallback)(e => {
|
|
58
|
-
|
|
59
|
-
|
|
91
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
92
|
+
// onPageSelected is called from outer controlling mechanism
|
|
93
|
+
// e.g. sharedPage.value is changed, setPage() is called
|
|
94
|
+
// Due to the onPageSelected bug,
|
|
95
|
+
// we don't trust the value from event, (e.nativeEvent.position)
|
|
96
|
+
// other than that trust the value from desiredPageRef.
|
|
97
|
+
const desiredPage = desiredPageRef.current;
|
|
60
98
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
99
|
+
if (pageRef.current === desiredPage) {
|
|
100
|
+
// end of state machine. clear desired page.
|
|
101
|
+
desiredPageRef.current = NaN;
|
|
102
|
+
} else {
|
|
103
|
+
sharedPage.animatedValue.setValue(desiredPage);
|
|
104
|
+
}
|
|
64
105
|
|
|
65
|
-
|
|
106
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(desiredPage);
|
|
107
|
+
} else {
|
|
108
|
+
const trustfulNextPage = e.nativeEvent.position;
|
|
66
109
|
|
|
67
|
-
|
|
68
|
-
|
|
110
|
+
if (trustfulNextPage !== pageRef.current) {
|
|
111
|
+
desiredPageRef.current = trustfulNextPage;
|
|
112
|
+
sharedPage.animatedValue.setValue(trustfulNextPage);
|
|
113
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(trustfulNextPage);
|
|
114
|
+
}
|
|
69
115
|
}
|
|
70
|
-
}, [onChange]);
|
|
116
|
+
}, [onChange, sharedPage]);
|
|
71
117
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
72
118
|
setPage
|
|
73
119
|
}), [setPage]);
|
|
120
|
+
const pageStore = (0, _usePageStore.default)(sharedPage);
|
|
74
121
|
const PageComponent = pageComponent;
|
|
75
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
122
|
+
return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
|
|
123
|
+
value: {
|
|
124
|
+
pageStore
|
|
125
|
+
}
|
|
126
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativePagerView.default, {
|
|
76
127
|
ref: pagerRef,
|
|
77
|
-
initialPage:
|
|
128
|
+
initialPage: sharedPage.initialValue,
|
|
78
129
|
keyboardDismissMode: keyboardDismissMode,
|
|
79
130
|
onPageSelected: handlePageSelected,
|
|
80
131
|
pageMargin: 8,
|
|
@@ -84,11 +135,11 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
|
|
|
84
135
|
key: index,
|
|
85
136
|
children: child,
|
|
86
137
|
index: index,
|
|
138
|
+
initialPage: sharedPage.initialValue,
|
|
87
139
|
loading: loading,
|
|
88
140
|
offscreenPageRerenderLimit: offscreenPageRerenderLimit,
|
|
89
|
-
rerenderKey: pageForceRerenderKey
|
|
90
|
-
|
|
91
|
-
})));
|
|
141
|
+
rerenderKey: pageForceRerenderKey
|
|
142
|
+
}))));
|
|
92
143
|
});
|
|
93
144
|
var _default = ViewPager;
|
|
94
145
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","keyboardDismissMode","loading","defaultLoading","offscreenPageRerenderLimit","defaultOffscreenPageRerenderLimit","onChange","pageComponent","defaultPageComponent","pageForceRerenderKey","scrollEnabled","style","
|
|
1
|
+
{"version":3,"names":["ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","keyboardDismissMode","loading","defaultLoading","offscreenPageRerenderLimit","defaultOffscreenPageRerenderLimit","onChange","pageComponent","defaultPageComponent","pageForceRerenderKey","scrollEnabled","style","UNSTABLE_sharedPage","fallbackSharedPage","useSyncAnimatedValue","initialValue","sharedPage","pageRef","useRef","desiredPageRef","NaN","pagerRef","animationFrameRef","setPage","useCallback","newPage","Number","isInteger","current","requestAnimationFrame","isFinite","useEffect","cancelAnimationFrame","animatedValue","id","addListener","newValue","value","removeListener","handlePageSelected","e","desiredPage","setValue","trustfulNextPage","nativeEvent","position","useImperativeHandle","pageStore","usePageStore","PageComponent","Children","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 { useSyncAnimatedValue } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './types';\nimport { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';\nimport usePageStore from './usePageStore';\nimport InternalContext from './InternalContext';\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 = useSyncAnimatedValue({ initialValue: initialPage });\n\n const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n const pageRef = useRef<number>(sharedPage.initialValue);\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 (pageRef.current === 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 useEffect(() => {\n const animatedValue = sharedPage.animatedValue;\n const id = animatedValue.addListener(newValue => {\n const newPage = newValue.value;\n pageRef.current = newPage;\n setPage(newPage);\n });\n\n return () => {\n animatedValue.removeListener(id);\n };\n }, [sharedPage, setPage]);\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 (pageRef.current === desiredPage) {\n // end of state machine. clear desired page.\n desiredPageRef.current = NaN;\n } else {\n sharedPage.animatedValue.setValue(desiredPage);\n }\n\n onChange?.(desiredPage);\n } else {\n const trustfulNextPage = e.nativeEvent.position;\n\n if (trustfulNextPage !== pageRef.current) {\n desiredPageRef.current = trustfulNextPage;\n sharedPage.animatedValue.setValue(trustfulNextPage);\n\n onChange?.(trustfulNextPage);\n }\n }\n }, [onChange, sharedPage]);\n\n useImperativeHandle(\n ref,\n () => ({ setPage }),\n [setPage],\n );\n\n const pageStore = usePageStore(sharedPage);\n\n const PageComponent = pageComponent;\n\n return (\n <InternalContext.Provider value={{ pageStore }}>\n <RNViewPager\n ref={pagerRef}\n initialPage={sharedPage.initialValue}\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 initialPage={sharedPage.initialValue}\n loading={loading}\n offscreenPageRerenderLimit={offscreenPageRerenderLimit}\n rerenderKey={pageForceRerenderKey}\n />\n ))}\n </RNViewPager>\n </InternalContext.Provider>\n );\n});\n\nexport default ViewPager;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';\nimport type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';\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?: SyncAnimatedValue;\n}> {}\n"],"mappings":""}
|
|
@@ -9,12 +9,16 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
|
-
|
|
14
12
|
var _core = require("@fountain-ui/core");
|
|
15
13
|
|
|
16
14
|
var _utils = require("./utils");
|
|
17
15
|
|
|
16
|
+
var _usePageStore = _interopRequireDefault(require("./usePageStore"));
|
|
17
|
+
|
|
18
|
+
var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
18
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
23
|
|
|
20
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -35,29 +39,36 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
|
|
|
35
39
|
pageComponent = _utils.defaultPageComponent,
|
|
36
40
|
pageForceRerenderKey,
|
|
37
41
|
style,
|
|
38
|
-
|
|
42
|
+
UNSTABLE_sharedPage
|
|
39
43
|
} = props;
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
const fallbackSharedPage = (0, _core.useSyncAnimatedValue)({
|
|
45
|
+
initialValue: initialPage
|
|
46
|
+
});
|
|
47
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
48
|
+
const setPage = (0, _react.useCallback)(newPage => {
|
|
49
|
+
sharedPage.animatedValue.setValue(newPage);
|
|
50
|
+
}, [sharedPage]);
|
|
45
51
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
46
52
|
setPage
|
|
47
53
|
}), [setPage]);
|
|
54
|
+
const pageStore = (0, _usePageStore.default)(sharedPage);
|
|
48
55
|
const PageComponent = pageComponent;
|
|
49
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
|
|
57
|
+
value: {
|
|
58
|
+
pageStore
|
|
59
|
+
}
|
|
60
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
50
61
|
style: [styles.root, style]
|
|
51
62
|
}, _react.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(PageComponent, {
|
|
52
63
|
key: index,
|
|
53
64
|
children: child,
|
|
54
65
|
index: index,
|
|
66
|
+
initialPage: sharedPage.initialValue,
|
|
55
67
|
loading: loading,
|
|
56
68
|
offscreenPageRerenderLimit: 0 // All offscreen pages will not be re-rendered
|
|
57
69
|
,
|
|
58
|
-
rerenderKey: pageForceRerenderKey
|
|
59
|
-
|
|
60
|
-
})));
|
|
70
|
+
rerenderKey: pageForceRerenderKey
|
|
71
|
+
}))));
|
|
61
72
|
});
|
|
62
73
|
var _default = ViewPager;
|
|
63
74
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","overflow","position","ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","overflow","position","ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","UNSTABLE_sharedPage","fallbackSharedPage","useSyncAnimatedValue","initialValue","sharedPage","setPage","useCallback","newPage","animatedValue","setValue","useImperativeHandle","pageStore","usePageStore","PageComponent","Children","map","child","index"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';\nimport { View } from 'react-native';\nimport { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './types';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\nimport usePageStore from './usePageStore';\nimport InternalContext from './InternalContext';\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 = useSyncAnimatedValue({ initialValue: initialPage });\n\n const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n const setPage = useCallback((newPage: number) => {\n sharedPage.animatedValue.setValue(newPage);\n }, [sharedPage]);\n\n useImperativeHandle(\n ref,\n () => ({ setPage }),\n [setPage],\n );\n\n const pageStore = usePageStore(sharedPage);\n\n const PageComponent = pageComponent;\n\n return (\n <InternalContext.Provider value={{ pageStore }}>\n <View style={[styles.root, style]}>\n {Children.map(children, (child, index) => (\n <PageComponent\n key={index}\n children={child}\n index={index}\n initialPage={sharedPage.initialValue}\n loading={loading}\n offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered\n rerenderKey={pageForceRerenderKey}\n />\n ))}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default ViewPager;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,gBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR;AADuB,CAAlB,CAAf;;AAQA,MAAMC,SAAS,gBAAG,IAAAC,iBAAA,EAA8C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGC,yBAFZ;IAGFC,OAAO,GAAGC,qBAHR;IAIFC,aAAa,GAAGC,2BAJd;IAKFC,oBALE;IAMFC,KANE;IAOFC;EAPE,IAQFX,KARJ;EAUA,MAAMY,kBAAkB,GAAG,IAAAC,0BAAA,EAAqB;IAAEC,YAAY,EAAEX;EAAhB,CAArB,CAA3B;EAEA,MAAMY,UAAU,GAAGJ,mBAAmB,IAAIC,kBAA1C;EAEA,MAAMI,OAAO,GAAG,IAAAC,kBAAA,EAAaC,OAAD,IAAqB;IAC7CH,UAAU,CAACI,aAAX,CAAyBC,QAAzB,CAAkCF,OAAlC;EACH,CAFe,EAEb,CAACH,UAAD,CAFa,CAAhB;EAIA,IAAAM,0BAAA,EACIpB,GADJ,EAEI,OAAO;IAAEe;EAAF,CAAP,CAFJ,EAGI,CAACA,OAAD,CAHJ;EAMA,MAAMM,SAAS,GAAG,IAAAC,qBAAA,EAAaR,UAAb,CAAlB;EAEA,MAAMS,aAAa,GAAGjB,aAAtB;EAEA,oBACI,6BAAC,wBAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEe;IAAF;EAAjC,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAAC9B,MAAM,CAACG,IAAR,EAAce,KAAd;EAAb,GACKe,eAAA,CAASC,GAAT,CAAaxB,QAAb,EAAuB,CAACyB,KAAD,EAAQC,KAAR,kBACpB,6BAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,WAAW,EAAEb,UAAU,CAACD,YAJ5B;IAKI,OAAO,EAAET,OALb;IAMI,0BAA0B,EAAE,CANhC,CAMmC;IANnC;IAOI,WAAW,EAAEI;EAPjB,EADH,CADL,CADJ,CADJ;AAiBH,CA9CiB,CAAlB;eAgDeX,S"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps } from './ViewPagerProps';\nexport type { ViewPagerInstance } from './types';\nexport { useViewPagerPageState } from './PageStateContext';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAGA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ComponentType, PropsWithChildren } from 'react';\nimport type { ViewProps } from 'react-native';\n\nexport type PageProps = PropsWithChildren<ViewProps> & {\n index: number;\n initialPage: number;\n loading: Loading;\n offscreenPageRerenderLimit: number;\n rerenderKey?: any;\n};\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\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"],"mappings":""}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = usePageStore;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _core = require("@fountain-ui/core");
|
|
11
|
+
|
|
12
|
+
function usePageStore(value) {
|
|
13
|
+
const {
|
|
14
|
+
animatedValue,
|
|
15
|
+
initialValue
|
|
16
|
+
} = value;
|
|
17
|
+
const store = (0, _react.useRef)(new _core.SimpleStore(initialValue)).current;
|
|
18
|
+
(0, _react.useEffect)(() => {
|
|
19
|
+
const id = animatedValue.addListener(newPage => {
|
|
20
|
+
store.dispatch(newPage.value);
|
|
21
|
+
});
|
|
22
|
+
return () => {
|
|
23
|
+
animatedValue.removeListener(id);
|
|
24
|
+
};
|
|
25
|
+
}, [animatedValue]);
|
|
26
|
+
(0, _react.useEffect)(() => {
|
|
27
|
+
return () => {
|
|
28
|
+
store.removeAllListeners();
|
|
29
|
+
};
|
|
30
|
+
}, [store]);
|
|
31
|
+
return store;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
;
|
|
35
|
+
//# sourceMappingURL=usePageStore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["usePageStore","value","animatedValue","initialValue","store","useRef","SimpleStore","current","useEffect","id","addListener","newPage","dispatch","removeListener","removeAllListeners"],"sources":["usePageStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';\nimport { SimpleStore } from '@fountain-ui/core';\n\nexport default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {\n const {\n animatedValue,\n initialValue,\n } = value;\n\n const store = useRef(new SimpleStore(initialValue)).current;\n\n useEffect(() => {\n const id = animatedValue.addListener((newPage) => {\n store.dispatch(newPage.value);\n });\n\n return () => {\n animatedValue.removeListener(id);\n };\n }, [animatedValue]);\n\n useEffect(() => {\n return () => {\n store.removeAllListeners();\n };\n }, [store]);\n\n return store;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,YAAT,CAAsBC,KAAtB,EAAmE;EAC9E,MAAM;IACFC,aADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,KAAK,GAAG,IAAAC,aAAA,EAAO,IAAIC,iBAAJ,CAAgBH,YAAhB,CAAP,EAAsCI,OAApD;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,EAAE,GAAGP,aAAa,CAACQ,WAAd,CAA2BC,OAAD,IAAa;MAC9CP,KAAK,CAACQ,QAAN,CAAeD,OAAO,CAACV,KAAvB;IACH,CAFU,CAAX;IAIA,OAAO,MAAM;MACTC,aAAa,CAACW,cAAd,CAA6BJ,EAA7B;IACH,CAFD;EAGH,CARD,EAQG,CAACP,aAAD,CARH;EAUA,IAAAM,gBAAA,EAAU,MAAM;IACZ,OAAO,MAAM;MACTJ,KAAK,CAACU,kBAAN;IACH,CAFD;EAGH,CAJD,EAIG,CAACV,KAAD,CAJH;EAMA,OAAOA,KAAP;AACH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent","ChildrenMemoizedPage"],"sources":["utils.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":["defaultInitialPage","defaultLoading","defaultOffscreenPageRerenderLimit","defaultPageComponent","ChildrenMemoizedPage"],"sources":["utils.tsx"],"sourcesContent":["import ChildrenMemoizedPage from './ChildrenMemoizedPage';\nimport type { Loading, PageComponent } from './types';\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":";;;;;;;AAAA;;;;AAGO,MAAMA,kBAA0B,GAAG,CAAnC;;AAEA,MAAMC,cAAuB,GAAG,MAAhC;;AAEA,MAAMC,iCAAyC,GAAG,CAAlD;;AAEA,MAAMC,oBAAmC,GAAGC,6BAA5C"}
|
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = measureViewability;
|
|
7
7
|
|
|
8
|
+
var _utils = require("@fountain-ui/utils");
|
|
9
|
+
|
|
8
10
|
const computeRectSize = rect => (rect.bottom - rect.top) * (rect.right - rect.left);
|
|
9
11
|
|
|
10
12
|
const normalizePagePosition = value => value != null && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
|
|
11
13
|
|
|
12
14
|
const normalizeViewSize = size => Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
|
|
13
15
|
|
|
14
|
-
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
15
|
-
|
|
16
16
|
function measureViewability(_ref) {
|
|
17
17
|
let {
|
|
18
18
|
view,
|
|
@@ -24,10 +24,10 @@ function measureViewability(_ref) {
|
|
|
24
24
|
const safePageX = normalizePagePosition(pageX);
|
|
25
25
|
const safePageY = normalizePagePosition(pageY);
|
|
26
26
|
const visibleRect = {
|
|
27
|
-
top: clamp(safePageY, 0, windowHeight),
|
|
28
|
-
bottom: clamp(safePageY + height, 0, windowHeight),
|
|
29
|
-
left: clamp(safePageX, 0, windowWidth),
|
|
30
|
-
right: clamp(safePageX + width, 0, windowWidth)
|
|
27
|
+
top: (0, _utils.clamp)(safePageY, 0, windowHeight),
|
|
28
|
+
bottom: (0, _utils.clamp)(safePageY + height, 0, windowHeight),
|
|
29
|
+
left: (0, _utils.clamp)(safePageX, 0, windowWidth),
|
|
30
|
+
right: (0, _utils.clamp)(safePageX + width, 0, windowWidth)
|
|
31
31
|
};
|
|
32
32
|
const visibleRectSize = computeRectSize(visibleRect);
|
|
33
33
|
const viewSize = normalizeViewSize(width * height);
|