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

Detect clicks outside element with a hook

Browse Source
This commit is contained in:
Maciej Lenartowicz
2019-12-16 13:44:58 +01:00
parent 73f84a2d81
commit 90509f2a23
6 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/bootstrap/Modal.js
View File

@ -5,10 +5,11 @@
* See /LICENSE for more information.
*/
import React, { useEffect, useRef } from "react";
import React, { useRef } from "react";
import PropTypes from "prop-types";
import { Portal } from "utils/Portal";
import { useClickOutside } from "utils/hooks";
Modal.propTypes = {
/** Is modal shown value */
@ -26,16 +27,7 @@ Modal.propTypes = {
export function Modal({ shown, setShown, children }) {
const dialogRef = useRef();
useEffect(() => {
function handleClickOutsideDialog(e) {
if (!dialogRef.current.contains(e.target)) setShown(false);
}
document.addEventListener("mousedown", handleClickOutsideDialog);
return () => {
document.removeEventListener("mousedown", handleClickOutsideDialog);
};
}, [setShown]);
useClickOutside(dialogRef, () => setShown(false));
return (
<Portal containerId="modal-container">