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

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> {
@@ -23,11 +27,19 @@ 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 type PagingAnimationType = 'directional' | 'index';

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Platform, View } from 'react-native';
 import { StyleSheet } from '@fountain-ui/core';
 import type { PageProps } from './types';
@@ -10,9 +10,14 @@ const styles = StyleSheet.create({
     none: { display: 'none' },
 });
 
-interface InternalPageState {
+interface InternalPageDescription {
     isActive: boolean;
-    isLoaded: boolean;
+    becomeNeighbor: boolean;
+}
+
+interface InternalPageState {
+    active: boolean;
+    loaded: boolean;
 }
 
 function Page(props: PageProps) {
@@ -26,63 +31,65 @@ function Page(props: PageProps) {
 
     const { pageStore } = useContext(InternalContext);
 
-    const assumeInitialPageState = (): InternalPageState => {
-        const activeIndex = initialPage;
+    const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {
+        const activeIndex = page;
 
         const isActive = index === activeIndex;
 
+        const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
+            && index <= activeIndex + offscreenPageRerenderLimit;
+
+        const becomeNeighbor = shouldRerender && !isActive;
+
+        return { isActive, becomeNeighbor };
+    }, [index]);
+
+    const [initialState] = useState<InternalPageState>(() => {
+        const { isActive, becomeNeighbor } = computePageDescription(initialPage);
+
         if (loading === 'eager') {
-            return { isActive, isLoaded: true };
+            return { active: isActive, loaded: true };
         }
 
-        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit
-            && index <= activeIndex + offscreenPageRerenderLimit;
+        return { active: isActive, loaded: isActive || becomeNeighbor };
+    });
 
-        return { isActive, isLoaded };
-    };
+    // `Bailing out of a state update` is not working as expected.
+    const pageStateRef = useRef<InternalPageState>(initialState);
+    const [, forceRender] = useReducer((s) => s + 1, 0);
 
-    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);
+    const { active, loaded } = pageStateRef.current;
 
-    const content = pageState.isLoaded ? children : null;
+    const content = loaded ? children : null;
 
     useEffect(() => {
         return pageStore.subscribe(newPage => {
-            const activeIndex = newPage;
-
-            const isActive = index === activeIndex;
-
-            const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit
-                && index <= activeIndex + offscreenPageRerenderLimit;
+            const { isActive, becomeNeighbor } = computePageDescription(newPage);
 
-            const becomeNeighbor = shouldRerender && !isActive;
+            const currentState = pageStateRef.current;
 
-            setPageState(prevState => {
-                if (prevState.isActive !== isActive) {
-                    return {
-                        ...prevState,
-                        isActive,
-                        isLoaded: isActive || prevState.isLoaded,
-                    };
-                }
+            const newState: InternalPageState = {
+                active: isActive,
+                loaded: isActive || becomeNeighbor ? true : currentState.loaded,
+            };
 
-                if (becomeNeighbor && !prevState.isLoaded) {
-                    return {
-                        ...prevState,
-                        isLoaded: true,
-                    };
-                }
+            if (
+                currentState.active !== newState.active
+                || currentState.loaded !== newState.loaded
+            ) {
+                pageStateRef.current = newState;
 
-                return prevState;
-            });
+                forceRender();
+            }
         });
-    }, [pageStore, 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/ViewPagerNative.tsx

@@ -77,7 +77,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         return () => {
             animatedValue.removeListener(id);
         };
-    }, [sharedPage]);
+    }, [sharedPage, setPage]);
 
     const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
         if (Number.isFinite(desiredPageRef.current)) {
@@ -103,9 +103,9 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
             if (trustfulNextPage !== pageRef.current) {
                 desiredPageRef.current = trustfulNextPage;
                 sharedPage.animatedValue.setValue(trustfulNextPage);
-            }
 
-            onChange?.(trustfulNextPage);
+                onChange?.(trustfulNextPage);
+            }
         }
     }, [onChange, sharedPage]);
 

package/src/ViewPager/usePageStore.ts

@@ -20,5 +20,11 @@ export default function usePageStore(value: SyncAnimatedValue): MonoStore<number
         };
     }, [animatedValue]);
 
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
     return store;
 };

package/src/ViewabilityTrackerView/measureViewability.ts

@@ -1,4 +1,5 @@
 import type { View } from 'react-native';
+import { clamp } from '@fountain-ui/utils';
 
 interface Rect {
     top: number,
@@ -27,9 +28,6 @@ const normalizePagePosition = (value?: number): number =>
 const normalizeViewSize = (size: number): number =>
     Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
 
-const clamp = (value: number, min: number, max: number): number =>
-    Math.min(Math.max(value, min), max);
-
 export default function measureViewability({
     view,
     windowWidth,

package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useDimensionChangeReaction;
-
-var _react = require("react");
-
-function useDimensionChangeReaction(params) {
-  const {
-    controlledTx,
-    currentIndex,
-    itemWidth
-  } = params;
-  (0, _react.useEffect)(() => {
-    const newTx = -currentIndex * itemWidth;
-    controlledTx.setValue(newTx);
-  }, [controlledTx, currentIndex, itemWidth]);
-}
-
-;
-//# sourceMappingURL=useDimensionChangeReaction.js.map

package/build/commonjs/Carousel/hooks/useDimensionChangeReaction.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","useEffect","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n    controlledTx: Animated.AnimatedValue;\n    currentIndex: number;\n    itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n    const {\n        controlledTx,\n        currentIndex,\n        itemWidth,\n    } = params;\n\n    useEffect(() => {\n        const newTx = -currentIndex * itemWidth;\n        controlledTx.setValue(newTx);\n    }, [\n        controlledTx,\n        currentIndex,\n        itemWidth,\n    ]);\n};\n"],"mappings":";;;;;;;AAAA;;AASe,SAASA,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,IAAAI,gBAAA,EAAU,MAAM;IACZ,MAAMC,KAAK,GAAG,CAACH,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACK,QAAb,CAAsBD,KAAtB;EACH,CAHD,EAGG,CACCJ,YADD,EAECC,YAFD,EAGCC,SAHD,CAHH;AAQH;;AAAA"}

package/build/commonjs/Carousel/hooks/useItemInterpolation.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","useContext","InternalContext","numberOfData","length","interpolationConfigOnLoop","useMemo","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","offsetX","interpolate","Animated","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n    const {\n        itemWidth,\n        data,\n        globalInterpolation,\n        loop,\n    } = useContext(InternalContext);\n\n    const numberOfData = data.length;\n\n    const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n        const lastIndex = numberOfData - 1;\n        const maxWidth = Math.abs(itemWidth * numberOfData);\n        const halfOfItemWidth = 0.5 * itemWidth;\n\n        const positiveCount = Math.round(lastIndex / 2);\n        const startPosition = index > positiveCount\n            ? (index - numberOfData) * itemWidth\n            : itemWidth * index;\n\n        const max = positiveCount * itemWidth;\n        const min = -((lastIndex - positiveCount) * itemWidth);\n\n        const inputRange = [\n            -maxWidth,\n            min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n            min - halfOfItemWidth - startPosition,\n            0,\n            max + halfOfItemWidth - startPosition,\n            max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n            maxWidth,\n        ];\n\n        const outputRange = [\n            startPosition,\n            max + halfOfItemWidth - Number.MIN_VALUE,\n            min - halfOfItemWidth,\n            startPosition,\n            max + halfOfItemWidth,\n            min - halfOfItemWidth + Number.MIN_VALUE,\n            startPosition,\n        ];\n\n        return {\n            inputRange,\n            outputRange,\n            extrapolate: 'clamp',\n        };\n    }, [\n        index,\n        itemWidth,\n        numberOfData,\n    ]);\n\n    const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n        const lastIndex = numberOfData - 1;\n        const maxWidth = itemWidth * lastIndex;\n        const startPosition = itemWidth * index;\n        const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n        const inputRange = [\n            -(maxWidth + itemWidth), // overscroll\n            -maxWidth,\n            0,\n            itemWidth, // overscroll\n        ];\n\n        const outputRange = [\n            -maxWidth + startPosition - friction,\n            -maxWidth + startPosition,\n            startPosition,\n            startPosition + friction,\n        ];\n\n        return {\n            inputRange,\n            outputRange,\n            extrapolate: 'clamp',\n        };\n    }, [\n        index,\n        itemWidth,\n        numberOfData,\n    ]);\n\n    return useMemo(() => {\n        const interpolationConfig = loop\n            ? interpolationConfigOnLoop\n            : interpolationConfigOnNoLoop;\n\n        const offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n        return Animated.divide(offsetX, itemWidth);\n    }, [\n        globalInterpolation,\n        interpolationConfigOnLoop,\n        interpolationConfigOnNoLoop,\n        itemWidth,\n        loop,\n    ]);\n};\n"],"mappings":"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"}

package/build/module/Carousel/hooks/useDimensionChangeReaction.js

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-export default function useDimensionChangeReaction(params) {
-  const {
-    controlledTx,
-    currentIndex,
-    itemWidth
-  } = params;
-  useEffect(() => {
-    const newTx = -currentIndex * itemWidth;
-    controlledTx.setValue(newTx);
-  }, [controlledTx, currentIndex, itemWidth]);
-}
-;
-//# sourceMappingURL=useDimensionChangeReaction.js.map

package/build/module/Carousel/hooks/useDimensionChangeReaction.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useDimensionChangeReaction","params","controlledTx","currentIndex","itemWidth","newTx","setValue"],"sources":["useDimensionChangeReaction.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Animated } from 'react-native';\n\nexport interface Parameters {\n    controlledTx: Animated.AnimatedValue;\n    currentIndex: number;\n    itemWidth: number;\n}\n\nexport default function useDimensionChangeReaction(params: Parameters) {\n    const {\n        controlledTx,\n        currentIndex,\n        itemWidth,\n    } = params;\n\n    useEffect(() => {\n        const newTx = -currentIndex * itemWidth;\n        controlledTx.setValue(newTx);\n    }, [\n        controlledTx,\n        currentIndex,\n        itemWidth,\n    ]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AASA,eAAe,SAASC,0BAAT,CAAoCC,MAApC,EAAwD;EACnE,MAAM;IACFC,YADE;IAEFC,YAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMAF,SAAS,CAAC,MAAM;IACZ,MAAMM,KAAK,GAAG,CAACF,YAAD,GAAgBC,SAA9B;IACAF,YAAY,CAACI,QAAb,CAAsBD,KAAtB;EACH,CAHQ,EAGN,CACCH,YADD,EAECC,YAFD,EAGCC,SAHD,CAHM,CAAT;AAQH;AAAA"}

package/build/module/Carousel/hooks/useItemInterpolation.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useContext","useMemo","Animated","InternalContext","OVERSCROLL_FRICTION_FACTOR","useItemInterpolation","index","itemWidth","data","globalInterpolation","loop","numberOfData","length","interpolationConfigOnLoop","lastIndex","maxWidth","Math","abs","halfOfItemWidth","positiveCount","round","startPosition","max","min","inputRange","Number","MIN_VALUE","outputRange","extrapolate","interpolationConfigOnNoLoop","friction","interpolationConfig","offsetX","interpolate","divide"],"sources":["useItemInterpolation.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\nimport { Animated } from 'react-native';\nimport { InternalContext } from '../components';\n\nconst OVERSCROLL_FRICTION_FACTOR = 4;\n\nexport default function useItemInterpolation(index: number): Animated.AnimatedInterpolation {\n    const {\n        itemWidth,\n        data,\n        globalInterpolation,\n        loop,\n    } = useContext(InternalContext);\n\n    const numberOfData = data.length;\n\n    const interpolationConfigOnLoop = useMemo<Animated.InterpolationConfigType>(() => {\n        const lastIndex = numberOfData - 1;\n        const maxWidth = Math.abs(itemWidth * numberOfData);\n        const halfOfItemWidth = 0.5 * itemWidth;\n\n        const positiveCount = Math.round(lastIndex / 2);\n        const startPosition = index > positiveCount\n            ? (index - numberOfData) * itemWidth\n            : itemWidth * index;\n\n        const max = positiveCount * itemWidth;\n        const min = -((lastIndex - positiveCount) * itemWidth);\n\n        const inputRange = [\n            -maxWidth,\n            min - halfOfItemWidth - startPosition - Number.MIN_VALUE,\n            min - halfOfItemWidth - startPosition,\n            0,\n            max + halfOfItemWidth - startPosition,\n            max + halfOfItemWidth - startPosition + Number.MIN_VALUE,\n            maxWidth,\n        ];\n\n        const outputRange = [\n            startPosition,\n            max + halfOfItemWidth - Number.MIN_VALUE,\n            min - halfOfItemWidth,\n            startPosition,\n            max + halfOfItemWidth,\n            min - halfOfItemWidth + Number.MIN_VALUE,\n            startPosition,\n        ];\n\n        return {\n            inputRange,\n            outputRange,\n            extrapolate: 'clamp',\n        };\n    }, [\n        index,\n        itemWidth,\n        numberOfData,\n    ]);\n\n    const interpolationConfigOnNoLoop = useMemo<Animated.InterpolationConfigType>(() => {\n        const lastIndex = numberOfData - 1;\n        const maxWidth = itemWidth * lastIndex;\n        const startPosition = itemWidth * index;\n        const friction = itemWidth / OVERSCROLL_FRICTION_FACTOR;\n\n        const inputRange = [\n            -(maxWidth + itemWidth), // overscroll\n            -maxWidth,\n            0,\n            itemWidth, // overscroll\n        ];\n\n        const outputRange = [\n            -maxWidth + startPosition - friction,\n            -maxWidth + startPosition,\n            startPosition,\n            startPosition + friction,\n        ];\n\n        return {\n            inputRange,\n            outputRange,\n            extrapolate: 'clamp',\n        };\n    }, [\n        index,\n        itemWidth,\n        numberOfData,\n    ]);\n\n    return useMemo(() => {\n        const interpolationConfig = loop\n            ? interpolationConfigOnLoop\n            : interpolationConfigOnNoLoop;\n\n        const offsetX = globalInterpolation.interpolate(interpolationConfig);\n\n        return Animated.divide(offsetX, itemWidth);\n    }, [\n        globalInterpolation,\n        interpolationConfigOnLoop,\n        interpolationConfigOnNoLoop,\n        itemWidth,\n        loop,\n    ]);\n};\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,OAApC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,eAAT,QAAgC,eAAhC;AAEA,MAAMC,0BAA0B,GAAG,CAAnC;AAEA,eAAe,SAASC,oBAAT,CAA8BC,KAA9B,EAA6E;EACxF,MAAM;IACFC,SADE;IAEFC,IAFE;IAGFC,mBAHE;IAIFC;EAJE,IAKFV,UAAU,CAACG,eAAD,CALd;EAOA,MAAMQ,YAAY,GAAGH,IAAI,CAACI,MAA1B;EAEA,MAAMC,yBAAyB,GAAGZ,OAAO,CAAmC,MAAM;IAC9E,MAAMa,SAAS,GAAGH,YAAY,GAAG,CAAjC;IACA,MAAMI,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAASV,SAAS,GAAGI,YAArB,CAAjB;IACA,MAAMO,eAAe,GAAG,MAAMX,SAA9B;IAEA,MAAMY,aAAa,GAAGH,IAAI,CAACI,KAAL,CAAWN,SAAS,GAAG,CAAvB,CAAtB;IACA,MAAMO,aAAa,GAAGf,KAAK,GAAGa,aAAR,GAChB,CAACb,KAAK,GAAGK,YAAT,IAAyBJ,SADT,GAEhBA,SAAS,GAAGD,KAFlB;IAIA,MAAMgB,GAAG,GAAGH,aAAa,GAAGZ,SAA5B;IACA,MAAMgB,GAAG,GAAG,EAAE,CAACT,SAAS,GAAGK,aAAb,IAA8BZ,SAAhC,CAAZ;IAEA,MAAMiB,UAAU,GAAG,CACf,CAACT,QADc,EAEfQ,GAAG,GAAGL,eAAN,GAAwBG,aAAxB,GAAwCI,MAAM,CAACC,SAFhC,EAGfH,GAAG,GAAGL,eAAN,GAAwBG,aAHT,EAIf,CAJe,EAKfC,GAAG,GAAGJ,eAAN,GAAwBG,aALT,EAMfC,GAAG,GAAGJ,eAAN,GAAwBG,aAAxB,GAAwCI,MAAM,CAACC,SANhC,EAOfX,QAPe,CAAnB;IAUA,MAAMY,WAAW,GAAG,CAChBN,aADgB,EAEhBC,GAAG,GAAGJ,eAAN,GAAwBO,MAAM,CAACC,SAFf,EAGhBH,GAAG,GAAGL,eAHU,EAIhBG,aAJgB,EAKhBC,GAAG,GAAGJ,eALU,EAMhBK,GAAG,GAAGL,eAAN,GAAwBO,MAAM,CAACC,SANf,EAOhBL,aAPgB,CAApB;IAUA,OAAO;MACHG,UADG;MAEHG,WAFG;MAGHC,WAAW,EAAE;IAHV,CAAP;EAKH,CAtCwC,EAsCtC,CACCtB,KADD,EAECC,SAFD,EAGCI,YAHD,CAtCsC,CAAzC;EA4CA,MAAMkB,2BAA2B,GAAG5B,OAAO,CAAmC,MAAM;IAChF,MAAMa,SAAS,GAAGH,YAAY,GAAG,CAAjC;IACA,MAAMI,QAAQ,GAAGR,SAAS,GAAGO,SAA7B;IACA,MAAMO,aAAa,GAAGd,SAAS,GAAGD,KAAlC;IACA,MAAMwB,QAAQ,GAAGvB,SAAS,GAAGH,0BAA7B;IAEA,MAAMoB,UAAU,GAAG,CACf,EAAET,QAAQ,GAAGR,SAAb,CADe,EACU;IACzB,CAACQ,QAFc,EAGf,CAHe,EAIfR,SAJe,CAIJ;IAJI,CAAnB;IAOA,MAAMoB,WAAW,GAAG,CAChB,CAACZ,QAAD,GAAYM,aAAZ,GAA4BS,QADZ,EAEhB,CAACf,QAAD,GAAYM,aAFI,EAGhBA,aAHgB,EAIhBA,aAAa,GAAGS,QAJA,CAApB;IAOA,OAAO;MACHN,UADG;MAEHG,WAFG;MAGHC,WAAW,EAAE;IAHV,CAAP;EAKH,CAzB0C,EAyBxC,CACCtB,KADD,EAECC,SAFD,EAGCI,YAHD,CAzBwC,CAA3C;EA+BA,OAAOV,OAAO,CAAC,MAAM;IACjB,MAAM8B,mBAAmB,GAAGrB,IAAI,GAC1BG,yBAD0B,GAE1BgB,2BAFN;IAIA,MAAMG,OAAO,GAAGvB,mBAAmB,CAACwB,WAApB,CAAgCF,mBAAhC,CAAhB;IAEA,OAAO7B,QAAQ,CAACgC,MAAT,CAAgBF,OAAhB,EAAyBzB,SAAzB,CAAP;EACH,CARa,EAQX,CACCE,mBADD,EAECI,yBAFD,EAGCgB,2BAHD,EAICtB,SAJD,EAKCG,IALD,CARW,CAAd;AAeH;AAAA"}

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

@@ -1,7 +0,0 @@
-import { Animated } from 'react-native';
-export interface Parameters {
-    controlledTx: Animated.AnimatedValue;
-    currentIndex: number;
-    itemWidth: number;
-}
-export default function useDimensionChangeReaction(params: Parameters): void;

package/src/Carousel/hooks/useDimensionChangeReaction.ts

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { Animated } from 'react-native';
-
-export interface Parameters {
-    controlledTx: Animated.AnimatedValue;
-    currentIndex: number;
-    itemWidth: number;
-}
-
-export default function useDimensionChangeReaction(params: Parameters) {
-    const {
-        controlledTx,
-        currentIndex,
-        itemWidth,
-    } = params;
-
-    useEffect(() => {
-        const newTx = -currentIndex * itemWidth;
-        controlledTx.setValue(newTx);
-    }, [
-        controlledTx,
-        currentIndex,
-        itemWidth,
-    ]);
-};