@fountain-ui/lab 2.0.0-beta.7 → 2.0.0-beta.71

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 { 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;
+};

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;
+}

package/src/ViewPager/utils.tsx

@@ -1,62 +1,15 @@
-import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
-import ChildrenMemoizedPage from './ChildrenMemoizedPage';
+import type { EqualityFunction, Loading } from './types';
 
-export interface PageState {
-    visited?: boolean;
-}
-
-export interface PageRenderOption {
-    enableVisibleHint: boolean;
-    enableNeighborPageRerender: boolean;
-    index: number;
-    loading: Loading;
-    pageComponent: PageComponent;
-    pageForceRerenderKey?: any;
-}
-
-export interface PageRenderer {
-    (children: ViewPagerProps['children']): React.ReactNode;
-}
-
-export const defaultEnableVisibleHint: boolean = false;
-
-export const defaultEnableNeighborPageRerender: boolean = false;
+export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
-export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;
-
-export const usePageRenderer = ({
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender,
-}: PageRenderOption): PageRenderer => {
-    const pagesStateRef = React.useRef<Array<PageState>>([]);
-
-    pagesStateRef.current[currentIndex] = {
-        ...pagesStateRef.current[currentIndex],
-        visited: true,
-    };
+export const defaultOffscreenPageRerenderLimit: number = 0;
 
-    return (children => React.Children.map(children, (child, index) => {
-        const visited = pagesStateRef.current[index]?.visited ?? false;
-        const content = (loading === 'eager' || visited) ? child : null;
+export const refEqual: EqualityFunction<any> = (a: any, b: any) => a === b;
 
-        const isVisible = enableVisibleHint ? (index === currentIndex) : false;
-        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-
-        return (
-            <PageComponent
-                key={index}
-                children={content}
-                isNeighbor={enableNeighborPageRerender && isNeighborIndex}
-                isVisible={isVisible}
-                rerenderKey={pageForceRerenderKey}
-            />
-        );
-    }));
-};
+export function isValidPage(maybePage: number, numberOfPages: number) {
+    return Number.isInteger(maybePage)
+        && maybePage >= 0
+        && maybePage < numberOfPages;
+}

package/src/ViewabilityTrackerView/Viewability.ts

@@ -0,0 +1,3 @@
+export default interface Viewability {
+    visible: boolean;
+}

package/src/ViewabilityTrackerView/ViewabilityTrackerView.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import useViewabilityTracker from './useViewabilityTracker';
+import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
+
+
+export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps) {
+    const {
+        enabled = true,
+        measurementIntervalMillis = 1000,
+        onViewabilityChange,
+        visiblePercentThreshold = 50,
+        ...otherProps
+    } = props;
+
+    const viewRef = useRef<View>(null);
+
+    useViewabilityTracker({
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    });
+
+    return (
+        <View
+            {...otherProps}
+            ref={viewRef}
+            collapsable={false}
+        />
+    );
+};

package/src/ViewabilityTrackerView/ViewabilityTrackerViewProps.ts

@@ -0,0 +1,25 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '@fountain-ui/core';
+import type Viewability from './Viewability';
+
+export default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * @default true
+     */
+    enabled?: boolean;
+
+    /**
+     * @default 1000
+     */
+    measurementIntervalMillis?: number;
+
+    /**
+     *
+     */
+    onViewabilityChange?: (viewability: Viewability) => void;
+
+    /**
+     * @default 50
+     */
+    visiblePercentThreshold?: number;
+}> {}

package/src/ViewabilityTrackerView/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ViewabilityTrackerView';
+export type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';

package/src/ViewabilityTrackerView/measureViewability.ts

@@ -0,0 +1,54 @@
+import type { View } from 'react-native';
+import { clamp } from '@fountain-ui/utils';
+
+interface Rect {
+    top: number,
+    bottom: number;
+    left: number;
+    right: number;
+}
+
+export interface ViewabilityDetail {
+    visiblePercent: number;
+}
+
+export interface MeasureViewabilityParameters {
+    view: View;
+    windowWidth: number;
+    windowHeight: number;
+    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;
+}
+
+const computeRectSize = (rect: Rect): number =>
+    (rect.bottom - rect.top) * (rect.right - rect.left);
+
+const normalizePagePosition = (value?: number): number =>
+    (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;
+
+const normalizeViewSize = (size: number): number =>
+    Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
+
+export default function measureViewability({
+    view,
+    windowWidth,
+    windowHeight,
+    onViewabilityDetailMeasured,
+}: MeasureViewabilityParameters) {
+    view.measure((x, y, width, height, pageX?: number, pageY?: number) => {
+        const safePageX = normalizePagePosition(pageX);
+        const safePageY = normalizePagePosition(pageY);
+
+        const visibleRect: Rect = {
+            top: clamp(safePageY, 0, windowHeight),
+            bottom: clamp(safePageY + height, 0, windowHeight),
+            left: clamp(safePageX, 0, windowWidth),
+            right: clamp(safePageX + width, 0, windowWidth),
+        };
+
+        const visibleRectSize = computeRectSize(visibleRect);
+        const viewSize = normalizeViewSize(width * height);
+        const visiblePercent = Math.round(visibleRectSize / viewSize * 100);
+
+        onViewabilityDetailMeasured?.({ visiblePercent });
+    });
+};