GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-16 13:46:16 +02:00
Code Issues Releases Activity

Fix lint.

Browse Source
This commit is contained in:
Bogdan Bodnar
2019-08-27 16:09:18 +02:00
parent 18e8e20206
commit c0d742b13b
36 changed files with 620 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/bootstrap/Modal.js
View File

@ -5,10 +5,9 @@
* See /LICENSE for more information.
*/
import React, {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
import {Portal} from 'utils/Portal';
import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import Portal from "utils/Portal";
Modal.propTypes = {
/** Is modal shown value */
@ -19,17 +18,16 @@ Modal.propTypes = {
/** Modal content use following: `ModalHeader`, `ModalBody`, `ModalFooter` */
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
PropTypes.node,
]).isRequired,
};
export function Modal({shown, setShown, children}) {
export function Modal({ shown, setShown, children }) {
const dialogRef = useRef();
useEffect(() => {
function handleClickOutsideDialog(e) {
if (!dialogRef.current.contains(e.target))
setShown(false);
if (!dialogRef.current.contains(e.target)) setShown(false);
}
document.addEventListener("mousedown", handleClickOutsideDialog);
@ -39,15 +37,17 @@ export function Modal({shown, setShown, children}) {
}, [setShown]);
return <Portal containerId="modal_container">
<div className={'modal fade ' + (shown ? 'show' : '')} role="dialog">
<div ref={dialogRef} className="modal-dialog" role="document">
<div className="modal-content">
{children}
return (
<Portal containerId="modal-container">
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog">
<div ref={dialogRef} className="modal-dialog" role="document">
<div className="modal-content">
{children}
</div>
</div>
</div>
</div>
</Portal>
</Portal>
);
}
ModalHeader.propTypes = {
@ -55,35 +55,39 @@ ModalHeader.propTypes = {
title: PropTypes.string.isRequired,
};
export function ModalHeader({setShown, title}) {
return <div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="close" onClick={() => setShown(false)}>
<span aria-hidden="true">&times;</span>
</button>
</div>
export function ModalHeader({ setShown, title }) {
return (
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="close" onClick={() => setShown(false)}>
<span aria-hidden="true">&times;</span>
</button>
</div>
);
}
ModalBody.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
PropTypes.node,
]).isRequired,
};
export function ModalBody({children}) {
return <div className="modal-body">{children}</div>
export function ModalBody({ children }) {
return <div className="modal-body">{children}</div>;
}
ModalFooter.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
PropTypes.node,
]).isRequired,
};
export function ModalFooter({children}) {
return <div className="modal-footer">
{children}
</div>
export function ModalFooter({ children }) {
return (
<div className="modal-footer">
{children}
</div>
);
}