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

package/build/module/Carousel/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["directions"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n    (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n    (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n    (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n    (): number;\n}\n\nexport interface IndexController {\n    getCurrentIndex: GetCurrentIndex;\n    lastIndex: number;\n    notifyOffsetHasChanged: (offset: number) => void;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n    animated?: boolean;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n    direction: PagingDirection;\n    isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n    index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n    (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n    (): void;\n}\n\nexport interface ItemVisibilityStore {\n    dispatch: (ranges: VisibleIndexRanges) => void;\n    subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n    removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n    pause: () => void;\n    resume: () => void;\n}\n\nexport interface ScrollToOption {\n    index: number;\n    animated?: boolean;\n}\n\nexport interface CarouselInstance {\n    /**\n     * Get current visible item index.\n     */\n    getCurrentIndex: GetCurrentIndex;\n\n    /**\n     * Scroll to next visible item.\n     */\n    next: () => void;\n\n    /**\n     * Scroll to previous visible item.\n     */\n    prev: () => void;\n\n    /**\n     * Scroll to desired indexed item.\n     * Invalid index is ignored.\n     */\n    scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":"AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB"}
+{"version":3,"names":["directions","scrollStates"],"sources":["types.ts"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\n\nconst directions = ['next', 'prev', 'stay'] as const;\n\nexport type PagingDirection = (typeof directions)[number];\n\nconst scrollStates = ['idle', 'dragging', 'interrupted'] as const;\n\nexport type ScrollState = (typeof scrollStates)[number];\n\nexport type ItemHeight = number | 'auto';\n\nexport interface RenderItem<T> {\n    (info: { item: T, index: number, interpolation: Animated.AnimatedInterpolation }): ReactElement | null;\n}\n\nexport interface CreateScrollAnimation {\n    (aValue: Animated.AnimatedValue, toValue: number): Animated.CompositeAnimation;\n}\n\nexport interface CreateItemStyle {\n    (itemInterpolation: Animated.AnimatedInterpolation, itemWidth: number): Animated.AnimatedProps<ViewProps['style']>;\n}\n\nexport interface GetCurrentIndex {\n    (): number;\n}\n\nexport interface OnIndexChange {\n    (itemIndex: number): void;\n}\n\nexport interface OnPositionChange {\n    (position: number): void;\n}\n\nexport interface ScrollStateChangeEvent {\n    offset: number;\n    state: ScrollState;\n}\n\nexport interface IndexController {\n    getCurrentIndex: GetCurrentIndex;\n    lastIndex: number;\n    notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;\n}\n\nexport type PagingAnimationType = 'directional' | 'index';\n\nexport interface BasePagingAnimationConfig {\n    animated?: boolean;\n    lastGestureTranslationX?: number;\n}\n\nexport interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {\n    direction: PagingDirection;\n    isOriginatedFromGesture?: boolean;\n}\n\nexport interface IndexPagingAnimationConfig extends BasePagingAnimationConfig {\n    index: number;\n}\n\nexport type PagingAnimationConfig = DirectionalPagingAnimationConfig | IndexPagingAnimationConfig;\n\nexport interface StartPagingAnimation {\n    (type: PagingAnimationType, config: PagingAnimationConfig): void;\n}\n\nexport type VisibleIndexRanges = Array<[number, number]>;\n\nexport interface StoreSubscription {\n    (): void;\n}\n\nexport interface ItemVisibilityStore {\n    dispatch: (ranges: VisibleIndexRanges) => void;\n    subscribe: (listener: (ranges: VisibleIndexRanges) => void) => StoreSubscription;\n    removeAllListeners: () => void;\n}\n\nexport interface AutoplayController {\n    pause: () => void;\n    resume: () => void;\n}\n\nexport interface ScrollToOption {\n    index: number;\n    animated?: boolean;\n}\n\nexport interface CarouselInstance {\n    /**\n     * Get current visible item index.\n     */\n    getCurrentIndex: GetCurrentIndex;\n\n    /**\n     * Scroll to next visible item.\n     */\n    next: () => void;\n\n    /**\n     * Scroll to previous visible item.\n     */\n    prev: () => void;\n\n    /**\n     * Scroll to desired indexed item.\n     * Invalid index is ignored.\n     */\n    scrollTo: (option: ScrollToOption) => void;\n}\n"],"mappings":"AAGA,MAAMA,UAAU,GAAG,CAAC,MAAD,EAAS,MAAT,EAAiB,MAAjB,CAAnB;AAIA,MAAMC,YAAY,GAAG,CAAC,MAAD,EAAS,UAAT,EAAqB,aAArB,CAArB"}

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

@@ -1,6 +1,6 @@
 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>;
     /**
@@ -54,7 +54,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/build/typescript/Carousel/components/ScrollViewGesture.d.ts

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

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

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

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

@@ -2,7 +2,9 @@ import type { IndexController } from '../types';
 export interface UseIndexControllerParameters {
     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,10 +1,7 @@
-import type { ItemVisibilityStore } from '../types';
+import type { ItemVisibilityStore, OnPositionChange } from '../types';
 export interface Parameters {
     initialIndex: number;
     numberOfData: number;
     windowSize: number;
 }
-export interface OnIndexChange {
-    (newIndex: number): void;
-}
-export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnIndexChange];
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange];

package/build/typescript/Carousel/hooks/{usePagingAnimation.d.ts → usePagingAnimator.d.ts}

@@ -1,16 +1,17 @@
 import { Animated } from 'react-native';
 import type { CreateScrollAnimation, IndexController, StartPagingAnimation } from '../types';
-export interface PagingAnimationParameters {
+export interface PagingAnimatorConfig {
     createScrollAnimation: CreateScrollAnimation;
     itemWidth: number;
     indexController: IndexController;
+    initialIndex: number;
     loop: boolean;
     numberOfData: number;
-    offsetX: Animated.Value;
-    translateX: Animated.Value;
 }
-export interface UsePagingAnimation {
+export interface PagingAnimator {
+    gestureTranslationX: Animated.Value;
+    globalInterpolation: Animated.AnimatedInterpolation;
     interruptAnimation: () => void;
     startPagingAnimation: StartPagingAnimation;
 }
-export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation;
+export default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator;

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 scrollStates: readonly ["idle", "dragging", "interrupted"];
+export declare type ScrollState = (typeof scrollStates)[number];
 export declare type ItemHeight = number | 'auto';
 export interface RenderItem<T> {
     (info: {
@@ -19,14 +21,25 @@ export interface CreateItemStyle {
 export interface GetCurrentIndex {
     (): number;
 }
+export interface OnIndexChange {
+    (itemIndex: number): void;
+}
+export interface OnPositionChange {
+    (position: number): void;
+}
+export interface ScrollStateChangeEvent {
+    offset: number;
+    state: ScrollState;
+}
 export interface IndexController {
     getCurrentIndex: GetCurrentIndex;
     lastIndex: number;
-    notifyOffsetHasChanged: (offset: number) => void;
+    notifyScrollStateHasChanged: (event: ScrollStateChangeEvent) => void;
 }
 export declare type PagingAnimationType = 'directional' | 'index';
 export interface BasePagingAnimationConfig {
     animated?: boolean;
+    lastGestureTranslationX?: number;
 }
 export interface DirectionalPagingAnimationConfig extends BasePagingAnimationConfig {
     direction: PagingDirection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.18",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c4af6d69493666d86b7736892f778af775a3c80"
+  "gitHead": "8ca13c00c2424b287a26c7cb62619c2c0a9596df"
 }

package/src/Carousel/Carousel.tsx

@@ -1,5 +1,4 @@
-import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Animated } from 'react-native';
+import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import ViewabilityTrackerView from '../ViewabilityTrackerView';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
@@ -8,7 +7,7 @@ import {
     useIndexController,
     useItemVisibilityStore,
     useLoopedData,
-    usePagingAnimation,
+    usePagingAnimator,
 } from './hooks';
 import { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';
 import { InternalContext, RootView, ScrollViewGesture } from './components';
@@ -25,7 +24,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemHeight,
         itemWidth,
         loop = false,
-        onIndexChange: onIndexChangeProp,
+        onIndexChange,
         renderItem,
         scrollEnabled = true,
         style,
@@ -34,42 +33,35 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
 
     const data = useLoopedData(originalData, loop);
 
-    const initialTx = itemWidth * initialIndex;
-    const offsetX = useRef(new Animated.Value(initialTx)).current;
-    const translateX = useRef(new Animated.Value(0)).current;
-    const globalInterpolation = Animated.add(offsetX, translateX);
-
-    const [itemVisibilityStore, onIndexChange] = useItemVisibilityStore({
+    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({
         initialIndex,
         numberOfData: data.length,
         windowSize,
     });
 
-    const handleIndexChange = useCallback((newIndex: number) => {
-        onIndexChange(newIndex);
-        onIndexChangeProp?.(newIndex);
-    }, [onIndexChange, onIndexChangeProp]);
-
     const indexController = useIndexController({
         initialIndex,
         itemWidth,
+        numberOfData: data.length,
         numberOfOriginalData: originalData.length,
-        onIndexChange: handleIndexChange,
+        onIndexChange,
+        onPositionChange,
     });
 
     const { getCurrentIndex } = indexController;
 
     const {
+        gestureTranslationX,
+        globalInterpolation,
         interruptAnimation,
         startPagingAnimation,
-    } = usePagingAnimation({
+    } = usePagingAnimator({
         createScrollAnimation,
         itemWidth,
         indexController,
+        initialIndex,
         loop,
         numberOfData: data.length,
-        offsetX,
-        translateX,
     });
 
     const autoplayController = useAutoplayController({
@@ -122,8 +114,8 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
             >
                 <ScrollViewGesture
                     autoplayController={autoplayController}
+                    gestureTranslationX={gestureTranslationX}
                     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: 220,
-        easing: Easing.bezier(0.35, 0.5, 0.5, 0.75),
+        duration: 180,
+        easing: Easing.bezier(0.2, 0.2, 0.2, 1),
         useNativeDriver: true,
     });
 };

package/src/Carousel/components/ItemView.tsx

@@ -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;
+    gestureTranslationX: Animated.Value,
     interruptAnimation: () => void;
-    translateX: Animated.Value,
     scrollEnabled: boolean;
     startPagingAnimation: StartPagingAnimation;
 }
@@ -40,7 +40,7 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
         autoplayController,
         children,
         interruptAnimation,
-        translateX,
+        gestureTranslationX,
         scrollEnabled,
         startPagingAnimation,
     } = props;
@@ -54,7 +54,7 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
     }, [interruptAnimation, pauseAutoplay]);
 
     const handleGestureEvent = useCallback(Animated.event(
-        [{ nativeEvent: { translationX: translateX } }],
+        [{ nativeEvent: { translationX: gestureTranslationX } }],
         { useNativeDriver: true },
     ), []);
 
@@ -68,7 +68,11 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
 
             startPagingAnimation(
                 'directional',
-                { direction: direction, isOriginatedFromGesture: true },
+                {
+                    direction: direction,
+                    isOriginatedFromGesture: true,
+                    lastGestureTranslationX: translationX,
+                },
             );
 
             resumeAutoplay();

package/src/Carousel/hooks/index.ts

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

package/src/Carousel/hooks/useIndexController.tsx

@@ -1,46 +1,57 @@
-import React, { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
+import { useImperativeState } from '@fountain-ui/core';
 import { mod } from '@fountain-ui/utils';
-import type { IndexController } from '../types';
+import type { IndexController, ScrollStateChangeEvent } from '../types';
 
 export interface UseIndexControllerParameters {
     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 {
     const {
         initialIndex,
         itemWidth,
+        numberOfData,
         numberOfOriginalData,
         onIndexChange,
+        onPositionChange,
     } = params;
 
-    const currentIndexRef = useRef<number>(initialIndex);
-
-    const getCurrentIndex = useCallback(() => currentIndexRef.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;
-
-            onIndexChange?.(nextIndex);
+    const currentIndex = useImperativeState(initialIndex);
+    const currentPosition = useImperativeState(initialIndex);
+
+    const notifyScrollStateHasChanged = useCallback(({ offset, state }: ScrollStateChangeEvent) => {
+        const normalized = -Math.round(offset / itemWidth);
+        const index = Math.floor(mod(normalized, numberOfOriginalData));
+        const position = Math.floor(mod(normalized, numberOfData));
+
+        if (state === 'idle' || state === 'interrupted') {
+            if (currentIndex.hasChanged()) {
+                onIndexChange?.(currentIndex.get());
+            }
+            if (currentPosition.hasChanged()) {
+                onPositionChange?.(currentPosition.get());
+            }
         }
+
+        currentIndex.set(index);
+        currentPosition.set(position);
     }, [
         itemWidth,
+        numberOfData,
         numberOfOriginalData,
         onIndexChange,
+        onPositionChange,
     ]);
 
     return {
-        getCurrentIndex,
+        getCurrentIndex: currentIndex.get,
         lastIndex: numberOfOriginalData - 1,
-        notifyOffsetHasChanged,
+        notifyScrollStateHasChanged,
     };
 };

package/src/Carousel/hooks/useItemVisibilityStore.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { mod } from '@fountain-ui/utils';
-import type { ItemVisibilityStore, VisibleIndexRanges } from '../types';
+import type { ItemVisibilityStore, OnPositionChange, VisibleIndexRanges } from '../types';
 
 export interface Parameters {
     initialIndex: number;
@@ -8,10 +8,6 @@ export interface Parameters {
     windowSize: number;
 }
 
-export interface OnIndexChange {
-    (newIndex: number): void;
-}
-
 class SimpleItemVisibilityStore implements ItemVisibilityStore {
 
     private store: VisibleIndexRanges;
@@ -82,7 +78,7 @@ function makeVisibleIndexRanges(numberOfData: number, windowSize: number, index:
     ];
 }
 
-export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnIndexChange] {
+export default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange] {
     const {
         initialIndex,
         numberOfData,
@@ -95,8 +91,8 @@ export default function useItemVisibilityStore(params: Parameters): [ItemVisibil
 
     const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;
 
-    const onIndexChange: OnIndexChange = useCallback((newIndex) => {
-        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, newIndex);
+    const onPositionChange: OnPositionChange = useCallback((position) => {
+        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);
 
         store.dispatch(newRanges);
     }, [numberOfData, windowSize]);
@@ -107,5 +103,5 @@ export default function useItemVisibilityStore(params: Parameters): [ItemVisibil
         };
     }, []);
 
-    return [store, onIndexChange];
+    return [store, onPositionChange];
 };

package/src/Carousel/hooks/{usePagingAnimation.ts → usePagingAnimator.ts}

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Animated } from 'react-native';
 import type {
     CreateScrollAnimation,
@@ -11,17 +11,18 @@ import type {
     StartPagingAnimation,
 } from '../types';
 
-export interface PagingAnimationParameters {
+export interface PagingAnimatorConfig {
     createScrollAnimation: CreateScrollAnimation;
     itemWidth: number;
     indexController: IndexController;
+    initialIndex: number;
     loop: boolean;
     numberOfData: number;
-    offsetX: Animated.Value;
-    translateX: Animated.Value;
 }
 
-export interface UsePagingAnimation {
+export interface PagingAnimator {
+    gestureTranslationX: Animated.Value;
+    globalInterpolation: Animated.AnimatedInterpolation;
     interruptAnimation: () => void;
     startPagingAnimation: StartPagingAnimation;
 }
@@ -54,23 +55,34 @@ function toValueCompensator(itemWidth: number) {
     };
 }
 
-export default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {
+export default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {
     const {
         createScrollAnimation,
         itemWidth,
         indexController,
+        initialIndex,
         loop,
         numberOfData,
-        offsetX,
-        translateX,
-    } = params;
+    } = config;
 
     const {
         getCurrentIndex,
         lastIndex,
-        notifyOffsetHasChanged,
+        notifyScrollStateHasChanged,
     } = indexController;
 
+    const initialOffsetX = itemWidth * initialIndex;
+    const accumulativeOffsetX = useRef(new Animated.Value(initialOffsetX)).current;
+    const animationOffsetX = useRef(new Animated.Value(0)).current;
+    const gestureTranslationX = useRef(new Animated.Value(0)).current;
+
+    const globalInterpolation = useMemo(() => {
+        return Animated.add(
+            Animated.add(accumulativeOffsetX, animationOffsetX),
+            gestureTranslationX,
+        );
+    }, []);
+
     const toValueRef = useRef<number>(0);
     const currentOffsetRef = useRef<number>(0);
 
@@ -94,33 +106,33 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         const nextOffset = ensureOffsetBoundary(newOffset);
 
         currentOffsetRef.current = nextOffset;
-        offsetX.setValue(nextOffset);
+        accumulativeOffsetX.setValue(nextOffset);
 
         toValueRef.current = 0;
-        translateX.setValue(0);
+        animationOffsetX.setValue(0);
     }, [
         ensureOffsetBoundary,
-        offsetX,
-        translateX,
     ]);
 
     const interruptAnimation = useCallback(() => {
-        if (toValueRef.current === 0) {
-            // Performance optimization
+        if (!isAnimatingRef.current) {
             return;
         }
 
-        translateX.stopAnimation(lastValue => {
+        animationOffsetX.stopAnimation(lastValue => {
             isAnimatingRef.current = false;
 
             const prevOffset = currentOffsetRef.current;
             const totalOffset = prevOffset + lastValue;
 
-            notifyOffsetHasChanged(totalOffset);
-
             requireNewOffset(totalOffset);
+
+            notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });
         });
-    }, [requireNewOffset, translateX]);
+    }, [
+        notifyScrollStateHasChanged,
+        requireNewOffset,
+    ]);
 
     const finalizeAnimation = useCallback(() => {
         isAnimatingRef.current = false;
@@ -130,7 +142,12 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         const totalOffset = prevOffset + toValue;
 
         requireNewOffset(totalOffset);
-    }, [requireNewOffset]);
+
+        notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });
+    }, [
+        notifyScrollStateHasChanged,
+        requireNewOffset,
+    ]);
 
     const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {
         if (isAnimatingRef.current) {
@@ -196,8 +213,19 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         toValueRef.current = toValue;
         isAnimatingRef.current = true;
 
+        notifyScrollStateHasChanged({
+            offset: currentOffsetRef.current + toValue,
+            state: 'dragging',
+        });
+
+        const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;
+        if (Number.isFinite(lastGestureTranslationX)) {
+            animationOffsetX.setValue(lastGestureTranslationX);
+            gestureTranslationX.setValue(0);
+        }
+
         if (configWithDefaults.animated) {
-            const animation = createScrollAnimation(translateX, toValue);
+            const animation = createScrollAnimation(animationOffsetX, toValue);
 
             animation.start(({ finished }) => {
                 if (finished) {
@@ -207,8 +235,6 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         } else {
             finalizeAnimation();
         }
-
-        notifyOffsetHasChanged(currentOffsetRef.current + toValue);
     }, [
         createScrollAnimation,
         getCurrentIndex,
@@ -216,10 +242,12 @@ export default function usePagingAnimation(params: PagingAnimationParameters): U
         itemWidth,
         lastIndex,
         loop,
-        notifyOffsetHasChanged,
+        notifyScrollStateHasChanged,
     ]);
 
     return {
+        gestureTranslationX,
+        globalInterpolation,
         interruptAnimation,
         startPagingAnimation,
     };