mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-31 21:21:03 -04:00
52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { useCallback, useState } from 'react'
|
|
import { Button } from 'react-bootstrap'
|
|
import { Trans, useTranslation } from 'react-i18next'
|
|
import Tooltip from './tooltip'
|
|
import Icon from './icon'
|
|
|
|
type CopyLinkProps = {
|
|
link: string
|
|
tooltipId: string
|
|
}
|
|
|
|
function CopyLink({ link, tooltipId }: CopyLinkProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleClick = useCallback(() => {
|
|
navigator.clipboard.writeText(link).then(() => {
|
|
setCopied(true)
|
|
window.setTimeout(() => {
|
|
setCopied(false)
|
|
}, 1500)
|
|
})
|
|
}, [link])
|
|
|
|
if (!navigator.clipboard?.writeText) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Tooltip
|
|
id={tooltipId}
|
|
description={copied ? 'Copied!' : <Trans i18nKey="copy" />}
|
|
overlayProps={{
|
|
delayHide: copied ? 1000 : 250,
|
|
shouldUpdatePosition: true,
|
|
}}
|
|
>
|
|
<Button
|
|
onClick={handleClick}
|
|
bsSize="xsmall"
|
|
bsStyle="link"
|
|
className="copy-button"
|
|
aria-label={t('copy')}
|
|
>
|
|
{copied ? <Icon type="check" /> : <Icon type="clipboard" />}
|
|
</Button>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
export default CopyLink
|