overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx

77 lines
1.9 KiB
TypeScript
Raw Normal View History

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="pdf-toolbar-btn 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>
</>
)
}