mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 17:30:56 -05:00
abb59e4603
[web] Migrate the file tree on the editor page to Bootstrap 5 GitOrigin-RevId: e2efec26242c8cdab37a54bc182b83bfb0f1eb3c
79 lines
1.8 KiB
JavaScript
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
|