Merge branch 'dev' into 'master'

Release 2.1.0

See merge request turris/reforis/foris-js!62

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,11 +1,11 @@
 {
   "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": {
     "type": "git",
-    "url": "https://gitlab.labs.nic.cz/turris/reforis/forisjs.git"
+    "url": "https://gitlab.labs.nic.cz/turris/reforis/foris-js.git"
   },
   "keywords": [
     "foris",

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(() => {
+    useClickOutside(dialogRef, () => setShown(false));
-        function handleClickOutsideDialog(e) {
-            if (!dialogRef.current.contains(e.target)) setShown(false);
-        }
-
-        document.addEventListener("mousedown", handleClickOutsideDialog);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutsideDialog);
-        };
-    }, [setShown]);
 
     return (
         <Portal containerId="modal-container">

src/bootstrap/RadioSet.js

@@ -65,7 +65,7 @@ Radio.propTypes = {
     helpText: PropTypes.string,
 };
 
-function Radio({
+export function Radio({
     label, id, helpText, ...props
 }) {
     return (

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',

src/index.js

@@ -27,7 +27,7 @@ export { FileInput } from "bootstrap/FileInput";
 export { Input } from "bootstrap/Input";
 export { NumberInput } from "bootstrap/NumberInput";
 export { PasswordInput } from "bootstrap/PasswordInput";
-export { RadioSet } from "bootstrap/RadioSet";
+export { Radio, RadioSet } from "bootstrap/RadioSet";
 export { Select } from "bootstrap/Select";
 export { TextInput } from "bootstrap/TextInput";
 export { formFieldsSize } from "bootstrap/constants";
@@ -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";

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);
+        };
+    });
+}

src/webSockets/WebSockets.js

@@ -25,18 +25,18 @@ export class WebSockets {
                 console.error("WS: Error observed, you aren't logged probably.");
                 window.location.replace(ForisURLs.login);
             }
-            console.log(`WS: Error: ${e}`);
+            console.error(`WS: Error: ${e}`);
         };
         this.ws.onmessage = (e) => {
-            console.log(`WS: Received Message: ${e.data}`);
+            console.debug(`WS: Received Message: ${e.data}`);
             const data = JSON.parse(e.data);
             this.dispatch(data);
         };
         this.ws.onopen = () => {
-            console.log("WS: Connection open.");
+            console.debug("WS: Connection open.");
         };
         this.ws.onclose = () => {
-            console.log("WS: Connection closed.");
+            console.debug("WS: Connection closed.");
         };
 
         // callbacks[module][action]
@@ -111,7 +111,7 @@ export class WebSockets {
             chain = this.callbacks[json.module][json.action];
         } catch (error) {
             if (error instanceof TypeError) {
-                console.log(`Callback for this message wasn't found:${error.data}`);
+                console.warn(`Callback for this message wasn't found:${error.data}`);
             } else throw error;
         }