overleaf/services/web/frontend/js/features/preview/components/preview-recompile-button.js
Jakob Ackermann b4d80de408 Merge pull request #4111 from overleaf/jpa-fix-re-compile-react
[frontend] fix re-compile button in react sending an event as options

GitOrigin-RevId: 69dcebc3c74c89189f18715d5adf0e6329eb1ef6
2021-06-01 02:05:30 +00:00

193 lines
5.4 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import Icon from '../../../shared/components/icon'
function PreviewRecompileButton({
compilerState: {
autoCompileHasChanges,
autoCompileHasLintingError,
isAutoCompileOn,
isCompiling,
isDraftModeOn,
isSyntaxCheckOn,
},
onRecompile,
onRecompileFromScratch,
onRunSyntaxCheckNow,
onStopCompilation,
onSetAutoCompile,
onSetDraftMode,
onSetSyntaxCheck,
showText,
}) {
const { t } = useTranslation()
function handleSelectAutoCompileOn() {
onSetAutoCompile(true)
}
function handleSelectAutoCompileOff() {
onSetAutoCompile(false)
}
function handleSelectDraftModeOn() {
onSetDraftMode(true)
}
function handleSelectDraftModeOff() {
onSetDraftMode(false)
}
function handleSelectSyntaxCheckOn() {
onSetSyntaxCheck(true)
}
function handleSelectSyntaxCheckOff() {
onSetSyntaxCheck(false)
}
let compilingProps = {}
let recompileProps = {}
function _hideText(keepAria) {
return {
'aria-hidden': !keepAria,
style: {
position: 'absolute',
right: '-100vw',
},
}
}
if (!showText) {
compilingProps = _hideText(isCompiling)
recompileProps = _hideText(!isCompiling)
} else if (isCompiling) {
recompileProps = _hideText()
} else {
compilingProps = _hideText()
}
const recompileButtonGroupClasses = classNames(
'btn-recompile-group',
'toolbar-item',
{
'btn-recompile-group-has-changes':
autoCompileHasChanges && !autoCompileHasLintingError,
}
)
const buttonElement = (
<Dropdown
id="pdf-recompile-dropdown"
className={recompileButtonGroupClasses}
>
<button className="btn btn-recompile" onClick={() => onRecompile()}>
<Icon type="refresh" spin={isCompiling} />
<span id="text-compiling" className="toolbar-text" {...compilingProps}>
{t('compiling')}
&hellip;
</span>
<span id="text-recompile" className="toolbar-text" {...recompileProps}>
{t('recompile')}
</span>
</button>
<Dropdown.Toggle
aria-label={t('toggle_compile_options_menu')}
className="btn btn-recompile"
bsStyle="success"
/>
<Dropdown.Menu>
<MenuItem header>{t('auto_compile')}</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOn}>
<Icon type={isAutoCompileOn ? 'check' : ''} modifier="fw" />
{t('on')}
</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOff}>
<Icon type={!isAutoCompileOn ? 'check' : ''} modifier="fw" />
{t('off')}
</MenuItem>
<MenuItem header>{t('compile_mode')}</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOff}>
<Icon type={!isDraftModeOn ? 'check' : ''} modifier="fw" />
{t('normal')}
</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOn}>
<Icon type={isDraftModeOn ? 'check' : ''} modifier="fw" />
{t('fast')} <span className="subdued">[draft]</span>
</MenuItem>
<MenuItem header>Syntax Checks</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOn}>
<Icon type={isSyntaxCheckOn ? 'check' : ''} modifier="fw" />
{t('stop_on_validation_error')}
</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOff}>
<Icon type={!isSyntaxCheckOn ? 'check' : ''} modifier="fw" />
{t('ignore_validation_errors')}
</MenuItem>
<MenuItem onSelect={onRunSyntaxCheckNow}>
<Icon type="" modifier="fw" />
{t('run_syntax_check_now')}
</MenuItem>
<MenuItem className={!isCompiling ? 'hidden' : ''} divider />
<MenuItem
onSelect={onStopCompilation}
className={!isCompiling ? 'hidden' : ''}
disabled={!isCompiling}
aria-disabled={!isCompiling}
>
{t('stop_compile')}
</MenuItem>
<MenuItem divider />
<MenuItem
onSelect={onRecompileFromScratch}
disabled={isCompiling}
aria-disabled={!!isCompiling}
>
{t('recompile_from_scratch')}
</MenuItem>
</Dropdown.Menu>
</Dropdown>
)
return showText ? (
buttonElement
) : (
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="tooltip-download-pdf">
{isCompiling ? t('compiling') : t('recompile')}
</Tooltip>
}
>
{buttonElement}
</OverlayTrigger>
)
}
PreviewRecompileButton.propTypes = {
compilerState: PropTypes.shape({
autoCompileHasChanges: PropTypes.bool.isRequired,
autoCompileHasLintingError: PropTypes.bool,
isAutoCompileOn: PropTypes.bool.isRequired,
isCompiling: PropTypes.bool.isRequired,
isDraftModeOn: PropTypes.bool.isRequired,
isSyntaxCheckOn: PropTypes.bool.isRequired,
logEntries: PropTypes.object.isRequired,
}),
onRecompile: PropTypes.func.isRequired,
onRecompileFromScratch: PropTypes.func.isRequired,
onRunSyntaxCheckNow: PropTypes.func.isRequired,
onSetAutoCompile: PropTypes.func.isRequired,
onSetDraftMode: PropTypes.func.isRequired,
onSetSyntaxCheck: PropTypes.func.isRequired,
onStopCompilation: PropTypes.func.isRequired,
showText: PropTypes.bool.isRequired,
}
export default PreviewRecompileButton