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:
commit
e864de5a24
48
package-lock.json
generated
48
package-lock.json
generated
|
@ -5445,9 +5445,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001037",
|
"version": "1.0.30001159",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001037.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz",
|
||||||
"integrity": "sha512-qQP40FzWQ1i9RTjxppOUnpM8OwTBFL5DQbjoR9Az32EtM7YUZOw9orFO6rj1C+xWAGzz+X3bUe09Jf5Ep+zpuA==",
|
"integrity": "sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"capture-exit": {
|
"capture-exit": {
|
||||||
|
@ -6576,24 +6576,6 @@
|
||||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
|
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
|
||||||
"dev": true
|
"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": {
|
"end-of-stream": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
|
||||||
|
@ -13237,9 +13219,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node-forge": {
|
"node-forge": {
|
||||||
"version": "0.9.0",
|
"version": "0.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
|
||||||
"integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
|
"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node-int64": {
|
"node-int64": {
|
||||||
|
@ -15604,12 +15586,12 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"selfsigned": {
|
"selfsigned": {
|
||||||
"version": "1.10.7",
|
"version": "1.10.8",
|
||||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
|
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
|
||||||
"integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
|
"integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"node-forge": "0.9.0"
|
"node-forge": "^0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"semver": {
|
"semver": {
|
||||||
|
@ -17347,11 +17329,6 @@
|
||||||
"is-typedarray": "^1.0.0"
|
"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": {
|
"unherit": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
|
||||||
|
@ -18394,11 +18371,6 @@
|
||||||
"iconv-lite": "0.4.24"
|
"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": {
|
"whatwg-mimetype": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
|
||||||
|
|
|
@ -18,6 +18,7 @@ Modal.propTypes = {
|
||||||
/** Callback to manage modal visibility */
|
/** Callback to manage modal visibility */
|
||||||
setShown: PropTypes.func.isRequired,
|
setShown: PropTypes.func.isRequired,
|
||||||
scrollable: PropTypes.bool,
|
scrollable: PropTypes.bool,
|
||||||
|
size: PropTypes.string,
|
||||||
|
|
||||||
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
|
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
|
||||||
children: PropTypes.oneOfType([
|
children: PropTypes.oneOfType([
|
||||||
|
@ -26,8 +27,9 @@ Modal.propTypes = {
|
||||||
]).isRequired,
|
]).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Modal({ shown, setShown, scrollable, children }) {
|
export function Modal({ shown, setShown, scrollable, size, children }) {
|
||||||
const dialogRef = useRef();
|
const dialogRef = useRef();
|
||||||
|
let modalSize = "modal-";
|
||||||
|
|
||||||
useClickOutside(dialogRef, () => setShown(false));
|
useClickOutside(dialogRef, () => setShown(false));
|
||||||
|
|
||||||
|
@ -44,14 +46,32 @@ export function Modal({ shown, setShown, scrollable, children }) {
|
||||||
};
|
};
|
||||||
}, [setShown]);
|
}, [setShown]);
|
||||||
|
|
||||||
|
switch (size) {
|
||||||
|
case "sm":
|
||||||
|
modalSize += "sm";
|
||||||
|
break;
|
||||||
|
case "lg":
|
||||||
|
modalSize += "lg";
|
||||||
|
break;
|
||||||
|
case "xl":
|
||||||
|
modalSize += "xl";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
modalSize = "";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Portal containerId="modal-container">
|
<Portal containerId="modal-container">
|
||||||
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
|
<div
|
||||||
|
className={`modal fade ${shown ? "show" : ""}`.trim()}
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
ref={dialogRef}
|
ref={dialogRef}
|
||||||
className={`modal-dialog modal-dialog-centered${
|
className={`modal-dialog ${modalSize} modal-dialog-centered ${
|
||||||
scrollable ? " modal-dialog-scrollable" : ""
|
scrollable ? "modal-dialog-scrollable" : ""
|
||||||
}`}
|
}`.trim()}
|
||||||
role="document"
|
role="document"
|
||||||
>
|
>
|
||||||
<div className="modal-content">{children}</div>
|
<div className="modal-content">{children}</div>
|
||||||
|
|
|
@ -1,8 +1,19 @@
|
||||||
Bootstrap modal component.
|
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.
|
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
|
```js
|
||||||
<div id="modal-container" />
|
<div id="modal-container" />
|
||||||
```
|
```
|
||||||
|
@ -14,7 +25,7 @@ import { useState } from "react";
|
||||||
const [shown, setShown] = useState(false);
|
const [shown, setShown] = useState(false);
|
||||||
|
|
||||||
<>
|
<>
|
||||||
<Modal setShown={setShown} shown={shown}>
|
<Modal setShown={setShown} shown={shown} size="sm">
|
||||||
<ModalHeader setShown={setShown} title="Warning!" />
|
<ModalHeader setShown={setShown} title="Warning!" />
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
<p>Bla bla bla...</p>
|
<p>Bla bla bla...</p>
|
||||||
|
|
|
@ -10,7 +10,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
|
||||||
role="dialog"
|
role="dialog"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="modal-dialog modal-dialog-centered"
|
class="modal-dialog modal-dialog-centered"
|
||||||
role="document"
|
role="document"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -39,7 +39,6 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
|
||||||
// Common
|
// Common
|
||||||
export { RebootButton } from "./common/RebootButton";
|
export { RebootButton } from "./common/RebootButton";
|
||||||
export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
|
export { WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
|
||||||
|
|
||||||
// Form
|
// Form
|
||||||
export { ForisForm } from "./form/components/ForisForm";
|
export { ForisForm } from "./form/components/ForisForm";
|
||||||
export {
|
export {
|
||||||
|
@ -70,6 +69,7 @@ export {
|
||||||
export { ErrorMessage } from "./utils/ErrorMessage";
|
export { ErrorMessage } from "./utils/ErrorMessage";
|
||||||
export { useClickOutside } from "./utils/hooks";
|
export { useClickOutside } from "./utils/hooks";
|
||||||
export { toLocaleDateString } from "./utils/datetime";
|
export { toLocaleDateString } from "./utils/datetime";
|
||||||
|
export { displayCard } from "./utils/displayCard";
|
||||||
|
|
||||||
// Foris URL
|
// Foris URL
|
||||||
export { ForisURLs, REFORIS_URL_PREFIX } from "./utils/forisUrls";
|
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