overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx
David 55e54ce875 Merge pull request #18435 from overleaf/dp-ae-pdf-viewer-controls
Update PDF viewer controls

GitOrigin-RevId: 4e15b7cbd34e878d0175be635369b8d620188203
2024-05-30 08:05:06 +00:00

76 lines
1.9 KiB
TypeScript

import { useRef } from 'react'
import PdfPageNumberControl from './pdf-page-number-control'
import PdfZoomButtons from './pdf-zoom-buttons'
import { Button, Overlay, Popover } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import MaterialIcon from '@/shared/components/material-icon'
import Tooltip from '@/shared/components/tooltip'
import useDropdown from '@/shared/hooks/use-dropdown'
type PdfViewerControlsMenuButtonProps = {
setZoom: (zoom: string) => void
setPage: (page: number) => void
page: number
totalPages: number
}
export default function PdfViewerControlsMenuButton({
setZoom,
setPage,
page,
totalPages,
}: PdfViewerControlsMenuButtonProps) {
const { t } = useTranslation()
const {
open: popoverOpen,
onToggle: togglePopover,
ref: popoverRef,
} = useDropdown()
const targetRef = useRef<any>(null)
return (
<>
<Tooltip
id="pdf-controls-menu-tooltip"
description={t('view_options')}
overlayProps={{ placement: 'bottom' }}
>
<Button
className="pdfjs-toolbar-popover-button"
onClick={togglePopover}
ref={targetRef}
>
<MaterialIcon type="more_horiz" />
</Button>
</Tooltip>
<Overlay
show={popoverOpen}
target={targetRef.current}
placement="bottom"
containerPadding={0}
animation
rootClose
onHide={() => togglePopover(false)}
>
<Popover
className="pdfjs-toolbar-popover"
id="pdf-toolbar-popover-menu"
ref={popoverRef}
>
<PdfPageNumberControl
setPage={setPage}
page={page}
totalPages={totalPages}
/>
<div className="pdfjs-zoom-controls">
<PdfZoomButtons setZoom={setZoom} />
</div>
</Popover>
</Overlay>
</>
)
}