feat(copy): remove title/hideTooltip, add tooltip (#479)

* feat(copy): remove title/hideTooltip, add tooltip

* feat(copy): remove toTooltipProps/LabelTooltipType to utils

* fix(copy): reset init tooltip value

Author: LuckyFBB

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(
-            <Copy text={mockText} button={<button>测试复制文本</button>} hideTooltip />
+            <Copy text={mockText} button={<button>测试复制文本</button>} />
         );
         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(<Copy text={mockText} onCopy={(text) => 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(
+            <Copy
+                text={mockText}
+                onCopy={(text) => mockCopy(text)}
+                tooltip={{ title: '复制文本' }}
+            />
+        );
+        setTimeout(() => {
+            expect(document.body.querySelector('.ant-tooltip')).toBeInTheDocument();
+            expect(document.body.querySelector('.ant-tooltip-inner')?.innerHTML).toBe('复制文本');
+        }, 0);
+    });
 });

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 (
-        <div>
-            <Copy text={text} title="复制该文本" />
-            <p>{text}</p>
-        </div>
+        <Space direction="vertical">
+            <div>
+                <BlockHeader title="使用 tooltip 对象" showBackground={false} size="small" />
+                <Copy text={text} tooltip={{ title: '使用 tooltip 对象，复制该文本' }} />
+                <p>{text}</p>
+            </div>
+            <div>
+                <BlockHeader title="使用 React.ReactNode" showBackground={false} size="small" />
+                <Copy text={text} tooltip="使用 React.ReactNode，复制该文本" />
+                <p>{text}</p>
+            </div>
+            <div>
+                <BlockHeader
+                    title={`使用 ()=>React.ReactNode`}
+                    showBackground={false}
+                    size="small"
+                />
+                <Copy text={text} tooltip={() => `使用 ()=>React.ReactNode，复制该文本`} />
+                <p>{text}</p>
+            </div>
+        </Space>
     );
 };

src/copy/demos/custom.tsx

@@ -6,9 +6,15 @@ const text =
 
 export default () => {
     return (
-        <div>
-            <Copy text={text} button={<a>复制文本</a>} hideTooltip />
-            <p>{text}</p>
-        </div>
+        <>
+            <div>
+                <Copy text={text} button={<a>复制文本</a>} />
+                <p>{text}</p>
+            </div>
+            <div>
+                <Copy text={text} button={<a>复制文本</a>} tooltip={false} />
+                <p>{text}</p>
+            </div>
+        </>
     );
 };

src/copy/index.md

@@ -14,15 +14,16 @@ demo:
 
 ## 示例
 
-<code src='./demos/basic.tsx' title="点击按钮，进行复制"></code>
-<code src='./demos/custom.tsx' title="自定义按钮" description='通过hideTooltip属性，可以隐藏默认的提示'></code>
+<code src='./demos/basic.tsx' title="点击按钮，进行复制" description='不同方式给 Tooltip 赋值'></code>
+<code src='./demos/custom.tsx' title="自定义按钮" description='tooltip 设置假值不展示，默认展示复制'></code>
 
 ### API
 
-| 参数        | 说明                  | 类型                     | 默认值                              |
-| ----------- | --------------------- | ------------------------ | ----------------------------------- |
-| text        | 需要复制的文本        | `string`                 | -                                   |
-| title       | 在 Tooltip 展示的文本 | `string`                 | `复制`                              |
-| hideTooltip | 是否隐藏 Tooltip      | `boolean`                | `false`                             |
-| button      | 自定义按钮            | `React.ReactNode`        | `<CopyOutlined />`                  |
-| onCopy      | 复制后的回调函数      | `(text: string) => void` | `() => message.success('复制成功')` |
+| 参数      | 说明             | 类型                                    | 默认值                              |
+| --------- | ---------------- | --------------------------------------- | ----------------------------------- |
+| text      | 需要复制的文本   | `string`                                | -                                   |
+| tooltip   | 配置提示信息     | `TooltipProps['title'] \| TooltipProps` | `复制`                              |
+| button    | 自定义按钮       | `React.ReactNode`                       | `<CopyOutlined />`                  |
+| style     | 样式             | `React.CSSProperties`                   | --                                  |
+| className | 样式             | `string`                                | --                                  |
+| onCopy    | 复制后的回调函数 | `(text: string) => void`                | `() => message.success('复制成功')` |

src/copy/index.tsx

@@ -4,24 +4,23 @@ 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;
 }
 
 const Copy: React.FC<ICopyProps> = (props) => {
     const {
         button = <CopyOutlined className="dtc-copy__default-icon" />,
         text,
-        title = '复制',
-        hideTooltip,
+        tooltip = '复制',
         style,
         className,
         onCopy = () => message.success('复制成功'),
@@ -43,13 +42,9 @@ const Copy: React.FC<ICopyProps> = (props) => {
         </span>
     );
 
-    return !hideTooltip ? (
-        <Tooltip placement="right" title={title}>
-            {renderCopyButton()}
-        </Tooltip>
-    ) : (
-        renderCopyButton()
-    );
+    const tooltipProps = toTooltipProps(tooltip);
+
+    return <Tooltip {...tooltipProps}>{renderCopyButton()}</Tooltip>;
 };
 
 export default Copy;

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,
+    };
+}