@fountain-ui/lab 2.0.0-beta.10 → 2.0.0-beta.11

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,73 +1,78 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
 import RNViewPager from 'react-native-pager-view';
+import { useSharedValue } from 'react-native-reanimated';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
 
-export default function ViewPager(props: ViewPagerProps) {
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        index,
+        initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
         onChange,
         pageComponent = defaultPageComponent,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
     } = props;
 
-    const indexRef = useRef<number>(index);
+    const sharedIndex = useSharedValue<number>(initialPage);
     const pagerRef = useRef<RNViewPager | null>(null);
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-        enableNeighborPageRerender,
-    });
+    const setPage = (newIndex: number) => {
+        requestAnimationFrame(() => {
+            pagerRef.current?.setPage(newIndex);
+        });
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [],
+    );
 
     const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
-        indexRef.current = e.nativeEvent.position;
+        const currentIndex = sharedIndex.value;
+        const nextIndex = e.nativeEvent.position;
+
+        if (currentIndex === nextIndex) {
+            return;
+        }
+
+        sharedIndex.value = nextIndex;
 
         if (onChange) {
-            onChange(indexRef.current);
+            onChange(nextIndex);
         }
     }, [onChange]);
 
-    useEffect(() => {
-        const handleNumber = index !== indexRef.current
-            ? requestAnimationFrame(() => pagerRef.current?.setPage(index))
-            : undefined;
-
-        return () => {
-            if (handleNumber) {
-                cancelAnimationFrame(handleNumber);
-            }
-        };
-    }, [index]);
+    const PageComponent = pageComponent;
 
     return (
         <RNViewPager
-            initialPage={index}
+            ref={pagerRef}
+            initialPage={initialPage}
             keyboardDismissMode={keyboardDismissMode}
             onPageSelected={handlePageSelected}
             pageMargin={8}
-            ref={pagerRef}
             scrollEnabled={scrollEnabled}
             style={style}
         >
-            {renderer(children)}
+            {Children.map(children, (child, index) => (
+                <PageComponent
+                    key={index}
+                    children={child}
+                    index={index}
+                    loading={loading}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </RNViewPager>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPagerProps.ts

@@ -1,41 +1,42 @@
-import React from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import type { ComponentProps } from '@fountain-ui/core';
 
 export type KeyboardDismissMode = 'none' | 'on-drag';
 
-export type PageProps = React.PropsWithChildren<ViewProps> & {
-    isNeighbor: boolean;
-    isVisible: boolean;
-    rerenderKey?: any;
+export type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    loading: ViewPagerProps['loading'];
+    sharedIndex: SharedValue<number>;
+    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
 };
 
-export type PageComponent = React.ComponentType<PageProps>;
+export type PageComponent = ComponentType<PageProps>;
 
 export type Loading = 'lazy' | 'eager';
 
-export default interface ViewPagerProps extends ComponentProps<{
+export interface ViewPagerInstance {
     /**
-     * Collection of ViewPager components.
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
      */
-    children?: React.ReactNode;
+    setPage: (index: number) => void;
+}
 
-    /**
-     * If `true`, enable page visible hint.
-     * @default false
-     */
-    enableVisibleHint?: boolean;
+export default interface ViewPagerProps extends ComponentProps<{
+    ref?: Ref<ViewPagerInstance>;
 
     /**
-     * If `true`, Based on the current index, the pages on the left and right are also rerender.
-     * @default false
+     * Collection of ViewPager components.
      */
-    enableNeighborPageRerender?: boolean;
+    children?: ReactNode;
 
     /**
-     * A number representing the index of the active page.
+     * Index of initial page that should be selected.
+     * @default 0
      */
-    index: number,
+    initialPage?: number;
 
     /**
      * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { Children, forwardRef, useImperativeHandle } from 'react';
+import { View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
 
 const styles = StyleSheet.create({
     root: {
@@ -15,38 +12,46 @@ const styles = StyleSheet.create({
         overflow: 'auto',
         position: 'relative',
     },
-    none: { display: 'none' },
 });
 
-export default function ViewPager(props: ViewPagerProps) {
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
-        index,
+        initialPage = defaultInitialPage,
         loading = defaultLoading,
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
     } = props;
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        enableNeighborPageRerender,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-    });
+    const sharedIndex = useSharedValue<number>(initialPage);
+
+    const setPage = (newIndex: number) => {
+        sharedIndex.value = newIndex;
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [],
+    );
+
+    const PageComponent = pageComponent;
 
     return (
         <View style={[styles.root, style]}>
-            {React.Children.map(renderer(children), (child, i) =>
-                React.cloneElement(child as React.ReactElement, {
-                    isVisible: i === index,
-                    style: i !== index ? styles.none : StyleSheet.absoluteFill,
-                }),
-            )}
+            {Children.map(children, (child, index) => (
+                <PageComponent
+                    key={index}
+                    children={child}
+                    index={index}
+                    loading={loading}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </View>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/index.ts

@@ -1,2 +1,2 @@
 export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';

package/src/ViewPager/utils.tsx

@@ -1,62 +1,9 @@
 import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
+import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
 
-export interface PageState {
-    visited?: boolean;
-}
-
-export interface PageRenderOption {
-    enableVisibleHint: boolean;
-    enableNeighborPageRerender: boolean;
-    index: number;
-    loading: Loading;
-    pageComponent: PageComponent;
-    pageForceRerenderKey?: any;
-}
-
-export interface PageRenderer {
-    (children: ViewPagerProps['children']): React.ReactNode;
-}
-
-export const defaultEnableVisibleHint: boolean = false;
-
-export const defaultEnableNeighborPageRerender: boolean = false;
+export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
 export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;
-
-export const usePageRenderer = ({
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender,
-}: PageRenderOption): PageRenderer => {
-    const pagesStateRef = React.useRef<Array<PageState>>([]);
-
-    pagesStateRef.current[currentIndex] = {
-        ...pagesStateRef.current[currentIndex],
-        visited: true,
-    };
-
-    return (children => React.Children.map(children, (child, index) => {
-        const visited = pagesStateRef.current[index]?.visited ?? false;
-        const content = (loading === 'eager' || visited) ? child : null;
-
-        const isVisible = enableVisibleHint ? (index === currentIndex) : false;
-        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-
-        return (
-            <PageComponent
-                key={index}
-                children={content}
-                isNeighbor={enableNeighborPageRerender && isNeighborIndex}
-                isVisible={isVisible}
-                rerenderKey={pageForceRerenderKey}
-            />
-        );
-    }));
-};