@fountain-ui/lab 2.0.0-beta.10 → 2.0.0-beta.13

package/src/Carousel/hooks/usePagingAnimation.ts

@@ -0,0 +1,195 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform } from 'react-native';
+import type {
+    CreateScrollAnimation,
+    DirectionalPagingAnimationConfig,
+    GetCurrentIndex,
+    IndexPagingAnimationConfig,
+    PagingAnimationConfig,
+    PagingAnimationType,
+    PagingDirection,
+    StartPagingAnimation,
+} from '../types';
+
+export interface PagingAnimationParameters {
+    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;
+    startPagingAnimation: 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(params: PagingAnimationParameters): UsePagingAnimation {
+    const {
+        controlledTx,
+        createScrollAnimation,
+        getCurrentIndex,
+        itemWidth,
+        lastIndex,
+        loop,
+        numberOfData,
+        offsetTx,
+    } = params;
+
+    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 startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
+        const configWithDefaults: PagingAnimationConfig = {
+            animated: true,
+            ...config,
+        };
+
+        const currentIndex = getCurrentIndex();
+
+        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+
+        const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {
+            const { direction, isOriginatedFromGesture } = _config;
+
+            if (currentIndex === 0 && direction === 'prev') {
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
+                    : -lastIndex * itemWidth; // last position
+            } else if (currentIndex === lastIndex && direction === 'next') {
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
+                    : lastIndex * itemWidth; // first position
+            }
+            return getValueByDirectionOnAllAdjacentItemsVisible(direction);
+        };
+
+        const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {
+            const _configWithDefaults: DirectionalPagingAnimationConfig = {
+                isOriginatedFromGesture: false,
+                ..._config,
+            };
+
+            return loop
+                ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)
+                : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
+        };
+
+        const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {
+            if (index < 0 || index > lastIndex || index === currentIndex) {
+                // no animation if index is invalid or equals to current index
+                return 0;
+            }
+
+            const distance = Math.abs(currentIndex - index) * itemWidth;
+            const direction = index > currentIndex ? -1 : 1;
+
+            return distance * direction;
+        };
+
+        const toValue = type === 'directional'
+            // @ts-ignore
+            ? getValueByDirectionalPaging(configWithDefaults)
+            // @ts-ignore
+            : getValueByIndexPaging(configWithDefaults);
+
+        toValueRef.current = toValue;
+
+        if (configWithDefaults.animated) {
+            const animation = createScrollAnimation(offsetTx, toValue);
+            animationRef.current = animation;
+            animation.start(({ finished }) => {
+                if (finished) {
+                    finalizeAnimation();
+                }
+            });
+        } else {
+            finalizeAnimation();
+        }
+    }, [
+        createScrollAnimation,
+        getCurrentIndex,
+        finalizeAnimation,
+        itemWidth,
+        lastIndex,
+        loop,
+    ]);
+
+    return {
+        globalInterpolation,
+        finalizeAnimation,
+        startPagingAnimation,
+    };
+};

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,97 @@
+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 type ItemHeight = number | 'auto';
+
+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 type PagingAnimationType = 'directional' | 'index';
+
+export interface BasePagingAnimationConfig {
+    animated?: boolean;
+}
+
+export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
+    direction: PagingDirection;
+    isOriginatedFromGesture?: boolean;
+}
+
+export interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {
+    index: number;
+}
+
+export type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;
+
+export interface StartPagingAnimation {
+    (type: PagingAnimationType, config: PagingAnimationConfig): 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 ScrollToOption {
+    index: number;
+    animated?: boolean;
+}
+
+export interface CarouselInstance {
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+
+    /**
+     * Scroll to next visible item.
+     */
+    next: () => void;
+
+    /**
+     * Scroll to previous visible item.
+     */
+    prev: () => void;
+
+    /**
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
+     */
+    scrollTo: (option: ScrollToOption) => void;
+}

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,36 +1,110 @@
-import React from 'react';
-import { View } from 'react-native';
+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';
+import PageStateContext from './PageStateContext';
 
-const Page = function Page(props: PageProps) {
-    const { isVisible, ...otherProps } = props;
+const styles = StyleSheet.create({
+    fill: { width: '100%', height: '100%' },
+    none: { display: 'none' },
+});
 
-    return (
-        <View
-            collapsable={false}
-            {...otherProps}
-        />
+interface InternalPageState {
+    isActive: boolean;
+    isLoaded: boolean;
+}
+
+function Page(props: PageProps) {
+    const {
+        index,
+        children,
+        loading,
+        offscreenPageRerenderLimit,
+        sharedIndex,
+    } = props;
+
+    const assumeInitialPageState = (): InternalPageState => {
+        const activeIndex = sharedIndex.value;
+
+        const isActive = index === activeIndex;
+
+        if (loading === 'eager') {
+            return { isActive, isLoaded: true };
+        }
+
+        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
+
+        return { isActive, isLoaded };
+    };
+
+    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
+
+    const content = pageState.isLoaded ? children : null;
+
+    const onActiveStateChange = (isActive: boolean) => {
+        setPageState(prevState => ({
+            ...prevState,
+            isActive,
+            isLoaded: isActive || prevState.isLoaded,
+        }));
+    };
+
+    const onBecomeNeighbor = () => {
+        setPageState(prevState => ({
+            ...prevState,
+            isLoaded: true,
+        }));
+    };
+
+    useAnimatedReaction(
+        () => {
+            const activeIndex = sharedIndex.value;
+
+            const isActive = index === activeIndex;
+
+            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+                && index <= activeIndex + offscreenPageRerenderLimit;
+
+            const becomeNeighbor = shouldRerender && !isActive;
+
+            return { isActive, becomeNeighbor };
+        },
+        (nextState, prevState) => {
+            if (nextState.isActive !== prevState?.isActive) {
+                runOnJS(onActiveStateChange)(nextState.isActive);
+            } else if (nextState.becomeNeighbor) {
+                runOnJS(onBecomeNeighbor)();
+            }
+        },
+        [index],
     );
-};
 
-export default React.memo(Page, (prevProps, nextProps) => {
-    if (prevProps.children === null && nextProps.children === null) {
-        return true;
-    }
+    const contextValue = useMemo(() => ({
+        isActive: pageState.isActive,
+    }), [pageState.isActive]);
 
-    // isVisible is an important condition for determining memos on the web.
-    // Reference ViewPagerWeb's return.
-    if (prevProps.isVisible !== nextProps.isVisible) {
-        return false;
-    }
+    const style = Platform.OS === 'web'
+        ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)
+        : styles.fill;
 
-    if (nextProps.isVisible || nextProps.isNeighbor) {
-        return false;
-    }
+    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.children !== null && nextProps.children !== null;
+    return prevProps.index !== nextProps.index;
 });

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,73 +1,135 @@
-import React, { useCallback, useEffect, 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 { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
-
-export default function ViewPager(props: ViewPagerProps) {
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
+
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        index,
+        initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
+        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,
         onChange,
         pageComponent = defaultPageComponent,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
+        UNSTABLE_sharedPage,
     } = props;
 
-    const indexRef = useRef<number>(index);
-    const pagerRef = useRef<RNViewPager | null>(null);
+    const fallbackSharedPage = useSharedValue<number>(initialPage);
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-        enableNeighborPageRerender,
-    });
+    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
 
-    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
-        indexRef.current = e.nativeEvent.position;
+    const desiredPageRef = useRef<number>(NaN);
 
-        if (onChange) {
-            onChange(indexRef.current);
+    const pagerRef = useRef<RNViewPager | null>(null);
+
+    const animationFrameRef = useRef<number>(NaN);
+
+    const setPage = useCallback((newPage: number) => {
+        if (!Number.isInteger(newPage)) {
+            return;
         }
-    }, [onChange]);
 
-    useEffect(() => {
-        const handleNumber = index !== indexRef.current
-            ? requestAnimationFrame(() => pagerRef.current?.setPage(index))
-            : undefined;
+        animationFrameRef.current = requestAnimationFrame(() => {
+            if (Number.isFinite(desiredPageRef.current)) {
+                if (sharedPage.value === 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);
+        });
+    }, []);
 
+    useEffect(() => {
         return () => {
-            if (handleNumber) {
-                cancelAnimationFrame(handleNumber);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
             }
         };
-    }, [index]);
+    }, []);
+
+    useAnimatedReaction(
+        () => sharedPage.value,
+        (result) => {
+            runOnJS(setPage)(result);
+        },
+        [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 (sharedPage.value === desiredPage) {
+                // end of state machine. clear desired page.
+                desiredPageRef.current = NaN;
+            } else {
+                sharedPage.value = desiredPage;
+            }
+
+            onChange?.(desiredPage);
+        } else {
+            const trustfulNextPage = e.nativeEvent.position;
+
+            desiredPageRef.current = trustfulNextPage;
+
+            sharedPage.value = trustfulNextPage;
+
+            onChange?.(trustfulNextPage);
+        }
+    }, [onChange]);
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [setPage],
+    );
+
+    const PageComponent = pageComponent;
 
     return (
         <RNViewPager
-            initialPage={index}
+            ref={pagerRef}
+            initialPage={sharedPage.value}
             keyboardDismissMode={keyboardDismissMode}
             onPageSelected={handlePageSelected}
             pageMargin={8}
-            ref={pagerRef}
             scrollEnabled={scrollEnabled}
             style={style}
         >
-            {renderer(children)}
+            {Children.map(children, (child, index) => (
+                <PageComponent
+                    key={index}
+                    children={child}
+                    index={index}
+                    loading={loading}
+                    offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedPage}
+                />
+            ))}
         </RNViewPager>
     );
-};
+});
+
+export default ViewPager;