@fountain-ui/lab 2.0.0-beta.19 → 2.0.0-beta.22

package/build/module/hooks/useUnstableCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    }, [appBarHeight]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["useCallback","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    }, [appBarHeight]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { MonoStore } from '@fountain-ui/core';
+export declare type FluxStore<S> = MonoStore<S>;
+declare const FluxContext: import("react").Context<FluxStore<any> | null>;
+export default FluxContext;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-interface PageState {
+export interface PageState {
     isActive: boolean;
 }
 declare const PageStateContext: import("react").Context<PageState>;
-export declare const useViewPagerPageState: () => PageState;
 export default PageStateContext;

package/build/typescript/ViewPager/{ViewPagerNative.d.ts → ViewPager.d.ts}

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

package/build/typescript/ViewPager/{ViewPagerWeb.d.ts → ViewPager.native.d.ts}

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
-import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
+import type { KeyboardDismissMode, Loading, ViewPagerInstance } from './types';
 export default interface ViewPagerProps extends ComponentProps<{
     ref?: Ref<ViewPagerInstance>;
     /**
@@ -27,11 +27,6 @@ export default interface ViewPagerProps extends ComponentProps<{
      * Callback fired when an index is changed.
      */
     onChange?: (newIndex: number) => void;
-    /**
-     * The component used to render the wrapper of the page.
-     * @default 'ChildrenMemoizedPage'
-     */
-    pageComponent?: PageComponent;
     /**
      * When this value is changed, page will be rerender.
      */

package/build/typescript/ViewPager/components/ChildrenMemoizedPage.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { Loading } from '../types';
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+declare function Page(props: PageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Page>;
+export default _default;

package/build/typescript/ViewPager/components/FluxStoreProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FluxStoreProviderProps<State> {
+    children: React.ReactElement;
+    initialState: State;
+}
+export default function FluxStoreProvider<State>(props: FluxStoreProviderProps<State>): JSX.Element;

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

@@ -0,0 +1,2 @@
+export { default as ChildrenMemoizedPage } from './ChildrenMemoizedPage';
+export { default as FluxStoreProvider } from './FluxStoreProvider';

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

@@ -0,0 +1,6 @@
+export { default as useDispatch } from './useDispatch';
+export { default as useForceRender } from './useForceRender';
+export { default as useLazyState } from './useLazyState';
+export { default as usePageStore } from './usePageStore';
+export { default as useStore } from './useStore';
+export { default as useViewPagerPageState } from './useViewPagerPageState';

package/build/typescript/ViewPager/hooks/useDispatch.d.ts

@@ -0,0 +1,2 @@
+import type { DispatchAction } from '@fountain-ui/core';
+export default function useDispatch<State>(): (action: DispatchAction<State>) => void;

package/build/typescript/ViewPager/hooks/useForceRender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useForceRender(): import("react").DispatchWithoutAction;

package/build/typescript/ViewPager/hooks/useLazyState.d.ts

@@ -0,0 +1,2 @@
+import type { EqualityFunction } from '../types';
+export default function useLazyState<State>(equalityFn?: EqualityFunction<State>): State;

package/build/typescript/ViewPager/hooks/useStore.d.ts

@@ -0,0 +1,2 @@
+import type { FluxStore } from '../FluxContext';
+export default function useStore<State>(): FluxStore<State>;

package/build/typescript/ViewPager/hooks/useViewPagerPageState.d.ts

@@ -0,0 +1 @@
+export default function useViewPagerPageState(): import("../PageStateContext").PageState;

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

@@ -1,4 +1,5 @@
-export { default } from './ViewPagerWeb';
+export { default } from './ViewPager';
 export type { default as ViewPagerProps } from './ViewPagerProps';
 export type { ViewPagerInstance } from './types';
-export { useViewPagerPageState } from './PageStateContext';
+export { useViewPagerPageState, useDispatch as useFluxDispatch, useLazyState, useStore as useFluxStore } from './hooks';
+export { FluxStoreProvider } from './components';

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

@@ -1,15 +1,8 @@
-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 EqualityFunction<State> {
+    (a: State, b: State): boolean;
+}
 export interface ViewPagerInstance {
     /**
      * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.

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

@@ -1,5 +1,5 @@
-import type { Loading, PageComponent } from './types';
+import type { EqualityFunction, Loading } from './types';
 export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
 export declare const defaultOffscreenPageRerenderLimit: number;
-export declare const defaultPageComponent: PageComponent;
+export declare const refEqual: EqualityFunction<any>;

package/package.json

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

package/src/ViewPager/FluxContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+
+export type FluxStore<S> = MonoStore<S>;
+
+const FluxContext = createContext<FluxStore<any> | null>(null);
+
+export default FluxContext;

package/src/ViewPager/PageStateContext.ts

@@ -1,6 +1,6 @@
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
-interface PageState {
+export interface PageState {
     isActive: boolean;
 }
 
@@ -8,8 +8,4 @@ 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 → ViewPager.native.tsx}

@@ -1,11 +1,12 @@
-import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
 import RNViewPager from 'react-native-pager-view';
 import { useSyncAnimatedValue } from '@fountain-ui/core';
+import { ChildrenMemoizedPage } from './components';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
-import usePageStore from './usePageStore';
+import { usePageStore } from './hooks';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit } from './utils';
 import InternalContext from './InternalContext';
 
 const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
@@ -16,7 +17,6 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         loading = defaultLoading,
         offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
         onChange,
-        pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
@@ -117,10 +117,10 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
     const pageStore = usePageStore(sharedPage);
 
-    const PageComponent = pageComponent;
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
 
     return (
-        <InternalContext.Provider value={{ pageStore }}>
+        <InternalContext.Provider value={contextValue}>
             <RNViewPager
                 ref={pagerRef}
                 initialPage={sharedPage.initialValue}
@@ -131,7 +131,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
                 style={style}
             >
                 {Children.map(children, (child, index) => (
-                    <PageComponent
+                    <ChildrenMemoizedPage
                         key={index}
                         children={child}
                         index={index}

package/src/ViewPager/{ViewPagerWeb.tsx → ViewPager.tsx}

@@ -1,10 +1,11 @@
-import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';
+import { ChildrenMemoizedPage } from './components';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './types';
-import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
-import usePageStore from './usePageStore';
+import { defaultInitialPage, defaultLoading } from './utils';
+import { usePageStore } from './hooks';
 import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
@@ -20,7 +21,6 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         children,
         initialPage = defaultInitialPage,
         loading = defaultLoading,
-        pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
         UNSTABLE_sharedPage,
@@ -42,13 +42,13 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
     const pageStore = usePageStore(sharedPage);
 
-    const PageComponent = pageComponent;
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
 
     return (
-        <InternalContext.Provider value={{ pageStore }}>
+        <InternalContext.Provider value={contextValue}>
             <View style={[styles.root, style]}>
                 {Children.map(children, (child, index) => (
-                    <PageComponent
+                    <ChildrenMemoizedPage
                         key={index}
                         children={child}
                         index={index}

package/src/ViewPager/ViewPagerProps.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
-import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
+import type { KeyboardDismissMode, Loading, ViewPagerInstance } from './types';
 
 export default interface ViewPagerProps extends ComponentProps<{
     ref?: Ref<ViewPagerInstance>;
@@ -34,12 +34,6 @@ export default interface ViewPagerProps extends ComponentProps<{
      */
     onChange?: (newIndex: number) => void,
 
-    /**
-     * The component used to render the wrapper of the page.
-     * @default 'ChildrenMemoizedPage'
-     */
-    pageComponent?: PageComponent,
-
     /**
      * When this value is changed, page will be rerender.
      */

package/src/ViewPager/{ChildrenMemoizedPage.tsx → components/ChildrenMemoizedPage.tsx}

@@ -1,15 +1,26 @@
-import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import type { ViewProps } from 'react-native';
 import { Platform, View } from 'react-native';
 import { StyleSheet } from '@fountain-ui/core';
-import type { PageProps } from './types';
-import PageStateContext from './PageStateContext';
-import InternalContext from './InternalContext';
+import type { Loading } from '../types';
+import { useForceRender } from '../hooks';
+import PageStateContext from '../PageStateContext';
+import InternalContext from '../InternalContext';
 
 const styles = StyleSheet.create({
     fill: { width: '100%', height: '100%' },
     none: { display: 'none' },
 });
 
+export type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+
 interface InternalPageDescription {
     isActive: boolean;
     becomeNeighbor: boolean;
@@ -56,7 +67,7 @@ function Page(props: PageProps) {
 
     // `Bailing out of a state update` is not working as expected.
     const pageStateRef = useRef<InternalPageState>(initialState);
-    const [, forceRender] = useReducer((s) => s + 1, 0);
+    const forceRender = useForceRender();
 
     const { active, loaded } = pageStateRef.current;
 

package/src/ViewPager/components/FluxStoreProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { SimpleStore } from '@fountain-ui/core';
+import type { FluxStore } from '../FluxContext';
+import FluxContext from '../FluxContext';
+
+export interface FluxStoreProviderProps<State> {
+    children: React.ReactElement;
+    initialState: State;
+}
+
+export default function FluxStoreProvider<State>(props: FluxStoreProviderProps<State>) {
+    const { children, initialState } = props;
+
+    const store = useRef<FluxStore<State>>(new SimpleStore(initialState)).current;
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
+    return (
+        <FluxContext.Provider value={store}>
+            {children}
+        </FluxContext.Provider>
+    );
+};

package/src/ViewPager/components/index.ts

@@ -0,0 +1,2 @@
+export { default as ChildrenMemoizedPage } from './ChildrenMemoizedPage';
+export { default as FluxStoreProvider } from './FluxStoreProvider';

package/src/ViewPager/hooks/index.ts

@@ -0,0 +1,6 @@
+export { default as useDispatch } from './useDispatch';
+export { default as useForceRender } from './useForceRender';
+export { default as useLazyState } from './useLazyState';
+export { default as usePageStore } from './usePageStore';
+export { default as useStore } from './useStore';
+export { default as useViewPagerPageState } from './useViewPagerPageState';

package/src/ViewPager/hooks/useDispatch.ts

@@ -0,0 +1,11 @@
+import { useCallback } from 'react';
+import type { DispatchAction } from '@fountain-ui/core';
+import useStore from './useStore';
+
+export default function useDispatch<State>() {
+    const store = useStore<State>();
+
+    return useCallback((action: DispatchAction<State>) => {
+        store.dispatch(action);
+    }, [store]);
+};

package/src/ViewPager/hooks/useForceRender.ts

@@ -0,0 +1,7 @@
+import { useReducer } from 'react';
+
+export default function useForceRender() {
+    const [, forceRender] = useReducer((s) => s + 1, 0);
+
+    return forceRender;
+};

package/src/ViewPager/hooks/useLazyState.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import type { EqualityFunction } from '../types';
+import { refEqual } from '../utils';
+import useForceRender from './useForceRender';
+import useViewPagerPageState from './useViewPagerPageState';
+import useStore from './useStore';
+
+export default function useLazyState<State>(equalityFn: EqualityFunction<State> = refEqual): State {
+    const store = useStore<State>();
+
+    const stateRef = useRef<State>(store.getState());
+
+    const forceRender = useForceRender();
+
+    const { isActive } = useViewPagerPageState();
+
+    useEffect(() => {
+        return store.subscribe(newState => {
+            if (equalityFn(stateRef.current, newState)) {
+                return;
+            }
+
+            stateRef.current = newState;
+
+            if (isActive) {
+                forceRender();
+            }
+        });
+    }, [store, isActive]);
+
+    return stateRef.current;
+};

package/src/ViewPager/hooks/useStore.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import type { FluxStore } from '../FluxContext';
+import FluxContext from '../FluxContext';
+
+export default function useStore<State>(): FluxStore<State> {
+    // @ts-ignore
+    const store = useContext<FluxStore<State>>(FluxContext);
+    if (store == null) {
+        throw new Error(
+            'You should wrap your parent component with `FluxStoreProvider`',
+        );
+    }
+
+    return store;
+};

package/src/ViewPager/hooks/useViewPagerPageState.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import PageStateContext from '../PageStateContext';
+
+export default function useViewPagerPageState() {
+    return useContext(PageStateContext);
+};

package/src/ViewPager/index.ts

@@ -1,4 +1,5 @@
-export { default } from './ViewPagerWeb';
+export { default } from './ViewPager';
 export type { default as ViewPagerProps } from './ViewPagerProps';
 export type { ViewPagerInstance } from './types';
-export { useViewPagerPageState } from './PageStateContext';
+export { useViewPagerPageState, useDispatch as useFluxDispatch, useLazyState, useStore as useFluxStore } from './hooks';
+export { FluxStoreProvider } from './components';

package/src/ViewPager/types.ts

@@ -1,20 +1,11 @@
-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 EqualityFunction<State> {
+    (a: State, b: State): boolean;
+}
+
 export interface ViewPagerInstance {
     /**
      * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.

package/src/ViewPager/utils.tsx

@@ -1,5 +1,4 @@
-import ChildrenMemoizedPage from './ChildrenMemoizedPage';
-import type { Loading, PageComponent } from './types';
+import type { EqualityFunction, Loading } from './types';
 
 export const defaultInitialPage: number = 0;
 
@@ -7,4 +6,4 @@ export const defaultLoading: Loading = 'lazy';
 
 export const defaultOffscreenPageRerenderLimit: number = 0;
 
-export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;
+export const refEqual: EqualityFunction<any> = (a: any, b: any) => a === b;

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import {
@@ -117,7 +117,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);
 
-    const onScrollViewChanged = (nextIndex: number) => {
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             if (shouldTranslateYReset) {
@@ -151,7 +151,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             vectorY.value = 0;
         }
-    };
+    }, [appBarHeight]);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {