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

package/src/ViewPager/ChildrenMemoizedPage.tsx

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

package/src/ViewPager/InternalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { MonoStore } from '@fountain-ui/core';
+import { MockStore } from '@fountain-ui/core';
+
+export interface InternalContextValue {
+    pageStore: MonoStore<number>;
+}
+
+const InternalContext = createContext<InternalContextValue>({
+    pageStore: new MockStore(),
+});
+
+export default InternalContext;

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,10 +1,12 @@
 import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
 import RNViewPager from 'react-native-pager-view';
-import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { useSyncAnimatedValue } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
 import { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';
+import usePageStore from './usePageStore';
+import InternalContext from './InternalContext';
 
 const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
@@ -21,10 +23,12 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedPage = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
 
     const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
 
+    const pageRef = useRef<number>(sharedPage.initialValue);
+
     const desiredPageRef = useRef<number>(NaN);
 
     const pagerRef = useRef<RNViewPager | null>(null);
@@ -38,7 +42,7 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
         animationFrameRef.current = requestAnimationFrame(() => {
             if (Number.isFinite(desiredPageRef.current)) {
-                if (sharedPage.value === desiredPageRef.current) {
+                if (pageRef.current === desiredPageRef.current) {
                     // end of state machine. clear desired page.
                     desiredPageRef.current = NaN;
                     return;
@@ -62,13 +66,18 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         };
     }, []);
 
-    useAnimatedReaction(
-        () => sharedPage.value,
-        (result) => {
-            runOnJS(setPage)(result);
-        },
-        [setPage],
-    );
+    useEffect(() => {
+        const animatedValue = sharedPage.animatedValue;
+        const id = animatedValue.addListener(newValue => {
+            const newPage = newValue.value;
+            pageRef.current = newPage;
+            setPage(newPage);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [sharedPage, setPage]);
 
     const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
         if (Number.isFinite(desiredPageRef.current)) {
@@ -80,24 +89,25 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
 
             const desiredPage = desiredPageRef.current;
 
-            if (sharedPage.value === desiredPage) {
+            if (pageRef.current === desiredPage) {
                 // end of state machine. clear desired page.
                 desiredPageRef.current = NaN;
             } else {
-                sharedPage.value = desiredPage;
+                sharedPage.animatedValue.setValue(desiredPage);
             }
 
             onChange?.(desiredPage);
         } else {
             const trustfulNextPage = e.nativeEvent.position;
 
-            desiredPageRef.current = trustfulNextPage;
-
-            sharedPage.value = trustfulNextPage;
+            if (trustfulNextPage !== pageRef.current) {
+                desiredPageRef.current = trustfulNextPage;
+                sharedPage.animatedValue.setValue(trustfulNextPage);
 
-            onChange?.(trustfulNextPage);
+                onChange?.(trustfulNextPage);
+            }
         }
-    }, [onChange]);
+    }, [onChange, sharedPage]);
 
     useImperativeHandle(
         ref,
@@ -105,30 +115,34 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         [setPage],
     );
 
+    const pageStore = usePageStore(sharedPage);
+
     const PageComponent = pageComponent;
 
     return (
-        <RNViewPager
-            ref={pagerRef}
-            initialPage={sharedPage.value}
-            keyboardDismissMode={keyboardDismissMode}
-            onPageSelected={handlePageSelected}
-            pageMargin={8}
-            scrollEnabled={scrollEnabled}
-            style={style}
-        >
-            {Children.map(children, (child, index) => (
-                <PageComponent
-                    key={index}
-                    children={child}
-                    index={index}
-                    loading={loading}
-                    offscreenPageRerenderLimit={offscreenPageRerenderLimit}
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedPage}
-                />
-            ))}
-        </RNViewPager>
+        <InternalContext.Provider value={{ pageStore }}>
+            <RNViewPager
+                ref={pagerRef}
+                initialPage={sharedPage.initialValue}
+                keyboardDismissMode={keyboardDismissMode}
+                onPageSelected={handlePageSelected}
+                pageMargin={8}
+                scrollEnabled={scrollEnabled}
+                style={style}
+            >
+                {Children.map(children, (child, index) => (
+                    <PageComponent
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </RNViewPager>
+        </InternalContext.Provider>
     );
 });
 

package/src/ViewPager/ViewPagerProps.ts

@@ -1,29 +1,6 @@
-import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
-import type { ViewProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-import type { ComponentProps } from '@fountain-ui/core';
-
-export type KeyboardDismissMode = 'none' | 'on-drag';
-
-export type PageProps = PropsWithChildren<ViewProps> & {
-    index: number;
-    loading: ViewPagerProps['loading'];
-    offscreenPageRerenderLimit: number;
-    sharedIndex: SharedValue<number>;
-    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
-};
-
-export type PageComponent = ComponentType<PageProps>;
-
-export type Loading = 'lazy' | 'eager';
-
-export interface ViewPagerInstance {
-    /**
-     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
-     * @param index
-     */
-    setPage: (index: number) => void;
-}
+import type { ReactNode, Ref } from 'react';
+import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
+import type { KeyboardDismissMode, Loading, PageComponent, ViewPagerInstance } from './types';
 
 export default interface ViewPagerProps extends ComponentProps<{
     ref?: Ref<ViewPagerInstance>;
@@ -83,5 +60,5 @@ export default interface ViewPagerProps extends ComponentProps<{
     /**
      * Unstable API.
      */
-    UNSTABLE_sharedPage?: SharedValue<number>;
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {}

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,10 +1,11 @@
 import React, { Children, forwardRef, useCallback, useImperativeHandle } from 'react';
 import { View } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
-import { StyleSheet } from '@fountain-ui/core';
+import { StyleSheet, useSyncAnimatedValue } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import type { ViewPagerInstance } from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
 import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
+import usePageStore from './usePageStore';
+import InternalContext from './InternalContext';
 
 const styles = StyleSheet.create({
     root: {
@@ -25,12 +26,12 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         UNSTABLE_sharedPage,
     } = props;
 
-    const fallbackSharedPage = useSharedValue<number>(initialPage);
+    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });
 
     const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;
 
     const setPage = useCallback((newPage: number) => {
-        sharedPage.value = newPage;
+        sharedPage.animatedValue.setValue(newPage);
     }, [sharedPage]);
 
     useImperativeHandle(
@@ -39,22 +40,26 @@ const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPag
         [setPage],
     );
 
+    const pageStore = usePageStore(sharedPage);
+
     const PageComponent = pageComponent;
 
     return (
-        <View style={[styles.root, style]}>
-            {Children.map(children, (child, index) => (
-                <PageComponent
-                    key={index}
-                    children={child}
-                    index={index}
-                    loading={loading}
-                    offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
-                    rerenderKey={pageForceRerenderKey}
-                    sharedIndex={sharedPage}
-                />
-            ))}
-        </View>
+        <InternalContext.Provider value={{ pageStore }}>
+            <View style={[styles.root, style]}>
+                {Children.map(children, (child, index) => (
+                    <PageComponent
+                        key={index}
+                        children={child}
+                        index={index}
+                        initialPage={sharedPage.initialValue}
+                        loading={loading}
+                        offscreenPageRerenderLimit={0} // All offscreen pages will not be re-rendered
+                        rerenderKey={pageForceRerenderKey}
+                    />
+                ))}
+            </View>
+        </InternalContext.Provider>
     );
 });
 

package/src/ViewPager/index.ts

@@ -1,3 +1,4 @@
 export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';
+export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
 export { useViewPagerPageState } from './PageStateContext';

package/src/ViewPager/types.ts

@@ -0,0 +1,24 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+
+export type KeyboardDismissMode = 'none' | 'on-drag';
+
+export type PageComponent = ComponentType<PageProps>;
+
+export type Loading = 'lazy' | 'eager';
+
+export interface ViewPagerInstance {
+    /**
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}

package/src/ViewPager/usePageStore.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
+import { SimpleStore } from '@fountain-ui/core';
+
+export default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {
+    const {
+        animatedValue,
+        initialValue,
+    } = value;
+
+    const store = useRef(new SimpleStore(initialValue)).current;
+
+    useEffect(() => {
+        const id = animatedValue.addListener((newPage) => {
+            store.dispatch(newPage.value);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [animatedValue]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
+    return store;
+};

package/src/ViewPager/utils.tsx

@@ -1,5 +1,5 @@
-import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
+import type { Loading, PageComponent } from './types';
 
 export const defaultInitialPage: number = 0;
 

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/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -222,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    }, []);
+    }, [appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

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":"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"}

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,
-    ]);
-};