This commit is contained in:
Simon Knott 2025-02-10 09:49:00 +01:00
parent 8bc59082c5
commit 3fd5d2497a
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC

View file

@ -20,18 +20,12 @@ import './copyToClipboard.css';
type CopyToClipboardProps = { type CopyToClipboardProps = {
value: string; value: string;
icon?: JSX.Element;
title?: string;
}; };
/** /**
* A copy to clipboard button. * A copy to clipboard button.
*/ */
export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({ value }) => {
value,
icon: copyIcon = icons.copy(),
title = 'Copy to clipboard',
}) => {
type IconType = 'copy' | 'check' | 'cross'; type IconType = 'copy' | 'check' | 'cross';
const [icon, setIcon] = React.useState<IconType>('copy'); const [icon, setIcon] = React.useState<IconType>('copy');
const handleCopy = React.useCallback(() => { const handleCopy = React.useCallback(() => {
@ -44,8 +38,8 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
setIcon('cross'); setIcon('cross');
}); });
}, [value]); }, [value]);
const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : copyIcon; const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
return <button className='copy-icon' aria-label={title} title={title} onClick={handleCopy}>{iconElement}</button>; return <button className='copy-icon' aria-label='Copy to clipboard' onClick={handleCopy}>{iconElement}</button>;
}; };
type CopyToClipboardContainerProps = CopyToClipboardProps & { type CopyToClipboardContainerProps = CopyToClipboardProps & {