@tsed/react-formio 1.12.0 → 1.13.2

package/dist/stores/auth/auth.selectors.d.ts

@@ -1,6 +1,6 @@
 import { RoleSchema, Submission } from "../../interfaces";
 import { AuthState } from "./auth.reducers";
 export declare const selectAuth: (state: any) => AuthState<any>;
-export declare const selectUser: <User = any>(state: any) => Submission<User>;
+export declare const selectUser: <User = any>(state: any) => Submission<User> | null;
 export declare const selectRoles: (state: any) => Record<string, RoleSchema>;
 export declare const selectIsAuthenticated: (state: any) => boolean;

package/jest.config.js

@@ -1 +1 @@
-module.exports = require("@tsed/config/jest.config")("react-formio");
+module.exports = require("@tsed/config/jest/jest.web.config.js");

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.12.0",
+  "version": "1.13.2",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "scripts": {
-    "test": "cross-env CI=1 yarn craco test --coverage",
+    "test": "cross-env NODE_ENV=test jest --coverage",
     "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
     "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.12.0",
+    "@tsed/redux-utils": "1.13.2",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -26,8 +26,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.12.0",
-    "@tsed/tailwind-formio": "1.12.0"
+    "@tsed/tailwind": "1.13.2",
+    "@tsed/tailwind-formio": "1.13.2"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/readme.md

@@ -25,9 +25,11 @@
 
 <hr />
 
-A [React](http://facebook.github.io/react/) library for rendering out forms based on the [Form.io](https://www.form.io) platform.
+A [React](http://facebook.github.io/react/) library for rendering out forms based on the [Form.io](https://www.form.io)
+platform.
 
-This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features listed above.
+This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
+listed above.
 
 See our [storybook](https://formio.tsed.io/) to see all available components.
 
@@ -83,7 +85,10 @@ export default App;
 
 ### Form
 
-The form component is the primary component of the system. It is what takes the form definition (json) and renders the form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src` prop with a url to the form definition, usually a form.io server. The other is to pass the `form` prop with the json definition and optionally a `url` prop with the location of the form.
+The form component is the primary component of the system. It is what takes the form definition (json) and renders the
+form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
+prop with a url to the form definition, usually a form.io server. The other is to pass the `form` prop with the json
+definition and optionally a `url` prop with the location of the form.
 
 #### Props
 
@@ -101,6 +106,7 @@ You can respond to various events in the form. Simply pass in a prop with a func
 
 | Name            | Parameters                                                                                                                                    | Description                                                                                                                      |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `onAsyncSubmit` | `submission`: object                                                                                                                          | When the submit button is pressed and the submission has started. Use this event if you submit data to external service.         |
 | `onSubmit`      | `submission`: object                                                                                                                          | When the submit button is pressed and the submission has started. If `src` is not provided, this will be the final submit event. |
 | `onSubmitDone`  | `submission`: object                                                                                                                          | When the submission has successfully been made to the server. This will only fire if `src` is set.                               |
 | `onChange`      | `submission`: object, `submission.changed`: object of what changed, `submission.isValid`: boolean - if the submission passes validations.     | A value in the submission has changed.                                                                                           |
@@ -151,21 +157,35 @@ const form = {
 ReactDOM.render(
   <Form<MyFormData>
     form={form}
-    onSubmit={(submission) => {
-      console.log(submission);
+    onAsyncSubmit={(submission) => {
+      return httpClient.post("/path/to/external/service", { data: submission }).catch((er) => {
+        err.errors = [
+          {
+            message: "My custom message about this field",
+            type: "custom",
+            path: ["title"],
+            level: "error"
+          }
+        ];
+        throw error;
+      });
     }}
   />,
   document.getElementById("example")
 );
 ```
 
+> See [Form with error from server](https://formio.tsed.io/?path=/story/reactformio-form--trigger-error)
+
 ### FormBuilder
 
-The [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)>) class can be used
+The [FormBuilder](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)) class can be
+used
 to embed a form builder directly in your react application.
 Please note that you'll need to include the CSS for the form builder from formio.js as well.
 
-Please note that the [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)>) component
+Please note that the [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)>)
+component
 does not load and save from/to a url. You must handle the form definition loading and saving yourself or use
 the [FormEdit](https://formio.tsed.io/?path=/story/reactformio-formedit--sandbox) component.
 
@@ -200,15 +220,19 @@ ReactDOM.render(<FormBuilder form={{ display: "form" }} onChange={(schema) => co
 ### FormEdit
 
 The [FormEdit](https://formio.tsed.io/?path=/story/reactformio-formedit--sandbox) component wraps
-the [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)>) component and adds the title, display, name and path fields at the top along with a save button.
+the [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-formbuilder--sandbox)>) component and
+adds the title, display, name and path fields at the top along with a save button.
 
 #### Props
 
-| Name       | Type   | Default             | Description                                          |
-| ---------- | ------ | ------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
-| `form`     | object | {display: 'form' \  | 'wizard'}                                            | The form definition of the exiting form that is to be modified. |
-| `options`  | object | {}                  | The options to be passed to FormBuilder              |
-| `saveText` | string | ''                  | The string that will be displayed in the save-button |
+| Name                                                            | Type   | Default             | Description |
+| --------------------------------------------------------------- | ------ | ------------------- | ----------- | --------------------------------------------------------------- |
+| --------------------------------------------------------------- |
+| `form`                                                          | object | {display: 'form' \  | 'wizard'}   | The form definition of the exiting form that is to be modified. |
+
+|
+| `options` | object | {} | The options to be passed to FormBuilder |
+| `saveText` | string | '' | The string that will be displayed in the save-button |
 
 #### Event Props
 
@@ -218,7 +242,8 @@ the [FormBuilder](<[FormsTable](https://formio.tsed.io/?path=/story/reactformio-
 
 ### FormsTable
 
-The [FormsTable](https://formio.tsed.io/?path=/story/reactformio-formstable--sandbox) component can be used to render a list of forms with buttons to edit, view, delete, etc on each row.
+The [FormsTable](https://formio.tsed.io/?path=/story/reactformio-formstable--sandbox) component can be used to render a
+list of forms with buttons to edit, view, delete, etc on each row.
 
 #### Props
 
@@ -308,7 +333,8 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 ## Sponsors
 
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
+Support this project by becoming a sponsor. Your logo will show up here with a link to your
+website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
 
 ## License
 
@@ -316,8 +342,15 @@ The MIT License (MIT)
 
 Copyright (c) 2016 - 2021 Romain Lenzotti
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/components/__fixtures__/form.fixture.json

@@ -1966,6 +1966,29 @@
       "id": "em22wkd",
       "defaultValue": null
     },
+    {
+      "label": "Edit Grid",
+      "tableView": false,
+      "rowDrafts": false,
+      "key": "editGrid",
+      "type": "editgrid",
+      "displayAsTable": false,
+      "input": true,
+      "components": [
+        {
+          "label": "Currency",
+          "mask": false,
+          "spellcheck": true,
+          "tableView": true,
+          "currency": "USD",
+          "inputFormat": "plain",
+          "key": "currency",
+          "type": "currency",
+          "input": true,
+          "delimiter": true
+        }
+      ]
+    },
     {
       "type": "button",
       "label": "Submit",

package/src/components/form/form.component.spec.tsx

@@ -0,0 +1,56 @@
+import {render} from "@testing-library/react";
+import {screen} from "@testing-library/dom";
+import {Form} from "./form.component";
+
+async function createFixture(props: any = {}) {
+  const onSubmit = jest.fn();
+  const form = {
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
+      {
+        label: "First name",
+        "placeholder": "Fill first name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: ""
+      },
+      {
+        label: "Submit form",
+        showValidations: false,
+        tableView: false,
+        key: "submit",
+        type: "button",
+        input: true
+      }
+    ]
+  };
+
+  render(<Form {...props} form={form} onSubmit={onSubmit}/>);
+
+  return {onSubmit};
+}
+
+describe("Form", () => {
+  it("should render the Form", async () => {
+    await createFixture({
+      data: [],
+      model: "MyForm",
+      groups: ["creation"],
+      params: {
+        env: "prod"
+      },
+      isActive: false
+    });
+
+    expect(screen.getByTestId("formioContainer")).toBeInTheDocument();
+    expect(screen.getByText("First name")).toBeInTheDocument();
+  });
+});

package/src/components/form/form.component.tsx

@@ -14,10 +14,10 @@ export interface FormProps<Data = any> extends UseFormHookProps<Data> {
   className?: string;
 }
 
-export function Form(props: Partial<FormProps>) {
+export function Form<Data = any>(props: Partial<FormProps<Data>>) {
   const { element } = useForm(props);
 
-  return <div data-testid={"formioContainer" + (props.name || "")} ref={element} className={props.className} />;
+  return <div data-testid={`formioContainer${props.name || ""}`} ref={element} className={props.className} />;
 }
 
 Form.propTypes = {
@@ -47,7 +47,8 @@ Form.propTypes = {
     noAlerts: PropTypes.bool,
     i18n: PropTypes.any,
     template: PropTypes.string,
-    saveDraft: PropTypes.bool
+    saveDraft: PropTypes.bool,
+    hooks: PropTypes.any
   }),
   onPrevPage: PropTypes.func,
   onNextPage: PropTypes.func,
@@ -56,6 +57,7 @@ Form.propTypes = {
   onCustomEvent: PropTypes.func,
   onComponentChange: PropTypes.func,
   onSubmit: PropTypes.func,
+  onAsyncSubmit: PropTypes.func,
   onSubmitDone: PropTypes.func,
   onFormLoad: PropTypes.func,
   onError: PropTypes.func,

package/src/components/form/form.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Form } from "./form.component";
+import {Form} from "./form.component";
 import form from "../__fixtures__/form.fixture.json";
+import {Submission} from "../../interfaces";
 
 export default {
   title: "ReactFormio/Form",
@@ -10,22 +11,113 @@ export default {
       control: {
         type: "object"
       }
-    }
-  },
-  parameters: {}
+    },
+    onPrevPage: {action: "onPrevPage"},
+    onNextPage: {action: "onNextPage"},
+    onCancel: {action: "onCancel"},
+    onChange: {action: "onChange"},
+    onCustomEvent: {action: "onCustomEvent"},
+    onComponentChange: {action: "onComponentChange"},
+    onSubmit: {action: "onSubmit"},
+    onAsyncSubmit: {action: "onAsyncSubmit"},
+    onSubmitDone: {action: "onSubmitDone"},
+    onFormLoad: {action: "onFormLoad"},
+    onError: {action: "onError"},
+    onRender: {action: "onRender"},
+    onAttach: {action: "onAttach"},
+    onBuild: {action: "onBuild"},
+    onFocus: {action: "onFocus"},
+    onBlur: {action: "onBlur"},
+    onInitialized: {action: "onInitialized"},
+    onFormReady: {action: "onFormReady"}
+  }
 };
 
+function filter(args: any[]) {
+  return args
+    .map((item) => {
+      if (item && (item._form)) {
+        return "FormioInstance";
+      }
+
+      if (item && item.component) {
+        return ["Component", item.component.type, item.component.key].filter(Boolean).join(":");
+      }
+
+      if (item && item.changed) {
+        return `${item.changed.component.key}(${item.changed.value})`;
+      }
+
+      return item;
+    });
+}
+
+function wrap(args: any) {
+  return {
+    ...args,
+    onPrevPage: (...list: any[]) => {
+      return args.onPrevPage(...filter(list));
+    },
+    onNextPage: (...list: any[]) => {
+      return args.onNextPage(...filter(list));
+    },
+    onCancel: (...list: any[]) => {
+      return args.onCancel(...filter(list));
+    },
+    onChange: (...list: any[]) => {
+      return args.onChange(...filter(list));
+    },
+    onCustomEvent: (...list: any[]) => {
+      return args.onCustomEvent(...filter(list));
+    },
+    onComponentChange: (...list: any[]) => {
+      return args.onComponentChange(...filter(list));
+    },
+    onSubmit: (...list: any[]) => {
+      return args.onSubmit(...filter(list));
+    },
+    onAsyncSubmit: (...list: any[]) => {
+      return args.onAsyncSubmit(...filter(list));
+    },
+    onSubmitDone: (...list: any[]) => {
+      return args.onSubmitDone(...filter(list));
+    },
+    onFormLoad: (...list: any[]) => {
+      return args.onFormLoad(...filter(list));
+    },
+    onError: (...list: any[]) => {
+      return args.onError(...filter(list));
+    },
+    onRender: (...list: any[]) => {
+      return args.onRender(...filter(list));
+    },
+    onAttach: (...list: any[]) => {
+      return args.onAttach(...filter(list));
+    },
+    onBuild: (...list: any[]) => {
+      return args.onBuild(...filter(list));
+    },
+    onFocus: (...list: any[]) => {
+      return args.onFocus(...filter(list));
+    },
+    onBlur: (...list: any[]) => {
+      return args.onBlur(...filter(list));
+    },
+    onInitialized: (...list: any[]) => {
+      return args.onInitialized(...filter(list));
+    },
+    onFormReady: (...list: any[]) => {
+      return args.onFormReady(...filter(list));
+    }
+  };
+}
+
 export const Sandbox = (args: any) => {
-  delete args.onRender;
-  delete args.onComponentChange;
   return (
     <Form
-      {...args}
+      {...wrap(args)}
       form={args.form}
-      onFormReady={(formio) => {
-        console.log("ready", formio);
-      }}
-      options={{ template: "tailwind", iconset: "bx" }}
+      options={{template: "tailwind", iconset: "bx"}}
     />
   );
 };
@@ -33,3 +125,82 @@ export const Sandbox = (args: any) => {
 Sandbox.args = {
   form
 };
+
+export const TriggerError = (args: any) => {
+  const onAsyncSubmit = (submission: Submission) => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error("server error"));
+      }, 500);
+    }).catch((error) => {
+      error.errors = {
+        "message": "My custom message about this field",
+        "type": "custom",
+        "path": ["firstName"],
+        "level": "error"
+      };
+      throw error;
+    });
+  };
+
+  return (
+    <Form<any>
+      {...wrap(args)}
+      form={args.form}
+      onAsyncSubmit={onAsyncSubmit}
+    />
+  );
+};
+
+TriggerError.args = {
+  form: {
+    "type": "form",
+    "display": "form",
+    "tags": [],
+    "components": [
+      {
+        "label": "First name",
+        "widget": {
+          "type": "input"
+        },
+        "errorLabel": "",
+        "key": "firstName",
+        "inputType": "text",
+        "type": "textfield",
+        "id": "eqb1o4r",
+        "defaultValue": ""
+      },
+      {
+        "label": "Submit",
+        "showValidations": false,
+        "tableView": false,
+        "key": "submit",
+        "type": "button",
+        "input": true
+      }
+    ]
+  }
+};
+
+
+export const ReadOnly = (args: any) => {
+  return (
+    <Form
+      {...wrap(args)}
+      options={{template: "tailwind", iconset: "bx", readOnly: args.readOnly}}
+      form={args.form}
+      submission={{
+        data: {
+          editGrid: [
+            {currency: "EUR"}
+          ]
+        }
+      }}
+    />
+  );
+};
+
+ReadOnly.args = {
+  readonly: true,
+  form
+};

package/src/components/form/useForm.hook.ts

@@ -1,10 +1,10 @@
-import { ExtendedComponentSchema, Form } from "formiojs";
-import { get } from "lodash";
+import {ExtendedComponentSchema, Form} from "formiojs";
+import {get} from "lodash";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
-import { useEffect, useRef } from "react";
-import { callLast } from "../../utils/callLast";
-import { FormOptions, FormSchema, Submission } from "../../interfaces";
+import {useEffect, useRef} from "react";
+import {callLast} from "../../utils/callLast";
+import {FormOptions, FormSchema, Submission} from "../../interfaces";
 
 export interface ChangedSubmission<T = any> extends Submission<T> {
   changed: any;
@@ -34,6 +34,8 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
    * Data submission
    */
   submission?: Submission<Data>;
+
+  /// events
   onPrevPage?: (obj: FormPageChangeProps<Data>) => void;
   onNextPage?: (obj: FormPageChangeProps<Data>) => void;
   onCancel?: Function;
@@ -41,6 +43,7 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onCustomEvent?: (obj: { type: string; event: string; component: ExtendedComponentSchema; data: any }) => void;
   onComponentChange?: (component: ExtendedComponentSchema) => void;
   onSubmit?: (submission: Submission<Data>) => void;
+  onAsyncSubmit?: (submission: Submission<Data>) => Promise<any>;
   onSubmitDone?: (submission: Submission<Data>) => void;
   onFormLoad?: Function;
   onError?: (errors: any) => void;
@@ -51,15 +54,50 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onBlur?: Function;
   onInitialized?: Function;
   onFormReady?: (formio: Form) => void;
-  formioform?: any;
+}
+
+function useDebounce(event: string, callback: any, events: Map<string, any>) {
+  useEffect(() => {
+    callback && events.set(event, callLast(callback, 100));
+  }, [callback, event, events]);
+}
+
+function useEvents(funcs: any) {
+  const events = useRef<Map<string, any>>(new Map());
+
+  const hasEvent = (event: string) => {
+    return funcs.hasOwnProperty(event) && typeof funcs[event] === "function"
+  }
+  const emit = (event: string, ...args: any[]) => {
+    if (hasEvent(event)) {
+      const fn = events.current.has(event) ? events.current.get(event) : funcs[event]
+      return fn(...args);
+    }
+  };
+
+  useDebounce("onChange", funcs.onChange, events.current);
+
+  return {events, emit, hasEvent};
 }
 
 export function useForm<Data = any>(props: UseFormHookProps<Data>) {
-  const { src, form, options = {}, submission, url, ...funcs } = props;
+  const {src, form, options = {}, submission, url, ...funcs} = props;
   const element = useRef<any>();
   const isLoaded = useRef<boolean>();
   const instance = useRef<Form>();
-  const events = useRef<Map<string, any>>(new Map());
+  const {emit, hasEvent} = useEvents(funcs);
+
+  async function customValidation(submission: Submission, callback: (err: Error | null) => void) {
+    if (hasEvent("onAsyncSubmit")) {
+      try {
+        await emit("onAsyncSubmit", submission, instance.current);
+      } catch (err) {
+        callback(err?.errors || err);
+      }
+    } else {
+      callback(null);
+    }
+  }
 
   const createWebForm = (srcOrForm: any, options: any) => {
     options = Object.assign({}, options);
@@ -67,6 +105,11 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
 
     if (!instance.current) {
       isLoaded.current = false;
+      options.hooks = {
+        ...(options.hooks || {}),
+        customValidation: options?.hooks?.customValidation || customValidation
+      };
+
       instance.current = new Form(element.current, srcOrForm, options);
 
       instance.current.onAny((event: string, ...args: any[]): void => {
@@ -75,25 +118,15 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
         }
 
         if (event.startsWith("formio.")) {
-          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
+          const eventName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
 
-          if (funcName === "onChange") {
+          if (eventName === "onChange") {
             if (isEqual(get(submission, "data"), args[0].data)) {
               return;
             }
           }
 
-          if (
-            // eslint-disable-next-line no-prototype-builtins
-            props.hasOwnProperty(funcName) &&
-            typeof funcs[funcName] === "function"
-          ) {
-            if (!events.current.has(funcName)) {
-              const fn = callLast(funcs[funcName], 100);
-              events.current.set(funcName, fn);
-            }
-            events.current.get(funcName)(...args);
-          }
+          emit(eventName, ...args, instance.current)
         }
       });
 
@@ -152,14 +185,6 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
     };
   }, []);
 
-  useEffect(() => {
-    props.onSubmit && events.current.set("onSubmit", props.onSubmit);
-  }, [props.onSubmit, events]);
-
-  useEffect(() => {
-    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
-  }, [props.onSubmitDone, events]);
-
   return {
     element
   };

package/src/components/form-access/formAccess.component.tsx

@@ -51,7 +51,7 @@ function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormA
     submissions,
     onChange,
     onSubmit: () => {
-      onSubmit(submissionsToDataAccess(formDefinition, submissions));
+      onSubmit && onSubmit(submissionsToDataAccess(formDefinition, submissions));
     }
   };
 }