@fountain-ui/lab 2.0.0-beta.9 → 3.0.0-alpha.1

package/src/ViewPager/ViewPager.native.tsx

@@ -0,0 +1,152 @@
+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 { usePageStore } from './hooks';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, isValidPage } from './utils';
+import InternalContext from './InternalContext';
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
+    const {
+        children,
+        initialPage = defaultInitialPage,
+        keyboardDismissMode = 'on-drag',
+        loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
+        onChange,
+        onPageScrollStateChanged,
+        pageForceRerenderKey,
+        scrollEnabled = true,
+        style,
+        UNSTABLE_sharedPage,
+    } = props;
+
+    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 animationFrameRef = useRef<number>(NaN);
+
+    const numberOfPages = Children.count(children);
+    const setPage = useCallback((newPage: number) => {
+        if (!isValidPage(newPage, numberOfPages)) {
+            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);
+        });
+    }, [numberOfPages]);
+
+    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, setPage]);
+
+    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
+        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.
+
+            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;
+
+            if (trustfulNextPage !== pageRef.current) {
+                desiredPageRef.current = trustfulNextPage;
+                sharedPage.animatedValue.setValue(trustfulNextPage);
+
+                onChange?.(trustfulNextPage);
+            }
+        }
+    }, [onChange, sharedPage]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const pageStore = usePageStore(sharedPage);
+
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            <RNViewPager
+                ref={pagerRef}
+                initialPage={sharedPage.initialValue}
+                keyboardDismissMode={keyboardDismissMode}
+                onPageScrollStateChanged={onPageScrollStateChanged}
+                onPageSelected={handlePageSelected}
+                pageMargin={8}
+                scrollEnabled={scrollEnabled}
+                style={style}
+            >
+                {Children.map(children, (child, index) => (
+                    <ChildrenMemoizedPage
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </RNViewPager>
+        </InternalContext.Provider>
+    );
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPager.tsx

@@ -0,0 +1,69 @@
+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, isValidPage } from './utils';
+import { usePageStore } from './hooks';
+import InternalContext from './InternalContext';
+
+const styles = StyleSheet.create({
+    root: {
+        // @ts-ignore
+        overflow: 'auto',
+        position: 'relative',
+    },
+});
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
+    const {
+        children,
+        initialPage = defaultInitialPage,
+        loading = defaultLoading,
+        pageForceRerenderKey,
+        style,
+        UNSTABLE_sharedPage,
+    } = props;
+
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
+
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
+
+    const numberOfPages = Children.count(children);
+    const setPage = useCallback((newPage: number) => {
+        if (isValidPage(newPage, numberOfPages)) {
+            sharedPage.animatedValue.setValue(newPage);
+        }
+    }, [sharedPage, numberOfPages]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const pageStore = usePageStore(sharedPage);
+
+    const contextValue = useMemo(() => ({ pageStore }), [pageStore]);
+
+    return (
+        <InternalContext.Provider value={contextValue}>
+            <View style={[styles.root, style]}>
+                {Children.map(children, (child, index) => (
+                    <ChildrenMemoizedPage
+                        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>
+    );
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPagerProps.ts

@@ -1,41 +1,21 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-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 PageComponent = React.ComponentType<PageProps>;
-
-export type Loading = 'lazy' | 'eager';
+import type { ReactNode, Ref } from 'react';
+import type { PageScrollStateChangedNativeEvent } from 'react-native-pager-view';
+import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
+import type { KeyboardDismissMode, Loading, ViewPagerInstance } from './types';
 
 export default interface ViewPagerProps extends ComponentProps<{
-    /**
-     * Collection of ViewPager components.
-     */
-    children?: React.ReactNode;
+    ref?: Ref<ViewPagerInstance>;
 
     /**
-     * If `true`, enable page visible hint.
-     * @default false
-     */
-    enableVisibleHint?: boolean;
-
-    /**
-     * 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,16 +23,22 @@ 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.
      */
-    onChange?: (newIndex: number) => void,
+    onChange?: (newIndex: number) => void;
 
     /**
-     * The component used to render the wrapper of the page.
-     * @default 'ChildrenMemoizedPage'
+     * Native only. This handler processes events that occur when the pager is scrolled horizontally.
      */
-    pageComponent?: PageComponent,
+    onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
 
     /**
      * When this value is changed, page will be rerender.
@@ -70,4 +56,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {}

package/src/ViewPager/components/ChildrenMemoizedPage.tsx

@@ -0,0 +1,124 @@
+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 { 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;
+}
+
+interface InternalPageState {
+    active: boolean;
+    loaded: boolean;
+}
+
+function Page(props: PageProps) {
+    const {
+        index,
+        initialPage,
+        children,
+        loading,
+        offscreenPageRerenderLimit,
+    } = props;
+
+    const { pageStore } = useContext(InternalContext);
+
+    const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {
+        const activeIndex = page;
+
+        const isActive = index === activeIndex;
+
+        const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
+
+        const becomeNeighbor = shouldRerender && !isActive;
+
+        return { isActive, becomeNeighbor };
+    }, [index]);
+
+    const [initialState] = useState<InternalPageState>(() => {
+        const { isActive, becomeNeighbor } = computePageDescription(initialPage);
+
+        if (loading === 'eager') {
+            return { active: isActive, loaded: true };
+        }
+
+        return { active: isActive, loaded: isActive || becomeNeighbor };
+    });
+
+    // `Bailing out of a state update` is not working as expected.
+    const pageStateRef = useRef<InternalPageState>(initialState);
+    const forceRender = useForceRender();
+
+    const { active, loaded } = pageStateRef.current;
+
+    const content = loaded ? children : null;
+
+    useEffect(() => {
+        return pageStore.subscribe(newPage => {
+            const { isActive, becomeNeighbor } = computePageDescription(newPage);
+
+            const currentState = pageStateRef.current;
+
+            const newState: InternalPageState = {
+                active: isActive,
+                loaded: isActive || becomeNeighbor ? true : currentState.loaded,
+            };
+
+            if (
+                currentState.active !== newState.active
+                || currentState.loaded !== newState.loaded
+            ) {
+                pageStateRef.current = newState;
+
+                forceRender();
+            }
+        });
+    }, [pageStore, computePageDescription]);
+
+    const contextValue = useMemo(() => ({
+        isActive: active,
+    }), [active]);
+
+    const style = Platform.OS === 'web'
+        ? (active ? StyleSheet.absoluteFill : styles.none)
+        : styles.fill;
+
+    return (
+        <View
+            collapsable={false}
+            style={style}
+        >
+            <PageStateContext.Provider value={contextValue}>
+                {content}
+            </PageStateContext.Provider>
+        </View>
+    );
+}
+
+export default memo(Page, (prevProps, nextProps) => {
+    if (prevProps.rerenderKey !== nextProps.rerenderKey) {
+        return false;
+    }
+
+    return prevProps.index === nextProps.index;
+});

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,7 @@
+export { default as useDispatch } from './useDispatch';
+export { default as useEagerState } from './useEagerState';
+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/useEagerState.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import useStore from './useStore';
+
+export default function useEagerState<State>(): State {
+    const store = useStore<State>();
+
+    const [state, setState] = useState<State>(() => store.getState());
+
+    useEffect(() => {
+        return store.subscribe(setState);
+    }, [store]);
+
+    return state;
+};

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 pageState = useViewPagerPageState();
+
+    useEffect(() => {
+        return store.subscribe(newState => {
+            if (equalityFn(stateRef.current, newState)) {
+                return;
+            }
+
+            stateRef.current = newState;
+
+            if (pageState?.isActive) {
+                forceRender();
+            }
+        });
+    }, [store, pageState?.isActive]);
+
+    return stateRef.current;
+};

package/src/ViewPager/hooks/usePageStore.ts

@@ -0,0 +1,30 @@
+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]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
+    return store;
+};

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,2 +1,11 @@
-export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps } from './ViewPagerProps';
+export { default } from './ViewPager';
+export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
+export {
+    useDispatch as useFluxDispatch,
+    useEagerState,
+    useStore as useFluxStore,
+    useLazyState,
+    useViewPagerPageState,
+} from './hooks';
+export { FluxStoreProvider } from './components';

package/src/ViewPager/types.ts

@@ -0,0 +1,15 @@
+export type KeyboardDismissMode = 'none' | 'on-drag';
+
+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.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}