@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
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
2
2
|
import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
|
|
3
3
|
import RNViewPager from 'react-native-pager-view';
|
|
4
|
-
import {
|
|
4
|
+
import { useSyncAnimatedValue } from '@fountain-ui/core';
|
|
5
5
|
import type ViewPagerProps from './ViewPagerProps';
|
|
6
|
-
import type { ViewPagerInstance } from './
|
|
6
|
+
import type { ViewPagerInstance } from './types';
|
|
7
7
|
import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
|
|
8
|
+
import usePageStore from './usePageStore';
|
|
9
|
+
import InternalContext from './InternalContext';
|
|
8
10
|
|
|
9
11
|
const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
|
|
10
12
|
const {
|
|
@@ -18,20 +20,41 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
|
|
|
18
20
|
pageForceRerenderKey,
|
|
19
21
|
scrollEnabled = true,
|
|
20
22
|
style,
|
|
21
|
-
|
|
23
|
+
UNSTABLE_sharedPage,
|
|
22
24
|
} = props;
|
|
23
25
|
|
|
24
|
-
const
|
|
26
|
+
const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
|
|
25
27
|
|
|
26
|
-
const
|
|
28
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
29
|
+
|
|
30
|
+
const pageRef = useRef<number>(sharedPage.initialValue);
|
|
31
|
+
|
|
32
|
+
const desiredPageRef = useRef<number>(NaN);
|
|
27
33
|
|
|
28
34
|
const pagerRef = useRef<RNViewPager | null>(null);
|
|
29
35
|
|
|
30
36
|
const animationFrameRef = useRef<number>(NaN);
|
|
31
37
|
|
|
32
|
-
const setPage = useCallback((
|
|
38
|
+
const setPage = useCallback((newPage: number) => {
|
|
39
|
+
if (!Number.isInteger(newPage)) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
|
|
33
43
|
animationFrameRef.current = requestAnimationFrame(() => {
|
|
34
|
-
|
|
44
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
45
|
+
if (pageRef.current === desiredPageRef.current) {
|
|
46
|
+
// end of state machine. clear desired page.
|
|
47
|
+
desiredPageRef.current = NaN;
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
if (newPage === desiredPageRef.current) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
desiredPageRef.current = newPage;
|
|
57
|
+
pagerRef.current?.setPage(newPage);
|
|
35
58
|
});
|
|
36
59
|
}, []);
|
|
37
60
|
|
|
@@ -43,28 +66,48 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
|
|
|
43
66
|
};
|
|
44
67
|
}, []);
|
|
45
68
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
const animatedValue = sharedPage.animatedValue;
|
|
71
|
+
const id = animatedValue.addListener(newValue => {
|
|
72
|
+
const newPage = newValue.value;
|
|
73
|
+
pageRef.current = newPage;
|
|
74
|
+
setPage(newPage);
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
return () => {
|
|
78
|
+
animatedValue.removeListener(id);
|
|
79
|
+
};
|
|
80
|
+
}, [sharedPage, setPage]);
|
|
53
81
|
|
|
54
82
|
const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
|
|
55
|
-
|
|
56
|
-
|
|
83
|
+
if (Number.isFinite(desiredPageRef.current)) {
|
|
84
|
+
// onPageSelected is called from outer controlling mechanism
|
|
85
|
+
// e.g. sharedPage.value is changed, setPage() is called
|
|
86
|
+
// Due to the onPageSelected bug,
|
|
87
|
+
// we don't trust the value from event, (e.nativeEvent.position)
|
|
88
|
+
// other than that trust the value from desiredPageRef.
|
|
89
|
+
|
|
90
|
+
const desiredPage = desiredPageRef.current;
|
|
91
|
+
|
|
92
|
+
if (pageRef.current === desiredPage) {
|
|
93
|
+
// end of state machine. clear desired page.
|
|
94
|
+
desiredPageRef.current = NaN;
|
|
95
|
+
} else {
|
|
96
|
+
sharedPage.animatedValue.setValue(desiredPage);
|
|
97
|
+
}
|
|
57
98
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
99
|
+
onChange?.(desiredPage);
|
|
100
|
+
} else {
|
|
101
|
+
const trustfulNextPage = e.nativeEvent.position;
|
|
61
102
|
|
|
62
|
-
|
|
103
|
+
if (trustfulNextPage !== pageRef.current) {
|
|
104
|
+
desiredPageRef.current = trustfulNextPage;
|
|
105
|
+
sharedPage.animatedValue.setValue(trustfulNextPage);
|
|
63
106
|
|
|
64
|
-
|
|
65
|
-
|
|
107
|
+
onChange?.(trustfulNextPage);
|
|
108
|
+
}
|
|
66
109
|
}
|
|
67
|
-
}, [onChange]);
|
|
110
|
+
}, [onChange, sharedPage]);
|
|
68
111
|
|
|
69
112
|
useImperativeHandle(
|
|
70
113
|
ref,
|
|
@@ -72,30 +115,34 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
|
|
|
72
115
|
[setPage],
|
|
73
116
|
);
|
|
74
117
|
|
|
118
|
+
const pageStore = usePageStore(sharedPage);
|
|
119
|
+
|
|
75
120
|
const PageComponent = pageComponent;
|
|
76
121
|
|
|
77
122
|
return (
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
123
|
+
<InternalContext.Provider value={{ pageStore }}>
|
|
124
|
+
<RNViewPager
|
|
125
|
+
ref={pagerRef}
|
|
126
|
+
initialPage={sharedPage.initialValue}
|
|
127
|
+
keyboardDismissMode={keyboardDismissMode}
|
|
128
|
+
onPageSelected={handlePageSelected}
|
|
129
|
+
pageMargin={8}
|
|
130
|
+
scrollEnabled={scrollEnabled}
|
|
131
|
+
style={style}
|
|
132
|
+
>
|
|
133
|
+
{Children.map(children, (child, index) => (
|
|
134
|
+
<PageComponent
|
|
135
|
+
key={index}
|
|
136
|
+
children={child}
|
|
137
|
+
index={index}
|
|
138
|
+
initialPage={sharedPage.initialValue}
|
|
139
|
+
loading={loading}
|
|
140
|
+
offscreenPageRerenderLimit={offscreenPageRerenderLimit}
|
|
141
|
+
rerenderKey={pageForceRerenderKey}
|
|
142
|
+
/>
|
|
143
|
+
))}
|
|
144
|
+
</RNViewPager>
|
|
145
|
+
</InternalContext.Provider>
|
|
99
146
|
);
|
|
100
147
|
});
|
|
101
148
|
|
|
@@ -1,29 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import type { ComponentProps } from '@fountain-ui/core';
|
|
5
|
-
|
|
6
|
-
export type KeyboardDismissMode = 'none' | 'on-drag';
|
|
7
|
-
|
|
8
|
-
export type PageProps = PropsWithChildren<ViewProps> & {
|
|
9
|
-
index: number;
|
|
10
|
-
loading: ViewPagerProps['loading'];
|
|
11
|
-
offscreenPageRerenderLimit: number;
|
|
12
|
-
sharedIndex: SharedValue<number>;
|
|
13
|
-
rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export type PageComponent = ComponentType<PageProps>;
|
|
17
|
-
|
|
18
|
-
export type Loading = 'lazy' | 'eager';
|
|
19
|
-
|
|
20
|
-
export interface ViewPagerInstance {
|
|
21
|
-
/**
|
|
22
|
-
* Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
|
|
23
|
-
* @param index
|
|
24
|
-
*/
|
|
25
|
-
setPage: (index: number) => void;
|
|
26
|
-
}
|
|
1
|
+
import type { ReactNode, Ref } from 'react';
|
|
2
|
+
import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
|
|
3
|
+
import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
|
|
27
4
|
|
|
28
5
|
export default interface ViewPagerProps extends ComponentProps<{
|
|
29
6
|
ref?: Ref<ViewPagerInstance>;
|
|
@@ -83,5 +60,5 @@ export default interface ViewPagerProps extends ComponentProps<{
|
|
|
83
60
|
/**
|
|
84
61
|
* Unstable API.
|
|
85
62
|
*/
|
|
86
|
-
|
|
63
|
+
UNSTABLE_sharedPage?: SyncAnimatedValue;
|
|
87
64
|
}> {}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React, { Children, forwardRef,
|
|
1
|
+
import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
|
-
import {
|
|
4
|
-
import { StyleSheet } from '@fountain-ui/core';
|
|
3
|
+
import { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';
|
|
5
4
|
import type ViewPagerProps from './ViewPagerProps';
|
|
6
|
-
import type { ViewPagerInstance } from './
|
|
5
|
+
import type { ViewPagerInstance } from './types';
|
|
7
6
|
import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
|
|
7
|
+
import usePageStore from './usePageStore';
|
|
8
|
+
import InternalContext from './InternalContext';
|
|
8
9
|
|
|
9
10
|
const styles = StyleSheet.create({
|
|
10
11
|
root: {
|
|
@@ -22,16 +23,16 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
|
|
|
22
23
|
pageComponent = defaultPageComponent,
|
|
23
24
|
pageForceRerenderKey,
|
|
24
25
|
style,
|
|
25
|
-
|
|
26
|
+
UNSTABLE_sharedPage,
|
|
26
27
|
} = props;
|
|
27
28
|
|
|
28
|
-
const
|
|
29
|
+
const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
|
|
29
30
|
|
|
30
|
-
const
|
|
31
|
+
const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
|
|
31
32
|
|
|
32
|
-
const setPage = useCallback((
|
|
33
|
-
|
|
34
|
-
}, [
|
|
33
|
+
const setPage = useCallback((newPage: number) => {
|
|
34
|
+
sharedPage.animatedValue.setValue(newPage);
|
|
35
|
+
}, [sharedPage]);
|
|
35
36
|
|
|
36
37
|
useImperativeHandle(
|
|
37
38
|
ref,
|
|
@@ -39,22 +40,26 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
|
|
|
39
40
|
[setPage],
|
|
40
41
|
);
|
|
41
42
|
|
|
43
|
+
const pageStore = usePageStore(sharedPage);
|
|
44
|
+
|
|
42
45
|
const PageComponent = pageComponent;
|
|
43
46
|
|
|
44
47
|
return (
|
|
45
|
-
<
|
|
46
|
-
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
<InternalContext.Provider value={{ pageStore }}>
|
|
49
|
+
<View style={[styles.root, style]}>
|
|
50
|
+
{Children.map(children, (child, index) => (
|
|
51
|
+
<PageComponent
|
|
52
|
+
key={index}
|
|
53
|
+
children={child}
|
|
54
|
+
index={index}
|
|
55
|
+
initialPage={sharedPage.initialValue}
|
|
56
|
+
loading={loading}
|
|
57
|
+
offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
|
|
58
|
+
rerenderKey={pageForceRerenderKey}
|
|
59
|
+
/>
|
|
60
|
+
))}
|
|
61
|
+
</View>
|
|
62
|
+
</InternalContext.Provider>
|
|
58
63
|
);
|
|
59
64
|
});
|
|
60
65
|
|
package/src/ViewPager/index.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default } from './ViewPagerWeb';
|
|
2
|
-
export type { default as ViewPagerProps
|
|
2
|
+
export type { default as ViewPagerProps } from './ViewPagerProps';
|
|
3
|
+
export type { ViewPagerInstance } from './types';
|
|
3
4
|
export { useViewPagerPageState } from './PageStateContext';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ComponentType, PropsWithChildren } from 'react';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
export type PageProps = PropsWithChildren<ViewProps> & {
|
|
5
|
+
index: number;
|
|
6
|
+
initialPage: number;
|
|
7
|
+
loading: Loading;
|
|
8
|
+
offscreenPageRerenderLimit: number;
|
|
9
|
+
rerenderKey?: any;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export type KeyboardDismissMode = 'none' | 'on-drag';
|
|
13
|
+
|
|
14
|
+
export type PageComponent = ComponentType<PageProps>;
|
|
15
|
+
|
|
16
|
+
export type Loading = 'lazy' | 'eager';
|
|
17
|
+
|
|
18
|
+
export interface ViewPagerInstance {
|
|
19
|
+
/**
|
|
20
|
+
* Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
|
|
21
|
+
* @param index
|
|
22
|
+
*/
|
|
23
|
+
setPage: (index: number) => void;
|
|
24
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
|
|
3
|
+
import { SimpleStore } from '@fountain-ui/core';
|
|
4
|
+
|
|
5
|
+
export default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {
|
|
6
|
+
const {
|
|
7
|
+
animatedValue,
|
|
8
|
+
initialValue,
|
|
9
|
+
} = value;
|
|
10
|
+
|
|
11
|
+
const store = useRef(new SimpleStore(initialValue)).current;
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const id = animatedValue.addListener((newPage) => {
|
|
15
|
+
store.dispatch(newPage.value);
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
return () => {
|
|
19
|
+
animatedValue.removeListener(id);
|
|
20
|
+
};
|
|
21
|
+
}, [animatedValue]);
|
|
22
|
+
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
return () => {
|
|
25
|
+
store.removeAllListeners();
|
|
26
|
+
};
|
|
27
|
+
}, [store]);
|
|
28
|
+
|
|
29
|
+
return store;
|
|
30
|
+
};
|
package/src/ViewPager/utils.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { View } from 'react-native';
|
|
2
|
+
import { clamp } from '@fountain-ui/utils';
|
|
2
3
|
|
|
3
4
|
interface Rect {
|
|
4
5
|
top: number,
|
|
@@ -27,9 +28,6 @@ const normalizePagePosition = (value?: number): number =>
|
|
|
27
28
|
const normalizeViewSize = (size: number): number =>
|
|
28
29
|
Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
|
|
29
30
|
|
|
30
|
-
const clamp = (value: number, min: number, max: number): number =>
|
|
31
|
-
Math.min(Math.max(value, min), max);
|
|
32
|
-
|
|
33
31
|
export default function measureViewability({
|
|
34
32
|
view,
|
|
35
33
|
windowWidth,
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = useDimensionChangeReaction;
|
|
7
|
-
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
|
|
10
|
-
function useDimensionChangeReaction(params) {
|
|
11
|
-
const {
|
|
12
|
-
controlledTx,
|
|
13
|
-
currentIndex,
|
|
14
|
-
itemWidth
|
|
15
|
-
} = params;
|
|
16
|
-
(0, _react.useEffect)(() => {
|
|
17
|
-
const newTx = -currentIndex * itemWidth;
|
|
18
|
-
controlledTx.setValue(newTx);
|
|
19
|
-
}, [controlledTx, currentIndex, itemWidth]);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
;
|
|
23
|
-
//# sourceMappingURL=useDimensionChangeReaction.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","useEffect","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n controlledTx: Animated.AnimatedValue;\n currentIndex: number;\n itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n const {\n controlledTx,\n currentIndex,\n itemWidth,\n } = params;\n\n useEffect(() => {\n const newTx = -currentIndex * itemWidth;\n controlledTx.setValue(newTx);\n }, [\n controlledTx,\n currentIndex,\n itemWidth,\n ]);\n};\n"],"mappings":";;;;;;;AAAA;;AASe,SAASA,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,IAAAI,gBAAA,EAAU,MAAM;IACZ,MAAMC,KAAK,GAAG,CAACH,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACK,QAAb,CAAsBD,KAAtB;EACH,CAHD,EAGG,CACCJ,YADD,EAECC,YAFD,EAGCC,SAHD,CAHH;AAQH;;AAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","offsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(offsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
export default function useDimensionChangeReaction(params) {
|
|
3
|
-
const {
|
|
4
|
-
controlledTx,
|
|
5
|
-
currentIndex,
|
|
6
|
-
itemWidth
|
|
7
|
-
} = params;
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
const newTx = -currentIndex * itemWidth;
|
|
10
|
-
controlledTx.setValue(newTx);
|
|
11
|
-
}, [controlledTx, currentIndex, itemWidth]);
|
|
12
|
-
}
|
|
13
|
-
;
|
|
14
|
-
//# sourceMappingURL=useDimensionChangeReaction.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n controlledTx: Animated.AnimatedValue;\n currentIndex: number;\n itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n const {\n controlledTx,\n currentIndex,\n itemWidth,\n } = params;\n\n useEffect(() => {\n const newTx = -currentIndex * itemWidth;\n controlledTx.setValue(newTx);\n }, [\n controlledTx,\n currentIndex,\n itemWidth,\n ]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AASA,eAAe,SAASC,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMAF,SAAS,CAAC,MAAM;IACZ,MAAMM,KAAK,GAAG,CAACF,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACI,QAAb,CAAsBD,KAAtB;EACH,CAHQ,EAGN,CACCH,YADD,EAECC,YAFD,EAGCC,SAHD,CAHM,CAAT;AAQH;AAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useMemo","Animated","InternalContext","OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","numberOfData","length","interpolationConfigOnLoop","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","offsetX","interpolate","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n const {\n itemWidth,\n data,\n globalInterpolation,\n loop,\n } = useContext(InternalContext);\n\n const numberOfData = data.length;\n\n const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = Math.abs(itemWidth * numberOfData);\n const halfOfItemWidth = 0.5 * itemWidth;\n\n const positiveCount = Math.round(lastIndex / 2);\n const startPosition = index > positiveCount\n ? (index - numberOfData) * itemWidth\n : itemWidth * index;\n\n const max = positiveCount * itemWidth;\n const min = -((lastIndex - positiveCount) * itemWidth);\n\n const inputRange = [\n -maxWidth,\n min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n min - halfOfItemWidth - startPosition,\n 0,\n max + halfOfItemWidth - startPosition,\n max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n maxWidth,\n ];\n\n const outputRange = [\n startPosition,\n max + halfOfItemWidth - Number.MIN_VALUE,\n min - halfOfItemWidth,\n startPosition,\n max + halfOfItemWidth,\n min - halfOfItemWidth + Number.MIN_VALUE,\n startPosition,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n const lastIndex = numberOfData - 1;\n const maxWidth = itemWidth * lastIndex;\n const startPosition = itemWidth * index;\n const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n const inputRange = [\n -(maxWidth + itemWidth), // overscroll\n -maxWidth,\n 0,\n itemWidth, // overscroll\n ];\n\n const outputRange = [\n -maxWidth + startPosition - friction,\n -maxWidth + startPosition,\n startPosition,\n startPosition + friction,\n ];\n\n return {\n inputRange,\n outputRange,\n extrapolate: 'clamp',\n };\n }, [\n index,\n itemWidth,\n numberOfData,\n ]);\n\n return useMemo(() => {\n const interpolationConfig = loop\n ? interpolationConfigOnLoop\n : interpolationConfigOnNoLoop;\n\n const offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n return Animated.divide(offsetX, itemWidth);\n }, [\n globalInterpolation,\n interpolationConfigOnLoop,\n interpolationConfigOnNoLoop,\n itemWidth,\n loop,\n ]);\n};\n"],"mappings":"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"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
3
|
-
|
|
4
|
-
export interface Parameters {
|
|
5
|
-
controlledTx: Animated.AnimatedValue;
|
|
6
|
-
currentIndex: number;
|
|
7
|
-
itemWidth: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export default function useDimensionChangeReaction(params: Parameters) {
|
|
11
|
-
const {
|
|
12
|
-
controlledTx,
|
|
13
|
-
currentIndex,
|
|
14
|
-
itemWidth,
|
|
15
|
-
} = params;
|
|
16
|
-
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
const newTx = -currentIndex * itemWidth;
|
|
19
|
-
controlledTx.setValue(newTx);
|
|
20
|
-
}, [
|
|
21
|
-
controlledTx,
|
|
22
|
-
currentIndex,
|
|
23
|
-
itemWidth,
|
|
24
|
-
]);
|
|
25
|
-
};
|