From 00c891ac05e7d8055af44e74b36e069e40065405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Mon, 25 Jul 2022 13:09:39 +0800 Subject: [PATCH] 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 --- components/button/button.tsx | 3 +- components/calendar/demo/customize-header.md | 2 +- components/date-picker/style/status.less | 2 +- components/tabs/demo/custom-add-trigger.md | 4 +-- components/tooltip/index.tsx | 2 +- .../typography/Base/EllipsisTooltip.tsx | 9 +++--- components/typography/Base/index.tsx | 26 ++++++++++----- .../typography/__tests__/ellipsis.test.js | 32 +++++++++++++++++++ components/typography/index.en-US.md | 4 +-- components/typography/index.zh-CN.md | 20 ++++++------ components/upload/utils.tsx | 4 +-- 11 files changed, 75 insertions(+), 33 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index b83e91dfe6..1f5ab6d319 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -189,8 +189,7 @@ const InternalButton: React.ForwardRefRenderFunction = (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; diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md index 5714d4103f..44212ba731 100644 --- a/components/calendar/demo/customize-header.md +++ b/components/calendar/demo/customize-header.md @@ -48,7 +48,7 @@ const App: React.FC = () => { , ); } - + const year = value.year(); const month = value.month(); const options = []; diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less index e146a3cc31..8d59a38af2 100644 --- 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; } diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index 632c0f605d..7742e90737 100644 --- 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); diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index b60f3f8681..c959af9f3a 100644 --- 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 { diff --git a/components/typography/Base/EllipsisTooltip.tsx b/components/typography/Base/EllipsisTooltip.tsx index 53632eb4b7..a2467208f8 100644 --- 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 ( - + {children} ); diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index d09b2a9904..ccd08ca815 100644 --- 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; 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) => { {resizeRef => ( diff --git a/components/typography/__tests__/ellipsis.test.js b/components/typography/__tests__/ellipsis.test.js index 0439f2d466..69c94f1d95 100644 --- 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( +
title
, + ); + 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', () => { diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index 32ceba3430..f2a92374bb 100644 --- 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) | - | | diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 7966f0c1fe..6aa06cd58d 100644 --- 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 diff --git a/components/upload/utils.tsx b/components/upload/utils.tsx index db4dcdf033..aed130a3bc 100644 --- a/components/upload/utils.tsx +++ b/components/upload/utils.tsx @@ -110,8 +110,8 @@ export function previewImage(file: File | Blob): Promise { 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;