From 6f05d5d136faf4f8e3176fd33423107e78ecd01f Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Fri, 20 Nov 2020 16:53:22 +0100
Subject: [PATCH] Add optional sizes to Modal

---
 src/bootstrap/Modal.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/bootstrap/Modal.js b/src/bootstrap/Modal.js
index 96f1fef..bac17a2 100644
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@@ -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>