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

package/package.json

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

package/types.ts

@@ -1,146 +1,71 @@
-import type { ReactNode } from 'react';
-import type {
+import {
+  Animated,
   NativeScrollEvent,
   NativeSyntheticEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
 
-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. */
+export type CarouselProps = {
+  activeSlideOffset?: number;
+  apparitionDelay?: number;
+  autoplay?: boolean;
   autoplayDelay?: number;
-  /** @deprecated Use `layout` or `itemAnimation`. */
+  autoplayInterval?: number;
+  enableSnap?: boolean;
+  firstItem?: number;
   inactiveSlideOpacity?: number;
-  /** @deprecated Use `layout` or `itemAnimation`. */
   inactiveSlideScale?: number;
-  /** @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>;
-  /** @deprecated Use `onProgressChange` or `progress`. */
-  onScrollIndexChanged?: (index: number) => void;
-  /**
-   * @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. */
+  loop?: boolean;
   loopClonesPerSide?: number;
-  /** @deprecated Ignored. Snapping is per item — use `snapMode`. */
-  snapToInterval?: number;
-  /** @deprecated Ignored. The engine does not use a native ScrollView. */
+  scrollEnabled?: boolean;
+  slideStyle?: StyleProp<ViewStyle>;
   disableIntervalMomentum?: boolean;
-  /** @deprecated Ignored. The engine does not use a FlatList. */
+  itemWidth?: number;
+  data: any[];
+  renderItem: (info: { item: any; index: number }) => React.ReactNode;
+  onScroll?: any;
+  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;
   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 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 })`. */
+export type CarouselRef = {
+  snapToItem: (
+    index: number,
+    animated?: boolean,
+    fireCallback?: boolean
+  ) => void;
   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/core/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Doho
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/core/README.md

@@ -1,16 +0,0 @@
-# Vendored carousel engine
-
-Source: [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) v5.1.1, MIT (see `LICENSE`).
-
-Copied from the upstream `src/` directory, minus two things we do not ship:
-
-- `index.tsx` — the package root is `../index.tsx` instead.
-- `components/Pagination/` — MoMo screens use `Pagination` from
-  `@momo-kits/foundation`.
-
-Do not edit these files for MoMo-specific behaviour. `../index.tsx` decides what
-the package exposes.
-
-To update: re-copy upstream `src/` over `core/`, drop the two paths above again,
-keep `LICENSE` and this file, then re-check `../index.tsx` and `../types.ts`
-against the upstream public types.

package/core/components/Carousel.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { useCommonVariables } from "../hooks/useCommonVariables";
-import { useInitProps } from "../hooks/useInitProps";
-import { usePropsErrorBoundary } from "../hooks/usePropsErrorBoundary";
-import { GlobalStateProvider } from "../store";
-import type { CarouselProps, CarouselRef } from "../types";
-import { CarouselLayout } from "./CarouselLayout";
-
-const CarouselImpl = React.forwardRef<CarouselRef, CarouselProps<unknown>>((_props, ref) => {
-  const props = useInitProps(_props);
-  const { dataLength } = props;
-  const commonVariables = useCommonVariables(props);
-  usePropsErrorBoundary({ ...props, dataLength });
-
-  return (
-    <GlobalStateProvider value={{ props, common: commonVariables }}>
-      <CarouselLayout ref={ref} />
-    </GlobalStateProvider>
-  );
-});
-
-type CarouselComponent = <T>(
-  props: CarouselProps<T> & {
-    ref?: React.Ref<CarouselRef>;
-  }
-) => React.ReactElement;
-
-export const Carousel = CarouselImpl as CarouselComponent;

package/core/components/CarouselLayout.tsx

@@ -1,231 +0,0 @@
-import React from "react";
-import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
-import { useAnimatedReaction, useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { useAutoPlay } from "../hooks/useAutoPlay";
-import { useCarouselController } from "../hooks/useCarouselController";
-import { useLayoutConfig } from "../hooks/useLayoutConfig";
-import { useOnProgressChange } from "../hooks/useOnProgressChange";
-import { useGlobalState } from "../store";
-import type { CarouselRef } from "../types";
-import { ItemRenderer } from "./ItemRenderer";
-import { ScrollViewGesture } from "./ScrollViewGesture";
-
-export function resolveCarouselLayoutStyle(params: {
-  flattenedStyle: Partial<ViewStyle>;
-  isVertical: boolean;
-  measuredSize: number;
-  sizeExplicit: boolean;
-}) {
-  "worklet";
-
-  const { flattenedStyle, isVertical, measuredSize, sizeExplicit } = params;
-  const { width, height } = flattenedStyle;
-  const resolvedMainAxisSize = measuredSize || "100%";
-
-  return {
-    width: width ?? (isVertical ? "100%" : sizeExplicit ? resolvedMainAxisSize : "100%"),
-    height: height ?? (isVertical ? (sizeExplicit ? resolvedMainAxisSize : "100%") : "100%"),
-  };
-}
-
-export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
-  const { props, common } = useGlobalState();
-
-  const {
-    testID,
-    loop,
-    autoFillData,
-    // Fill data with autoFillData
-    data,
-    rawData,
-    // Length of fill data
-    dataLength,
-    // Length of raw data
-    rawDataLength,
-    layout,
-    style,
-    contentContainerStyle,
-    orientation,
-    autoplay,
-    renderWindowSize,
-    autoplayDirection,
-    autoplayInterval,
-    animation,
-    renderItem,
-    onSnapToItem,
-    onScrollStart,
-    onProgressChange,
-    progress,
-    itemAnimation,
-    defaultIndex,
-    keyExtractor,
-  } = props;
-  const isVertical = orientation === "vertical";
-
-  const { size, handlerOffset, resolvedSize, sizePhase, sizeExplicit } = common;
-  const layoutConfig = useLayoutConfig({ ...props, size });
-
-  const isSizeReady = useDerivedValue(() => {
-    const currentSize = resolvedSize.value ?? 0;
-    return sizePhase.value === "ready" && currentSize > 0;
-  }, [resolvedSize, sizePhase]);
-
-  const offsetX = useDerivedValue(() => {
-    const currentSize = resolvedSize.value ?? 0;
-    if (currentSize <= 0) return 0;
-
-    const totalSize = currentSize * dataLength;
-    const value = handlerOffset.value;
-    if (!loop || totalSize === 0) {
-      return value;
-    }
-
-    const x = value % totalSize;
-    return Number.isNaN(x) ? 0 : x;
-  }, [loop, dataLength, handlerOffset, resolvedSize]);
-
-  useOnProgressChange({
-    loop,
-    offset: handlerOffset,
-    progress,
-    size,
-    sizeReady: isSizeReady,
-    rawDataLength,
-    onProgressChange,
-  });
-
-  const _onScrollEnd = React.useCallback(
-    (realIndex: number) => {
-      if (onSnapToItem) onSnapToItem(realIndex);
-    },
-    [onSnapToItem]
-  );
-
-  const carouselController = useCarouselController({
-    ref,
-    loop,
-    size,
-    dataLength,
-    rawDataLength,
-    handlerOffset,
-    animation,
-    defaultIndex,
-    onMovementEnd: _onScrollEnd,
-    onScrollStart,
-  });
-
-  const {
-    start: startAutoPlay,
-    pause: pauseAutoPlay,
-    trigger: triggerAutoPlay,
-  } = useAutoPlay({
-    autoplay,
-    autoplayDirection,
-    autoplayInterval,
-    carouselController,
-  });
-
-  useAnimatedReaction(
-    () => ({ ready: isSizeReady.value }),
-    (state, previous) => {
-      if (!autoplay) return;
-      if (state.ready === previous?.ready) return;
-
-      if (state.ready) scheduleOnRN(triggerAutoPlay);
-      else scheduleOnRN(pauseAutoPlay);
-    },
-    [autoplay]
-  );
-
-  const scrollViewGestureOnScrollStart = React.useCallback(() => {
-    carouselController.startMovement();
-    pauseAutoPlay();
-    onScrollStart?.();
-  }, [carouselController, onScrollStart, pauseAutoPlay]);
-
-  const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-    const settledIndex = carouselController.settle();
-    startAutoPlay();
-    _onScrollEnd(settledIndex);
-  }, [_onScrollEnd, carouselController, startAutoPlay]);
-
-  const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [pauseAutoPlay]);
-
-  const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [startAutoPlay]);
-
-  const { opacity, transform, ...restContentContainerStyle } =
-    StyleSheet.flatten(contentContainerStyle as StyleProp<ViewStyle>) || {};
-  const flattenedStyle = StyleSheet.flatten(style) || {};
-
-  const layoutStyle = useAnimatedStyle(() => {
-    const measuredSize = resolvedSize.value ?? 0;
-    const { width, height } = resolveCarouselLayoutStyle({
-      flattenedStyle,
-      isVertical,
-      measuredSize,
-      sizeExplicit,
-    });
-
-    return {
-      width,
-      height,
-      opacity: isSizeReady.value ? 1 : 0,
-    };
-  }, [flattenedStyle, isSizeReady, isVertical, resolvedSize, sizePhase, sizeExplicit]);
-
-  return (
-    <View testID={testID} style={[styles.layoutContainer, style]} onLayout={props.onLayout}>
-      <ScrollViewGesture
-        size={size}
-        key={layout?.type}
-        translation={handlerOffset}
-        style={[
-          styles.contentContainer,
-          layoutStyle,
-          restContentContainerStyle,
-          isVertical ? styles.itemsVertical : styles.itemsHorizontal,
-        ]}
-        testID="carousel-content-container"
-        onScrollStart={scrollViewGestureOnScrollStart}
-        onScrollEnd={scrollViewGestureOnScrollEnd}
-        onTouchBegin={scrollViewGestureOnTouchBegin}
-        onTouchEnd={scrollViewGestureOnTouchEnd}
-      >
-        <ItemRenderer
-          data={data}
-          rawData={rawData}
-          dataLength={dataLength}
-          rawDataLength={rawDataLength}
-          loop={loop}
-          size={size}
-          renderWindowSize={renderWindowSize}
-          defaultIndex={defaultIndex}
-          autoFillData={autoFillData}
-          offsetX={offsetX}
-          handlerOffset={handlerOffset}
-          layoutConfig={layoutConfig}
-          renderItem={renderItem}
-          itemAnimation={itemAnimation}
-          keyExtractor={keyExtractor}
-        />
-      </ScrollViewGesture>
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({
-  layoutContainer: {
-    display: "flex",
-    overflow: "hidden",
-  },
-  contentContainer: {
-    overflow: "hidden",
-  },
-  itemsHorizontal: {
-    flexDirection: "row",
-  },
-  itemsVertical: {
-    flexDirection: "column",
-  },
-});