mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
[web] rename all the JSX files to .jsx/.tsx GitOrigin-RevId: 82056ae47e017523722cf258dcc83c8a925a28f7
74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
import { Button, Modal } from 'react-bootstrap'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import AccessibleModal from '../../../../shared/components/accessible-modal'
|
|
|
|
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
|
|
|
|
function FileTreeModalDelete() {
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
isDeleting,
|
|
inFlight,
|
|
finishDeleting,
|
|
actionedEntities,
|
|
cancel,
|
|
error,
|
|
} = useFileTreeActionable()
|
|
|
|
if (!isDeleting) return null // the modal will not be rendered; return early
|
|
|
|
function handleHide() {
|
|
cancel()
|
|
}
|
|
|
|
function handleDelete() {
|
|
finishDeleting()
|
|
}
|
|
|
|
return (
|
|
<AccessibleModal show onHide={handleHide}>
|
|
<Modal.Header>
|
|
<Modal.Title>{t('delete')}</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
<p>{t('sure_you_want_to_delete')}</p>
|
|
<ul>
|
|
{actionedEntities.map(entity => (
|
|
<li key={entity._id}>{entity.name}</li>
|
|
))}
|
|
</ul>
|
|
{error && (
|
|
<div className="alert alert-danger file-tree-modal-alert">
|
|
{t('generic_something_went_wrong')}
|
|
</div>
|
|
)}
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
{inFlight ? (
|
|
<Button bsStyle="danger" disabled>
|
|
{t('deleting')}…
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button
|
|
bsStyle={null}
|
|
className="btn-secondary"
|
|
onClick={handleHide}
|
|
>
|
|
{t('cancel')}
|
|
</Button>
|
|
<Button bsStyle="danger" onClick={handleDelete}>
|
|
{t('delete')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</Modal.Footer>
|
|
</AccessibleModal>
|
|
)
|
|
}
|
|
|
|
export default FileTreeModalDelete
|