@momo-kits/carousel 0.163.1-beta.4 → 0.164.1-test.10

package/core/LICENSE

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,16 @@
+# 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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,231 @@
+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",
+  },
+});

package/core/components/ItemLayout.tsx

@@ -0,0 +1,215 @@
+import React from "react";
+import type { LayoutChangeEvent, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import Animated, {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
+
+import type { OffsetOptions } from "../hooks/useOffsetX";
+import { useOffsetX } from "../hooks/useOffsetX";
+import type { VisibleRangesValue } from "../hooks/useVisibleRanges";
+import { useGlobalState } from "../store";
+import type { CarouselItemAnimation } from "../types";
+import { getHorizontalStackOffsetType } from "../utils/carousel-direction";
+import { positiveModulo } from "../utils/carousel-math";
+import { sanitizeAnimationStyle } from "../utils/sanitize-animation-style";
+
+export type ItemAnimationStyle = CarouselItemAnimation;
+
+export function resolveItemMainAxisSize(params: {
+  explicitSize?: number | undefined;
+  effectivePageSize?: number | undefined;
+  measuredSize: number | null;
+}) {
+  "worklet";
+
+  const { explicitSize, effectivePageSize, measuredSize } = params;
+
+  return typeof explicitSize === "number"
+    ? explicitSize
+    : (effectivePageSize ?? measuredSize ?? "100%");
+}
+
+export const ItemLayout: React.FC<{
+  index: number;
+  rawIndex: number;
+  handlerOffset: SharedValue<number>;
+  visibleRanges: VisibleRangesValue;
+  animationStyle: ItemAnimationStyle;
+  children: (ctx: {
+    relativeProgress: SharedValue<number>;
+  }) => React.ReactElement;
+}> = (props) => {
+  const { handlerOffset, index, rawIndex, children, visibleRanges, animationStyle } = props;
+
+  const {
+    props: { loop, dataLength, directionSign, orientation, layout, style, itemSize },
+    common,
+    layout: { updateItemDimensions },
+  } = useGlobalState();
+
+  const measuredSize = useSharedValue<{ width: number | null; height: number | null }>({
+    width: null,
+    height: null,
+  });
+
+  const fallbackSize = common.size;
+  const isVertical = orientation === "vertical";
+  const { width: styleWidth, height: styleHeight } = StyleSheet.flatten(style) || {};
+  const styleWidthNumber = typeof styleWidth === "number" ? styleWidth : undefined;
+  const styleHeightNumber = typeof styleHeight === "number" ? styleHeight : undefined;
+
+  const size = (itemSize ?? fallbackSize) || 0;
+  const effectivePageSize = size > 0 ? size : undefined;
+
+  const dimensionsStyle = useAnimatedStyle<ViewStyle>(() => {
+    const widthCandidate = isVertical ? styleWidthNumber : itemSize;
+    const heightCandidate = isVertical ? itemSize : styleHeightNumber;
+
+    const computedWidth = isVertical
+      ? typeof widthCandidate === "number"
+        ? widthCandidate
+        : (measuredSize.value.width ?? "100%")
+      : resolveItemMainAxisSize({
+          explicitSize: widthCandidate,
+          effectivePageSize,
+          measuredSize: measuredSize.value.width,
+        });
+
+    const computedHeight = isVertical
+      ? resolveItemMainAxisSize({
+          explicitSize: heightCandidate,
+          effectivePageSize,
+          measuredSize: measuredSize.value.height,
+        })
+      : typeof heightCandidate === "number"
+        ? heightCandidate
+        : (measuredSize.value.height ?? "100%");
+
+    return {
+      width: computedWidth,
+      height: computedHeight,
+    };
+  }, [effectivePageSize, isVertical, itemSize, styleHeightNumber, styleWidthNumber]);
+
+  let offsetXConfig: OffsetOptions = {
+    handlerOffset,
+    index,
+    size,
+    dataLength,
+    loop,
+  };
+
+  if (layout?.type === "horizontal-stack") {
+    offsetXConfig = {
+      handlerOffset,
+      index,
+      size,
+      dataLength,
+      loop,
+      type: getHorizontalStackOffsetType(layout.exitDirection ?? "left", directionSign),
+      viewCount: layout.visibleCount,
+    };
+  }
+
+  const x = useOffsetX(offsetXConfig, visibleRanges);
+  const isCurrentForAccessibility = React.useCallback(() => {
+    "worklet";
+
+    return (
+      size > 0 &&
+      dataLength > 0 &&
+      positiveModulo(Math.round(-handlerOffset.value / size), dataLength) === index
+    );
+  }, [dataLength, handlerOffset, index, size]);
+  const [isAccessibilityCurrent, setIsAccessibilityCurrent] =
+    React.useState(isCurrentForAccessibility);
+
+  useAnimatedReaction(
+    isCurrentForAccessibility,
+    (isCurrent, wasCurrent) => {
+      if (isCurrent !== wasCurrent) {
+        scheduleOnRN(setIsAccessibilityCurrent, isCurrent);
+      }
+    },
+    [isCurrentForAccessibility]
+  );
+
+  const relativeProgress = useDerivedValue(() => {
+    if (!size) return 0;
+    return x.value / size;
+  }, [x, size]);
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
+    const safeSize = size || 1;
+    return sanitizeAnimationStyle(animationStyle(x.value / safeSize, rawIndex));
+  }, [animationStyle, rawIndex, x, size]);
+
+  // TODO: For dynamic dimension in the future
+  // function handleLayout(e: LayoutChangeEvent) {
+  //   const { width, height } = e.nativeEvent.layout;
+  //   updateItemDimensions(index, { width, height });
+  // }
+
+  const child = children({ relativeProgress });
+
+  type LayoutableProps = {
+    collapsable?: boolean;
+    onLayout?: (event: LayoutChangeEvent) => void;
+  };
+
+  const enhancedChild = React.isValidElement<LayoutableProps>(child)
+    ? React.cloneElement(child, {
+        collapsable: false,
+        onLayout: (event: LayoutChangeEvent) => {
+          const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+          if (layoutWidth > 0 && layoutHeight > 0) {
+            scheduleOnUI(() => {
+              const { width: prevWidth, height: prevHeight } = measuredSize.value;
+              if (prevWidth === layoutWidth && prevHeight === layoutHeight) return;
+
+              measuredSize.value = {
+                width: layoutWidth,
+                height: layoutHeight,
+              };
+              updateItemDimensions(index, {
+                width: layoutWidth,
+                height: layoutHeight,
+              });
+            });
+          }
+
+          child.props?.onLayout?.(event);
+        },
+      })
+    : child;
+
+  return (
+    <Animated.View
+      accessibilityElementsHidden={!isAccessibilityCurrent}
+      accessible={isAccessibilityCurrent ? undefined : false}
+      aria-hidden={!isAccessibilityCurrent}
+      importantForAccessibility={isAccessibilityCurrent ? "auto" : "no-hide-descendants"}
+      style={[
+        {
+          position: "absolute",
+          pointerEvents: "box-none",
+        },
+        dimensionsStyle,
+        animatedStyle,
+      ]}
+      /**
+       * We use this testID to know when the carousel item is ready to be tested in test.
+       * e.g.
+       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.
+       * */
+      testID={`__CAROUSEL_ITEM_${index}__`}
+    >
+      {enhancedChild}
+    </Animated.View>
+  );
+};

package/core/components/ItemRenderer.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import type { FC } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useAnimatedReaction } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import type { ItemAnimationStyle } from "./ItemLayout";
+import { ItemLayout } from "./ItemLayout";
+
+import type { VisibleRanges } from "../hooks/useVisibleRanges";
+import { computeVisibleRanges, useVisibleRanges } from "../hooks/useVisibleRanges";
+import type { CarouselItemAnimation, CarouselRenderItem } from "../types";
+import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+
+interface Props {
+  data: unknown[];
+  rawData: unknown[];
+  dataLength: number;
+  rawDataLength: number;
+  loop: boolean;
+  size: number;
+  renderWindowSize?: number | undefined;
+  defaultIndex: number;
+  autoFillData: boolean;
+  offsetX: SharedValue<number>;
+  handlerOffset: SharedValue<number>;
+  layoutConfig: ItemAnimationStyle;
+  renderItem: CarouselRenderItem<unknown>;
+  itemAnimation?: CarouselItemAnimation | undefined;
+  keyExtractor?: ((item: unknown, index: number) => string) | undefined;
+}
+
+export const ItemRenderer: FC<Props> = (props) => {
+  const {
+    data,
+    rawData,
+    size,
+    renderWindowSize,
+    defaultIndex,
+    handlerOffset,
+    offsetX,
+    dataLength,
+    rawDataLength,
+    loop,
+    autoFillData,
+    layoutConfig,
+    renderItem,
+    itemAnimation,
+    keyExtractor,
+  } = props;
+
+  const visibleRanges = useVisibleRanges({
+    total: dataLength,
+    viewSize: size,
+    translation: handlerOffset,
+    windowSize: renderWindowSize,
+    loop,
+  });
+
+  // Initialize with a sensible default to avoid blank render on first frame
+  const initialRanges: VisibleRanges = React.useMemo(
+    () =>
+      computeVisibleRanges({
+        total: dataLength,
+        windowSize: renderWindowSize,
+        currentIndex: defaultIndex,
+        loop,
+      }),
+    [dataLength, defaultIndex, loop, renderWindowSize]
+  );
+
+  const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(initialRanges);
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    (ranges) => scheduleOnRN(setDisplayedItems, ranges),
+    [visibleRanges]
+  );
+
+  return (
+    <>
+      {data.map((item, index) => {
+        const realIndex = computedRealIndexWithAutoFillData({
+          index,
+          dataLength: rawDataLength,
+          loop,
+          autoFillData,
+        });
+
+        const { negativeRange, positiveRange } = displayedItems;
+
+        const shouldRender =
+          (index >= negativeRange[0] && index <= negativeRange[1]) ||
+          (index >= positiveRange[0] && index <= positiveRange[1]);
+
+        if (!shouldRender) return null;
+
+        const rawItem = rawData[realIndex] ?? item;
+        const key = keyExtractor
+          ? `${keyExtractor(rawItem, realIndex)}::rnrc-copy-${Math.floor(
+              index / Math.max(rawDataLength, 1)
+            )}`
+          : String(index);
+
+        return (
+          <ItemLayout
+            key={key}
+            index={index}
+            rawIndex={realIndex}
+            handlerOffset={offsetX}
+            visibleRanges={visibleRanges}
+            animationStyle={itemAnimation || layoutConfig}
+          >
+            {({ relativeProgress }) =>
+              renderItem({
+                item: rawItem,
+                index: realIndex,
+                relativeProgress,
+              })
+            }
+          </ItemLayout>
+        );
+      })}
+    </>
+  );
+};

package/core/components/LazyView.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+import React from "react";
+
+interface Props {
+  shouldUpdate: boolean;
+}
+
+export const LazyView: React.FC<PropsWithChildren<Props>> = (props) => {
+  const { shouldUpdate, children } = props;
+
+  if (!shouldUpdate) return <></>;
+
+  return <>{children}</>;
+};