@pisell/materials 3.3.81 → 3.3.83

package/es/components/pisellLongText/components/EditView.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Input } from 'antd';
+import { useTextInputState } from '@pisell/utils';
+var TextArea = Input.TextArea;
+
+/**
+ * PisellLongText 编辑态视图组件
+ * 
+ * 负责渲染编辑态的多行输入框，基于 Ant Design TextArea 组件
+ * 
+ * 功能：
+ * - 多行文本输入
+ * - 自动高度调整（autoSize）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * 
+ * @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;
+
+  // 计算 autoSize 配置
+  var autoSizeConfig = props.autoSize ? props.autoSize : props.minRows || props.maxRows ? {
+    minRows: props.minRows,
+    maxRows: props.maxRows
+  } : false;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-long-text-edit"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    value: value,
+    onChange: function onChange(e) {
+      return 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 ? 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-long-text-error"
+  }, errors[0]));
+};
+export default EditView;

package/es/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;

package/es/components/pisellLongText/components/ReadOnlyView.js

@@ -0,0 +1,97 @@
+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 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Typography, Button } from 'antd';
+var Paragraph = Typography.Paragraph;
+
+/**
+ * PisellLongText 只读态视图组件
+ * 
+ * 负责渲染只读态的多行文本展示，支持展开/折叠功能
+ * 
+ * 功能：
+ * - 多行文本展示
+ * - 根据 maxLines 截断内容
+ * - 展开/收起按钮（超出行数时显示）
+ * - 字数统计（可选）
+ * - 保留换行和空格（whiteSpace: 'pre-wrap'）
+ * 
+ * @param props 组件 Props
+ */
+var ReadOnlyView = function ReadOnlyView(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var value = props.value,
+    _props$maxLines = props.maxLines,
+    maxLines = _props$maxLines === void 0 ? 3 : _props$maxLines,
+    _props$enableExpand = props.enableExpand,
+    enableExpand = _props$enableExpand === void 0 ? true : _props$enableExpand,
+    _props$expandText = props.expandText,
+    expandText = _props$expandText === void 0 ? '展开' : _props$expandText,
+    _props$collapseText = props.collapseText,
+    collapseText = _props$collapseText === void 0 ? '收起' : _props$collapseText,
+    _props$expandButtonPo = props.expandButtonPosition,
+    expandButtonPosition = _props$expandButtonPo === void 0 ? 'bottom' : _props$expandButtonPo,
+    _props$showWordCount = props.showWordCount,
+    showWordCount = _props$showWordCount === void 0 ? false : _props$showWordCount,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 16 : _props$fontSize,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 500 : _props$fontWeight,
+    _props$color = props.color,
+    color = _props$color === void 0 ? '#101828' : _props$color,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 1.5 : _props$lineHeight,
+    className = props.className,
+    style = props.style;
+  var content = value || '';
+  var lines = content.split('\n');
+  var needExpand = lines.length > maxLines;
+
+  // 截断内容（只读态未展开时）
+  var displayContent = !isExpanded && needExpand ? lines.slice(0, maxLines).join('\n') + '...' : content;
+
+  // 文本样式
+  var textStyle = _objectSpread({
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    color: color,
+    lineHeight: lineHeight,
+    whiteSpace: 'pre-wrap',
+    // 保留换行和空格
+    margin: 0
+  }, style);
+
+  // 展开/收起处理
+  var handleToggleExpand = function handleToggleExpand() {
+    var _props$onExpand;
+    var newExpanded = !isExpanded;
+    setIsExpanded(newExpanded);
+    (_props$onExpand = props.onExpand) === null || _props$onExpand === void 0 || _props$onExpand.call(props, newExpanded);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-long-text-read ".concat(className || '')
+  }, /*#__PURE__*/React.createElement(Paragraph, {
+    style: textStyle
+  }, displayContent), enableExpand && needExpand && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    size: "small",
+    onClick: handleToggleExpand,
+    className: "pisell-long-text-expand-btn"
+  }, isExpanded ? collapseText : expandText), showWordCount && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-long-text-word-count"
+  }, content.length, " \u5B57"));
+};
+export default ReadOnlyView;

package/es/components/pisellLongText/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellLongText 组件导出
+ */
+export { default as PisellLongText } from './PisellLongText';
+export type { PisellLongTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/es/components/pisellLongText/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellLongText 组件导出
+ */
+
+export { default as PisellLongText } from "./PisellLongText";
+
+// 公共类型从 types 中重新导出，方便使用

package/es/components/pisellLongText/types.d.ts

@@ -0,0 +1,147 @@
+import type { CSSProperties, KeyboardEvent } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellLongText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加长文本特有的配置
+ */
+export interface PisellLongTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 编辑态默认显示行数
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 编辑态最小行数
+     */
+    minRows?: number;
+    /**
+     * 编辑态最大行数
+     */
+    maxRows?: number;
+    /**
+     * 自动高度调整
+     * @default false
+     * @example
+     * autoSize={true} // 自动调整
+     * autoSize={{ minRows: 3, maxRows: 10 }} // 指定范围
+     */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /**
+     * 只读态最大显示行数（超出显示展开按钮）
+     * @default 3
+     */
+    maxLines?: number;
+    /**
+     * 是否启用展开功能（只读态）
+     * @default true
+     */
+    enableExpand?: boolean;
+    /**
+     * 展开按钮文案
+     * @default '展开'
+     */
+    expandText?: string;
+    /**
+     * 收起按钮文案
+     * @default '收起'
+     */
+    collapseText?: string;
+    /**
+     * 展开按钮位置
+     * @default 'bottom'
+     */
+    expandButtonPosition?: 'bottom' | 'inline';
+    /**
+     * 只读态是否显示字数统计
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 行高
+     * @example '1.5' 或 1.5
+     * @default 1.5
+     */
+    lineHeight?: string | number;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计（编辑态）
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 回车键回调（传递事件对象，支持判断 Ctrl+Enter）
+     * @param e 键盘事件对象
+     */
+    onPressEnter?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 展开/收起回调
+     * @param expanded 是否已展开
+     */
+    onExpand?: (expanded: boolean) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/es/components/pisellLongText/types.js

@@ -0,0 +1 @@
+export {};