@momo-kits/carousel 0.165.2-beta.2 → 0.167.1-beta.1

package/core/hooks/useInitProps.ts

@@ -1,177 +0,0 @@
-import React from "react";
-import { I18nManager } from "react-native";
-
-import { Easing } from "../constants";
-import type { CarouselAnimation, CarouselProps } from "../types";
-import { type CarouselDirectionSign, getCarouselDirectionSign } from "../utils/carousel-direction";
-import { computedFillDataWithAutoFillData } from "../utils/computed-with-auto-fill-data";
-
-type CarouselSnapMode = NonNullable<CarouselProps<unknown>["snapMode"]>;
-
-export type InitializedCarouselProps<Item> = Omit<
-  CarouselProps<Item>,
-  | "autoplay"
-  | "autoplayDirection"
-  | "autoplayInterval"
-  | "data"
-  | "defaultIndex"
-  | "loop"
-  | "orientation"
-  | "overscrollEnabled"
-  | "scrollEnabled"
-  | "snapMode"
-  | "style"
-> & {
-  autoplay: boolean;
-  autoplayDirection: "forward" | "backward";
-  autoplayInterval: number;
-  data: Item[];
-  defaultIndex: number;
-  loop: boolean;
-  orientation: "horizontal" | "vertical";
-  overscrollEnabled: boolean;
-  scrollEnabled: boolean;
-  snapMode: CarouselSnapMode;
-  style: NonNullable<CarouselProps<Item>["style"]>;
-  animation: CarouselAnimation;
-  rawData: Item[];
-  dataLength: number;
-  rawDataLength: number;
-  autoFillData: true;
-  directionSign: CarouselDirectionSign;
-};
-
-export function useInitProps<Item>(props: CarouselProps<Item>): InitializedCarouselProps<Item> {
-  validateStaticProps(props);
-
-  const rawData = props.data ?? [];
-  const requestedDefaultIndex = props.defaultIndex ?? 0;
-  const loop = props.loop ?? false;
-  const autoplay = props.autoplay ?? false;
-  const autoplayInterval = props.autoplayInterval ?? 3000;
-  const autoplayDirection = props.autoplayDirection ?? "forward";
-  const orientation = props.orientation ?? "horizontal";
-  const directionSign = getCarouselDirectionSign({
-    isRTL: I18nManager.isRTL,
-    orientation,
-  });
-  const scrollEnabled = props.scrollEnabled ?? true;
-  const snapMode = props.snapMode ?? "page";
-  const overscrollEnabled = props.overscrollEnabled ?? true;
-  const style = props.style ?? {};
-  const animation: CarouselAnimation = props.animation ?? {
-    type: "timing",
-    duration: 500,
-    easing: Easing.easeOutQuart,
-  };
-
-  const defaultIndexState = React.useRef<{
-    consumed: boolean;
-    requested: number;
-    resolved: number;
-    warned: boolean;
-  } | null>(null);
-
-  if (!defaultIndexState.current) {
-    if (rawData.length > 0) {
-      assertValidDefaultIndex(requestedDefaultIndex, rawData.length);
-    }
-
-    defaultIndexState.current = {
-      consumed: rawData.length > 0,
-      requested: requestedDefaultIndex,
-      resolved: rawData.length > 0 ? requestedDefaultIndex : 0,
-      warned: false,
-    };
-  } else if (!defaultIndexState.current.consumed && rawData.length > 0) {
-    const pendingIndex = defaultIndexState.current.requested;
-    defaultIndexState.current.consumed = true;
-
-    if (isValidDefaultIndex(pendingIndex, rawData.length)) {
-      defaultIndexState.current.resolved = pendingIndex;
-    } else {
-      defaultIndexState.current.resolved = 0;
-      if (__DEV__ && !defaultIndexState.current.warned) {
-        console.warn(
-          `[react-native-reanimated-carousel] Ignored defaultIndex ${pendingIndex} because it is outside the first non-empty data set.`
-        );
-        defaultIndexState.current.warned = true;
-      }
-    }
-  }
-
-  const defaultIndex = defaultIndexState.current.resolved;
-  const data = React.useMemo(
-    () =>
-      computedFillDataWithAutoFillData({
-        loop,
-        autoFillData: true,
-        data: rawData,
-        dataLength: rawData.length,
-      }),
-    [loop, rawData]
-  );
-
-  return {
-    ...props,
-    autoplay,
-    autoplayDirection,
-    autoplayInterval,
-    defaultIndex,
-    loop,
-    orientation,
-    overscrollEnabled,
-    scrollEnabled,
-    snapMode,
-    style,
-    animation,
-    data,
-    rawData,
-    dataLength: data.length,
-    rawDataLength: rawData.length,
-    autoFillData: true,
-    directionSign,
-  };
-}
-
-function validateStaticProps<Item>(props: CarouselProps<Item>) {
-  if (props.layout && props.itemAnimation) {
-    throw new Error(
-      "[react-native-reanimated-carousel] `layout` and `itemAnimation` are mutually exclusive."
-    );
-  }
-
-  if (props.itemSize !== undefined && (!Number.isFinite(props.itemSize) || props.itemSize <= 0)) {
-    throw new Error("[react-native-reanimated-carousel] itemSize must be a positive number.");
-  }
-
-  if (
-    props.autoplayInterval !== undefined &&
-    (!Number.isFinite(props.autoplayInterval) || props.autoplayInterval < 0)
-  ) {
-    throw new Error(
-      "[react-native-reanimated-carousel] autoplayInterval must be a non-negative number."
-    );
-  }
-
-  if (
-    props.renderWindowSize !== undefined &&
-    (!Number.isInteger(props.renderWindowSize) || props.renderWindowSize <= 0)
-  ) {
-    throw new Error(
-      "[react-native-reanimated-carousel] renderWindowSize must be a positive integer."
-    );
-  }
-}
-
-function isValidDefaultIndex(defaultIndex: number, dataLength: number) {
-  return Number.isInteger(defaultIndex) && defaultIndex >= 0 && defaultIndex < dataLength;
-}
-
-function assertValidDefaultIndex(defaultIndex: number, dataLength: number) {
-  if (!isValidDefaultIndex(defaultIndex, dataLength)) {
-    throw new Error(
-      `[react-native-reanimated-carousel] defaultIndex must be an integer between 0 and ${dataLength - 1}.`
-    );
-  }
-}

package/core/hooks/useLayoutConfig.ts

@@ -1,35 +0,0 @@
-import React from "react";
-
-import { Layouts } from "../layouts";
-import type { CarouselItemAnimation } from "../types";
-import type { InitializedCarouselProps } from "./useInitProps";
-
-type LayoutConfigOptions<Item> = InitializedCarouselProps<Item> & { size: number };
-
-export function useLayoutConfig<Item>(options: LayoutConfigOptions<Item>): CarouselItemAnimation {
-  const { dataLength, directionSign, layout, orientation, size } = options;
-  const isVertical = orientation === "vertical";
-
-  return React.useMemo(() => {
-    const baseConfig = { size, isVertical, directionSign };
-    switch (layout?.type) {
-      case "parallax":
-        return Layouts.parallax(baseConfig, layout);
-      case "horizontal-stack":
-        return Layouts.horizontalStack(
-          {
-            ...layout,
-            visibleCount: layout.visibleCount ?? Math.max(0, dataLength - 1),
-          },
-          directionSign
-        );
-      case "vertical-stack":
-        return Layouts.verticalStack({
-          ...layout,
-          visibleCount: layout.visibleCount ?? Math.max(0, dataLength - 1),
-        });
-      default:
-        return Layouts.normal(baseConfig);
-    }
-  }, [dataLength, directionSign, isVertical, layout, size]);
-}

package/core/hooks/useOffsetX.ts

@@ -1,81 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import { Extrapolation, interpolate, useDerivedValue } from "react-native-reanimated";
-
-import type { VisibleRangesValue } from "./useVisibleRanges";
-
-export interface OffsetOptions {
-  index: number;
-  size: number;
-  handlerOffset: SharedValue<number>;
-  dataLength: number;
-  type?: "positive" | "negative" | undefined;
-  viewCount?: number | undefined;
-  loop?: boolean | undefined;
-}
-
-export const useOffsetX = (opts: OffsetOptions, visibleRanges: VisibleRangesValue) => {
-  const {
-    handlerOffset,
-    index,
-    size,
-    loop,
-    dataLength,
-    type = "positive",
-    viewCount: _viewCount,
-  } = opts;
-
-  const ITEM_LENGTH = dataLength;
-  const VALID_LENGTH = ITEM_LENGTH - 1;
-  const TOTAL_WIDTH = size * ITEM_LENGTH;
-  const HALF_WIDTH = 0.5 * size;
-
-  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);
-  const positiveCount = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
-
-  let startPos = size * index;
-  if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;
-
-  const MAX = positiveCount * size;
-  const MIN = -((VALID_LENGTH - positiveCount) * size);
-
-  const x = useDerivedValue(() => {
-    if (!size) return 0;
-
-    const { negativeRange, positiveRange } = visibleRanges.value;
-
-    if (
-      (index >= negativeRange[0] && index <= negativeRange[1]) ||
-      (index >= positiveRange[0] && index <= positiveRange[1])
-    ) {
-      if (loop) {
-        const inputRange = [
-          -TOTAL_WIDTH,
-          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,
-          MIN - HALF_WIDTH - startPos,
-          0,
-          MAX + HALF_WIDTH - startPos,
-          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,
-          TOTAL_WIDTH,
-        ];
-
-        const outputRange = [
-          startPos,
-          MAX + HALF_WIDTH - Number.MIN_VALUE,
-          MIN - HALF_WIDTH,
-          startPos,
-          MAX + HALF_WIDTH,
-          MIN - HALF_WIDTH + Number.MIN_VALUE,
-          startPos,
-        ];
-
-        return interpolate(handlerOffset.value, inputRange, outputRange, Extrapolation.CLAMP);
-      }
-
-      return handlerOffset.value + size * index;
-    }
-
-    return Number.MAX_SAFE_INTEGER;
-  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);
-
-  return x;
-};

package/core/hooks/useOnProgressChange.ts

@@ -1,33 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-
-import type { CarouselProgressChangeHandler } from "../types";
-import { getLogicalProgress } from "../utils/carousel-math";
-
-export function useOnProgressChange(options: {
-  loop: boolean;
-  offset: SharedValue<number>;
-  onProgressChange?: CarouselProgressChangeHandler | undefined;
-  progress?: SharedValue<number> | undefined;
-  rawDataLength: number;
-  size: number;
-  sizeReady: SharedValue<boolean>;
-}) {
-  const { loop, offset, onProgressChange, progress, rawDataLength, size, sizeReady } = options;
-
-  useAnimatedReaction(
-    () => {
-      if (!sizeReady.value || size <= 0 || rawDataLength <= 0) return null;
-
-      const logicalProgress = getLogicalProgress(offset.value, size);
-      return loop ? logicalProgress : Math.max(0, Math.min(rawDataLength - 1, logicalProgress));
-    },
-    (nextProgress) => {
-      if (nextProgress == null) return;
-      if (progress) progress.value = nextProgress;
-      if (onProgressChange) scheduleOnRN(onProgressChange, nextProgress);
-    },
-    [loop, offset, onProgressChange, progress, rawDataLength, size, sizeReady]
-  );
-}

package/core/hooks/usePanGestureProxy.ts

@@ -1,144 +0,0 @@
-import { useMemo } from "react";
-import type {
-  GestureStateChangeEvent,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from "react-native-gesture-handler";
-import { Gesture } from "react-native-gesture-handler";
-
-import type { CarouselPanGesture } from "../types";
-import type { GestureConfig } from "./useUpdateGestureConfig";
-import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
-
-export const usePanGestureProxy = (customization: {
-  onConfigurePanGesture?: ((gesture: CarouselPanGesture) => void) | undefined;
-  onGestureStart: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
-  onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
-  onGestureEnd: (
-    event: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
-    success: boolean
-  ) => void;
-  options?: GestureConfig | undefined;
-}) => {
-  const {
-    onConfigurePanGesture,
-    onGestureStart,
-    onGestureUpdate,
-    onGestureEnd,
-    options = {},
-  } = customization;
-
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan().withTestId("rnrc-gesture-handler");
-
-    // Save the original gesture callbacks
-    const originalGestures = {
-      onBegin: gesture.onBegin,
-      onStart: gesture.onStart,
-      onUpdate: gesture.onUpdate,
-      onEnd: gesture.onEnd,
-      onFinalize: gesture.onFinalize,
-    };
-
-    // Save the user defined gesture callbacks
-    const userDefinedConflictGestures: {
-      onBegin: Parameters<(typeof gesture)["onBegin"]>[0] | undefined;
-      onStart: Parameters<(typeof gesture)["onStart"]>[0] | undefined;
-      onUpdate: Parameters<(typeof gesture)["onUpdate"]>[0] | undefined;
-      onEnd: Parameters<(typeof gesture)["onEnd"]>[0] | undefined;
-      onFinalize: Parameters<(typeof gesture)["onFinalize"]>[0] | undefined;
-    } = {
-      onBegin: undefined,
-      onStart: undefined,
-      onUpdate: undefined,
-      onEnd: undefined,
-      onFinalize: undefined,
-    };
-
-    const fakeOnBegin: typeof gesture.onBegin = (cb) => {
-      // Using fakeOnBegin to save the user defined callback
-      userDefinedConflictGestures.onBegin = cb;
-      return gesture;
-    };
-
-    const fakeOnStart: typeof gesture.onStart = (cb) => {
-      // Using fakeOnStart to save the user defined callback
-      userDefinedConflictGestures.onStart = cb;
-      return gesture;
-    };
-
-    const fakeOnUpdate: typeof gesture.onUpdate = (cb) => {
-      // Using fakeOnUpdate to save the user defined callback
-      userDefinedConflictGestures.onUpdate = cb;
-      return gesture;
-    };
-
-    const fakeOnEnd: typeof gesture.onEnd = (cb) => {
-      // Using fakeOnEnd to save the user defined callback
-      userDefinedConflictGestures.onEnd = cb;
-      return gesture;
-    };
-
-    const fakeOnFinalize: typeof gesture.onFinalize = (cb) => {
-      // Using fakeOnFinalize to save the user defined callback
-      userDefinedConflictGestures.onFinalize = cb;
-      return gesture;
-    };
-
-    // Setup the fake callbacks
-    gesture.onBegin = fakeOnBegin;
-    gesture.onStart = fakeOnStart;
-    gesture.onUpdate = fakeOnUpdate;
-    gesture.onEnd = fakeOnEnd;
-    gesture.onFinalize = fakeOnFinalize;
-
-    if (onConfigurePanGesture)
-      // Get the gesture with the user defined configuration
-      onConfigurePanGesture(gesture);
-
-    // Restore the original callbacks
-    gesture.onBegin = originalGestures.onBegin;
-    gesture.onStart = originalGestures.onStart;
-    gesture.onUpdate = originalGestures.onUpdate;
-    gesture.onEnd = originalGestures.onEnd;
-    gesture.onFinalize = originalGestures.onFinalize;
-
-    // Setup the original callbacks with the user defined callbacks
-    gesture
-      .onBegin((e) => {
-        "worklet";
-
-        if (userDefinedConflictGestures.onBegin) userDefinedConflictGestures.onBegin(e);
-      })
-      .onStart((e) => {
-        "worklet";
-        onGestureStart(e);
-
-        if (userDefinedConflictGestures.onStart) userDefinedConflictGestures.onStart(e);
-      })
-      .onUpdate((e) => {
-        "worklet";
-        onGestureUpdate(e);
-
-        if (userDefinedConflictGestures.onUpdate) userDefinedConflictGestures.onUpdate(e);
-      })
-      .onEnd((e, success) => {
-        "worklet";
-        onGestureEnd(e, success);
-
-        if (userDefinedConflictGestures.onEnd) userDefinedConflictGestures.onEnd(e, success);
-      })
-      .onFinalize((e, success) => {
-        "worklet";
-
-        if (userDefinedConflictGestures.onFinalize)
-          userDefinedConflictGestures.onFinalize(e, success);
-      });
-
-    return gesture;
-  }, [onGestureStart, onGestureUpdate, onGestureEnd, onConfigurePanGesture]);
-
-  useUpdateGestureConfig(gesture, options);
-
-  return gesture;
-};

package/core/hooks/usePropsErrorBoundary.ts

@@ -1,41 +0,0 @@
-import React from "react";
-import { type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-
-import type { InitializedCarouselProps } from "./useInitProps";
-
-export function usePropsErrorBoundary(props: InitializedCarouselProps<unknown>) {
-  const warned = React.useRef({
-    contentStyle: false,
-    missingMainAxisSize: false,
-  });
-
-  React.useEffect(() => {
-    if (!__DEV__) return;
-
-    const { contentContainerStyle, orientation, style } = props;
-    const flattenedContentStyle =
-      StyleSheet.flatten(contentContainerStyle as StyleProp<ViewStyle>) || {};
-    if (
-      (flattenedContentStyle.opacity !== undefined ||
-        flattenedContentStyle.transform !== undefined) &&
-      !warned.current.contentStyle
-    ) {
-      console.warn(
-        "[react-native-reanimated-carousel] `contentContainerStyle` cannot set `opacity` or `transform`; those fields are owned by Carousel and were ignored."
-      );
-      warned.current.contentStyle = true;
-    }
-
-    const flattenedStyle = StyleSheet.flatten(style) || {};
-    const mainAxisSize = orientation === "vertical" ? flattenedStyle.height : flattenedStyle.width;
-    const hasFlexibleSize =
-      (typeof flattenedStyle.flex === "number" && flattenedStyle.flex > 0) ||
-      mainAxisSize !== undefined;
-    if (!hasFlexibleSize && !warned.current.missingMainAxisSize) {
-      console.warn(
-        `[react-native-reanimated-carousel] ${orientation} Carousel has no main-axis size in \`style\`; automatic layout measurement will be used.`
-      );
-      warned.current.missingMainAxisSize = true;
-    }
-  }, [props]);
-}

package/core/hooks/useUpdateGestureConfig.ts

@@ -1,17 +0,0 @@
-import { useEffect } from "react";
-
-export interface GestureConfig {
-  enabled?: boolean | undefined;
-}
-
-type ConfigurablePanGesture = {
-  enabled(enabled: boolean): unknown;
-};
-
-export const useUpdateGestureConfig = (gesture: ConfigurablePanGesture, config: GestureConfig) => {
-  const { enabled } = config;
-
-  useEffect(() => {
-    if (typeof enabled !== "undefined") gesture.enabled(enabled);
-  }, [enabled, gesture]);
-};

package/core/hooks/useVisibleRanges.tsx

@@ -1,141 +0,0 @@
-import { useRef } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { useDerivedValue } from "react-native-reanimated";
-
-type Range = [number, number];
-
-export interface VisibleRanges {
-  negativeRange: Range;
-  positiveRange: Range;
-}
-
-export type VisibleRangesValue = SharedValue<VisibleRanges>;
-
-function normalizeWindowSize(total: number, windowSize?: number) {
-  "worklet";
-
-  return typeof windowSize === "number" && Number.isFinite(windowSize) && windowSize > 0
-    ? windowSize
-    : total;
-}
-
-function normalizeLoopIndex(currentIndex: number, total: number) {
-  "worklet";
-
-  return currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
-}
-
-export function computeVisibleRanges(params: {
-  total: number;
-  windowSize?: number | undefined;
-  currentIndex: number;
-  loop?: boolean | undefined;
-}): VisibleRanges {
-  "worklet";
-
-  const { total = 0, loop } = params;
-  const windowSize = normalizeWindowSize(total, params.windowSize);
-
-  if (total <= 0) {
-    return {
-      negativeRange: [0, 0],
-      positiveRange: [0, -1],
-    };
-  }
-
-  if (loop && windowSize >= total) {
-    return {
-      negativeRange: [0, 0],
-      positiveRange: [0, total - 1],
-    };
-  }
-
-  const positiveCount = Math.round(windowSize / 2);
-  const negativeCount = windowSize - positiveCount;
-
-  let currentIndex = params.currentIndex;
-  if (!Number.isFinite(currentIndex)) currentIndex = 0;
-
-  if (!loop) {
-    currentIndex = Math.max(0, Math.min(total - 1, currentIndex));
-    return {
-      negativeRange: [Math.max(0, currentIndex - (windowSize - 1)), currentIndex],
-      positiveRange: [currentIndex, Math.min(total - 1, currentIndex + (windowSize - 1))],
-    };
-  }
-
-  currentIndex = normalizeLoopIndex(currentIndex, total);
-
-  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;
-  }
-
-  return { negativeRange, positiveRange };
-}
-
-export function useVisibleRanges(options: {
-  total: number;
-  viewSize: number;
-  windowSize?: number | undefined;
-  translation: SharedValue<number>;
-  loop?: boolean | undefined;
-}): VisibleRangesValue {
-  const { total = 0, viewSize, translation, windowSize: _windowSize, loop } = options;
-
-  const windowSize = normalizeWindowSize(total, _windowSize);
-  const cachedRanges = useRef<VisibleRanges | null>(null);
-
-  const ranges = useDerivedValue(() => {
-    if (total <= 0) {
-      return computeVisibleRanges({ total, currentIndex: 0, windowSize, loop });
-    }
-
-    // Prevent division by zero when viewSize is not yet measured
-    if (!Number.isFinite(viewSize) || viewSize <= 0) {
-      return {
-        negativeRange: [0, 0] as Range,
-        positiveRange: [0, Math.min(total - 1, windowSize - 1)] as Range,
-      };
-    }
-
-    let currentIndex = Math.round(-translation.value / viewSize);
-    if (!Number.isFinite(currentIndex)) currentIndex = 0;
-
-    const newRanges = computeVisibleRanges({ total, windowSize, currentIndex, loop });
-
-    if (
-      cachedRanges.current &&
-      isArraysEqual(cachedRanges.current.negativeRange, newRanges.negativeRange) &&
-      isArraysEqual(cachedRanges.current.positiveRange, newRanges.positiveRange)
-    ) {
-      return cachedRanges.current;
-    }
-
-    cachedRanges.current = newRanges;
-    return newRanges;
-  }, [loop, total, windowSize, translation, viewSize]);
-
-  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/core/layouts/index.tsx

@@ -1,10 +0,0 @@
-import { normalLayout } from "./normal";
-import { parallaxLayout } from "./parallax";
-import { horizontalStackLayout, verticalStackLayout } from "./stack";
-
-export const Layouts = {
-  normal: normalLayout,
-  parallax: parallaxLayout,
-  horizontalStack: horizontalStackLayout,
-  verticalStack: verticalStackLayout,
-};