marco.pms.web/src/components/common/ConfirmModal.jsx

79 lines
2.1 KiB
JavaScript

import React from "react";
const ConfirmModal = ({
type,
onSubmit,
onClose,
message,
loading,
header,
paramData,
isOpen = false,
}) => {
if (!isOpen) return null;
const TypeofIcon = () => {
if (type === "delete") {
return (
<i
className="bx bx-x-circle text-danger"
style={{ fontSize: "60px" }}
></i>
);
}
return null;
};
const modalSize = type === "delete" ? "sm" : "md";
return (
<div
className="modal fade show"
style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
role="dialog"
aria-modal="true"
>
<div className={`modal-dialog modal-${modalSize} modal-dialog-top`}>
<div className="modal-content">
<div className="modal-body py-1 px-2">
<div className="d-flex justify-content-between mb-4 pt-2">
{header && <strong className="mb-0">{header}</strong>}
<button
type="button"
className="btn-close "
aria-label="Close"
onClick={onClose}
/>
</div>
<div className="row">
<div className="col-4 col-sm-2">{TypeofIcon()}</div>
<div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
<span className="fs-6">{message}</span>
<div className="d-flex justify-content-end mt-4">
<button
className="btn btn-primary btn-sm"
onClick={() => onSubmit(paramData)}
disabled={loading}
>
{loading ? "Please Wait..." : "Yes"}
</button>
<button
className="btn btn-secondary ms-4 btn-sm"
onClick={onClose}
disabled={loading}
>
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ConfirmModal;