@tiny-codes/react-easy 1.1.3 → 1.2.1

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

@@ -1,13 +1,13 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 import type { ButtonProps, FormItemProps, FormProps, InputProps, SpaceProps } from 'antd';
 import type { TextAreaProps } from 'antd/es/input';
-export interface EditableFormProps<IT extends 'Input' | 'TextArea'> {
+export interface EditableFormProps<V, IT extends 'Input' | 'TextArea' | RenderInputInterface> {
     prefixCls?: string;
     /**
      * - **EN:** The value to edit
      * - **CN:** 编辑的值
      */
-    value: string | undefined;
+    value: V | undefined;
     /**
      * - **EN:** Whether the text is required when editing, default is `true`, if `formItemProps.rules`
      *   is set, it will override this value
@@ -37,7 +37,7 @@ export interface EditableFormProps<IT extends 'Input' | 'TextArea'> {
      * - **EN:** Input component properties
      * - **CN:** 输入框组件属性
      */
-    inputProps?: IT extends 'TextArea' ? TextAreaProps : InputProps;
+    inputProps?: IT extends 'TextArea' ? TextAreaProps : IT extends 'Input' ? InputProps : never;
     /**
      * - **EN:** Whether to display as a block-level element, with width 100%
      * - **CN:** 是否显示为块级元素，宽度100%
@@ -133,12 +133,18 @@ export interface EditableFormProps<IT extends 'Input' | 'TextArea'> {
      * - **EN:** Confirm button click event, supports asynchronous operations
      * - **CN:** 确认按钮点击事件，支持异步操作
      */
-    onOk: (value: string) => void | Promise<void>;
+    onOk: (value: V | undefined) => void | Promise<void>;
     /**
      * - **EN:** Cancel button click event, supports asynchronous operations
      * - **CN:** 取消按钮点击事件，支持异步操作
      */
     onCancel?: () => void | Promise<void>;
 }
-declare const EditableTextForm: <IT extends "Input" | "TextArea">({ prefixCls, value, required, classNames, styles: styleNames, inputComp, block: blockInProps, formProps, formItemProps, inputProps, actionAlign, submitProps, cancelProps, onOk, onCancel, }: EditableFormProps<IT>) => import("react/jsx-runtime").JSX.Element;
+declare const EditableTextForm: <V, IT extends "Input" | RenderInputInterface | "TextArea">(props: EditableFormProps<V, IT>) => import("react/jsx-runtime").JSX.Element;
+export type RenderInputInterface = <V>(props: RenderInputProps<V>) => ReactElement | null;
+export interface RenderInputProps<V> extends Omit<EditableFormProps<V, 'Input'>, 'inputComp' | 'inputProps' | 'onOk' | 'onCancel'> {
+    onChange?: (value: V | undefined) => void;
+    submit(): Promise<void>;
+    cancel(): Promise<void>;
+}
 export default EditableTextForm;

package/lib/components/EditableText/form.js

@@ -38,29 +38,31 @@ 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 EditableTextForm = (props) => {
   var _a, _b;
+  const {
+    prefixCls,
+    value,
+    required = true,
+    classNames,
+    styles: styleNames,
+    inputComp = "Input",
+    block: blockInProps = false,
+    formProps,
+    formItemProps,
+    inputProps,
+    actionAlign = "center",
+    submitProps,
+    cancelProps,
+    onOk,
+    onCancel
+  } = props;
   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 supportAutoScale = inputComp === "Input" || inputComp === "TextArea";
   const detectorRef = (0, import_react.useRef)(null);
   const actionRef = (0, import_react.useRef)(null);
   const [inputWidth, setInputWidth] = (0, import_react.useState)();
@@ -70,15 +72,15 @@ var EditableTextForm = ({
   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);
+    const inputElement = (_a2 = inputRef.current) == null ? void 0 : _a2.input;
+    if (detectorRef.current && inputElement && supportAutoScale) {
+      const inputStyle = getComputedStyle(inputElement);
       contentWidth = detectorRef.current.offsetWidth + pxToNumber(inputStyle.paddingLeft) + pxToNumber(inputStyle.paddingRight) + pxToNumber(inputStyle.borderLeftWidth) + pxToNumber(inputStyle.borderRightWidth);
       setInputWidth(contentWidth);
     }
@@ -97,7 +99,7 @@ var EditableTextForm = ({
       observer.observe(wrapperRef.current);
     }
     return () => observer.disconnect();
-  }, []);
+  }, [supportAutoScale]);
   const handleCancel = async () => {
     form.resetFields();
     try {
@@ -108,7 +110,7 @@ var EditableTextForm = ({
   };
   const handleEscape = async (e) => {
     var _a2;
-    if (e.key === "Escape") {
+    if ((inputComp === "Input" || inputComp === "TextArea") && e.key === "Escape") {
       await handleCancel();
       (_a2 = cancelProps == null ? void 0 : cancelProps.onClick) == null ? void 0 : _a2.call(cancelProps, e);
     }
@@ -124,6 +126,43 @@ var EditableTextForm = ({
       setSaving(false);
     }
   };
+  const renderInput = () => {
+    if (inputComp === "Input" || inputComp === "TextArea") {
+      const COMP = inputComp === "Input" ? import_antd.Input : import_antd.Input.TextArea;
+      return /* @__PURE__ */ React.createElement(
+        COMP,
+        {
+          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 && "style" in inputProps ? inputProps == null ? void 0 : inputProps.style : {}
+          },
+          onPressEnter: () => {
+            if (inputComp === "Input") {
+              form.submit();
+            }
+          },
+          onKeyUp: handleEscape
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React.createElement(
+        CustomInput,
+        {
+          ...props,
+          render: inputComp,
+          submit: async () => {
+            const values = await form.validateFields();
+            await handleSubmit(values);
+          },
+          cancel: handleCancel
+        }
+      );
+    }
+  };
   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,
     {
@@ -151,23 +190,9 @@ var EditableTextForm = ({
         },
         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
-        }
-      )
+      renderInput()
     ),
-    /* @__PURE__ */ React.createElement(
+    supportAutoScale && /* @__PURE__ */ React.createElement(
       "span",
       {
         ref: detectorRef,
@@ -178,7 +203,7 @@ var EditableTextForm = ({
           whiteSpace: "pre"
         }
       },
-      value
+      value == null ? void 0 : value.toString()
     ),
     /* @__PURE__ */ React.createElement(import_antd.Space, { ref: actionRef, className: `${prefixCls}-form-btns`, align: actionAlign, size: 4 }, /* @__PURE__ */ React.createElement(
       import_antd.Button,
@@ -216,6 +241,11 @@ var EditableTextForm = ({
     ))
   ));
 };
+function CustomInput(props) {
+  const { render, value, onChange, ...restProps } = props;
+  const useInput = render;
+  return useInput({ ...restProps, value, onChange });
+}
 function pxToNumber(px) {
   return px ? parseFloat(px.toString().replace("px", "")) : 0;
 }

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

@@ -1,7 +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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",
+  "sourcesContent": ["import type { CSSProperties, ReactElement } 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;\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport interface EditableFormProps<V, IT extends 'Input' | 'TextArea' | RenderInputInterface> {\n  prefixCls?: string;\n  /**\n   * - **EN:** The value to edit\n   * - **CN:** 编辑的值\n   */\n  value: V | 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 : IT extends 'Input' ? InputProps : never;\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: V | undefined) => void | Promise<void>;\n  /**\n   * - **EN:** Cancel button click event, supports asynchronous operations\n   * - **CN:** 取消按钮点击事件，支持异步操作\n   */\n  onCancel?: () => void | Promise<void>;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nconst EditableTextForm = <V, IT extends 'Input' | 'TextArea' | RenderInputInterface>(\n  props: EditableFormProps<V, IT>\n) => {\n  const {\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  } = props;\n  const t = useT();\n  const { getPrefixCls: getAntPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const [form] = Form.useForm<{ value: V | undefined }>();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<InputRef>(null);\n  const supportAutoScale = inputComp === 'Input' || inputComp === 'TextArea';\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\n  // Update form value when `value` prop changes\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    form.setFieldsValue({ value: value as any });\n  }, [form, value]);\n\n  // Detect the width of the text and dynamically scale the input width until it reaches the max width of the container.\n  // Only built-in Input and TextArea components are supported.\n  useEffect(() => {\n    let contentWidth = 0;\n    const inputElement = inputRef.current?.input;\n    if (detectorRef.current && inputElement && supportAutoScale) {\n      const inputStyle = getComputedStyle(inputElement);\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  }, [supportAutoScale]);\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 ((inputComp === 'Input' || inputComp === 'TextArea') && 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: V | undefined }) => {\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  const renderInput = () => {\n    if (inputComp === 'Input' || inputComp === 'TextArea') {\n      const COMP = inputComp === 'Input' ? Input : Input.TextArea;\n      return (\n        <COMP\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' in inputProps ? inputProps?.style : {}),\n          }}\n          onPressEnter={() => {\n            if (inputComp === 'Input') {\n              form.submit();\n            }\n          }}\n          onKeyUp={handleEscape}\n        />\n      );\n    } else {\n      return (\n        <CustomInput<V>\n          {...props}\n          render={inputComp}\n          submit={async () => {\n            const values = await form.validateFields();\n            await handleSubmit(values);\n          }}\n          cancel={handleCancel}\n        />\n      );\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          {renderInput()}\n        </Form.Item>\n        {/* Used to calculate the width of the text content */}\n        {supportAutoScale && (\n          <span\n            ref={detectorRef}\n            style={{\n              position: 'absolute',\n              visibility: 'hidden',\n              height: 0,\n              whiteSpace: 'pre',\n            }}\n          >\n            {value?.toString()}\n          </span>\n        )}\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 CustomInput<V>(\n  props: RenderInputProps<V> & {\n    render: RenderInputInterface;\n  }\n): ReactElement | null {\n  const { render, value, onChange, ...restProps } = props;\n  const useInput = render;\n  return useInput({ ...restProps, value, onChange });\n}\n\nfunction pxToNumber(px: string | number | null | undefined) {\n  return px ? parseFloat(px.toString().replace('px', '')) : 0;\n}\n\nexport type RenderInputInterface = <V>(props: RenderInputProps<V>) => ReactElement | null;\nexport interface RenderInputProps<V>\n  extends Omit<EditableFormProps<V, 'Input'>, 'inputComp' | 'inputProps' | 'onOk' | 'onCancel'> {\n  onChange?: (value: V | undefined) => void;\n  submit(): Promise<void>;\n  cancel(): Promise<void>;\n}\n\nexport default EditableTextForm;\n"],
+  "mappings": "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",
   "names": ["useT", "_a", "_b", "value", "names"]
 }

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

@@ -5,9 +5,9 @@ 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> {
+import { type EditableFormProps, type RenderInputInterface } from './form';
+declare const getEllipsisConfig: (content: ReactNode | undefined) => EllipsisConfig;
+export interface EditableTextProps<V = string, TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text', IT extends 'Input' | 'TextArea' | RenderInputInterface = 'Input'> extends Omit<EditableFormProps<V, IT>, 'block'> {
     prefixCls?: string;
     /**
      * - **EN:** Custom read-only display text, replacing `value` display
@@ -15,7 +15,7 @@ export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | '
      *
      * @default true
      */
-    displayText?: string;
+    displayText?: ReactNode | ((value: V | undefined) => ReactNode);
     /**
      * - **EN:** Another way to customize read-only display text, with higher priority than
      *   `displayText`. This method does not support text truncation.
@@ -36,6 +36,28 @@ export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | '
      * @default false
      */
     editing?: boolean;
+    /**
+     * - **EN:** Whether to display as a block-level element, with width 100%
+     * - **CN:** 是否显示为块级元素，宽度100%
+     *
+     * @default false
+     */
+    block?: boolean | {
+        /**
+         * - **EN:** Whether to display as a block-level element in view mode, with width 100%
+         * - **CN:** 只读模式是否显示为块级元素，宽度100%
+         *
+         * @default false
+         */
+        view?: boolean;
+        /**
+         * - **EN:** Whether to display as a block-level element in edit mode, with width 100%
+         * - **CN:** 编辑模式是否显示为块级元素，宽度100%
+         *
+         * @default false
+         */
+        editing?: boolean;
+    };
     /**
      * - **EN:** Component container class name.
      * - **CN:** 组件容器类名
@@ -61,12 +83,12 @@ export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | '
          * - **CN:** 编辑按钮类名
          */
         editIcon?: string;
-    } & EditableFormProps<IT>['classNames'];
+    } & EditableFormProps<V, IT>['classNames'];
     /**
      * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`
      * - **CN:** 在`onOk`保存后，通过`onChange`把修改后的值传递出去
      */
-    onChange?: (value: string) => void;
+    onChange?: (value: V | undefined) => void;
     /**
      * - **EN:** Event triggered when the editing state changes
      * - **CN:** 编辑状态改变事件
@@ -87,7 +109,7 @@ export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | '
          * - **CN:** 编辑按钮样式
          */
         editIcon?: CSSProperties;
-    } & EditableFormProps<IT>['styles'];
+    } & EditableFormProps<V, IT>['styles'];
     /**
      * - **EN:** Custom component type for rendering the text
      * - **CN:** 自定义设置渲染文本组件的组件类型
@@ -128,8 +150,8 @@ export interface EditableTextProps<TT extends 'Text' | 'Paragraph' | 'Title' | '
  *   <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;
+    <V, TT extends "Text" | "Paragraph" | "Title" | "Link", IT extends "Input" | RenderInputInterface | "TextArea">(props: EditableTextProps<V, TT, IT>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    getEllipsisConfig: (content: ReactNode | undefined) => EllipsisConfig;
 };
 type EditableTextInterface = typeof EditableText & {
     getEllipsisConfig: typeof getEllipsisConfig;

package/lib/components/EditableText/index.js

@@ -48,7 +48,7 @@ var getEllipsisConfig = (content) => ({
 var EditableText = (props) => {
   const {
     prefixCls: prefixClsInProps,
-    value: valueInProps = "",
+    value: valueInProps,
     displayText: displayTextInProps,
     editable = true,
     editing = false,
@@ -56,7 +56,7 @@ var EditableText = (props) => {
     style = {},
     classNames,
     styles: styleNames,
-    block,
+    block: blockInProps,
     textComp = "Text",
     textProps,
     editIcon,
@@ -82,10 +82,17 @@ var EditableText = (props) => {
   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 viewBlock = typeof blockInProps === "boolean" ? blockInProps : blockInProps == null ? void 0 : blockInProps.view;
+  const editingBlock = typeof blockInProps === "boolean" ? blockInProps : blockInProps == null ? void 0 : blockInProps.editing;
   const editableRef = import_react.default.useRef(editable);
   editableRef.current = editable;
+  const displayText = (0, import_react.useMemo)(() => {
+    if (typeof displayTextInProps === "function") {
+      return displayTextInProps(value);
+    }
+    return displayTextInProps ?? (value == null ? void 0 : value.toString());
+  }, [displayTextInProps, value]);
   (0, import_react.useEffect)(() => {
     setValue(valueInProps);
   }, [valueInProps]);
@@ -123,7 +130,7 @@ var EditableText = (props) => {
         formItemProps,
         inputComp,
         inputProps,
-        block,
+        block: editingBlock,
         classNames,
         styles: styleNames,
         actionAlign,
@@ -138,7 +145,7 @@ var EditableText = (props) => {
         className: (0, import_classnames.default)(`${prefixCls}-view-mode`, {
           [`${prefixCls}-single-line`]: textComp !== "Paragraph",
           [`${prefixCls}-has-children`]: !!children,
-          [`${prefixCls}-view-mode-block`]: block
+          [`${prefixCls}-view-mode-block`]: viewBlock
         }),
         align: editIconAlign
       },

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

@@ -1,7 +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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",
+  "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport React, { useContext, useEffect, useMemo, 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, type RenderInputInterface } from './form';\nimport useStyle from './style';\n\nconst getEllipsisConfig = (content: ReactNode | undefined): EllipsisConfig => ({\n  tooltip: {\n    title: content,\n    overlayStyle: { maxWidth: 500 },\n  },\n});\n\nexport interface EditableTextProps<\n  V = string,\n  TT extends 'Text' | 'Paragraph' | 'Title' | 'Link' = 'Text',\n  IT extends 'Input' | 'TextArea' | RenderInputInterface = 'Input',\n> extends Omit<EditableFormProps<V, IT>, 'block'> {\n  prefixCls?: string;\n  /**\n   * - **EN:** Custom read-only display text, replacing `value` display\n   * - **CN:** 自定义只读显示文本，替代`value`显示\n   *\n   * @default true\n   */\n  displayText?: ReactNode | ((value: V | undefined) => ReactNode);\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:** Whether to display as a block-level element, with width 100%\n   * - **CN:** 是否显示为块级元素，宽度100%\n   *\n   * @default false\n   */\n  block?:\n    | boolean\n    | {\n        /**\n         * - **EN:** Whether to display as a block-level element in view mode, with width 100%\n         * - **CN:** 只读模式是否显示为块级元素，宽度100%\n         *\n         * @default false\n         */\n        view?: boolean;\n        /**\n         * - **EN:** Whether to display as a block-level element in edit mode, with width 100%\n         * - **CN:** 编辑模式是否显示为块级元素，宽度100%\n         *\n         * @default false\n         */\n        editing?: boolean;\n      };\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<V, 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: V | undefined) => 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<V, 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 = <\n  V,\n  TT extends 'Text' | 'Paragraph' | 'Title' | 'Link',\n  IT extends 'Input' | 'TextArea' | RenderInputInterface,\n>(\n  props: EditableTextProps<V, 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: blockInProps,\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 inputComp = inputCompInProps ?? (textComp === 'Paragraph' ? 'TextArea' : 'Input');\n  const viewBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.view;\n  const editingBlock = typeof blockInProps === 'boolean' ? blockInProps : blockInProps?.editing;\n  const editableRef = React.useRef(editable);\n  editableRef.current = editable;\n  const displayText = useMemo(() => {\n    if (typeof displayTextInProps === 'function') {\n      return displayTextInProps(value);\n    }\n    return displayTextInProps ?? value?.toString();\n  }, [displayTextInProps, value]);\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: V | undefined) => {\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={editingBlock}\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`]: viewBlock,\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/Loading/index.d.ts

@@ -19,12 +19,12 @@ export type LoadingProps = SpinProps & {
      *   animation
      * - **CN:** 在独立使用时，设置动画遮罩父容器的样式类名
      */
-    maskClassName?: string;
+    rootClassName?: string;
     /**
      * - **EN:** When used independently, set the style for the mask parent container of the animation
      * - **CN:** 在独立使用时，设置动画遮罩父容器的样式
      */
-    maskStyle?: CSSProperties;
+    rootStyle?: CSSProperties;
 };
 /**
  * **EN:** Page loading animation component, providing two usage methods:

package/lib/components/Loading/index.js

@@ -39,9 +39,9 @@ var import_style = __toESM(require("./style"));
 var Loading = (props) => {
   const {
     prefixCls: prefixClsInProps,
-    maskClassName,
-    maskStyle,
     mode = "flex",
+    rootClassName,
+    rootStyle,
     children,
     spinning = true,
     className,
@@ -67,10 +67,10 @@ var Loading = (props) => {
             hashId,
             cssVarCls,
             prefixCls,
-            maskClassName,
+            rootClassName,
             mode === "absolute" ? `${prefixCls}-absolute` : `${prefixCls}-flex`
           ),
-          style: maskStyle
+          style: rootStyle
         },
         /* @__PURE__ */ React.createElement(import_antd.Spin, { className, spinning, ...spinProps })
       )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Loading/index.tsx"],
-  "sourcesContent": ["import { type CSSProperties, type FC, useContext } from 'react';\nimport type { SpinProps } from 'antd';\nimport { ConfigProvider, Spin } from 'antd';\nimport classNames from 'classnames';\nimport useStyle from './style';\n\nexport type LoadingProps = SpinProps & {\n  /**\n   * - **EN:** When used independently, the positioning method of the animation:\n   * - **absolute** - Uses absolute positioning, and the animation will automatically center itself\n   *   within the parent container.\n   * - **flex** - Uses flexbox layout, and the animation will automatically fill the parent container\n   *   and center itself.\n   * - **CN:** 独立使用时，动画的定位方式：\n   * - **absolute** - 使用绝对定位，动画会自动居中显示在父容器中。\n   * - **flex** - 使用弹性布局，动画会自动填充父容器并居中显示。\n   *\n   * @default `flex`\n   */\n  mode?: 'absolute' | 'flex';\n  /**\n   * - **EN:** When used independently, set the class name for the mask parent container of the\n   *   animation\n   * - **CN:** 在独立使用时，设置动画遮罩父容器的样式类名\n   */\n  maskClassName?: string;\n  /**\n   * - **EN:** When used independently, set the style for the mask parent container of the animation\n   * - **CN:** 在独立使用时，设置动画遮罩父容器的样式\n   */\n  maskStyle?: CSSProperties;\n};\n\n/**\n * **EN:** Page loading animation component, providing two usage methods:\n *\n * - **Spin** - When the component wraps children, it wraps the `Spin` component around the children\n *   to provide animation effects.\n * - **Independent** - Directly render a loading animation that automatically fills the parent\n *   container and is centered.\n *\n * **CN:** 页面加载动画组件，提供两种使用方式：\n *\n * - **Spin** - 组件包裹children时，在children外层包裹 `Spin` 组件，提供动画效果。\n * - **独立使用** - 直接渲染一个加载动画，自动撑满父容器，且显示在居中位置。\n *\n * @example\n *   1. Spin surrounding children\n *\n *   ```tsx\n *   <PageLoading spinning={loading}>\n *   <div>This is content</div>\n *   </PageLoading>;\n *   ```\n *\n *   2. Independent usage (inline layout)\n *\n *   ```tsx\n *   <PageLoading />;\n *   ```\n *\n *   3. Centered display within container (absolute layout)\n *\n *   ```tsx\n *   <div className=\"container\" style={{ position: 'relative' }}>\n *   <PageLoading absolute />\n *   </div>;\n *   ```\n */\nconst Loading: FC<LoadingProps> = (props) => {\n  const {\n    prefixCls: prefixClsInProps,\n    maskClassName,\n    maskStyle,\n    mode = 'flex',\n    children,\n    spinning = true,\n    className,\n    ...spinProps\n  } = props;\n\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('easy-loading', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n\n  return children\n    ? // Use spin to wrap children when children is provided,\n      // and control the animation display with the spinning prop.\n      wrapCSSVar(\n        <Spin className={classNames(hashId, cssVarCls, prefixCls, className)} spinning={spinning} {...spinProps}>\n          {children}\n        </Spin>\n      )\n    : // Show the loading animation in a wrapper that fills the parent container and centers the animation,\n      // and hides the entire component when the animation is off.\n      spinning &&\n        wrapCSSVar(\n          <div\n            className={classNames(\n              hashId,\n              cssVarCls,\n              prefixCls,\n              maskClassName,\n              mode === 'absolute' ? `${prefixCls}-absolute` : `${prefixCls}-flex`\n            )}\n            style={maskStyle}\n          >\n            <Spin className={className} spinning={spinning} {...spinProps} />\n          </div>\n        );\n};\n\nexport default Loading;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AAExD,kBAAqC;AACrC,wBAAuB;AACvB,mBAAqB;AAiErB,IAAM,UAA4B,CAAC,UAAU;AAC3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,YAAY,aAAa,gBAAgB,gBAAgB;AAC/D,QAAM,CAAC,YAAY,QAAQ,SAAS,QAAI,aAAAA,SAAS,SAAS;AAE1D,SAAO;AAAA;AAAA;AAAA,IAGH;AAAA,MACE,oCAAC,oBAAK,eAAW,kBAAAC,SAAW,QAAQ,WAAW,WAAW,SAAS,GAAG,UAAqB,GAAG,aAC3F,QACH;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAGA,YACE;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,kBAAAA;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,aAAa,GAAG,uBAAuB,GAAG;AAAA,UACrD;AAAA,UACA,OAAO;AAAA;AAAA,QAEP,oCAAC,oBAAK,WAAsB,UAAqB,GAAG,WAAW;AAAA,MACjE;AAAA,IACF;AAAA;AACR;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import { type CSSProperties, type FC, useContext } from 'react';\nimport type { SpinProps } from 'antd';\nimport { ConfigProvider, Spin } from 'antd';\nimport classNames from 'classnames';\nimport useStyle from './style';\n\nexport type LoadingProps = SpinProps & {\n  /**\n   * - **EN:** When used independently, the positioning method of the animation:\n   * - **absolute** - Uses absolute positioning, and the animation will automatically center itself\n   *   within the parent container.\n   * - **flex** - Uses flexbox layout, and the animation will automatically fill the parent container\n   *   and center itself.\n   * - **CN:** 独立使用时，动画的定位方式：\n   * - **absolute** - 使用绝对定位，动画会自动居中显示在父容器中。\n   * - **flex** - 使用弹性布局，动画会自动填充父容器并居中显示。\n   *\n   * @default `flex`\n   */\n  mode?: 'absolute' | 'flex';\n  /**\n   * - **EN:** When used independently, set the class name for the mask parent container of the\n   *   animation\n   * - **CN:** 在独立使用时，设置动画遮罩父容器的样式类名\n   */\n  rootClassName?: string;\n  /**\n   * - **EN:** When used independently, set the style for the mask parent container of the animation\n   * - **CN:** 在独立使用时，设置动画遮罩父容器的样式\n   */\n  rootStyle?: CSSProperties;\n};\n\n/**\n * **EN:** Page loading animation component, providing two usage methods:\n *\n * - **Spin** - When the component wraps children, it wraps the `Spin` component around the children\n *   to provide animation effects.\n * - **Independent** - Directly render a loading animation that automatically fills the parent\n *   container and is centered.\n *\n * **CN:** 页面加载动画组件，提供两种使用方式：\n *\n * - **Spin** - 组件包裹children时，在children外层包裹 `Spin` 组件，提供动画效果。\n * - **独立使用** - 直接渲染一个加载动画，自动撑满父容器，且显示在居中位置。\n *\n * @example\n *   1. Spin surrounding children\n *\n *   ```tsx\n *   <PageLoading spinning={loading}>\n *   <div>This is content</div>\n *   </PageLoading>;\n *   ```\n *\n *   2. Independent usage (inline layout)\n *\n *   ```tsx\n *   <PageLoading />;\n *   ```\n *\n *   3. Centered display within container (absolute layout)\n *\n *   ```tsx\n *   <div className=\"container\" style={{ position: 'relative' }}>\n *   <PageLoading absolute />\n *   </div>;\n *   ```\n */\nconst Loading: FC<LoadingProps> = (props) => {\n  const {\n    prefixCls: prefixClsInProps,\n    mode = 'flex',\n    rootClassName,\n    rootStyle,\n    children,\n    spinning = true,\n    className,\n    ...spinProps\n  } = props;\n\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('easy-loading', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n\n  return children\n    ? // Use spin to wrap children when children is provided,\n      // and control the animation display with the spinning prop.\n      wrapCSSVar(\n        <Spin className={classNames(hashId, cssVarCls, prefixCls, className)} spinning={spinning} {...spinProps}>\n          {children}\n        </Spin>\n      )\n    : // Show the loading animation in a wrapper that fills the parent container and centers the animation,\n      // and hides the entire component when the animation is off.\n      spinning &&\n        wrapCSSVar(\n          <div\n            className={classNames(\n              hashId,\n              cssVarCls,\n              prefixCls,\n              rootClassName,\n              mode === 'absolute' ? `${prefixCls}-absolute` : `${prefixCls}-flex`\n            )}\n            style={rootStyle}\n          >\n            <Spin className={className} spinning={spinning} {...spinProps} />\n          </div>\n        );\n};\n\nexport default Loading;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AAExD,kBAAqC;AACrC,wBAAuB;AACvB,mBAAqB;AAiErB,IAAM,UAA4B,CAAC,UAAU;AAC3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,aAAa,QAAI,yBAAW,2BAAe,aAAa;AAChE,QAAM,YAAY,aAAa,gBAAgB,gBAAgB;AAC/D,QAAM,CAAC,YAAY,QAAQ,SAAS,QAAI,aAAAA,SAAS,SAAS;AAE1D,SAAO;AAAA;AAAA;AAAA,IAGH;AAAA,MACE,oCAAC,oBAAK,eAAW,kBAAAC,SAAW,QAAQ,WAAW,WAAW,SAAS,GAAG,UAAqB,GAAG,aAC3F,QACH;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAGA,YACE;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,kBAAAA;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,aAAa,GAAG,uBAAuB,GAAG;AAAA,UACrD;AAAA,UACA,OAAO;AAAA;AAAA,QAEP,oCAAC,oBAAK,WAAsB,UAAqB,GAAG,WAAW;AAAA,MACjE;AAAA,IACF;AAAA;AACR;AAEA,IAAO,kBAAQ;",
   "names": ["useStyle", "classNames"]
 }