diff --git a/package-lock.json b/package-lock.json index 3574cdd..b86ebf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5445,9 +5445,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001037", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001037.tgz", - "integrity": "sha512-qQP40FzWQ1i9RTjxppOUnpM8OwTBFL5DQbjoR9Az32EtM7YUZOw9orFO6rj1C+xWAGzz+X3bUe09Jf5Ep+zpuA==", + "version": "1.0.30001159", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz", + "integrity": "sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA==", "dev": true }, "capture-exit": { @@ -6576,24 +6576,6 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, - "encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "requires": { - "iconv-lite": "^0.6.2" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz", - "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==", - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } - } - }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -13237,9 +13219,9 @@ } }, "node-forge": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", - "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", + "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==", "dev": true }, "node-int64": { @@ -15604,12 +15586,12 @@ "dev": true }, "selfsigned": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz", - "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==", + "version": "1.10.8", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz", + "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==", "dev": true, "requires": { - "node-forge": "0.9.0" + "node-forge": "^0.10.0" } }, "semver": { @@ -17347,11 +17329,6 @@ "is-typedarray": "^1.0.0" } }, - "ua-parser-js": { - "version": "0.7.22", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz", - "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==" - }, "unherit": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz", @@ -18394,11 +18371,6 @@ "iconv-lite": "0.4.24" } }, - "whatwg-fetch": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz", - "integrity": "sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==" - }, "whatwg-mimetype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz", 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}
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