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

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,66 +1,102 @@
-import React from 'react';
-import RNViewPager, { ViewPagerOnPageSelectedEvent } from '@react-native-community/viewpager';
+import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
+import RNViewPager from 'react-native-pager-view';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
-
-export default function ViewPager(props: ViewPagerProps) {
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        index,
+        initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
         onChange,
         pageComponent = defaultPageComponent,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const indexRef = React.useRef<number>(index);
-    const pagerRef = React.useRef<RNViewPager | null>(null);
+    const fallbackSharedIndex = useSharedValue<number>(initialPage);
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-        enableNeighborPageRerender,
-    });
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+
+    const pagerRef = useRef<RNViewPager | null>(null);
+
+    const animationFrameRef = useRef<number>(NaN);
+
+    const setPage = useCallback((newIndex: number) => {
+        animationFrameRef.current = requestAnimationFrame(() => {
+            pagerRef.current?.setPage(newIndex);
+        });
+    }, []);
 
-    const handlePageSelected = React.useCallback((e: ViewPagerOnPageSelectedEvent) => {
-        indexRef.current = e.nativeEvent.position;
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+
+    useAnimatedReaction(
+        () => sharedIndex.value,
+        (result) => {
+            runOnJS(setPage)(result);
+        },
+        [setPage],
+    );
+
+    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
+        const currentIndex = sharedIndex.value;
+        const nextIndex = e.nativeEvent.position;
+
+        if (currentIndex === nextIndex) {
+            return;
+        }
+
+        sharedIndex.value = nextIndex;
 
         if (onChange) {
-            onChange(indexRef.current);
+            onChange(nextIndex);
         }
     }, [onChange]);
 
-    React.useEffect(() => {
-        if (index !== indexRef.current) {
-            pagerRef.current?.setPage(index);
-        }
-    }, [index]);
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    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}
+                    offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </RNViewPager>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPagerProps.ts

@@ -1,41 +1,43 @@
-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'];
+    offscreenPageRerenderLimit: number;
+    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`).
@@ -43,6 +45,13 @@ export default interface ViewPagerProps extends ComponentProps<{
      */
     loading?: Loading;
 
+    /**
+     * Mobile only. The number of pages that should be re-rendered to either side of the current page.
+     * Changing this value after the component mount has no effect.
+     * @default 0
+     */
+    offscreenPageRerenderLimit?: number;
+
     /**
      * Callback fired when an index is changed.
      */
@@ -70,4 +79,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedIndex?: SharedValue<number>;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { Children, forwardRef, useImperativeHandle, useCallback } 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,50 @@ 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,
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        enableNeighborPageRerender,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-    });
+    const fallbackSharedIndex = useSharedValue<number>(initialPage);
+
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+
+    const setPage = useCallback((newIndex: number) => {
+        sharedIndex.value = newIndex;
+    }, [sharedIndex]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [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}
+                    offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </View>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/index.native.ts

@@ -1 +1,2 @@
 export { default } from './ViewPagerNative';
+export { useViewPagerPageState } from './PageStateContext';

package/src/ViewPager/index.ts

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

package/src/ViewPager/utils.tsx

@@ -1,62 +1,10 @@
-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;
+export const defaultOffscreenPageRerenderLimit: number = 0;
 
-        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}
-            />
-        );
-    }));
-};
+export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;

package/src/ViewabilityTrackerView/Viewability.ts

@@ -0,0 +1,3 @@
+export default interface Viewability {
+    visible: boolean;
+}

package/src/ViewabilityTrackerView/ViewabilityTrackerView.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import useViewabilityTracker from './useViewabilityTracker';
+import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
+
+
+export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps) {
+    const {
+        enabled = true,
+        measurementIntervalMillis = 1000,
+        onViewabilityChange,
+        visiblePercentThreshold = 50,
+        ...otherProps
+    } = props;
+
+    const viewRef = useRef<View>(null);
+
+    useViewabilityTracker({
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    });
+
+    return (
+        <View
+            {...otherProps}
+            ref={viewRef}
+            collapsable={false}
+        />
+    );
+};

package/src/ViewabilityTrackerView/ViewabilityTrackerViewProps.ts

@@ -0,0 +1,25 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '@fountain-ui/core';
+import type Viewability from './Viewability';
+
+export default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * @default true
+     */
+    enabled?: boolean;
+
+    /**
+     * @default 1000
+     */
+    measurementIntervalMillis?: number;
+
+    /**
+     *
+     */
+    onViewabilityChange?: (viewability: Viewability) => void;
+
+    /**
+     * @default 50
+     */
+    visiblePercentThreshold?: number;
+}> {}

package/src/ViewabilityTrackerView/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ViewabilityTrackerView';
+export type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';

package/src/ViewabilityTrackerView/measureViewability.ts

@@ -0,0 +1,56 @@
+import type { View } from 'react-native';
+
+interface Rect {
+    top: number,
+    bottom: number;
+    left: number;
+    right: number;
+}
+
+export interface ViewabilityDetail {
+    visiblePercent: number;
+}
+
+export interface MeasureViewabilityParameters {
+    view: View;
+    windowWidth: number;
+    windowHeight: number;
+    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;
+}
+
+const computeRectSize = (rect: Rect): number =>
+    (rect.bottom - rect.top) * (rect.right - rect.left);
+
+const normalizePagePosition = (value?: number): number =>
+    (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;
+
+const normalizeViewSize = (size: number): number =>
+    Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
+
+const clamp = (value: number, min: number, max: number): number =>
+    Math.min(Math.max(value, min), max);
+
+export default function measureViewability({
+    view,
+    windowWidth,
+    windowHeight,
+    onViewabilityDetailMeasured,
+}: MeasureViewabilityParameters) {
+    view.measure((x, y, width, height, pageX?: number, pageY?: number) => {
+        const safePageX = normalizePagePosition(pageX);
+        const safePageY = normalizePagePosition(pageY);
+
+        const visibleRect: Rect = {
+            top: clamp(safePageY, 0, windowHeight),
+            bottom: clamp(safePageY + height, 0, windowHeight),
+            left: clamp(safePageX, 0, windowWidth),
+            right: clamp(safePageX + width, 0, windowWidth),
+        };
+
+        const visibleRectSize = computeRectSize(visibleRect);
+        const viewSize = normalizeViewSize(width * height);
+        const visiblePercent = Math.round(visibleRectSize / viewSize * 100);
+
+        onViewabilityDetailMeasured?.({ visiblePercent });
+    });
+};

package/src/ViewabilityTrackerView/useViewabilityTracker.ts

@@ -0,0 +1,85 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+import type { View } from 'react-native';
+import { useValidWindowDimensions } from '@fountain-ui/core';
+import { useDeferredExecutor } from '../hooks';
+import type { ViewabilityDetail } from './measureViewability';
+import measureViewability from './measureViewability';
+import type Viewability from './Viewability';
+
+export interface ViewabilityTrackerConfig {
+    enabled: boolean;
+    measurementIntervalMillis: number;
+    onViewabilityChange?: (viewability: Viewability) => void;
+    viewRef: RefObject<View>;
+    visiblePercentThreshold: number;
+}
+
+const initialViewability: Readonly<Viewability> = { visible: false };
+
+export default function useViewabilityTracker(config: ViewabilityTrackerConfig) {
+    const {
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    } = config;
+
+    const viewabilityRef = useRef<Viewability>(initialViewability);
+
+    const executor = useDeferredExecutor();
+
+    const window = useValidWindowDimensions();
+
+    const maybeMeasureRecursive = () => {
+        if (!enabled) {
+            return;
+        }
+
+        const mapViewabilityDetailToViewability = (detail: ViewabilityDetail): Viewability => {
+            return { visible: detail.visiblePercent >= visiblePercentThreshold };
+        };
+
+        const isViewabilityEquals = (a: Viewability, b: Viewability): boolean => {
+            return a.visible === b.visible;
+        };
+
+        const dispatchViewabilityChanged = (viewability: Viewability) => {
+            executor.execute(() => onViewabilityChange?.(viewability));
+        };
+
+        const onViewabilityDetailMeasured = (detail: ViewabilityDetail) => {
+            const nextViewability = mapViewabilityDetailToViewability(detail);
+
+            if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {
+                viewabilityRef.current = nextViewability;
+
+                dispatchViewabilityChanged(nextViewability);
+            }
+
+            maybeMeasureRecursive();
+        };
+
+        const maybeMeasure = () => {
+            if (viewRef.current) {
+                measureViewability({
+                    view: viewRef.current,
+                    windowWidth: window.width,
+                    windowHeight: window.height,
+                    onViewabilityDetailMeasured,
+                });
+            }
+        };
+
+        executor.execute(maybeMeasure, measurementIntervalMillis);
+    };
+
+    useEffect(() => {
+        if (enabled) {
+            maybeMeasureRecursive();
+        } else {
+            executor.cancel();
+        }
+    }, [enabled]);
+};

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+export { default as useDeferredExecutor } from './useDeferredExecutor';
+export { default as useIsMounted } from './useIsMounted';
 export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';
 export { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';
 

package/src/hooks/useDeferredExecutor.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef } from 'react';
+import useIsMounted from './useIsMounted';
+
+export interface Runnable {
+    (): void;
+}
+
+export interface DeferredExecute {
+    (runnable: Runnable, delay?: number): void;
+}
+
+export interface DeferredExecutor {
+    cancel: () => void;
+    execute: DeferredExecute;
+}
+
+export default function useDeferredExecutor(): DeferredExecutor {
+    const isMounted = useIsMounted();
+    const timeoutIdRef = useRef<NodeJS.Timer | null>(null);
+
+    const cancel = useCallback(() => {
+        if (timeoutIdRef.current) {
+            clearTimeout(timeoutIdRef.current);
+        }
+    }, []);
+
+    useEffect(() => {
+        return cancel;
+    }, []);
+
+    const execute = useCallback<DeferredExecute>((runnable, delay) => {
+        if (!isMounted()) {
+            return;
+        }
+
+        cancel();
+
+        if (Number.isFinite(delay)) {
+            timeoutIdRef.current = setTimeout(() => runnable(), delay);
+        } else {
+            runnable();
+        }
+    }, []);
+
+    return { cancel, execute };
+};

package/src/hooks/useHeight.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);