Merge pull request #198 from storybookjs/fix-clipboard-snippets

Add callback option for Clipboard component
storybookjs · Aug 10, 2020 · 0815ebc · 0815ebc
2 parents 2052946 + b246055
commit 0815ebc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 }