feat: Typography ellipsis.tooltip could be a object (#36099)

* feat: add tooltipProps * feat: doc * feat: props * feat: props * feat: props * feat: docs * feat: review * feat: add tooltipProps * feat: doc * feat: props * feat: props * feat: props * feat: docs * feat: review
2024-11-30 02:59:04 +08:00 · 2022-07-25 13:09:39 +08:00 · 2022-07-25 13:09:39 +08:00 · 00c891ac05
commit 00c891ac05
parent 3920a724cc
11 changed files with 75 additions and 33 deletions
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -189,8 +189,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
  };

  // =============== Update Loading ===============
-  const loadingOrDelay: Loading =
-      typeof loading === 'boolean' ? loading : (loading?.delay || true);
+  const loadingOrDelay: Loading = typeof loading === 'boolean' ? loading : loading?.delay || true;

  React.useEffect(() => {
    let delayTimer: number | null = null;
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@ -48,7 +48,7 @@ const App: React.FC = () => {
              </Select.Option>,
            );
          }
-          
+
          const year = value.year();
          const month = value.month();
          const options = [];
--- a/components/date-picker/style/status.less
+++ b/components/date-picker/style/status.less
@ -20,7 +20,7 @@
    &:focus {
      .active(@text-color, @hoverBorderColor, @outlineColor);
    }
-    
+
    .@{picker-prefix-cls}-active-bar {
      background: @hoverBorderColor;
    }
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@ -40,8 +40,8 @@ const App: React.FC = () => {
  };

  const remove = (targetKey: string) => {
-    const targetIndex = panes.findIndex((pane) => pane.key === targetKey);
-    const newPanes = panes.filter((pane) => pane.key !== targetKey);
+    const targetIndex = panes.findIndex(pane => pane.key === targetKey);
+    const newPanes = panes.filter(pane => pane.key !== targetKey);
    if (newPanes.length && targetKey === activeKey) {
      const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
      setActiveKey(key);
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@ -57,7 +57,7 @@ export type RenderFunction = () => React.ReactNode;

 export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
  title?: React.ReactNode | RenderFunction;
-  overlay: React.ReactNode | RenderFunction;
+  overlay?: React.ReactNode | RenderFunction;
 }

 export interface TooltipPropsWithTitle extends AbstractTooltipProps {
--- a/components/typography/Base/EllipsisTooltip.tsx
+++ b/components/typography/Base/EllipsisTooltip.tsx
@ -1,25 +1,26 @@
 import * as React from 'react';
 import Tooltip from '../../tooltip';
+import type { TooltipProps } from '../../tooltip';

 export interface EllipsisTooltipProps {
-  title?: React.ReactNode;
+  tooltipProps?: TooltipProps;
  enabledEllipsis: boolean;
  isEllipsis?: boolean;
  children: React.ReactElement;
 }

 const EllipsisTooltip = ({
-  title,
  enabledEllipsis,
  isEllipsis,
  children,
+  tooltipProps,
 }: EllipsisTooltipProps) => {
-  if (!title || !enabledEllipsis) {
+  if (!tooltipProps?.title || !enabledEllipsis) {
    return children;
  }

  return (
-    <Tooltip title={title} visible={isEllipsis ? undefined : false}>
+    <Tooltip visible={isEllipsis ? undefined : false} {...tooltipProps}>
      {children}
    </Tooltip>
  );
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@ -13,9 +13,10 @@ import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import { ConfigContext } from '../../config-provider';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
-import Tooltip from '../../tooltip';
-import { isStyleSupport } from '../../_util/styleChecker';
 import TransButton from '../../_util/transButton';
+import { isStyleSupport } from '../../_util/styleChecker';
+import type { TooltipProps } from '../../tooltip';
+import Tooltip from '../../tooltip';
 import Editable from '../Editable';
 import useMergedConfig from '../hooks/useMergedConfig';
 import useUpdatedEffect from '../hooks/useUpdatedEffect';
@ -55,7 +56,7 @@ export interface EllipsisConfig {
  symbol?: React.ReactNode;
  onExpand?: React.MouseEventHandler<HTMLElement>;
  onEllipsis?: (ellipsis: boolean) => void;
-  tooltip?: React.ReactNode;
+  tooltip?: React.ReactNode | TooltipProps;
 }

 export interface BlockProps extends TypographyProps {
@ -309,7 +310,16 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
  }, [enableEllipsis, cssEllipsis, children, cssLineClamp]);

  // ========================== Tooltip ===========================
-  const tooltipTitle = ellipsisConfig.tooltip === true ? children : ellipsisConfig.tooltip;
+  let tooltipProps: TooltipProps = {};
+  if (ellipsisConfig.tooltip === true) {
+    tooltipProps = { title: children };
+  } else if (React.isValidElement(ellipsisConfig.tooltip)) {
+    tooltipProps = { title: ellipsisConfig.tooltip };
+  } else if (typeof ellipsisConfig.tooltip === 'object') {
+    tooltipProps = { title: children, ...ellipsisConfig.tooltip };
+  } else {
+    tooltipProps = { title: ellipsisConfig.tooltip };
+  }
  const topAriaLabel = React.useMemo(() => {
    const isValid = (val: any) => ['string', 'number'].includes(typeof val);

@ -325,12 +335,12 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
      return title;
    }

-    if (isValid(tooltipTitle)) {
-      return tooltipTitle;
+    if (isValid(tooltipProps.title)) {
+      return tooltipProps.title;
    }

    return undefined;
-  }, [enableEllipsis, cssEllipsis, title, tooltipTitle, isMergedEllipsis]);
+  }, [enableEllipsis, cssEllipsis, title, tooltipProps.title, isMergedEllipsis]);

  // =========================== Render ===========================
  // >>>>>>>>>>> Editing input
@ -452,7 +462,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
    <ResizeObserver onResize={onResize} disabled={!mergedEnableEllipsis || cssEllipsis}>
      {resizeRef => (
        <EllipsisTooltip
-          title={tooltipTitle}
+          tooltipProps={tooltipProps}
          enabledEllipsis={mergedEnableEllipsis}
          isEllipsis={isMergedEllipsis}
        >
--- a/components/typography/tests/ellipsis.test.js
+++ b/components/typography/tests/ellipsis.test.js
@ -292,6 +292,38 @@ describe('Typography.Ellipsis', () => {
        expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
      });
    });
+    it('tooltip props', async () => {
+      const { container, baseElement } = await getWrapper({
+        title: 'This is tooltip',
+        className: 'tooltip-class-name',
+      });
+      fireEvent.mouseEnter(container.firstChild);
+      await waitFor(() => {
+        expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
+        expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+      });
+    });
+    it('tooltip title true', async () => {
+      const { container, baseElement } = await getWrapper({
+        title: true,
+        className: 'tooltip-class-name',
+      });
+      fireEvent.mouseEnter(container.firstChild);
+      await waitFor(() => {
+        expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
+        expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+      });
+    });
+    it('tooltip element', async () => {
+      const { container, baseElement } = await getWrapper(
+        <div className="tooltip-class-name">title</div>,
+      );
+      fireEvent.mouseEnter(container.firstChild);
+      await waitFor(() => {
+        expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
+        expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+      });
+    });
  });

  it('js ellipsis should show aria-label', () => {
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@ -122,7 +122,7 @@ Basic text writing, including headings, body text, lists, and more.
      expandable: boolean,
      suffix: string,
      symbol: ReactNode,
-      tooltip: boolean | ReactNode,
+      tooltip: boolean | ReactNode | TooltipProps,
      onExpand: function(event),
      onEllipsis: function(ellipsis),
    }
@ -133,7 +133,7 @@ Basic text writing, including headings, body text, lists, and more.
 | rows | Max rows of content | number | - |  |
 | suffix | Suffix of ellipsis content | string | - |  |
 | symbol | Custom description of ellipsis | ReactNode | `Expand` |  |
-| tooltip | Show tooltip when ellipsis | boolean \| ReactNode | - | 4.11.0 |
+| tooltip | Show tooltip when ellipsis | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 |
 | onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
 | onExpand | Called when expand content | function(event) | - |  |

--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@ -123,20 +123,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
      expandable: boolean,
      suffix: string,
      symbol: ReactNode,
-      tooltip: boolean | ReactNode,
+      tooltip: boolean | ReactNode | TooltipProps,
      onExpand: function(event),
      onEllipsis: function(ellipsis),
    }

-| 参数       | 说明                 | 类型                 | 默认值 | 版本   |
-| ---------- | -------------------- | -------------------- | ------ | ------ |
-| expandable | 是否可展开           | boolean              | -      |        |
-| rows       | 最多显示的行数       | number               | -      |        |
-| suffix     | 自定义省略内容后缀   | string               | -      |        |
-| symbol     | 自定义展开描述文案   | ReactNode            | `展开` |        |
-| tooltip    | 省略时，展示提示信息 | boolean \| ReactNode | -      | 4.11.0 |
-| onEllipsis | 触发省略时的回调     | function(ellipsis)   | -      | 4.2.0  |
-| onExpand   | 点击展开时的回调     | function(event)      | -      |        |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| expandable | 是否可展开 | boolean | - |  |
+| rows | 最多显示的行数 | number | - |  |
+| suffix | 自定义省略内容后缀 | string | - |  |
+| symbol | 自定义展开描述文案 | ReactNode | `展开` |  |
+| tooltip | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 |
+| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
+| onExpand | 点击展开时的回调 | function(event) | - |  |

 ## FAQ

--- a/components/upload/utils.tsx
+++ b/components/upload/utils.tsx
@ -110,8 +110,8 @@ export function previewImage(file: File | Blob): Promise<string> {

      resolve(dataURL);
    };
-    img.crossOrigin = "anonymous";
-    if (file.type.startsWith("image/svg+xml")) {
+    img.crossOrigin = 'anonymous';
+    if (file.type.startsWith('image/svg+xml')) {
      const reader = new FileReader();
      reader.addEventListener('load', () => {
        if (reader.result) img.src = reader.result as string;