@seakoi/native-ui 1.0.0 → 1.1.1

package/dist/module/components/base/address-picker-view/address-picker-view.js

@@ -0,0 +1,191 @@
+"use strict";
+
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Button, PickerView, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useAddressPickerStyles } from "./style/index.js";
+import { getSelectedOptions } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HIT_SLOP = {
+  top: 10,
+  bottom: 10,
+  left: 10,
+  right: 10
+};
+const ADDRESS_PICKER_CONFIG = {
+  province: {
+    depth: 1,
+    title: '请选择省'
+  },
+  city: {
+    depth: 2,
+    title: '请选择省市'
+  },
+  district: {
+    depth: 3,
+    title: '请选择省市区'
+  },
+  street: {
+    depth: 4,
+    title: '请选择省市区、街道'
+  }
+};
+export const AddressPickerView = props => {
+  const {
+    confirmText = '确定',
+    cancelText = '取消',
+    onCancel,
+    onConfirm,
+    columns,
+    selectType = 'district',
+    title,
+    onClose,
+    style,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const defaultTitle = ADDRESS_PICKER_CONFIG[selectType].title;
+  const finalTitle = title ?? defaultTitle;
+  const visibleItemCount = 5;
+  const itemHeight = 42;
+  const styles = useAddressPickerStyles({
+    height: itemHeight * visibleItemCount
+  });
+
+  /** 管理已确认的值（与父组件同步） 受控与非受控*/
+  const [value, onChange] = useControllableValue(props, {
+    defaultValue: []
+  });
+
+  /** 管理选择器的值（内部状态*/
+  const [pickerValue, setPickerValue] = useState(value || []);
+  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setPickerValue(value || []);
+  }
+
+  /**
+   * @param v 选择器的值
+   * @description 当选择器的值发生变化时，更新内部状态
+   * @returns void
+   *  */
+  const handlePickerChange = useMemoizedFn(v => {
+    setPickerValue(v);
+  });
+  /**
+   * @description 确认选择
+   * @returns void
+   * */
+  const handleConfirm = useMemoizedFn(() => {
+    const options = getSelectedOptions(columns, pickerValue);
+    onChange(pickerValue, options);
+    onConfirm?.(pickerValue, options);
+  });
+  /**
+   * @description 取消选择
+   * @returns void
+   * */
+  const handleCancel = useMemoizedFn(() => {
+    setPickerValue(value || []);
+    onCancel?.();
+  });
+  const handleClose = useMemoizedFn(() => {
+    onClose?.();
+  });
+
+  /**
+   * @description 剪裁列
+   * @param columns 列
+   * @param selectType 选择类型
+   * @returns 剪裁后的列
+   * */
+  const prunedColumns = useMemo(() => {
+    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
+    const prune = (cols, currentDepth) => {
+      if (!cols) {
+        return [];
+      }
+      if (currentDepth >= depth) {
+        return cols.map(col => {
+          /** 剪裁列，移除子项 */
+          if (typeof col === 'object' && col !== null && !Array.isArray(col) && 'children' in col) {
+            const {
+              children,
+              ...rest
+            } = col;
+            return rest;
+          }
+          return col;
+        });
+      }
+      /** 递归剪裁子项 */
+      return cols.map(col => {
+        if (typeof col === 'object' && col !== null && !Array.isArray(col) && 'children' in col) {
+          const option = col;
+          if (option.children) {
+            return {
+              ...option,
+              children: prune(option.children, currentDepth + 1)
+            };
+          }
+          return option;
+        }
+        return col;
+      });
+    };
+    return prune(columns, 1);
+  }, [columns, selectType]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      edges: ['bottom', 'left', 'right'],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/React.isValidElement(finalTitle) ? finalTitle : /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: finalTitle
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleClose,
+          style: styles.closeIcon,
+          hitSlop: HIT_SLOP,
+          children: /*#__PURE__*/_jsx(CloseOutlined, {
+            size: 20,
+            color: theme.palette.fontGray3
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.pickerContainer,
+        children: /*#__PURE__*/_jsx(PickerView, {
+          ...restProps,
+          columns: prunedColumns,
+          value: pickerValue,
+          onChange: handlePickerChange,
+          itemHeight: itemHeight
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footer,
+        children: [/*#__PURE__*/_jsx(Button, {
+          text: cancelText,
+          variant: "base",
+          theme: "secondary",
+          size: "large",
+          onPress: handleCancel,
+          buttonStyle: styles.button
+        }), /*#__PURE__*/_jsx(Button, {
+          text: confirmText,
+          variant: "base",
+          theme: "primary",
+          size: "large",
+          onPress: handleConfirm,
+          buttonStyle: styles.button
+        })]
+      })]
+    })
+  });
+};

package/dist/module/components/base/address-picker-view/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./address-picker-view.js";

package/dist/module/components/base/address-picker-view/style/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useAddressPickerStyles = createThemedStyles((theme, options) => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    borderTopLeftRadius: theme.roundness.lg,
+    borderTopRightRadius: theme.roundness.lg,
+    overflow: 'hidden'
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.palette.fontGray1
+  },
+  closeIcon: {
+    padding: 4
+  },
+  pickerContainer: {
+    height: options?.height ?? 200,
+    // 默认高度，确保 Picker 可见
+    backgroundColor: theme.palette.gray1 // 可选：背景色
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: theme.spacing.lg,
+    gap: theme.spacing.md,
+    borderTopWidth: 1,
+    borderTopColor: theme.palette.gray1
+  },
+  button: {
+    flex: 1
+  },
+  columnHeaderContainer: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1,
+    backgroundColor: theme.palette.gray1
+  },
+  columnHeader: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8
+  },
+  columnHeaderText: {
+    fontSize: 12,
+    color: theme.palette.fontGray2
+  }
+}));

package/dist/module/components/base/address-picker-view/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/base/address-picker-view/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+export const getSelectedOptions = (cols, vals) => {
+  const options = [];
+  let currentCols = cols;
+  if (!vals || !currentCols) return [];
+  for (const val of vals) {
+    if (!currentCols) {
+      break;
+    }
+    const target = currentCols.find(col => col.value === val);
+    if (target) {
+      options.push(target);
+      currentCols = target.children;
+    } else {
+      break;
+    }
+  }
+  return options;
+};

package/dist/module/components/base/carousel/carousel-item.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FULL_SIZE_STYLE = {
+  height: '100%',
+  width: '100%'
+};
+
+/**
+ * 轮播项组件
+ *
+ * 用于包裹轮播图中的每一项内容，自动填充父容器的宽高。
+ *
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <Carousel.Item>
+ *     <Image source={image1} />
+ *   </Carousel.Item>
+ *   <Carousel.Item>
+ *     <Image source={image2} />
+ *   </Carousel.Item>
+ * </Carousel>
+ * ```
+ *
+ * @param props - 组件属性
+ * @param props.children - 轮播项内容
+ * @param props.style - 容器样式
+ * @returns 轮播项组件
+ */
+export const CarouselItem = ({
+  children,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: [FULL_SIZE_STYLE, style],
+    children: children
+  });
+};

package/dist/module/components/base/carousel/carousel.js

@@ -0,0 +1,333 @@
+"use strict";
+
+import { clamp } from 'lodash-es';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { useCarouselAutoplay, useCarouselIndex, useCarouselIndicator, useCarouselLifecycle, useCarouselPanResponder, useCarouselPosition, useCarouselSlides, useCarouselSwipe } from "./hooks/index.js";
+import { useCarouselStyles } from "./style/index.js";
+import { getDefaultTotal, isRenderPropChildren } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 轮播图组件
+ *
+ * 支持水平/垂直滑动、循环播放、自动轮播、虚拟渲染等功能的高性能轮播组件。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <Carousel>
+ *   <Carousel.Item><View /></Carousel.Item>
+ *   <Carousel.Item><View /></Carousel.Item>
+ * </Carousel>
+ *
+ * // 循环播放和自动轮播
+ * <Carousel loop autoplay autoplayInterval={3000}>
+ *   {items.map(item => <Carousel.Item key={item.id}>{item.content}</Carousel.Item>)}
+ * </Carousel>
+ *
+ * // 虚拟渲染（大量数据）
+ * <Carousel total={1000}>
+ *   {(index) => <Carousel.Item><Text>{index}</Text></Carousel.Item>}
+ * </Carousel>
+ * ```
+ *
+ * @param props - 组件属性
+ * @returns 轮播图组件
+ */
+export const Carousel = props => {
+  const {
+    defaultIndex = 0,
+    allowTouchMove = true,
+    autoplay = false,
+    autoplayInterval = 3000,
+    loop = false,
+    direction = 'horizontal',
+    onIndexChange,
+    indicatorProps,
+    indicator,
+    slideSize = 100,
+    trackOffset = 0,
+    stuckAtBoundary = true,
+    rubberband = true,
+    virtualOverscan = 2,
+    total: totalProp,
+    children,
+    style,
+    blockNativeResponder = true,
+    ref
+  } = props;
+  const styles = useCarouselStyles();
+  const theme = useTheme();
+  const [layout, setLayout] = useState({
+    width: 0,
+    height: 0
+  });
+  const [dragging, setDragging] = useState(false);
+  const [animating, setAnimating] = useState(false);
+  const normalizedSlideSize = useMemo(() => {
+    if (!Number.isFinite(slideSize)) return 100;
+    return clamp(slideSize, 0, 100);
+  }, [slideSize]);
+  const normalizedTrackOffset = useMemo(() => {
+    if (stuckAtBoundary) {
+      return 100 - normalizedSlideSize;
+    }
+    if (!Number.isFinite(trackOffset)) return 0;
+    return clamp(trackOffset, 0, 100 - normalizedSlideSize);
+  }, [normalizedSlideSize, trackOffset, stuckAtBoundary]);
+  const total = useMemo(() => {
+    const normalizedDefault = getDefaultTotal(children);
+    return totalProp ?? normalizedDefault;
+  }, [children, totalProp]);
+  const loopEnabled = loop && total > 1;
+
+  // 计算循环播放时需要克隆的前置节点数量
+  // 若是非全屏的轮播项，则在循环播放开启的情况下，则会在下一轮展示第一项时看见下一项为空白（或闪烁），这需要额外渲染更多的项（与offset、slideSize相关）
+  const clonesBefore = useMemo(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+    const offsetSlides = Math.ceil(normalizedTrackOffset / normalizedSlideSize);
+    return Math.max(1, offsetSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
+
+  // 计算循环播放时需要克隆的后置节点数量
+  const clonesAfter = useMemo(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+    const remainingSpace = 100 - normalizedTrackOffset - normalizedSlideSize;
+    const trailingSlides = Math.ceil(remainingSpace / normalizedSlideSize);
+    return Math.max(1, trailingSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
+  const extTotal = loopEnabled ? total + clonesBefore + clonesAfter : total;
+  const slidePixels = useMemo(() => {
+    const trackSize = direction === 'horizontal' ? layout.width : layout.height;
+    if (trackSize <= 0) return 0;
+    return trackSize * (normalizedSlideSize / 100);
+  }, [direction, layout.height, layout.width, normalizedSlideSize]);
+  const trackOffsetPixels = useMemo(() => {
+    const trackSize = direction === 'horizontal' ? layout.width : layout.height;
+    if (trackSize <= 0) return 0;
+    return trackSize * (normalizedTrackOffset / 100);
+  }, [direction, layout.height, layout.width, normalizedTrackOffset]);
+  const {
+    current,
+    updateCurrent,
+    extIndexRef,
+    reportIndexRef,
+    maybeReportIndex,
+    getExtIndexFromIndex,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    getBoundedPosition
+  } = useCarouselIndex({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    normalizedSlideSize,
+    normalizedTrackOffset,
+    stuckAtBoundary,
+    rubberband,
+    onIndexChange
+  });
+
+  // 位置和动画控制
+  const {
+    position,
+    positionValueRef,
+    animateTo,
+    setPositionImmediate
+  } = useCarouselPosition();
+
+  // 切换逻辑
+  const {
+    swipeNext,
+    swipePrev,
+    swipeToExtIndex
+  } = useCarouselSwipe({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    extTotal,
+    extIndexRef,
+    getBoundedPosition,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    updateCurrent,
+    maybeReportIndex,
+    setAnimating,
+    animateTo,
+    setPositionImmediate,
+    ref
+  });
+
+  // 自动轮播
+  useCarouselAutoplay({
+    autoplay,
+    autoplayInterval,
+    total,
+    dragging,
+    current,
+    swipeNext,
+    swipePrev
+  });
+
+  // 生命周期管理
+  useCarouselLifecycle({
+    total,
+    defaultIndex,
+    slidePixels,
+    extIndexRef,
+    reportIndexRef,
+    getExtIndexFromIndex,
+    getBoundedPosition,
+    updateCurrent,
+    setPositionImmediate
+  });
+  const onLayoutTrack = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setLayout(prev => {
+      if (prev.width === width && prev.height === height) return prev;
+      return {
+        width,
+        height
+      };
+    });
+  }, []);
+  const panResponder = useCarouselPanResponder({
+    allowTouchMove,
+    total,
+    slidePixels,
+    direction,
+    extTotal,
+    clonesBefore,
+    blockNativeResponder,
+    position,
+    positionValueRef,
+    extIndexRef,
+    setDragging,
+    setAnimating,
+    updateCurrent,
+    getIndexFromExtIndex,
+    getBoundedPosition,
+    swipeToExtIndex
+  });
+  const trackTransformStyle = useMemo(() => {
+    const translate = Animated.add(Animated.multiply(position.current, -1), trackOffsetPixels);
+    return direction === 'horizontal' ? {
+      transform: [{
+        translateX: translate
+      }]
+    } : {
+      transform: [{
+        translateY: translate
+      }]
+    };
+  }, [direction, position, trackOffsetPixels]);
+
+  // 计算虚拟渲染的范围
+  // 注意: extIndexRef 的变化不会触发重新计算，
+  // 通过 dragging 和 animating 状态的变化来触发虚拟范围的更新
+  const virtualRange = useMemo(() => {
+    if (total <= 0 || slidePixels <= 0) {
+      return null;
+    }
+    const isVirtual = isRenderPropChildren(children) && typeof totalProp === 'number';
+    const effectiveOverscan = isVirtual ? Math.max(virtualOverscan, dragging || animating ? 1 : 0) : virtualOverscan;
+    const currentExtIndex = extIndexRef.current;
+    const start = isVirtual ? clamp(currentExtIndex - effectiveOverscan, 0, extTotal - 1) : 0;
+    const end = isVirtual ? clamp(currentExtIndex + effectiveOverscan, 0, extTotal - 1) : extTotal - 1;
+    return {
+      start,
+      end,
+      isVirtual
+    };
+  }, [total, slidePixels, children, totalProp, virtualOverscan, dragging, animating, extIndexRef,
+  // 保留以表明依赖关系，虽然不会触发更新
+  extTotal]);
+
+  // 计算滑块包装器样式
+  const slideWrapperStyle = useMemo(() => {
+    return direction === 'horizontal' ? {
+      width: slidePixels,
+      height: '100%'
+    } : {
+      height: slidePixels,
+      width: '100%'
+    };
+  }, [direction, slidePixels]);
+
+  // 计算虚拟渲染的占位空间样式
+  const spacerStyles = useMemo(() => {
+    if (!virtualRange) return null;
+    const {
+      start,
+      end
+    } = virtualRange;
+    const leadingSize = start * slidePixels;
+    const trailingSize = (extTotal - end - 1) * slidePixels;
+    return {
+      leading: direction === 'horizontal' ? {
+        width: leadingSize
+      } : {
+        height: leadingSize
+      },
+      trailing: direction === 'horizontal' ? {
+        width: trailingSize
+      } : {
+        height: trailingSize
+      },
+      leadingSize,
+      trailingSize
+    };
+  }, [virtualRange, slidePixels, extTotal, direction]);
+  const {
+    renderSlides
+  } = useCarouselSlides({
+    children,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    slideWrapperStyle,
+    spacerStyles,
+    slideStyles: styles
+  });
+  const {
+    renderIndicator
+  } = useCarouselIndicator({
+    indicator,
+    indicatorProps,
+    total,
+    current,
+    activeColor: theme.palette.brand7,
+    inactiveColor: theme.palette.fontGray5,
+    styles
+  });
+  const trackInnerStyle = useMemo(() => {
+    return direction === 'horizontal' ? {
+      flexDirection: 'row',
+      height: '100%'
+    } : {
+      flexDirection: 'column',
+      width: '100%'
+    };
+  }, [direction]);
+  return /*#__PURE__*/_jsx(View, {
+    style: StyleSheet.flatten([styles.container, style]),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.track,
+      onLayout: onLayoutTrack,
+      ...panResponder?.panHandlers,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: StyleSheet.flatten([styles.trackInner, trackInnerStyle, trackTransformStyle]),
+        children: renderSlides()
+      }), renderIndicator()]
+    })
+  });
+};

package/dist/module/components/base/carousel/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+/**
+ * 轮播图动画时长（毫秒）
+ */
+export const CAROUSEL_ANIMATION_DURATION = 300;
+
+/**
+ * 橡皮筋效果阻尼系数
+ */
+export const RUBBERBAND_DAMPING = 0.35;
+
+/**
+ * 手势识别最小移动距离（像素）
+ */
+export const GESTURE_MIN_DISTANCE = 5;
+
+/**
+ * 速度投影系数（用于计算惯性滑动距离）
+ */
+export const VELOCITY_PROJECTION_FACTOR = 2000;

package/dist/module/components/base/carousel/hooks/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+export { useCarouselAutoplay } from "./use-carousel-autoplay.js";
+export { useCarouselIndex } from "./use-carousel-index.js";
+export { useCarouselIndicator } from "./use-carousel-indicator.js";
+export { useCarouselLifecycle } from "./use-carousel-lifecycle.js";
+export { useCarouselPanResponder } from "./use-carousel-pan-responder.js";
+export { useCarouselPosition } from "./use-carousel-position.js";
+export { useCarouselSlides } from "./use-carousel-slides.js";
+export { useCarouselSwipe } from "./use-carousel-swipe.js";