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

package/src/Carousel/hooks/usePagingAnimation.ts

@@ -1,22 +1,29 @@
-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;
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+import type {
+    CreateScrollAnimation,
+    DirectionalPagingAnimationConfig,
+    IndexController,
+    IndexPagingAnimationConfig,
+    PagingAnimationConfig,
+    PagingAnimationType,
+    PagingDirection,
+    StartPagingAnimation,
+} from '../types';
+
+export interface PagingAnimationParameters {
     createScrollAnimation: CreateScrollAnimation;
-    getCurrentIndex: GetCurrentIndex;
     itemWidth: number;
-    lastIndex: number;
+    indexController: IndexController;
     loop: boolean;
     numberOfData: number;
-    offsetTx: Animated.Value;
+    offsetX: Animated.Value;
+    translateX: Animated.Value;
 }
 
 export interface UsePagingAnimation {
-    finalizeAnimation: () => void;
-    globalInterpolation: Animated.AnimatedInterpolation;
-    startAnimation: StartPagingAnimation;
+    interruptAnimation: () => void;
+    startPagingAnimation: StartPagingAnimation;
 }
 
 function directionToValue(itemWidth: number) {
@@ -32,105 +39,176 @@ function directionToValue(itemWidth: number) {
     };
 }
 
-export default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation {
+function toValueCompensator(itemWidth: number) {
+    return function (toValue: number, currentOffset: number): number {
+        const remainder = Math.abs(currentOffset % itemWidth);
+
+        const halfOfItemWidth = Math.abs(itemWidth / 2);
+        const compensateVector = remainder > halfOfItemWidth
+            ? remainder - itemWidth
+            : remainder;
+
+        const direction = currentOffset > 0 ? -1 : 1;
+
+        return toValue + (direction * compensateVector);
+    };
+}
+
+export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {
     const {
-        controlledTx,
         createScrollAnimation,
-        getCurrentIndex,
         itemWidth,
-        lastIndex,
+        indexController,
         loop,
         numberOfData,
-        offsetTx,
-    } = config;
+        offsetX,
+        translateX,
+    } = params;
 
-    const animationRef = useRef<Animated.CompositeAnimation | null>(null);
-    const toValueRef = useRef<number>(0);
+    const {
+        getCurrentIndex,
+        lastIndex,
+        notifyOffsetHasChanged,
+    } = indexController;
 
-    const globalInterpolation = useMemo(
-        () => Animated.add(controlledTx, offsetTx),
-        [controlledTx, offsetTx],
-    );
+    const toValueRef = useRef<number>(0);
+    const currentOffsetRef = useRef<number>(0);
 
-    useEffect(() => {
-        const subscriptionId = controlledTx.addListener((value) => {
-            const currentTx = value.value;
+    const isAnimatingRef = useRef<boolean>(false);
 
-            // Prevent infinite loop
-            if (currentTx !== 0) {
-                const maxWidth = numberOfData * itemWidth;
+    const maxWidth = Math.abs(numberOfData * itemWidth);
 
-                if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {
-                    // reset position
-                    controlledTx.setValue(0);
-                }
+    const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {
+        if (loop) {
+            const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);
+            if (isCloseToEnd) {
+                const signOfOffset = offset > 0 ? 1 : -1;
+                return offset + (-signOfOffset * maxWidth);
             }
-        });
+        }
 
-        return () => {
-            controlledTx.removeListener(subscriptionId);
-        };
-    }, [numberOfData, itemWidth]);
+        return offset % maxWidth;
+    }, [itemWidth, loop, maxWidth]);
 
-    const finalizeAnimation = useCallback(() => {
-        const stopUnfinishedSnapAnimation = () => {
-            if (animationRef.current) {
-                animationRef.current?.stop();
-                animationRef.current = null;
-            }
-        };
+    const requireNewOffset = useCallback((newOffset: number) => {
+        const nextOffset = ensureOffsetBoundary(newOffset);
 
-        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);
-            }
+        currentOffsetRef.current = nextOffset;
+        offsetX.setValue(nextOffset);
 
-            offsetTx.setValue(0);
-            toValueRef.current = 0;
-        };
+        toValueRef.current = 0;
+        translateX.setValue(0);
+    }, [
+        ensureOffsetBoundary,
+        offsetX,
+        translateX,
+    ]);
+
+    const interruptAnimation = useCallback(() => {
+        if (toValueRef.current === 0) {
+            // Performance optimization
+            return;
+        }
+
+        translateX.stopAnimation(lastValue => {
+            isAnimatingRef.current = false;
 
-        stopUnfinishedSnapAnimation();
+            const prevOffset = currentOffsetRef.current;
+            const totalOffset = prevOffset + lastValue;
 
-        resetBoundary();
-    }, [controlledTx]);
+            notifyOffsetHasChanged(totalOffset);
 
-    const startAnimation = useCallback((direction: PagingDirection, isGesture: boolean = false) => {
-        const getToValueByDirection = directionToValue(itemWidth);
+            requireNewOffset(totalOffset);
+        });
+    }, [requireNewOffset, translateX]);
+
+    const finalizeAnimation = useCallback(() => {
+        isAnimatingRef.current = false;
+
+        const prevOffset = currentOffsetRef.current;
+        const toValue = toValueRef.current;
+        const totalOffset = prevOffset + toValue;
+
+        requireNewOffset(totalOffset);
+    }, [requireNewOffset]);
+
+    const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
+        if (isAnimatingRef.current) {
+            return;
+        }
+
+        const configWithDefaults: PagingAnimationConfig = {
+            animated: true,
+            ...config,
+        };
 
         const currentIndex = getCurrentIndex();
 
-        const computeToValueOnNoLoop = (): number => {
+        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+        const compensateToValue = toValueCompensator(itemWidth);
+
+        const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {
+            const { direction, isOriginatedFromGesture } = _config;
+
             if (currentIndex === 0 && direction === 'prev') {
-                return isGesture
-                    ? getToValueByDirection('stay')
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
                     : -lastIndex * itemWidth; // last position
             } else if (currentIndex === lastIndex && direction === 'next') {
-                return isGesture
-                    ? getToValueByDirection('stay')
+                return isOriginatedFromGesture
+                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')
                     : lastIndex * itemWidth; // first position
             }
-            return getToValueByDirection(direction);
+            return getValueByDirectionOnAllAdjacentItemsVisible(direction);
         };
 
-        const toValue = loop ? getToValueByDirection(direction) : computeToValueOnNoLoop();
-        const animation = createScrollAnimation(offsetTx, toValue);
+        const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {
+            const _configWithDefaults: DirectionalPagingAnimationConfig = {
+                isOriginatedFromGesture: false,
+                ..._config,
+            };
 
-        animationRef.current = animation;
-        toValueRef.current = toValue;
+            return loop
+                ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)
+                : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);
+        };
 
-        animation.start(({ finished }) => {
-            if (finished) {
-                finalizeAnimation();
+        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 wantedToValue = type === 'directional'
+            // @ts-ignore
+            ? getValueByDirectionalPaging(configWithDefaults)
+            // @ts-ignore
+            : getValueByIndexPaging(configWithDefaults);
+
+        const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);
+
+        toValueRef.current = toValue;
+        isAnimatingRef.current = true;
+
+        if (configWithDefaults.animated) {
+            const animation = createScrollAnimation(translateX, toValue);
+
+            animation.start(({ finished }) => {
+                if (finished) {
+                    finalizeAnimation();
+                }
+            });
+        } else {
+            finalizeAnimation();
+        }
+
+        notifyOffsetHasChanged(currentOffsetRef.current + toValue);
     }, [
         createScrollAnimation,
         getCurrentIndex,
@@ -138,11 +216,11 @@ export default function usePagingAnimation(config: PagingAnimationConfig): UsePa
         itemWidth,
         lastIndex,
         loop,
+        notifyOffsetHasChanged,
     ]);
 
     return {
-        globalInterpolation,
-        finalizeAnimation,
-        startAnimation,
+        interruptAnimation,
+        startPagingAnimation,
     };
 };

package/src/Carousel/tick.ts

@@ -0,0 +1,6 @@
+import { logger } from '@fountain-ui/utils';
+
+export default logger('Carousel', {
+    enabled: __DEV__,
+    format: 'diff',
+});

package/src/Carousel/types.ts

@@ -5,6 +5,8 @@ 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;
 }
@@ -22,14 +24,30 @@ export interface GetCurrentIndex {
 }
 
 export interface IndexController {
-    currentIndex: number;
     getCurrentIndex: GetCurrentIndex;
     lastIndex: number;
-    monitorElement: ReactElement;
+    notifyOffsetHasChanged: (offset: number) => void;
 }
 
+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 {
-    (direction: PagingDirection, isGesture?: boolean): void;
+    (type: PagingAnimationType, config: PagingAnimationConfig): void;
 }
 
 export type VisibleIndexRanges = Array<[number, number]>;
@@ -49,7 +67,17 @@ export interface AutoplayController {
     resume: () => void;
 }
 
+export interface ScrollToOption {
+    index: number;
+    animated?: boolean;
+}
+
 export interface CarouselInstance {
+    /**
+     * Get current visible item index.
+     */
+    getCurrentIndex: GetCurrentIndex;
+
     /**
      * Scroll to next visible item.
      */
@@ -61,7 +89,8 @@ export interface CarouselInstance {
     prev: () => void;
 
     /**
-     * Get current visible item index.
+     * Scroll to desired indexed item.
+     * Invalid index is ignored.
      */
-    getCurrentIndex: GetCurrentIndex;
+    scrollTo: (option: ScrollToOption) => void;
 }

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,92 +1,95 @@
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, 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 type { PageProps } from './types';
 import PageStateContext from './PageStateContext';
+import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
     fill: { width: '100%', height: '100%' },
     none: { display: 'none' },
 });
 
-interface InternalPageState {
+interface InternalPageDescription {
     isActive: boolean;
-    isLoaded: boolean;
+    becomeNeighbor: boolean;
+}
+
+interface InternalPageState {
+    active: boolean;
+    loaded: boolean;
 }
 
 function Page(props: PageProps) {
     const {
         index,
+        initialPage,
         children,
         loading,
         offscreenPageRerenderLimit,
-        sharedIndex,
     } = props;
 
-    const assumeInitialPageState = (): InternalPageState => {
-        const activeIndex = sharedIndex.value;
+    const { pageStore } = useContext(InternalContext);
 
-        const isActive = index === activeIndex;
+    const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {
+        const activeIndex = page;
 
-        if (loading === 'eager') {
-            return { isActive, isLoaded: true };
-        }
+        const isActive = index === activeIndex;
 
-        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
+        const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
             && index <= activeIndex + offscreenPageRerenderLimit;
 
-        return { isActive, isLoaded };
-    };
+        const becomeNeighbor = shouldRerender && !isActive;
+
+        return { isActive, becomeNeighbor };
+    }, [index]);
 
-    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
+    const [initialState] = useState<InternalPageState>(() => {
+        const { isActive, becomeNeighbor } = computePageDescription(initialPage);
 
-    const content = pageState.isLoaded ? children : null;
+        if (loading === 'eager') {
+            return { active: isActive, loaded: true };
+        }
 
-    const onActiveStateChange = (isActive: boolean) => {
-        setPageState(prevState => ({
-            ...prevState,
-            isActive,
-            isLoaded: isActive || prevState.isLoaded,
-        }));
-    };
+        return { active: isActive, loaded: isActive || becomeNeighbor };
+    });
 
-    const onBecomeNeighbor = () => {
-        setPageState(prevState => ({
-            ...prevState,
-            isLoaded: true,
-        }));
-    };
+    // `Bailing out of a state update` is not working as expected.
+    const pageStateRef = useRef<InternalPageState>(initialState);
+    const [, forceRender] = useReducer((s) => s + 1, 0);
 
-    useAnimatedReaction(
-        () => {
-            const activeIndex = sharedIndex.value;
+    const { active, loaded } = pageStateRef.current;
 
-            const isActive = index === activeIndex;
+    const content = loaded ? children : null;
 
-            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
-                && index <= activeIndex + offscreenPageRerenderLimit;
+    useEffect(() => {
+        return pageStore.subscribe(newPage => {
+            const { isActive, becomeNeighbor } = computePageDescription(newPage);
 
-            const becomeNeighbor = shouldRerender && !isActive;
+            const currentState = pageStateRef.current;
 
-            return { isActive, becomeNeighbor };
-        },
-        (nextState, prevState) => {
-            if (nextState.isActive !== prevState?.isActive) {
-                runOnJS(onActiveStateChange)(nextState.isActive);
-            } else if (nextState.becomeNeighbor) {
-                runOnJS(onBecomeNeighbor)();
+            const newState: InternalPageState = {
+                active: isActive,
+                loaded: isActive || becomeNeighbor ? true : currentState.loaded,
+            };
+
+            if (
+                currentState.active !== newState.active
+                || currentState.loaded !== newState.loaded
+            ) {
+                pageStateRef.current = newState;
+
+                forceRender();
             }
-        },
-        [index],
-    );
+        });
+    }, [pageStore, computePageDescription]);
 
     const contextValue = useMemo(() => ({
-        isActive: pageState.isActive,
-    }), [pageState.isActive]);
+        isActive: active,
+    }), [active]);
 
     const style = Platform.OS === 'web'
-        ? (pageState.isActive ? StyleSheet.absoluteFill : styles.none)
+        ? (active ? StyleSheet.absoluteFill : styles.none)
         : styles.fill;
 
     return (

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;