fix: Typography copyable not sync (#48347)

* test: test driven * fix: copy of stable
ant-design · Apr 9, 2024 · 727aa2d · 727aa2d
1 parent 61c8a43
commit 727aa2d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
@@ -298,4 +298,22 @@ describe('Typography copy', () => {
       expect(result.current?.copyLoading).toBe(false);
     });
   });
+
+  it('not block copy text change', () => {
+    const spy = jest.spyOn(copyObj, 'default');
+
+    const renderDemo = (text: string) => (
+      <Base copyable={{ text }} component="p">
+        Text
+      </Base>
+    );
+
+    const { container, rerender } = render(renderDemo('Bamboo'));
+    rerender(renderDemo('Light'));
+
+    fireEvent.click(container.querySelector('.ant-typography-copy')!);
+    expect(spy.mock.calls[0][0]).toBe('Light');
+
+    spy.mockRestore();
+  });
 });
diff --git a/components/typography/hooks/useCopyClick.ts b/components/typography/hooks/useCopyClick.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import copy from 'copy-to-clipboard';
+import { useEvent } from 'rc-util';
 
 import type { CopyConfig } from '../Base';
 
@@ -29,33 +30,36 @@ const useCopyClick = ({
 
   React.useEffect(() => cleanCopyId, []);
 
+  // Keep copy action up to date
+  const onClick = useEvent(async (e?: React.MouseEvent<HTMLDivElement>) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    setCopyLoading(true);
+    try {
+      const text =
+        typeof copyConfig.text === 'function' ? await copyConfig.text() : copyConfig.text;
+      copy(text || String(children) || '', copyOptions);
+      setCopyLoading(false);
+
+      setCopied(true);
+
+      // Trigger tips update
+      cleanCopyId();
+      copyIdRef.current = setTimeout(() => {
+        setCopied(false);
+      }, 3000);
+
+      copyConfig.onCopy?.(e);
+    } catch (error) {
+      setCopyLoading(false);
+      throw error;
+    }
+  });
+
   return {
     copied,
     copyLoading,
-    onClick: async (e?: React.MouseEvent<HTMLDivElement>) => {
-      e?.preventDefault();
-      e?.stopPropagation();
-      setCopyLoading(true);
-      try {
-        const text =
-          typeof copyConfig.text === 'function' ? await copyConfig.text() : copyConfig.text;
-        copy(text || String(children) || '', copyOptions);
-        setCopyLoading(false);
-
-        setCopied(true);
-
-        // Trigger tips update
-        cleanCopyId();
-        copyIdRef.current = setTimeout(() => {
-          setCopied(false);
-        }, 3000);
-
-        copyConfig.onCopy?.(e);
-      } catch (error) {
-        setCopyLoading(false);
-        throw error;
-      }
-    },
+    onClick,
   };
 };