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

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

@@ -1 +1 @@
-{"version":3,"names":["SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","mod","value","modulo","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","rightRanges","useItemVisibilityStore","params","currentIndex","initialRange","useState","useRef","current","useEffect","newRanges"],"sources":["useItemVisibilityStore.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ItemVisibilityStore, VisibleIndexRanges } from '../types';\n\nexport interface Parameters {\n    currentIndex: number;\n    numberOfData: number;\n    windowSize: number;\n}\n\nclass SimpleItemVisibilityStore implements ItemVisibilityStore {\n\n    private store: VisibleIndexRanges;\n\n    constructor(initialValue: VisibleIndexRanges) {\n        this.store = initialValue;\n    }\n\n    private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];\n\n    subscribe(listener: (ranges: VisibleIndexRanges) => void) {\n        this.listeners.push(listener);\n\n        listener(this.store);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(ranges: VisibleIndexRanges): void {\n        this.store = ranges;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(ranges);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n}\n\nfunction normalize(windowSize: number, numberOfData: number): number {\n    if (windowSize <= 0) {\n        return numberOfData;\n    }\n    if (windowSize > 0 && windowSize % 2 === 0) {\n        return windowSize + 1;\n    }\n    return windowSize;\n}\n\nfunction mod(value: number, modulo: number): number {\n    return ((value % modulo) + modulo) % modulo;\n}\n\nfunction makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {\n    const ws = normalize(windowSize, numberOfData);\n\n    const firstIndex = 0;\n    const lastIndex = numberOfData - 1;\n    const halfNumberOfAdjacent = Math.floor(ws / 2);\n\n    const leftSide = index - halfNumberOfAdjacent;\n    const rightSide = index + halfNumberOfAdjacent;\n\n    const leftRanges = leftSide >= 0\n        ? [[leftSide, index]]\n        : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];\n\n    const rightRanges = rightSide < numberOfData\n        ? [[index, rightSide]]\n        : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];\n\n    // @ts-ignore\n    return [\n        ...leftRanges,\n        ...rightRanges,\n    ];\n}\n\nexport default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore {\n    const {\n        currentIndex,\n        numberOfData,\n        windowSize,\n    } = params;\n\n    const [initialRange] = useState(() => makeVisibleIndexRanges(numberOfData, windowSize, currentIndex));\n    const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;\n\n    useEffect(() => {\n        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, currentIndex);\n\n        store.dispatch(newRanges);\n    }, [currentIndex, numberOfData, windowSize]);\n\n    useEffect(() => {\n        return () => {\n            store.removeAllListeners();\n        };\n    }, []);\n\n    return store;\n};\n"],"mappings":"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"}
+{"version":3,"names":["SimpleItemVisibilityStore","constructor","initialValue","store","subscribe","listener","listeners","push","index","indexOf","splice","dispatch","ranges","id","removeAllListeners","length","normalize","windowSize","numberOfData","makeVisibleIndexRanges","ws","firstIndex","lastIndex","halfNumberOfAdjacent","Math","floor","leftSide","rightSide","leftRanges","mod","rightRanges","useItemVisibilityStore","params","initialIndex","initialRange","useState","useRef","current","onPositionChange","useCallback","position","newRanges","useEffect"],"sources":["useItemVisibilityStore.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { mod } from '@fountain-ui/utils';\nimport type { ItemVisibilityStore, OnPositionChange, VisibleIndexRanges } from '../types';\n\nexport interface Parameters {\n    initialIndex: number;\n    numberOfData: number;\n    windowSize: number;\n}\n\nclass SimpleItemVisibilityStore implements ItemVisibilityStore {\n\n    private store: VisibleIndexRanges;\n\n    constructor(initialValue: VisibleIndexRanges) {\n        this.store = initialValue;\n    }\n\n    private listeners: Array<(ranges: VisibleIndexRanges) => void> = [];\n\n    subscribe(listener: (ranges: VisibleIndexRanges) => void) {\n        this.listeners.push(listener);\n\n        listener(this.store);\n\n        return () => {\n            const index = this.listeners.indexOf(listener);\n            this.listeners.splice(index, 1);\n        };\n    }\n\n    dispatch(ranges: VisibleIndexRanges): void {\n        this.store = ranges;\n        for (const id in this.listeners) {\n            const listener = this.listeners[id];\n            listener?.(ranges);\n        }\n    }\n\n    removeAllListeners(): void {\n        this.listeners.splice(0, this.listeners.length);\n    }\n\n}\n\nfunction normalize(windowSize: number, numberOfData: number): number {\n    if (windowSize <= 0) {\n        return numberOfData;\n    }\n    if (windowSize > 0 && windowSize % 2 === 0) {\n        return windowSize + 1;\n    }\n    return windowSize;\n}\n\nfunction makeVisibleIndexRanges(numberOfData: number, windowSize: number, index: number): VisibleIndexRanges {\n    const ws = normalize(windowSize, numberOfData);\n\n    const firstIndex = 0;\n    const lastIndex = numberOfData - 1;\n    const halfNumberOfAdjacent = Math.floor(ws / 2);\n\n    const leftSide = index - halfNumberOfAdjacent;\n    const rightSide = index + halfNumberOfAdjacent;\n\n    const leftRanges = leftSide >= 0\n        ? [[leftSide, index]]\n        : [[firstIndex, index], [mod(leftSide, numberOfData), lastIndex]];\n\n    const rightRanges = rightSide < numberOfData\n        ? [[index, rightSide]]\n        : [[index, lastIndex], [firstIndex, mod(rightSide, numberOfData)]];\n\n    // @ts-ignore\n    return [\n        ...leftRanges,\n        ...rightRanges,\n    ];\n}\n\nexport default function useItemVisibilityStore(params: Parameters): [ItemVisibilityStore, OnPositionChange] {\n    const {\n        initialIndex,\n        numberOfData,\n        windowSize,\n    } = params;\n\n    const [initialRange] = useState(() => {\n        return makeVisibleIndexRanges(numberOfData, windowSize, initialIndex);\n    });\n\n    const store = useRef(new SimpleItemVisibilityStore(initialRange)).current;\n\n    const onPositionChange: OnPositionChange = useCallback((position) => {\n        const newRanges = makeVisibleIndexRanges(numberOfData, windowSize, position);\n\n        store.dispatch(newRanges);\n    }, [numberOfData, windowSize]);\n\n    useEffect(() => {\n        return () => {\n            store.removeAllListeners();\n        };\n    }, []);\n\n    return [store, onPositionChange];\n};\n"],"mappings":"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"}

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

@@ -7,8 +7,6 @@ exports.default = usePagingAnimation;
 
 var _react = require("react");
 
-var _reactNative = require("react-native");
-
 function directionToValue(itemWidth) {
   return function (direction) {
     switch (direction) {
@@ -24,73 +22,89 @@ function directionToValue(itemWidth) {
   };
 }
 
+function toValueCompensator(itemWidth) {
+  return function (toValue, currentOffset) {
+    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;
+  };
+}
+
 function usePagingAnimation(params) {
   const {
-    controlledTx,
     createScrollAnimation,
-    getCurrentIndex,
     itemWidth,
-    lastIndex,
+    indexController,
     loop,
     numberOfData,
-    offsetTx
+    offsetX,
+    translateX
   } = params;
-  const animationRef = (0, _react.useRef)(null);
+  const {
+    getCurrentIndex,
+    lastIndex,
+    notifyAnimationState,
+    notifyOffsetHasChanged
+  } = indexController;
   const toValueRef = (0, _react.useRef)(0);
-  const globalInterpolation = (0, _react.useMemo)(() => _reactNative.Animated.add(controlledTx, offsetTx), [controlledTx, offsetTx]);
-  (0, _react.useEffect)(() => {
-    const subscriptionId = controlledTx.addListener(value => {
-      const currentTx = value.value; // Prevent infinite loop
+  const currentOffsetRef = (0, _react.useRef)(0);
+  const isAnimatingRef = (0, _react.useRef)(false);
+  const maxWidth = Math.abs(numberOfData * itemWidth);
+  const ensureOffsetBoundary = (0, _react.useCallback)(offset => {
+    if (loop) {
+      const isCloseToEnd = Math.abs(offset) >= maxWidth - itemWidth;
+
+      if (isCloseToEnd) {
+        const signOfOffset = offset > 0 ? 1 : -1;
+        return offset + -signOfOffset * maxWidth;
+      }
+    }
 
-      if (currentTx !== 0) {
-        const maxWidth = numberOfData * itemWidth;
+    return offset % maxWidth;
+  }, [itemWidth, loop, maxWidth]);
+  const requireNewOffset = (0, _react.useCallback)(newOffset => {
+    const nextOffset = ensureOffsetBoundary(newOffset);
+    currentOffsetRef.current = nextOffset;
+    offsetX.setValue(nextOffset);
+    toValueRef.current = 0;
+    translateX.setValue(0);
+  }, [ensureOffsetBoundary, offsetX, translateX]);
+  const interruptAnimation = (0, _react.useCallback)(() => {
+    if (!isAnimatingRef.current) {
+      return;
+    }
 
-        if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {
-          // reset position
-          controlledTx.setValue(0);
-        }
-      }
+    translateX.stopAnimation(lastValue => {
+      isAnimatingRef.current = false;
+      const prevOffset = currentOffsetRef.current;
+      const totalOffset = prevOffset + lastValue;
+      notifyOffsetHasChanged(totalOffset);
+      notifyAnimationState('interrupted');
+      requireNewOffset(totalOffset);
     });
-    return () => {
-      controlledTx.removeListener(subscriptionId);
-    };
-  }, [numberOfData, itemWidth]);
+  }, [requireNewOffset, translateX]);
   const finalizeAnimation = (0, _react.useCallback)(() => {
-    const stopUnfinishedSnapAnimation = () => {
-      if (animationRef.current) {
-        var _animationRef$current;
-
-        (_animationRef$current = animationRef.current) === null || _animationRef$current === void 0 ? void 0 : _animationRef$current.stop();
-        animationRef.current = null;
-      }
-    };
-
-    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 (_reactNative.Platform.OS === 'web') {
-        // @ts-ignore
-        controlledTx.setValue(controlledTx._value);
-      }
-
-      offsetTx.setValue(0);
-      toValueRef.current = 0;
-    };
-
-    stopUnfinishedSnapAnimation();
-    resetBoundary();
-  }, [controlledTx]);
+    notifyAnimationState('finished');
+    isAnimatingRef.current = false;
+    const prevOffset = currentOffsetRef.current;
+    const toValue = toValueRef.current;
+    const totalOffset = prevOffset + toValue;
+    requireNewOffset(totalOffset);
+  }, [notifyAnimationState, requireNewOffset]);
   const startPagingAnimation = (0, _react.useCallback)((type, config) => {
+    if (isAnimatingRef.current) {
+      return;
+    }
+
     const configWithDefaults = {
       animated: true,
       ...config
     };
     const currentIndex = getCurrentIndex();
     const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(itemWidth);
+    const compensateToValue = toValueCompensator(itemWidth);
 
     const getValueByDirectionalPagingOnLoopDisabled = _config => {
       const {
@@ -130,14 +144,16 @@ function usePagingAnimation(params) {
       return distance * direction;
     };
 
-    const toValue = type === 'directional' // @ts-ignore
+    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(_ref2 => {
         let {
           finished
@@ -147,13 +163,13 @@ function usePagingAnimation(params) {
           finalizeAnimation();
         }
       });
+      notifyAnimationState('started');
     } else {
       finalizeAnimation();
     }
-  }, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop]);
+  }, [createScrollAnimation, getCurrentIndex, finalizeAnimation, itemWidth, lastIndex, loop, notifyAnimationState, notifyOffsetHasChanged]);
   return {
-    globalInterpolation,
-    finalizeAnimation,
+    interruptAnimation,
     startPagingAnimation
   };
 }

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

@@ -1 +1 @@
-{"version":3,"names":["directionToValue","itemWidth","direction","usePagingAnimation","params","controlledTx","createScrollAnimation","getCurrentIndex","lastIndex","loop","numberOfData","offsetTx","animationRef","useRef","toValueRef","globalInterpolation","useMemo","Animated","add","useEffect","subscriptionId","addListener","value","currentTx","maxWidth","Math","abs","round","setValue","removeListener","finalizeAnimation","useCallback","stopUnfinishedSnapAnimation","current","stop","resetBoundary","setOffset","flattenOffset","Platform","OS","_value","startPagingAnimation","type","config","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","toValue","animation","start","finished"],"sources":["usePagingAnimation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport type {\n    CreateScrollAnimation,\n    DirectionalPagingAnimationConfig,\n    GetCurrentIndex,\n    IndexPagingAnimationConfig,\n    PagingAnimationConfig,\n    PagingAnimationType,\n    PagingDirection,\n    StartPagingAnimation,\n} from '../types';\n\nexport interface PagingAnimationParameters {\n    controlledTx: Animated.Value;\n    createScrollAnimation: CreateScrollAnimation;\n    getCurrentIndex: GetCurrentIndex;\n    itemWidth: number;\n    lastIndex: number;\n    loop: boolean;\n    numberOfData: number;\n    offsetTx: Animated.Value;\n}\n\nexport interface UsePagingAnimation {\n    finalizeAnimation: () => void;\n    globalInterpolation: Animated.AnimatedInterpolation;\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\nexport default function usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {\n    const {\n        controlledTx,\n        createScrollAnimation,\n        getCurrentIndex,\n        itemWidth,\n        lastIndex,\n        loop,\n        numberOfData,\n        offsetTx,\n    } = params;\n\n    const animationRef = useRef<Animated.CompositeAnimation | null>(null);\n    const toValueRef = useRef<number>(0);\n\n    const globalInterpolation = useMemo(\n        () => Animated.add(controlledTx, offsetTx),\n        [controlledTx, offsetTx],\n    );\n\n    useEffect(() => {\n        const subscriptionId = controlledTx.addListener((value) => {\n            const currentTx = value.value;\n\n            // Prevent infinite loop\n            if (currentTx !== 0) {\n                const maxWidth = numberOfData * itemWidth;\n\n                if (Math.abs(Math.round(currentTx)) === Math.round(maxWidth)) {\n                    // reset position\n                    controlledTx.setValue(0);\n                }\n            }\n        });\n\n        return () => {\n            controlledTx.removeListener(subscriptionId);\n        };\n    }, [numberOfData, itemWidth]);\n\n    const finalizeAnimation = useCallback(() => {\n        const stopUnfinishedSnapAnimation = () => {\n            if (animationRef.current) {\n                animationRef.current?.stop();\n                animationRef.current = null;\n            }\n        };\n\n        const resetBoundary = () => {\n            controlledTx.setOffset(toValueRef.current);\n            controlledTx.flattenOffset();\n\n            // FIXME: react-native-web bug maybe?\n            //  `AnimatedValue.flattenOffset()` does not trigger any event listener.\n            //  Accessing value directly via `_value` is dangerous but working on web (`useNativeDriver` always false).\n            //  So setting same value with `value.setValue(value._value)` will trigger event listener.\n            if (Platform.OS === 'web') {\n                // @ts-ignore\n                controlledTx.setValue(controlledTx._value);\n            }\n\n            offsetTx.setValue(0);\n            toValueRef.current = 0;\n        };\n\n        stopUnfinishedSnapAnimation();\n\n        resetBoundary();\n    }, [controlledTx]);\n\n    const startPagingAnimation = useCallback((type: PagingAnimationType, config: PagingAnimationConfig) => {\n        const configWithDefaults: PagingAnimationConfig = {\n            animated: true,\n            ...config,\n        };\n\n        const currentIndex = getCurrentIndex();\n\n        const getValueByDirectionOnAllAdjacentItemsVisible = directionToValue(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 toValue = type === 'directional'\n            // @ts-ignore\n            ? getValueByDirectionalPaging(configWithDefaults)\n            // @ts-ignore\n            : getValueByIndexPaging(configWithDefaults);\n\n        toValueRef.current = toValue;\n\n        if (configWithDefaults.animated) {\n            const animation = createScrollAnimation(offsetTx, toValue);\n            animationRef.current = animation;\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    ]);\n\n    return {\n        globalInterpolation,\n        finalizeAnimation,\n        startPagingAnimation,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["directionToValue","itemWidth","direction","toValueCompensator","toValue","currentOffset","remainder","Math","abs","halfOfItemWidth","compensateVector","usePagingAnimation","params","createScrollAnimation","indexController","loop","numberOfData","offsetX","translateX","getCurrentIndex","lastIndex","notifyAnimationState","notifyOffsetHasChanged","toValueRef","useRef","currentOffsetRef","isAnimatingRef","maxWidth","ensureOffsetBoundary","useCallback","offset","isCloseToEnd","signOfOffset","requireNewOffset","newOffset","nextOffset","current","setValue","interruptAnimation","stopAnimation","lastValue","prevOffset","totalOffset","finalizeAnimation","startPagingAnimation","type","config","configWithDefaults","animated","currentIndex","getValueByDirectionOnAllAdjacentItemsVisible","compensateToValue","getValueByDirectionalPagingOnLoopDisabled","_config","isOriginatedFromGesture","getValueByDirectionalPaging","_configWithDefaults","getValueByIndexPaging","index","distance","wantedToValue","animation","start","finished"],"sources":["usePagingAnimation.ts"],"sourcesContent":["import { useCallback, 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 PagingAnimationParameters {\n    createScrollAnimation: CreateScrollAnimation;\n    itemWidth: number;\n    indexController: IndexController;\n    loop: boolean;\n    numberOfData: number;\n    offsetX: Animated.Value;\n    translateX: Animated.Value;\n}\n\nexport interface UsePagingAnimation {\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 usePagingAnimation(params: PagingAnimationParameters): UsePagingAnimation {\n    const {\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        loop,\n        numberOfData,\n        offsetX,\n        translateX,\n    } = params;\n\n    const {\n        getCurrentIndex,\n        lastIndex,\n        notifyAnimationState,\n        notifyOffsetHasChanged,\n    } = indexController;\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        offsetX.setValue(nextOffset);\n\n        toValueRef.current = 0;\n        translateX.setValue(0);\n    }, [\n        ensureOffsetBoundary,\n        offsetX,\n        translateX,\n    ]);\n\n    const interruptAnimation = useCallback(() => {\n        if (!isAnimatingRef.current) {\n            return;\n        }\n\n        translateX.stopAnimation(lastValue => {\n            isAnimatingRef.current = false;\n\n            const prevOffset = currentOffsetRef.current;\n            const totalOffset = prevOffset + lastValue;\n\n            notifyOffsetHasChanged(totalOffset);\n            notifyAnimationState('interrupted');\n\n            requireNewOffset(totalOffset);\n        });\n    }, [requireNewOffset, translateX]);\n\n    const finalizeAnimation = useCallback(() => {\n        notifyAnimationState('finished');\n\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        notifyAnimationState,\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        notifyOffsetHasChanged(currentOffsetRef.current + toValue);\n\n        if (configWithDefaults.animated) {\n            const animation = createScrollAnimation(translateX, toValue);\n\n            animation.start(({ finished }) => {\n                if (finished) {\n                    finalizeAnimation();\n                }\n            });\n\n            notifyAnimationState('started');\n        } else {\n            finalizeAnimation();\n        }\n    }, [\n        createScrollAnimation,\n        getCurrentIndex,\n        finalizeAnimation,\n        itemWidth,\n        lastIndex,\n        loop,\n        notifyAnimationState,\n        notifyOffsetHasChanged,\n    ]);\n\n    return {\n        interruptAnimation,\n        startPagingAnimation,\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/Carousel/tick.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("@fountain-ui/utils");
+
+var _default = (0, _utils.logger)('Carousel', {
+  enabled: __DEV__,
+  format: 'diff'
+});
+
+exports.default = _default;
+//# sourceMappingURL=tick.js.map

package/build/commonjs/Carousel/tick.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["logger","enabled","__DEV__","format"],"sources":["tick.ts"],"sourcesContent":["import { logger } from '@fountain-ui/utils';\n\nexport default logger('Carousel', {\n    enabled: __DEV__,\n    format: 'diff',\n});\n"],"mappings":";;;;;;;AAAA;;eAEe,IAAAA,aAAA,EAAO,UAAP,EAAmB;EAC9BC,OAAO,EAAEC,OADqB;EAE9BC,MAAM,EAAE;AAFsB,CAAnB,C"}

package/build/commonjs/Carousel/types.js

@@ -4,4 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const directions = ['next', 'prev', 'stay'];
+const animationStates = ['started', 'finished', 'interrupted'];
 //# sourceMappingURL=types.js.map

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

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

package/build/commonjs/ViewPager/ChildrenMemoizedPage.js

@@ -42,55 +42,64 @@ function Page(props) {
   const {
     pageStore
   } = (0, _react.useContext)(_InternalContext.default);
-
-  const assumeInitialPageState = () => {
-    const activeIndex = initialPage;
+  const computePageDescription = (0, _react.useCallback)(page => {
+    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] = (0, _react.useState)(() => {
+    const {
+      isActive,
+      becomeNeighbor
+    } = computePageDescription(initialPage);
 
     if (loading === 'eager') {
       return {
-        isActive,
-        isLoaded: true
+        active: isActive,
+        loaded: true
       };
     }
 
-    const isLoaded = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
     return {
-      isActive,
-      isLoaded
+      active: isActive,
+      loaded: isActive || becomeNeighbor
     };
-  };
+  }); // `Bailing out of a state update` is not working as expected.
 
-  const [pageState, setPageState] = (0, _react.useState)(assumeInitialPageState);
-  const content = pageState.isLoaded ? children : null;
+  const pageStateRef = (0, _react.useRef)(initialState);
+  const [, forceRender] = (0, _react.useReducer)(s => s + 1, 0);
+  const {
+    active,
+    loaded
+  } = pageStateRef.current;
+  const content = loaded ? children : null;
   (0, _react.useEffect)(() => {
     return pageStore.subscribe(newPage => {
-      const activeIndex = newPage;
-      const isActive = index === activeIndex;
-      const shouldRerender = index >= activeIndex - offscreenPageRerenderLimit && index <= activeIndex + offscreenPageRerenderLimit;
-      const becomeNeighbor = shouldRerender && !isActive;
-      setPageState(prevState => {
-        if (prevState.isActive !== isActive) {
-          return { ...prevState,
-            isActive,
-            isLoaded: isActive || prevState.isLoaded
-          };
-        }
-
-        if (becomeNeighbor && !prevState.isLoaded) {
-          return { ...prevState,
-            isLoaded: true
-          };
-        }
-
-        return prevState;
-      });
+      const {
+        isActive,
+        becomeNeighbor
+      } = computePageDescription(newPage);
+      const currentState = pageStateRef.current;
+      const newState = {
+        active: isActive,
+        loaded: isActive || becomeNeighbor ? true : currentState.loaded
+      };
+
+      if (currentState.active !== newState.active || currentState.loaded !== newState.loaded) {
+        pageStateRef.current = newState;
+        forceRender();
+      }
     });
-  }, [pageStore, index]);
+  }, [pageStore, computePageDescription]);
   const contextValue = (0, _react.useMemo)(() => ({
-    isActive: pageState.isActive
-  }), [pageState.isActive]);
-  const style = _reactNative.Platform.OS === 'web' ? pageState.isActive ? _core.StyleSheet.absoluteFill : styles.none : styles.fill;
+    isActive: active
+  }), [active]);
+  const style = _reactNative.Platform.OS === 'web' ? active ? _core.StyleSheet.absoluteFill : styles.none : styles.fill;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     collapsable: false,
     style: style

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","fill","width","height","none","display","Page","props","index","initialPage","children","loading","offscreenPageRerenderLimit","pageStore","useContext","InternalContext","assumeInitialPageState","activeIndex","isActive","isLoaded","pageState","setPageState","useState","content","useEffect","subscribe","newPage","shouldRerender","becomeNeighbor","prevState","contextValue","useMemo","style","Platform","OS","absoluteFill","memo","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useContext, useEffect, useMemo, 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 InternalPageState {\n    isActive: boolean;\n    isLoaded: 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 assumeInitialPageState = (): InternalPageState => {\n        const activeIndex = initialPage;\n\n        const isActive = index === activeIndex;\n\n        if (loading === 'eager') {\n            return { isActive, isLoaded: true };\n        }\n\n        const isLoaded = index >= activeIndex - offscreenPageRerenderLimit\n            && index <= activeIndex + offscreenPageRerenderLimit;\n\n        return { isActive, isLoaded };\n    };\n\n    const [pageState, setPageState] = useState<InternalPageState>(assumeInitialPageState);\n\n    const content = pageState.isLoaded ? children : null;\n\n    useEffect(() => {\n        return pageStore.subscribe(newPage => {\n            const activeIndex = newPage;\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            setPageState(prevState => {\n                if (prevState.isActive !== isActive) {\n                    return {\n                        ...prevState,\n                        isActive,\n                        isLoaded: isActive || prevState.isLoaded,\n                    };\n                }\n\n                if (becomeNeighbor && !prevState.isLoaded) {\n                    return {\n                        ...prevState,\n                        isLoaded: true,\n                    };\n                }\n\n                return prevState;\n            });\n        });\n    }, [pageStore, index]);\n\n    const contextValue = useMemo(() => ({\n        isActive: pageState.isActive,\n    }), [pageState.isActive]);\n\n    const style = Platform.OS === 'web'\n        ? (pageState.isActive ? 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":["styles","StyleSheet","create","fill","width","height","none","display","Page","props","index","initialPage","children","loading","offscreenPageRerenderLimit","pageStore","useContext","InternalContext","computePageDescription","useCallback","page","activeIndex","isActive","shouldRerender","becomeNeighbor","initialState","useState","active","loaded","pageStateRef","useRef","forceRender","useReducer","s","current","content","useEffect","subscribe","newPage","currentState","newState","contextValue","useMemo","style","Platform","OS","absoluteFill","memo","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/commonjs/ViewPager/ViewPagerNative.js

@@ -86,7 +86,7 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
     return () => {
       animatedValue.removeListener(id);
     };
-  }, [sharedPage]);
+  }, [sharedPage, setPage]);
   const handlePageSelected = (0, _react.useCallback)(e => {
     if (Number.isFinite(desiredPageRef.current)) {
       // onPageSelected is called from outer controlling mechanism
@@ -110,9 +110,8 @@ const ViewPager = /*#__PURE__*/(0, _react.forwardRef)(function ViewPager(props,
       if (trustfulNextPage !== pageRef.current) {
         desiredPageRef.current = trustfulNextPage;
         sharedPage.animatedValue.setValue(trustfulNextPage);
+        onChange === null || onChange === void 0 ? void 0 : onChange(trustfulNextPage);
       }
-
-      onChange === null || onChange === void 0 ? void 0 : onChange(trustfulNextPage);
     }
   }, [onChange, sharedPage]);
   (0, _react.useImperativeHandle)(ref, () => ({

package/build/commonjs/ViewPager/ViewPagerNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","keyboardDismissMode","loading","defaultLoading","offscreenPageRerenderLimit","defaultOffscreenPageRerenderLimit","onChange","pageComponent","defaultPageComponent","pageForceRerenderKey","scrollEnabled","style","UNSTABLE_sharedPage","fallbackSharedPage","useSyncAnimatedValue","initialValue","sharedPage","pageRef","useRef","desiredPageRef","NaN","pagerRef","animationFrameRef","setPage","useCallback","newPage","Number","isInteger","current","requestAnimationFrame","isFinite","useEffect","cancelAnimationFrame","animatedValue","id","addListener","newValue","value","removeListener","handlePageSelected","e","desiredPage","setValue","trustfulNextPage","nativeEvent","position","useImperativeHandle","pageStore","usePageStore","PageComponent","Children","map","child","index"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport { useSyncAnimatedValue } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './types';\nimport { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';\nimport usePageStore from './usePageStore';\nimport InternalContext from './InternalContext';\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,\n        onChange,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n        UNSTABLE_sharedPage,\n    } = props;\n\n    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });\n\n    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n    const pageRef = useRef<number>(sharedPage.initialValue);\n\n    const desiredPageRef = useRef<number>(NaN);\n\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const animationFrameRef = useRef<number>(NaN);\n\n    const setPage = useCallback((newPage: number) => {\n        if (!Number.isInteger(newPage)) {\n            return;\n        }\n\n        animationFrameRef.current = requestAnimationFrame(() => {\n            if (Number.isFinite(desiredPageRef.current)) {\n                if (pageRef.current === desiredPageRef.current) {\n                    // end of state machine. clear desired page.\n                    desiredPageRef.current = NaN;\n                    return;\n                }\n\n                if (newPage === desiredPageRef.current) {\n                    return;\n                }\n            }\n\n            desiredPageRef.current = newPage;\n            pagerRef.current?.setPage(newPage);\n        });\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            if (animationFrameRef.current) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        const animatedValue = sharedPage.animatedValue;\n        const id = animatedValue.addListener(newValue => {\n            const newPage = newValue.value;\n            pageRef.current = newPage;\n            setPage(newPage);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [sharedPage]);\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        if (Number.isFinite(desiredPageRef.current)) {\n            // onPageSelected is called from outer controlling mechanism\n            // e.g. sharedPage.value is changed, setPage() is called\n            // Due to the onPageSelected bug,\n            // we don't trust the value from event, (e.nativeEvent.position)\n            // other than that trust the value from desiredPageRef.\n\n            const desiredPage = desiredPageRef.current;\n\n            if (pageRef.current === desiredPage) {\n                // end of state machine. clear desired page.\n                desiredPageRef.current = NaN;\n            } else {\n                sharedPage.animatedValue.setValue(desiredPage);\n            }\n\n            onChange?.(desiredPage);\n        } else {\n            const trustfulNextPage = e.nativeEvent.position;\n\n            if (trustfulNextPage !== pageRef.current) {\n                desiredPageRef.current = trustfulNextPage;\n                sharedPage.animatedValue.setValue(trustfulNextPage);\n            }\n\n            onChange?.(trustfulNextPage);\n        }\n    }, [onChange, sharedPage]);\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [setPage],\n    );\n\n    const pageStore = usePageStore(sharedPage);\n\n    const PageComponent = pageComponent;\n\n    return (\n        <InternalContext.Provider value={{ pageStore }}>\n            <RNViewPager\n                ref={pagerRef}\n                initialPage={sharedPage.initialValue}\n                keyboardDismissMode={keyboardDismissMode}\n                onPageSelected={handlePageSelected}\n                pageMargin={8}\n                scrollEnabled={scrollEnabled}\n                style={style}\n            >\n                {Children.map(children, (child, index) => (\n                    <PageComponent\n                        key={index}\n                        children={child}\n                        index={index}\n                        initialPage={sharedPage.initialValue}\n                        loading={loading}\n                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}\n                        rerenderKey={pageForceRerenderKey}\n                    />\n                ))}\n            </RNViewPager>\n        </InternalContext.Provider>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":"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"}
+{"version":3,"names":["ViewPager","forwardRef","props","ref","children","initialPage","defaultInitialPage","keyboardDismissMode","loading","defaultLoading","offscreenPageRerenderLimit","defaultOffscreenPageRerenderLimit","onChange","pageComponent","defaultPageComponent","pageForceRerenderKey","scrollEnabled","style","UNSTABLE_sharedPage","fallbackSharedPage","useSyncAnimatedValue","initialValue","sharedPage","pageRef","useRef","desiredPageRef","NaN","pagerRef","animationFrameRef","setPage","useCallback","newPage","Number","isInteger","current","requestAnimationFrame","isFinite","useEffect","cancelAnimationFrame","animatedValue","id","addListener","newValue","value","removeListener","handlePageSelected","e","desiredPage","setValue","trustfulNextPage","nativeEvent","position","useImperativeHandle","pageStore","usePageStore","PageComponent","Children","map","child","index"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport { useSyncAnimatedValue } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './types';\nimport { defaultInitialPage, defaultLoading, defaultOffscreenPageRerenderLimit, defaultPageComponent } from './utils';\nimport usePageStore from './usePageStore';\nimport InternalContext from './InternalContext';\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        offscreenPageRerenderLimit = defaultOffscreenPageRerenderLimit,\n        onChange,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n        UNSTABLE_sharedPage,\n    } = props;\n\n    const fallbackSharedPage = useSyncAnimatedValue({ initialValue: initialPage });\n\n    const sharedPage = UNSTABLE_sharedPage ?? fallbackSharedPage;\n\n    const pageRef = useRef<number>(sharedPage.initialValue);\n\n    const desiredPageRef = useRef<number>(NaN);\n\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const animationFrameRef = useRef<number>(NaN);\n\n    const setPage = useCallback((newPage: number) => {\n        if (!Number.isInteger(newPage)) {\n            return;\n        }\n\n        animationFrameRef.current = requestAnimationFrame(() => {\n            if (Number.isFinite(desiredPageRef.current)) {\n                if (pageRef.current === desiredPageRef.current) {\n                    // end of state machine. clear desired page.\n                    desiredPageRef.current = NaN;\n                    return;\n                }\n\n                if (newPage === desiredPageRef.current) {\n                    return;\n                }\n            }\n\n            desiredPageRef.current = newPage;\n            pagerRef.current?.setPage(newPage);\n        });\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            if (animationFrameRef.current) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        const animatedValue = sharedPage.animatedValue;\n        const id = animatedValue.addListener(newValue => {\n            const newPage = newValue.value;\n            pageRef.current = newPage;\n            setPage(newPage);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [sharedPage, setPage]);\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        if (Number.isFinite(desiredPageRef.current)) {\n            // onPageSelected is called from outer controlling mechanism\n            // e.g. sharedPage.value is changed, setPage() is called\n            // Due to the onPageSelected bug,\n            // we don't trust the value from event, (e.nativeEvent.position)\n            // other than that trust the value from desiredPageRef.\n\n            const desiredPage = desiredPageRef.current;\n\n            if (pageRef.current === desiredPage) {\n                // end of state machine. clear desired page.\n                desiredPageRef.current = NaN;\n            } else {\n                sharedPage.animatedValue.setValue(desiredPage);\n            }\n\n            onChange?.(desiredPage);\n        } else {\n            const trustfulNextPage = e.nativeEvent.position;\n\n            if (trustfulNextPage !== pageRef.current) {\n                desiredPageRef.current = trustfulNextPage;\n                sharedPage.animatedValue.setValue(trustfulNextPage);\n\n                onChange?.(trustfulNextPage);\n            }\n        }\n    }, [onChange, sharedPage]);\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [setPage],\n    );\n\n    const pageStore = usePageStore(sharedPage);\n\n    const PageComponent = pageComponent;\n\n    return (\n        <InternalContext.Provider value={{ pageStore }}>\n            <RNViewPager\n                ref={pagerRef}\n                initialPage={sharedPage.initialValue}\n                keyboardDismissMode={keyboardDismissMode}\n                onPageSelected={handlePageSelected}\n                pageMargin={8}\n                scrollEnabled={scrollEnabled}\n                style={style}\n            >\n                {Children.map(children, (child, index) => (\n                    <PageComponent\n                        key={index}\n                        children={child}\n                        index={index}\n                        initialPage={sharedPage.initialValue}\n                        loading={loading}\n                        offscreenPageRerenderLimit={offscreenPageRerenderLimit}\n                        rerenderKey={pageForceRerenderKey}\n                    />\n                ))}\n            </RNViewPager>\n        </InternalContext.Provider>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":"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"}

package/build/commonjs/ViewPager/usePageStore.js

@@ -23,6 +23,11 @@ function usePageStore(value) {
       animatedValue.removeListener(id);
     };
   }, [animatedValue]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      store.removeAllListeners();
+    };
+  }, [store]);
   return store;
 }
 

package/build/commonjs/ViewPager/usePageStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["usePageStore","value","animatedValue","initialValue","store","useRef","SimpleStore","current","useEffect","id","addListener","newPage","dispatch","removeListener"],"sources":["usePageStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';\nimport { SimpleStore } from '@fountain-ui/core';\n\nexport default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {\n    const {\n        animatedValue,\n        initialValue,\n    } = value;\n\n    const store = useRef(new SimpleStore(initialValue)).current;\n\n    useEffect(() => {\n        const id = animatedValue.addListener((newPage) => {\n            store.dispatch(newPage.value);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [animatedValue]);\n\n    return store;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,YAAT,CAAsBC,KAAtB,EAAmE;EAC9E,MAAM;IACFC,aADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,KAAK,GAAG,IAAAC,aAAA,EAAO,IAAIC,iBAAJ,CAAgBH,YAAhB,CAAP,EAAsCI,OAApD;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,EAAE,GAAGP,aAAa,CAACQ,WAAd,CAA2BC,OAAD,IAAa;MAC9CP,KAAK,CAACQ,QAAN,CAAeD,OAAO,CAACV,KAAvB;IACH,CAFU,CAAX;IAIA,OAAO,MAAM;MACTC,aAAa,CAACW,cAAd,CAA6BJ,EAA7B;IACH,CAFD;EAGH,CARD,EAQG,CAACP,aAAD,CARH;EAUA,OAAOE,KAAP;AACH;;AAAA"}
+{"version":3,"names":["usePageStore","value","animatedValue","initialValue","store","useRef","SimpleStore","current","useEffect","id","addListener","newPage","dispatch","removeListener","removeAllListeners"],"sources":["usePageStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';\nimport { SimpleStore } from '@fountain-ui/core';\n\nexport default function usePageStore(value: SyncAnimatedValue): MonoStore<number> {\n    const {\n        animatedValue,\n        initialValue,\n    } = value;\n\n    const store = useRef(new SimpleStore(initialValue)).current;\n\n    useEffect(() => {\n        const id = animatedValue.addListener((newPage) => {\n            store.dispatch(newPage.value);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [animatedValue]);\n\n    useEffect(() => {\n        return () => {\n            store.removeAllListeners();\n        };\n    }, [store]);\n\n    return store;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,YAAT,CAAsBC,KAAtB,EAAmE;EAC9E,MAAM;IACFC,aADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,KAAK,GAAG,IAAAC,aAAA,EAAO,IAAIC,iBAAJ,CAAgBH,YAAhB,CAAP,EAAsCI,OAApD;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,EAAE,GAAGP,aAAa,CAACQ,WAAd,CAA2BC,OAAD,IAAa;MAC9CP,KAAK,CAACQ,QAAN,CAAeD,OAAO,CAACV,KAAvB;IACH,CAFU,CAAX;IAIA,OAAO,MAAM;MACTC,aAAa,CAACW,cAAd,CAA6BJ,EAA7B;IACH,CAFD;EAGH,CARD,EAQG,CAACP,aAAD,CARH;EAUA,IAAAM,gBAAA,EAAU,MAAM;IACZ,OAAO,MAAM;MACTJ,KAAK,CAACU,kBAAN;IACH,CAFD;EAGH,CAJD,EAIG,CAACV,KAAD,CAJH;EAMA,OAAOA,KAAP;AACH;;AAAA"}

package/build/commonjs/ViewabilityTrackerView/measureViewability.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = measureViewability;
 
+var _utils = require("@fountain-ui/utils");
+
 const computeRectSize = rect => (rect.bottom - rect.top) * (rect.right - rect.left);
 
 const normalizePagePosition = value => value != null && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
 
 const normalizeViewSize = size => Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
 
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-
 function measureViewability(_ref) {
   let {
     view,
@@ -24,10 +24,10 @@ function measureViewability(_ref) {
     const safePageX = normalizePagePosition(pageX);
     const safePageY = normalizePagePosition(pageY);
     const visibleRect = {
-      top: clamp(safePageY, 0, windowHeight),
-      bottom: clamp(safePageY + height, 0, windowHeight),
-      left: clamp(safePageX, 0, windowWidth),
-      right: clamp(safePageX + width, 0, windowWidth)
+      top: (0, _utils.clamp)(safePageY, 0, windowHeight),
+      bottom: (0, _utils.clamp)(safePageY + height, 0, windowHeight),
+      left: (0, _utils.clamp)(safePageX, 0, windowWidth),
+      right: (0, _utils.clamp)(safePageX + width, 0, windowWidth)
     };
     const visibleRectSize = computeRectSize(visibleRect);
     const viewSize = normalizeViewSize(width * height);