mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Merge branch 'add-optional-sizes-modals' into 'dev'
Add optional sizes to Modals See merge request turris/reforis/foris-js!138
This commit is contained in:
Aleksandr Gumroian
commit
e864de5a24
48
package-lock.json
generated
48
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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${
|
||||
className={`modal-dialog ${modalSize} modal-dialog-centered ${
|
||||
scrollable ? "modal-dialog-scrollable" : ""
|
||||
}`}
|
||||
}`.trim()}
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content">{children}</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
23
src/utils/displayCard.js
Normal file
23
src/utils/displayCard.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user