2019-08-23 15:20:22 +02:00
|
|
|
/*
|
|
|
|
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
|
|
|
|
*
|
|
|
|
* This is free software, licensed under the GNU General Public License v3.
|
|
|
|
* See /LICENSE for more information.
|
|
|
|
*/
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import Portal from "utils/Portal";
|
2019-08-23 15:20:22 +02:00
|
|
|
|
|
|
|
Modal.propTypes = {
|
|
|
|
/** Is modal shown value */
|
|
|
|
shown: PropTypes.bool.isRequired,
|
|
|
|
/** Callback to manage modal visibility */
|
|
|
|
setShown: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-08-27 16:09:18 +02:00
|
|
|
PropTypes.node,
|
|
|
|
]).isRequired,
|
2019-08-23 15:20:22 +02:00
|
|
|
};
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
export function Modal({ shown, setShown, children }) {
|
2019-08-23 15:20:22 +02:00
|
|
|
const dialogRef = useRef();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
function handleClickOutsideDialog(e) {
|
2019-08-27 16:09:18 +02:00
|
|
|
if (!dialogRef.current.contains(e.target)) setShown(false);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
document.addEventListener("mousedown", handleClickOutsideDialog);
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener("mousedown", handleClickOutsideDialog);
|
|
|
|
};
|
|
|
|
}, [setShown]);
|
|
|
|
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
return (
|
|
|
|
<Portal containerId="modal-container">
|
|
|
|
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
|
|
|
|
<div ref={dialogRef} className="modal-dialog" role="document">
|
|
|
|
<div className="modal-content">
|
|
|
|
{children}
|
|
|
|
</div>
|
2019-08-23 15:20:22 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-08-27 16:09:18 +02:00
|
|
|
</Portal>
|
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ModalHeader.propTypes = {
|
|
|
|
setShown: PropTypes.func.isRequired,
|
|
|
|
title: PropTypes.string.isRequired,
|
|
|
|
};
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
export function ModalHeader({ setShown, title }) {
|
|
|
|
return (
|
|
|
|
<div className="modal-header">
|
|
|
|
<h5 className="modal-title">{title}</h5>
|
|
|
|
<button type="button" className="close" onClick={() => setShown(false)}>
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ModalBody.propTypes = {
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-08-27 16:09:18 +02:00
|
|
|
PropTypes.node,
|
|
|
|
]).isRequired,
|
2019-08-23 15:20:22 +02:00
|
|
|
};
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
export function ModalBody({ children }) {
|
|
|
|
return <div className="modal-body">{children}</div>;
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ModalFooter.propTypes = {
|
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2019-08-27 16:09:18 +02:00
|
|
|
PropTypes.node,
|
|
|
|
]).isRequired,
|
2019-08-23 15:20:22 +02:00
|
|
|
};
|
|
|
|
|
2019-08-27 16:09:18 +02:00
|
|
|
export function ModalFooter({ children }) {
|
|
|
|
return (
|
|
|
|
<div className="modal-footer">
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
2019-08-23 15:20:22 +02:00
|
|
|
}
|