Merge branch 'add-optional-sizes-modals' into 'dev'

Add optional sizes to Modals See merge request turris/reforis/foris-js!138
2025-11-03 23:00:31 +01:00 · 2020-11-23 22:25:18 +01:00
parent 0892a1534a 5469e6ec80
commit e864de5a24
6 changed files with 73 additions and 47 deletions
--- 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",
--- 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>
--- a/src/bootstrap/Modal.md
+++ b/src/bootstrap/Modal.md
@@ -1,8 +1,19 @@
 Bootstrap modal component.

-it's required to have an element `<div id={"modal-container"}/>` somewhere on
+It's required to have an element `<div id={"modal-container"}/>` 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
+<a href="https://getbootstrap.com/docs/4.5/components/modal/#optional-sizes" target="_blank">
+documentation</a>.
+
 ```js
 <div id="modal-container" />
 ```
@@ -14,7 +25,7 @@ import { useState } from "react";
 const [shown, setShown] = useState(false);

 <>
-    <Modal setShown={setShown} shown={shown}>
+    <Modal setShown={setShown} shown={shown} size="sm">
        <ModalHeader setShown={setShown} title="Warning!" />
        <ModalBody>
            <p>Bla bla bla...</p>
--- a/src/common/tests/snapshots/RebootButton.test.js.snap
+++ b/src/common/tests/snapshots/RebootButton.test.js.snap
@@ -10,7 +10,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
      role="dialog"
    >
      <div
-        class="modal-dialog modal-dialog-centered"
+        class="modal-dialog  modal-dialog-centered"
        role="document"
      >
        <div
--- a/src/index.js
+++ b/src/index.js
@@ -39,7 +39,6 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 // Common
 export { RebootButton } from "./common/RebootButton";
 export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
-
 // Form
 export { ForisForm } from "./form/components/ForisForm";
 export {
@@ -70,6 +69,7 @@ export {
 export { ErrorMessage } from "./utils/ErrorMessage";
 export { useClickOutside } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
+export { displayCard } from "./utils/displayCard";

 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
--- a/src/utils/displayCard.js
+++ b/src/utils/displayCard.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2020 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.
+ */
+
+export function displayCard({ package_lists: packages }, cardName) {
+    const enabledPackagesNames = [];
+    packages
+        .filter((item) => item.enabled)
+        .map((item) => {
+            enabledPackagesNames.push(item.name);
+            item.options
+                .filter((option) => option.enabled)
+                .map((option) => {
+                    enabledPackagesNames.push(option.name);
+                    return null;
+                });
+            return null;
+        });
+    return enabledPackagesNames.includes(cardName);
+}