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

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,98 +1,99 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { Platform, View } from 'react-native';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { StyleSheet } from '@fountain-ui/core';
-import type { PageProps } from './ViewPagerProps';
-
-const OFFSCREEN_RERENDER_LIMIT = 1;
+import type { PageProps } from './types';
+import PageStateContext from './PageStateContext';
+import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
+    fill: { width: '100%', height: '100%' },
     none: { display: 'none' },
 });
 
-interface PageState {
-    active: boolean;
-    visited: boolean;
+interface InternalPageState {
+    isActive: boolean;
+    isLoaded: boolean;
 }
 
 function Page(props: PageProps) {
     const {
         index,
+        initialPage,
         children,
         loading,
-        sharedIndex,
+        offscreenPageRerenderLimit,
     } = props;
 
-    const assumeInitialPageState = (): PageState => {
-        const activeIndex = sharedIndex.value;
+    const { pageStore } = useContext(InternalContext);
 
-        const active = index === activeIndex;
+    const assumeInitialPageState = (): InternalPageState => {
+        const activeIndex = initialPage;
 
-        if (Platform.OS === 'web') {
-            return { active, visited: active };
-        }
+        const isActive = index === activeIndex;
 
         if (loading === 'eager') {
-            return { active, visited: true };
+            return { isActive, isLoaded: true };
         }
 
-        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
-            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
 
-        return { active, visited };
+        return { isActive, isLoaded };
     };
 
-    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);
+    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
 
-    const content = pageState.visited ? children : null;
+    const content = pageState.isLoaded ? children : null;
 
-    const updatePageState = (active: boolean, neighbor: boolean) => {
-        setPageState(prevState => {
-            if (prevState.active !== active) {
-                return { active, visited: active || prevState.visited };
-            }
+    useEffect(() => {
+        return pageStore.subscribe(newPage => {
+            const activeIndex = newPage;
 
-            if (neighbor && !prevState.visited) {
-                return { ...prevState, visited: true };
-            }
+            const isActive = index === activeIndex;
 
-            return prevState;
-        });
-    };
+            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+                && index <= activeIndex + offscreenPageRerenderLimit;
 
-    useAnimatedReaction(
-        () => {
-            const activeIndex = sharedIndex.value;
+            const becomeNeighbor = shouldRerender && !isActive;
 
-            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
-                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+            setPageState(prevState => {
+                if (prevState.isActive !== isActive) {
+                    return {
+                        ...prevState,
+                        isActive,
+                        isLoaded: isActive || prevState.isLoaded,
+                    };
+                }
 
-            const willActive = index === activeIndex;
-            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);
+                if (becomeNeighbor && !prevState.isLoaded) {
+                    return {
+                        ...prevState,
+                        isLoaded: true,
+                    };
+                }
 
-            return { willActive, willNeighbor };
-        },
-        (nextState, prevState) => {
-            const activeStateChanged = nextState.willActive !== prevState?.willActive;
-            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;
+                return prevState;
+            });
+        });
+    }, [pageStore, index]);
 
-            if (activeStateChanged || willNewNeighbor) {
-                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);
-            }
-        },
-        [index],
-    );
+    const contextValue = useMemo(() => ({
+        isActive: pageState.isActive,
+    }), [pageState.isActive]);
 
     const style = Platform.OS === 'web'
-        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)
-        : undefined;
+        ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)
+        : styles.fill;
 
     return (
         <View
-            children={content}
             collapsable={false}
             style={style}
-        />
+        >
+            <PageStateContext.Provider value={contextValue}>
+                {content}
+            </PageStateContext.Provider>
+        </View>
     );
 }
 

package/src/ViewPager/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+import { MockStore } from '@fountain-ui/core';
+
+export interface InternalContextValue {
+    pageStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    pageStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/ViewPager/PageStateContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface PageState {
+    isActive: boolean;
+}
+
+const initialPageState: Readonly<PageState> = { isActive: false };
+
+const PageStateContext = createContext<PageState>(initialPageState);
+
+export const useViewPagerPageState = () => {
+    return useContext(PageStateContext);
+};
+
+export default PageStateContext;

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,10 +1,12 @@
-import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+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 { useSharedValue } from 'react-native-reanimated';
+import { useSyncAnimatedValue } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
-import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
+import type { ViewPagerInstance } from './types';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
+import usePageStore from './usePageStore';
+import InternalContext from './InternalContext';
 
 const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
@@ -12,66 +14,135 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
         onChange,
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
+        UNSTABLE_sharedPage,
     } = props;
 
-    const sharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
+
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const pageRef = useRef<number>(sharedPage.initialValue);
+
+    const desiredPageRef = useRef<number>(NaN);
+
     const pagerRef = useRef<RNViewPager | null>(null);
 
-    const setPage = (newIndex: number) => {
-        requestAnimationFrame(() => {
-            pagerRef.current?.setPage(newIndex);
+    const animationFrameRef = useRef<number>(NaN);
+
+    const setPage = useCallback((newPage: number) => {
+        if (!Number.isInteger(newPage)) {
+            return;
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+            if (Number.isFinite(desiredPageRef.current)) {
+                if (pageRef.current === 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);
         });
-    };
+    }, []);
 
-    useImperativeHandle(
-        ref,
-        () => ({ setPage }),
-        [],
-    );
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        const animatedValue = sharedPage.animatedValue;
+        const id = animatedValue.addListener(newValue => {
+            const newPage = newValue.value;
+            pageRef.current = newPage;
+            setPage(newPage);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [sharedPage]);
 
     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.
 
-        if (currentIndex === nextIndex) {
-            return;
-        }
+            const desiredPage = desiredPageRef.current;
+
+            if (pageRef.current === desiredPage) {
+                // end of state machine. clear desired page.
+                desiredPageRef.current = NaN;
+            } else {
+                sharedPage.animatedValue.setValue(desiredPage);
+            }
+
+            onChange?.(desiredPage);
+        } else {
+            const trustfulNextPage = e.nativeEvent.position;
 
-        sharedIndex.value = nextIndex;
+            if (trustfulNextPage !== pageRef.current) {
+                desiredPageRef.current = trustfulNextPage;
+                sharedPage.animatedValue.setValue(trustfulNextPage);
+            }
 
-        if (onChange) {
-            onChange(nextIndex);
+            onChange?.(trustfulNextPage);
         }
-    }, [onChange]);
+    }, [onChange, sharedPage]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const pageStore = usePageStore(sharedPage);
 
     const PageComponent = pageComponent;
 
     return (
-        <RNViewPager
-            ref={pagerRef}
-            initialPage={initialPage}
-            keyboardDismissMode={keyboardDismissMode}
-            onPageSelected={handlePageSelected}
-            pageMargin={8}
-            scrollEnabled={scrollEnabled}
-            style={style}
-        >
-            {Children.map(children, (child, index) => (
-                <PageComponent
-                    key={index}
-                    children={child}
-                    index={index}
-                    loading={loading}
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedIndex}
-                />
-            ))}
-        </RNViewPager>
+        <InternalContext.Provider value={{ pageStore }}>
+            <RNViewPager
+                ref={pagerRef}
+                initialPage={sharedPage.initialValue}
+                keyboardDismissMode={keyboardDismissMode}
+                onPageSelected={handlePageSelected}
+                pageMargin={8}
+                scrollEnabled={scrollEnabled}
+                style={style}
+            >
+                {Children.map(children, (child, index) => (
+                    <PageComponent
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </RNViewPager>
+        </InternalContext.Provider>
     );
 });
 

package/src/ViewPager/ViewPagerProps.ts

@@ -1,28 +1,6 @@
-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 = PropsWithChildren<ViewProps> & {
-    index: number;
-    loading: ViewPagerProps['loading'];
-    sharedIndex: SharedValue<number>;
-    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
-};
-
-export type PageComponent = ComponentType<PageProps>;
-
-export type Loading = 'lazy' | 'eager';
-
-export interface ViewPagerInstance {
-    /**
-     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
-     * @param index
-     */
-    setPage: (index: number) => void;
-}
+import type { ReactNode, Ref } from 'react';
+import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
+import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
 
 export default interface ViewPagerProps extends ComponentProps<{
     ref?: Ref<ViewPagerInstance>;
@@ -44,6 +22,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.
      */
@@ -71,4 +56,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, useImperativeHandle } 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';
+import { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
 import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
+import usePageStore from './usePageStore';
+import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
     root: {
@@ -22,35 +23,43 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
+        UNSTABLE_sharedPage,
     } = props;
 
-    const sharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
 
-    const setPage = (newIndex: number) => {
-        sharedIndex.value = newIndex;
-    };
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const setPage = useCallback((newPage: number) => {
+        sharedPage.animatedValue.setValue(newPage);
+    }, [sharedPage]);
 
     useImperativeHandle(
         ref,
         () => ({ setPage }),
-        [],
+        [setPage],
     );
 
+    const pageStore = usePageStore(sharedPage);
+
     const PageComponent = pageComponent;
 
     return (
-        <View style={[styles.root, style]}>
-            {Children.map(children, (child, index) => (
-                <PageComponent
-                    key={index}
-                    children={child}
-                    index={index}
-                    loading={loading}
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedIndex}
-                />
-            ))}
-        </View>
+        <InternalContext.Provider value={{ pageStore }}>
+            <View style={[styles.root, style]}>
+                {Children.map(children, (child, index) => (
+                    <PageComponent
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </View>
+        </InternalContext.Provider>
     );
 });
 

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,4 @@
 export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';
+export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
+export { useViewPagerPageState } from './PageStateContext';

package/src/ViewPager/types.ts

@@ -0,0 +1,24 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+
+export type KeyboardDismissMode = 'none' | 'on-drag';
+
+export type PageComponent = ComponentType<PageProps>;
+
+export type Loading = 'lazy' | 'eager';
+
+export interface ViewPagerInstance {
+    /**
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}

package/src/ViewPager/usePageStore.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
+import { SimpleStore } from '@fountain-ui/core';
+
+export default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {
+    const {
+        animatedValue,
+        initialValue,
+    } = value;
+
+    const store = useRef(new SimpleStore(initialValue)).current;
+
+    useEffect(() => {
+        const id = animatedValue.addListener((newPage) => {
+            store.dispatch(newPage.value);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [animatedValue]);
+
+    return store;
+};

package/src/ViewPager/utils.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
+import type { Loading, PageComponent } from './types';
 
 export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
+export const defaultOffscreenPageRerenderLimit: number = 0;
+
 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';