Rebeka Dekany
d751b88e6b
* Remove icons folder * Create folders for badge, button, and dropdown components * Remove Bootstrap 5 from test * Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint` * Cleanup and update BS 5 comments * Move components to the shared folder * Rename `tooltips-bs5` to `tooltip` * Remove `-bs5` suffix * Fix path * Delete BS3 version file * Rename `_form_marketing-bootstrap-5` to `_form_marketing` * Delete BS3 version file * Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing` * Delete BS3 version file * Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing` * Delete BS3 version file * Rename `thin-footer-bootstrap-5` to `thin-footer` * Delete BS3 version file * Rename `language-picker-bootstrap-5` to `language-picker` * Rename `fat-footer-react-bootstrap-5` to `fat-footer-react` * Delete BS3 version file * Rename `navbar-marketing-bootstrap-5` to `navbar-marketing` * Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react` * Delete BS3 version file * Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms` * Source format * Fix path GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { useRef } from 'react'
|
|
|
|
import PdfPageNumberControl from './pdf-page-number-control'
|
|
import PdfZoomButtons from './pdf-zoom-buttons'
|
|
import { useTranslation } from 'react-i18next'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import useDropdown from '@/shared/hooks/use-dropdown'
|
|
import OLTooltip from '@/shared/components/ol/ol-tooltip'
|
|
import OLButton from '@/shared/components/ol/ol-button'
|
|
import OLOverlay from '@/shared/components/ol/ol-overlay'
|
|
import OLPopover from '@/shared/components/ol/ol-popover'
|
|
|
|
type PdfViewerControlsMenuButtonProps = {
|
|
setZoom: (zoom: string) => void
|
|
setPage: (page: number) => void
|
|
page: number
|
|
totalPages: number
|
|
pdfContainer?: HTMLDivElement
|
|
}
|
|
|
|
export default function PdfViewerControlsMenuButton({
|
|
setZoom,
|
|
setPage,
|
|
page,
|
|
totalPages,
|
|
pdfContainer,
|
|
}: PdfViewerControlsMenuButtonProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
open: popoverOpen,
|
|
onToggle: togglePopover,
|
|
ref: popoverRef,
|
|
} = useDropdown()
|
|
|
|
const targetRef = useRef<HTMLButtonElement | null>(null)
|
|
|
|
return (
|
|
<>
|
|
<OLTooltip
|
|
id="pdf-controls-menu-tooltip"
|
|
description={t('view_options')}
|
|
overlayProps={{ placement: 'bottom' }}
|
|
>
|
|
<OLButton
|
|
variant="ghost"
|
|
className="pdf-toolbar-btn pdfjs-toolbar-popover-button"
|
|
onClick={togglePopover}
|
|
ref={targetRef}
|
|
>
|
|
<MaterialIcon type="more_horiz" />
|
|
</OLButton>
|
|
</OLTooltip>
|
|
|
|
<OLOverlay
|
|
show={popoverOpen}
|
|
target={targetRef.current}
|
|
placement="bottom"
|
|
container={pdfContainer}
|
|
containerPadding={0}
|
|
transition
|
|
rootClose
|
|
onHide={() => togglePopover(false)}
|
|
>
|
|
<OLPopover
|
|
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>
|
|
</OLPopover>
|
|
</OLOverlay>
|
|
</>
|
|
)
|
|
}
|