Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 781x 781x 9x 9x 781x 65x 65x | import * as React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import LoadingButton from "@mui/lab/LoadingButton";
/**
* @param {boolean} [yesLoading=false] Shows progress on Yes and disables both actions while loading.
* @param {string} [yesLabel="Yes"]
* @param {string} [yesLoadingLabel] Label shown on the Yes button while `yesLoading` is true.
*/
export default function YesNoOption({
id,
title,
message,
showDialog,
clickNo,
clickYes,
yesLoading = false,
yesLabel = "Yes",
yesLoadingLabel,
}) {
const dialogId = id || "dialog-yes-or-no";
const handleNo = () => {
Eif (!yesLoading) {
clickNo(false);
}
};
return (
<React.Fragment>
<Dialog
id={dialogId}
open={showDialog}
aria-labelledby={`${dialogId}-title`}
aria-describedby={`${dialogId}-description`}
fullWidth
disableEscapeKeyDown={yesLoading}
>
<DialogTitle id={`${dialogId}-title`}>{title}</DialogTitle>
<DialogContent id={`${dialogId}-description`} dividers component="div">
{message}
</DialogContent>
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
<Button
id={`${dialogId}-button-no`}
sx={{ width: "150px" }}
variant="inherit"
onClick={handleNo}
disabled={yesLoading}
>
No
</Button>
<LoadingButton
id={`${dialogId}-button-yes`}
sx={{ width: "150px" }}
variant="contained"
color="primary"
loading={yesLoading}
loadingPosition="start"
onClick={() => {
Eif (typeof clickYes === "function" && !yesLoading) {
void clickYes();
}
}}
>
{yesLoading && yesLoadingLabel ? yesLoadingLabel : yesLabel}
</LoadingButton>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
// HOW TO USE
// import YesNoOption from "../../../commons/components/dialog/YesNoOption";
// const [showYesNoOption, setShowYesNoOption] = useState(false);
// <YesNoOption
// title="Confirm Logout"
// message="Do you want to logout?"
// showDialog={showYesNoOption}
// clickNo={() => {setShowYesNoOption(false)}}
// clickYes={handleLogout}
// />;
|