mirror of https://github.com/portainer/portainer
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import { PropsWithChildren } from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
import { Icon } from '@@/Icon';
|
|
|
|
import { Button } from '../Button';
|
|
|
|
import styles from './CopyButton.module.css';
|
|
import { useCopy } from './useCopy';
|
|
|
|
export interface Props {
|
|
copyText: string;
|
|
fadeDelay?: number;
|
|
displayText?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function CopyButton({
|
|
copyText,
|
|
fadeDelay = 1000,
|
|
displayText = 'copied',
|
|
className,
|
|
children,
|
|
}: PropsWithChildren<Props>) {
|
|
const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Button
|
|
className={className}
|
|
size="small"
|
|
onClick={handleCopy}
|
|
title="Copy Value"
|
|
type="button"
|
|
>
|
|
<Icon icon="copy" feather /> {children}
|
|
</Button>
|
|
|
|
<span
|
|
className={clsx(
|
|
copiedSuccessfully && styles.fadeout,
|
|
styles.displayText,
|
|
'space-left'
|
|
)}
|
|
>
|
|
<Icon icon="check" feather />
|
|
{displayText && <span className="space-left">{displayText}</span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|