diff --git a/package-lock.json b/package-lock.json
index 78402e0..f2ccb66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "foris",
- "version": "3.2.0",
+ "version": "3.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 91bfeb8..531f7df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "foris",
- "version": "3.2.0",
+ "version": "3.4.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.css b/src/bootstrap/Modal.css
new file mode 100644
index 0000000..b057caa
--- /dev/null
+++ b/src/bootstrap/Modal.css
@@ -0,0 +1,15 @@
+@keyframes modalFade {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.modal.show {
+ display: block;
+ animation-name: modalFade;
+ animation-duration: .3s;
+ background: rgba(0, 0, 0, 0.2);
+}
diff --git a/src/bootstrap/Modal.js b/src/bootstrap/Modal.js
index 00f5c83..42e24f1 100644
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
import { Portal } from "../utils/Portal";
import { useClickOutside } from "../utils/hooks";
+import "./Modal.css";
Modal.propTypes = {
/** Is modal shown value */
diff --git a/src/bootstrap/Spinner.css b/src/bootstrap/Spinner.css
new file mode 100644
index 0000000..432b529
--- /dev/null
+++ b/src/bootstrap/Spinner.css
@@ -0,0 +1,33 @@
+.spinner-wrapper .spinner-border {
+ width: 4rem;
+ height: 4rem;
+ color: #00a2e2;
+}
+
+.spinner-fs-background {
+ background-color: rgba(2, 2, 2, .5);
+ color: rgb(230, 230, 230);
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ /*
+ * Set to high value to me sure that it always overlaps all components
+ * https://getbootstrap.com/docs/4.3/layout/overview/#z-index
+ */
+ z-index: 1100;
+}
+
+.spinner-fs-wrapper .spinner-border {
+ width: 6rem;
+ height: 6rem;
+}
+
+.spinner-fs-wrapper .spinner-text {
+ margin: 1rem;
+}
diff --git a/src/bootstrap/Spinner.js b/src/bootstrap/Spinner.js
index 07e856f..5ea2a5d 100644
--- a/src/bootstrap/Spinner.js
+++ b/src/bootstrap/Spinner.js
@@ -8,6 +8,8 @@
import React from "react";
import PropTypes from "prop-types";
+import "./Spinner.css";
+
Spinner.propTypes = {
/** Children components put into `div` with "spinner-text" class. */
children: PropTypes.oneOfType([
diff --git a/src/common/WiFiSettings/ResetWiFiSettings.js b/src/common/WiFiSettings/ResetWiFiSettings.js
index 1b65a3d..9260df6 100644
--- a/src/common/WiFiSettings/ResetWiFiSettings.js
+++ b/src/common/WiFiSettings/ResetWiFiSettings.js
@@ -27,7 +27,6 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
const module = "wifi";
ws.subscribe(module)
.bind(module, "reset", () => {
- setIsLoading(true);
// eslint-disable-next-line no-restricted-globals
setTimeout(() => location.reload(), 1000);
});
@@ -45,6 +44,7 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
function onReset() {
dismissAlert();
+ setIsLoading(true);
postReset();
}
diff --git a/src/common/WiFiSettings/__tests__/WiFiSettings.test.js b/src/common/WiFiSettings/__tests__/WiFiSettings.test.js
index cb71edf..1622fba 100644
--- a/src/common/WiFiSettings/__tests__/WiFiSettings.test.js
+++ b/src/common/WiFiSettings/__tests__/WiFiSettings.test.js
@@ -39,9 +39,10 @@ describe("", () => {
it("should handle error", async () => {
const webSockets = new WebSockets();
const { getByText } = render();
- mockJSONError();
+ const errorMessage = "An API error occurred.";
+ mockJSONError(errorMessage);
await wait(() => {
- expect(getByText("An error occurred while fetching data.")).toBeTruthy();
+ expect(getByText(errorMessage)).toBeTruthy();
});
});
diff --git a/src/form/components/ForisForm.js b/src/form/components/ForisForm.js
index 65eff29..fd66abf 100644
--- a/src/form/components/ForisForm.js
+++ b/src/form/components/ForisForm.js
@@ -11,7 +11,6 @@ import { Prompt } from "react-router-dom";
import { ALERT_TYPES } from "../../bootstrap/Alert";
import { API_STATE } from "../../api/utils";
-import { ErrorMessage } from "../../utils/ErrorMessage";
import { formFieldsSize } from "../../bootstrap/constants";
import { Spinner } from "../../bootstrap/Spinner";
import { useAlert } from "../../alertContext/AlertContext";
@@ -19,6 +18,7 @@ import { useAPIPost } from "../../api/hooks";
import { useForisModule, useForm } from "../hooks";
import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { ErrorMessage } from "../../utils/ErrorMessage";
ForisForm.propTypes = {
/** Optional WebSocket object. See `scr/common/WebSockets.js`.
@@ -27,7 +27,7 @@ ForisForm.propTypes = {
ws: PropTypes.object,
/** Foris configuration object. See usage in main components. */
forisConfig: PropTypes.shape({
- /** reForis Flask aplication API endpoint from `src/common/API.js`. */
+ /** reForis Flask application API endpoint from `src/common/API.js`. */
endpoint: PropTypes.string.isRequired,
/** `foris-controller` module name to be used via WebSockets.
* It can be use only with `ws` prop.
@@ -38,20 +38,24 @@ ForisForm.propTypes = {
* */
wsAction: PropTypes.string,
}).isRequired,
- /** Function to prepare data recived from the API before using in forms. */
- prepData: PropTypes.func.isRequired,
+ /** Function to prepare data received from the API before using in forms. */
+ prepData: PropTypes.func,
/** Function to prepare data from form before submitting. */
- prepDataToSubmit: PropTypes.func.isRequired,
+ prepDataToSubmit: PropTypes.func,
/** Function to handle response to POST request. */
- postCallback: PropTypes.func.isRequired,
+ postCallback: PropTypes.func,
/** Validate data and provide validation object. Then validation errors passed to children. */
- validator: PropTypes.func.isRequired,
+ validator: PropTypes.func,
/** Disables form */
disabled: PropTypes.bool,
- /** reForis form components. */
- children: PropTypes.node.isRequired,
/** Optional override of form submit callback */
onSubmitOverridden: PropTypes.func,
+ /** Reference to actual form element (useful for programmatically submitting it).
+ * Pass the output of useRef hook to this prop.
+ */
+ formReference: PropTypes.object,
+ /** reForis form components. */
+ children: PropTypes.node.isRequired,
// eslint-disable-next-line react/no-unused-prop-types
customWSProp(props) {
@@ -88,10 +92,11 @@ export function ForisForm({
validator,
disabled,
onSubmitOverridden,
+ formReference,
children,
}) {
const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
- const [setAlert] = useAlert();
+ const [setAlert, dismissAlert] = useAlert();
const [forisModuleState] = useForisModule(ws, forisConfig);
useEffect(() => {
@@ -111,7 +116,7 @@ export function ForisForm({
}, [postCallback, postState.state, postState.data, setAlert]);
if (forisModuleState.state === API_STATE.ERROR) {
- return ;
+ return ;
}
if (!formState.data) {
return ;
@@ -120,6 +125,7 @@ export function ForisForm({
function onSubmitHandler(event) {
event.preventDefault();
resetFormData();
+ dismissAlert();
const copiedFormData = JSON.parse(JSON.stringify(formState.data));
const preparedData = prepDataToSubmit(copiedFormData);
post({ data: preparedData });
@@ -162,7 +168,7 @@ export function ForisForm({
return (