74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import * as React from "react";
|
||
import Box from "@mui/material/Box";
|
||
import Button from "@mui/material/Button";
|
||
import Typography from "@mui/material/Typography";
|
||
import Modal from "@mui/material/Modal";
|
||
import { GridSelectionModel } from "@mui/x-data-grid";
|
||
|
||
type DeleteModalProps = {
|
||
open: boolean;
|
||
handleClose: () => void;
|
||
|
||
tariffDelete: (tarifIid: GridSelectionModel) => Promise<void>;
|
||
errorDelete: boolean;
|
||
tariffId: GridSelectionModel;
|
||
tariffName: string[];
|
||
};
|
||
|
||
export default function DeleteModal({
|
||
open,
|
||
handleClose,
|
||
tariffDelete,
|
||
errorDelete,
|
||
tariffId,
|
||
tariffName,
|
||
}: DeleteModalProps) {
|
||
const onClickTariffDelete = () => {
|
||
if (errorDelete) {
|
||
return;
|
||
}
|
||
tariffDelete(tariffId);
|
||
handleClose();
|
||
};
|
||
return (
|
||
<div>
|
||
<Modal
|
||
open={open}
|
||
onClose={handleClose}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
width: 400,
|
||
bgcolor: "background.paper",
|
||
border: "2px solid gray",
|
||
borderRadius: "6px",
|
||
boxShadow: 24,
|
||
p: 4,
|
||
}}
|
||
>
|
||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||
Вы уверены, что хотите удалить тариф
|
||
</Typography>
|
||
<Box
|
||
sx={{ mt: "20px", display: "flex", width: "332px", justifyContent: "space-between", alignItems: "center" }}
|
||
>
|
||
<Button onClick={() => onClickTariffDelete()} sx={{ width: "40px", height: "25px" }}>
|
||
Да
|
||
</Button>
|
||
<Typography>Тариф:</Typography>
|
||
{tariffName.map((name, index) => (
|
||
<Typography key={index}>{name};</Typography>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|