@fountain-ui/lab 2.0.0-beta.14 → 2.0.0-beta.17

package/build/typescript/Carousel/components/ScrollViewGesture.d.ts

@@ -4,8 +4,8 @@ import type { AutoplayController, StartPagingAnimation } from '../types';
 export interface ScrollViewGestureProps {
     autoplayController: AutoplayController;
     children: ReactNode;
-    finalizeAnimation: () => void;
-    offsetTx: Animated.Value;
+    interruptAnimation: () => void;
+    translateX: Animated.Value;
     scrollEnabled: boolean;
     startPagingAnimation: StartPagingAnimation;
 }

package/build/typescript/Carousel/hooks/index.d.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/build/typescript/Carousel/hooks/useIndexController.d.ts

@@ -1,10 +1,10 @@
-import { Animated } from 'react-native';
 import type { IndexController } from '../types';
 export interface UseIndexControllerParameters {
-    controlledTx: Animated.AnimatedValue;
     initialIndex: number;
     itemWidth: number;
+    numberOfData: number;
     numberOfOriginalData: number;
-    onIndexChange?: (newIndex: number) => void;
+    onIndexChange?: (itemIndex: number) => void;
+    onPositionChange?: (position: number) => void;
 }
 export default function useIndexController(params: UseIndexControllerParameters): IndexController;

package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts

@@ -1,7 +1,7 @@
-import type { ItemVisibilityStore } from '../types';
+import type { ItemVisibilityStore, OnPositionChange } from '../types';
 export interface Parameters {
-    currentIndex: number;
+    initialIndex: number;
     numberOfData: number;
     windowSize: number;
 }
-export default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore;
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange];

package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts

@@ -1,18 +1,16 @@
 import { Animated } from 'react-native';
-import type { CreateScrollAnimation, GetCurrentIndex, StartPagingAnimation } from '../types';
+import type { CreateScrollAnimation, IndexController, StartPagingAnimation } 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;
 }
 export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation;

package/build/typescript/Carousel/tick.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, message?: string | undefined) => void;
+export default _default;

package/build/typescript/Carousel/types.d.ts

@@ -2,6 +2,8 @@ import type { ReactElement } from 'react';
 import type { Animated, ViewProps } from 'react-native';
 declare const directions: readonly ["next", "prev", "stay"];
 export declare type PagingDirection = (typeof directions)[number];
+declare const animationStates: readonly ["started", "finished", "interrupted"];
+export declare type AnimationState = (typeof animationStates)[number];
 export declare type ItemHeight = number | 'auto';
 export interface RenderItem<T> {
     (info: {
@@ -19,11 +21,17 @@ export interface CreateItemStyle {
 export interface GetCurrentIndex {
     (): number;
 }
+export interface OnIndexChange {
+    (itemIndex: number): void;
+}
+export interface OnPositionChange {
+    (position: number): void;
+}
 export interface IndexController {
-    currentIndex: number;
     getCurrentIndex: GetCurrentIndex;
     lastIndex: number;
-    monitorElement: ReactElement;
+    notifyAnimationState: (state: AnimationState) => void;
+    notifyOffsetHasChanged: (offset: number) => void;
 }
 export declare type PagingAnimationType = 'directional' | 'index';
 export interface BasePagingAnimationConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.17",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -18,7 +18,7 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fountain-ui/icons": "^2.0.0-beta.6",
-    "@fountain-ui/utils": "^2.0.0-beta.3",
+    "@fountain-ui/utils": "^2.0.0-beta.4",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bd0ccbf7db51f1418dffb2da36fe167654a58f7e"
+  "gitHead": "973591c61fab2561cea9f30d03e802a24817b5f8"
 }

package/src/Carousel/Carousel.tsx

@@ -5,7 +5,6 @@ import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
 import {
     useAutoplayController,
-    useDimensionChangeReaction,
     useIndexController,
     useItemVisibilityStore,
     useLoopedData,
@@ -36,41 +35,38 @@ 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, onPositionChange] = useItemVisibilityStore({
+        initialIndex,
+        numberOfData: data.length,
+        windowSize,
+    });
+
+    const indexController = useIndexController({
         initialIndex,
         itemWidth,
+        numberOfData: data.length,
         numberOfOriginalData: originalData.length,
         onIndexChange,
+        onPositionChange,
     });
 
-    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 +75,6 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         startPagingAnimation,
     });
 
-    useDimensionChangeReaction({
-        controlledTx,
-        currentIndex,
-        itemWidth,
-    });
-
     useImperativeHandle(
         ref,
         () => ({
@@ -116,8 +106,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 +119,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/CarouselProps.ts

@@ -1,6 +1,13 @@
 import type { RefObject } from 'react';
 import type { ComponentProps } from '@fountain-ui/core';
-import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, ItemHeight, RenderItem } from './types';
+import type {
+    CarouselInstance,
+    CreateItemStyle,
+    CreateScrollAnimation,
+    ItemHeight,
+    OnIndexChange,
+    RenderItem,
+} from './types';
 
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     ref?: RefObject<CarouselInstance>;
@@ -66,7 +73,7 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
     /**
      * Callback fired when an index is changed.
      */
-    onIndexChange?: (newIndex: number) => void;
+    onIndexChange?: OnIndexChange;
 
     /**
      * Takes an item from data and renders it into the list.

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 {
@@ -32,7 +32,7 @@ export default function ItemView(props: ItemViewProps) {
 
     const itemStyle = useMemo(
         () => createItemStyle(interpolation, itemWidth),
-        [createItemStyle, interpolation],
+        [createItemStyle, interpolation, itemWidth],
     );
 
     useEffect(() => {
@@ -40,7 +40,7 @@ export default function ItemView(props: ItemViewProps) {
             const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);
             setVisible(nextVisible);
         });
-    }, [itemVisibilityStore]);
+    }, [index, itemVisibilityStore]);
 
     return (
         <Animated.View

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,65 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import type { IndexController } from '../types';
+import { useCallback } from 'react';
+import { useImperativeState } from '@fountain-ui/core';
+import { mod } from '@fountain-ui/utils';
+import type { AnimationState, IndexController } from '../types';
 
 export interface UseIndexControllerParameters {
-    controlledTx: Animated.AnimatedValue;
     initialIndex: number;
     itemWidth: number;
+    numberOfData: number;
     numberOfOriginalData: number;
-    onIndexChange?: (newIndex: number) => void;
+    onIndexChange?: (itemIndex: number) => void;
+    onPositionChange?: (position: 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,
+        numberOfData,
         numberOfOriginalData,
         onIndexChange,
+        onPositionChange,
     } = params;
 
-    const indexRef = useRef<number>(initialIndex);
-    const [index, setIndex] = useState<number>(indexRef.current);
+    const currentIndex = useImperativeState(initialIndex);
+    const currentPosition = useImperativeState(initialIndex);
+
+    const notifyAnimationState = useCallback((state: AnimationState) => {
+        if (state === 'finished' || state === 'interrupted') {
+            if (currentIndex.hasChanged()) {
+                onIndexChange?.(currentIndex.get());
+            }
 
-    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);
+            if (currentPosition.hasChanged()) {
+                onPositionChange?.(currentPosition.get());
+            }
+        }
     }, [
-        controlledTx,
-        itemWidth,
-        numberOfOriginalData,
+        onIndexChange,
+        onPositionChange,
     ]);
 
-    useEffect(() => {
-        const subscriptionId = maybeIndex.addListener((observedValue) => {
-            const newIndex = normalizeIndex(observedValue.value, numberOfOriginalData);
-
-            if (indexRef.current !== newIndex) {
-                indexRef.current = newIndex;
-                setIndex(newIndex);
+    const notifyOffsetHasChanged = useCallback((offset: number) => {
+        const roundedOffset = Math.round(offset / itemWidth) * itemWidth;
 
-                onIndexChange?.(newIndex);
-            }
-        });
+        // To prevent floating point problem, make sure index is integer type.
+        const nextIndex = Math.floor(mod((-roundedOffset / itemWidth), numberOfOriginalData));
+        currentIndex.set(nextIndex);
 
-        return () => {
-            maybeIndex.removeListener(subscriptionId);
-        };
+        // To prevent floating point problem, make sure index is integer type.
+        const nextPosition = Math.floor(mod((-roundedOffset / itemWidth), numberOfData));
+        currentPosition.set(nextPosition);
     }, [
-        maybeIndex,
+        itemWidth,
+        numberOfData,
         numberOfOriginalData,
-        onIndexChange,
     ]);
 
-    const getCurrentIndex = useCallback(() => indexRef.current, []);
-
     return {
-        currentIndex: index,
-        getCurrentIndex,
+        getCurrentIndex: currentIndex.get,
         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,8 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
-import type { ItemVisibilityStore, VisibleIndexRanges } from '../types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { mod } from '@fountain-ui/utils';
+import type { ItemVisibilityStore, OnPositionChange, VisibleIndexRanges } from '../types';
 
 export interface Parameters {
-    currentIndex: number;
+    initialIndex: number;
     numberOfData: number;
     windowSize: number;
 }
@@ -52,10 +53,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 +78,24 @@ function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index:
     ];
 }
 
-export default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange] {
     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 onPositionChange: OnPositionChange = useCallback((position) => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);
 
         store.dispatch(newRanges);
-    }, [currentIndex, numberOfData, windowSize]);
+    }, [numberOfData, windowSize]);
 
     useEffect(() => {
         return () => {
@@ -103,5 +103,5 @@ export default function useItemVisibilityStore(params: Parameters): ItemVisibili
         };
     }, []);
 
-    return store;
+    return [store, onPositionChange];
 };