From 90509f2a23d7c662315b0f3a9c2dbbfb97edd7f8 Mon Sep 17 00:00:00 2001 From: Maciej Lenartowicz 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 ( 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 => ); @@ -41,7 +41,7 @@ describe('useForm hook.', () => { mockValidator = jest.fn(data => data.field === 'invalidValue' ? {field: 'Error'} : {}); const {getByTestId, container} = render( { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }); +}