@tiny-codes/react-easy 1.1.2 → 1.2.0

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

@@ -0,0 +1,160 @@
+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, 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
+     * - **CN:** 自定义只读显示文本，替代`value`显示
+     *
+     * @default true
+     */
+    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.
+     * - **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:** 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:** 组件容器类名
+     */
+    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<V, IT>['classNames'];
+    /**
+     * - **EN:** After saving with `onOk`, the modified value is passed out through `onChange`
+     * - **CN:** 在`onOk`保存后，通过`onChange`把修改后的值传递出去
+     */
+    onChange?: (value: V | undefined) => 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<V, 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: {
+    <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;
+};
+declare const _default: EditableTextInterface;
+export default _default;

package/lib/components/EditableText/index.js

@@ -0,0 +1,181 @@
+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: blockInProps,
+    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 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]);
+  (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: editingBlock,
+        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`]: viewBlock
+        }),
+        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, 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/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;

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

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/EditableText/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+module.exports = __toCommonJS(style_exports);
+var import_internal = require("antd/es/theme/internal");
+var genStyle = (token) => {
+  const { componentCls, antCls, iconCls } = token;
+  return {
+    [componentCls]: {
+      width: "100%",
+      lineHeight: 1,
+      [`${componentCls}-view-mode`]: {
+        display: "inline-flex",
+        width: "auto",
+        maxWidth: "100%",
+        columnGap: 8,
+        "&-block": {
+          display: "flex"
+        },
+        [`${componentCls}-text-content`]: {
+          flex: "auto",
+          minWidth: 0
+        },
+        [`${componentCls}-edit-icon`]: {
+          display: "inline-flex",
+          alignItems: "center",
+          flex: "none",
+          color: token.colorTextSecondary,
+          fontSize: token.fontSize,
+          // lineHeight: token.lineHeight,
+          // height: token.fontSize * token.lineHeight, // The height of the button should match the line height of the text, so that when the button is at the bottom, it aligns with the text baseline
+          cursor: "pointer",
+          "&:hover": {
+            color: token.colorPrimary
+          }
+        }
+        // '&.${componentCls}-has-children': {
+        //   '.edit-icon': {
+        //     lineHeight: 0,
+        //     height: 'auto', // When custom children are used, the height of the edit button should adapt automatically, rather than being set according to the Typography line height
+        //   },
+        // },
+      },
+      [`${componentCls}-edit-mode`]: {
+        width: "100%",
+        [`${componentCls}-form`]: {
+          display: "flex",
+          [`${antCls}-form`]: {
+            display: "flex",
+            flexWrap: "nowrap",
+            width: "100%",
+            [`${antCls}-form-item`]: {
+              [`&${antCls}-form-item-block`]: {
+                flex: 1
+              },
+              [`input${antCls}-input`]: {
+                minWidth: 100,
+                transition: "all 0.2s, width 0s"
+              },
+              [`textarea${antCls}-input`]: {
+                minWidth: 100,
+                transition: "all 0.2s, width 0s"
+              }
+            },
+            [`${componentCls}-form-btns`]: {
+              flex: "none",
+              lineHeight: 0,
+              [`${componentCls}-form-btn`]: {
+                width: 20,
+                height: 20,
+                padding: 0,
+                fontSize: 20,
+                lineHeight: 1,
+                [iconCls]: {
+                  fontSize: 20
+                },
+                [`&${componentCls}-form-btn-save:not(:disabled)`]: {
+                  color: token.colorSuccess,
+                  "&:hover": {
+                    color: token.colorSuccessActive
+                  }
+                },
+                [`&${componentCls}-form-btn-close:not(:disabled)`]: {
+                  color: token.colorError,
+                  "&:hover": {
+                    color: token.colorErrorActive
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (0, import_internal.genStyleHooks)("EasyEditableText", genStyle);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/EditableText/style/index.ts"],
+  "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype EditableTextToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<EditableTextToken> = (token): CSSObject => {\n  const { componentCls, antCls, iconCls } = token;\n  return {\n    [componentCls]: {\n      width: '100%',\n      lineHeight: 1,\n\n      [`${componentCls}-view-mode`]: {\n        display: 'inline-flex',\n        width: 'auto',\n        maxWidth: '100%',\n        columnGap: 8,\n        '&-block': {\n          display: 'flex',\n        },\n\n        [`${componentCls}-text-content`]: {\n          flex: 'auto',\n          minWidth: 0,\n        },\n\n        [`${componentCls}-edit-icon`]: {\n          display: 'inline-flex',\n          alignItems: 'center',\n          flex: 'none',\n          color: token.colorTextSecondary,\n          fontSize: token.fontSize,\n          // lineHeight: token.lineHeight,\n          // height: token.fontSize * token.lineHeight, // The height of the button should match the line height of the text, so that when the button is at the bottom, it aligns with the text baseline\n          cursor: 'pointer',\n          '&:hover': {\n            color: token.colorPrimary,\n          },\n        },\n        // '&.${componentCls}-has-children': {\n        //   '.edit-icon': {\n        //     lineHeight: 0,\n        //     height: 'auto', // When custom children are used, the height of the edit button should adapt automatically, rather than being set according to the Typography line height\n        //   },\n        // },\n      },\n\n      [`${componentCls}-edit-mode`]: {\n        width: '100%',\n\n        [`${componentCls}-form`]: {\n          display: 'flex',\n          [`${antCls}-form`]: {\n            display: 'flex',\n            flexWrap: 'nowrap',\n            width: '100%',\n\n            [`${antCls}-form-item`]: {\n              [`&${antCls}-form-item-block`]: {\n                flex: 1,\n              },\n              [`input${antCls}-input`]: {\n                minWidth: 100,\n                transition: 'all 0.2s, width 0s',\n              },\n              [`textarea${antCls}-input`]: {\n                minWidth: 100,\n                transition: 'all 0.2s, width 0s',\n              },\n            },\n            [`${componentCls}-form-btns`]: {\n              flex: 'none',\n              lineHeight: 0,\n\n              [`${componentCls}-form-btn`]: {\n                width: 20,\n                height: 20,\n                padding: 0,\n                fontSize: 20,\n                lineHeight: 1,\n\n                [iconCls]: {\n                  fontSize: 20,\n                },\n\n                [`&${componentCls}-form-btn-save:not(:disabled)`]: {\n                  color: token.colorSuccess,\n\n                  '&:hover': {\n                    color: token.colorSuccessActive,\n                  },\n                },\n\n                [`&${componentCls}-form-btn-close:not(:disabled)`]: {\n                  color: token.colorError,\n\n                  '&:hover': {\n                    color: token.colorErrorActive,\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default genStyleHooks('EasyEditableText' as never, genStyle);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,cAAc,QAAQ,QAAQ,IAAI;AAC1C,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,OAAO;AAAA,MACP,YAAY;AAAA,MAEZ,CAAC,GAAG,wBAAwB,GAAG;AAAA,QAC7B,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW;AAAA,UACT,SAAS;AAAA,QACX;AAAA,QAEA,CAAC,GAAG,2BAA2B,GAAG;AAAA,UAChC,MAAM;AAAA,UACN,UAAU;AAAA,QACZ;AAAA,QAEA,CAAC,GAAG,wBAAwB,GAAG;AAAA,UAC7B,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,MAAM;AAAA,UACN,OAAO,MAAM;AAAA,UACb,UAAU,MAAM;AAAA;AAAA;AAAA,UAGhB,QAAQ;AAAA,UACR,WAAW;AAAA,YACT,OAAO,MAAM;AAAA,UACf;AAAA,QACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOF;AAAA,MAEA,CAAC,GAAG,wBAAwB,GAAG;AAAA,QAC7B,OAAO;AAAA,QAEP,CAAC,GAAG,mBAAmB,GAAG;AAAA,UACxB,SAAS;AAAA,UACT,CAAC,GAAG,aAAa,GAAG;AAAA,YAClB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YAEP,CAAC,GAAG,kBAAkB,GAAG;AAAA,cACvB,CAAC,IAAI,wBAAwB,GAAG;AAAA,gBAC9B,MAAM;AAAA,cACR;AAAA,cACA,CAAC,QAAQ,cAAc,GAAG;AAAA,gBACxB,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACA,CAAC,WAAW,cAAc,GAAG;AAAA,gBAC3B,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,YACF;AAAA,YACA,CAAC,GAAG,wBAAwB,GAAG;AAAA,cAC7B,MAAM;AAAA,cACN,YAAY;AAAA,cAEZ,CAAC,GAAG,uBAAuB,GAAG;AAAA,gBAC5B,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,YAAY;AAAA,gBAEZ,CAAC,OAAO,GAAG;AAAA,kBACT,UAAU;AAAA,gBACZ;AAAA,gBAEA,CAAC,IAAI,2CAA2C,GAAG;AAAA,kBACjD,OAAO,MAAM;AAAA,kBAEb,WAAW;AAAA,oBACT,OAAO,MAAM;AAAA,kBACf;AAAA,gBACF;AAAA,gBAEA,CAAC,IAAI,4CAA4C,GAAG;AAAA,kBAClD,OAAO,MAAM;AAAA,kBAEb,WAAW;AAAA,oBACT,OAAO,MAAM;AAAA,kBACf;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,oBAA6B,QAAQ;",
+  "names": []
+}