@fountain-ui/lab 2.0.0-beta.11 → 2.0.0-beta.12

package/src/Carousel/hooks/useLoopedData.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+export default function useLoopedData<ItemT>(
+    originalData: ReadonlyArray<ItemT>,
+    loop: boolean,
+): ReadonlyArray<ItemT> {
+    return useMemo(() => {
+        if (!loop) {
+            return originalData;
+        }
+
+        const numberOfData = originalData.length;
+
+        if (numberOfData === 1) {
+            const [first] = originalData;
+            return [first, first, first];
+        }
+
+        if (numberOfData === 2) {
+            const [first, second] = originalData;
+            return [first, second, first, second];
+        }
+
+        return originalData;
+    }, [originalData, loop]);
+};

package/src/Carousel/hooks/usePagingAnimation.ts

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform } from 'react-native';
+import type { CreateScrollAnimation, GetCurrentIndex, PagingDirection, StartPagingAnimation } from '../types';
+
+export interface PagingAnimationConfig {
+    controlledTx: Animated.Value;
+    createScrollAnimation: CreateScrollAnimation;
+    getCurrentIndex: GetCurrentIndex;
+    itemWidth: number;
+    lastIndex: number;
+    loop: boolean;
+    numberOfData: number;
+    offsetTx: Animated.Value;
+}
+
+export interface UsePagingAnimation {
+    finalizeAnimation: () => void;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    startAnimation: StartPagingAnimation;
+}
+
+function directionToValue(itemWidth: number) {
+    return function (direction: PagingDirection): number {
+        switch (direction) {
+            case 'next':
+                return -itemWidth;
+            case 'prev':
+                return itemWidth;
+            case 'stay':
+                return 0;
+        }
+    };
+}
+
+export default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation {
+    const {
+        controlledTx,
+        createScrollAnimation,
+        getCurrentIndex,
+        itemWidth,
+        lastIndex,
+        loop,
+        numberOfData,
+        offsetTx,
+    } = config;
+
+    const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+    const toValueRef = useRef<number>(0);
+
+    const globalInterpolation = useMemo(
+        () => Animated.add(controlledTx, offsetTx),
+        [controlledTx, offsetTx],
+    );
+
+    useEffect(() => {
+        const subscriptionId = controlledTx.addListener((value) => {
+            const currentTx = value.value;
+
+            // Prevent infinite loop
+            if (currentTx !== 0) {
+                const maxWidth = numberOfData * itemWidth;
+
+                if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {
+                    // reset position
+                    controlledTx.setValue(0);
+                }
+            }
+        });
+
+        return () => {
+            controlledTx.removeListener(subscriptionId);
+        };
+    }, [numberOfData, itemWidth]);
+
+    const finalizeAnimation = useCallback(() => {
+        const stopUnfinishedSnapAnimation = () => {
+            if (animationRef.current) {
+                animationRef.current?.stop();
+                animationRef.current = null;
+            }
+        };
+
+        const resetBoundary = () => {
+            controlledTx.setOffset(toValueRef.current);
+            controlledTx.flattenOffset();
+
+            // FIXME: react-native-web bug maybe?
+            //  `AnimatedValue.flattenOffset()` does not trigger any event listener.
+            //  Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).
+            //  So setting same value with `value.setValue(value._value)` will trigger event listener.
+            if (Platform.OS === 'web') {
+                // @ts-ignore
+                controlledTx.setValue(controlledTx._value);
+            }
+
+            offsetTx.setValue(0);
+            toValueRef.current = 0;
+        };
+
+        stopUnfinishedSnapAnimation();
+
+        resetBoundary();
+    }, [controlledTx]);
+
+    const startAnimation = useCallback((direction: PagingDirection, isGesture: boolean = false) => {
+        const getToValueByDirection = directionToValue(itemWidth);
+
+        const currentIndex = getCurrentIndex();
+
+        const computeToValueOnNoLoop = (): number => {
+            if (currentIndex === 0 && direction === 'prev') {
+                return isGesture
+                    ? getToValueByDirection('stay')
+                    : -lastIndex * itemWidth; // last position
+            } else if (currentIndex === lastIndex && direction === 'next') {
+                return isGesture
+                    ? getToValueByDirection('stay')
+                    : lastIndex * itemWidth; // first position
+            }
+            return getToValueByDirection(direction);
+        };
+
+        const toValue = loop ? getToValueByDirection(direction) : computeToValueOnNoLoop();
+        const animation = createScrollAnimation(offsetTx, toValue);
+
+        animationRef.current = animation;
+        toValueRef.current = toValue;
+
+        animation.start(({ finished }) => {
+            if (finished) {
+                finalizeAnimation();
+            }
+        });
+    }, [
+        createScrollAnimation,
+        getCurrentIndex,
+        finalizeAnimation,
+        itemWidth,
+        lastIndex,
+        loop,
+    ]);
+
+    return {
+        globalInterpolation,
+        finalizeAnimation,
+        startAnimation,
+    };
+};

package/src/Carousel/index.ts

@@ -1,2 +1,4 @@
-export { default } from './CarouselWeb';
-export type { default as CarouselProps } from './CarouselProps';
+export { default } from './Carousel';
+export type { default as CarouselProps } from './CarouselProps';
+export type { CarouselInstance } from './types';
+export { normalItemStyleFactory, parallaxItemStyleFactory } from './animation';

package/src/Carousel/types.ts

@@ -0,0 +1,67 @@
+import type { ReactElement } from 'react';
+import type { Animated, ViewProps } from 'react-native';
+
+const directions = ['next', 'prev', 'stay'] as const;
+
+export type PagingDirection = (typeof directions)[number];
+
+export interface RenderItem<T> {
+    (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;
+}
+
+export interface CreateScrollAnimation {
+    (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;
+}
+
+export interface CreateItemStyle {
+    (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;
+}
+
+export interface GetCurrentIndex {
+    (): number;
+}
+
+export interface IndexController {
+    currentIndex: number;
+    getCurrentIndex: GetCurrentIndex;
+    lastIndex: number;
+    monitorElement: ReactElement;
+}
+
+export interface StartPagingAnimation {
+    (direction: PagingDirection, isGesture?: boolean): void;
+}
+
+export type VisibleIndexRanges = Array<[number, number]>;
+
+export interface StoreSubscription {
+    (): void;
+}
+
+export interface ItemVisibilityStore {
+    dispatch: (ranges: VisibleIndexRanges) => void;
+    subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;
+    removeAllListeners: () => void;
+}
+
+export interface AutoplayController {
+    pause: () => void;
+    resume: () => void;
+}
+
+export interface CarouselInstance {
+    /**
+     * Scroll to next visible item.
+     */
+    next: () => void;
+
+    /**
+     * Scroll to previous visible item.
+     */
+    prev: () => void;
+
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+}

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,18 +1,18 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { Platform, View } from 'react-native';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { StyleSheet } from '@fountain-ui/core';
 import type { PageProps } from './ViewPagerProps';
-
-const OFFSCREEN_RERENDER_LIMIT = 1;
+import PageStateContext from './PageStateContext';
 
 const styles = StyleSheet.create({
+    fill: { width: '100%', height: '100%' },
     none: { display: 'none' },
 });
 
-interface PageState {
-    active: boolean;
-    visited: boolean;
+interface InternalPageState {
+    isActive: boolean;
+    isLoaded: boolean;
 }
 
 function Page(props: PageProps) {
@@ -20,79 +20,84 @@ function Page(props: PageProps) {
         index,
         children,
         loading,
+        offscreenPageRerenderLimit,
         sharedIndex,
     } = props;
 
-    const assumeInitialPageState = (): PageState => {
+    const assumeInitialPageState = (): InternalPageState => {
         const activeIndex = sharedIndex.value;
 
-        const active = index === activeIndex;
-
-        if (Platform.OS === 'web') {
-            return { active, visited: active };
-        }
+        const isActive = index === activeIndex;
 
         if (loading === 'eager') {
-            return { active, visited: true };
+            return { isActive, isLoaded: true };
         }
 
-        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
-            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
 
-        return { active, visited };
+        return { isActive, isLoaded };
     };
 
-    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);
+    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
 
-    const content = pageState.visited ? children : null;
-
-    const updatePageState = (active: boolean, neighbor: boolean) => {
-        setPageState(prevState => {
-            if (prevState.active !== active) {
-                return { active, visited: active || prevState.visited };
-            }
+    const content = pageState.isLoaded ? children : null;
 
-            if (neighbor && !prevState.visited) {
-                return { ...prevState, visited: true };
-            }
+    const onActiveStateChange = (isActive: boolean) => {
+        setPageState(prevState => ({
+            ...prevState,
+            isActive,
+            isLoaded: isActive || prevState.isLoaded,
+        }));
+    };
 
-            return prevState;
-        });
+    const onBecomeNeighbor = () => {
+        setPageState(prevState => ({
+            ...prevState,
+            isLoaded: true,
+        }));
     };
 
     useAnimatedReaction(
         () => {
             const activeIndex = sharedIndex.value;
 
-            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
-                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+            const isActive = index === activeIndex;
+
+            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+                && index <= activeIndex + offscreenPageRerenderLimit;
 
-            const willActive = index === activeIndex;
-            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);
+            const becomeNeighbor = shouldRerender && !isActive;
 
-            return { willActive, willNeighbor };
+            return { isActive, becomeNeighbor };
         },
         (nextState, prevState) => {
-            const activeStateChanged = nextState.willActive !== prevState?.willActive;
-            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;
-
-            if (activeStateChanged || willNewNeighbor) {
-                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);
+            if (nextState.isActive !== prevState?.isActive) {
+                runOnJS(onActiveStateChange)(nextState.isActive);
+            } else if (nextState.becomeNeighbor) {
+                runOnJS(onBecomeNeighbor)();
             }
         },
         [index],
     );
 
+    const contextValue = useMemo(() => ({
+        isActive: pageState.isActive,
+    }), [pageState.isActive]);
+
     const style = Platform.OS === 'web'
-        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)
-        : undefined;
+        ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)
+        : styles.fill;
 
     return (
         <View
-            children={content}
             collapsable={false}
             style={style}
-        />
+        >
+            <PageStateContext.Provider value={contextValue}>
+                {content}
+            </PageStateContext.Provider>
+        </View>
     );
 }
 

package/src/ViewPager/PageStateContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface PageState {
+    isActive: boolean;
+}
+
+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

@@ -1,10 +1,10 @@
-import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
 import RNViewPager from 'react-native-pager-view';
-import { useSharedValue } from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import type ViewPagerProps from './ViewPagerProps';
 import type { ViewPagerInstance } from './ViewPagerProps';
-import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
 
 const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
@@ -12,26 +12,43 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
         onChange,
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const sharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedIndex = useSharedValue<number>(initialPage);
+
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+
     const pagerRef = useRef<RNViewPager | null>(null);
 
-    const setPage = (newIndex: number) => {
-        requestAnimationFrame(() => {
+    const animationFrameRef = useRef<number>(NaN);
+
+    const setPage = useCallback((newIndex: number) => {
+        animationFrameRef.current = requestAnimationFrame(() => {
             pagerRef.current?.setPage(newIndex);
         });
-    };
+    }, []);
 
-    useImperativeHandle(
-        ref,
-        () => ({ setPage }),
-        [],
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+
+    useAnimatedReaction(
+        () => sharedIndex.value,
+        (result) => {
+            runOnJS(setPage)(result);
+        },
+        [setPage],
     );
 
     const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
@@ -49,6 +66,12 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         }
     }, [onChange]);
 
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
     const PageComponent = pageComponent;
 
     return (
@@ -67,6 +90,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
                     children={child}
                     index={index}
                     loading={loading}
+                    offscreenPageRerenderLimit={offscreenPageRerenderLimit}
                     rerenderKey={pageForceRerenderKey}
                     sharedIndex={sharedIndex}
                 />

package/src/ViewPager/ViewPagerProps.ts

@@ -8,6 +8,7 @@ export type KeyboardDismissMode = 'none' | 'on-drag';
 export type PageProps = PropsWithChildren<ViewProps> & {
     index: number;
     loading: ViewPagerProps['loading'];
+    offscreenPageRerenderLimit: number;
     sharedIndex: SharedValue<number>;
     rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
 };
@@ -44,6 +45,13 @@ 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.
      */
@@ -71,4 +79,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedIndex?: SharedValue<number>;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, useImperativeHandle } from 'react';
+import React, { Children, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
 import { StyleSheet } from '@fountain-ui/core';
@@ -22,18 +22,21 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const sharedIndex = useSharedValue<number>(initialPage);
+    const fallbackSharedIndex = useSharedValue<number>(initialPage);
 
-    const setPage = (newIndex: number) => {
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+
+    const setPage = useCallback((newIndex: number) => {
         sharedIndex.value = newIndex;
-    };
+    }, [sharedIndex]);
 
     useImperativeHandle(
         ref,
         () => ({ setPage }),
-        [],
+        [setPage],
     );
 
     const PageComponent = pageComponent;
@@ -46,6 +49,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
                     children={child}
                     index={index}
                     loading={loading}
+                    offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
                     rerenderKey={pageForceRerenderKey}
                     sharedIndex={sharedIndex}
                 />

package/src/ViewPager/index.native.ts

@@ -1 +1,2 @@
 export { default } from './ViewPagerNative';
+export { useViewPagerPageState } from './PageStateContext';

package/src/ViewPager/index.ts

@@ -1,2 +1,3 @@
 export { default } from './ViewPagerWeb';
 export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';
+export { useViewPagerPageState } from './PageStateContext';

package/src/ViewPager/utils.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
 
@@ -6,4 +5,6 @@ export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
+export const defaultOffscreenPageRerenderLimit: number = 0;
+
 export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;

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';