From 90509f2a23d7c662315b0f3a9c2dbbfb97edd7f8 Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Mon, 16 Dec 2019 13:44:58 +0100
Subject: [PATCH] Detect clicks outside element with a hook

---
 package-lock.json                |  2 +-
 package.json                     |  2 +-
 src/bootstrap/Modal.js           | 14 +++-----------
 src/form/__tests__/hooks.test.js |  4 ++--
 src/index.js                     |  1 +
 src/utils/hooks.js               | 16 ++++++++++++++++
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12c5734..a7ee68f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index a42ed67..1219e81 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
diff --git a/src/bootstrap/Modal.js b/src/bootstrap/Modal.js
index a212c1f..9e9dbe7 100644
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@@ -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">
diff --git a/src/form/__tests__/hooks.test.js b/src/form/__tests__/hooks.test.js
index 0063e27..52516ac 100644
--- a/src/form/__tests__/hooks.test.js
+++ b/src/form/__tests__/hooks.test.js
@@ -10,6 +10,7 @@ import React from 'react';
 import { act, fireEvent, render, waitForElement } from 'customTestRender';
 import mockAxios from 'jest-mock-axios';
 import { ForisForm } from "../components/ForisForm";
+import { WebSockets } from "webSockets/WebSockets";
 
 
 // It's possible to unittest each hooks via react-hooks-testing-library.
@@ -30,7 +31,6 @@ describe('useForm hook.', () => {
     let mockValidator;
     let mockPrepData;
     let mockPrepDataToSubmit;
-    let mockWebSockets;
     let input;
     let form;
     const Child = jest.fn(props => <TestForm {...props}/>);
@@ -41,7 +41,7 @@ describe('useForm hook.', () => {
         mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {});
         const {getByTestId, container} = render(
             <ForisForm
-                ws={mockWebSockets}
+                ws={new WebSockets()}
                 // Just some module which exists...
                 forisConfig={{
                     endpoint: 'testEndpoint',
diff --git a/src/index.js b/src/index.js
index 6edf5f2..149a74b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -62,6 +62,7 @@ export {
     withEither, withSpinner, withSending, withSpinnerOnSending, withError, withErrorMessage,
 } from "utils/conditionalHOCs";
 export { ErrorMessage } from "utils/ErrorMessage";
+export { useClickOutside } from "utils/hooks";
 
 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "forisUrls";
diff --git a/src/utils/hooks.js b/src/utils/hooks.js
index 8fcb09d..d43c2b8 100644
--- a/src/utils/hooks.js
+++ b/src/utils/hooks.js
@@ -18,3 +18,19 @@ export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackAr
     }, [condition, callback, timeout, callbackArgs]);
     return setCondition;
 }
+
+/** Execute callback when user clicks outside specified element. */
+export function useClickOutside(element, callback) {
+    function handleClickOutside(event) {
+        if (element.current && !element.current.contains(event.target)) {
+            callback(event);
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    });
+}