on e5d76b3 help sign in
bridge/src/components/CopyButton.js
57 lines 1.1 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { LinkButton } from 'indigo-react';
5import { ForwardButton } from 'components/Buttons';
7import useCopiable from 'lib/useCopiable';
9const renderDefaultCopyText = didCopy => (didCopy ? 'Copied!' : 'Copy');
11export default function CopyButton({
12 as: As = LinkButton,
13 text,
14 children = renderDefaultCopyText,
15 className,
16 ...rest
17}) {
18 const [doCopy, didCopy] = useCopiable(text);
20 return (
21 <As
22 onClick={doCopy}
23 className={cn(className, {
24 black: !didCopy,
25 green3: didCopy,
26 })}
27 {...rest}>
28 {children(didCopy)}
29 </As>
30 );
33export function CopyButtonWide({
34 as: As = ForwardButton,
35 text,
36 children,
37 accessory = renderDefaultCopyText,
38 ...rest
39}) {
40 const [doCopy, didCopy] = useCopiable(text);
41 return (
42 <As
43 onClick={doCopy}
44 accessory={
45 <LinkButton
46 className={{
47 black: !didCopy,
48 green3: didCopy,
49 }}>
50 {accessory(didCopy)}
51 </LinkButton>
52 }
53 {...rest}>
54 {children}
55 </As>
56 );