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

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useRef","Animated","directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimator","config","createScrollAnimation","indexController","initialIndex","loop","numberOfData","getCurrentIndex","lastIndex","notifyScrollStateHasChanged","initialOffsetX","accumulativeOffsetX","Value","current","animationOffsetX","gestureTranslationX","globalInterpolation","add","toValueRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","state","finalizeAnimation","startPagingAnimation","type","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","lastGestureTranslationX","Number","isFinite","animation","start","finished"],"sources":["usePagingAnimator.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type {\n    CreateScrollAnimation,\n    DirectionalPagingAnimationConfig,\n    IndexController,\n    IndexPagingAnimationConfig,\n    PagingAnimationConfig,\n    PagingAnimationType,\n    PagingDirection,\n    StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimatorConfig {\n    createScrollAnimation: CreateScrollAnimation;\n    itemWidth: number;\n    indexController: IndexController;\n    initialIndex: number;\n    loop: boolean;\n    numberOfData: number;\n}\n\nexport interface PagingAnimator {\n    gestureTranslationX: Animated.Value;\n    globalInterpolation: Animated.AnimatedInterpolation;\n    interruptAnimation: () => void;\n    startPagingAnimation: StartPagingAnimation;\n}\n\nfunction directionToValue(itemWidth: number) {\n    return function (direction: PagingDirection): number {\n        switch (direction) {\n            case 'next':\n                return -itemWidth;\n            case 'prev':\n                return itemWidth;\n            case 'stay':\n                return 0;\n        }\n    };\n}\n\nfunction toValueCompensator(itemWidth: number) {\n    return function (toValue: number, currentOffset: number): number {\n        const remainder = Math.abs(currentOffset % itemWidth);\n\n        const halfOfItemWidth = Math.abs(itemWidth / 2);\n        const compensateVector = remainder > halfOfItemWidth\n            ? remainder - itemWidth\n            : remainder;\n\n        const direction = currentOffset > 0 ? -1 : 1;\n\n        return toValue + (direction * compensateVector);\n    };\n}\n\nexport default function usePagingAnimator(config: PagingAnimatorConfig): PagingAnimator {\n    const {\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData,\n    } = config;\n\n    const {\n        getCurrentIndex,\n        lastIndex,\n        notifyScrollStateHasChanged,\n    } = indexController;\n\n    const initialOffsetX = itemWidth * initialIndex;\n    const accumulativeOffsetX = useRef(new Animated.Value(initialOffsetX)).current;\n    const animationOffsetX = useRef(new Animated.Value(0)).current;\n    const gestureTranslationX = useRef(new Animated.Value(0)).current;\n\n    const globalInterpolation = useMemo(() => {\n        return Animated.add(\n            Animated.add(accumulativeOffsetX, animationOffsetX),\n            gestureTranslationX,\n        );\n    }, []);\n\n    const toValueRef = useRef<number>(0);\n    const currentOffsetRef = useRef<number>(0);\n\n    const isAnimatingRef = useRef<boolean>(false);\n\n    const maxWidth = Math.abs(numberOfData * itemWidth);\n\n    const ensureOffsetBoundary: (offset: number) => number = useCallback((offset: number) => {\n        if (loop) {\n            const isCloseToEnd = Math.abs(offset) >= (maxWidth - itemWidth);\n            if (isCloseToEnd) {\n                const signOfOffset = offset > 0 ? 1 : -1;\n                return offset + (-signOfOffset * maxWidth);\n            }\n        }\n\n        return offset % maxWidth;\n    }, [itemWidth, loop, maxWidth]);\n\n    const requireNewOffset = useCallback((newOffset: number) => {\n        const nextOffset = ensureOffsetBoundary(newOffset);\n\n        currentOffsetRef.current = nextOffset;\n        accumulativeOffsetX.setValue(nextOffset);\n\n        toValueRef.current = 0;\n        animationOffsetX.setValue(0);\n    }, [\n        ensureOffsetBoundary,\n    ]);\n\n    const interruptAnimation = useCallback(() => {\n        if (!isAnimatingRef.current) {\n            return;\n        }\n\n        animationOffsetX.stopAnimation(lastValue => {\n            isAnimatingRef.current = false;\n\n            const prevOffset = currentOffsetRef.current;\n            const totalOffset = prevOffset + lastValue;\n\n            requireNewOffset(totalOffset);\n\n            notifyScrollStateHasChanged({ offset: totalOffset, state: 'interrupted' });\n        });\n    }, [\n        notifyScrollStateHasChanged,\n        requireNewOffset,\n    ]);\n\n    const finalizeAnimation = useCallback(() => {\n        isAnimatingRef.current = false;\n\n        const prevOffset = currentOffsetRef.current;\n        const toValue = toValueRef.current;\n        const totalOffset = prevOffset + toValue;\n\n        requireNewOffset(totalOffset);\n\n        notifyScrollStateHasChanged({ offset: totalOffset, state: 'idle' });\n    }, [\n        notifyScrollStateHasChanged,\n        requireNewOffset,\n    ]);\n\n    const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n        if (isAnimatingRef.current) {\n            return;\n        }\n\n        const configWithDefaults: PagingAnimationConfig = {\n            animated: true,\n            ...config,\n        };\n\n        const currentIndex = getCurrentIndex();\n\n        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);\n        const compensateToValue = toValueCompensator(itemWidth);\n\n        const getValueByDirectionalPagingOnLoopDisabled = (_config: DirectionalPagingAnimationConfig): number => {\n            const { direction, isOriginatedFromGesture } = _config;\n\n            if (currentIndex === 0 && direction === 'prev') {\n                return isOriginatedFromGesture\n                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n                    : -lastIndex * itemWidth; // last position\n            } else if (currentIndex === lastIndex && direction === 'next') {\n                return isOriginatedFromGesture\n                    ? getValueByDirectionOnAllAdjacentItemsVisible('stay')\n                    : lastIndex * itemWidth; // first position\n            }\n            return getValueByDirectionOnAllAdjacentItemsVisible(direction);\n        };\n\n        const getValueByDirectionalPaging = (_config: DirectionalPagingAnimationConfig): number => {\n            const _configWithDefaults: DirectionalPagingAnimationConfig = {\n                isOriginatedFromGesture: false,\n                ..._config,\n            };\n\n            return loop\n                ? getValueByDirectionOnAllAdjacentItemsVisible(_configWithDefaults.direction)\n                : getValueByDirectionalPagingOnLoopDisabled(_configWithDefaults);\n        };\n\n        const getValueByIndexPaging = ({ index }: IndexPagingAnimationConfig): number => {\n            if (index < 0 || index > lastIndex || index === currentIndex) {\n                // no animation if index is invalid or equals to current index\n                return 0;\n            }\n\n            const distance = Math.abs(currentIndex - index) * itemWidth;\n            const direction = index > currentIndex ? -1 : 1;\n\n            return distance * direction;\n        };\n\n        const wantedToValue = type === 'directional'\n            // @ts-ignore\n            ? getValueByDirectionalPaging(configWithDefaults)\n            // @ts-ignore\n            : getValueByIndexPaging(configWithDefaults);\n\n        const toValue = compensateToValue(wantedToValue, currentOffsetRef.current);\n\n        toValueRef.current = toValue;\n        isAnimatingRef.current = true;\n\n        notifyScrollStateHasChanged({\n            offset: currentOffsetRef.current + toValue,\n            state: 'dragging',\n        });\n\n        const lastGestureTranslationX: number = configWithDefaults.lastGestureTranslationX ?? 0;\n        if (Number.isFinite(lastGestureTranslationX)) {\n            animationOffsetX.setValue(lastGestureTranslationX);\n            gestureTranslationX.setValue(0);\n        }\n\n        if (configWithDefaults.animated) {\n            const animation = createScrollAnimation(animationOffsetX, toValue);\n\n            animation.start(({ finished }) => {\n                if (finished) {\n                    finalizeAnimation();\n                }\n            });\n        } else {\n            finalizeAnimation();\n        }\n    }, [\n        createScrollAnimation,\n        getCurrentIndex,\n        finalizeAnimation,\n        itemWidth,\n        lastIndex,\n        loop,\n        notifyScrollStateHasChanged,\n    ]);\n\n    return {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    };\n};\n"],"mappings":"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"}

package/build/module/Carousel/types.js

@@ -1,4 +1,4 @@
 const directions = ['next', 'prev', 'stay'];
-const animationStates = ['started', 'finished', 'interrupted'];
+const scrollStates = ['idle', 'dragging', 'interrupted'];
 export {};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["directions","animationStates"],"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 animationStates = ['started', 'finished', 'interrupted'] as const;\n\nexport type AnimationState = (typeof animationStates)[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    notifyAnimationState: (state: AnimationState) => void;\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;AAIA,MAAMC,eAAe,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,aAAxB,CAAxB"}
+{"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/module/ViewPager/ChildrenMemoizedPage.js

@@ -95,6 +95,6 @@ export default /*#__PURE__*/memo(Page, (prevProps, nextProps) => {
     return false;
   }
 
-  return prevProps.index !== nextProps.index;
+  return prevProps.index === nextProps.index;
 });
 //# sourceMappingURL=ChildrenMemoizedPage.js.map

package/build/module/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useContext","useEffect","useMemo","useReducer","useRef","useState","Platform","View","StyleSheet","PageStateContext","InternalContext","styles","create","fill","width","height","none","display","Page","props","index","initialPage","children","loading","offscreenPageRerenderLimit","pageStore","computePageDescription","page","activeIndex","isActive","shouldRerender","becomeNeighbor","initialState","active","loaded","pageStateRef","forceRender","s","current","content","subscribe","newPage","currentState","newState","contextValue","style","OS","absoluteFill","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './types';\nimport PageStateContext from './PageStateContext';\nimport InternalContext from './InternalContext';\n\nconst styles = StyleSheet.create({\n    fill: { width: '100%', height: '100%' },\n    none: { display: 'none' },\n});\n\ninterface InternalPageDescription {\n    isActive: boolean;\n    becomeNeighbor: boolean;\n}\n\ninterface InternalPageState {\n    active: boolean;\n    loaded: boolean;\n}\n\nfunction Page(props: PageProps) {\n    const {\n        index,\n        initialPage,\n        children,\n        loading,\n        offscreenPageRerenderLimit,\n    } = props;\n\n    const { pageStore } = useContext(InternalContext);\n\n    const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {\n        const activeIndex = page;\n\n        const isActive = index === activeIndex;\n\n        const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit\n            && index <= activeIndex + offscreenPageRerenderLimit;\n\n        const becomeNeighbor = shouldRerender && !isActive;\n\n        return { isActive, becomeNeighbor };\n    }, [index]);\n\n    const [initialState] = useState<InternalPageState>(() => {\n        const { isActive, becomeNeighbor } = computePageDescription(initialPage);\n\n        if (loading === 'eager') {\n            return { active: isActive, loaded: true };\n        }\n\n        return { active: isActive, loaded: isActive || becomeNeighbor };\n    });\n\n    // `Bailing out of a state update` is not working as expected.\n    const pageStateRef = useRef<InternalPageState>(initialState);\n    const [, forceRender] = useReducer((s) => s + 1, 0);\n\n    const { active, loaded } = pageStateRef.current;\n\n    const content = loaded ? children : null;\n\n    useEffect(() => {\n        return pageStore.subscribe(newPage => {\n            const { isActive, becomeNeighbor } = computePageDescription(newPage);\n\n            const currentState = pageStateRef.current;\n\n            const newState: InternalPageState = {\n                active: isActive,\n                loaded: isActive || becomeNeighbor ? true : currentState.loaded,\n            };\n\n            if (\n                currentState.active !== newState.active\n                || currentState.loaded !== newState.loaded\n            ) {\n                pageStateRef.current = newState;\n\n                forceRender();\n            }\n        });\n    }, [pageStore, computePageDescription]);\n\n    const contextValue = useMemo(() => ({\n        isActive: active,\n    }), [active]);\n\n    const style = Platform.OS === 'web'\n        ? (active ? StyleSheet.absoluteFill : styles.none)\n        : styles.fill;\n\n    return (\n        <View\n            collapsable={false}\n            style={style}\n        >\n            <PageStateContext.Provider value={contextValue}>\n                {content}\n            </PageStateContext.Provider>\n        </View>\n    );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.index !== nextProps.index;\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","memo","useCallback","useContext","useEffect","useMemo","useReducer","useRef","useState","Platform","View","StyleSheet","PageStateContext","InternalContext","styles","create","fill","width","height","none","display","Page","props","index","initialPage","children","loading","offscreenPageRerenderLimit","pageStore","computePageDescription","page","activeIndex","isActive","shouldRerender","becomeNeighbor","initialState","active","loaded","pageStateRef","forceRender","s","current","content","subscribe","newPage","currentState","newState","contextValue","style","OS","absoluteFill","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './types';\nimport PageStateContext from './PageStateContext';\nimport InternalContext from './InternalContext';\n\nconst styles = StyleSheet.create({\n    fill: { width: '100%', height: '100%' },\n    none: { display: 'none' },\n});\n\ninterface InternalPageDescription {\n    isActive: boolean;\n    becomeNeighbor: boolean;\n}\n\ninterface InternalPageState {\n    active: boolean;\n    loaded: boolean;\n}\n\nfunction Page(props: PageProps) {\n    const {\n        index,\n        initialPage,\n        children,\n        loading,\n        offscreenPageRerenderLimit,\n    } = props;\n\n    const { pageStore } = useContext(InternalContext);\n\n    const computePageDescription: (page: number) => InternalPageDescription = useCallback((page: number) => {\n        const activeIndex = page;\n\n        const isActive = index === activeIndex;\n\n        const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit\n            && index <= activeIndex + offscreenPageRerenderLimit;\n\n        const becomeNeighbor = shouldRerender && !isActive;\n\n        return { isActive, becomeNeighbor };\n    }, [index]);\n\n    const [initialState] = useState<InternalPageState>(() => {\n        const { isActive, becomeNeighbor } = computePageDescription(initialPage);\n\n        if (loading === 'eager') {\n            return { active: isActive, loaded: true };\n        }\n\n        return { active: isActive, loaded: isActive || becomeNeighbor };\n    });\n\n    // `Bailing out of a state update` is not working as expected.\n    const pageStateRef = useRef<InternalPageState>(initialState);\n    const [, forceRender] = useReducer((s) => s + 1, 0);\n\n    const { active, loaded } = pageStateRef.current;\n\n    const content = loaded ? children : null;\n\n    useEffect(() => {\n        return pageStore.subscribe(newPage => {\n            const { isActive, becomeNeighbor } = computePageDescription(newPage);\n\n            const currentState = pageStateRef.current;\n\n            const newState: InternalPageState = {\n                active: isActive,\n                loaded: isActive || becomeNeighbor ? true : currentState.loaded,\n            };\n\n            if (\n                currentState.active !== newState.active\n                || currentState.loaded !== newState.loaded\n            ) {\n                pageStateRef.current = newState;\n\n                forceRender();\n            }\n        });\n    }, [pageStore, computePageDescription]);\n\n    const contextValue = useMemo(() => ({\n        isActive: active,\n    }), [active]);\n\n    const style = Platform.OS === 'web'\n        ? (active ? StyleSheet.absoluteFill : styles.none)\n        : styles.fill;\n\n    return (\n        <View\n            collapsable={false}\n            style={style}\n        >\n            <PageStateContext.Provider value={contextValue}>\n                {content}\n            </PageStateContext.Provider>\n        </View>\n    );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.index === nextProps.index;\n});\n"],"mappings":"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"}

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,8 +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];
+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: {
@@ -21,15 +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;
-    notifyAnimationState: (state: AnimationState) => void;
-    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.16",
+  "version": "2.0.0-beta.19",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44c50a4474a3bca589e8cedd3ff476927e12061c"
+  "gitHead": "d18fb7ba86bc8aa042122e5321b9c26381bd5d5f"
 }

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/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,54 +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 { AnimationState, 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 indexChangedRef = useRef<boolean>(false);
+    const currentIndex = useImperativeState(initialIndex);
+    const currentPosition = useImperativeState(initialIndex);
 
-    const getCurrentIndex = useCallback(() => currentIndexRef.current, []);
+    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));
 
-    const notifyAnimationState = useCallback((state: AnimationState) => {
-        if (state === 'finished' || state === 'interrupted') {
-            if (indexChangedRef.current) {
-                onIndexChange?.(getCurrentIndex());
+        if (state === 'idle' || state === 'interrupted') {
+            if (currentIndex.hasChanged()) {
+                onIndexChange?.(currentIndex.get());
+            }
+            if (currentPosition.hasChanged()) {
+                onPositionChange?.(currentPosition.get());
             }
         }
+
+        currentIndex.set(index);
+        currentPosition.set(position);
     }, [
-        getCurrentIndex,
+        itemWidth,
+        numberOfData,
+        numberOfOriginalData,
         onIndexChange,
+        onPositionChange,
     ]);
 
-    const notifyOffsetHasChanged = useCallback((offset: number) => {
-        const roundedOffset = Math.round(offset / itemWidth) * itemWidth;
-
-        // To prevent floating point problem, make sure index is integer type.
-        const nextIndex = Math.floor(mod((-roundedOffset / itemWidth), numberOfOriginalData));
-
-        if (nextIndex !== currentIndexRef.current) {
-            currentIndexRef.current = nextIndex;
-            indexChangedRef.current = true;
-        }
-    }, [itemWidth, numberOfOriginalData]);
-
     return {
-        getCurrentIndex,
+        getCurrentIndex: currentIndex.get,
         lastIndex: numberOfOriginalData - 1,
-        notifyAnimationState,
-        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];
 };