overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js
Timothée Alby ae207f7559 Merge pull request #8326 from overleaf/ta-pdf-detach-redundant-controls
Bring Back Redundant Layout Controls

GitOrigin-RevId: a725e8742ab41612b285bcab23054ba9da15b60f
2022-06-09 08:02:34 +00:00

99 lines
2.8 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 PdfHybridSafariWarning from './pdf-hybrid-safari-warning'
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 />
<PdfHybridSafariWarning />
</div>
<div className="toolbar-pdf-right">
<PdfHybridCodeCheckButton />
<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)