@seakoi/native-ui 1.1.2 → 1.2.0

package/src/components/base/picker-view/picker-view.tsx

@@ -55,8 +55,8 @@ export const PickerView: React.FC<PickerViewProps> = ({
   }, [dataType, columns, value]);
 
   // 保存 columnDefaultValues 到 ref，供 handleChange 使用
-  const columnDefaultValuesRef = useRef<PickerValue[]>(columnDefaultValues);
-  columnDefaultValuesRef.current = columnDefaultValues;
+  // const columnDefaultValuesRef = useRef<PickerValue[]>(columnDefaultValues);
+  // columnDefaultValuesRef.current = columnDefaultValues;
 
   /** 获取容器实际高度 */
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
@@ -88,7 +88,7 @@ export const PickerView: React.FC<PickerViewProps> = ({
         case 'multiple': {
           const newValues = [...value];
 
-          columnDefaultValuesRef.current.forEach((item, i) => {
+          columnDefaultValues.forEach((item, i) => {
             if (isNil(newValues[i])) {
               newValues[i] = item;
             }
@@ -168,7 +168,7 @@ export const PickerView: React.FC<PickerViewProps> = ({
 
             if (!isControlled && !isNoDefaultValue) {
               if (dataType === 'multiple') {
-                return columnDefaultValuesRef.current[index];
+                return columnDefaultValues[index];
               }
 
               // 真的没有就默认第一个选项

package/src/components/base/picker-view/utils/picker.ts

@@ -4,7 +4,6 @@ import type {
   PickerOptionCascade,
   PickerOptionType,
   PickerValue,
-  PickerViewProps,
 } from '../types';
 
 export const getVisibleItemCount = (n: number) => {
@@ -161,7 +160,7 @@ export const findDefaultValue = (value: PickerValue, options: PickerOption[]) =>
  */
 export const findOptionsByValue = (
   value: PickerValue[],
-  columns: PickerViewProps['columns'],
+  columns: Column[],
 ): PickerOption[] => {
   if (!value?.length) return [];
 
@@ -192,6 +191,7 @@ export const findOptionsByValue = (
     default: {
       const options = columns as PickerOption[];
       const option = options.find(item => item.value === value[0]);
+
       return option ? [option] : [];
     }
   }
@@ -200,9 +200,7 @@ export const findOptionsByValue = (
 /**
  * 获取 columns 的默认值（每列的第一个选项）
  */
-export const getDefaultValues = (
-  columns: PickerViewProps['columns'],
-): PickerValue[] => {
+export const getDefaultValues = (columns: Column[]): PickerValue[] => {
   const dataType = getDataType(columns);
 
   switch (dataType) {

package/src/components/base/tag/index.ts

@@ -0,0 +1,5 @@
+import { Tag } from './tag';
+export * from './tag';
+export type * from './types';
+
+export default Tag;

package/src/components/base/tag/style/index.tsx

@@ -0,0 +1,84 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useTagStyles = createThemedStyles((theme, props) => {
+  const { themeColor = 'primary' } = props;
+  const BASE_COLOR_MAP = {
+    primary: {
+      baseColor: theme.palette.brand7,
+      lightColor: theme.palette.brand1,
+    },
+    danger: {
+      baseColor: theme.palette.error6,
+      lightColor: theme.palette.error1,
+    },
+    default: {
+      baseColor: theme.palette.gray6,
+      lightColor: theme.palette.gray2,
+    },
+  };
+  const Color = BASE_COLOR_MAP[themeColor];
+
+  return {
+    tag: {},
+    large: {
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4,
+    },
+    medium: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 2,
+    },
+    small: {
+      paddingHorizontal: 4,
+      paddingVertical: 1.5,
+      borderRadius: 1.5,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    'font-small': {
+      fontSize: 10,
+    },
+    'font-medium': {
+      fontSize: 12,
+    },
+    'font-large': {
+      fontSize: 14,
+    },
+    filled: {
+      backgroundColor: Color.lightColor,
+    },
+    'text-filled': {
+      color: Color.baseColor,
+    },
+    outlined: {
+      borderColor: Color.baseColor,
+      borderWidth: 0.5,
+    },
+    'text-outlined': {
+      color: Color.baseColor,
+    },
+    solid: {
+      backgroundColor: Color.baseColor,
+    },
+    'text-solid': {
+      color: '#fff',
+    },
+  };
+});
+
+export const useTagGroupStyles = createThemedStyles(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+  };
+});

package/src/components/base/tag/tag-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import type { TagContextValue } from './types';
+
+export const TagContext = createContext<TagContextValue>({
+  size: 'medium',
+  disabled: false,
+});
+TagContext.displayName = 'TagContext';

package/src/components/base/tag/tag-group.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTagGroupStyles } from './style';
+import { TagContext } from './tag-context';
+import type { TagGroupProps } from './types';
+
+export const TagGroup: React.FC<TagGroupProps> = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  size,
+  disabled,
+}) => {
+  const groupStyles = useTagGroupStyles();
+  return (
+    <TagContext.Provider value={{ size, disabled }}>
+      <View
+        style={[
+          groupStyles.container,
+          direction === 'vertical' && groupStyles.vertical,
+          gap > 0 && { gap },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </TagContext.Provider>
+  );
+};

package/src/components/base/tag/tag.tsx

@@ -0,0 +1,50 @@
+import React, { use, useMemo } from 'react';
+import { Pressable } from 'react-native';
+
+import { Text } from '#components/base';
+
+import { useTagStyles } from './style';
+import { TagContext } from './tag-context';
+import { type TagProps } from './types';
+export const Tag: React.FC<TagProps> = ({
+  text,
+  variant = 'solid',
+  style,
+  theme = 'primary',
+  disabled: customDisabled,
+  size,
+  child,
+  textStyle,
+  onPress,
+}) => {
+  const context = use(TagContext);
+  const mergedDisabled = customDisabled ?? context.disabled ?? false;
+  const mergedSize = size ?? context.size ?? 'medium';
+  const styles = useTagStyles({ variant, themeColor: theme, mergedSize });
+  const tagStyle = useMemo(() => {
+    return [styles.tag, styles[variant], styles[mergedSize], style];
+  }, [mergedSize, style, variant, styles]);
+
+  const tagNode: React.ReactNode = (
+    <Pressable
+      style={tagStyle}
+      onPress={mergedDisabled ? undefined : onPress}
+      disabled={mergedDisabled}
+    >
+      {child ? (
+        child
+      ) : (
+        <Text
+          style={[
+            styles[`text-${variant}`],
+            styles[`font-${mergedSize}`],
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </Pressable>
+  );
+  return tagNode;
+};

package/src/components/base/tag/types.ts

@@ -0,0 +1,71 @@
+import type { PropsWithChildren } from 'react';
+import type {
+  GestureResponderEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { AnyObject } from '#shared/utils/types';
+
+export interface TagProps {
+  /** 标签文本 */
+  text?: string;
+
+  /** 标签主题色 */
+  color?: string;
+
+  /** 结构形态 */
+  variant?: 'filled' | 'solid' | 'outlined';
+
+  /** 标签样式 */
+  style?: StyleProp<ViewStyle>;
+
+  /** 标签内容样式 */
+  textStyle?: StyleProp<TextStyle>;
+
+  /** 标签主题色 */
+  theme?: 'primary' | 'default' | 'danger';
+
+  /** 标签尺寸 */
+  size?: 'small' | 'medium' | 'large';
+
+  /** 标签是否可关闭 */
+  closable?: boolean;
+
+  /** 标签图标 */
+  icon?: React.ReactElement<AnyObject>;
+
+  /** 标签内容 */
+  child?: React.ReactNode;
+
+  /** 标签跳转链接 */
+  href?: string;
+
+  /** 标签是否禁用 */
+  disabled?: boolean;
+
+  /** 标签跳转链接目标 */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  /** 标签点击 事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+}
+
+export interface TagGroupProps extends PropsWithChildren, TagContextValue {
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+
+  /** 容器样式 */
+  gap?: number;
+
+  /** 容器样式 */
+  direction?: 'horizontal' | 'vertical';
+}
+
+export interface TagContextValue {
+  /** 按钮标签的尺寸 */
+  size?: 'small' | 'medium' | 'large';
+  /** 按钮标签的禁用状态 */
+  disabled?: boolean;
+}

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

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CarouselItem = void 0;
-var _reactNative = require("react-native");
-var _jsxRuntime = require("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 轮播项组件
- */
-const CarouselItem = ({
-  children,
-  style
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [FULL_SIZE_STYLE, style],
-    children: children
-  });
-};
-exports.CarouselItem = CarouselItem;

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

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

package/dist/commonjs/components/base/carousel/hooks/use-carousel-indicator.js

@@ -1,63 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCarouselIndicator = void 0;
-var _ahooks = require("ahooks");
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 轮播图指示器渲染 Hook
- *
- * 负责渲染轮播图底部的指示器（小圆点），支持自定义指示器或使用默认样式。
- * 当轮播项总数小于等于 1 时，不显示指示器。
- *
- * @param params - Hook 参数配置
- * @param params.indicator - 指示器配置（false 表示不显示，函数表示自定义渲染）
- * @param params.indicatorProps - 指示器属性配置（颜色、样式）
- * @param params.total - 轮播项总数
- * @param params.current - 当前激活的索引
- * @param params.activeColor - 激活状态的指示器颜色
- * @param params.inactiveColor - 非激活状态的指示器颜色
- * @param params.styles - 指示器样式对象
- *
- * @returns Hook 返回值
- * @returns renderIndicator - 渲染指示器的方法，返回 ReactNode 或 null
- */
-const useCarouselIndicator = params => {
-  const {
-    indicator,
-    indicatorProps,
-    total,
-    current,
-    activeColor,
-    inactiveColor,
-    styles
-  } = params;
-  const renderIndicator = (0, _ahooks.useMemoizedFn)(() => {
-    if (indicator === false) return null;
-    if (total <= 1) return null;
-    if (typeof indicator === 'function') {
-      return indicator(total, current);
-    }
-    const dotActiveColor = indicatorProps?.color ?? activeColor;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: _reactNative.StyleSheet.flatten([styles.indicatorContainer, indicatorProps?.style]),
-      children: Array.from({
-        length: total
-      }, (_, i) => {
-        const isActive = i === current;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: _reactNative.StyleSheet.flatten([styles.indicatorDot, {
-            backgroundColor: isActive ? dotActiveColor : inactiveColor
-          }, isActive && styles.indicatorDotActive])
-        }, i);
-      })
-    });
-  });
-  return {
-    renderIndicator
-  };
-};
-exports.useCarouselIndicator = useCarouselIndicator;

package/dist/commonjs/components/base/carousel/hooks/use-carousel-slides.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCarouselSlides = void 0;
-var _ahooks = require("ahooks");
-var _lodashEs = require("lodash-es");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _utils = require("../utils.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 轮播图滑块渲染 Hook
- *
- * 负责渲染轮播图的滑块内容，支持静态子组件和 render prop 两种方式。
- * 实现虚拟渲染优化，仅渲染可见范围内的滑块，并处理循环播放时的克隆逻辑。
- * 为虚拟渲染添加前后占位空间，确保滚动位置正确。
- *
- * @param params - Hook 参数配置
- * @param params.children - 轮播项内容（静态子组件或 render prop 函数）
- * @param params.total - 轮播项总数
- * @param params.virtualRange - 虚拟渲染范围（start、end、isVirtual）
- * @param params.loopEnabled - 是否启用循环播放
- * @param params.clonesBefore - 循环播放时前置克隆节点数量
- * @param params.slideWrapperStyle - 滑块包装器样式
- * @param params.spacerStyles - 虚拟渲染占位空间样式
- * @param params.slideStyles - 滑块样式对象
- *
- * @returns Hook 返回值
- * @returns staticSlides - 静态滑块数组（仅在非 render prop 模式下有值）
- * @returns renderSlides - 渲染滑块的方法，返回 ReactNode 或 null
- */
-const useCarouselSlides = params => {
-  const {
-    children,
-    total,
-    virtualRange,
-    loopEnabled,
-    clonesBefore,
-    slideWrapperStyle,
-    spacerStyles,
-    slideStyles
-  } = params;
-  const staticSlides = (0, _react.useMemo)(() => {
-    if ((0, _utils.isRenderPropChildren)(children)) return [];
-    return (0, _utils.normalizeChildren)(children, total);
-  }, [children, total]);
-  const getIndexFromExtIndex = (0, _ahooks.useMemoizedFn)(extIndex => {
-    if (!loopEnabled) return (0, _lodashEs.clamp)(extIndex, 0, total - 1);
-    if (extIndex < clonesBefore) {
-      return ((extIndex - clonesBefore) % total + total) % total;
-    }
-    if (extIndex >= clonesBefore + total) {
-      return (extIndex - clonesBefore - total) % total;
-    }
-    return extIndex - clonesBefore;
-  });
-  const renderSlides = (0, _ahooks.useMemoizedFn)(() => {
-    if (!virtualRange) return null;
-    const {
-      start,
-      end,
-      isVirtual
-    } = virtualRange;
-    const getElementForExtIndex = extIndex => {
-      const logicalIndex = loopEnabled ? getIndexFromExtIndex(extIndex) : (0, _lodashEs.clamp)(extIndex, 0, total - 1);
-      if ((0, _utils.isRenderPropChildren)(children)) return children(logicalIndex);
-      return staticSlides[logicalIndex];
-    };
-    const slideElements = [];
-    for (let extIndex = start; extIndex <= end; extIndex += 1) {
-      const element = getElementForExtIndex(extIndex);
-      if (!element) continue;
-      slideElements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [slideStyles.slide, slideWrapperStyle],
-        children: element
-      }, extIndex));
-    }
-    const leadSpacer = isVirtual && spacerStyles && spacerStyles.leadingSize > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: spacerStyles.leading
-    }) : null;
-    const trailSpacer = isVirtual && spacerStyles && spacerStyles.trailingSize > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: spacerStyles.trailing
-    }) : null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [leadSpacer, slideElements, trailSpacer]
-    });
-  });
-  return {
-    staticSlides,
-    renderSlides
-  };
-};
-exports.useCarouselSlides = useCarouselSlides;

package/dist/commonjs/components/base/carousel/utils.js

@@ -1,63 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.normalizeChildren = exports.isRenderPropChildren = exports.getDefaultTotal = exports.getBoundaryIndexRange = void 0;
-var _react = require("react");
-const isRenderPropChildren = children => {
-  return typeof children === 'function';
-};
-exports.isRenderPropChildren = isRenderPropChildren;
-const normalizeChildren = (children, total) => {
-  if (!children) return [];
-  if (isRenderPropChildren(children)) {
-    return Array.from({
-      length: total
-    }, (_, i) => children(i));
-  }
-  return _react.Children.toArray(children);
-};
-exports.normalizeChildren = normalizeChildren;
-const getDefaultTotal = children => {
-  if (!children) return 0;
-  if (isRenderPropChildren(children)) return 0;
-  return Array.isArray(children) ? children.length : 1;
-};
-
-/**
- * 计算轮播边界索引范围
- *
- * @param params - 参数配置
- * @param params.total - 轮播项总数
- * @param params.slideSize - 单个滑块所占百分比 (0-100)
- * @param params.trackOffset - 轨道偏移百分比 (0-100)
- * @param params.stuckAtBoundary - 是否在边界处卡住
- * @returns 边界索引范围 { min, max }
- */
-exports.getDefaultTotal = getDefaultTotal;
-const getBoundaryIndexRange = params => {
-  const {
-    total,
-    slideSize,
-    trackOffset,
-    stuckAtBoundary
-  } = params;
-  if (total <= 0) return {
-    min: 0,
-    max: 0
-  };
-  if (!stuckAtBoundary) return {
-    min: 0,
-    max: total - 1
-  };
-  const slideRatio = slideSize / 100;
-  const offsetRatio = trackOffset / 100;
-  const min = 0 + offsetRatio / (slideRatio || 1);
-  const max = total - 1 - (1 - slideRatio - offsetRatio) / (slideRatio || 1);
-  return {
-    min,
-    max
-  };
-};
-exports.getBoundaryIndexRange = getBoundaryIndexRange;