overleaf/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.js
Davinder Singh 4adfca52bf Merge pull request #10682 from overleaf/ds-btn-default-to-secondary-in-editor-part-2
Replacing btn-default with btn-secondary in the editor Part-2

GitOrigin-RevId: 708aa29070bb3049afbc8ee1a282eaa1018594a8
2022-12-08 09:03:42 +00:00

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