/
CopyToClipboard.tsx
51 lines (48 loc) · 1.61 KB
/
CopyToClipboard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
import {ActionIcon, CopyButton, TextInput, Tooltip} from '@mantine/core';
export interface CopyToClipboardProps {
/**
* The value to be copied to the clipboard.
*/
value: string;
/**
* Whether to display the string to be copied alongside the button.
*
* @default false
*/
withLabel?: boolean;
/**
* Called each time the value is copied to the clipboard
*/
onCopy?: () => void;
}
const CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (
<CopyButton value={value} timeout={2000}>
{({copied, copy}) => (
<Tooltip label={copied ? 'Copied' : 'Copy'}>
<ActionIcon
variant="subtle"
color={copied ? 'success' : 'gray'}
onClick={() => {
copy();
onCopy?.();
}}
>
{copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
);
export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>
withLabel ? (
<TextInput
classNames={{input: 'var(--mantine-color-gray-7)'}}
value={others.value}
readOnly
autoComplete="off"
rightSection={<CopyToClipboardButton {...others} />}
/>
) : (
<CopyToClipboardButton {...others} />
);