overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx
David ca41c42288 Merge pull request #18762 from overleaf/dp-pdf-improvements
PDF Toolbar usability improvements

GitOrigin-RevId: 138e42cad0c9c97cfe45eb00fb123084e0228fdd
2024-06-10 08:03:55 +00:00

119 lines
2.7 KiB
TypeScript

import { memo, useCallback, useState } from 'react'
import { createPortal } from 'react-dom'
import PdfPageNumberControl from './pdf-page-number-control'
import PdfZoomButtons from './pdf-zoom-buttons'
import PdfZoomDropdown from './pdf-zoom-dropdown'
import { useResizeObserver } from '@/shared/hooks/use-resize-observer'
import PdfViewerControlsMenuButton from './pdf-viewer-controls-menu-button'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
type PdfViewerControlsToolbarProps = {
setZoom: (zoom: string) => void
rawScale: number
setPage: (page: number) => void
page: number
totalPages: number
}
function PdfViewerControlsToolbar({
setZoom,
rawScale,
setPage,
page,
totalPages,
}: PdfViewerControlsToolbarProps) {
const { showLogs } = useCompileContext()
const toolbarControlsElement = document.querySelector('#toolbar-pdf-controls')
const [availableWidth, setAvailableWidth] = useState<number>(1000)
const handleResize = useCallback(
element => {
setAvailableWidth(element.offsetWidth)
},
[setAvailableWidth]
)
const { elementRef: pdfControlsRef } = useResizeObserver(handleResize)
if (!toolbarControlsElement) {
return null
}
if (showLogs) {
return null
}
const InnerControlsComponent =
availableWidth >= 300
? PdfViewerControlsToolbarFull
: PdfViewerControlsToolbarSmall
return createPortal(
<div className="pdfjs-viewer-controls" ref={pdfControlsRef}>
<InnerControlsComponent
setZoom={setZoom}
rawScale={rawScale}
setPage={setPage}
page={page}
totalPages={totalPages}
/>
</div>,
toolbarControlsElement
)
}
type InnerControlsProps = {
setZoom: (zoom: string) => void
rawScale: number
setPage: (page: number) => void
page: number
totalPages: number
}
function PdfViewerControlsToolbarFull({
setZoom,
rawScale,
setPage,
page,
totalPages,
}: InnerControlsProps) {
return (
<>
<PdfPageNumberControl
setPage={setPage}
page={page}
totalPages={totalPages}
/>
<div className="pdfjs-zoom-controls">
<PdfZoomButtons setZoom={setZoom} />
<PdfZoomDropdown rawScale={rawScale} setZoom={setZoom} />
</div>
</>
)
}
function PdfViewerControlsToolbarSmall({
setZoom,
rawScale,
setPage,
page,
totalPages,
}: InnerControlsProps) {
return (
<div className="pdfjs-viewer-controls-small">
<PdfZoomDropdown rawScale={rawScale} setZoom={setZoom} />
<PdfViewerControlsMenuButton
setZoom={setZoom}
setPage={setPage}
page={page}
totalPages={totalPages}
/>
</div>
)
}
export default memo(PdfViewerControlsToolbar)