overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
Timothée Alby 3c01402bbd Merge pull request #7034 from overleaf/ta-pdf-detach-full
PDF Detach v2

GitOrigin-RevId: 3deb76474185f9176cde23ab32ef51b90df6e8e9
2022-04-05 12:19:23 +00:00

97 lines
2.7 KiB
JavaScript

import { memo, useState, useEffect, useRef } from 'react'
import { ButtonToolbar } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useLayoutContext } from '../../../shared/context/layout-context'
import PdfCompileButton from './pdf-compile-button'
import PdfExpandButton from './pdf-expand-button'
import PdfHybridLogsButton from './pdf-hybrid-logs-button'
import PdfHybridDownloadButton from './pdf-hybrid-download-button'
import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
import { DetachedSynctexControl } from './detach-synctex-control'
import Icon from '../../../shared/components/icon'
const ORPHAN_UI_TIMEOUT_MS = 5000
function PdfPreviewHybridToolbar() {
const { detachRole, detachIsLinked } = useLayoutContext()
const uiTimeoutRef = useRef()
const [orphanPdfTabAfterDelay, setOrphanPdfTabAfterDelay] = useState(false)
const orphanPdfTab = !detachIsLinked && detachRole === 'detached'
useEffect(() => {
if (uiTimeoutRef.current) {
clearTimeout(uiTimeoutRef.current)
}
if (orphanPdfTab) {
uiTimeoutRef.current = setTimeout(() => {
setOrphanPdfTabAfterDelay(true)
}, ORPHAN_UI_TIMEOUT_MS)
} else {
setOrphanPdfTabAfterDelay(false)
}
}, [orphanPdfTab])
let ToolbarInner = null
if (orphanPdfTabAfterDelay) {
// when the detached tab has been orphan for a while
ToolbarInner = <PdfPreviewHybridToolbarOrphanInner />
} else if (orphanPdfTab) {
ToolbarInner = <PdfPreviewHybridToolbarConnectingInner />
} else {
// tab is not detached or not orphan
ToolbarInner = <PdfPreviewHybridToolbarInner />
}
return (
<ButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
{ToolbarInner}
</ButtonToolbar>
)
}
function PdfPreviewHybridToolbarInner() {
return (
<>
<div className="toolbar-pdf-left">
<PdfCompileButton />
<PdfHybridLogsButton />
<PdfHybridDownloadButton />
</div>
<div className="toolbar-pdf-right">
<PdfHybridCodeCheckButton />
{!window.showPdfDetach && <PdfExpandButton />}
<DetachedSynctexControl />
</div>
</>
)
}
function PdfPreviewHybridToolbarOrphanInner() {
const { t } = useTranslation()
return (
<>
<div className="toolbar-pdf-orphan">
{t('tab_no_longer_connected')}
<PdfOrphanRefreshButton />
</div>
</>
)
}
function PdfPreviewHybridToolbarConnectingInner() {
const { t } = useTranslation()
return (
<>
<div className="toolbar-pdf-orphan">
<Icon type="refresh" fw spin />
{t('tab_connecting')}
</div>
</>
)
}
export default memo(PdfPreviewHybridToolbar)