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

package/core/layouts/normal.ts

@@ -1,32 +0,0 @@
-import { interpolate } from "react-native-reanimated";
-
-import type { CarouselDirectionSign } from "../utils/carousel-direction";
-import { toPhysicalHorizontalValue } from "../utils/carousel-direction";
-
-export function normalLayout(opts: {
-  size: number;
-  isVertical: boolean;
-  directionSign: CarouselDirectionSign;
-}) {
-  const { size, isVertical, directionSign } = opts;
-
-  return (value: number) => {
-    "worklet";
-    const logicalTranslate = interpolate(value, [-1, 0, 1], [-size, 0, size]);
-    const translate = isVertical
-      ? logicalTranslate
-      : toPhysicalHorizontalValue(logicalTranslate, directionSign);
-
-    return {
-      transform: [
-        isVertical
-          ? {
-              translateY: translate,
-            }
-          : {
-              translateX: translate,
-            },
-      ],
-    };
-  };
-}

package/core/layouts/parallax.ts

@@ -1,50 +0,0 @@
-import { Extrapolation, interpolate } from "react-native-reanimated";
-
-import type { CarouselLayout } from "../types";
-import type { CarouselDirectionSign } from "../utils/carousel-direction";
-import { toPhysicalHorizontalValue } from "../utils/carousel-direction";
-
-type ParallaxLayout = Extract<CarouselLayout, { type: "parallax" }>;
-
-export function parallaxLayout(
-  baseConfig: {
-    size: number;
-    isVertical: boolean;
-    directionSign: CarouselDirectionSign;
-  },
-  config: ParallaxLayout
-) {
-  const { size, isVertical, directionSign } = baseConfig;
-  const { offset = 100, scale = 0.8, adjacentScale = scale ** 2 } = config;
-
-  return (relativeProgress: number) => {
-    "worklet";
-    const logicalTranslate = interpolate(
-      relativeProgress,
-      [-1, 0, 1],
-      [-size + offset, 0, size - offset]
-    );
-    const translate = isVertical
-      ? logicalTranslate
-      : toPhysicalHorizontalValue(logicalTranslate, directionSign);
-
-    const zIndex = Math.round(
-      interpolate(relativeProgress, [-1, 0, 1], [0, size, 0], Extrapolation.CLAMP)
-    );
-
-    const animatedScale = interpolate(
-      relativeProgress,
-      [-1, 0, 1],
-      [adjacentScale, scale, adjacentScale],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      transform: [
-        isVertical ? { translateY: translate } : { translateX: translate },
-        { scale: animatedScale },
-      ],
-      zIndex,
-    };
-  };
-}

package/core/layouts/stack.ts

@@ -1,266 +0,0 @@
-import type { TransformsStyle, ViewStyle } from "react-native";
-import { Dimensions } from "react-native";
-import { Extrapolation, interpolate } from "react-native-reanimated";
-
-import type { CarouselLayout } from "../types";
-import type { CarouselDirectionSign } from "../utils/carousel-direction";
-import { toPhysicalHorizontalValue } from "../utils/carousel-direction";
-
-const screen = Dimensions.get("window");
-
-type StackLayout = Extract<CarouselLayout, { type: "horizontal-stack" | "vertical-stack" }>;
-
-export function horizontalStackLayout(
-  config: StackLayout,
-  directionSign: CarouselDirectionSign = 1
-) {
-  return (_value: number) => {
-    "worklet";
-
-    const {
-      visibleCount,
-      exitDirection: snapDirection = "left",
-      exitDistance: moveSize = screen.width,
-      spacing: stackInterval = 18,
-      scaleStep: scaleInterval = 0.04,
-      opacityStep: opacityInterval = 0.1,
-      rotation: rotateZDeg = 30,
-    } = config;
-
-    const physicalProgress = toPhysicalHorizontalValue(_value, directionSign);
-    const { validLength, value, inputRange } = getCommonVariables({
-      showLength: visibleCount!,
-      value: physicalProgress,
-      snapDirection,
-    });
-    const { zIndex, opacity } = getCommonStyles({
-      validLength,
-      value,
-      opacityInterval,
-      snapDirection,
-    });
-
-    let translateX: number;
-    let scale: number;
-    let rotateZ: string;
-
-    if (snapDirection === "left") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [-moveSize, 0, validLength * stackInterval],
-        Extrapolation.CLAMP
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1, 1, 1 - validLength * scaleInterval],
-        Extrapolation.CLAMP
-      );
-      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;
-    } else if (snapDirection === "right") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [-validLength * stackInterval, 0, moveSize],
-        Extrapolation.CLAMP
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1 - validLength * scaleInterval, 1, 1],
-        Extrapolation.CLAMP
-      );
-      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
-    }
-
-    const transform: TransformsStyle["transform"] = [
-      {
-        translateX: translateX!,
-      },
-      {
-        scale: scale!,
-      },
-      {
-        rotateZ: rotateZ!,
-      },
-    ];
-
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
-    return styles;
-  };
-}
-
-export function verticalStackLayout(config: StackLayout) {
-  return (_value: number) => {
-    "worklet";
-
-    const {
-      visibleCount,
-      exitDirection: snapDirection = "left",
-      exitDistance: moveSize = screen.width,
-      spacing: stackInterval = 18,
-      scaleStep: scaleInterval = 0.04,
-      opacityStep: opacityInterval = 0.1,
-      rotation: rotateZDeg = 30,
-    } = config;
-
-    const { validLength, value, inputRange } = getCommonVariables({
-      showLength: visibleCount!,
-      value: _value,
-      snapDirection,
-    });
-    const { zIndex, opacity } = getCommonStyles({
-      validLength,
-      value,
-      opacityInterval,
-      snapDirection,
-    });
-
-    let translateX: number;
-    let scale: number;
-    let rotateZ: string;
-    let translateY: number;
-
-    if (snapDirection === "left") {
-      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);
-      scale = interpolate(
-        value,
-        inputRange,
-        [1, 1, 1 - validLength * scaleInterval],
-        Extrapolation.CLAMP
-      );
-      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;
-      translateY = interpolate(
-        value,
-        inputRange,
-        [0, 0, validLength * stackInterval],
-        Extrapolation.CLAMP
-      );
-    } else if (snapDirection === "right") {
-      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);
-      scale = interpolate(
-        value,
-        inputRange,
-        [1 - validLength * scaleInterval, 1, 1],
-        Extrapolation.CLAMP
-      );
-      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
-      translateY = interpolate(
-        value,
-        inputRange,
-        [validLength * stackInterval, 0, 0],
-        Extrapolation.CLAMP
-      );
-    }
-
-    const transform: TransformsStyle["transform"] = [
-      {
-        translateX: translateX!,
-      },
-      {
-        scale: scale!,
-      },
-      {
-        rotateZ: rotateZ!,
-      },
-      {
-        translateY: translateY!,
-      },
-    ];
-
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
-    return styles;
-  };
-}
-
-function getCommonVariables(opts: {
-  value: number;
-  showLength: number;
-  snapDirection: "left" | "right";
-}) {
-  "worklet";
-
-  const { showLength, value: _value, snapDirection } = opts;
-  function easeInOutCubic(v: number): number {
-    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;
-  }
-  const page = Math.floor(Math.abs(_value));
-  const diff = Math.abs(_value) % 1;
-  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);
-  const validLength = showLength! - 1;
-
-  let inputRange: [number, number, number];
-
-  if (snapDirection === "left") inputRange = [-1, 0, validLength];
-  else if (snapDirection === "right") inputRange = [-validLength, 0, 1];
-  else throw new Error("snapDirection must be set to either left or right");
-
-  return {
-    inputRange,
-    validLength,
-    value,
-  };
-}
-
-function getCommonStyles(opts: {
-  value: number;
-  validLength: number;
-  opacityInterval: number;
-  snapDirection: "left" | "right";
-}) {
-  "worklet";
-
-  const { snapDirection, validLength, value, opacityInterval } = opts;
-
-  let zIndex: number;
-  let opacity: number;
-
-  if (snapDirection === "left") {
-    zIndex =
-      Math.floor(
-        interpolate(
-          value,
-          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],
-          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]
-        ) * 10000
-      ) / 100;
-
-    opacity = interpolate(
-      value,
-      [-1, 0, validLength - 1, validLength],
-      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]
-    );
-  } else if (snapDirection === "right") {
-    zIndex =
-      Math.floor(
-        interpolate(
-          value,
-          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],
-          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]
-        ) * 10000
-      ) / 100;
-    opacity = interpolate(
-      value,
-      [-validLength, 1 - validLength, 0, 1],
-      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]
-    );
-  } else {
-    throw new Error("snapDirection must be set to either left or right");
-  }
-
-  return {
-    zIndex: Math.round(zIndex),
-    opacity,
-  };
-}

package/core/public-types.ts

@@ -1,209 +0,0 @@
-import type * as React from "react";
-import type { ColorValue, LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
-import type {
-  GestureStateChangeEvent,
-  GestureType,
-  GestureUpdateEvent,
-  MouseButton,
-  PanGesture,
-  PanGestureChangeEventPayload,
-  PanGestureHandlerEventPayload,
-  PanGestureHandlerProps,
-} from "react-native-gesture-handler";
-import type { SharedValue, WithSpringConfig, WithTimingConfig } from "react-native-reanimated";
-
-type CarouselOrientation = "horizontal" | "vertical";
-type CarouselSnapMode = "page" | "nearest" | "none";
-type CarouselAutoplayDirection = "forward" | "backward";
-type CarouselExitDirection = "left" | "right";
-
-type CarouselContentContainerStyle = Omit<ViewStyle, "opacity" | "transform">;
-
-type CarouselExternalGestureRef =
-  | GestureType
-  | React.RefObject<GestureType | undefined>
-  | React.RefObject<React.ComponentType | undefined>;
-
-type CarouselPanStateEvent = GestureStateChangeEvent<PanGestureHandlerEventPayload>;
-type CarouselPanUpdateEvent = GestureUpdateEvent<PanGestureHandlerEventPayload>;
-type CarouselPanChangeEvent = GestureUpdateEvent<
-  PanGestureHandlerEventPayload & PanGestureChangeEventPayload
->;
-
-type CarouselLayoutSelection =
-  | {
-      layout?: CarouselLayout;
-      itemAnimation?: never;
-    }
-  | {
-      layout?: never;
-      itemAnimation: CarouselItemAnimation;
-    };
-
-type InteractivePaginationProps = {
-  onPress: (index: number) => void;
-  getItemAccessibilityLabel?: (index: number, count: number) => string;
-};
-
-type DecorativePaginationProps = {
-  onPress?: never;
-  getItemAccessibilityLabel?: never;
-};
-
-type ReadonlyProgressValue = Omit<SharedValue<number>, "modify" | "set" | "value"> & {
-  readonly value: number;
-};
-
-type PaginationBaseProps = {
-  count: number;
-  progress: ReadonlyProgressValue;
-  orientation?: CarouselOrientation;
-  containerStyle?: StyleProp<Omit<ViewStyle, "direction" | "flexDirection">>;
-  dotStyle?: PaginationDotStyle;
-  activeDotStyle?: PaginationDotStyle;
-};
-
-export type CarouselProps<Item> = {
-  data: Item[];
-  renderItem: CarouselRenderItem<Item>;
-  keyExtractor?: (item: Item, index: number) => string;
-  defaultIndex?: number;
-  loop?: boolean;
-  autoplay?: boolean;
-  autoplayInterval?: number;
-  autoplayDirection?: CarouselAutoplayDirection;
-  orientation?: CarouselOrientation;
-  itemSize?: number;
-  scrollEnabled?: boolean;
-  snapMode?: CarouselSnapMode;
-  overscrollEnabled?: boolean;
-  renderWindowSize?: number;
-  animation?: CarouselAnimation;
-  progress?: SharedValue<number>;
-  onProgressChange?: CarouselProgressChangeHandler;
-  scrollOffsetValue?: SharedValue<number>;
-  style?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<CarouselContentContainerStyle>;
-  testID?: string;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  onConfigurePanGesture?: (gesture: CarouselPanGesture) => void;
-  onScrollStart?: () => void;
-  onSnapToItem?: (index: number) => void;
-} & CarouselLayoutSelection;
-
-export interface CarouselRef {
-  prev(options?: CarouselStepOptions): void;
-  next(options?: CarouselStepOptions): void;
-  getCurrentIndex(): number;
-  scrollTo(options: CarouselScrollToOptions): void;
-}
-
-export type CarouselRenderItem<Item> = (info: CarouselRenderItemInfo<Item>) => React.ReactElement;
-
-export interface CarouselRenderItemInfo<Item> {
-  item: Item;
-  index: number;
-  relativeProgress: SharedValue<number>;
-}
-
-export type CarouselProgressChangeHandler = (progress: number) => void;
-
-export type CarouselLayout =
-  | {
-      type: "parallax";
-      offset?: number;
-      scale?: number;
-      adjacentScale?: number;
-    }
-  | {
-      type: "horizontal-stack";
-      visibleCount?: number;
-      exitDistance?: number;
-      spacing?: number;
-      scaleStep?: number;
-      opacityStep?: number;
-      rotation?: number;
-      exitDirection?: CarouselExitDirection;
-    }
-  | {
-      type: "vertical-stack";
-      visibleCount?: number;
-      exitDistance?: number;
-      spacing?: number;
-      scaleStep?: number;
-      opacityStep?: number;
-      rotation?: number;
-      exitDirection?: CarouselExitDirection;
-    };
-
-export type CarouselAnimation =
-  | ({ type: "timing" } & WithTimingConfig)
-  | ({ type: "spring" } & WithSpringConfig);
-
-export type CarouselItemAnimation = (relativeProgress: number, index: number) => ViewStyle;
-
-/**
- * Supported configuration surface for Carousel's real RNGH pan gesture.
- *
- * Methods return this facade so chaining never exposes ownership-changing RNGH
- * methods such as `enabled`, `runOnJS`, or `manualActivation`.
- */
-export interface CarouselPanGesture {
-  /**
-   * Controlled view of the underlying RNGH pan gesture configuration.
-   *
-   * Exposes the web-only `touchAction` option (e.g. `"pan-y"` so a
-   * horizontal carousel nested in a vertically scrollable page keeps native
-   * vertical scrolling on mobile web) without casting away the facade.
-   * Ownership-changing options such as `enabled`, `runOnJS`, or
-   * `manualActivation` intentionally stay hidden.
-   */
-  readonly config: Pick<PanGesture["config"], "touchAction">;
-  activeOffsetX(offset: number | [start: number, end: number]): this;
-  activeOffsetY(offset: number | [start: number, end: number]): this;
-  failOffsetX(offset: number | [start: number, end: number]): this;
-  failOffsetY(offset: number | [start: number, end: number]): this;
-  minPointers(count: number): this;
-  maxPointers(count: number): this;
-  minDistance(distance: number): this;
-  minVelocity(velocity: number): this;
-  minVelocityX(velocity: number): this;
-  minVelocityY(velocity: number): this;
-  averageTouches(value: boolean): this;
-  enableTrackpadTwoFingerGesture(value: boolean): this;
-  activateAfterLongPress(duration: number): this;
-  hitSlop(value: PanGestureHandlerProps["hitSlop"]): this;
-  mouseButton(button: MouseButton): this;
-  simultaneousWithExternalGesture(...gestures: CarouselExternalGestureRef[]): this;
-  requireExternalGestureToFail(...gestures: CarouselExternalGestureRef[]): this;
-  blocksExternalGesture(...gestures: CarouselExternalGestureRef[]): this;
-  onBegin(callback: (event: CarouselPanStateEvent) => void): this;
-  onStart(callback: (event: CarouselPanStateEvent) => void): this;
-  onUpdate(callback: (event: CarouselPanUpdateEvent) => void): this;
-  onChange(callback: (event: CarouselPanChangeEvent) => void): this;
-  onEnd(callback: (event: CarouselPanStateEvent, success: boolean) => void): this;
-  onFinalize(callback: (event: CarouselPanStateEvent, success: boolean) => void): this;
-}
-
-export interface CarouselStepOptions {
-  count?: number;
-  animated?: boolean;
-}
-
-export interface CarouselScrollToOptions {
-  index: number;
-  animated?: boolean;
-}
-
-export type PaginationProps = PaginationBaseProps &
-  (InteractivePaginationProps | DecorativePaginationProps);
-
-export interface PaginationDotStyle {
-  width?: number;
-  height?: number;
-  borderRadius?: number;
-  borderWidth?: number;
-  borderColor?: ColorValue;
-  backgroundColor?: ColorValue;
-  opacity?: number;
-}

package/core/store/index.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { type SharedValue, useSharedValue } from "react-native-reanimated";
-import type { CarouselCommonVariables } from "../hooks/useCommonVariables";
-import type { InitializedCarouselProps } from "../hooks/useInitProps";
-
-type ItemDimensions = Record<number, { width: number; height: number }>;
-
-export interface CarouselContext {
-  props: InitializedCarouselProps<unknown>;
-  common: CarouselCommonVariables;
-  layout: {
-    containerSize: SharedValue<{ width: number; height: number }>;
-    updateContainerSize: (dimensions: { width: number; height: number }) => void;
-    itemDimensions: SharedValue<ItemDimensions>;
-    updateItemDimensions: (index: number, dimensions: { width: number; height: number }) => void;
-  };
-}
-
-export const GlobalStateContext = React.createContext<CarouselContext>({} as CarouselContext);
-
-export const GlobalStateProvider = ({
-  children,
-  value,
-}: {
-  children: React.ReactNode;
-  value: Pick<CarouselContext, "props" | "common">;
-}) => {
-  const containerSize = useSharedValue<{ width: number; height: number }>({ width: 0, height: 0 });
-  const itemDimensions = useSharedValue<ItemDimensions>({});
-
-  const updateItemDimensions = (index: number, dimensions: { width: number; height: number }) => {
-    "worklet";
-
-    itemDimensions.value = { ...itemDimensions.value, [index]: dimensions };
-  };
-
-  const updateContainerSize = (dimensions: { width: number; height: number }) => {
-    "worklet";
-    containerSize.value = dimensions;
-  };
-
-  return (
-    <GlobalStateContext.Provider
-      value={{
-        ...value,
-        layout: { containerSize, itemDimensions, updateItemDimensions, updateContainerSize },
-      }}
-    >
-      {children}
-    </GlobalStateContext.Provider>
-  );
-};
-
-export const useGlobalState = () => {
-  const context = React.useContext(GlobalStateContext);
-
-  if (!context) {
-    throw new Error("useGlobalState must be used within a GlobalStateProvider");
-  }
-
-  return context;
-};

package/core/types.ts

@@ -1,32 +0,0 @@
-import type { CarouselProps, CarouselScrollToOptions, CarouselStepOptions } from "./public-types";
-
-export type {
-  CarouselAnimation,
-  CarouselItemAnimation,
-  CarouselLayout,
-  CarouselPanGesture,
-  CarouselProgressChangeHandler,
-  CarouselProps,
-  CarouselRef,
-  CarouselRenderItem,
-  CarouselRenderItemInfo,
-  CarouselScrollToOptions,
-  CarouselStepOptions,
-  PaginationDotStyle,
-  PaginationProps,
-} from "./public-types";
-
-/**
- * Internal command options retain a completion hook so autoplay can schedule
- * the next dwell period after a transition settles. This is never exported
- * from the package root.
- */
-export type InternalCarouselStepOptions = CarouselStepOptions & {
-  onFinished?: () => void;
-};
-
-export type InternalCarouselScrollToOptions = CarouselScrollToOptions & {
-  onFinished?: () => void;
-};
-
-export type InternalCarouselProps<Item> = CarouselProps<Item>;

package/core/utils/carousel-direction.ts

@@ -1,39 +0,0 @@
-export type CarouselDirectionSign = -1 | 1;
-
-export function getCarouselDirectionSign(options: {
-  isRTL: boolean;
-  orientation: "horizontal" | "vertical";
-}): CarouselDirectionSign {
-  "worklet";
-
-  return options.orientation === "horizontal" && options.isRTL ? -1 : 1;
-}
-
-export function toLogicalGestureValue(
-  physicalValue: number,
-  directionSign: CarouselDirectionSign
-): number {
-  "worklet";
-
-  return physicalValue * directionSign;
-}
-
-export function toPhysicalHorizontalValue(
-  logicalValue: number,
-  directionSign: CarouselDirectionSign
-): number {
-  "worklet";
-
-  return logicalValue * directionSign;
-}
-
-export function getHorizontalStackOffsetType(
-  exitDirection: "left" | "right",
-  directionSign: CarouselDirectionSign
-): "positive" | "negative" {
-  "worklet";
-
-  const ltrType = exitDirection === "right" ? "negative" : "positive";
-  if (directionSign === 1) return ltrType;
-  return ltrType === "positive" ? "negative" : "positive";
-}