feat: add a series of EllipsisTypography components

Author: shijistar

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 # Changelog
 
+## 1.6.0
+
+2026-1-1
+
+### Features
+
+- ✨ Add some `EllipsisTypography` components: `EllipsisTitle`, `EllipsisText`, and `EllipsisParagraph` with auto tooltip functionality.
+
 ## 1.5.6
 
 2025-12-8

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",

package.json

@@ -0,0 +1,23 @@
+import { Typography } from 'antd';
+import type { ParagraphProps } from 'antd/es/typography/Paragraph';
+import withEllipsisTypography, { type MakeEllipsisTypographyProps } from './withEllipsisTypography';
+
+export type EllipsisParagraphProps = MakeEllipsisTypographyProps<ParagraphProps>;
+
+/**
+ * - **EN:** A paragraph component with automatic ellipsis and tooltip functionality that displays a
+ *   tooltip when the text overflows, and does not display a tooltip when the text does not
+ *   overflow. The following three methods can enable the automatic tooltip feature:
+ *
+ *   1. Set the `ellipsis` property to `true`
+ *   2. Set the `ellipsis.tooltip` property to `true`
+ *   3. Set the `ellipsis.tooltip.title` property to `true`
+ * - **CN:** 具有自动省略号和提示功能的段落组件，在文本溢出时显示工具提示，如果文本未溢出，则不显示工具提示。以下三种方式均可开启自动提示功能：
+ *
+ *   1. 设置 `ellipsis` 属性为 `true`
+ *   2. 设置 `ellipsis.tooltip` 属性为 `true`
+ *   3. 设置 `ellipsis.tooltip.title` 属性为 `true`
+ */
+const EllipsisParagraph = withEllipsisTypography(Typography.Paragraph);
+
+export default EllipsisParagraph;

src/components/EllipsisTypography/EllipsisParagraph.tsx

@@ -0,0 +1,23 @@
+import { Typography } from 'antd';
+import type { TextProps } from 'antd/es/typography/Text';
+import withEllipsisTypography, { type MakeEllipsisTypographyProps } from './withEllipsisTypography';
+
+export type EllipsisTextProps = MakeEllipsisTypographyProps<TextProps>;
+
+/**
+ * - **EN:** A text component with automatic ellipsis and tooltip functionality that displays a
+ *   tooltip when the text overflows, and does not display a tooltip when the text does not
+ *   overflow. The following three methods can enable the automatic tooltip feature:
+ *
+ *   1. Set the `ellipsis` property to `true`
+ *   2. Set the `ellipsis.tooltip` property to `true`
+ *   3. Set the `ellipsis.tooltip.title` property to `true`
+ * - **CN:** 具有自动省略号和提示功能的文本组件，在文本溢出时显示工具提示，如果文本未溢出，则不显示工具提示。以下三种方式均可开启自动提示功能：
+ *
+ *   1. 设置 `ellipsis` 属性为 `true`
+ *   2. 设置 `ellipsis.tooltip` 属性为 `true`
+ *   3. 设置 `ellipsis.tooltip.title` 属性为 `true`
+ */
+const EllipsisText = withEllipsisTypography(Typography.Text);
+
+export default EllipsisText;

src/components/EllipsisTypography/EllipsisText.tsx

@@ -0,0 +1,23 @@
+import { Typography } from 'antd';
+import type { TitleProps } from 'antd/es/typography/Title';
+import withEllipsisTypography, { type MakeEllipsisTypographyProps } from './withEllipsisTypography';
+
+export type EllipsisTitleProps = MakeEllipsisTypographyProps<TitleProps>;
+
+/**
+ * - **EN:** A title component with automatic ellipsis and tooltip functionality that displays a
+ *   tooltip when the text overflows, and does not display a tooltip when the text does not
+ *   overflow. The following three methods can enable the automatic tooltip feature:
+ *
+ *   1. Set the `ellipsis` property to `true`
+ *   2. Set the `ellipsis.tooltip` property to `true`
+ *   3. Set the `ellipsis.tooltip.title` property to `true`
+ * - **CN:** 具有自动省略号和提示功能的标题组件，在文本溢出时显示工具提示，如果文本未溢出，则不显示工具提示。以下三种方式均可开启自动提示功能：
+ *
+ *   1. 设置 `ellipsis` 属性为 `true`
+ *   2. 设置 `ellipsis.tooltip` 属性为 `true`
+ *   3. 设置 `ellipsis.tooltip.title` 属性为 `true`
+ */
+const EllipsisTitle = withEllipsisTypography(Typography.Title);
+
+export default EllipsisTitle;

src/components/EllipsisTypography/EllipsisTitle.tsx

@@ -0,0 +1,78 @@
+import type { ComponentType } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { TooltipProps } from 'antd';
+import { Tooltip } from 'antd';
+import type { EllipsisConfig } from 'antd/es/typography/Base';
+import type { ParagraphProps } from 'antd/es/typography/Paragraph';
+import type { TextProps } from 'antd/es/typography/Text';
+import type { TitleProps } from 'antd/es/typography/Title';
+
+function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(
+  Component: ComponentType<MakeEllipsisTypographyProps<T>>
+) {
+  return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {
+    const { ellipsis, text, ...rest } = props;
+    const [isEllipsis, setIsEllipsis] = useState(false);
+    const [dom, setDom] = useState<HTMLElement | null>(null);
+    const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);
+    const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);
+    const isAutoTooltipTitle = useMemo(
+      () =>
+        typeof ellipsis === 'object' &&
+        ellipsis.tooltip &&
+        typeof ellipsis.tooltip === 'object' &&
+        'title' in ellipsis.tooltip &&
+        ellipsis.tooltip.title === true,
+      [ellipsis]
+    );
+    const isAuto = useMemo(
+      () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,
+      [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]
+    );
+    const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);
+
+    useEffect(() => {
+      if (dom && isAuto) {
+        Promise.resolve().then(() => {
+          setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);
+        });
+      }
+    }, [text, isAuto, dom]);
+
+    return (
+      <Tooltip title={tooltipTitle}>
+        <Component
+          ref={setDom}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          {...(rest as any)}
+          ellipsis={
+            isAutoEllipsis
+              ? { tooltip: undefined }
+              : isAutoTooltip
+                ? {
+                    ...(ellipsis as EllipsisConfig),
+                    tooltip: undefined,
+                  }
+                : isAutoTooltipTitle
+                  ? {
+                      ...(ellipsis as EllipsisConfig),
+                      tooltip: {
+                        ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),
+                        title: undefined,
+                      },
+                    }
+                  : ellipsis
+          }
+        >
+          {text}
+        </Component>
+      </Tooltip>
+    );
+  };
+}
+
+export type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {
+  text: string | undefined;
+};
+
+export default withEllipsisTypography;

src/components/EllipsisTypography/withEllipsisTypography.tsx

@@ -30,6 +30,15 @@ export { default as withDeleteConfirmAction } from './DeleteConfirmAction/withDe
 export type { EditableTextProps } from './EditableText';
 export { default as EditableText } from './EditableText';
 
+export * from './EllipsisTypography/EllipsisParagraph';
+export { default as EllipsisParagraph } from './EllipsisTypography/EllipsisParagraph';
+
+export * from './EllipsisTypography/EllipsisText';
+export { default as EllipsisText } from './EllipsisTypography/EllipsisText';
+
+export * from './EllipsisTypography/EllipsisTitle';
+export { default as EllipsisTitle } from './EllipsisTypography/EllipsisTitle';
+
 export type { FloatDrawerProps } from './FloatDrawer';
 export { default as FloatDrawer } from './FloatDrawer';