overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.js
Alf Eaton f065a7a909 Improve the Icon component (#6245)
GitOrigin-RevId: fbb23b32c47edbe5a22badc627318accbd09e82a
2022-01-20 09:03:58 +00:00

55 lines
1.6 KiB
JavaScript

import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { Button, Label, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { sendMBOnce } from '../../../infrastructure/event-tracking'
import Icon from '../../../shared/components/icon'
import { useCompileContext } from '../../../shared/context/compile-context'
function PdfHybridLogsButton() {
const { error, logEntries, setShowLogs, showLogs } = useCompileContext()
const { t } = useTranslation()
const handleClick = useCallback(() => {
setShowLogs(value => {
if (!value) {
sendMBOnce('ide-open-logs-once')
}
return !value
})
}, [setShowLogs])
const errorCount = Number(logEntries?.errors?.length)
const warningCount = Number(logEntries?.warnings?.length)
const totalCount = errorCount + warningCount
return (
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="tooltip-logs-toggle">{t('logs_and_output_files')}</Tooltip>
}
>
<Button
bsStyle="link"
disabled={Boolean(error)}
active={showLogs}
className="toolbar-item log-btn"
onClick={handleClick}
style={{ position: 'relative' }}
aria-label={showLogs ? t('view_pdf') : t('view_logs')}
>
<Icon type="file-text-o" fw />
{!showLogs && totalCount > 0 && (
<Label bsStyle={errorCount === 0 ? 'warning' : 'danger'}>
{totalCount}
</Label>
)}
</Button>
</OverlayTrigger>
)
}
export default memo(PdfHybridLogsButton)