78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
|
|
|
|
const TypeofIcon = (type) => {
|
|
switch (type) {
|
|
case "delete":
|
|
return <i className='bx bx-x-circle text-danger ' style={{fontSize:"60px"}} ></i>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const TypeofModal = (type) => {
|
|
switch (type) {
|
|
case "delete":
|
|
return "sm";
|
|
case "other":
|
|
return "md";
|
|
default:
|
|
return "sm"; // Return a default modal size
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`modal-dialog modal-${TypeofModal(type)} modal-simple modal-confirm`}>
|
|
<div className='modal-dialog modal-dialog-centered'>
|
|
<div className="modal-content">
|
|
<div className="modal-body">
|
|
<div className="row">
|
|
|
|
<div className="text-start mb-1">
|
|
|
|
<div className=' d-flex justify-content-between mb-4'>
|
|
{header && < strong className='mb-0 font-weight-bold'>{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(type)}</div>
|
|
<div className='col-8 col-sm-10 py-sm-2 py-1 text-sm-end'>
|
|
<span className='fs-6 text'>{message}</span>
|
|
<div className='d-flex justify-content-center mt-4'>
|
|
<button
|
|
className='btn btn-primary btn-sm'
|
|
onClick={onSubmit}
|
|
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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmModal;
|