feat: refactor copyIcon component (#329)

* feat: refactor copyIcon component

* test: add test case for CopyButton

* feat: rename CopyButton to Copy

* test: fix copy test

---------

Co-authored-by: jialan <[email protected]>

Author: JackWang032

package.json

@@ -71,6 +71,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/user-event": "^14.4.3",
         "@typed-mxgraph/typed-mxgraph": "^1.0.7",
         "@types/jest": "^29.2.3",
         "@types/lodash": "^4.14.191",
@@ -112,7 +113,8 @@
         "mxgraph": "^4.2.2",
         "rc-drawer": "~5.1.0",
         "rc-virtual-list": "^3.4.13",
-        "showdown": "^1.9.0"
+        "showdown": "^1.9.0",
+        "use-clippy": "^1.0.9"
     },
     "config": {
         "commitizen": {

pnpm-lock.yaml

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import Copy from '..';
+
+describe('test Copy', () => {
+    const mockText = 'This is a mock text';
+
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('should copy text to clipboard on click', () => {
+        const user = userEvent.setup({ writeToClipboard: true });
+        const mockCopy = jest.fn();
+        const { container } = render(<Copy text={mockText} onCopy={(text) => mockCopy(text)} />);
+        const button = container.querySelector('.dtc-copy');
+
+        expect(button).toBeInTheDocument();
+
+        fireEvent.click(button!);
+        expect(mockCopy).toHaveBeenCalledWith(mockText);
+        user.paste().then((value) => {
+            expect(value).toEqual(mockText);
+        });
+    });
+
+    it('should render with custom button', () => {
+        const user = userEvent.setup({ writeToClipboard: true });
+        const { getByText } = render(
+            <Copy text={mockText} button={<button>测试复制文本</button>} hideTooltip />
+        );
+        const customButton = getByText('测试复制文本');
+
+        expect(customButton).toBeInTheDocument();
+
+        fireEvent.mouseEnter(customButton);
+        setTimeout(() => {
+            expect(document.body.querySelector('.ant-tooltip')).not.toBeInTheDocument();
+        }, 0);
+
+        fireEvent.click(customButton);
+        user.paste().then((value) => {
+            expect(value).toEqual(mockText);
+        });
+    });
+});

src/copy/__tests__/copy.test.tsx

@@ -1,35 +1,14 @@
----
-title: CopyIcon 复制文本
-group: 组件
-toc: content
-demo:
-    cols: 2
----
-
-# CopyIcon 复制文本
-
-## 何时使用
-
-复制文本到粘贴版
-
-## 示例
-
-```jsx
-/**
- * title: "点击按钮，复制文本。"
- */
 import React from 'react';
-import { CopyIcon } from 'dt-react-component';
+import { Copy } from 'dt-react-component';
 
 const text =
     '基于 ant-design 的 React UI 组件库。 主要用于中，后台产品。我们的目标是满足更具体的业务场景组件。 当然，我们也有基于原生 javascript 实现的业务组件，例如ContextMenu，KeyEventListener等.';
 
 export default () => {
     return (
-        <>
-            <CopyIcon text={text} />
+        <div>
+            <Copy text={text} title="复制该文本" />
             <p>{text}</p>
-        </>
+        </div>
     );
 };
-```

src/copyIcon/index.md src/copy/demos/basic.tsxsrc/copyIcon/index.md renamed to src/copy/demos/basic.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Copy } from 'dt-react-component';
+
+const text =
+    '基于 ant-design 的 React UI 组件库。 主要用于中，后台产品。我们的目标是满足更具体的业务场景组件。 当然，我们也有基于原生 javascript 实现的业务组件，例如ContextMenu，KeyEventListener等.';
+
+export default () => {
+    return (
+        <div>
+            <Copy text={text} button={<a>复制文本</a>} hideTooltip />
+            <p>{text}</p>
+        </div>
+    );
+};

src/copy/demos/custom.tsx

@@ -0,0 +1,28 @@
+---
+title: Copy 复制文本
+group: 组件
+toc: content
+demo:
+    cols: 1
+---
+
+# Copy 复制文本
+
+## 何时使用
+
+复制文本到粘贴版
+
+## 示例
+
+<code src='./demos/basic.tsx' title="点击按钮，进行复制"></code>
+<code src='./demos/custom.tsx' title="自定义按钮" description='通过hideTooltip属性，可以隐藏默认的提示'></code>
+
+### API
+
+| 参数        | 说明                  | 类型                     | 默认值                              |
+| ----------- | --------------------- | ------------------------ | ----------------------------------- |
+| text        | 需要复制的文本        | `string`                 | -                                   |
+| title       | 在 Tooltip 展示的文本 | `string`                 | `复制`                              |
+| hideTooltip | 是否隐藏 Tooltip      | `boolean`                | `false`                             |
+| button      | 自定义按钮            | `React.ReactNode`        | `<CopyOutlined />`                  |
+| onCopy      | 复制后的回调函数      | `(text: string) => void` | `() => message.success('复制成功')` |

src/copy/index.md

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Tooltip, message } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import useClippy from 'use-clippy';
+import classNames from 'classnames';
+import './style.scss';
+
+export interface ICopyProps {
+    text: string;
+    title?: React.ReactNode;
+    button?: React.ReactNode;
+    hideTooltip?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    onCopy?: (text: string) => void;
+}
+
+const Copy: React.FC<ICopyProps> = (props) => {
+    const {
+        button = <CopyOutlined className="dtc-copy__default-icon" />,
+        text,
+        title = '复制',
+        hideTooltip,
+        style,
+        className,
+        onCopy = () => message.success('复制成功'),
+    } = props;
+    const [_, setClipboard] = useClippy();
+
+    const handleCopy = () => {
+        setClipboard(text);
+        onCopy(text);
+    };
+
+    const renderCopyButton = () => (
+        <span
+            className={classNames(['dtc-copy', className])}
+            style={style}
+            onClick={() => handleCopy()}
+        >
+            {button}
+        </span>
+    );
+
+    return !hideTooltip ? (
+        <Tooltip placement="right" title={title}>
+            {renderCopyButton()}
+        </Tooltip>
+    ) : (
+        renderCopyButton()
+    );
+};
+
+export default Copy;

src/copy/index.tsx

@@ -0,0 +1,7 @@
+.dtc-copy {
+    display: inline-block;
+    cursor: pointer;
+    &__default-icon:hover {
+        color: #58ABF9;
+    }
+}