@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellLongText/PisellLongText.stories.js

@@ -0,0 +1,492 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLongText/PisellLongText.stories.tsx
+var PisellLongText_stories_exports = {};
+__export(PisellLongText_stories_exports, {
+  AllAutoSizeScenarios: () => AllAutoSizeScenarios,
+  AllExpandScenarios: () => AllExpandScenarios,
+  AutoSizeWithCount: () => AutoSizeWithCount,
+  Basic: () => Basic,
+  CombinedValidation: () => CombinedValidation,
+  CompleteExample: () => CompleteExample,
+  CustomStyle: () => CustomStyle,
+  CustomValidatorParagraphs: () => CustomValidatorParagraphs,
+  Disabled: () => Disabled,
+  EdgeCases: () => EdgeCases,
+  EditModeAutoSize: () => EditModeAutoSize,
+  EditModeAutoSizeRange: () => EditModeAutoSizeRange,
+  EditModeCustomRows: () => EditModeCustomRows,
+  EditModeMinMaxRows: () => EditModeMinMaxRows,
+  EditModeWithClear: () => EditModeWithClear,
+  EditModeWithCount: () => EditModeWithCount,
+  FullFeatures: () => FullFeatures,
+  LengthValidation: () => LengthValidation,
+  PreserveWhitespace: () => PreserveWhitespace,
+  ReadMode: () => ReadMode,
+  ReadModeCustomExpandText: () => ReadModeCustomExpandText,
+  ReadModeDisableExpand: () => ReadModeDisableExpand,
+  ReadModeExpandAndWordCount: () => ReadModeExpandAndWordCount,
+  ReadModeExpandCollapse: () => ReadModeExpandCollapse,
+  ReadModeWithWordCount: () => ReadModeWithWordCount,
+  Required: () => Required,
+  ValidationScenarios: () => ValidationScenarios,
+  default: () => PisellLongText_stories_default
+});
+module.exports = __toCommonJS(PisellLongText_stories_exports);
+var import_PisellLongText = require("./PisellLongText");
+var import_react = __toESM(require("react"));
+var meta = {
+  title: "表单/PisellLongText",
+  component: import_PisellLongText.PisellLongText,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "多行文本输入/展示组件，基于 Ant Design TextArea 开发。"
+      }
+    }
+  },
+  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: "占位文本"
+    },
+    rows: {
+      control: "number",
+      description: "默认行数"
+    },
+    maxLength: {
+      control: "number",
+      description: "最大长度"
+    },
+    showCount: {
+      control: "boolean",
+      description: "显示字数统计（编辑态）"
+    },
+    allowClear: {
+      control: "boolean",
+      description: "显示清空按钮"
+    },
+    required: {
+      control: "boolean",
+      description: "是否必填"
+    },
+    minLength: {
+      control: "number",
+      description: "最小长度"
+    },
+    maxLines: {
+      control: "number",
+      description: "最大显示行数（只读态）"
+    },
+    enableExpand: {
+      control: "boolean",
+      description: "启用展开功能（只读态）"
+    },
+    showWordCount: {
+      control: "boolean",
+      description: "显示字数统计（只读态）"
+    }
+  }
+};
+var PisellLongText_stories_default = meta;
+var Basic = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入内容",
+    rows: 3
+  }
+};
+var ReadMode = {
+  args: {
+    mode: "read",
+    value: "这是第一行\n这是第二行\n这是第三行"
+  }
+};
+var ReadModeExpandCollapse = {
+  args: {
+    mode: "read",
+    value: "第1行：产品描述\n第2行：产品特性介绍\n第3行：使用方法说明\n第4行：注意事项\n第5行：售后服务\n第6行：联系方式",
+    maxLines: 3,
+    enableExpand: true
+  }
+};
+var ReadModeCustomExpandText = {
+  args: {
+    mode: "read",
+    value: "第1行内容\n第2行内容\n第3行内容\n第4行内容\n第5行内容",
+    maxLines: 2,
+    expandText: "查看更多",
+    collapseText: "收起内容"
+  }
+};
+var ReadModeDisableExpand = {
+  args: {
+    mode: "read",
+    value: "第1行\n第2行\n第3行\n第4行\n第5行\n第6行",
+    maxLines: 3,
+    enableExpand: false
+  }
+};
+var ReadModeWithWordCount = {
+  args: {
+    mode: "read",
+    value: "这是一段测试内容\n包含多行文本\n用于展示字数统计功能",
+    showWordCount: true
+  }
+};
+var ReadModeExpandAndWordCount = {
+  args: {
+    mode: "read",
+    value: "第1行\n第2行\n第3行\n第4行\n第5行",
+    maxLines: 3,
+    enableExpand: true,
+    showWordCount: true
+  }
+};
+var Disabled = {
+  args: {
+    mode: "edit",
+    value: "禁用状态的多行文本内容\n第二行\n第三行",
+    disabled: true
+  }
+};
+var EditModeCustomRows = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入内容（默认5行）",
+    rows: 5
+  }
+};
+var EditModeAutoSize = {
+  args: {
+    mode: "edit",
+    placeholder: "输入内容，高度自动调整",
+    autoSize: true
+  }
+};
+var EditModeAutoSizeRange = {
+  args: {
+    mode: "edit",
+    placeholder: "高度在3-8行之间自动调整",
+    autoSize: { minRows: 3, maxRows: 8 }
+  }
+};
+var EditModeMinMaxRows = {
+  args: {
+    mode: "edit",
+    placeholder: "使用 minRows 和 maxRows",
+    minRows: 3,
+    maxRows: 6
+  }
+};
+var EditModeWithCount = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入内容",
+    maxLength: 200,
+    showCount: true
+  }
+};
+var EditModeWithClear = {
+  args: {
+    mode: "edit",
+    defaultValue: "这是一些可以清空的内容\n第二行\n第三行",
+    allowClear: true
+  }
+};
+var Required = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入（必填）",
+    required: true,
+    validateTrigger: "onBlur"
+  }
+};
+var LengthValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入 20-500 个字符",
+    minLength: 20,
+    maxLength: 500,
+    showCount: true,
+    validateTrigger: "onChange"
+  }
+};
+var CustomValidatorParagraphs = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入内容（最多10段）",
+    validator: (value) => {
+      const lines = value.split("\n").filter((l) => l.trim());
+      if (lines.length > 10) {
+        return "内容不能超过 10 段";
+      }
+      return true;
+    },
+    validateTrigger: "onChange"
+  }
+};
+var CombinedValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入产品描述",
+    required: true,
+    minLength: 20,
+    maxLength: 500,
+    showCount: true,
+    validateTrigger: "both"
+  }
+};
+var AutoSizeWithCount = {
+  args: {
+    mode: "edit",
+    placeholder: "输入内容，自动调整高度",
+    autoSize: { minRows: 3, maxRows: 10 },
+    maxLength: 500,
+    showCount: true
+  }
+};
+var PreserveWhitespace = {
+  args: {
+    mode: "read",
+    value: "第1行  有多个空格  \n  第2行前有空格\n第3行\n\n第5行（第4行是空行）"
+  }
+};
+var CustomStyle = {
+  args: {
+    mode: "read",
+    value: "这是自定义样式的文本\n第二行内容\n第三行内容",
+    fontSize: "18px",
+    fontWeight: "bold",
+    color: "#1890ff",
+    lineHeight: 2
+  }
+};
+var FullFeatures = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入产品详细描述",
+    autoSize: { minRows: 4, maxRows: 12 },
+    maxLength: 1e3,
+    showCount: true,
+    allowClear: true,
+    required: true,
+    minLength: 50,
+    validateTrigger: "both"
+  }
+};
+var AllExpandScenarios = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "基础展开/折叠"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      mode: "read",
+      value: "第1行：产品名称\\n第2行：产品描述\\n第3行：产品特性\\n第4行：使用说明\\n第5行：注意事项",
+      maxLines: 3,
+      enableExpand: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "自定义文案"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      mode: "read",
+      value: "第1行内容\\n第2行内容\\n第3行内容\\n第4行内容",
+      maxLines: 2,
+      expandText: "查看更多",
+      collapseText: "收起"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "禁用展开功能"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      mode: "read",
+      value: "第1行内容\\n第2行内容\\n第3行内容\\n第4行内容",
+      maxLines: 2,
+      enableExpand: false
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "不超出不显示按钮"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { mode: "read", value: "第1行内容\\n第2行内容", maxLines: 3 })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "展开 + 字数统计"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      mode: "read",
+      value: "第1行\\n第2行\\n第3行\\n第4行\\n第5行",
+      maxLines: 3,
+      enableExpand: true,
+      showWordCount: true
+    }
+  )))
+};
+var AllAutoSizeScenarios = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "autoSize=true（完全自动）"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { autoSize: true, placeholder: "输入内容，高度完全自动调整" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "autoSize with range（3-8行）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      autoSize: { minRows: 3, maxRows: 8 },
+      placeholder: "高度在3-8行之间自动调整，超过8行出现滚动条"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "minRows + maxRows（自动生效）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      minRows: 3,
+      maxRows: 6,
+      placeholder: "设置 minRows 和 maxRows 自动应用 autoSize"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "固定行数（rows=5）"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { rows: 5, placeholder: "固定5行高度" })))
+};
+var ValidationScenarios = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "必填校验"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      placeholder: "请输入（必填）",
+      required: true,
+      validateTrigger: "onBlur"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "长度校验（20-200字符）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      placeholder: "请输入 20-200 个字符",
+      minLength: 20,
+      maxLength: 200,
+      showCount: true,
+      validateTrigger: "onChange"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "段落数量限制（最多5段）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      placeholder: "请输入内容（最多5段）",
+      validator: (value) => {
+        const lines = value.split("\n").filter((l) => l.trim());
+        if (lines.length > 5) {
+          return "内容不能超过 5 段";
+        }
+        return true;
+      },
+      validateTrigger: "onChange"
+    }
+  )))
+};
+var EdgeCases = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "空值"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { mode: "read", value: "" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "只有换行符"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { mode: "read", value: "\\n\\n\\n\\n", maxLines: 2, enableExpand: true })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "超长单行（无换行）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLongText.PisellLongText,
+    {
+      mode: "read",
+      value: "这是一行非常非常非常非常非常非常非常非常非常非常非常非常非常长的文本内容",
+      maxLines: 3
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "特殊字符和 Emoji"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { mode: "read", value: "包含 Emoji 😀😃😄\\n特殊符号 @#$%\\n中文测试" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "保留空格"), /* @__PURE__ */ import_react.default.createElement(import_PisellLongText.PisellLongText, { mode: "read", value: "第1行  有多个空格  \\n  第2行前有空格" })))
+};
+var CompleteExample = {
+  render: () => {
+    const [value, setValue] = import_react.default.useState("");
+    const [expanded, setExpanded] = import_react.default.useState(false);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "600px", display: "flex", flexDirection: "column", gap: "24px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 完整功能"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLongText.PisellLongText,
+      {
+        value,
+        onChange: setValue,
+        placeholder: "请输入产品描述（至少50个字符，最多1000字符）",
+        autoSize: { minRows: 4, maxRows: 12 },
+        maxLength: 1e3,
+        showCount: true,
+        allowClear: true,
+        required: true,
+        minLength: 50,
+        validateTrigger: "both",
+        onValidate: (isValid, errors) => {
+          console.log("校验结果:", isValid, errors);
+        },
+        onPressEnter: (e) => {
+          if (e.ctrlKey) {
+            console.log("Ctrl+Enter 提交");
+          }
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 展开折叠"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLongText.PisellLongText,
+      {
+        mode: "read",
+        value: value || "产品名称：示例产品\n产品描述：这是一个优质的产品\n产品特性：功能强大\n使用说明：简单易用\n注意事项：请仔细阅读\n售后服务：7天无理由退换",
+        maxLines: 3,
+        enableExpand: true,
+        showWordCount: true,
+        onExpand: (isExpanded) => {
+          setExpanded(isExpanded);
+          console.log("展开状态:", isExpanded);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前展开状态：", expanded ? "已展开" : "已收起")));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllAutoSizeScenarios,
+  AllExpandScenarios,
+  AutoSizeWithCount,
+  Basic,
+  CombinedValidation,
+  CompleteExample,
+  CustomStyle,
+  CustomValidatorParagraphs,
+  Disabled,
+  EdgeCases,
+  EditModeAutoSize,
+  EditModeAutoSizeRange,
+  EditModeCustomRows,
+  EditModeMinMaxRows,
+  EditModeWithClear,
+  EditModeWithCount,
+  FullFeatures,
+  LengthValidation,
+  PreserveWhitespace,
+  ReadMode,
+  ReadModeCustomExpandText,
+  ReadModeDisableExpand,
+  ReadModeExpandAndWordCount,
+  ReadModeExpandCollapse,
+  ReadModeWithWordCount,
+  Required,
+  ValidationScenarios
+});

package/lib/components/pisellLongText/components/DisabledView.d.ts

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

package/lib/components/pisellLongText/components/DisabledView.js

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLongText/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_ReadOnlyView = __toESM(require("./ReadOnlyView"));
+var import_EditView = __toESM(require("./EditView"));
+var DisabledView = (props) => {
+  const { mode = "edit" } = props;
+  const disabledStyle = {
+    opacity: 0.4,
+    pointerEvents: "none",
+    cursor: "not-allowed",
+    ...props.style
+  };
+  if (mode === "read") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-long-text-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props }));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-long-text-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props, disabled: true }));
+};
+var DisabledView_default = DisabledView;

package/lib/components/pisellLongText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 编辑态视图组件
+ *
+ * 负责渲染编辑态的多行输入框，基于 Ant Design TextArea 组件
+ *
+ * 功能：
+ * - 多行文本输入
+ * - 自动高度调整（autoSize）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellLongTextProps>;
+export default EditView;

package/lib/components/pisellLongText/components/EditView.js

@@ -0,0 +1,69 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellLongText/components/EditView.tsx
+var EditView_exports = {};
+__export(EditView_exports, {
+  default: () => EditView_default
+});
+module.exports = __toCommonJS(EditView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var { TextArea } = import_antd.Input;
+var EditView = (props) => {
+  const { value, isValid, errors, handleChange, handleBlur, handleFocus } = (0, import_utils.useTextInputState)(props);
+  const autoSizeConfig = props.autoSize ? props.autoSize : props.minRows || props.maxRows ? {
+    minRows: props.minRows,
+    maxRows: props.maxRows
+  } : false;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-long-text-edit" }, /* @__PURE__ */ import_react.default.createElement(
+    TextArea,
+    {
+      value,
+      onChange: (e) => handleChange(e.target.value),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onPressEnter: props.onPressEnter,
+      placeholder: props.placeholder,
+      maxLength: props.maxLength,
+      showCount: props.showCount,
+      allowClear: props.allowClear,
+      rows: props.rows || 3,
+      autoSize: autoSizeConfig,
+      disabled: props.disabled,
+      autoFocus: props.autoFocus,
+      status: isValid ? void 0 : "error",
+      className: props.className,
+      style: props.style,
+      "aria-label": props["aria-label"],
+      "aria-describedby": props["aria-describedby"]
+    }
+  ), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-long-text-error" }, errors[0]));
+};
+var EditView_default = EditView;

package/lib/components/pisellLongText/components/ReadOnlyView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 只读态视图组件
+ *
+ * 负责渲染只读态的多行文本展示，支持展开/折叠功能
+ *
+ * 功能：
+ * - 多行文本展示
+ * - 根据 maxLines 截断内容
+ * - 展开/收起按钮（超出行数时显示）
+ * - 字数统计（可选）
+ * - 保留换行和空格（whiteSpace: 'pre-wrap'）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellLongTextProps>;
+export default ReadOnlyView;