From fb221e4ca9eec6a66130e3f8230457a1fcee20f8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 5 Dec 2018 12:41:57 -0800
Subject: feat: notify user they've copied to clipboard on copy

---
 packages/website/ts/pages/instant/code_demo.tsx | 43 +++++++++++++++++--------
 1 file changed, 29 insertions(+), 14 deletions(-)

(limited to 'packages/website')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index c5e565d61..b7a9f5b17 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -145,17 +145,32 @@ export interface CodeDemoProps {
     children: string;
 }
 
-export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
-    <Container position="relative" height="100%">
-        <Container position="absolute" top="10px" right="10px">
-            <CopyToClipboard text={props.children}>
-                <Button fontSize="14px">
-                    <b>Copy</b>
-                </Button>
-            </CopyToClipboard>
-        </Container>
-        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-            {props.children}
-        </SyntaxHighlighter>
-    </Container>
-);
+export interface CodeDemoState {
+    didCopyCode: boolean;
+}
+
+export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
+    public state: CodeDemoState = {
+        didCopyCode: false,
+    };
+    public render(): React.ReactNode {
+        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
+        return (
+            <Container position="relative" height="100%">
+                <Container position="absolute" top="10px" right="10px">
+                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
+                        <Button fontSize="14px">
+                            <b>{copyButtonText}</b>
+                        </Button>
+                    </CopyToClipboard>
+                </Container>
+                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+                    {this.props.children}
+                </SyntaxHighlighter>
+            </Container>
+        );
+    }
+    private readonly _handleCopyClick = () => {
+        this.setState({ didCopyCode: true });
+    };
+}
-- 
cgit v1.2.3