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..31c1ba58b 100644 --- a/src/copy/demos/basic.tsx +++ b/src/copy/demos/basic.tsx @@ -1,14 +1,32 @@ import React from 'react'; -import { Copy } from 'dt-react-component'; +import { Space } from 'antd'; +import { BlockHeader, Copy } from 'dt-react-component'; const text = '基于 ant-design 的 React UI 组件库。 主要用于中,后台产品。我们的目标是满足更具体的业务场景组件。 当然,我们也有基于原生 javascript 实现的业务组件,例如ContextMenu,KeyEventListener等.'; export default () => { return ( -
- -

{text}

-
+ +
+ + +

{text}

+
+
+ + +

{text}

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

{text}

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

{text}

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

{text}

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

{text}

+
+ ); }; diff --git a/src/copy/index.md b/src/copy/index.md index 9e417a845..df1e3cb08 100644 --- a/src/copy/index.md +++ b/src/copy/index.md @@ -14,15 +14,16 @@ demo: ## 示例 - - + + ### API -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | --------------------- | ------------------------ | ----------------------------------- | -| text | 需要复制的文本 | `string` | - | -| title | 在 Tooltip 展示的文本 | `string` | `复制` | -| hideTooltip | 是否隐藏 Tooltip | `boolean` | `false` | -| button | 自定义按钮 | `React.ReactNode` | `` | -| 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 9622e930e..71720b5e4 100644 --- a/src/copy/index.tsx +++ b/src/copy/index.tsx @@ -4,15 +4,15 @@ import { message, Tooltip } from 'antd'; import classNames from 'classnames'; import useClippy from 'use-clippy'; +import { LabelTooltipType, toTooltipProps } from '../utils'; import './style.scss'; export interface ICopyProps { text: string; - title?: ReactNode; button?: ReactNode; - hideTooltip?: boolean; style?: CSSProperties; className?: string; + tooltip?: LabelTooltipType; onCopy?: (text: string) => void; } @@ -20,8 +20,7 @@ const Copy: React.FC = (props) => { const { button = , text, - title = '复制', - hideTooltip, + tooltip = '复制', style, className, onCopy = () => message.success('复制成功'), @@ -43,13 +42,9 @@ const Copy: React.FC = (props) => { ); - return !hideTooltip ? ( - - {renderCopyButton()} - - ) : ( - renderCopyButton() - ); + const tooltipProps = toTooltipProps(tooltip); + + 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, + }; +}