react-native-reanimated-carousel 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/hooks/useVisibleRanges.tsx

@@ -1,49 +1,97 @@
+import { useRef } from "react";
 import type Animated from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
-export type IVisibleRanges = Animated.SharedValue<{
-  negativeRange: number[]
-  positiveRange: number[]
-}>;
+type Range = [number, number];
+
+export interface VisibleRanges {
+  negativeRange: Range
+  positiveRange: Range
+}
+
+export type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 
 export function useVisibleRanges(options: {
   total: number
   viewSize: number
   windowSize?: number
   translation: Animated.SharedValue<number>
+  loop?: boolean
 }): IVisibleRanges {
   const {
     total = 0,
     viewSize,
     translation,
-    windowSize: _windowSize = 0,
+    windowSize: _windowSize,
+    loop,
   } = options;
 
-  const windowSize = total <= _windowSize ? total : _windowSize;
+  const windowSize = _windowSize ?? total;
+  const cachedRanges = useRef<VisibleRanges>(null!);
 
   const ranges = useDerivedValue(() => {
     const positiveCount = Math.round(windowSize / 2);
     const negativeCount = windowSize - positiveCount;
-    let curIndex = Math.round(-translation.value / viewSize);
-    curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;
-    const negativeRange = [
-      (curIndex - negativeCount + total) % total,
-      (curIndex - 1 + total) % total,
-    ];
-    const positiveRange = [
-      (curIndex + total) % total,
-      (curIndex + positiveCount + total) % total,
-    ];
-    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+
+    let currentIndex = Math.round(-translation.value / viewSize);
+    currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
+
+    let newRanges: VisibleRanges;
+
+    if (!loop) {
+      // Adjusting negative range if the carousel is not loopable.
+      // So, It will be only displayed the positive items.
+      newRanges = {
+        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
+        positiveRange: [0 + currentIndex, currentIndex + (windowSize - 1)],
+      };
     }
-    if (positiveRange[0] > positiveRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+    else {
+      const negativeRange: Range = [
+        (currentIndex - negativeCount + total) % total,
+        (currentIndex - 1 + total) % total,
+      ];
+
+      const positiveRange: Range = [
+        (currentIndex + total) % total,
+        (currentIndex + positiveCount + total) % total,
+      ];
+
+      if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+      if (positiveRange[0] > positiveRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+
+      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
+      newRanges = { negativeRange, positiveRange };
     }
-    return { negativeRange, positiveRange };
-  }, [total, windowSize, translation]);
+
+    if (
+      isArraysEqual(
+        cachedRanges.current?.negativeRange ?? [],
+        newRanges.negativeRange,
+      )
+      && isArraysEqual(
+        cachedRanges.current?.positiveRange ?? [],
+        newRanges.positiveRange,
+      )
+    )
+      return cachedRanges.current;
+
+    cachedRanges.current = newRanges;
+    return cachedRanges.current;
+  }, [loop, total, windowSize, translation]);
 
   return ranges;
 }
+
+function isArraysEqual(a: number[], b: number[]): boolean {
+  "worklet";
+  if (a.length !== b.length) return false;
+
+  return a.every((value, index) => value === b[index]);
+}

package/src/index.tsx

@@ -1,10 +1,13 @@
 import Carousel from "./components/Carousel";
+export { Pagination } from "./components/Pagination";
+
 export type {
   TCarouselProps,
   ICarouselInstance,
   IComputedDirectionTypes,
   CarouselRenderItem,
 } from "./types";
+export type { TAnimationStyle } from "./components/BaseLayout";
 export type { ILayoutConfig } from "./layouts/stack";
 
 export default Carousel;

package/src/types.ts

@@ -153,10 +153,19 @@ export type TCarouselProps<T = any> = {
   testID?: string
   /**
      * Maximum offset value for once scroll.
-     * props.vertical = true => maxScrollDistancePerSwipeY
-     * props.vertical = false => maxScrollDistancePerSwipeX
+     * Carousel cannot scroll over than this value.
      * */
   maxScrollDistancePerSwipe?: number
+  /**
+    * Minimum offset value for once scroll.
+    * If the translation value is less than this value, the carousel will not scroll.
+    * */
+  minScrollDistancePerSwipe?: number
+  /**
+     * @experimental This API will be changed in the future.
+     * If positive, the carousel will scroll to the positive direction and vice versa.
+     * */
+  fixedDirection?: "positive" | "negative"
   /**
       * Custom carousel config.
       */
@@ -175,9 +184,9 @@ export type TCarouselProps<T = any> = {
       */
   onSnapToItem?: (index: number) => void
   /**
-      * On scroll begin
+      * On scroll start
       */
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   /**
       * On scroll end
       */
@@ -186,11 +195,13 @@ export type TCarouselProps<T = any> = {
       * On progress change
       * @param offsetProgress Total of offset distance (0 390 780 ...)
       * @param absoluteProgress Convert to index (0 1 2 ...)
+      *
+      * If you want to update a shared value automatically, you can use the shared value as a parameter directly.
       */
-  onProgressChange?: (
+  onProgressChange?: ((
     offsetProgress: number,
     absoluteProgress: number
-  ) => void
+  ) => void) | SharedValue<number>
 
   // ============================== deprecated props ==============================
   /**
@@ -203,23 +214,23 @@ export type TCarouselProps<T = any> = {
 
 export interface ICarouselInstance {
   /**
-      * Scroll to previous item, it takes one optional argument (count),
-      * which allows you to specify how many items to cross
-      */
+     * Scroll to previous item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
+     */
   prev: (opts?: Omit<TCarouselActionOptions, "index">) => void
   /**
-      * Scroll to next item, it takes one optional argument (count),
-      * which allows you to specify how many items to cross
-      */
+     * Scroll to next item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
+     */
   next: (opts?: Omit<TCarouselActionOptions, "index">) => void
   /**
-      * Get current item index
-      */
+     * Get current item index
+     */
   getCurrentIndex: () => number
   /**
-      * Use value to scroll to a position where relative to the current position,
-      * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
-      */
+     * Use value to scroll to a position where relative to the current position,
+     * scrollTo({count: -2}) is equivalent to prev(2), scrollTo({count: 2}) is equivalent to next(2)
+     */
   scrollTo: (opts?: TCarouselActionOptions) => void
 }
 

package/src/utils/compute-offset-if-data-changed.test.ts

@@ -0,0 +1,30 @@
+import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed";
+
+describe("computeOffsetIfDataChanged", () => {
+  const size = 634;
+  it("should return the correct values, if index is 0", () => {
+    const index = 0;
+    const result = computeOffsetIfDataChanged({
+      direction: -1,
+      previousLength: 4,
+      currentLength: 6,
+      size,
+      handlerOffset: index * size,
+    });
+
+    expect(result).toMatchInlineSnapshot("0");
+  });
+
+  it("should return the correct values, if index is 1", () => {
+    const index = 1;
+    const result = computeOffsetIfDataChanged({
+      direction: -1,
+      previousLength: 4,
+      currentLength: 6,
+      size,
+      handlerOffset: index * size,
+    });
+
+    expect(result).toMatchInlineSnapshot("634");
+  });
+});

package/src/utils/{computeNewIndexWhenDataChanges.ts → compute-offset-if-data-changed.ts}

@@ -6,7 +6,7 @@ export function omitZero(a: number, b: number) {
   return b;
 }
 
-export function computeNewIndexWhenDataChanges(params: {
+export function computeOffsetIfDataChanged(params: {
   direction: number
   handlerOffset: number
   size: number

package/src/utils/compute-offset-if-size-changed.test.ts

@@ -0,0 +1,78 @@
+import { computeOffsetIfSizeChanged } from "./compute-offset-if-size-changed";
+
+describe("computeOffsetIfSizeChanged", () => {
+  it("[CASE 1] should return the correct values when size does not change", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 500;
+    const handlerOffset = prevIndex * size;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 2] should return the correct values when size changes from 500 to 400", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 400;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 3] should return the correct values when size changes from 500 to 499", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 499;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 4] should return the correct values when size changes from 500 to 501", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 501;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 5] should return the correct values when size changes from 224 to 524", () => {
+    const prevIndex = 1;
+    const prevSize = 224;
+    const size = 524;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+});

package/src/utils/compute-offset-if-size-changed.ts

@@ -0,0 +1,11 @@
+export function computeOffsetIfSizeChanged(params: {
+  handlerOffset: number
+  prevSize: number
+  size: number
+}) {
+  "worklet";
+  const { handlerOffset, prevSize, size } = params;
+
+  return handlerOffset / prevSize * size;
+}
+

package/src/utils/handleroffset-direction.test.ts

@@ -0,0 +1,52 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { handlerOffsetDirection } from "./handleroffset-direction";
+
+describe("handlerOffsetDirection", () => {
+  it("should return -1 when default value equals to zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(0);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+
+  it("should return 1 when default value is greater than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(1);
+  });
+
+  it("should return -1 when default value is less than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+
+  it("should return 1 when default value equals to zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "positive");
+    });
+
+    expect(result.result.current).toBe(1);
+  });
+
+  it("should return -1 when default value is greater than zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "negative");
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+});

package/src/utils/handleroffset-direction.ts

@@ -1,15 +1,18 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1 {
+import type { TCarouselProps } from "../types";
+
+export function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps["fixedDirection"]): -1 | 1 {
   "worklet";
 
-  const isPositiveZero = Object.is(handlerOffset.value, +0);
-  const isNegativeZero = Object.is(handlerOffset.value, -0);
-  const direction = isPositiveZero
-    ? 1
-    : isNegativeZero
-      ? -1
-      : Math.sign(handlerOffset.value) as -1 | 1;
+  if (fixedDirection === "negative")
+    return -1;
+
+  if (fixedDirection === "positive")
+    return 1;
+
+  if (handlerOffset.value === 0)
+    return -1;
 
-  return direction;
+  return Math.sign(handlerOffset.value) as -1 | 1;
 }

package/src/utils/index.test.ts

@@ -1,4 +1,4 @@
-import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges";
+import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed";
 
 describe("should work as expected", () => {
   const size = 375;
@@ -24,7 +24,7 @@ describe("should work as expected", () => {
 
   it("The direction is negative, And changing length of data set from 4 to 3, the new index will to be 2.", async () => {
     const currentIndex = 1;
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex,
       direction: "negative",
       previousLength: 4,
@@ -35,7 +35,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is negative, Changing length of data set from 4 to 3, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 2,
       direction: "negative",
       previousLength: 4,
@@ -46,7 +46,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is positive, Changing length of data set from 4 to 5, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 3,
       direction: "positive",
       previousLength: 4,
@@ -57,7 +57,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is negative, Changing length of data set from 4 to 5, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 3,
       direction: "negative",
       previousLength: 4,
@@ -68,7 +68,7 @@ describe("should work as expected", () => {
   });
 
   it("Changing length of data set from 0 to 3, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 0,
       direction: "positive",
       previousLength: 0,

package/lib/commonjs/layouts/BaseLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","React","useContext","CTX","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n  = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n      /**\n       * We use this testID to know when the carousel item is ready to be tested in test.\n       * e.g.\n       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.\n       * */\n      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? \"READY\" : \"NOT_READY\"}__`}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/commonjs/layouts/ParallaxLayout.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ParallaxLayout = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
-var _LazyView = require("../components/LazyView");
-
-var _useOffsetX = require("../hooks/useOffsetX");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ParallaxLayout = props => {
-  const {
-    handlerOffset,
-    parallaxScrollingOffset = 100,
-    parallaxScrollingScale = 0.8,
-    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
-    index,
-    width,
-    height,
-    loop,
-    dataLength,
-    children,
-    visibleRanges,
-    vertical
-  } = props;
-
-  const [shouldUpdate, setShouldUpdate] = _react.default.useState(false);
-
-  const size = props.vertical ? props.height : props.width;
-  const x = (0, _useOffsetX.useOffsetX)({
-    handlerOffset,
-    index,
-    size,
-    dataLength,
-    loop
-  }, visibleRanges);
-  const offsetXStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const value = x.value / size;
-    const translate = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], _reactNativeReanimated.Extrapolate.EXTEND);
-    const zIndex = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [0, size, 0], _reactNativeReanimated.Extrapolate.CLAMP);
-    const scale = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], _reactNativeReanimated.Extrapolate.CLAMP);
-    return {
-      transform: [vertical ? {
-        translateY: translate
-      } : {
-        translateX: translate
-      }, {
-        scale
-      }],
-      zIndex
-    };
-  }, [loop, vertical, parallaxScrollingOffset]);
-
-  const updateView = _react.default.useCallback((negativeRange, positiveRange) => {
-    setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
-  }, [index]);
-
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => visibleRanges.value, () => {
-    (0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
-  }, [visibleRanges.value]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [{
-      width: width || "100%",
-      height: height || "100%",
-      position: "absolute"
-    }, offsetXStyle]
-  }, /*#__PURE__*/_react.default.createElement(_LazyView.LazyView, {
-    shouldUpdate: shouldUpdate
-  }, children));
-};
-
-exports.ParallaxLayout = ParallaxLayout;
-//# sourceMappingURL=ParallaxLayout.js.map

package/lib/commonjs/layouts/ParallaxLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffset","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","index","width","height","loop","dataLength","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","x","offsetXStyle","value","translate","Extrapolate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./parallax\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { IComputedDirectionTypes } from \"../types\";\n\nexport const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<\n{\n  loop?: boolean\n  handlerOffset: Animated.SharedValue<number>\n  index: number\n  dataLength: number\n  visibleRanges: IVisibleRanges\n} & ILayoutConfig\n>>> = (props) => {\n  const {\n    handlerOffset,\n    parallaxScrollingOffset = 100,\n    parallaxScrollingScale = 0.8,\n    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,\n    index,\n    width,\n    height,\n    loop,\n    dataLength,\n    children,\n    visibleRanges,\n    vertical,\n  } = props;\n\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n  const size = props.vertical ? props.height : props.width;\n\n  const x = useOffsetX(\n    {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n    },\n    visibleRanges,\n  );\n\n  const offsetXStyle = useAnimatedStyle(() => {\n    const value = x.value / size;\n\n    const translate = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        -size + parallaxScrollingOffset,\n        0,\n        size - parallaxScrollingOffset,\n      ],\n      Extrapolate.EXTEND,\n    );\n\n    const zIndex = interpolate(\n      value,\n      [-1, 0, 1],\n      [0, size, 0],\n      Extrapolate.CLAMP,\n    );\n\n    const scale = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        parallaxAdjacentItemScale,\n        parallaxScrollingScale,\n        parallaxAdjacentItemScale,\n      ],\n      Extrapolate.CLAMP,\n    );\n\n    return {\n      transform: [\n        vertical\n          ? {\n            translateY: translate,\n          }\n          : {\n            translateX: translate,\n          },\n        {\n          scale,\n        },\n      ],\n      zIndex,\n    };\n  }, [loop, vertical, parallaxScrollingOffset]);\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      setShouldUpdate(\n        (index >= negativeRange[0] && index <= negativeRange[1])\n                    || (index >= positiveRange[0] && index <= positiveRange[1]),\n      );\n    },\n    [index],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        offsetXStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/commonjs/utils/computeNewIndexWhenDataChanges.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["computeNewIndexWhenDataChanges.ts"],"names":["omitZero","a","b","computeNewIndexWhenDataChanges","params","direction","handlerOffset","_handlerOffset","size","previousLength","currentLength","positionIndex","round","isPositive","Math","abs","parseInt","String","prevOffset","prevIndex","changedLength","changedOffset"],"mappings":";;;;;;;;AAAO,SAASA,QAAT,CAAkBC,CAAlB,EAA6BC,CAA7B,EAAwC;AAC7C;;AACA,MAAID,CAAC,KAAK,CAAV,EACE,OAAO,CAAP;AAEF,SAAOC,CAAP;AACD;;AAEM,SAASC,8BAAT,CAAwCC,MAAxC,EAMJ;AACD;;AACA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,aAAa,EAAEC,cAA5B;AAA4CC,IAAAA,IAA5C;AAAkDC,IAAAA,cAAlD;AAAkEC,IAAAA;AAAlE,MAAoFN,MAA1F;AAEA,MAAIE,aAAa,GAAGC,cAApB;AACA,MAAII,aAAJ;AACA,MAAIC,KAAJ;AAEA,QAAMC,UAAU,GAAGR,SAAS,GAAG,CAA/B;;AAEA,MAAIQ,UAAJ,EAAgB;AACdF,IAAAA,aAAa,GAAIG,IAAI,CAACC,GAAL,CAAST,aAAT,CAAD,GAA4BE,IAA5C;AACAI,IAAAA,KAAK,GAAGI,QAAQ,CAACC,MAAM,CAACjB,QAAQ,CAACS,cAAD,EAAiBE,aAAa,GAAGF,cAAjC,CAAT,CAAP,CAAhB;AACD,GAHD,MAIK;AACHE,IAAAA,aAAa,GAAG,CAACG,IAAI,CAACC,GAAL,CAAST,aAAT,IAA0BE,IAA3B,IAAmCA,IAAnD;AACAI,IAAAA,KAAK,GAAGI,QAAQ,CAACC,MAAM,CAACjB,QAAQ,CAACS,cAAD,EAAiBE,aAAa,GAAGF,cAAjC,CAAT,CAAP,CAAR,GAA6E,CAArF;AACD;;AAED,QAAMS,UAAU,GAAGlB,QAAQ,CAACS,cAAD,EAAiBE,aAAa,GAAGF,cAAjC,CAA3B;AACA,QAAMU,SAAS,GAAGN,UAAU,GAAGK,UAAH,GAAgBT,cAAc,GAAGS,UAAjB,GAA8B,CAA1E;AACA,QAAME,aAAa,GAAGR,KAAK,IAAIF,aAAa,GAAGD,cAApB,CAA3B;AACA,QAAMY,aAAa,GAAGD,aAAa,GAAGZ,IAAtC;;AACA,MAAIW,SAAS,GAAGT,aAAa,GAAG,CAA5B,IAAiCA,aAAa,GAAGD,cAArD,EAAqE;AACnE,QAAII,UAAJ,EACEP,aAAa,GAAG,CAACI,aAAa,GAAG,CAAjB,IAAsBF,IAAtB,GAA6BH,SAA7C,CADF,KAIEC,aAAa,GAAG,CAACI,aAAa,GAAG,CAAjB,IAAsBF,IAAtB,GAA6B,CAAC,CAA9C;AACH,GAND,MAOK;AACHF,IAAAA,aAAa,IAAIe,aAAa,GAAGhB,SAAjC;AACD;;AAED,SAAOC,aAAP;AACD","sourcesContent":["export function omitZero(a: number, b: number) {\n  \"worklet\";\n  if (a === 0)\n    return 0;\n\n  return b;\n}\n\nexport function computeNewIndexWhenDataChanges(params: {\n  direction: number\n  handlerOffset: number\n  size: number\n  previousLength: number\n  currentLength: number\n}) {\n  \"worklet\";\n  const { direction, handlerOffset: _handlerOffset, size, previousLength, currentLength } = params;\n\n  let handlerOffset = _handlerOffset;\n  let positionIndex;\n  let round;\n\n  const isPositive = direction < 0;\n\n  if (isPositive) {\n    positionIndex = (Math.abs(handlerOffset)) / size;\n    round = parseInt(String(omitZero(previousLength, positionIndex / previousLength)));\n  }\n  else {\n    positionIndex = (Math.abs(handlerOffset) - size) / size;\n    round = parseInt(String(omitZero(previousLength, positionIndex / previousLength))) + 1;\n  }\n\n  const prevOffset = omitZero(previousLength, positionIndex % previousLength);\n  const prevIndex = isPositive ? prevOffset : previousLength - prevOffset - 1;\n  const changedLength = round * (currentLength - previousLength);\n  const changedOffset = changedLength * size;\n  if (prevIndex > currentLength - 1 && currentLength < previousLength) {\n    if (isPositive)\n      handlerOffset = (currentLength - 1) * size * direction;\n\n    else\n      handlerOffset = (currentLength - 1) * size * -1;\n  }\n  else {\n    handlerOffset += changedOffset * direction;\n  }\n\n  return handlerOffset;\n}\n\n"]}

package/lib/module/layouts/BaseLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","LazyView","useCheckMounted","useOffsetX","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n  = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n      /**\n       * We use this testID to know when the carousel item is ready to be tested in test.\n       * e.g.\n       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.\n       * */\n      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? \"READY\" : \"NOT_READY\"}__`}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}