99 lines
3.8 KiB
JavaScript
99 lines
3.8 KiB
JavaScript
import { XLg } from '../assets';
|
|
import './Modal.css';
|
|
|
|
export function Modal(props) {
|
|
return (
|
|
<div
|
|
className='modal-background'
|
|
onClick={props.backgroundClose && props.onClose}
|
|
style={{ zIndex: props.show ? 8 : -8 }}
|
|
>
|
|
<div
|
|
className='modal-container'
|
|
onClick={(event) => event.stopPropagation()}
|
|
style={props.style}
|
|
>
|
|
<div className='modal-header'>
|
|
<span className='modal-title'>{props.title}</span>
|
|
<button className='modal-close' onClick={props.onClose}>
|
|
<img className='modal-close-icon' src={XLg} />
|
|
</button>
|
|
</div>
|
|
<div className='modal-body'>{props.children}</div>
|
|
<div className='modal-footer'>
|
|
{props.cancelButton && (
|
|
<button className='modal-button-cancel' onClick={props.onCancel}>
|
|
{props.cancelButton}
|
|
</button>
|
|
)}
|
|
{props.deleteButton && (
|
|
<button
|
|
className={
|
|
props.deleteActive
|
|
? 'modal-button-delete'
|
|
: 'modal-button-delete-inactive'
|
|
}
|
|
onClick={props.onDelete}
|
|
>
|
|
{props.deleteButton}
|
|
</button>
|
|
)}
|
|
{props.submitButton && (
|
|
<button className='modal-button' onClick={props.onSubmit}>
|
|
{/* {props.submitButton} */}
|
|
{props.submitLoading ? (
|
|
<div className='loader'></div>
|
|
) : (
|
|
props.submitButton
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SmallModal(props) {
|
|
return (
|
|
<div
|
|
className='modal-background'
|
|
onClick={props.onClose}
|
|
style={{ zIndex: props.show ? 10 : -10 }}
|
|
>
|
|
<div
|
|
className='small-modal-container'
|
|
onClick={(event) => event.stopPropagation()}
|
|
style={props.style}
|
|
>
|
|
<div className='small-modal-header'>
|
|
<span className='small-modal-title'>{props.title}</span>
|
|
<button className='modal-close' onClick={props.onClose}>
|
|
<img className='modal-close-icon' src={XLg} />
|
|
</button>
|
|
</div>
|
|
<div className='modal-body'>
|
|
<span className='small-modal-message'>{props.message}</span>
|
|
</div>
|
|
<div className='small-modal-footer'>
|
|
{props.cancelButton && (
|
|
<button className='small-modal-button-cancel' onClick={props.onCancel}>
|
|
{props.cancelButton}
|
|
</button>
|
|
)}
|
|
{props.deleteButton && (
|
|
<button className='small-modal-button-delete' onClick={props.onDelete}>
|
|
{props.deleteButton}
|
|
</button>
|
|
)}
|
|
{props.submitButton && (
|
|
<button className='modal-button' onClick={props.onSubmit}>
|
|
{props.submitButton}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|