aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-06 04:41:57 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-06 04:41:57 +0800
commitfb221e4ca9eec6a66130e3f8230457a1fcee20f8 (patch)
treee3bf94af7d6626fe479a0a839ec78ce3e9390a63
parent1f8c09779d57ec0243e3c8d15e9e461c6d491018 (diff)
downloaddexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar.gz
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar.bz2
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar.lz
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar.xz
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.tar.zst
dexon-0x-contracts-fb221e4ca9eec6a66130e3f8230457a1fcee20f8.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 });
+ };
+}