From b246055ace19914874fdfdac6a2c8e9af6065d60 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Mon, 10 Aug 2020 14:57:21 -0600
Subject: [PATCH] Add callback option for Clipboard component

---
 src/components/Clipboard.js         |  8 ++++++--
 src/components/Clipboard.stories.js |  4 ++++
 src/components/CodeSnippets.js      | 12 ++++--------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Clipboard.js b/src/components/Clipboard.js
index 84722951..a3db894e 100644
--- a/src/components/Clipboard.js
+++ b/src/components/Clipboard.js
@@ -13,6 +13,7 @@ const Tooltip = styled(WithTooltip)`
 export const Clipboard = ({
   children,
   toCopy,
+  getCopyContent,
   copyOptions,
   resetTimeout,
   renderCopiedTooltip,
@@ -35,7 +36,7 @@ export const Clipboard = ({
   }, [copied]);
 
   const copy = () => {
-    if (copyToClipboard(toCopy, copyOptions)) {
+    if (copyToClipboard(toCopy || getCopyContent(), copyOptions)) {
       setCopied(true);
     }
   };
@@ -54,7 +55,8 @@ export const Clipboard = ({
 
 Clipboard.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  toCopy: PropTypes.string.isRequired,
+  toCopy: PropTypes.string,
+  getCopyContent: PropTypes.func,
   copyOptions: PropTypes.object, // eslint-disable-line
   renderCopiedTooltip: PropTypes.func,
   renderUncopiedTooltip: PropTypes.func,
@@ -66,4 +68,6 @@ Clipboard.defaultProps = {
   renderCopiedTooltip: () => null,
   renderUncopiedTooltip: () => null,
   resetTimeout: 3000,
+  toCopy: undefined,
+  getCopyContent: () => undefined,
 };
diff --git a/src/components/Clipboard.stories.js b/src/components/Clipboard.stories.js
index fcc427a2..7c1bb4e9 100644
--- a/src/components/Clipboard.stories.js
+++ b/src/components/Clipboard.stories.js
@@ -10,6 +10,10 @@ export default {
 
 export const Default = () => <Clipboard toCopy="linky">Click to copy</Clipboard>;
 
+export const Callback = () => (
+  <Clipboard getCopyContent={() => 'linky from callback'}>Click to copy</Clipboard>
+);
+
 export const Tooltips = () => (
   <Clipboard
     toCopy="linky"
diff --git a/src/components/CodeSnippets.js b/src/components/CodeSnippets.js
index 73ca9cee..8b3f6857 100644
--- a/src/components/CodeSnippets.js
+++ b/src/components/CodeSnippets.js
@@ -55,21 +55,17 @@ const StyledClipboard = styled(Clipboard)`
 
 function Snippet({ snippet }) {
   const { Snippet: SnippetComponent } = snippet;
-  const [toCopy, setToCopy] = useState('');
   const snippetRef = useRef();
-
-  useEffect(() => {
-    if (snippetRef.current) {
-      setToCopy(snippetRef.current.textContent);
-    }
-  }, [snippetRef.current]);
+  const getCopyContent = () => snippetRef.current && snippetRef.current.textContent;
 
   return (
     <StyledHighlight withHTMLChildren={false}>
       <div ref={snippetRef}>
         <SnippetComponent />
       </div>
-      <StyledClipboard toCopy={toCopy}>{(copied) => (copied ? 'Copied' : 'Copy')}</StyledClipboard>
+      <StyledClipboard getCopyContent={getCopyContent}>
+        {(copied) => (copied ? 'Copied' : 'Copy')}
+      </StyledClipboard>
     </StyledHighlight>
   );
 }