overleaf/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.jsx
Rebeka Dekany abb59e4603 Merge pull request #20298 from overleaf/rd-ide-filetree
[web] Migrate the file tree on the editor page to Bootstrap 5

GitOrigin-RevId: e2efec26242c8cdab37a54bc182b83bfb0f1eb3c
2024-09-26 08:05:43 +00:00

79 lines
1.8 KiB
JavaScript

import { useTranslation } from 'react-i18next'
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
import OLModal, {
OLModalBody,
OLModalFooter,
OLModalHeader,
OLModalTitle,
} from '@/features/ui/components/ol/ol-modal'
import OLButton from '@/features/ui/components/ol/ol-button'
import OLNotification from '@/features/ui/components/ol/ol-notification'
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 (
<OLModal show onHide={handleHide}>
<OLModalHeader>
<OLModalTitle>{t('delete')}</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>{t('sure_you_want_to_delete')}</p>
<ul>
{actionedEntities.map(entity => (
<li key={entity._id}>{entity.name}</li>
))}
</ul>
{error && (
<OLNotification
type="error"
content={t('generic_something_went_wrong')}
/>
)}
</OLModalBody>
<OLModalFooter>
{inFlight ? (
<OLButton
variant="danger"
disabled
isLoading
bs3Props={{ loading: `${t('deleting')}` }}
/>
) : (
<>
<OLButton className="secondary" onClick={handleHide}>
{t('cancel')}
</OLButton>
<OLButton variant="danger" onClick={handleDelete}>
{t('delete')}
</OLButton>
</>
)}
</OLModalFooter>
</OLModal>
)
}
export default FileTreeModalDelete