@tiny-codes/react-easy 1.1.1 → 1.1.3

package/lib/components/EditableText/form.js

@@ -0,0 +1,223 @@
+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/EditableText/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  default: () => form_default
+});
+module.exports = __toCommonJS(form_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@ant-design/icons");
+var import_useT = __toESM(require("../../hooks/useT"));
+var defaultInputActionGap = 8;
+var EditableTextForm = ({
+  prefixCls,
+  value,
+  required = true,
+  classNames,
+  styles: styleNames,
+  inputComp = "Input",
+  block: blockInProps = false,
+  formProps,
+  formItemProps,
+  inputProps,
+  actionAlign = "center",
+  submitProps,
+  cancelProps,
+  onOk,
+  onCancel
+}) => {
+  var _a, _b;
+  const t = (0, import_useT.default)();
+  const { getPrefixCls: getAntPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const [form] = import_antd.Form.useForm();
+  const wrapperRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const detectorRef = (0, import_react.useRef)(null);
+  const actionRef = (0, import_react.useRef)(null);
+  const [inputWidth, setInputWidth] = (0, import_react.useState)();
+  const [visibility, setVisibility] = (0, import_react.useState)("hidden");
+  const [forceBlock, setForceBlock] = (0, import_react.useState)(false);
+  const [saving, setSaving] = (0, import_react.useState)(false);
+  const inputActionGapRef = (0, import_react.useRef)(0);
+  inputActionGapRef.current = pxToNumber(((_a = formItemProps == null ? void 0 : formItemProps.style) == null ? void 0 : _a.marginRight) ?? ((_b = formItemProps == null ? void 0 : formItemProps.style) == null ? void 0 : _b.marginInlineEnd)) || defaultInputActionGap;
+  const block = blockInProps || forceBlock;
+  const InputComp = inputComp === "TextArea" ? import_antd.Input.TextArea : import_antd.Input;
+  (0, import_react.useEffect)(() => {
+    form.setFieldsValue({ value });
+  }, [form, value]);
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2;
+    let contentWidth = 0;
+    if (detectorRef.current && ((_a2 = inputRef.current) == null ? void 0 : _a2.input)) {
+      const inputStyle = getComputedStyle(inputRef.current.input);
+      contentWidth = detectorRef.current.offsetWidth + pxToNumber(inputStyle.paddingLeft) + pxToNumber(inputStyle.paddingRight) + pxToNumber(inputStyle.borderLeftWidth) + pxToNumber(inputStyle.borderRightWidth);
+      setInputWidth(contentWidth);
+    }
+    const actionWidth = ((_b2 = actionRef.current) == null ? void 0 : _b2.offsetWidth) || 0;
+    const gap = inputActionGapRef.current;
+    setVisibility("visible");
+    const observer = new ResizeObserver(([entity]) => {
+      const wrapperWidth = entity.contentRect.width;
+      if (contentWidth + actionWidth + gap - wrapperWidth > 1) {
+        setForceBlock(true);
+      } else {
+        setForceBlock(false);
+      }
+    });
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  const handleCancel = async () => {
+    form.resetFields();
+    try {
+      await (onCancel == null ? void 0 : onCancel());
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleEscape = async (e) => {
+    var _a2;
+    if (e.key === "Escape") {
+      await handleCancel();
+      (_a2 = cancelProps == null ? void 0 : cancelProps.onClick) == null ? void 0 : _a2.call(cancelProps, e);
+    }
+  };
+  const handleSubmit = async (values) => {
+    const { value: value2 } = values;
+    try {
+      setSaving(true);
+      await (onOk == null ? void 0 : onOk(value2));
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)(`${prefixCls}-form`, classNames == null ? void 0 : classNames.wrapper), style: styleNames == null ? void 0 : styleNames.wrapper }, /* @__PURE__ */ React.createElement(
+    import_antd.Form,
+    {
+      component: "div",
+      layout: "inline",
+      form,
+      initialValues: { value },
+      autoComplete: "off",
+      onFinish: handleSubmit,
+      ...formProps,
+      style: {
+        visibility,
+        ...formProps == null ? void 0 : formProps.style
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_antd.Form.Item,
+      {
+        rules: [{ required, message: t("components.EditableText.requiredMsg") }],
+        ...formItemProps,
+        className: (0, import_classnames.default)(formItemProps == null ? void 0 : formItemProps.className, { [`${getAntPrefixCls("form-item-block")}`]: block }),
+        style: {
+          marginInlineEnd: defaultInputActionGap,
+          ...formItemProps == null ? void 0 : formItemProps.style
+        },
+        name: "value"
+      },
+      /* @__PURE__ */ React.createElement(
+        InputComp,
+        {
+          ref: inputRef,
+          placeholder: t("components.EditableText.placeholder"),
+          ...inputProps,
+          style: {
+            width: block ? void 0 : inputWidth,
+            // Width is 100% in block mode, no need to set width
+            ...inputProps == null ? void 0 : inputProps.style
+          },
+          onPressEnter: () => form.submit(),
+          onKeyUp: handleEscape
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref: detectorRef,
+        style: {
+          position: "absolute",
+          visibility: "hidden",
+          height: 0,
+          whiteSpace: "pre"
+        }
+      },
+      value
+    ),
+    /* @__PURE__ */ React.createElement(import_antd.Space, { ref: actionRef, className: `${prefixCls}-form-btns`, align: actionAlign, size: 4 }, /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        disabled: saving,
+        loading: saving,
+        title: t("components.EditableText.save"),
+        icon: /* @__PURE__ */ React.createElement(import_icons.CheckSquareFilled, { className: classNames == null ? void 0 : classNames.submitIcon, style: styleNames == null ? void 0 : styleNames.submitIcon }),
+        style: styleNames == null ? void 0 : styleNames.submitButton,
+        onClick: () => form.submit(),
+        ...submitProps,
+        className: (0, import_classnames.default)(
+          `${prefixCls}-form-btn`,
+          `${prefixCls}-form-btn-save`,
+          classNames == null ? void 0 : classNames.submitButton,
+          submitProps == null ? void 0 : submitProps.className
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        style: styleNames == null ? void 0 : styleNames.cancelButton,
+        className: (0, import_classnames.default)(`${prefixCls}-form-btn`, `${prefixCls}-form-btn-close`, classNames == null ? void 0 : classNames.cancelButton),
+        title: t("components.EditableText.cancel"),
+        icon: /* @__PURE__ */ React.createElement(import_icons.CloseSquareFilled, { className: classNames == null ? void 0 : classNames.cancelIcon, style: styleNames == null ? void 0 : styleNames.cancelIcon }),
+        onClick: async (e) => {
+          var _a2;
+          await handleCancel();
+          (_a2 = cancelProps == null ? void 0 : cancelProps.onClick) == null ? void 0 : _a2.call(cancelProps, e);
+        },
+        ...cancelProps
+      }
+    ))
+  ));
+};
+function pxToNumber(px) {
+  return px ? parseFloat(px.toString().replace("px", "")) : 0;
+}
+var form_default = EditableTextForm;
+//# sourceMappingURL=form.js.map

package/lib/components/EditableText/form.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/EditableText/form.tsx"],
+  "sourcesContent": ["import type { CSSProperties } from 'react';\nimport type React from 'react';\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport type { ButtonProps, FormItemProps, FormProps, InputProps, SpaceProps } from 'antd';\nimport { Button, ConfigProvider, Form, Input, Space } from 'antd';\nimport type { InputRef, TextAreaProps } from 'antd/es/input';\nimport names from 'classnames';\nimport { CheckSquareFilled, CloseSquareFilled } from '@ant-design/icons';\nimport useT from '../../hooks/useT';\n\nconst defaultInputActionGap = 8;\nexport interface EditableFormProps<IT extends 'Input' | 'TextArea'> {\n  prefixCls?: string;\n  /**\n   * - **EN:** The value to edit\n   * - **CN:** 编辑的值\n   */\n  value: string | undefined;\n  /**\n   * - **EN:** Whether the text is required when editing, default is `true`, if `formItemProps.rules`\n   *   is set, it will override this value\n   * - **CN:** 编辑文本时是否必填，默认值为`true`，如果设置了`formItemProps.rules`，将会覆盖此值\n   *\n   * @default true\n   */\n  required?: boolean;\n  /**\n   * - **EN:** Form properties\n   * - **CN:** 表单属性\n   */\n  formProps?: FormProps;\n  /**\n   * - **EN:** Form item properties\n   * - **CN:** 表单项属性\n   */\n  formItemProps?: FormItemProps;\n  /**\n   * - **EN:** Custom component type for rendering the input box\n   * - **CN:** 自定义设置渲染输入框的组件类型\n   *\n   * @default 'Input'\n   */\n  inputComp?: IT;\n  /**\n   * - **EN:** Input component properties\n   * - **CN:** 输入框组件属性\n   */\n  inputProps?: IT extends 'TextArea' ? TextAreaProps : InputProps;\n  /**\n   * - **EN:** Whether to display as a block-level element, with width 100%\n   * - **CN:** 是否显示为块级元素，宽度100%\n   *\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * - **EN:** Semantic class names\n   * - **CN:** 语义化类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Edit mode parent container class name\n     * - **CN:** 编辑模式父容器类名\n     */\n    wrapper?: string;\n    /**\n     * - **EN:** Submit button class name\n     * - **CN:** 提交按钮类名\n     */\n    submitButton?: string;\n    /**\n     * - **EN:** Cancel button class name\n     * - **CN:** 取消按钮类名\n     */\n    cancelButton?: string;\n    /**\n     * - **EN:** Submit button icon class name\n     * - **CN:** 提交按钮图标类名\n     */\n    submitIcon?: string;\n    /**\n     * - **EN:** Cancel button icon class name\n     * - **CN:** 取消按钮图标类名\n     */\n    cancelIcon?: string;\n  };\n  /**\n   * - **EN:** Semantic styles\n   * - **CN:** 语义化样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Edit mode parent container style\n     * - **CN:** 编辑模式父容器样式\n     */\n    wrapper?: CSSProperties;\n    /**\n     * - **EN:** Submit button style\n     * - **CN:** 提交按钮样式\n     */\n    submitButton?: CSSProperties;\n    /**\n     * - **EN:** Cancel button style\n     * - **CN:** 取消按钮样式\n     */\n    cancelButton?: CSSProperties;\n    /**\n     * - **EN:** Submit button icon style\n     * - **CN:** 提交按钮图标样式\n     */\n    submitIcon?: CSSProperties;\n    /**\n     * - **EN:** Cancel button icon style\n     * - **CN:** 取消按钮图标样式\n     */\n    cancelIcon?: CSSProperties;\n  };\n  /**\n   * **EN:** Submit and cancel action button alignment\n   *\n   * **CN:** 提交、取消操作按钮的对齐方式\n   *\n   * - `start` - align to the top | 顶部对齐\n   * - `center` - align to the center | 居中对齐\n   * - `end` - align to the bottom | 底部对齐\n   *\n   * @default 'center'\n   */\n  actionAlign?: SpaceProps['align'];\n  /**\n   * - **EN:** Submit button properties\n   * - **CN:** 提交操作按钮属性\n   */\n  submitProps?: ButtonProps;\n  /**\n   * - **EN:** Cancel button properties\n   * - **CN:** 取消操作按钮属性\n   */\n  cancelProps?: ButtonProps;\n  /**\n   * - **EN:** Confirm button click event, supports asynchronous operations\n   * - **CN:** 确认按钮点击事件，支持异步操作\n   */\n  onOk: (value: string) => void | Promise<void>;\n  /**\n   * - **EN:** Cancel button click event, supports asynchronous operations\n   * - **CN:** 取消按钮点击事件，支持异步操作\n   */\n  onCancel?: () => void | Promise<void>;\n}\n\nconst EditableTextForm = <IT extends 'Input' | 'TextArea'>({\n  prefixCls,\n  value,\n  required = true,\n  classNames,\n  styles: styleNames,\n  inputComp = 'Input' as IT,\n  block: blockInProps = false,\n  formProps,\n  formItemProps,\n  inputProps,\n  actionAlign = 'center',\n  submitProps,\n  cancelProps,\n  onOk,\n  onCancel,\n}: EditableFormProps<IT>) => {\n  const t = useT();\n  const { getPrefixCls: getAntPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const [form] = Form.useForm<{ value?: string }>();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<InputRef>(null);\n  const detectorRef = useRef<HTMLSpanElement>(null);\n  const actionRef = useRef<HTMLDivElement>(null);\n  const [inputWidth, setInputWidth] = useState<number>();\n  const [visibility, setVisibility] = useState<CSSProperties['visibility']>('hidden');\n  const [forceBlock, setForceBlock] = useState(false);\n  const [saving, setSaving] = useState(false);\n  const inputActionGapRef = useRef<number>(0);\n  inputActionGapRef.current =\n    pxToNumber(formItemProps?.style?.marginRight ?? formItemProps?.style?.marginInlineEnd) || defaultInputActionGap;\n  const block = blockInProps || forceBlock;\n  const InputComp = inputComp === 'TextArea' ? Input.TextArea : Input;\n\n  // Update form value when `value` prop changes\n  useEffect(() => {\n    form.setFieldsValue({ value });\n  }, [form, value]);\n\n  // Detect the width of the text and dynamically adjust the input width\n  useEffect(() => {\n    let contentWidth = 0;\n    if (detectorRef.current && inputRef.current?.input) {\n      const inputStyle = getComputedStyle(inputRef.current.input);\n      contentWidth =\n        detectorRef.current.offsetWidth +\n        pxToNumber(inputStyle.paddingLeft) +\n        pxToNumber(inputStyle.paddingRight) +\n        pxToNumber(inputStyle.borderLeftWidth) +\n        pxToNumber(inputStyle.borderRightWidth);\n      setInputWidth(contentWidth);\n    }\n    const actionWidth = actionRef.current?.offsetWidth || 0; // Width of action buttons\n    const gap = inputActionGapRef.current; // Gap between input box and action buttons\n    setVisibility('visible');\n    // Listen to the width of the wrapper container, if the input box width is greater than the wrapper container width,\n    const observer = new ResizeObserver(([entity]) => {\n      const wrapperWidth = entity.contentRect.width;\n      // Width deviation greater than 1px is considered overflow, to avoid misjudgment due to pixel density or scaling\n      if (contentWidth + actionWidth + gap - wrapperWidth > 1) {\n        setForceBlock(true);\n      } else {\n        setForceBlock(false);\n      }\n    });\n    if (wrapperRef.current) {\n      observer.observe(wrapperRef.current);\n    }\n    return () => observer.disconnect();\n  }, []);\n\n  // Cancel editing\n  const handleCancel = async () => {\n    form.resetFields();\n    try {\n      await onCancel?.();\n    } catch (error) {\n      console.error(error);\n    }\n  };\n  // Pressing the Escape key to cancel editing\n  const handleEscape: InputProps['onKeyUp'] = async (e) => {\n    if (e.key === 'Escape') {\n      await handleCancel();\n      cancelProps?.onClick?.(e as unknown as React.MouseEvent<HTMLElement>);\n    }\n  };\n  // Submit editing\n  const handleSubmit = async (values: { value: string }) => {\n    const { value } = values;\n    try {\n      setSaving(true);\n      await onOk?.(value);\n    } catch (error) {\n      console.error(error);\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  return (\n    <div ref={wrapperRef} className={names(`${prefixCls}-form`, classNames?.wrapper)} style={styleNames?.wrapper}>\n      <Form\n        component=\"div\" // Do not use form tag to avoid conflicts with external form, which may be nested in other forms\n        layout=\"inline\"\n        form={form}\n        initialValues={{ value }}\n        autoComplete=\"off\"\n        onFinish={handleSubmit}\n        {...formProps}\n        style={{\n          visibility,\n          ...formProps?.style,\n        }}\n      >\n        {/* Input box */}\n        <Form.Item\n          rules={[{ required, message: t('components.EditableText.requiredMsg') }]}\n          {...formItemProps}\n          className={names(formItemProps?.className, { [`${getAntPrefixCls('form-item-block')}`]: block })}\n          style={{\n            marginInlineEnd: defaultInputActionGap,\n            ...formItemProps?.style,\n          }}\n          name=\"value\"\n        >\n          <InputComp\n            ref={inputRef}\n            placeholder={t('components.EditableText.placeholder')}\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            {...(inputProps as any)}\n            style={{\n              width: block ? undefined : inputWidth, // Width is 100% in block mode, no need to set width\n              ...inputProps?.style,\n            }}\n            onPressEnter={() => form.submit()}\n            onKeyUp={handleEscape}\n          />\n        </Form.Item>\n        {/* Used to calculate the width of the text content */}\n        <span\n          ref={detectorRef}\n          style={{\n            position: 'absolute',\n            visibility: 'hidden',\n            height: 0,\n            whiteSpace: 'pre',\n          }}\n        >\n          {value}\n        </span>\n\n        {/* Action buttons */}\n        <Space ref={actionRef} className={`${prefixCls}-form-btns`} align={actionAlign} size={4}>\n          <Button\n            type=\"text\"\n            disabled={saving}\n            loading={saving}\n            title={t('components.EditableText.save')}\n            icon={<CheckSquareFilled className={classNames?.submitIcon} style={styleNames?.submitIcon} />}\n            style={styleNames?.submitButton}\n            onClick={() => form.submit()}\n            {...submitProps}\n            className={names(\n              `${prefixCls}-form-btn`,\n              `${prefixCls}-form-btn-save`,\n              classNames?.submitButton,\n              submitProps?.className\n            )}\n          />\n          <Button\n            type=\"text\"\n            style={styleNames?.cancelButton}\n            className={names(`${prefixCls}-form-btn`, `${prefixCls}-form-btn-close`, classNames?.cancelButton)}\n            title={t('components.EditableText.cancel')}\n            icon={<CloseSquareFilled className={classNames?.cancelIcon} style={styleNames?.cancelIcon} />}\n            onClick={async (e) => {\n              await handleCancel();\n              cancelProps?.onClick?.(e);\n            }}\n            {...cancelProps}\n          />\n        </Space>\n      </Form>\n    </div>\n  );\n};\n\nfunction pxToNumber(px: string | number | null | undefined) {\n  return px ? parseFloat(px.toString().replace('px', '')) : 0;\n}\n\nexport default EditableTextForm;\n"],
+  "mappings": "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",
+  "names": ["useT", "_a", "_b", "value", "names"]
+}

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

@@ -0,0 +1,138 @@
+import type { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import type { EllipsisConfig } from 'antd/es/typography/Base';
+import type { LinkProps } from 'antd/es/typography/Link';
+import type { ParagraphProps } from 'antd/es/typography/Paragraph';
+import type { TextProps } from 'antd/es/typography/Text';
+import type { TitleProps } from 'antd/es/typography/Title';
+import { type EditableFormProps } from './form';
+declare const getEllipsisConfig: (content: string | undefined) => EllipsisConfig;
+export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text', IT extends 'Input' | 'TextArea' = 'Input'> extends EditableFormProps<IT> {
+    prefixCls?: string;
+    /**
+     * - **EN:** Custom read-only display text, replacing `value` display
+     * - **CN:** 自定义只读显示文本，替代`value`显示
+     *
+     * @default true
+     */
+    displayText?: string;
+    /**
+     * - **EN:** Another way to customize read-only display text, with higher priority than
+     *   `displayText`. This method does not support text truncation.
+     * - **CN:** 另外一种方式自定义只读显示文本，优先级高于`displayText`，这种方式无文本省略效果
+     */
+    children?: ReactNode;
+    /**
+     * - **EN:** Whether to allow editing. If set to `false`, the edit button will not be displayed.
+     * - **CN:** 是否允许编辑，如果设置为`false`，则不显示编辑按钮
+     *
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * - **EN:** Whether to open edit mode.
+     * - **CN:** 是否打开编辑模式
+     *
+     * @default false
+     */
+    editing?: boolean;
+    /**
+     * - **EN:** Component container class name.
+     * - **CN:** 组件容器类名
+     */
+    className?: string;
+    /**
+     * - **EN:** Component container style.
+     * - **CN:** 组件容器样式
+     */
+    style?: CSSProperties;
+    /**
+     * - **EN:** Semantic class names.
+     * - **CN:** 语义化类名
+     */
+    classNames?: {
+        /**
+         * - **EN:** Read-only text class name
+         * - **CN:** 只读文本类名
+         */
+        text?: string;
+        /**
+         * - **EN:** Edit button class name
+         * - **CN:** 编辑按钮类名
+         */
+        editIcon?: string;
+    } & EditableFormProps<IT>['classNames'];
+    /**
+     * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`
+     * - **CN:** 在`onOk`保存后，通过`onChange`把修改后的值传递出去
+     */
+    onChange?: (value: string) => void;
+    /**
+     * - **EN:** Event triggered when the editing state changes
+     * - **CN:** 编辑状态改变事件
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * - **EN:** Whether to display as a block-level element, with width 100%
+     * - **CN:** 语义化样式
+     */
+    styles?: {
+        /**
+         * - **EN:** Read-only text class name
+         * - **CN:** 只读文本类名
+         */
+        text?: CSSProperties;
+        /**
+         * - **EN:** Edit button style
+         * - **CN:** 编辑按钮样式
+         */
+        editIcon?: CSSProperties;
+    } & EditableFormProps<IT>['styles'];
+    /**
+     * - **EN:** Custom component type for rendering the text
+     * - **CN:** 自定义设置渲染文本组件的组件类型
+     *
+     * @default 'Text'
+     */
+    textComp?: TT;
+    /**
+     * - **EN:** Text component props
+     * - **CN:** 文本组件属性
+     */
+    textProps?: TT extends 'Text' ? TextProps : TT extends 'Paragraph' ? ParagraphProps : TT extends 'Title' ? TitleProps : TT extends 'Link' ? LinkProps : never;
+    /**
+     * - **EN:** Custom edit icon
+     * - **CN:** 自定义编辑图标
+     */
+    editIcon?: ReactNode;
+    /**
+     * **EN:** Edit button vertical alignment
+     *
+     * **CN:** 编辑按钮垂直对齐方式
+     *
+     * - `start` - align to the top | 顶部对齐
+     * - `center` - align to the center | 居中对齐
+     * - `end` - align to the bottom | 底部对齐
+     * - `baseline` - align to the text baseline, useful when the text has line height set |
+     *   与文本基线对齐，在文本设置了行高时会非常有用
+     *
+     * @default 'center'
+     */
+    editIconAlign?: CSSProperties['alignItems'];
+}
+/**
+ * - **EN:** Editable text component, providing a read-only display and an edit mode.
+ * - **CN:** 可编辑文本组件，提供只读显示和编辑模式。
+ *
+ * @example
+ *   <EditableText value="Editable Text" onOk={(value) => console.log('Saved value:', value)} />;
+ */
+declare const EditableText: {
+    <TT extends "Text" | "Paragraph" | "Title" | "Link", IT extends "Input" | "TextArea">(props: EditableTextProps<TT, IT>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    getEllipsisConfig: (content: string | undefined) => EllipsisConfig;
+};
+type EditableTextInterface = typeof EditableText & {
+    getEllipsisConfig: typeof getEllipsisConfig;
+};
+declare const _default: EditableTextInterface;
+export default _default;

package/lib/components/EditableText/index.js

@@ -0,0 +1,174 @@
+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/EditableText/index.tsx
+var EditableText_exports = {};
+__export(EditableText_exports, {
+  default: () => EditableText_default
+});
+module.exports = __toCommonJS(EditableText_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@ant-design/icons");
+var import_useT = __toESM(require("../../hooks/useT"));
+var import_form = __toESM(require("./form"));
+var import_style = __toESM(require("./style"));
+var getEllipsisConfig = (content) => ({
+  tooltip: {
+    title: content,
+    overlayStyle: { maxWidth: 500 }
+  }
+});
+var EditableText = (props) => {
+  const {
+    prefixCls: prefixClsInProps,
+    value: valueInProps = "",
+    displayText: displayTextInProps,
+    editable = true,
+    editing = false,
+    className = "",
+    style = {},
+    classNames,
+    styles: styleNames,
+    block,
+    textComp = "Text",
+    textProps,
+    editIcon,
+    editIconAlign = "center",
+    children,
+    formProps,
+    formItemProps,
+    inputComp: inputCompInProps,
+    inputProps,
+    required,
+    actionAlign,
+    submitProps,
+    cancelProps,
+    onOk,
+    onCancel,
+    onChange,
+    onEditingChange
+  } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("easy-editable-text", prefixClsInProps);
+  const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
+  const t = (0, import_useT.default)();
+  const [isEditing, setIsEditing] = (0, import_react.useState)(editing);
+  const TypographyComponent = import_antd.Typography[textComp];
+  const [value, setValue] = (0, import_react.useState)(valueInProps);
+  const displayText = displayTextInProps ?? value;
+  const inputComp = inputCompInProps ?? (textComp === "Paragraph" ? "TextArea" : "Input");
+  const editableRef = import_react.default.useRef(editable);
+  editableRef.current = editable;
+  (0, import_react.useEffect)(() => {
+    setValue(valueInProps);
+  }, [valueInProps]);
+  (0, import_react.useEffect)(() => {
+    if (editableRef.current) {
+      setIsEditing(editing);
+    }
+  }, [editing]);
+  const handleEditingChange = (editing2) => {
+    setIsEditing(editing2);
+    onEditingChange == null ? void 0 : onEditingChange(editing2);
+  };
+  const handleOk = async (val) => {
+    try {
+      await (onOk == null ? void 0 : onOk(val));
+      onChange == null ? void 0 : onChange(val);
+      setValue(val);
+      handleEditingChange(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleCancel = async () => {
+    handleEditingChange(false);
+    await (onCancel == null ? void 0 : onCancel());
+  };
+  return wrapCSSVar(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(prefixCls, hashId, cssVarCls, className), style }, isEditing ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-edit-mode` }, /* @__PURE__ */ import_react.default.createElement(
+      import_form.default,
+      {
+        prefixCls,
+        value,
+        required,
+        formProps,
+        formItemProps,
+        inputComp,
+        inputProps,
+        block,
+        classNames,
+        styles: styleNames,
+        actionAlign,
+        submitProps,
+        cancelProps,
+        onOk: handleOk,
+        onCancel: handleCancel
+      }
+    )) : /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Flex,
+      {
+        className: (0, import_classnames.default)(`${prefixCls}-view-mode`, {
+          [`${prefixCls}-single-line`]: textComp !== "Paragraph",
+          [`${prefixCls}-has-children`]: !!children,
+          [`${prefixCls}-view-mode-block`]: block
+        }),
+        align: editIconAlign
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-text-content` }, children ?? /* @__PURE__ */ import_react.default.createElement(
+        TypographyComponent,
+        {
+          ...textProps,
+          className: (0, import_classnames.default)(classNames == null ? void 0 : classNames.text, classNames == null ? void 0 : classNames.text, textProps == null ? void 0 : textProps.className),
+          style: {
+            marginBottom: textComp === "Title" ? 0 : void 0,
+            // 去掉标题组件的默认下边距
+            ...(textProps == null ? void 0 : textProps.style) ?? (styleNames == null ? void 0 : styleNames.text)
+          },
+          ellipsis: (textProps == null ? void 0 : textProps.ellipsis) ?? getEllipsisConfig(displayText)
+        },
+        displayText
+      )),
+      editable && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(`${prefixCls}-edit-icon`, classNames == null ? void 0 : classNames.editIcon),
+          style: styleNames == null ? void 0 : styleNames.editIcon,
+          title: t("components.EditableText.edit"),
+          onClick: () => handleEditingChange(true)
+        },
+        editIcon ?? /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, null)
+      )
+    ))
+  );
+};
+EditableText.getEllipsisConfig = getEllipsisConfig;
+var EditableText_default = EditableText;
+//# sourceMappingURL=index.js.map

package/lib/components/EditableText/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/EditableText/index.tsx"],
+  "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { ConfigProvider, Flex, Typography } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { LinkProps } from 'antd/es/typography/Link';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport names from 'classnames';\nimport { EditOutlined } from '@ant-design/icons';\nimport useT from '../../hooks/useT';\nimport EditableTextForm, { type EditableFormProps } from './form';\nimport useStyle from './style';\n\nconst getEllipsisConfig = (content: string | undefined): EllipsisConfig => ({\n  tooltip: {\n    title: content,\n    overlayStyle: { maxWidth: 500 },\n  },\n});\n\nexport interface EditableTextProps<\n  TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text',\n  IT extends 'Input' | 'TextArea' = 'Input',\n> extends EditableFormProps<IT> {\n  prefixCls?: string;\n  /**\n   * - **EN:** Custom read-only display text, replacing `value` display\n   * - **CN:** 自定义只读显示文本，替代`value`显示\n   *\n   * @default true\n   */\n  displayText?: string;\n  /**\n   * - **EN:** Another way to customize read-only display text, with higher priority than\n   *   `displayText`. This method does not support text truncation.\n   * - **CN:** 另外一种方式自定义只读显示文本，优先级高于`displayText`，这种方式无文本省略效果\n   */\n  children?: ReactNode;\n  /**\n   * - **EN:** Whether to allow editing. If set to `false`, the edit button will not be displayed.\n   * - **CN:** 是否允许编辑，如果设置为`false`，则不显示编辑按钮\n   *\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * - **EN:** Whether to open edit mode.\n   * - **CN:** 是否打开编辑模式\n   *\n   * @default false\n   */\n  editing?: boolean;\n  /**\n   * - **EN:** Component container class name.\n   * - **CN:** 组件容器类名\n   */\n  className?: string;\n  /**\n   * - **EN:** Component container style.\n   * - **CN:** 组件容器样式\n   */\n  style?: CSSProperties;\n  /**\n   * - **EN:** Semantic class names.\n   * - **CN:** 语义化类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Read-only text class name\n     * - **CN:** 只读文本类名\n     */\n    text?: string;\n    /**\n     * - **EN:** Edit button class name\n     * - **CN:** 编辑按钮类名\n     */\n    editIcon?: string;\n  } & EditableFormProps<IT>['classNames'];\n  /**\n   * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`\n   * - **CN:** 在`onOk`保存后，通过`onChange`把修改后的值传递出去\n   */\n  onChange?: (value: string) => void;\n  /**\n   * - **EN:** Event triggered when the editing state changes\n   * - **CN:** 编辑状态改变事件\n   */\n  onEditingChange?: (editing: boolean) => void;\n  /**\n   * - **EN:** Whether to display as a block-level element, with width 100%\n   * - **CN:** 语义化样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Read-only text class name\n     * - **CN:** 只读文本类名\n     */\n    text?: CSSProperties;\n    /**\n     * - **EN:** Edit button style\n     * - **CN:** 编辑按钮样式\n     */\n    editIcon?: CSSProperties;\n  } & EditableFormProps<IT>['styles'];\n\n  /**\n   * - **EN:** Custom component type for rendering the text\n   * - **CN:** 自定义设置渲染文本组件的组件类型\n   *\n   * @default 'Text'\n   */\n  textComp?: TT;\n  /**\n   * - **EN:** Text component props\n   * - **CN:** 文本组件属性\n   */\n  textProps?: TT extends 'Text'\n    ? TextProps\n    : TT extends 'Paragraph'\n      ? ParagraphProps\n      : TT extends 'Title'\n        ? TitleProps\n        : TT extends 'Link'\n          ? LinkProps\n          : never;\n  /**\n   * - **EN:** Custom edit icon\n   * - **CN:** 自定义编辑图标\n   */\n  editIcon?: ReactNode;\n  /**\n   * **EN:** Edit button vertical alignment\n   *\n   * **CN:** 编辑按钮垂直对齐方式\n   *\n   * - `start` - align to the top | 顶部对齐\n   * - `center` - align to the center | 居中对齐\n   * - `end` - align to the bottom | 底部对齐\n   * - `baseline` - align to the text baseline, useful when the text has line height set |\n   *   与文本基线对齐，在文本设置了行高时会非常有用\n   *\n   * @default 'center'\n   */\n  editIconAlign?: CSSProperties['alignItems'];\n}\n\n/**\n * - **EN:** Editable text component, providing a read-only display and an edit mode.\n * - **CN:** 可编辑文本组件，提供只读显示和编辑模式。\n *\n * @example\n *   <EditableText value=\"Editable Text\" onOk={(value) => console.log('Saved value:', value)} />;\n */\nconst EditableText = <TT extends 'Text' | 'Paragraph' | 'Title' | 'Link', IT extends 'Input' | 'TextArea'>(\n  props: EditableTextProps<TT, IT>\n) => {\n  const {\n    prefixCls: prefixClsInProps,\n    value: valueInProps = '',\n    displayText: displayTextInProps,\n    editable = true,\n    editing = false,\n    className = '',\n    style = {},\n    classNames,\n    styles: styleNames,\n    block,\n    textComp = 'Text',\n    textProps,\n    editIcon,\n    editIconAlign = 'center',\n    children,\n    formProps,\n    formItemProps,\n    inputComp: inputCompInProps,\n    inputProps,\n    required,\n    actionAlign,\n    submitProps,\n    cancelProps,\n    onOk,\n    onCancel,\n    onChange,\n    onEditingChange,\n  } = props;\n\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('easy-editable-text', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const t = useT();\n  const [isEditing, setIsEditing] = useState<boolean>(editing);\n  const TypographyComponent = Typography[textComp];\n  const [value, setValue] = useState(valueInProps);\n  const displayText = displayTextInProps ?? value;\n  const inputComp = inputCompInProps ?? (textComp === 'Paragraph' ? 'TextArea' : 'Input');\n  const editableRef = React.useRef(editable);\n  editableRef.current = editable;\n\n  // value受控\n  useEffect(() => {\n    setValue(valueInProps);\n  }, [valueInProps]);\n  // editing受控\n  useEffect(() => {\n    if (editableRef.current) {\n      setIsEditing(editing);\n    }\n  }, [editing]);\n\n  // 编辑状态改变\n  const handleEditingChange = (editing: boolean) => {\n    setIsEditing(editing);\n    onEditingChange?.(editing);\n  };\n  // 提交编辑\n  const handleOk = async (val: string) => {\n    try {\n      await onOk?.(val);\n      onChange?.(val);\n      setValue(val);\n      handleEditingChange(false);\n    } catch (error) {\n      console.error(error);\n    }\n  };\n  // 取消编辑\n  const handleCancel = async () => {\n    handleEditingChange(false);\n    await onCancel?.();\n  };\n\n  return wrapCSSVar(\n    <div className={names(prefixCls, hashId, cssVarCls, className)} style={style}>\n      {isEditing ? (\n        <div className={`${prefixCls}-edit-mode`}>\n          <EditableTextForm\n            prefixCls={prefixCls}\n            value={value}\n            required={required}\n            formProps={formProps}\n            formItemProps={formItemProps}\n            inputComp={inputComp}\n            inputProps={inputProps}\n            block={block}\n            classNames={classNames}\n            styles={styleNames}\n            actionAlign={actionAlign}\n            submitProps={submitProps}\n            cancelProps={cancelProps}\n            onOk={handleOk}\n            onCancel={handleCancel}\n          />\n        </div>\n      ) : (\n        <Flex\n          className={names(`${prefixCls}-view-mode`, {\n            [`${prefixCls}-single-line`]: textComp !== 'Paragraph',\n            [`${prefixCls}-has-children`]: !!children,\n            [`${prefixCls}-view-mode-block`]: block,\n          })}\n          align={editIconAlign}\n        >\n          <div className={`${prefixCls}-text-content`}>\n            {children ?? (\n              <TypographyComponent\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                {...(textProps as any)}\n                className={names(classNames?.text, classNames?.text, textProps?.className)}\n                style={{\n                  marginBottom: textComp === 'Title' ? 0 : undefined, // 去掉标题组件的默认下边距\n                  ...(textProps?.style ?? styleNames?.text),\n                }}\n                ellipsis={textProps?.ellipsis ?? getEllipsisConfig(displayText)}\n              >\n                {displayText}\n              </TypographyComponent>\n            )}\n          </div>\n          {/* 编辑按钮 */}\n          {editable && (\n            <div\n              className={names(`${prefixCls}-edit-icon`, classNames?.editIcon)}\n              style={styleNames?.editIcon}\n              title={t('components.EditableText.edit')}\n              onClick={() => handleEditingChange(true)}\n            >\n              {editIcon ?? <EditOutlined />}\n            </div>\n          )}\n        </Flex>\n      )}\n    </div>\n  );\n};\n\ntype EditableTextInterface = typeof EditableText & {\n  getEllipsisConfig: typeof getEllipsisConfig;\n};\n\nEditableText.getEllipsisConfig = getEllipsisConfig;\n\nexport default EditableText as EditableTextInterface;\n"],
+  "mappings": "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",
+  "names": ["useStyle", "useT", "React", "editing", "names", "EditableTextForm"]
+}

package/lib/components/EditableText/style/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (prefixCls: string, rootCls?: string | undefined) => readonly [(node: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;