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

package/build/typescript/ViewPager/ViewPagerWeb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
-declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "loading" | "initialPage" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+import type { ViewPagerInstance } from './types';
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "pageComponent" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
 export default ViewPager;

package/build/typescript/ViewPager/index.d.ts

@@ -1,3 +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/build/typescript/ViewPager/types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+export declare type KeyboardDismissMode = 'none' | 'on-drag';
+export declare type PageComponent = ComponentType<PageProps>;
+export declare 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/build/typescript/ViewPager/usePageStore.d.ts

@@ -0,0 +1,2 @@
+import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
+export default function usePageStore(value: SyncAnimatedValue): MonoStore<number>;

package/build/typescript/ViewPager/utils.d.ts

@@ -1,4 +1,4 @@
-import { Loading, PageComponent } from './ViewPagerProps';
+import type { Loading, PageComponent } from './types';
 export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
 export declare const defaultOffscreenPageRerenderLimit: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f247070bf942db98feafb9573e8c1dc3fc1d758"
+  "gitHead": "bd0ccbf7db51f1418dffb2da36fe167654a58f7e"
 }

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,9 +1,9 @@
-import React, { memo, useMemo, 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';
+import type { PageProps } from './types';
 import PageStateContext from './PageStateContext';
+import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
     fill: { width: '100%', height: '100%' },
@@ -18,14 +18,16 @@ interface InternalPageState {
 function Page(props: PageProps) {
     const {
         index,
+        initialPage,
         children,
         loading,
         offscreenPageRerenderLimit,
-        sharedIndex,
     } = props;
 
+    const { pageStore } = useContext(InternalContext);
+
     const assumeInitialPageState = (): InternalPageState => {
-        const activeIndex = sharedIndex.value;
+        const activeIndex = initialPage;
 
         const isActive = index === activeIndex;
 
@@ -43,24 +45,9 @@ function Page(props: PageProps) {
 
     const content = pageState.isLoaded ? children : null;
 
-    const onActiveStateChange = (isActive: boolean) => {
-        setPageState(prevState => ({
-            ...prevState,
-            isActive,
-            isLoaded: isActive || prevState.isLoaded,
-        }));
-    };
-
-    const onBecomeNeighbor = () => {
-        setPageState(prevState => ({
-            ...prevState,
-            isLoaded: true,
-        }));
-    };
-
-    useAnimatedReaction(
-        () => {
-            const activeIndex = sharedIndex.value;
+    useEffect(() => {
+        return pageStore.subscribe(newPage => {
+            const activeIndex = newPage;
 
             const isActive = index === activeIndex;
 
@@ -69,17 +56,26 @@ function Page(props: PageProps) {
 
             const becomeNeighbor = shouldRerender && !isActive;
 
-            return { isActive, becomeNeighbor };
-        },
-        (nextState, prevState) => {
-            if (nextState.isActive !== prevState?.isActive) {
-                runOnJS(onActiveStateChange)(nextState.isActive);
-            } else if (nextState.becomeNeighbor) {
-                runOnJS(onBecomeNeighbor)();
-            }
-        },
-        [index],
-    );
+            setPageState(prevState => {
+                if (prevState.isActive !== isActive) {
+                    return {
+                        ...prevState,
+                        isActive,
+                        isLoaded: isActive || prevState.isLoaded,
+                    };
+                }
+
+                if (becomeNeighbor && !prevState.isLoaded) {
+                    return {
+                        ...prevState,
+                        isLoaded: true,
+                    };
+                }
+
+                return prevState;
+            });
+        });
+    }, [pageStore, index]);
 
     const contextValue = useMemo(() => ({
         isActive: pageState.isActive,

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/ViewPagerNative.tsx

@@ -1,10 +1,12 @@
 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 { useSyncAnimatedValue } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
+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 {
@@ -21,10 +23,12 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedPage = 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);
@@ -38,7 +42,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
         animationFrameRef.current = requestAnimationFrame(() => {
             if (Number.isFinite(desiredPageRef.current)) {
-                if (sharedPage.value === desiredPageRef.current) {
+                if (pageRef.current === desiredPageRef.current) {
                     // end of state machine. clear desired page.
                     desiredPageRef.current = NaN;
                     return;
@@ -62,13 +66,18 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         };
     }, []);
 
-    useAnimatedReaction(
-        () => sharedPage.value,
-        (result) => {
-            runOnJS(setPage)(result);
-        },
-        [setPage],
-    );
+    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) => {
         if (Number.isFinite(desiredPageRef.current)) {
@@ -80,24 +89,25 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
             const desiredPage = desiredPageRef.current;
 
-            if (sharedPage.value === desiredPage) {
+            if (pageRef.current === desiredPage) {
                 // end of state machine. clear desired page.
                 desiredPageRef.current = NaN;
             } else {
-                sharedPage.value = desiredPage;
+                sharedPage.animatedValue.setValue(desiredPage);
             }
 
             onChange?.(desiredPage);
         } else {
             const trustfulNextPage = e.nativeEvent.position;
 
-            desiredPageRef.current = trustfulNextPage;
-
-            sharedPage.value = trustfulNextPage;
+            if (trustfulNextPage !== pageRef.current) {
+                desiredPageRef.current = trustfulNextPage;
+                sharedPage.animatedValue.setValue(trustfulNextPage);
+            }
 
             onChange?.(trustfulNextPage);
         }
-    }, [onChange]);
+    }, [onChange, sharedPage]);
 
     useImperativeHandle(
         ref,
@@ -105,30 +115,34 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         [setPage],
     );
 
+    const pageStore = usePageStore(sharedPage);
+
     const PageComponent = pageComponent;
 
     return (
-        <RNViewPager
-            ref={pagerRef}
-            initialPage={sharedPage.value}
-            keyboardDismissMode={keyboardDismissMode}
-            onPageSelected={handlePageSelected}
-            pageMargin={8}
-            scrollEnabled={scrollEnabled}
-            style={style}
-        >
-            {Children.map(children, (child, index) => (
-                <PageComponent
-                    key={index}
-                    children={child}
-                    index={index}
-                    loading={loading}
-                    offscreenPageRerenderLimit={offscreenPageRerenderLimit}
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedPage}
-                />
-            ))}
-        </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,29 +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'];
-    offscreenPageRerenderLimit: number;
-    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>;
@@ -83,5 +60,5 @@ export default interface ViewPagerProps extends ComponentProps<{
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedPage?: SharedValue<number>;
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,10 +1,11 @@
 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: {
@@ -25,12 +26,12 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedPage = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
 
     const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
 
     const setPage = useCallback((newPage: number) => {
-        sharedPage.value = newPage;
+        sharedPage.animatedValue.setValue(newPage);
     }, [sharedPage]);
 
     useImperativeHandle(
@@ -39,22 +40,26 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         [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}
-                    offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedPage}
-                />
-            ))}
-        </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.ts

@@ -1,3 +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,5 +1,5 @@
-import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
+import type { Loading, PageComponent } from './types';
 
 export const defaultInitialPage: number = 0;
 

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -222,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    }, []);
+    }, [appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;