aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-06 04:41:57 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 19:06:35 +0800
commit92361ae81171bfaed0680bb2fd2f33b5205fc590 (patch)
treed85c254ed3bce55e8b21a84c4d89d4316e75efdd
parentcba8dc8a759cb8bebe289af7e6fc115af2ebe4ed (diff)
downloaddexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar.gz
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar.bz2
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar.lz
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar.xz
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.tar.zst
dexon-sol-tools-92361ae81171bfaed0680bb2fd2f33b5205fc590.zip
feat: notify user they've copied to clipboard on copy
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx43
1 files changed, 29 insertions, 14 deletions
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 });
+ };
+}