From 6f05d5d136faf4f8e3176fd33423107e78ecd01f Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 20 Nov 2020 16:53:22 +0100 Subject: [PATCH 1/5] 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 ( -
+
{children}
From 6480a39cdbc8f9042640bcb64f6f5fdfc5c260bd Mon Sep 17 00:00:00 2001 From: Aleksandr Gumroian Date: Fri, 20 Nov 2020 16:54:01 +0100 Subject: [PATCH 2/5] Add information about optional sizes to docs --- src/bootstrap/Modal.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/bootstrap/Modal.md b/src/bootstrap/Modal.md index 1744070..08d4878 100644 --- a/src/bootstrap/Modal.md +++ b/src/bootstrap/Modal.md @@ -1,8 +1,19 @@ Bootstrap modal component. -it's required to have an element `
` somewhere on +It's required to have an element `
` somewhere on the page since modals are rendered in portals. +Modals also have three optional sizes, which can be defined through the `size` +prop: + +- small - `sm` +- large - `lg` +- extra-large - `xl` + +For more details please visit Bootstrap + +documentation. + ```js