overleaf/services/web/frontend/js/features/preview/components/preview-recompile-button.js
Simon Detheridge 315987dc5a Merge pull request #3175 from overleaf/pr-spike-new-logs-errors-ui
Spike new logs errors ui

GitOrigin-RevId: b4c598bc03d8aa8e5a438ac5633e18dadd82dc74
2020-09-29 02:05:19 +00:00

125 lines
4 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { Dropdown, MenuItem } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
function PreviewRecompileButton({
compilerState: {
isAutoCompileOn,
isCompiling,
isDraftModeOn,
isSyntaxCheckOn
},
onRecompile,
onRunSyntaxCheckNow,
onSetAutoCompile,
onSetDraftMode,
onSetSyntaxCheck
}) {
const { t } = useTranslation()
const iconClasses = {
recompile: classNames('fa', 'fa-refresh', {
'fa-spin': isCompiling
}),
autoCompileOn: classNames('fa', 'fa-fw', { 'fa-check': isAutoCompileOn }),
autoCompileOff: classNames('fa', 'fa-fw', { 'fa-check': !isAutoCompileOn }),
compileModeNormal: classNames('fa', 'fa-fw', {
'fa-check': !isDraftModeOn
}),
compileModeDraft: classNames('fa', 'fa-fw', { 'fa-check': isDraftModeOn }),
syntaxCheckOn: classNames('fa', 'fa-fw', { 'fa-check': isSyntaxCheckOn }),
syntaxCheckOff: classNames('fa', 'fa-fw', { 'fa-check': !isSyntaxCheckOn })
}
function handleSelectAutoCompileOn() {
onSetAutoCompile(true)
}
function handleSelectAutoCompileOff() {
onSetAutoCompile(false)
}
function handleSelectDraftModeOn() {
onSetDraftMode(true)
}
function handleSelectDraftModeOff() {
onSetDraftMode(false)
}
function handleSelectSyntaxCheckOn() {
onSetSyntaxCheck(true)
}
function handleSelectSyntaxCheckOff() {
onSetSyntaxCheck(false)
}
return (
<Dropdown id="pdf-recompile-dropdown" className="btn-recompile-group">
<button className="btn btn-recompile" onClick={onRecompile}>
<i className={iconClasses.recompile} aria-hidden="true" />
{isCompiling ? (
<span className="btn-recompile-label">
{t('compiling')}
&hellip;
</span>
) : (
<span className="btn-recompile-label">{t('recompile')}</span>
)}
</button>
<Dropdown.Toggle className="btn btn-recompile" />
<Dropdown.Menu>
<MenuItem header>{t('auto_compile')}</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOn}>
<i className={iconClasses.autoCompileOn} aria-hidden="true" />
{t('on')}
</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOff}>
<i className={iconClasses.autoCompileOff} aria-hidden="true" />
{t('off')}
</MenuItem>
<MenuItem header>{t('compile_mode')}</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOff}>
<i className={iconClasses.compileModeNormal} aria-hidden="true" />
{t('normal')}
</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOn}>
<i className={iconClasses.compileModeDraft} aria-hidden="true" />
{t('fast')} <span className="subdued">[draft]</span>
</MenuItem>
<MenuItem header>Syntax Checks</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOn}>
<i className={iconClasses.syntaxCheckOn} aria-hidden="true" />
{t('stop_on_validation_error')}
</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOff}>
<i className={iconClasses.syntaxCheckOff} aria-hidden="true" />
{t('ignore_validation_errors')}
</MenuItem>
<MenuItem onSelect={onRunSyntaxCheckNow}>
<i className="fa fa-fw" aria-hidden="true" />
{t('run_syntax_check_now')}
</MenuItem>
</Dropdown.Menu>
</Dropdown>
)
}
PreviewRecompileButton.propTypes = {
compilerState: PropTypes.shape({
isAutoCompileOn: PropTypes.bool.isRequired,
isCompiling: PropTypes.bool.isRequired,
isDraftModeOn: PropTypes.bool.isRequired,
isSyntaxCheckOn: PropTypes.bool.isRequired
}),
onRecompile: PropTypes.func.isRequired,
onRunSyntaxCheckNow: PropTypes.func.isRequired,
onSetAutoCompile: PropTypes.func.isRequired,
onSetDraftMode: PropTypes.func.isRequired,
onSetSyntaxCheck: PropTypes.func.isRequired
}
export default PreviewRecompileButton