GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-24 00:01:36 +01:00
Code Issues Releases Activity

Merge branch 'scrollable-modal' into 'dev'

Browse Source 
Add option to make modal scrollable.

See merge request turris/reforis/foris-js!97
This commit is contained in:
Bogdan Bodnar 2020-02-26 11:47:50 +01:00
commit dbb840d51c
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/bootstrap/Modal.js
View File

@ -17,6 +17,7 @@ Modal.propTypes = {
shown: PropTypes.bool.isRequired, shown: PropTypes.bool.isRequired,
/** Callback to manage modal visibility */ /** Callback to manage modal visibility */
setShown: PropTypes.func.isRequired, setShown: PropTypes.func.isRequired,
scrollable: PropTypes.bool,
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */ /** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
@ -25,7 +26,9 @@ Modal.propTypes = {
]).isRequired, ]).isRequired,
}; };
export function Modal({ shown, setShown, children }) { export function Modal({
shown, setShown, scrollable, children,
}) {
const dialogRef = useRef(); const dialogRef = useRef();
useClickOutside(dialogRef, () => setShown(false)); useClickOutside(dialogRef, () => setShown(false));
@ -33,7 +36,11 @@ export function Modal({ shown, setShown, children }) {
return ( return (
<Portal containerId="modal-container"> <Portal containerId="modal-container">
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog"> <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
<div ref={dialogRef} className="modal-dialog modal-dialog-centered" role="document"> <div
ref={dialogRef}
className={`modal-dialog modal-dialog-centered${scrollable ? " modal-dialog-scrollable" : ""}`}
role="document"
>
<div className="modal-content"> <div className="modal-content">
{children} {children}
</div> </div>