@fountain-ui/lab 2.0.0-beta.12 → 2.0.0-beta.13

package/src/ViewPager/ViewPagerNative.tsx

@@ -18,20 +18,39 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
-        UNSTABLE_sharedIndex,
+        UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSharedValue<number>(initialPage);
 
-    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const desiredPageRef = useRef<number>(NaN);
 
     const pagerRef = useRef<RNViewPager | null>(null);
 
     const animationFrameRef = useRef<number>(NaN);
 
-    const setPage = useCallback((newIndex: number) => {
+    const setPage = useCallback((newPage: number) => {
+        if (!Number.isInteger(newPage)) {
+            return;
+        }
+
         animationFrameRef.current = requestAnimationFrame(() => {
-            pagerRef.current?.setPage(newIndex);
+            if (Number.isFinite(desiredPageRef.current)) {
+                if (sharedPage.value === desiredPageRef.current) {
+                    // end of state machine. clear desired page.
+                    desiredPageRef.current = NaN;
+                    return;
+                }
+
+                if (newPage === desiredPageRef.current) {
+                    return;
+                }
+            }
+
+            desiredPageRef.current = newPage;
+            pagerRef.current?.setPage(newPage);
         });
     }, []);
 
@@ -44,7 +63,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
     }, []);
 
     useAnimatedReaction(
-        () => sharedIndex.value,
+        () => sharedPage.value,
         (result) => {
             runOnJS(setPage)(result);
         },
@@ -52,17 +71,31 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
     );
 
     const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
-        const currentIndex = sharedIndex.value;
-        const nextIndex = e.nativeEvent.position;
+        if (Number.isFinite(desiredPageRef.current)) {
+            // onPageSelected is called from outer controlling mechanism
+            // e.g. sharedPage.value is changed, setPage() is called
+            // Due to the onPageSelected bug,
+            // we don't trust the value from event, (e.nativeEvent.position)
+            // other than that trust the value from desiredPageRef.
+
+            const desiredPage = desiredPageRef.current;
+
+            if (sharedPage.value === desiredPage) {
+                // end of state machine. clear desired page.
+                desiredPageRef.current = NaN;
+            } else {
+                sharedPage.value = desiredPage;
+            }
 
-        if (currentIndex === nextIndex) {
-            return;
-        }
+            onChange?.(desiredPage);
+        } else {
+            const trustfulNextPage = e.nativeEvent.position;
+
+            desiredPageRef.current = trustfulNextPage;
 
-        sharedIndex.value = nextIndex;
+            sharedPage.value = trustfulNextPage;
 
-        if (onChange) {
-            onChange(nextIndex);
+            onChange?.(trustfulNextPage);
         }
     }, [onChange]);
 
@@ -77,7 +110,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
     return (
         <RNViewPager
             ref={pagerRef}
-            initialPage={initialPage}
+            initialPage={sharedPage.value}
             keyboardDismissMode={keyboardDismissMode}
             onPageSelected={handlePageSelected}
             pageMargin={8}
@@ -92,7 +125,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
                     loading={loading}
                     offscreenPageRerenderLimit={offscreenPageRerenderLimit}
                     rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedIndex}
+                    sharedIndex={sharedPage}
                 />
             ))}
         </RNViewPager>

package/src/ViewPager/ViewPagerProps.ts

@@ -83,5 +83,5 @@ export default interface ViewPagerProps extends ComponentProps<{
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedIndex?: SharedValue<number>;
+    UNSTABLE_sharedPage?: SharedValue<number>;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, useImperativeHandle, useCallback } from 'react';
+import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
 import { View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
 import { StyleSheet } from '@fountain-ui/core';
@@ -22,16 +22,16 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
-        UNSTABLE_sharedIndex,
+        UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSharedValue<number>(initialPage);
 
-    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
 
-    const setPage = useCallback((newIndex: number) => {
-        sharedIndex.value = newIndex;
-    }, [sharedIndex]);
+    const setPage = useCallback((newPage: number) => {
+        sharedPage.value = newPage;
+    }, [sharedPage]);
 
     useImperativeHandle(
         ref,
@@ -51,7 +51,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
                     loading={loading}
                     offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
                     rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedIndex}
+                    sharedIndex={sharedPage}
                 />
             ))}
         </View>