43 lines
1.0 KiB
TypeScript
Executable File
43 lines
1.0 KiB
TypeScript
Executable File
import React, { useState } from 'react'
|
|
import { handleUnknownError } from '../../utils/errors'
|
|
import type { HTMLAttributes, MouseEventHandler} from 'react'
|
|
|
|
const TIMEOUT = 3000
|
|
|
|
export interface CopyToClipboardButtonProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
text: string
|
|
copyIcon?: string
|
|
successIcon?: string
|
|
timeout?: number
|
|
}
|
|
|
|
export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
|
|
text,
|
|
copyIcon = 'clipboard',
|
|
successIcon = 'yes',
|
|
...props
|
|
}) => {
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
const clipboard = window.navigator.clipboard as Clipboard | undefined
|
|
|
|
const clickHandler: MouseEventHandler<HTMLAnchorElement> = event => {
|
|
event.preventDefault()
|
|
|
|
clipboard?.writeText(text)
|
|
.then(() => {
|
|
setIsSuccess(true)
|
|
setTimeout(() => setIsSuccess(false), TIMEOUT)
|
|
})
|
|
.catch(handleUnknownError)
|
|
}
|
|
|
|
return clipboard ?
|
|
<a
|
|
href="#"
|
|
className={`code-snippets-copy-text dashicons dashicons-${isSuccess ? successIcon : copyIcon}`}
|
|
onClick={clickHandler}
|
|
{...props}
|
|
></a> :
|
|
null
|
|
}
|