overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx
Jessica Lawshe 4ba2fffdf1 Merge pull request #11092 from overleaf/jel-recompile-btn
[web] Add `data-ol-loading` button style

GitOrigin-RevId: 75230fee0e4c1183f389d08b0253402e4fc375b0
2023-01-10 09:06:28 +00:00

51 lines
1.4 KiB
TypeScript

import { Button } from 'react-bootstrap'
import Tooltip from '../../../shared/components/tooltip'
import Icon from '../../../shared/components/icon'
import { useTranslation } from 'react-i18next'
import { memo } from 'react'
const modifierKey = /Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl'
type PdfCompileButtonInnerProps = {
startCompile: () => void
compiling: boolean
}
function PdfCompileButtonInner({
startCompile,
compiling,
}: PdfCompileButtonInnerProps) {
const { t } = useTranslation()
const compileButtonLabel = compiling ? t('compiling') + '…' : t('recompile')
return (
<Tooltip
id="logs-toggle"
description={
<>
{t('recompile_pdf')}{' '}
<span className="keyboard-shortcut">({modifierKey} + Enter)</span>
</>
}
tooltipProps={{ className: 'keyboard-tooltip' }}
overlayProps={{ delayShow: 500 }}
>
<Button
className="btn-recompile"
bsStyle="primary"
onClick={() => startCompile()}
aria-label={compileButtonLabel}
disabled={compiling}
data-ol-loading={compiling}
>
<Icon type="refresh" spin={compiling} />
<span className="toolbar-hide-medium toolbar-hide-small btn-recompile-label">
{compileButtonLabel}
</span>
</Button>
</Tooltip>
)
}
export default memo(PdfCompileButtonInner)