@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.
Files changed (154) hide show
  1. package/build/commonjs/Carousel/Carousel.js +39 -37
  2. package/build/commonjs/Carousel/Carousel.js.map +1 -1
  3. package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
  4. package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js +2 -2
  5. package/build/commonjs/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
  6. package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js +15 -15
  7. package/build/commonjs/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
  8. package/build/commonjs/Carousel/components/InternalContext.js.map +1 -1
  9. package/build/commonjs/Carousel/components/ItemView.js +6 -4
  10. package/build/commonjs/Carousel/components/ItemView.js.map +1 -1
  11. package/build/commonjs/Carousel/components/RootView.js +21 -3
  12. package/build/commonjs/Carousel/components/RootView.js.map +1 -1
  13. package/build/commonjs/Carousel/components/ScrollViewGesture.js +18 -13
  14. package/build/commonjs/Carousel/components/ScrollViewGesture.js.map +1 -1
  15. package/build/commonjs/Carousel/{hooks → components}/useItemInterpolation.js +6 -4
  16. package/build/commonjs/Carousel/components/useItemInterpolation.js.map +1 -0
  17. package/build/commonjs/Carousel/hooks/index.js +0 -16
  18. package/build/commonjs/Carousel/hooks/index.js.map +1 -1
  19. package/build/commonjs/Carousel/hooks/useAutoplayController.js +4 -1
  20. package/build/commonjs/Carousel/hooks/useAutoplayController.js.map +1 -1
  21. package/build/commonjs/Carousel/hooks/useIndexController.js +15 -46
  22. package/build/commonjs/Carousel/hooks/useIndexController.js.map +1 -1
  23. package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js +12 -12
  24. package/build/commonjs/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
  25. package/build/commonjs/Carousel/hooks/usePagingAnimation.js +121 -69
  26. package/build/commonjs/Carousel/hooks/usePagingAnimation.js.map +1 -1
  27. package/build/commonjs/Carousel/tick.js +16 -0
  28. package/build/commonjs/Carousel/tick.js.map +1 -0
  29. package/build/commonjs/Carousel/types.js.map +1 -1
  30. package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +53 -47
  31. package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
  32. package/build/commonjs/ViewPager/InternalContext.js +17 -0
  33. package/build/commonjs/ViewPager/InternalContext.js.map +1 -0
  34. package/build/commonjs/ViewPager/ViewPagerNative.js +74 -23
  35. package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
  36. package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
  37. package/build/commonjs/ViewPager/ViewPagerWeb.js +23 -12
  38. package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
  39. package/build/commonjs/ViewPager/index.js.map +1 -1
  40. package/build/commonjs/ViewPager/types.js +6 -0
  41. package/build/commonjs/ViewPager/types.js.map +1 -0
  42. package/build/commonjs/ViewPager/usePageStore.js +35 -0
  43. package/build/commonjs/ViewPager/usePageStore.js.map +1 -0
  44. package/build/commonjs/ViewPager/utils.js.map +1 -1
  45. package/build/commonjs/ViewabilityTrackerView/measureViewability.js +6 -6
  46. package/build/commonjs/ViewabilityTrackerView/measureViewability.js.map +1 -1
  47. package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +1 -1
  48. package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
  49. package/build/module/Carousel/Carousel.js +39 -39
  50. package/build/module/Carousel/Carousel.js.map +1 -1
  51. package/build/module/Carousel/CarouselProps.js.map +1 -1
  52. package/build/module/Carousel/animation/createDefaultScrollAnimation.js +2 -2
  53. package/build/module/Carousel/animation/createDefaultScrollAnimation.js.map +1 -1
  54. package/build/module/Carousel/animation/parallaxItemStyleFactory.js +15 -15
  55. package/build/module/Carousel/animation/parallaxItemStyleFactory.js.map +1 -1
  56. package/build/module/Carousel/components/InternalContext.js.map +1 -1
  57. package/build/module/Carousel/components/ItemView.js +5 -3
  58. package/build/module/Carousel/components/ItemView.js.map +1 -1
  59. package/build/module/Carousel/components/RootView.js +22 -4
  60. package/build/module/Carousel/components/RootView.js.map +1 -1
  61. package/build/module/Carousel/components/ScrollViewGesture.js +18 -13
  62. package/build/module/Carousel/components/ScrollViewGesture.js.map +1 -1
  63. package/build/module/Carousel/{hooks → components}/useItemInterpolation.js +3 -3
  64. package/build/module/Carousel/components/useItemInterpolation.js.map +1 -0
  65. package/build/module/Carousel/hooks/index.js +0 -2
  66. package/build/module/Carousel/hooks/index.js.map +1 -1
  67. package/build/module/Carousel/hooks/useAutoplayController.js +4 -1
  68. package/build/module/Carousel/hooks/useAutoplayController.js.map +1 -1
  69. package/build/module/Carousel/hooks/useIndexController.js +14 -39
  70. package/build/module/Carousel/hooks/useIndexController.js.map +1 -1
  71. package/build/module/Carousel/hooks/useItemVisibilityStore.js +10 -11
  72. package/build/module/Carousel/hooks/useItemVisibilityStore.js.map +1 -1
  73. package/build/module/Carousel/hooks/usePagingAnimation.js +122 -69
  74. package/build/module/Carousel/hooks/usePagingAnimation.js.map +1 -1
  75. package/build/module/Carousel/tick.js +6 -0
  76. package/build/module/Carousel/tick.js.map +1 -0
  77. package/build/module/Carousel/types.js.map +1 -1
  78. package/build/module/ViewPager/ChildrenMemoizedPage.js +53 -47
  79. package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
  80. package/build/module/ViewPager/InternalContext.js +7 -0
  81. package/build/module/ViewPager/InternalContext.js.map +1 -0
  82. package/build/module/ViewPager/ViewPagerNative.js +72 -23
  83. package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
  84. package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
  85. package/build/module/ViewPager/ViewPagerWeb.js +21 -13
  86. package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
  87. package/build/module/ViewPager/index.js.map +1 -1
  88. package/build/module/ViewPager/types.js +2 -0
  89. package/build/module/ViewPager/types.js.map +1 -0
  90. package/build/module/ViewPager/usePageStore.js +25 -0
  91. package/build/module/ViewPager/usePageStore.js.map +1 -0
  92. package/build/module/ViewPager/utils.js.map +1 -1
  93. package/build/module/ViewabilityTrackerView/measureViewability.js +2 -2
  94. package/build/module/ViewabilityTrackerView/measureViewability.js.map +1 -1
  95. package/build/module/hooks/useUnstableCollapsibleAppBar.js +1 -1
  96. package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
  97. package/build/typescript/Carousel/CarouselProps.d.ts +4 -3
  98. package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts +5 -5
  99. package/build/typescript/Carousel/components/InternalContext.d.ts +2 -2
  100. package/build/typescript/Carousel/components/ItemView.d.ts +2 -0
  101. package/build/typescript/Carousel/components/RootView.d.ts +4 -4
  102. package/build/typescript/Carousel/components/ScrollViewGesture.d.ts +3 -3
  103. package/build/typescript/Carousel/{hooks → components}/useItemInterpolation.d.ts +0 -0
  104. package/build/typescript/Carousel/hooks/index.d.ts +0 -2
  105. package/build/typescript/Carousel/hooks/useIndexController.d.ts +0 -2
  106. package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts +5 -2
  107. package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts +8 -10
  108. package/build/typescript/Carousel/tick.d.ts +2 -0
  109. package/build/typescript/Carousel/types.d.ts +26 -5
  110. package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts +1 -1
  111. package/build/typescript/ViewPager/InternalContext.d.ts +7 -0
  112. package/build/typescript/ViewPager/ViewPagerNative.d.ts +2 -2
  113. package/build/typescript/ViewPager/ViewPagerProps.d.ts +4 -22
  114. package/build/typescript/ViewPager/ViewPagerWeb.d.ts +2 -2
  115. package/build/typescript/ViewPager/index.d.ts +2 -1
  116. package/build/typescript/ViewPager/types.d.ts +19 -0
  117. package/build/typescript/ViewPager/usePageStore.d.ts +2 -0
  118. package/build/typescript/ViewPager/utils.d.ts +1 -1
  119. package/package.json +3 -3
  120. package/src/Carousel/Carousel.tsx +32 -40
  121. package/src/Carousel/CarouselProps.ts +4 -3
  122. package/src/Carousel/animation/createDefaultScrollAnimation.ts +2 -2
  123. package/src/Carousel/animation/parallaxItemStyleFactory.ts +24 -24
  124. package/src/Carousel/components/InternalContext.ts +2 -2
  125. package/src/Carousel/components/ItemView.tsx +13 -3
  126. package/src/Carousel/components/RootView.tsx +19 -6
  127. package/src/Carousel/components/ScrollViewGesture.tsx +23 -15
  128. package/src/Carousel/{hooks → components}/useItemInterpolation.ts +3 -3
  129. package/src/Carousel/hooks/index.ts +0 -2
  130. package/src/Carousel/hooks/useAutoplayController.ts +4 -1
  131. package/src/Carousel/hooks/useIndexController.tsx +14 -44
  132. package/src/Carousel/hooks/useItemVisibilityStore.ts +17 -13
  133. package/src/Carousel/hooks/usePagingAnimation.ts +161 -83
  134. package/src/Carousel/tick.ts +6 -0
  135. package/src/Carousel/types.ts +34 -5
  136. package/src/ViewPager/ChildrenMemoizedPage.tsx +53 -50
  137. package/src/ViewPager/InternalContext.ts +13 -0
  138. package/src/ViewPager/ViewPagerNative.tsx +91 -44
  139. package/src/ViewPager/ViewPagerProps.ts +4 -27
  140. package/src/ViewPager/ViewPagerWeb.tsx +28 -23
  141. package/src/ViewPager/index.ts +2 -1
  142. package/src/ViewPager/types.ts +24 -0
  143. package/src/ViewPager/usePageStore.ts +30 -0
  144. package/src/ViewPager/utils.tsx +1 -1
  145. package/src/ViewabilityTrackerView/measureViewability.ts +1 -3
  146. package/src/hooks/useUnstableCollapsibleAppBar.ts +1 -1
  147. package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js +0 -23
  148. package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
  149. package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map +0 -1
  150. package/build/module/Carousel/hooks/useDimensionChangeReaction.js +0 -14
  151. package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map +0 -1
  152. package/build/module/Carousel/hooks/useItemInterpolation.js.map +0 -1
  153. package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts +0 -7
  154. 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 { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
4
+ import { useSyncAnimatedValue } from '@fountain-ui/core';
5
5
  import type ViewPagerProps from './ViewPagerProps';
6
- import type { ViewPagerInstance } from './ViewPagerProps';
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
- UNSTABLE_sharedIndex,
23
+ UNSTABLE_sharedPage,
22
24
  } = props;
23
25
 
24
- const fallbackSharedIndex = useSharedValue<number>(initialPage);
26
+ const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
25
27
 
26
- const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
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((newIndex: number) => {
38
+ const setPage = useCallback((newPage: number) => {
39
+ if (!Number.isInteger(newPage)) {
40
+ return;
41
+ }
42
+
33
43
  animationFrameRef.current = requestAnimationFrame(() => {
34
- pagerRef.current?.setPage(newIndex);
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
- useAnimatedReaction(
47
- () => sharedIndex.value,
48
- (result) => {
49
- runOnJS(setPage)(result);
50
- },
51
- [setPage],
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
- const currentIndex = sharedIndex.value;
56
- const nextIndex = e.nativeEvent.position;
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
- if (currentIndex === nextIndex) {
59
- return;
60
- }
99
+ onChange?.(desiredPage);
100
+ } else {
101
+ const trustfulNextPage = e.nativeEvent.position;
61
102
 
62
- sharedIndex.value = nextIndex;
103
+ if (trustfulNextPage !== pageRef.current) {
104
+ desiredPageRef.current = trustfulNextPage;
105
+ sharedPage.animatedValue.setValue(trustfulNextPage);
63
106
 
64
- if (onChange) {
65
- onChange(nextIndex);
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
- <RNViewPager
79
- ref={pagerRef}
80
- initialPage={initialPage}
81
- keyboardDismissMode={keyboardDismissMode}
82
- onPageSelected={handlePageSelected}
83
- pageMargin={8}
84
- scrollEnabled={scrollEnabled}
85
- style={style}
86
- >
87
- {Children.map(children, (child, index) => (
88
- <PageComponent
89
- key={index}
90
- children={child}
91
- index={index}
92
- loading={loading}
93
- offscreenPageRerenderLimit={offscreenPageRerenderLimit}
94
- rerenderKey={pageForceRerenderKey}
95
- sharedIndex={sharedIndex}
96
- />
97
- ))}
98
- </RNViewPager>
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 { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
2
- import type { ViewProps } from 'react-native';
3
- import type { SharedValue } from 'react-native-reanimated';
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
- UNSTABLE_sharedIndex?: SharedValue<number>;
63
+ UNSTABLE_sharedPage?: SyncAnimatedValue;
87
64
  }> {}
@@ -1,10 +1,11 @@
1
- import React, { Children, forwardRef, useImperativeHandle, useCallback } from 'react';
1
+ import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
2
2
  import { View } from 'react-native';
3
- import { useSharedValue } from 'react-native-reanimated';
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 './ViewPagerProps';
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
- UNSTABLE_sharedIndex,
26
+ UNSTABLE_sharedPage,
26
27
  } = props;
27
28
 
28
- const fallbackSharedIndex = useSharedValue<number>(initialPage);
29
+ const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
29
30
 
30
- const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
31
+ const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
31
32
 
32
- const setPage = useCallback((newIndex: number) => {
33
- sharedIndex.value = newIndex;
34
- }, [sharedIndex]);
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
- <View style={[styles.root, style]}>
46
- {Children.map(children, (child, index) => (
47
- <PageComponent
48
- key={index}
49
- children={child}
50
- index={index}
51
- loading={loading}
52
- offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
53
- rerenderKey={pageForceRerenderKey}
54
- sharedIndex={sharedIndex}
55
- />
56
- ))}
57
- </View>
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
 
@@ -1,3 +1,4 @@
1
1
  export { default } from './ViewPagerWeb';
2
- export type { default as ViewPagerProps, ViewPagerInstance } from './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
+ };
@@ -1,5 +1,5 @@
1
- import { Loading, PageComponent } from './ViewPagerProps';
2
1
  import ChildrenMemoizedPage from './ChildrenMemoizedPage';
2
+ import type { Loading, PageComponent } from './types';
3
3
 
4
4
  export const defaultInitialPage: number = 0;
5
5
 
@@ -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,
@@ -222,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
222
222
  duration: ANIMATION_DURATION_MILLIS,
223
223
  });
224
224
  },
225
- }, []);
225
+ }, [appBarHeight]);
226
226
 
227
227
  const hasCollapsible = collapsibleToolbarHeight > 0;
228
228
 
@@ -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,7 +0,0 @@
1
- import { Animated } from 'react-native';
2
- export interface Parameters {
3
- controlledTx: Animated.AnimatedValue;
4
- currentIndex: number;
5
- itemWidth: number;
6
- }
7
- export default function useDimensionChangeReaction(params: Parameters): void;
@@ -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
- };