overleaf/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx
Alf Eaton a074054cc9 Add memo to some components (#16094)
GitOrigin-RevId: e4bea140d872ac3f8b2aca7833e658af684a1438
2023-12-15 09:03:22 +00:00

81 lines
2.3 KiB
TypeScript

import { Trans, useTranslation } from 'react-i18next'
import { Button, Modal } from 'react-bootstrap'
import AccessibleModal from '@/shared/components/accessible-modal'
import { memo, useState } from 'react'
import { useLocation } from '@/shared/hooks/use-location'
export type OutOfSyncModalProps = {
editorContent: string
show: boolean
onHide: () => void
}
function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) {
const { t } = useTranslation()
const location = useLocation()
const [editorContentShown, setEditorContentShown] = useState(false)
const editorContentRows = (editorContent.match(/\n/g)?.length || 0) + 1
// Reload the page to avoid staying in an inconsistent state.
// https://github.com/overleaf/issues/issues/3694
function done() {
onHide()
location.reload()
}
return (
<AccessibleModal
show={show}
onHide={done}
className="out-of-sync-modal"
backdrop={false}
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>{t('out_of_sync')}</Modal.Title>
</Modal.Header>
<Modal.Body className="modal-body-share">
<Trans
i18nKey="out_of_sync_detail"
components={[
// eslint-disable-next-line react/jsx-key
<br />,
// eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
<a
target="_blank"
rel="noopener noreferrer"
href="/learn/Kb/Editor_out_of_sync_problems"
/>,
]}
/>
</Modal.Body>
<Modal.Body>
<Button
bsStyle="info"
onClick={() => setEditorContentShown(shown => !shown)}
>
{editorContentShown
? t('hide_local_file_contents')
: t('show_local_file_contents')}
</Button>
{editorContentShown ? (
<div className="text-preview">
<textarea
className="scroll-container"
readOnly
rows={editorContentRows}
value={editorContent}
/>
</div>
) : null}
</Modal.Body>
<Modal.Footer>
<Button bsStyle="info" onClick={done}>
{t('reload_editor')}
</Button>
</Modal.Footer>
</AccessibleModal>
)
}
export default memo(OutOfSyncModal)