kandimat/redaktions-app/src/components/DeleteConfirmationDialog.tsx
Christoph Lienhard fc8bc6724b
#11 Refactor: Introduce apollo reactive variables for global state
Use it to streamline entangle the delete dialog(s) from the list(s)
2020-12-30 18:26:19 +01:00

48 lines
1.3 KiB
TypeScript

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import {Button, DialogActions, DialogContentText} from "@material-ui/core";
import ButtonWithSpinner from "./ButtonWithSpinner";
interface DeleteConfirmationDialogProps {
open: boolean,
type: string,
title: string,
loading?: boolean,
onConfirmButtonClick(): void,
onClose(): void,
}
export default function DeleteConfirmationDialog(props: DeleteConfirmationDialogProps) {
return (
<Dialog
open={props.open}
onClose={props.onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{props.type} löschen?</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Möchten Sie die {props.type}
"{props.title}"
wirklich löschen?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={props.onClose} color="primary">
Abbrechen
</Button>
<ButtonWithSpinner onClick={props.onConfirmButtonClick} autoFocus loading={props.loading}>
Löschen
</ButtonWithSpinner>
</DialogActions>
</Dialog>
);
}