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

package/src/Carousel/Carousel.tsx

@@ -1,11 +1,10 @@
-import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Animated } from 'react-native';
 import ViewabilityTrackerView from '../ViewabilityTrackerView';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
 import {
     useAutoplayController,
-    useDimensionChangeReaction,
     useIndexController,
     useItemVisibilityStore,
     useLoopedData,
@@ -26,7 +25,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemHeight,
         itemWidth,
         loop = false,
-        onIndexChange,
+        onIndexChange: onIndexChangeProp,
         renderItem,
         scrollEnabled = true,
         style,
@@ -36,41 +35,41 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
     const data = useLoopedData(originalData, loop);
 
     const initialTx = itemWidth * initialIndex;
-    const controlledTx = useRef(new Animated.Value(initialTx)).current;
-    const offsetTx = useRef(new Animated.Value(0)).current;
+    const offsetX = useRef(new Animated.Value(initialTx)).current;
+    const translateX = useRef(new Animated.Value(0)).current;
+    const globalInterpolation = Animated.add(offsetX, translateX);
 
-    const {
-        currentIndex,
-        getCurrentIndex,
-        lastIndex,
-        monitorElement,
-    } = useIndexController({
-        controlledTx,
+    const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({
+        initialIndex,
+        numberOfData: data.length,
+        windowSize,
+    });
+
+    const handleIndexChange = useCallback((newIndex: number) => {
+        onIndexChange(newIndex);
+        onIndexChangeProp?.(newIndex);
+    }, [onIndexChange, onIndexChangeProp]);
+
+    const indexController = useIndexController({
         initialIndex,
         itemWidth,
         numberOfOriginalData: originalData.length,
-        onIndexChange,
+        onIndexChange: handleIndexChange,
     });
 
-    const itemVisibilityStore = useItemVisibilityStore({
-        currentIndex,
-        numberOfData: data.length,
-        windowSize,
-    });
+    const { getCurrentIndex } = indexController;
 
     const {
-        finalizeAnimation,
-        globalInterpolation,
+        interruptAnimation,
         startPagingAnimation,
     } = usePagingAnimation({
-        controlledTx,
         createScrollAnimation,
-        getCurrentIndex,
         itemWidth,
-        lastIndex,
+        indexController,
         loop,
         numberOfData: data.length,
-        offsetTx,
+        offsetX,
+        translateX,
     });
 
     const autoplayController = useAutoplayController({
@@ -79,12 +78,6 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         startPagingAnimation,
     });
 
-    useDimensionChangeReaction({
-        controlledTx,
-        currentIndex,
-        itemWidth,
-    });
-
     useImperativeHandle(
         ref,
         () => ({
@@ -116,8 +109,6 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
 
     return (
         <InternalContext.Provider value={contextValue}>
-            {monitorElement}
-
             <ViewabilityTrackerView
                 enabled={autoplay && !disableSmartAutoplay}
                 measurementIntervalMillis={Math.max(3000, autoplayInterval)}
@@ -131,8 +122,8 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
             >
                 <ScrollViewGesture
                     autoplayController={autoplayController}
-                    finalizeAnimation={finalizeAnimation}
-                    offsetTx={offsetTx}
+                    interruptAnimation={interruptAnimation}
+                    translateX={translateX}
                     scrollEnabled={scrollEnabled}
                     startPagingAnimation={startPagingAnimation}
                 >

package/src/Carousel/animation/createDefaultScrollAnimation.ts

@@ -6,8 +6,8 @@ export default function createDefaultScrollAnimation(
 ): Animated.CompositeAnimation {
     return Animated.timing(animatedValue, {
         toValue: toValue,
-        duration: 350,
-        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        duration: 180,
+        easing: Easing.bezier(0.2, 0.2, 0.2, 1),
         useNativeDriver: true,
     });
 };

package/src/Carousel/animation/parallaxItemStyleFactory.ts

@@ -25,8 +25,8 @@ export default function parallaxItemStyleFactory(config: ParallaxAnimationConfig
         adjacentItemScale,
         scrollingOffset,
     }: Required<ParallaxAnimationConfig> = {
-        ...config,
         ...defaultParallaxAnimationConfig,
+        ...config,
     };
 
     const createItemStyle: CreateItemStyle = (itemInterpolation, itemWidth) => {

package/src/Carousel/components/ItemView.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import type { ViewProps } from 'react-native';
 import { Animated } from 'react-native';
 import { StyleSheet } from '@fountain-ui/core';
-import { useItemInterpolation } from '../hooks';
+import useItemInterpolation from './useItemInterpolation';
 import InternalContext from './InternalContext';
 
 export interface ItemViewProps {

package/src/Carousel/components/ScrollViewGesture.tsx

@@ -8,8 +8,8 @@ import type { AutoplayController, PagingDirection, StartPagingAnimation } from '
 export interface ScrollViewGestureProps {
     autoplayController: AutoplayController;
     children: ReactNode;
-    finalizeAnimation: () => void;
-    offsetTx: Animated.Value,
+    interruptAnimation: () => void;
+    translateX: Animated.Value,
     scrollEnabled: boolean;
     startPagingAnimation: StartPagingAnimation;
 }
@@ -23,6 +23,7 @@ const activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
 const endAnimationStates: Readonly<GestureHandlerState[]> = [
     GestureHandlerState.CANCELLED,
     GestureHandlerState.END,
+    GestureHandlerState.FAILED,
 ];
 
 function shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {
@@ -38,8 +39,8 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
     const {
         autoplayController,
         children,
-        finalizeAnimation,
-        offsetTx,
+        interruptAnimation,
+        translateX,
         scrollEnabled,
         startPagingAnimation,
     } = props;
@@ -49,11 +50,11 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
     const handleGestureBegin = useCallback(() => {
         pauseAutoplay();
 
-        finalizeAnimation();
-    }, [finalizeAnimation, pauseAutoplay]);
+        interruptAnimation();
+    }, [interruptAnimation, pauseAutoplay]);
 
     const handleGestureEvent = useCallback(Animated.event(
-        [{ nativeEvent: { translationX: offsetTx } }],
+        [{ nativeEvent: { translationX: translateX } }],
         { useNativeDriver: true },
     ), []);
 

package/src/Carousel/{hooks → components}/useItemInterpolation.ts

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { Animated } from 'react-native';
-import { InternalContext } from '../components';
+import InternalContext from './InternalContext';
 
 const OVERSCROLL_FRICTION_FACTOR = 4;
 
@@ -94,9 +94,9 @@ export default function useItemInterpolation(index: number): Animated.AnimatedIn
             ? interpolationConfigOnLoop
             : interpolationConfigOnNoLoop;
 
-        const offsetX = globalInterpolation.interpolate(interpolationConfig);
+        const localOffsetX = globalInterpolation.interpolate(interpolationConfig);
 
-        return Animated.divide(offsetX, itemWidth);
+        return Animated.divide(localOffsetX, itemWidth);
     }, [
         globalInterpolation,
         interpolationConfigOnLoop,

package/src/Carousel/hooks/index.ts

@@ -1,7 +1,5 @@
 export { default as useAutoplayController } from './useAutoplayController';
-export { default as useDimensionChangeReaction } from './useDimensionChangeReaction';
 export { default as useIndexController } from './useIndexController';
-export { default as useItemInterpolation } from './useItemInterpolation';
 export { default as useLoopedData } from './useLoopedData';
 export { default as usePagingAnimation } from './usePagingAnimation';
 export { default as useItemVisibilityStore } from './useItemVisibilityStore';

package/src/Carousel/hooks/useIndexController.tsx

@@ -1,76 +1,54 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import type { IndexController } from '../types';
+import React, { useCallback, useRef } from 'react';
+import { mod } from '@fountain-ui/utils';
+import type { AnimationState, IndexController } from '../types';
 
 export interface UseIndexControllerParameters {
-    controlledTx: Animated.AnimatedValue;
     initialIndex: number;
     itemWidth: number;
     numberOfOriginalData: number;
     onIndexChange?: (newIndex: number) => void;
 }
 
-const normalizeIndex = (maybeIndex: number, numberOfData: number): number =>
-    Math.abs(Math.floor(maybeIndex)) % numberOfData;
-
 export default function useIndexController(params: UseIndexControllerParameters): IndexController {
     const {
-        controlledTx,
         initialIndex,
         itemWidth,
         numberOfOriginalData,
         onIndexChange,
     } = params;
 
-    const indexRef = useRef<number>(initialIndex);
-    const [index, setIndex] = useState<number>(indexRef.current);
-
-    const maybeIndex = useMemo(() => {
-        const negative = new Animated.Value(-1);
-        const reversedTx = Animated.multiply(controlledTx, negative);
-        const normalized = Animated.divide(reversedTx, itemWidth);
-        return Animated.modulo(normalized, numberOfOriginalData);
-    }, [
-        controlledTx,
-        itemWidth,
-        numberOfOriginalData,
-    ]);
-
-    useEffect(() => {
-        const subscriptionId = maybeIndex.addListener((observedValue) => {
-            const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
+    const currentIndexRef = useRef<number>(initialIndex);
+    const indexChangedRef = useRef<boolean>(false);
 
-            if (indexRef.current !== newIndex) {
-                indexRef.current = newIndex;
-                setIndex(newIndex);
+    const getCurrentIndex = useCallback(() => currentIndexRef.current, []);
 
-                onIndexChange?.(newIndex);
+    const notifyAnimationState = useCallback((state: AnimationState) => {
+        if (state === 'finished' || state === 'interrupted') {
+            if (indexChangedRef.current) {
+                onIndexChange?.(getCurrentIndex());
             }
-        });
-
-        return () => {
-            maybeIndex.removeListener(subscriptionId);
-        };
+        }
     }, [
-        maybeIndex,
-        numberOfOriginalData,
+        getCurrentIndex,
         onIndexChange,
     ]);
 
-    const getCurrentIndex = useCallback(() => indexRef.current, []);
+    const notifyOffsetHasChanged = useCallback((offset: number) => {
+        const roundedOffset = Math.round(offset / itemWidth) * itemWidth;
+
+        // To prevent floating point problem, make sure index is integer type.
+        const nextIndex = Math.floor(mod((-roundedOffset / itemWidth), numberOfOriginalData));
+
+        if (nextIndex !== currentIndexRef.current) {
+            currentIndexRef.current = nextIndex;
+            indexChangedRef.current = true;
+        }
+    }, [itemWidth, numberOfOriginalData]);
 
     return {
-        currentIndex: index,
         getCurrentIndex,
         lastIndex: numberOfOriginalData - 1,
-        monitorElement: (
-            <Animated.View
-                collapsable={false}
-                style={[
-                    { zIndex: maybeIndex },
-                    { width: 1, height: 1, position: 'absolute' },
-                ]}
-            />
-        ),
+        notifyAnimationState,
+        notifyOffsetHasChanged,
     };
 };

package/src/Carousel/hooks/useItemVisibilityStore.ts

@@ -1,12 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { mod } from '@fountain-ui/utils';
 import type { ItemVisibilityStore, VisibleIndexRanges } from '../types';
 
 export interface Parameters {
-    currentIndex: number;
+    initialIndex: number;
     numberOfData: number;
     windowSize: number;
 }
 
+export interface OnIndexChange {
+    (newIndex: number): void;
+}
+
 class SimpleItemVisibilityStore implements ItemVisibilityStore {
 
     private store: VisibleIndexRanges;
@@ -52,10 +57,6 @@ function normalize(windowSize: number, numberOfData: number): number {
     return windowSize;
 }
 
-function mod(value: number, modulo: number): number {
-    return ((value % modulo) + modulo) % modulo;
-}
-
 function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {
     const ws = normalize(windowSize, numberOfData);
 
@@ -81,21 +82,24 @@ function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index:
     ];
 }
 
-export default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnIndexChange] {
     const {
-        currentIndex,
+        initialIndex,
         numberOfData,
         windowSize,
     } = params;
 
-    const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));
+    const [initialRange] = useState(() => {
+        return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);
+    });
+
     const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
 
-    useEffect(() => {
-        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);
+    const onIndexChange: OnIndexChange = useCallback((newIndex) => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, newIndex);
 
         store.dispatch(newRanges);
-    }, [currentIndex, numberOfData, windowSize]);
+    }, [numberOfData, windowSize]);
 
     useEffect(() => {
         return () => {
@@ -103,5 +107,5 @@ export default function useItemVisibilityStore(params: Parameters): ItemVisibili
         };
     }, []);
 
-    return store;
+    return [store, onIndexChange];
 };

package/src/Carousel/hooks/usePagingAnimation.ts

@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Animated, Platform } from 'react-native';
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
 import type {
     CreateScrollAnimation,
     DirectionalPagingAnimationConfig,
-    GetCurrentIndex,
+    IndexController,
     IndexPagingAnimationConfig,
     PagingAnimationConfig,
     PagingAnimationType,
@@ -12,19 +12,17 @@ import type {
 } from '../types';
 
 export interface PagingAnimationParameters {
-    controlledTx: Animated.Value;
     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;
+    interruptAnimation: () => void;
     startPagingAnimation: StartPagingAnimation;
 }
 
@@ -41,77 +39,110 @@ function directionToValue(itemWidth: number) {
     };
 }
 
+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,
+        offsetX,
+        translateX,
     } = params;
 
-    const animationRef = useRef<Animated.CompositeAnimation | null>(null);
-    const toValueRef = useRef<number>(0);
+    const {
+        getCurrentIndex,
+        lastIndex,
+        notifyAnimationState,
+        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 (!isAnimatingRef.current) {
+            return;
+        }
+
+        translateX.stopAnimation(lastValue => {
+            isAnimatingRef.current = false;
+
+            const prevOffset = currentOffsetRef.current;
+            const totalOffset = prevOffset + lastValue;
+
+            notifyOffsetHasChanged(totalOffset);
+            notifyAnimationState('interrupted');
+
+            requireNewOffset(totalOffset);
+        });
+    }, [requireNewOffset, translateX]);
+
+    const finalizeAnimation = useCallback(() => {
+        notifyAnimationState('finished');
 
-        stopUnfinishedSnapAnimation();
+        isAnimatingRef.current = false;
 
-        resetBoundary();
-    }, [controlledTx]);
+        const prevOffset = currentOffsetRef.current;
+        const toValue = toValueRef.current;
+        const totalOffset = prevOffset + toValue;
+
+        requireNewOffset(totalOffset);
+    }, [
+        notifyAnimationState,
+        requireNewOffset,
+    ]);
 
     const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
+        if (isAnimatingRef.current) {
+            return;
+        }
+
         const configWithDefaults: PagingAnimationConfig = {
             animated: true,
             ...config,
@@ -120,6 +151,7 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         const currentIndex = getCurrentIndex();
 
         const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+        const compensateToValue = toValueCompensator(itemWidth);
 
         const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {
             const { direction, isOriginatedFromGesture } = _config;
@@ -159,22 +191,29 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
             return distance * direction;
         };
 
-        const toValue = type === 'directional'
+        const wantedToValue = type === 'directional'
             // @ts-ignore
             ? getValueByDirectionalPaging(configWithDefaults)
             // @ts-ignore
             : getValueByIndexPaging(configWithDefaults);
 
+        const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);
+
         toValueRef.current = toValue;
+        isAnimatingRef.current = true;
+
+        notifyOffsetHasChanged(currentOffsetRef.current + toValue);
 
         if (configWithDefaults.animated) {
-            const animation = createScrollAnimation(offsetTx, toValue);
-            animationRef.current = animation;
+            const animation = createScrollAnimation(translateX, toValue);
+
             animation.start(({ finished }) => {
                 if (finished) {
                     finalizeAnimation();
                 }
             });
+
+            notifyAnimationState('started');
         } else {
             finalizeAnimation();
         }
@@ -185,11 +224,12 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         itemWidth,
         lastIndex,
         loop,
+        notifyAnimationState,
+        notifyOffsetHasChanged,
     ]);
 
     return {
-        globalInterpolation,
-        finalizeAnimation,
+        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,10 @@ const directions = ['next', 'prev', 'stay'] as const;
 
 export type PagingDirection = (typeof directions)[number];
 
+const animationStates = ['started', 'finished', 'interrupted'] as const;
+
+export type AnimationState = (typeof animationStates)[number];
+
 export type ItemHeight = number | 'auto';
 
 export interface RenderItem<T> {
@@ -24,10 +28,10 @@ export interface GetCurrentIndex {
 }
 
 export interface IndexController {
-    currentIndex: number;
     getCurrentIndex: GetCurrentIndex;
     lastIndex: number;
-    monitorElement: ReactElement;
+    notifyAnimationState: (state: AnimationState) => void;
+    notifyOffsetHasChanged: (offset: number) => void;
 }
 
 export type PagingAnimationType = 'directional' | 'index';