overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx
David a70a3fc77e Merge pull request #18514 from overleaf/dp-pdf-toolbar-hover
Add hover state to pdf toolbar buttons

GitOrigin-RevId: d58ad739e6454b9e0cdbdbb93c55e58785a9d672
2024-06-03 08:04:02 +00:00

52 lines
1.5 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Tooltip from '../../../shared/components/tooltip'
import Icon from '../../../shared/components/icon'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import { useProjectContext } from '../../../shared/context/project-context'
import * as eventTracking from '../../../infrastructure/event-tracking'
import { isSmallDevice } from '../../../infrastructure/event-tracking'
function PdfHybridDownloadButton() {
const { pdfDownloadUrl } = useCompileContext()
const { _id: projectId } = useProjectContext()
const { t } = useTranslation()
const description = pdfDownloadUrl
? t('download_pdf')
: t('please_compile_pdf_before_download')
function handleOnClick() {
eventTracking.sendMB('download-pdf-button-click', {
projectId,
location: 'pdf-preview',
isSmallDevice,
})
}
return (
<Tooltip
id="download-pdf"
description={description}
overlayProps={{ placement: 'bottom' }}
>
<Button
onClick={handleOnClick}
bsStyle="link"
className="pdf-toolbar-btn"
draggable="false"
disabled={!pdfDownloadUrl}
download
href={pdfDownloadUrl || '#'}
target="_blank"
style={{ pointerEvents: 'auto' }}
aria-label={t('download_pdf')}
>
<Icon type="download" fw />
</Button>
</Tooltip>
)
}
export default PdfHybridDownloadButton