@xhsreds/reds-rn-next 0.9.1-beta202510291556 → 0.9.1-feat-swiper202511031535

package/src/components/Popover/Popover.tsx

@@ -24,7 +24,6 @@ export default ({
   arrowStyles: propsArrowStyles,
   offset,
   duration,
-  animation_duration,
   hostName,
   maxWidth,
   arrowOffset,
@@ -122,18 +121,18 @@ export default ({
       if (layout.x !== defaultValue) {
         Animated.timing(progress, {
           toValue: 1,
-          duration: animation_duration ?? 400,
+          duration: duration ?? 400,
           useNativeDriver: false,
         }).start();
       }
     } else {
       Animated.timing(progress, {
         toValue: 0,
-        duration: animation_duration ?? 400,
+        duration: duration ?? 400,
         useNativeDriver: false,
       }).start();
     }
-  }, [_visible, layout, animation_duration]);
+  }, [_visible, layout]);
 
   const onMaskChange = (event: GestureResponderEvent, value: boolean) => {
     if (isControl) return;

package/src/components/Popover/doc/index.mdx

@@ -8,28 +8,27 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性               | 描述                              | 类型                                                                                                | 默认值          |
-| ------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
-| visible            | 是否显示气泡                      | boolean                                                                                             | undefined       |
-| placement          | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
-| content            | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
-| opacity            | 遮罩透明度                        | number                                                                                              | 0               |
-| mode               | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
-| trigger            | 触发方式                          | "click" | "touch"                                                                              | click           |
-| duration           | 固定时间后popover消失             | number                                                                                              |                 |
-| animation_duration | animation_duration 动画时间       | number                                                                                              |                 |
-| zIndex             | 层级                              | number                                                                                              | 1000            |
-| popContainerStyle  | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
-| closeOnClickAgain  | 再次点击关闭                      | boolean                                                                                             | true            |
-| children           | popover 作用的目标节点            | ReactNode                                                                                           |                 |
-| floatingStyles     | floating style                    | ViewStyle                                                                                           | `{}`            |
-| arrowStyles        | arrow style                       | ImageStyle                                                                                          | `{}`            |
-| isControl          | 是否受控                          | boolean                                                                                             | false           |
-| offset             | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
-| arrowOffset        | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
-| hostName           | hostName                          | string                                                                                              | root            |
-| maxWidth           | popover最大宽度                   | number                                                                                              | 280             |
-| layoutChange       | 布局是否变化                      | any                                                                                                 | `{}`            |
+| 属性              | 描述                              | 类型                                                                                                | 默认值          |
+| ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
+| visible           | 是否显示气泡                      | boolean                                                                                             | undefined       |
+| placement         | 气泡方向                          | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
+| content           | 弹出内容                          | ReactNode | (() => ReactNode)                                                                  |                 |
+| opacity           | 遮罩透明度                        | number                                                                                              | 0               |
+| mode              | 主题色                            | "light" | "dark" | "alwaysLight" | "alwaysDark"                                      | light           |
+| trigger           | 触发方式                          | "click" | "touch"                                                                              | click           |
+| duration          | 固定时间后popover消失             | number                                                                                              |                 |
+| zIndex            | 层级                              | number                                                                                              | 1000            |
+| popContainerStyle | 气泡框的样式                      | ViewStyle                                                                                           | `{}`            |
+| closeOnClickAgain | 再次点击关闭                      | boolean                                                                                             | true            |
+| children          | popover 作用的目标节点            | ReactNode                                                                                           |                 |
+| floatingStyles    | floating style                    | ViewStyle                                                                                           | `{}`            |
+| arrowStyles       | arrow style                       | ImageStyle                                                                                          | `{}`            |
+| isControl         | 是否受控                          | boolean                                                                                             | false           |
+| offset            | 气泡偏移位置 用于特殊场景适配     | Offset                                                                                              | `{"x":0,"y":0}` |
+| arrowOffset       | 气泡箭头偏移位置 用于特殊场景适配 | Offset                                                                                              | `{"x":0,"y":0}` |
+| hostName          | hostName                          | string                                                                                              | root            |
+| maxWidth          | popover最大宽度                   | number                                                                                              | 280             |
+| layoutChange      | 布局是否变化                      | any                                                                                                 | `{}`            |
 
 ### Events
 

package/src/components/Popover/interface/index.ts

@@ -12,7 +12,6 @@ export interface RedsPopover {
   mode?: "light" | "dark" | "alwaysLight" | "alwaysDark";
   trigger?: "click" | "touch";
   duration?: number;
-  animation_duration?: number;
   zIndex?: number;
   popContainerStyle?: ViewStyle;
   closeOnClickAgain?: boolean;

package/src/components/Sheets/styles.ts

@@ -49,11 +49,11 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 12,
   },
   cancel: {
-    fontSize: typography.B2LooseSwitchFontSize,
+    fontSize: typography.B1LooseFontSize,
     fontWeight: typography.B1LooseFontWeight,
   },
   confirm: {
-    fontSize: typography.B2LooseSwitchFontSize,
+    fontSize: typography.B1LooseFontSize,
     fontWeight: typography.T3FontWeight,
   },
   label: {

package/src/components/Swiper/LazyPage.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import type { LazyPageProps } from "./types";
+
+/**
+ * LazyPage component that conditionally mounts/unmounts content
+ * based on proximity to current page
+ */
+export const LazyPage: React.FC<LazyPageProps> = ({
+  shouldMount,
+  shouldUnmount = false,
+  children,
+  placeholder,
+  style,
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    if (shouldMount && !mounted) {
+      // Mount the page when it enters the window
+      setMounted(true);
+    } else if (shouldUnmount && mounted) {
+      // Unmount the page when it's far from current position
+      // This helps free memory for large datasets
+      setMounted(false);
+    }
+    // Note: By default (shouldUnmount=false), pages stay mounted for better UX
+    // Enable shouldUnmount for aggressive memory management
+  }, [shouldMount, shouldUnmount, mounted]);
+
+  return (
+    <View style={[styles.page, style]}>{mounted ? children : placeholder || <View style={styles.placeholder} />}</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+  },
+  placeholder: {
+    flex: 1,
+    backgroundColor: "transparent",
+  },
+});

package/src/components/Swiper/Swiper.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from "react";
+import type { SwiperProps, SwiperRef } from "./types";
+import { SwiperPagerView } from "./SwiperPagerView";
+import { SwiperFlatList } from "./SwiperFlatList";
+
+/**
+ * Swiper Component - A performant, data-driven carousel with infinite scroll support
+ *
+ * Features:
+ * - Two implementations: PagerView (default) and FlatList
+ * - Lazy mounting for performance with large datasets
+ * - Infinite/loop scrolling with seamless transitions
+ * - Programmatic control via ref methods
+ * - Event callbacks for page changes
+ * - Nested scroll support
+ * - TypeScript generic support for type-safe data
+ */
+function SwiperComponent<T>(props: SwiperProps<T>, ref: React.Ref<SwiperRef>) {
+  const { implementation = "pagerView" } = props;
+
+  if (implementation === "flatlist") {
+    return <SwiperFlatList ref={ref} {...props} />;
+  }
+
+  return <SwiperPagerView ref={ref} {...props} />;
+}
+
+// Export with generic type support
+export const Swiper = forwardRef(SwiperComponent) as <T>(
+  props: SwiperProps<T> & { ref?: React.Ref<SwiperRef> },
+) => React.ReactElement;

package/src/components/Swiper/SwiperFlatList.tsx

@@ -0,0 +1,299 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { FlatList, StyleSheet, View, LayoutChangeEvent } from "react-native";
+import type { SwiperProps, SwiperRef } from "./types";
+import { prepareInfiniteData, shouldJumpForInfinite, getRealIndex, getDisplayIndex } from "./utils";
+
+/**
+ * FlatList-based Swiper implementation
+ */
+function SwiperFlatListComponent<T>(props: SwiperProps<T>, ref: React.Ref<SwiperRef>) {
+  const {
+    data,
+    renderItem,
+    keyExtractor,
+    infinite = false,
+    initialPage = 0,
+    cloneCount = 2,
+    onPageChange,
+    onNext,
+    onPrev,
+    onScrollEndDrag,
+    onPageScrollStateChanged,
+    style,
+  } = props;
+
+  // Refs
+  const flatListRef = useRef<FlatList>(null);
+  const currentPageRef = useRef<number>(initialPage);
+  const isJumpingRef = useRef<boolean>(false);
+  const scrollingRef = useRef<boolean>(false);
+
+  // State
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // Prepare data for infinite scrolling
+  const {
+    displayData,
+    offset,
+    cloneCount: actualCloneCount,
+  } = useMemo(() => {
+    return prepareInfiniteData(data, infinite, cloneCount);
+  }, [data, infinite, cloneCount]);
+
+  // Calculate adjusted initial page for infinite mode
+  const adjustedInitialPage = useMemo(() => {
+    return infinite ? getDisplayIndex(initialPage, offset) : initialPage;
+  }, [infinite, initialPage, offset]);
+
+  /**
+   * Handle layout to measure actual container width
+   */
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    if (width > 0) {
+      setContainerWidth(width);
+    }
+  }, []);
+
+  /**
+   * Handle scroll begin drag - fires when user starts dragging
+   */
+  const handleScrollBeginDrag = useCallback(() => {
+    onPageScrollStateChanged?.("dragging");
+  }, [onPageScrollStateChanged]);
+
+  /**
+   * Handle scroll end drag - fires when user releases finger
+   */
+  const handleScrollEndDrag = useCallback(
+    (event: any) => {
+      if (isJumpingRef.current || containerWidth === 0) {
+        return;
+      }
+
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const newDisplayPage = Math.round(offsetX / containerWidth);
+
+      const realIndex = getRealIndex(newDisplayPage, offset, data.length);
+
+      // Call the callback if provided
+      onScrollEndDrag?.(realIndex);
+
+      // Transition to settling state (momentum begins)
+      onPageScrollStateChanged?.("settling");
+    },
+    [data.length, offset, onScrollEndDrag, onPageScrollStateChanged, containerWidth],
+  );
+
+  /**
+   * Handle scroll end - detect which page we're on
+   */
+  const handleMomentumScrollEnd = useCallback(
+    (event: any) => {
+      if (isJumpingRef.current || containerWidth === 0) {
+        return;
+      }
+
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const newDisplayPage = Math.round(offsetX / containerWidth);
+
+      if (newDisplayPage === currentPageRef.current) {
+        return;
+      }
+
+      const prevPage = currentPageRef.current;
+      currentPageRef.current = newDisplayPage;
+
+      const realIndex = getRealIndex(newDisplayPage, offset, data.length);
+      setCurrentPage(realIndex);
+
+      // Emit events
+      onPageChange?.(realIndex);
+
+      if (newDisplayPage > prevPage) {
+        onNext?.(realIndex);
+      } else if (newDisplayPage < prevPage) {
+        onPrev?.(realIndex);
+      }
+
+      // Transition to idle state (scroll complete)
+      onPageScrollStateChanged?.("idle");
+
+      // Handle infinite scroll jump - jump earlier to avoid hitting edge
+      if (infinite && data.length >= 3) {
+        // Use larger threshold for FlatList to jump before hitting edge
+        const threshold = Math.max(3, Math.min(5, Math.ceil(actualCloneCount / 5)));
+        const totalLength = offset + data.length + actualCloneCount;
+
+        // Near start
+        if (newDisplayPage < offset + threshold && newDisplayPage < offset + data.length / 2) {
+          const dataIndex =
+            actualCloneCount > data.length
+              ? newDisplayPage % data.length
+              : data.length - actualCloneCount + newDisplayPage;
+
+          const jumpTo = offset + dataIndex;
+          performJump(jumpTo);
+        }
+        // Near end
+        else if (newDisplayPage >= offset + data.length - threshold && newDisplayPage >= offset + data.length / 2) {
+          const offsetInCycle = (newDisplayPage - offset) % data.length;
+          const jumpTo = offset + offsetInCycle;
+          performJump(jumpTo);
+        }
+      }
+    },
+    [data.length, offset, actualCloneCount, infinite, onPageChange, onNext, onPrev, containerWidth],
+  );
+
+  /**
+   * Perform jump without animation
+   */
+  const performJump = useCallback((targetIndex: number) => {
+    isJumpingRef.current = true;
+
+    requestAnimationFrame(() => {
+      flatListRef.current?.scrollToIndex({
+        index: targetIndex,
+        animated: false,
+      });
+      currentPageRef.current = targetIndex;
+
+      requestAnimationFrame(() => {
+        isJumpingRef.current = false;
+      });
+    });
+  }, []);
+
+  /**
+   * Get item layout for proper scrollToIndex
+   */
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: containerWidth,
+      offset: containerWidth * index,
+      index,
+    }),
+    [containerWidth],
+  );
+
+  /**
+   * Render each item
+   */
+  const renderFlatListItem = useCallback(
+    ({ item, index }: { item: T; index: number }) => {
+      const realIndex = getRealIndex(index, offset, data.length);
+      return <View style={[styles.page, { width: containerWidth }]}>{renderItem(item, realIndex)}</View>;
+    },
+    [renderItem, offset, data.length, containerWidth],
+  );
+
+  /**
+   * Expose ref methods
+   */
+  useImperativeHandle(
+    ref,
+    () => ({
+      goToPage: (index: number, animated = true) => {
+        const clampedIndex = Math.max(0, Math.min(index, data.length - 1));
+        const displayIndex = infinite ? getDisplayIndex(clampedIndex, offset) : clampedIndex;
+
+        flatListRef.current?.scrollToIndex({
+          index: displayIndex,
+          animated,
+        });
+      },
+
+      next: (animated = true) => {
+        const nextPage = currentPageRef.current + 1;
+        if (nextPage < displayData.length) {
+          flatListRef.current?.scrollToIndex({
+            index: nextPage,
+            animated,
+          });
+        }
+      },
+
+      prev: (animated = true) => {
+        const prevPage = currentPageRef.current - 1;
+        if (prevPage >= 0) {
+          flatListRef.current?.scrollToIndex({
+            index: prevPage,
+            animated,
+          });
+        }
+      },
+
+      getCurrentPage: () => currentPage,
+    }),
+    [currentPage, data.length, infinite, offset, displayData.length],
+  );
+
+  /**
+   * Initialize to initial page after container width is measured
+   */
+  useEffect(() => {
+    if (containerWidth > 0) {
+      const timer = setTimeout(() => {
+        flatListRef.current?.scrollToIndex({
+          index: adjustedInitialPage,
+          animated: false,
+        });
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [adjustedInitialPage, containerWidth]);
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]} onLayout={handleLayout}>
+      {containerWidth > 0 && (
+        <FlatList
+          ref={flatListRef}
+          data={displayData}
+          renderItem={renderFlatListItem}
+          keyExtractor={(item, index) => {
+            const realIndex = getRealIndex(index, offset, data.length);
+            return keyExtractor?.(item, realIndex) ?? `swiper-fl-${index}`;
+          }}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onScrollBeginDrag={onPageScrollStateChanged ? handleScrollBeginDrag : undefined}
+          onScrollEndDrag={onScrollEndDrag || onPageScrollStateChanged ? handleScrollEndDrag : undefined}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
+          getItemLayout={getItemLayout}
+          initialScrollIndex={adjustedInitialPage}
+          // Optimized for fast scrolling with paging
+          initialNumToRender={10}
+          windowSize={21}
+          maxToRenderPerBatch={10}
+          updateCellsBatchingPeriod={30}
+          removeClippedSubviews={false}
+          style={styles.flatList}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  flatList: {
+    flex: 1,
+  },
+  page: {
+    flex: 1,
+  },
+});
+
+export const SwiperFlatList = forwardRef(SwiperFlatListComponent) as <T>(
+  props: SwiperProps<T> & { ref?: React.Ref<SwiperRef> },
+) => React.ReactElement;