overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx
Timothée Alby 5731463d32 Merge pull request #7956 from overleaf/ii-refactor-toolitp-usage
Tooltip usage refactoring

GitOrigin-RevId: f4b2d4d57722172141a081dd60e4394ff7fff332
2022-05-19 08:04:07 +00:00

34 lines
957 B
TypeScript

import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Tooltip from '../../../shared/components/tooltip'
import Icon from '../../../shared/components/icon'
import { useMemo } from 'react'
import { useLayoutContext } from '../../../shared/context/layout-context'
function PdfExpandButton() {
const { pdfLayout, switchLayout } = useLayoutContext()
const { t } = useTranslation()
const text = useMemo(() => {
return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen')
}, [pdfLayout, t])
return (
<Tooltip
id="expand-pdf-btn"
description="text"
overlayProps={{ placement: 'left' }}
>
<Button
onClick={switchLayout}
className="toolbar-pdf-expand-btn toolbar-item"
aria-label={text}
>
<Icon type={pdfLayout === 'sideBySide' ? 'expand' : 'compress'} />
</Button>
</Tooltip>
)
}
export default PdfExpandButton