@pisell/materials 3.3.82 → 3.3.83

package/es/components/pisellSingleLineText/PisellSingleLineText.stories.js

@@ -0,0 +1,507 @@
+import { PisellSingleLineText } from "./PisellSingleLineText";
+import { UserOutlined, SearchOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+
+/**
+ * PisellSingleLineText 是一个通用的单行文本输入/展示组件。
+ * 
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 完整的校验框架
+ * - 受控/非受控模式
+ * - 丰富的配置项
+ */
+var meta = {
+  title: '表单/PisellSingleLineText',
+  component: PisellSingleLineText,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '单行文本输入/展示组件，基于 Ant Design Input 开发。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '状态模式',
+      table: {
+        defaultValue: {
+          summary: 'edit'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    value: {
+      control: 'text',
+      description: '当前值（受控）'
+    },
+    defaultValue: {
+      control: 'text',
+      description: '默认值（非受控）'
+    },
+    placeholder: {
+      control: 'text',
+      description: '占位文本'
+    },
+    maxLength: {
+      control: 'number',
+      description: '最大长度'
+    },
+    showCount: {
+      control: 'boolean',
+      description: '显示字数统计'
+    },
+    allowClear: {
+      control: 'boolean',
+      description: '显示清空按钮'
+    },
+    required: {
+      control: 'boolean',
+      description: '是否必填'
+    },
+    minLength: {
+      control: 'number',
+      description: '最小长度'
+    },
+    ellipsis: {
+      control: 'boolean',
+      description: '超出省略（只读态）'
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: '显示提示（只读态）'
+    },
+    fontSize: {
+      control: 'text',
+      description: '字号（只读态）'
+    },
+    color: {
+      control: 'color',
+      description: '文本颜色（只读态）'
+    },
+    displayVariant: {
+      control: 'radio',
+      options: ['text', 'link', 'badge', 'tag'],
+      description: '展示样式变体（只读态）',
+      table: {
+        defaultValue: {
+          summary: 'text'
+        }
+      }
+    },
+    badgeStatus: {
+      control: 'select',
+      options: ['success', 'processing', 'default', 'error', 'warning'],
+      description: '徽标状态（displayVariant=badge 时有效）'
+    },
+    tagColor: {
+      control: 'text',
+      description: '标签颜色（displayVariant=tag 时有效）'
+    },
+    tagClosable: {
+      control: 'boolean',
+      description: '标签是否可关闭（displayVariant=tag 时有效）'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础编辑态示例
+ */
+export var Basic = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入内容'
+  }
+};
+
+/**
+ * 只读态示例 - 展示文本内容
+ */
+export var ReadMode = {
+  args: {
+    mode: 'read',
+    value: '这是一段展示的文本内容'
+  }
+};
+
+/**
+ * 只读态 - 超长文本截断
+ */
+export var ReadModeEllipsis = {
+  args: {
+    mode: 'read',
+    value: '这是一段非常非常非常非常非常非常非常非常非常非常长的文本内容，会被截断显示省略号',
+    ellipsis: true,
+    showTooltip: true
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+
+/**
+ * 禁用态示例
+ */
+export var Disabled = {
+  args: {
+    mode: 'edit',
+    value: '禁用状态的内容',
+    disabled: true
+  }
+};
+
+/**
+ * 必填校验示例
+ */
+export var Required = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入（必填）',
+    required: true,
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 长度校验示例
+ */
+export var LengthValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入 3-10 个字符',
+    minLength: 3,
+    maxLength: 10,
+    showCount: true,
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 正则校验 - 仅数字
+ */
+export var PatternValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入数字',
+    pattern: '^[0-9]+$',
+    errorMessage: '只能输入数字',
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 自定义校验函数
+ */
+export var CustomValidator = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入（不能包含"禁止"）',
+    validator: function validator(value) {
+      if (value.includes('禁止')) {
+        return '内容不能包含敏感词';
+      }
+      return true;
+    },
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 前缀图标
+ */
+export var WithPrefix = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入用户名',
+    prefix: /*#__PURE__*/React.createElement(UserOutlined, null)
+  }
+};
+
+/**
+ * 后缀文本
+ */
+export var WithSuffix = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入金额',
+    suffix: '元'
+  }
+};
+
+/**
+ * 前置标签
+ */
+export var WithAddonBefore = {
+  args: {
+    mode: 'edit',
+    placeholder: 'www.example.com',
+    addonBefore: 'https://'
+  }
+};
+
+/**
+ * 后置标签 - 按钮
+ */
+export var WithAddonAfter = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入搜索内容',
+    addonAfter: /*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, "\u641C\u7D22")
+  }
+};
+
+/**
+ * 完整配置示例
+ */
+export var FullFeatures = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入',
+    maxLength: 20,
+    showCount: true,
+    allowClear: true,
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    required: true,
+    minLength: 3,
+    validateTrigger: 'both'
+  }
+};
+
+/**
+ * 自定义样式 - 只读态
+ */
+export var CustomStyle = {
+  args: {
+    mode: 'read',
+    value: '这是自定义样式的文本',
+    fontSize: '20px',
+    fontWeight: 'bold',
+    color: '#1890ff',
+    textAlign: 'center'
+  }
+};
+
+/**
+ * 只读态 - 普通文本样式（默认）
+ */
+export var DisplayVariantText = {
+  args: {
+    mode: 'read',
+    value: '普通文本样式',
+    displayVariant: 'text'
+  }
+};
+
+/**
+ * 只读态 - 超链接样式
+ */
+export var DisplayVariantLink = {
+  args: {
+    mode: 'read',
+    value: '点击查看详情',
+    displayVariant: 'link',
+    onLinkClick: function onLinkClick() {
+      return alert('链接被点击');
+    }
+  }
+};
+
+/**
+ * 只读态 - 徽标样式（圆形红色徽标）
+ */
+export var DisplayVariantBadge = {
+  args: {
+    mode: 'read',
+    value: '5',
+    displayVariant: 'badge',
+    badgeStatus: 'error' // 使用红色
+  }
+};
+
+/**
+ * 只读态 - 徽标样式（文本内容）
+ */
+export var DisplayVariantBadgeText = {
+  args: {
+    mode: 'read',
+    value: 'NEW',
+    displayVariant: 'badge',
+    badgeStatus: 'error'
+  }
+};
+
+/**
+ * 只读态 - 标签样式（默认灰色边框）
+ */
+export var DisplayVariantTag = {
+  args: {
+    mode: 'read',
+    value: 'text',
+    displayVariant: 'tag'
+  }
+};
+
+/**
+ * 只读态 - 标签样式（自定义颜色）
+ */
+export var DisplayVariantTagColored = {
+  args: {
+    mode: 'read',
+    value: '重要',
+    displayVariant: 'tag',
+    tagColor: 'red'
+  }
+};
+
+/**
+ * 只读态 - 标签样式（可关闭）
+ */
+export var DisplayVariantTagClosable = {
+  args: {
+    mode: 'read',
+    value: '可关闭标签',
+    displayVariant: 'tag',
+    tagClosable: true,
+    onTagClose: function onTagClose() {
+      return alert('标签被关闭');
+    }
+  }
+};
+
+/**
+ * 展示样式对比 - 所有变体（基于 Figma 设计）
+ */
+export var AllDisplayVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u666E\u901A\u6587\u672C\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "Olivia Rhye",
+      displayVariant: "text"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u8D85\u94FE\u63A5\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "Link",
+      displayVariant: "link",
+      onLinkClick: function onLinkClick() {
+        return alert('链接被点击');
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u5FBD\u6807\uFF08\u6570\u5B57\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "5",
+      displayVariant: "badge",
+      badgeStatus: "error"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u5FBD\u6807\uFF08\u6587\u672C\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "text",
+      displayVariant: "badge",
+      badgeStatus: "error"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u6807\u7B7E\uFF08\u9ED8\u8BA4\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "text",
+      displayVariant: "tag"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u6807\u7B7E\uFF08\u84DD\u8272\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "\u6807\u7B7E",
+      displayVariant: "tag",
+      tagColor: "blue"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", {
+      style: {
+        width: '120px'
+      }
+    }, "\u6807\u7B7E\uFF08\u53EF\u5173\u95ED\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
+      mode: "read",
+      value: "\u53EF\u5173\u95ED",
+      displayVariant: "tag",
+      tagClosable: true,
+      onTagClose: function onTagClose() {
+        return alert('标签被关闭');
+      }
+    })));
+  }
+};

package/es/components/pisellSingleLineText/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellSingleLineTextProps>;
+export default DisabledView;

package/es/components/pisellSingleLineText/components/DisabledView.js

@@ -0,0 +1,51 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import ReadOnlyView from "./ReadOnlyView";
+import EditView from "./EditView";
+/**
+ * PisellSingleLineText 禁用态视图组件
+ * 
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ * 
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ * 
+ * @param props 组件 Props
+ */
+var DisabledView = function DisabledView(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode;
+
+  // 禁用态样式（透明度 40%）
+  var disabledStyle = _objectSpread({
+    opacity: 0.4,
+    pointerEvents: 'none',
+    cursor: 'not-allowed'
+  }, props.style);
+
+  // 根据原始 mode 决定渲染哪种视图
+  if (mode === 'read') {
+    // 基于只读态的禁用视图
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-single-line-text-disabled",
+      style: disabledStyle
+    }, /*#__PURE__*/React.createElement(ReadOnlyView, props));
+  }
+
+  // 基于编辑态的禁用视图（默认）
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-line-text-disabled",
+    style: disabledStyle
+  }, /*#__PURE__*/React.createElement(EditView, _extends({}, props, {
+    disabled: true
+  })));
+};
+export default DisabledView;

package/es/components/pisellSingleLineText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框，基于 Ant Design Input 组件
+ *
+ * 功能：
+ * - 文本输入
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * - 前后缀、前后置标签
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellSingleLineTextProps>;
+export default EditView;

package/es/components/pisellSingleLineText/components/EditView.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Input } from 'antd';
+import { useTextInputState } from '@pisell/utils';
+/**
+ * PisellSingleLineText 编辑态视图组件
+ * 
+ * 负责渲染编辑态的输入框，基于 Ant Design Input 组件
+ * 
+ * 功能：
+ * - 文本输入
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * - 前后缀、前后置标签
+ * 
+ * @param props 组件 Props
+ */
+var EditView = function EditView(props) {
+  var _useTextInputState = useTextInputState(props),
+    value = _useTextInputState.value,
+    isValid = _useTextInputState.isValid,
+    errors = _useTextInputState.errors,
+    handleChange = _useTextInputState.handleChange,
+    handleBlur = _useTextInputState.handleBlur,
+    handleFocus = _useTextInputState.handleFocus;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-line-text-edit"
+  }, /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: function onChange(e) {
+      return handleChange(e.target.value);
+    },
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onPressEnter: function onPressEnter(e) {
+      var _props$onPressEnter;
+      return (_props$onPressEnter = props.onPressEnter) === null || _props$onPressEnter === void 0 ? void 0 : _props$onPressEnter.call(props, e.currentTarget.value);
+    },
+    placeholder: props.placeholder,
+    maxLength: props.maxLength,
+    showCount: props.showCount,
+    allowClear: props.allowClear,
+    prefix: props.prefix,
+    suffix: props.suffix,
+    addonBefore: props.addonBefore,
+    addonAfter: props.addonAfter,
+    disabled: props.disabled,
+    autoFocus: props.autoFocus,
+    status: isValid ? undefined : 'error',
+    className: props.className,
+    style: props.style,
+    "aria-label": props['aria-label'],
+    "aria-describedby": props['aria-describedby']
+  }), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-single-line-text-error"
+  }, errors[0]));
+};
+export default EditView;

package/es/components/pisellSingleLineText/components/ReadOnlyView.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 只读态视图组件
+ *
+ * 负责渲染只读态的文本展示，支持多种展示样式变体（基于 Figma 设计规范）
+ *
+ * 功能：
+ * - 普通文本展示（默认）- 16px, Medium, Gray/900
+ * - 超链接样式 - 链接色，带下划线
+ * - 徽标样式 - 圆形红色徽标（类似通知数量）
+ * - 标签样式 - 灰色边框标签
+ * - 文本截断（ellipsis）
+ * - Tooltip 悬停提示完整内容
+ * - 自定义样式（字号、字重、颜色、对齐）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellSingleLineTextProps>;
+export default ReadOnlyView;