@fountain-ui/lab 2.0.0-beta.4 → 2.0.0-beta.41

package/src/DateTimePicker/DateTimePicker.tsx

@@ -82,8 +82,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
                 />
             )}
             theme={{
-                backgroundColor: theme.palette.background.default,
-                calendarBackground: theme.palette.background.default,
+                backgroundColor: theme.palette.paper.default,
+                calendarBackground: theme.palette.paper.default,
                 dayTextColor: theme.palette.text.primary,
                 textDisabledColor: theme.palette.text.hint,
             }}

package/src/FlipCard/FlipCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type FlipCardProps from './FlipCardProps';
 
 const styles = StyleSheet.create({
@@ -27,9 +27,9 @@ export default function FlipCard(props: FlipCardProps) {
         style,
     } = props;
 
-    const sharedAngle = Animated.useSharedValue(0);
+    const sharedAngle = useSharedValue(0);
 
-    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedFrontCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
             transform: [
@@ -37,9 +37,9 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    });
+    }, []);
 
-    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
             transform: [
@@ -47,11 +47,11 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    });
+    }, []);
 
     useEffect(() => {
         sharedAngle.value = 0;
-        sharedAngle.value = Animated.withTiming(180, { duration: 500 });
+        sharedAngle.value = withTiming(180, { duration: 500 });
     }, [reanimationKey]);
 
     return (
@@ -65,4 +65,4 @@ export default function FlipCard(props: FlipCardProps) {
             </Animated.View>
         </View>
     );
-};
+};

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/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,11 @@
+import { createContext } from 'react';
+
+export interface PageState {
+    isActive: boolean;
+}
+
+const initialPageState: Readonly<PageState> = { isActive: false };
+
+const PageStateContext = createContext<PageState>(initialPageState);
+
+export default PageStateContext;

package/src/ViewPager/ViewPager.native.tsx

@@ -0,0 +1,150 @@
+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,
+        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}
+                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,20 @@
-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 { 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;
-
-    /**
-     * If `true`, enable page visible hint.
-     * @default false
-     */
-    enableVisibleHint?: boolean;
+    ref?: Ref<ViewPagerInstance>;
 
     /**
-     * If `true`, Based on the current index, the pages on the left and right are also rerender.
-     * @default false
+     * Collection of ViewPager components.
      */
-    enableNeighborPageRerender?: boolean;
+    children?: ReactNode;
 
     /**
-     * A number representing the index of the active page.
+     * Index of initial page that should be selected.
+     * @default 0
      */
-    index: number,
+    initialPage?: number;
 
     /**
      * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).
@@ -44,15 +23,16 @@ export default interface ViewPagerProps extends ComponentProps<{
     loading?: Loading;
 
     /**
-     * Callback fired when an index is changed.
+     * 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
      */
-    onChange?: (newIndex: number) => void,
+    offscreenPageRerenderLimit?: number;
 
     /**
-     * The component used to render the wrapper of the page.
-     * @default 'ChildrenMemoizedPage'
+     * Callback fired when an index is changed.
      */
-    pageComponent?: PageComponent,
+    onChange?: (newIndex: number) => void,
 
     /**
      * When this value is changed, page will be rerender.
@@ -70,4 +50,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 { 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/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;
+};