GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00
Code Issues Releases Activity

Add optional sizes to Modal

Browse Source
This commit is contained in:
Aleksandr Gumroian 2020-11-20 16:53:22 +01:00
parent 0892a1534a
commit 6f05d5d136
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
1 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/bootstrap/Modal.js
View File

@ -18,6 +18,7 @@ Modal.propTypes = {
/** Callback to manage modal visibility */
setShown: PropTypes.func.isRequired,
scrollable: PropTypes.bool,
size: PropTypes.string,
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
children: PropTypes.oneOfType([
@ -26,8 +27,9 @@ Modal.propTypes = {
]).isRequired,
};
export function Modal({ shown, setShown, scrollable, children }) {
export function Modal({ shown, setShown, scrollable, size, children }) {
const dialogRef = useRef();
let modalSize = "modal-";
useClickOutside(dialogRef, () => setShown(false));
@ -44,14 +46,32 @@ export function Modal({ shown, setShown, scrollable, children }) {
};
}, [setShown]);
switch (size) {
case "sm":
modalSize += "sm";
break;
case "lg":
modalSize += "lg";
break;
case "xl":
modalSize += "xl";
break;
default:
modalSize = "";
break;
}
return (
<Portal containerId="modal-container">
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
<div
className={`modal fade ${shown ? "show" : ""}`.trim()}
role="dialog"
>
<div
ref={dialogRef}
className={`modal-dialog modal-dialog-centered${
scrollable ? " modal-dialog-scrollable" : ""
}`}
className={`modal-dialog ${modalSize} modal-dialog-centered ${
scrollable ? "modal-dialog-scrollable" : ""
}`.trim()}
role="document"
>
<div className="modal-content">{children}</div>