58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { memo, useCallback, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
|
|
|
|
export const CopyToClipboard = memo<{
|
|
content: string
|
|
tooltipId: string
|
|
kind?: 'text' | 'icon'
|
|
}>(({ content, tooltipId, kind = 'icon' }) => {
|
|
const { t } = useTranslation()
|
|
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleClick = useCallback(() => {
|
|
navigator.clipboard.writeText(content).then(() => {
|
|
setCopied(true)
|
|
window.setTimeout(() => {
|
|
setCopied(false)
|
|
}, 1500)
|
|
})
|
|
}, [content])
|
|
|
|
if (!navigator.clipboard?.writeText) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<OLTooltip
|
|
id={tooltipId}
|
|
description={copied ? `${t('copied')}!` : t('copy')}
|
|
overlayProps={{ delay: copied ? 1000 : 250 }}
|
|
>
|
|
{kind === 'text' ? (
|
|
<OLButton
|
|
onClick={handleClick}
|
|
size="sm"
|
|
variant="secondary"
|
|
className="copy-button"
|
|
>
|
|
{t('copy')}
|
|
</OLButton>
|
|
) : (
|
|
<OLIconButton
|
|
onClick={handleClick}
|
|
variant="link"
|
|
size="sm"
|
|
accessibilityLabel={t('copy')}
|
|
className="copy-button"
|
|
icon={copied ? 'check' : 'content_copy'}
|
|
/>
|
|
)}
|
|
</OLTooltip>
|
|
)
|
|
})
|
|
CopyToClipboard.displayName = 'CopyToClipboard'
|