81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
import React from "react";
|
|
|
|
const ConfirmModal = ({
|
|
type,
|
|
onSubmit,
|
|
onClose,
|
|
message,
|
|
loading,
|
|
header,
|
|
paramData,
|
|
isOpen = false,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
const TypeofIcon = () => {
|
|
switch (type) {
|
|
case "delete":
|
|
return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
|
|
case "success":
|
|
return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
|
|
case "warning":
|
|
return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
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-sm 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-3 d-flex justify-content-center align-items-start">
|
|
{TypeofIcon()}
|
|
</div>
|
|
<div className="col-8 col-sm-9 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-3 btn-sm"
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
>
|
|
No
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmModal;
|