import { Dropdown, MenuItem } from 'react-bootstrap' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import ControlledDropdown from '@/shared/components/controlled-dropdown' import classNames from 'classnames' import { useFeatureFlag } from '@/shared/context/split-test-context' const isMac = /Mac/.test(window.navigator?.platform) const shortcuts = isMac ? { 'zoom-in': ['⌘', '+'], 'zoom-out': ['⌘', '-'], 'fit-to-width': ['⌘', '0'], } : { 'zoom-in': ['Ctrl', '+'], 'zoom-out': ['Ctrl', '-'], 'fit-to-width': ['Ctrl', '0'], } type PdfZoomDropdownProps = { requestPresentationMode: () => void setZoom: (zoom: string) => void rawScale: number } const zoomValues = ['0.5', '0.75', '1', '1.5', '2', '4'] const rawScaleToPercentage = (rawScale: number) => { return `${Math.round(rawScale * 100)}%` } function PdfZoomDropdown({ requestPresentationMode, setZoom, rawScale, }: PdfZoomDropdownProps) { const { t } = useTranslation() const enablePresentationMode = useFeatureFlag('pdf-presentation-mode') const [customZoomValue, setCustomZoomValue] = useState( rawScaleToPercentage(rawScale) ) useEffect(() => { setCustomZoomValue(rawScaleToPercentage(rawScale)) }, [rawScale]) const showPresentOption = enablePresentationMode && document.fullscreenEnabled return ( { if (eventKey === 'custom-zoom') { return } if (eventKey === 'present') { requestPresentationMode() return } setZoom(eventKey) }} pullRight > event.target.select()} value={customZoomValue} onKeyDown={event => { if (event.key === 'Enter') { const zoom = Number(customZoomValue.replace('%', '')) / 100 // Only allow zoom values between 10% and 999% if (zoom < 0.1) { setZoom('0.1') } else if (zoom > 9.99) { setZoom('9.99') } else { setZoom(`${zoom}`) } } }} onChange={event => { const rawValue = event.target.value const parsedValue = rawValue.replace(/[^0-9%]/g, '') setCustomZoomValue(parsedValue) }} /> {t('zoom_in')} {t('zoom_out')} {t('fit_to_width')} {t('fit_to_height')} {showPresentOption && } {showPresentOption && ( {t('presentation_mode')} )} {t('zoom_to')} {zoomValues.map(value => ( {rawScaleToPercentage(Number(value))} ))} ) } function Shortcut({ keys }: { keys: string[] }) { return ( {keys.map((key, idx) => ( {key} ))} ) } export default PdfZoomDropdown