@seakoi/native-ui 1.1.3 → 1.2.0

package/dist/commonjs/components/base/{picker → picker-backup}/picker-trigger.js

@@ -8,8 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../../native-provider/index.js");
 var _index2 = require("../flex/index.js");
-var _index3 = require("../text/index.js");
-var _index4 = require("./style/index.js");
+var _index3 = require("../picker/style/index.js");
+var _index4 = require("../text/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /** Picker 基础触发器 Props */
@@ -23,7 +23,7 @@ const PickerTrigger = ({
   onPress
 }) => {
   const theme = (0, _index.useTheme)();
-  const styles = (0, _index4.usePickerFieldStyles)();
+  const styles = (0, _index3.usePickerFieldStyles)();
 
   /** 渲染触发器 */
   const renderTrigger = () => {
@@ -43,8 +43,8 @@ const PickerTrigger = ({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Flex, {
         align: "center",
         gap: theme.spacing.sm,
-        style: [styles.content, disabled && styles.disabled, style],
-        children: /*#__PURE__*/_react.default.isValidElement(displayText) ? displayText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+        style: [disabled && styles.disabled, style],
+        children: /*#__PURE__*/_react.default.isValidElement(displayText) ? displayText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
           size: 14,
           color: displayText ? theme.palette.fontGray1 : theme.palette.fontGray3,
           children: displayText || placeholder

package/dist/commonjs/components/base/picker-backup/style/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerFieldStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const usePickerFieldStyles = exports.usePickerFieldStyles = (0, _index.createThemedStyles)(theme => ({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: theme.palette.white,
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  disabled: {
+    backgroundColor: theme.palette.blueGray2
+  }
+}));

package/dist/commonjs/components/base/picker-backup/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeColumns = void 0;
+/** 默认字段名 */
+const DEFAULT_FIELD_NAMES = {
+  label: 'label',
+  value: 'value',
+  children: 'children'
+};
+
+/**
+ * 将自定义字段名的数据标准化为内部使用的 { label, value, children } 格式
+ * 如果 fieldNames 与默认值相同，则直接返回原始数据（零开销）
+ */
+const normalizeColumns = (columns, fieldNames) => {
+  if (!fieldNames) return columns;
+  const merged = {
+    ...DEFAULT_FIELD_NAMES,
+    ...fieldNames
+  };
+
+  // 如果所有字段名都和默认值一样，无需转换
+  if (merged.label === 'label' && merged.value === 'value' && merged.children === 'children') {
+    return columns;
+  }
+  const normalizeOption = item => {
+    const normalized = {
+      ...item
+    };
+    if (merged.label !== 'label') {
+      normalized.label = item[merged.label];
+    }
+    if (merged.value !== 'value') {
+      normalized.value = item[merged.value];
+    }
+    if (merged.children !== 'children' && item[merged.children]) {
+      normalized.children = item[merged.children].map(normalizeOption);
+    } else if (item.children) {
+      normalized.children = item.children.map(normalizeOption);
+    }
+    return normalized;
+  };
+  return columns.map(column => {
+    if (Array.isArray(column)) {
+      return column.map(normalizeOption);
+    }
+    return normalizeOption(column);
+  });
+};
+exports.normalizeColumns = normalizeColumns;

package/dist/commonjs/components/base/picker-view/picker-view-column.js

@@ -52,6 +52,21 @@ const PickerViewColumn = exports.PickerViewColumn = /*#__PURE__*/(0, _react.memo
     }
   });
   const selectedIndex = (0, _column.getSelectedIndex)(options.findIndex(item => item.value === value));
+
+  /**
+   * 自初始化：当 value 为空或不在 options 中时，主动上报第一个可用选项
+   * 这从根本上解决了「不滚动就拿不到值」的问题
+   */
+  (0, _react.useEffect)(() => {
+    if (options.length === 0) return;
+    const hasValidValue = value !== undefined && value !== null && options.some(item => item.value === value);
+    if (!hasValidValue) {
+      const defaultIndex = (0, _column.findUsableOptionIndex)(options, true, 0, false);
+      if (defaultIndex >= 0) {
+        onChange?.(options[defaultIndex]);
+      }
+    }
+  }, [options, value, onChange]);
   (0, _react.useEffect)(() => {
     if (selectedIndex >= 0 && selectedIndex < options.length) {
       flatListRef.current?.scrollToIndex({

package/dist/commonjs/components/base/picker-view/picker-view.js

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

package/dist/commonjs/components/base/tag/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _tag = require("./tag.js");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
+var _default = exports.default = _tag.Tag;

package/dist/commonjs/components/base/tag/style/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTagStyles = exports.useTagGroupStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useTagStyles = exports.useTagStyles = (0, _index.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'
+    }
+  };
+});
+const useTagGroupStyles = exports.useTagGroupStyles = (0, _index.createThemedStyles)(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  };
+});

package/dist/commonjs/components/base/tag/tag-context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagContext = void 0;
+var _react = require("react");
+const TagContext = exports.TagContext = /*#__PURE__*/(0, _react.createContext)({
+  size: 'medium',
+  disabled: false
+});
+TagContext.displayName = 'TagContext';

package/dist/commonjs/components/base/tag/tag-group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./style/index.js");
+var _tagContext = require("./tag-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TagGroup = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  size,
+  disabled
+}) => {
+  const groupStyles = (0, _index.useTagGroupStyles)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tagContext.TagContext.Provider, {
+    value: {
+      size,
+      disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [groupStyles.container, direction === 'vertical' && groupStyles.vertical, gap > 0 && {
+        gap
+      }, style],
+      children: children
+    })
+  });
+};
+exports.TagGroup = TagGroup;

package/dist/commonjs/components/base/tag/tag.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("./style/index.js");
+var _tagContext = require("./tag-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Tag = ({
+  text,
+  variant = 'solid',
+  style,
+  theme = 'primary',
+  disabled: customDisabled,
+  size,
+  child,
+  textStyle,
+  onPress
+}) => {
+  const context = (0, _react.use)(_tagContext.TagContext);
+  const mergedDisabled = customDisabled ?? context.disabled ?? false;
+  const mergedSize = size ?? context.size ?? 'medium';
+  const styles = (0, _index2.useTagStyles)({
+    variant,
+    themeColor: theme,
+    mergedSize
+  });
+  const tagStyle = (0, _react.useMemo)(() => {
+    return [styles.tag, styles[variant], styles[mergedSize], style];
+  }, [mergedSize, style, variant, styles]);
+  const tagNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: tagStyle,
+    onPress: mergedDisabled ? undefined : onPress,
+    disabled: mergedDisabled,
+    children: child ? child : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      style: [styles[`text-${variant}`], styles[`font-${mergedSize}`], textStyle],
+      children: text
+    })
+  });
+  return tagNode;
+};
+exports.Tag = Tag;

package/dist/commonjs/components/base/tag/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,51 @@
+"use strict";
+
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 轮播图指示器渲染组件
+ *
+ * 负责渲染轮播图底部的指示器（小圆点），支持自定义指示器或使用默认样式。
+ * 当轮播项总数小于等于 1 时，不显示指示器。
+ *
+ * @param props - 组件属性配置
+ * @param props.indicator - 指示器配置（false 表示不显示，函数表示自定义渲染）
+ * @param props.indicatorProps - 指示器属性配置（颜色、样式）
+ * @param props.total - 轮播项总数
+ * @param props.current - 当前激活的索引
+ * @param props.activeColor - 激活状态的指示器颜色
+ * @param props.inactiveColor - 非激活状态的指示器颜色
+ * @param props.styles - 指示器样式对象
+ *
+ * @returns 渲染的指示器内容或 null
+ */
+export const CarouselIndicator = props => {
+  const {
+    indicator,
+    indicatorProps,
+    total,
+    current,
+    activeColor,
+    inactiveColor,
+    styles
+  } = props;
+  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__*/_jsx(View, {
+    style: [styles.indicatorContainer, indicatorProps?.style],
+    children: Array.from({
+      length: total
+    }, (_, i) => {
+      const isActive = i === current;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.indicatorDot, {
+          backgroundColor: isActive ? dotActiveColor : inactiveColor
+        }, isActive && styles.indicatorDotActive]
+      }, i);
+    })
+  });
+};

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

@@ -0,0 +1,135 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { clamp } from 'lodash-es';
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 轮播图滑块渲染组件
+ *
+ * 负责渲染轮播图的滑块内容，使用 data + renderItem 模式。
+ * 实现虚拟渲染优化，仅渲染可见范围内的滑块，并处理循环播放时的克隆逻辑。
+ * 为虚拟渲染添加前后占位空间，确保滚动位置正确。
+ *
+ * @template Data - 数据项类型
+ * @param props - 组件属性配置
+ * @param props.data - 数据源数组
+ * @param props.renderItem - 渲染每一项的函数
+ * @param props.total - 轮播项总数
+ * @param props.virtualRange - 虚拟渲染范围（start、end、isVirtual）
+ * @param props.loopEnabled - 是否启用循环播放
+ * @param props.clonesBefore - 循环播放时前置克隆节点数量
+ * @param props.direction - 滑动方向
+ * @param props.slidePixels - 单个滑块的像素大小
+ * @param props.extTotal - 扩展后的总数（包含克隆节点）
+ *
+ * @returns 渲染的滑块内容或 null
+ */
+export const CarouselSlides = props => {
+  const {
+    data,
+    renderItem,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    direction,
+    slidePixels,
+    extTotal
+  } = props;
+
+  // 计算滑块包装器样式
+  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 getIndexFromExtIndex = useMemoizedFn(extIndex => {
+    if (!loopEnabled) return 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 slideElements = useMemo(() => {
+    if (!virtualRange) return null;
+    const {
+      start,
+      end
+    } = virtualRange;
+    const elements = [];
+    const getElementForExtIndex = extIndex => {
+      const logicalIndex = loopEnabled ? getIndexFromExtIndex(extIndex) : clamp(extIndex, 0, total - 1);
+      const item = data[logicalIndex];
+      return renderItem(item, logicalIndex);
+    };
+    for (let extIndex = start; extIndex <= end; extIndex += 1) {
+      const element = getElementForExtIndex(extIndex);
+      if (!element) continue;
+      elements.push(/*#__PURE__*/_jsx(View, {
+        style: slideWrapperStyle,
+        children: element
+      }, extIndex));
+    }
+    return elements;
+  }, [virtualRange, loopEnabled, total, data, renderItem, slideWrapperStyle, getIndexFromExtIndex]);
+
+  // 前置占位空间
+  const leadSpacer = useMemo(() => {
+    if (!virtualRange?.isVirtual || !spacerStyles || spacerStyles.leadingSize <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: spacerStyles.leading
+    });
+  }, [virtualRange?.isVirtual, spacerStyles]);
+
+  // 后置占位空间
+  const trailSpacer = useMemo(() => {
+    if (!virtualRange?.isVirtual || !spacerStyles || spacerStyles.trailingSize <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: spacerStyles.trailing
+    });
+  }, [virtualRange?.isVirtual, spacerStyles]);
+  if (!virtualRange) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leadSpacer, slideElements, trailSpacer]
+  });
+};