@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellFind/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PisellLookupProps, PisellLookupRef } from '../pisellLookup';
+/**
+ * PisellFind Props
+ * 继承 PisellLookup 的所有 Props
+ */
+export declare type PisellFindProps = PisellLookupProps;
+/**
+ * PisellFind Ref
+ * 继承 PisellLookup 的所有 Ref 方法
+ */
+export declare type PisellFindRef = PisellLookupRef;
+/**
+ * PisellFind 组件
+ * 基于 PisellLookup 的组件内查找优化版本
+ *
+ * 核心特点：
+ * - 默认使用 button 触发器
+ * - 默认不显示确认按钮（输入即搜索）
+ * - 默认开启搜索历史
+ * - 默认不展示结果区（结果在页面其他位置展示）
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <PisellFind
+ *   onSearch={(keyword) => {
+ *     const filtered = data.filter(item => item.name.includes(keyword));
+ *     setFilteredData(filtered);
+ *   }}
+ * />
+ *
+ * // 切换为 Input 模式
+ * <PisellFind
+ *   triggerType="input"
+ *   onSearch={(keyword) => filterData(keyword)}
+ * />
+ * ```
+ */
+export declare const PisellFind: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;

package/lib/components/pisellFind/index.js

@@ -0,0 +1,68 @@
+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/pisellFind/index.tsx
+var pisellFind_exports = {};
+__export(pisellFind_exports, {
+  PisellFind: () => PisellFind
+});
+module.exports = __toCommonJS(pisellFind_exports);
+var import_react = __toESM(require("react"));
+var import_pisellLookup = require("../pisellLookup");
+var import_locales = require("../../locales");
+var PisellFind = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    // 提取需要设置默认值的 Props
+    triggerType = "button",
+    buttonText = (0, import_locales.getText)("pisell-find-button-text"),
+    placeholder = (0, import_locales.getText)("pisell-find-placeholder"),
+    showConfirmButton = false,
+    showHistory = true,
+    historyKey = "pisell_find_history",
+    // 透传其他所有 Props
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_pisellLookup.PisellLookup,
+    {
+      ref,
+      triggerType,
+      buttonText,
+      placeholder,
+      showConfirmButton,
+      showHistory,
+      historyKey,
+      ...restProps
+    }
+  );
+});
+PisellFind.displayName = "PisellFind";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellFind
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellLongTextProps } from './types';
+import './PisellLongText.less';
+/**
+ * PisellLongText 长文本/多行文本组件
+ *
+ * 多行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design TextArea 组件开发，提供展开/折叠功能和完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态
+ * <PisellLongText
+ *   placeholder="请输入内容"
+ *   rows={3}
+ *   maxLength={500}
+ *   showCount
+ * />
+ *
+ * @example
+ * // 只读态（展开折叠）
+ * <PisellLongText
+ *   mode="read"
+ *   value={longText}
+ *   maxLines={3}
+ *   enableExpand
+ * />
+ *
+ * @example
+ * // 自动高度
+ * <PisellLongText
+ *   autoSize={{ minRows: 3, maxRows: 10 }}
+ *   placeholder="自动调整高度"
+ * />
+ */
+export declare const PisellLongText: React.FC<PisellLongTextProps>;
+declare const _default: React.NamedExoticComponent<PisellLongTextProps>;
+export default _default;

package/lib/components/pisellLongText/PisellLongText.js

@@ -0,0 +1,62 @@
+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.tsx
+var PisellLongText_exports = {};
+__export(PisellLongText_exports, {
+  PisellLongText: () => PisellLongText,
+  default: () => PisellLongText_default
+});
+module.exports = __toCommonJS(PisellLongText_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_PisellLongText = require("./PisellLongText.less");
+var PisellLongText = (props) => {
+  const { mode = "edit", disabled = false } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  switch (displayState) {
+    case "read":
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    case "edit":
+      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+    case "disabled":
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+    default:
+      return null;
+  }
+};
+var PisellLongText_default = import_react.default.memo(PisellLongText, (prevProps, nextProps) => {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellLongText
+});

package/lib/components/pisellLongText/PisellLongText.less

@@ -0,0 +1,60 @@
+/**
+ * PisellLongText 组件样式
+ */
+
+.pisell-long-text {
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    // 基于 Figma 设计规范的 TextArea 样式
+    .pisell-lowcode-input {
+      padding: 12px 14px; // Figma: 垂直12px，水平14px（比 Input 小2px）
+    }
+  }
+
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #ff4d4f;
+    line-height: 1.5;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    .pisell-lowcode-typography {
+      margin-bottom: 0;
+    }
+  }
+
+  &-expand-btn {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+    margin-top: 8px;
+  }
+
+  &-word-count {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #667085;
+    text-align: right;
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 错误提示淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellLongText/PisellLongText.stories.d.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellLongText } from './PisellLongText';
+/**
+ * PisellLongText 是一个多行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 展开/折叠功能（只读态）
+ * - 自动高度调整
+ * - 完整的校验框架
+ * - 字数统计
+ */
+declare const meta: Meta<typeof PisellLongText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellLongText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 短文本
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 展开/折叠功能（核心）
+ */
+export declare const ReadModeExpandCollapse: Story;
+/**
+ * 只读态 - 自定义展开/收起文案
+ */
+export declare const ReadModeCustomExpandText: Story;
+/**
+ * 只读态 - 禁用展开功能
+ */
+export declare const ReadModeDisableExpand: Story;
+/**
+ * 只读态 - 字数统计
+ */
+export declare const ReadModeWithWordCount: Story;
+/**
+ * 只读态 - 展开 + 字数统计
+ */
+export declare const ReadModeExpandAndWordCount: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 编辑态 - 默认行数
+ */
+export declare const EditModeCustomRows: Story;
+/**
+ * 编辑态 - 自动高度（boolean）
+ */
+export declare const EditModeAutoSize: Story;
+/**
+ * 编辑态 - 自动高度（范围限定）
+ */
+export declare const EditModeAutoSizeRange: Story;
+/**
+ * 编辑态 - minRows 和 maxRows
+ */
+export declare const EditModeMinMaxRows: Story;
+/**
+ * 编辑态 - 字数统计
+ */
+export declare const EditModeWithCount: Story;
+/**
+ * 编辑态 - 清空按钮
+ */
+export declare const EditModeWithClear: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 长度校验
+ */
+export declare const LengthValidation: Story;
+/**
+ * 自定义校验 - 段落数量限制
+ */
+export declare const CustomValidatorParagraphs: Story;
+/**
+ * 组合校验
+ */
+export declare const CombinedValidation: Story;
+/**
+ * 自动高度 + 字数统计
+ */
+export declare const AutoSizeWithCount: Story;
+/**
+ * 保留换行和空格
+ */
+export declare const PreserveWhitespace: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 完整功能示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 所有展开/折叠场景对比
+ */
+export declare const AllExpandScenarios: Story;
+/**
+ * 所有自动高度场景对比
+ */
+export declare const AllAutoSizeScenarios: Story;
+/**
+ * 校验场景对比
+ */
+export declare const ValidationScenarios: Story;
+/**
+ * 边界情况测试
+ */
+export declare const EdgeCases: Story;
+/**
+ * 完整功能演示
+ */
+export declare const CompleteExample: Story;