From a76bef17dc9d8cb736869bd3857f2c31352bf20f Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Tue, 3 Sep 2024 17:39:34 +0800 Subject: [PATCH 1/3] feat(copy): remove title/hideTooltip, add tooltip --- src/copy/__tests__/copy.test.tsx | 26 +++++++++++++++++++++++++- src/copy/demos/basic.tsx | 17 +++++++++++++---- src/copy/demos/custom.tsx | 2 +- src/copy/index.md | 15 ++++++++------- src/copy/index.tsx | 30 +++++++++++++++++++++--------- 5 files changed, 68 insertions(+), 22 deletions(-) diff --git a/src/copy/__tests__/copy.test.tsx b/src/copy/__tests__/copy.test.tsx index 1a780265b..bdb867dee 100644 --- a/src/copy/__tests__/copy.test.tsx +++ b/src/copy/__tests__/copy.test.tsx @@ -30,7 +30,7 @@ describe('test Copy', () => { it('should render with custom button', () => { const user = userEvent.setup({ writeToClipboard: true }); const { getByText } = render( - 测试复制文本} hideTooltip /> + 测试复制文本} /> ); const customButton = getByText('测试复制文本'); @@ -46,4 +46,28 @@ describe('test Copy', () => { expect(value).toEqual(mockText); }); }); + + it('should render with tooltip title', () => { + const mockCopy = jest.fn(); + render( mockCopy(text)} tooltip="复制文本" />); + setTimeout(() => { + expect(document.body.querySelector('.ant-tooltip')).toBeInTheDocument(); + expect(document.body.querySelector('.ant-tooltip-inner')?.innerHTML).toBe('复制文本'); + }, 0); + }); + + it('should render with tooltip object', () => { + const mockCopy = jest.fn(); + render( + mockCopy(text)} + tooltip={{ title: '复制文本' }} + /> + ); + setTimeout(() => { + expect(document.body.querySelector('.ant-tooltip')).toBeInTheDocument(); + expect(document.body.querySelector('.ant-tooltip-inner')?.innerHTML).toBe('复制文本'); + }, 0); + }); }); diff --git a/src/copy/demos/basic.tsx b/src/copy/demos/basic.tsx index d221f9270..f6a3da1b7 100644 --- a/src/copy/demos/basic.tsx +++ b/src/copy/demos/basic.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Space } from 'antd'; import { Copy } from 'dt-react-component'; const text = @@ -6,9 +7,17 @@ const text = export default () => { return ( -
- -

{text}

-
+ +
+

使用 tooltip 对象

+ +

{text}

+
+
+

使用 React.ReactNode

+ +

{text}

+
+ ); }; diff --git a/src/copy/demos/custom.tsx b/src/copy/demos/custom.tsx index 58afe1ab1..39253717b 100644 --- a/src/copy/demos/custom.tsx +++ b/src/copy/demos/custom.tsx @@ -7,7 +7,7 @@ const text = export default () => { return (
- 复制文本} hideTooltip /> + 复制文本} />

{text}

); diff --git a/src/copy/index.md b/src/copy/index.md index 9e417a845..346cfb857 100644 --- a/src/copy/index.md +++ b/src/copy/index.md @@ -19,10 +19,11 @@ demo: ### API -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | --------------------- | ------------------------ | ----------------------------------- | -| text | 需要复制的文本 | `string` | - | -| title | 在 Tooltip 展示的文本 | `string` | `复制` | -| hideTooltip | 是否隐藏 Tooltip | `boolean` | `false` | -| button | 自定义按钮 | `React.ReactNode` | `` | -| onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------------- | --------------------------------- | ----------------------------------- | +| text | 需要复制的文本 | `string` | - | +| tooltip | 配置提示信息 | `React.ReactNode \| TooltipProps` | -- | +| button | 自定义按钮 | `React.ReactNode` | `` | +| style | 样式 | `React.CSSProperties` | -- | +| className | 样式 | `string` | -- | +| onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` | diff --git a/src/copy/index.tsx b/src/copy/index.tsx index 9622e930e..a14cbc7eb 100644 --- a/src/copy/index.tsx +++ b/src/copy/index.tsx @@ -1,18 +1,31 @@ import React, { CSSProperties, ReactNode } from 'react'; import { CopyOutlined } from '@ant-design/icons'; -import { message, Tooltip } from 'antd'; +import { message, Tooltip, TooltipProps } from 'antd'; import classNames from 'classnames'; import useClippy from 'use-clippy'; import './style.scss'; +function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null { + if (!tooltip) { + return null; + } + if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) { + return tooltip as TooltipProps; + } + return { + title: tooltip, + }; +} + +export type LabelTooltipType = TooltipProps | React.ReactNode; + export interface ICopyProps { text: string; - title?: ReactNode; button?: ReactNode; - hideTooltip?: boolean; style?: CSSProperties; className?: string; + tooltip?: LabelTooltipType; onCopy?: (text: string) => void; } @@ -20,8 +33,7 @@ const Copy: React.FC = (props) => { const { button = , text, - title = '复制', - hideTooltip, + tooltip, style, className, onCopy = () => message.success('复制成功'), @@ -43,10 +55,10 @@ const Copy: React.FC = (props) => { ); - return !hideTooltip ? ( - - {renderCopyButton()} - + const tooltipProps = toTooltipProps(tooltip); + + return tooltipProps ? ( + {renderCopyButton()} ) : ( renderCopyButton() ); From f87908f4bf9b2008dbd1e18120865297c9b71d46 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Thu, 5 Sep 2024 11:57:21 +0800 Subject: [PATCH 2/3] feat(copy): remove toTooltipProps/LabelTooltipType to utils --- src/copy/demos/basic.tsx | 19 ++++++++++++++----- src/copy/index.md | 20 ++++++++++---------- src/copy/index.tsx | 23 +++-------------------- src/utils/index.ts | 13 +++++++++++++ 4 files changed, 40 insertions(+), 35 deletions(-) create mode 100644 src/utils/index.ts diff --git a/src/copy/demos/basic.tsx b/src/copy/demos/basic.tsx index f6a3da1b7..31c1ba58b 100644 --- a/src/copy/demos/basic.tsx +++ b/src/copy/demos/basic.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Space } from 'antd'; -import { Copy } from 'dt-react-component'; +import { BlockHeader, Copy } from 'dt-react-component'; const text = '基于 ant-design 的 React UI 组件库。 主要用于中，后台产品。我们的目标是满足更具体的业务场景组件。 当然，我们也有基于原生 javascript 实现的业务组件，例如ContextMenu，KeyEventListener等.'; @@ -9,13 +9,22 @@ export default () => { return (
-

使用 tooltip 对象

- + +

{text}

-

使用 React.ReactNode

- + + +

{text}

+
+
+ React.ReactNode`} + showBackground={false} + size="small" + /> + `使用 ()=>React.ReactNode，复制该文本`} />

{text}

 diff --git a/src/copy/index.md b/src/copy/index.md index 346cfb857..c11912866 100644 --- a/src/copy/index.md +++ b/src/copy/index.md @@ -14,16 +14,16 @@ demo: ## 示例 - - + + ### API -| 参数 | 说明 | 类型 | 默认值 | -| --------- | ---------------- | --------------------------------- | ----------------------------------- | -| text | 需要复制的文本 | `string` | - | -| tooltip | 配置提示信息 | `React.ReactNode \| TooltipProps` | -- | -| button | 自定义按钮 | `React.ReactNode` | `` | -| style | 样式 | `React.CSSProperties` | -- | -| className | 样式 | `string` | -- | -| onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------------- | --------------------------------------- | ----------------------------------- | +| text | 需要复制的文本 | `string` | - | +| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | -- | +| button | 自定义按钮 | `React.ReactNode` | `` | +| style | 样式 | `React.CSSProperties` | -- | +| className | 样式 | `string` | -- | +| onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` | diff --git a/src/copy/index.tsx b/src/copy/index.tsx index a14cbc7eb..3fd10033d 100644 --- a/src/copy/index.tsx +++ b/src/copy/index.tsx @@ -1,25 +1,12 @@ import React, { CSSProperties, ReactNode } from 'react'; import { CopyOutlined } from '@ant-design/icons'; -import { message, Tooltip, TooltipProps } from 'antd'; +import { message, Tooltip } from 'antd'; import classNames from 'classnames'; import useClippy from 'use-clippy'; +import { LabelTooltipType, toTooltipProps } from '../utils'; import './style.scss'; -function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null { - if (!tooltip) { - return null; - } - if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) { - return tooltip as TooltipProps; - } - return { - title: tooltip, - }; -} - -export type LabelTooltipType = TooltipProps | React.ReactNode; - export interface ICopyProps { text: string; button?: ReactNode; @@ -57,11 +44,7 @@ const Copy: React.FC = (props) => { const tooltipProps = toTooltipProps(tooltip); - return tooltipProps ? ( - {renderCopyButton()} - ) : ( - renderCopyButton() - ); + return {renderCopyButton()}; }; export default Copy; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 000000000..aaec266c3 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,13 @@ +import React from 'react'; +import { TooltipProps } from 'antd'; + +export type LabelTooltipType = TooltipProps | TooltipProps['title']; + +export function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null { + if (tooltip !== null && typeof tooltip === 'object' && !React.isValidElement(tooltip)) { + return tooltip as TooltipProps; + } + return { + title: tooltip, + }; +} From 8e2c1254169bc4d12fc52cf81f688350ac0fe4f0 Mon Sep 17 00:00:00 2001 From: LuckyFBB <976060700@qq.com> Date: Mon, 9 Sep 2024 14:48:29 +0800 Subject: [PATCH 3/3] fix(copy): reset init tooltip value --- src/copy/demos/custom.tsx | 14 ++++++++++---- src/copy/index.md | 4 ++-- src/copy/index.tsx | 2 +- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/copy/demos/custom.tsx b/src/copy/demos/custom.tsx index 39253717b..4691525de 100644 --- a/src/copy/demos/custom.tsx +++ b/src/copy/demos/custom.tsx @@ -6,9 +6,15 @@ const text = export default () => { return ( -
- 复制文本} /> -

{text}

-
+ <> +
+ 复制文本} /> +

{text}

+
+
+ 复制文本} tooltip={false} /> +

{text}

+
+ ); }; diff --git a/src/copy/index.md b/src/copy/index.md index c11912866..df1e3cb08 100644 --- a/src/copy/index.md +++ b/src/copy/index.md @@ -15,14 +15,14 @@ demo: ## 示例 - + ### API | 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | --------------------------------------- | ----------------------------------- | | text | 需要复制的文本 | `string` | - | -| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | -- | +| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | `复制` | | button | 自定义按钮 | `React.ReactNode` | `` | | style | 样式 | `React.CSSProperties` | -- | | className | 样式 | `string` | -- | diff --git a/src/copy/index.tsx b/src/copy/index.tsx index 3fd10033d..71720b5e4 100644 --- a/src/copy/index.tsx +++ b/src/copy/index.tsx @@ -20,7 +20,7 @@ const Copy: React.FC = (props) => { const { button = , text, - tooltip, + tooltip = '复制', style, className, onCopy = () => message.success('复制成功'),