@scrumble-nl/react-quick-modal
Version:
A quick and easy wrapper around react-bootstrap modal, you can add or remove a modal from anywhere in your application with a few simple steps.
35 lines (34 loc) • 2.01 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { Button, Modal as BootstrapModal } from 'react-bootstrap';
import { useModal } from './quick-modal';
var Modal = function (_a) {
var cancelButton = _a.cancelButton, confirmButton = _a.confirmButton, className = _a.className, size = _a.size, keyboard = _a.keyboard, title = _a.title, children = _a.children, _b = _a.closeOnConfirm, closeOnConfirm = _b === void 0 ? true : _b;
var _c = useState(true), show = _c[0], setShow = _c[1];
var hideModal = useModal().hideModal;
var handleClose = useCallback(function () {
hideModal();
setShow(false);
}, [hideModal]);
var handleCancel = useCallback(function () {
if (cancelButton && cancelButton.callback) {
cancelButton.callback();
}
handleClose();
}, [handleClose, cancelButton]);
var handleConfirm = useCallback(function () {
if (confirmButton && confirmButton.callback) {
confirmButton.callback();
}
if (closeOnConfirm) {
handleClose();
}
}, [handleClose, closeOnConfirm, confirmButton]);
return (React.createElement(BootstrapModal, { className: className || '', show: show, onHide: handleClose, size: size, keyboard: keyboard, backdrop: keyboard === false ? 'static' : undefined },
React.createElement(BootstrapModal.Header, { closeButton: true },
React.createElement(BootstrapModal.Title, null, title)),
React.createElement(BootstrapModal.Body, null, children),
cancelButton || confirmButton ? (React.createElement(BootstrapModal.Footer, null,
!cancelButton || (React.createElement(Button, { variant: cancelButton.variant || 'secondary', onClick: handleCancel }, cancelButton.label || 'Cancel')),
!confirmButton || (React.createElement(Button, { variant: confirmButton.variant || 'primary', onClick: handleConfirm }, confirmButton.label || 'Confirm')))) : null));
};
export default Modal;