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

package/package.json

@@ -1,18 +1,19 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.165.2-beta.1",
+    "version": "0.165.2-beta.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {
         "@momo-kits/foundation": "latest",
         "react": "*",
-        "react-native": "*"
+        "react-native": "*",
+        "react-native-gesture-handler": "2.30.0",
+        "react-native-reanimated": "4.1.3",
+        "react-native-worklets": "0.6.1"
     },
     "license": "MoMo",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
-    "dependencies": {
-        "moment": "^2.24.0"
-    }
+    "dependencies": {}
 }

package/types.ts

@@ -1,71 +1,146 @@
-import {
-  Animated,
+import type { ReactNode } from 'react';
+import type {
   NativeScrollEvent,
   NativeSyntheticEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 
-export type CarouselProps = {
-  activeSlideOffset?: number;
-  apparitionDelay?: number;
-  autoplay?: boolean;
-  autoplayDelay?: number;
-  autoplayInterval?: number;
-  enableSnap?: boolean;
+import type {
+  CarouselItemAnimation,
+  CarouselLayout,
+  CarouselProps as CoreCarouselProps,
+  CarouselRef as CoreCarouselRef,
+} from './core/public-types';
+
+export type {
+  CarouselAnimation,
+  CarouselItemAnimation,
+  CarouselLayout,
+  CarouselPanGesture,
+  CarouselProgressChangeHandler,
+  CarouselRenderItem,
+  CarouselRenderItemInfo,
+  CarouselScrollToOptions,
+  CarouselStepOptions,
+} from './core/public-types';
+
+/**
+ * Engine props minus the three the compatibility layer widens: `renderItem`
+ * accepts a `ReactNode`, and `layout`/`itemAnimation` lose their compile-time
+ * exclusivity (the engine still throws at runtime when both are passed).
+ */
+type EngineProps<Item> = Omit<
+  CoreCarouselProps<Item>,
+  'renderItem' | 'layout' | 'itemAnimation'
+>;
+
+/**
+ * Props from the FlatList-based carousel. They keep working so call sites can
+ * upgrade by bumping the version alone, but new code should prefer the engine
+ * props they map onto.
+ */
+type LegacyProps = {
+  /** @deprecated Use `defaultIndex`. */
   firstItem?: number;
+  /** @deprecated Use `itemSize`. */
+  itemWidth?: number;
+  /** @deprecated Use `itemSize` — this divides the container by `visibleItem`. */
+  visibleItem?: number;
+  /** @deprecated Item fills the container, which is the default. */
+  full?: boolean;
+  /**
+   * @deprecated Use `snapMode` — `false` maps to `"none"`. Free scrolling
+   * decelerates on the gesture handler's curve rather than the platform's.
+   */
+  enableSnap?: boolean;
+  /** @deprecated Delay before autoplay starts. No engine equivalent. */
+  autoplayDelay?: number;
+  /** @deprecated Use `layout` or `itemAnimation`. */
   inactiveSlideOpacity?: number;
+  /** @deprecated Use `layout` or `itemAnimation`. */
   inactiveSlideScale?: number;
-  loop?: boolean;
-  loopClonesPerSide?: number;
-  scrollEnabled?: boolean;
+  /** @deprecated Delay before the carousel becomes visible. */
+  apparitionDelay?: number;
+  /**
+   * @deprecated Ignored — it was already unused by the FlatList implementation.
+   * Set a gesture threshold with `onConfigurePanGesture` + `activeOffsetX`.
+   */
+  activeSlideOffset?: number;
+  /** @deprecated Style each item inside `renderItem` instead. */
   slideStyle?: StyleProp<ViewStyle>;
-  disableIntervalMomentum?: boolean;
-  itemWidth?: number;
-  data: any[];
-  renderItem: (info: { item: any; index: number }) => React.ReactNode;
-  onScroll?: any;
+  /** @deprecated Use `onProgressChange` or `progress`. */
   onScrollIndexChanged?: (index: number) => void;
-  onSnapToItem?: (index: number) => void;
-  onTouchStart?: (event: any) => void;
-  onTouchEnd?: (event: any) => void;
-  onMomentumScrollEnd?: (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => void;
-  onLayout?: (event: any) => void;
-  keyExtractor?: (item: any, index: number) => string;
+  /**
+   * @deprecated Use `onProgressChange`.
+   *
+   * Only `nativeEvent.contentOffset.x` is filled in, as it was by the FlatList
+   * implementation. With `loop` the origin differs: the offset is now relative
+   * to the first item and may go negative, where it used to count from the
+   * leading clones.
+   */
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * @deprecated Ignored. It used to carry a real momentum event from the
+   * underlying ScrollView; there is no ScrollView and no momentum phase left to
+   * report. Use `onSnapToItem` for the settled index.
+   */
+  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  /**
+   * @deprecated Use `onConfigurePanGesture` with `onBegin`.
+   *
+   * Called with no argument — the pan gesture has no `GestureResponderEvent`.
+   */
+  onTouchStart?: (event?: any) => void;
+  /**
+   * @deprecated Use `onConfigurePanGesture` with `onFinalize`.
+   *
+   * Called with no argument — the pan gesture has no `GestureResponderEvent`.
+   */
+  onTouchEnd?: (event?: any) => void;
+
+  /** @deprecated Ignored. The engine loops by offset instead of cloning data. */
+  loopClonesPerSide?: number;
+  /** @deprecated Ignored. Snapping is per item — use `snapMode`. */
+  snapToInterval?: number;
+  /** @deprecated Ignored. The engine does not use a native ScrollView. */
+  disableIntervalMomentum?: boolean;
+  /** @deprecated Ignored. The engine does not use a FlatList. */
   getItemLayout?: (
     data: any,
     index: number
   ) => { length: number; offset: number; index: number };
-  style?: ViewStyle;
-  visibleItem?: number;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  full?: boolean;
-  snapToInterval?: number | Animated.Value | Animated.AnimatedInterpolation<number | string> | undefined
 };
 
-export type CarouselRef = {
-  snapToItem: (
-    index: number,
-    animated?: boolean,
-    fireCallback?: boolean
-  ) => void;
+export type CarouselRenderItemInfoCompat<Item> = {
+  item: Item;
+  index: number;
+  relativeProgress: SharedValue<number>;
+};
+
+/**
+ * `Item` defaults to `any` so `CarouselProps` stays usable without a type
+ * argument, the way the FlatList-based props type was.
+ */
+export type CarouselProps<Item = any> = EngineProps<Item> &
+  LegacyProps & {
+    renderItem: (info: CarouselRenderItemInfoCompat<Item>) => ReactNode;
+    layout?: CarouselLayout;
+    itemAnimation?: CarouselItemAnimation;
+  };
+
+export type CarouselRef = CoreCarouselRef & {
+  /** @deprecated Use `scrollTo({ index, animated })`. */
+  snapToItem: (index: number, animated?: boolean, fireCallback?: boolean) => void;
+  /** @deprecated Use `next({ animated })`. */
   snapToNext: (animated?: boolean, fireCallback?: boolean) => void;
+  /** @deprecated Use `prev({ animated })`. */
   snapToPrev: (animated?: boolean, fireCallback?: boolean) => void;
+  /** @deprecated Toggle the `autoplay` prop instead. */
   startAutoplay: () => void;
+  /** @deprecated Toggle the `autoplay` prop instead. */
   pauseAutoplay: () => void;
+  /** @deprecated Toggle the `autoplay` prop instead. */
   stopAutoplay: () => void;
 };
-
-export type CarouselState = {
-  hideCarousel: boolean;
-  interpolators: any;
-  containerWidth: number;
-  itemWidth: number;
-};
-
-export type Position = {
-  start: any;
-  end: any;
-};

package/animation.ts

@@ -1,62 +0,0 @@
-import {ReactNode} from 'react';
-import {Animated} from 'react-native';
-import {CarouselProps} from './types';
-
-export function getInputRangeFromIndexes(
-  range: string | any[],
-  index: number,
-  itemWidth: number,
-) {
-  const sizeRef = itemWidth;
-  const inputRange = [];
-
-  for (let i = 0; i < range.length; i++) {
-    inputRange.push((index - range[i]) * sizeRef);
-  }
-
-  return inputRange;
-}
-
-export function defaultScrollInterpolator(index: number, itemWidth: number) {
-  const range = [1, 0, -1];
-  const inputRange = getInputRangeFromIndexes(range, index, itemWidth);
-  const outputRange = [0, 1, 0];
-
-  return {inputRange, outputRange};
-}
-
-export function defaultAnimatedStyles(
-  animatedValue: Animated.Value,
-  carouselProps: Readonly<CarouselProps> & Readonly<{children?: ReactNode}>,
-) {
-  let animatedOpacity = {};
-  let animatedScale = {};
-  const {inactiveSlideOpacity = 1, inactiveSlideScale = 1} = carouselProps;
-
-  if (inactiveSlideOpacity < 1) {
-    animatedOpacity = {
-      opacity: animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [inactiveSlideOpacity, 1],
-      }),
-    };
-  }
-
-  if (inactiveSlideScale < 1) {
-    animatedScale = {
-      transform: [
-        {
-          scaleY: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [inactiveSlideScale, 1],
-          }),
-        },
-      ],
-    };
-  }
-
-  return {
-    ...animatedOpacity,
-    ...animatedScale,
-  };
-}