@tsed/react-formio 1.13.3 → 1.13.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.13.3",
+  "version": "1.13.6",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -10,11 +10,11 @@
     "lint:fix": "yarn lint --fix",
     "test": "cross-env NODE_ENV=test jest --coverage",
     "test:coverage:update": "write-coverage",
-    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
-    "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement"
+    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx",
+    "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.13.3",
+    "@tsed/redux-utils": "1.13.6",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -29,8 +29,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.13.3",
-    "@tsed/tailwind-formio": "1.13.3"
+    "@tsed/tailwind": "1.13.6",
+    "@tsed/tailwind-formio": "1.13.6"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Submission } from "../../interfaces";
 import form from "../__fixtures__/form.fixture.json";
@@ -189,3 +189,60 @@ ReadOnly.args = {
   readonly: true,
   form
 };
+
+export const OnChange = (args: any) => {
+  const [data, setForm] = useState<any>(() => {});
+  const props = wrap(args);
+
+  return (
+    <Form
+      {...props}
+      options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
+      form={args.form}
+      submission={{ data }}
+      onChange={(changedSubmission) => {
+        setForm(changedSubmission.data);
+      }}
+    />
+  );
+};
+
+OnChange.args = {
+  form: {
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
+      {
+        label: "First name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: "",
+        validate: {
+          required: true
+        }
+      },
+      {
+        label: "Last name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "lastName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: "",
+        validate: {
+          required: true
+        }
+      }
+    ]
+  }
+};

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

@@ -1,14 +1,16 @@
 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 { FormOptions, FormSchema, Submission } from "../../interfaces";
-import { callLast } from "../../utils/callLast";
 
 export interface ChangedSubmission<T = any> extends Submission<T> {
-  changed: any;
+  changed: {
+    component: ExtendedComponentSchema;
+    instance: any;
+    value: any;
+  } & Record<string, any>;
   isValid: boolean;
 }
 
@@ -54,12 +56,14 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onFocus?: Function;
   onBlur?: Function;
   onInitialized?: Function;
-  onFormReady?: (formio: Form) => void;
+  onFormReady?: (formio: any) => void;
 }
 
-function useDebounce(event: string, callback: any, events: Map<string, any>) {
+function useEvent(event: string, callback: any, events: Map<string, any>) {
   useEffect(() => {
-    callback && events.set(event, callLast(callback, 100));
+    if (callback) {
+      events.set(event, callback);
+    }
   }, [callback, event, events]);
 }
 
@@ -69,6 +73,7 @@ function useEvents(funcs: any) {
   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];
@@ -76,7 +81,24 @@ function useEvents(funcs: any) {
     }
   };
 
-  useDebounce("onChange", funcs.onChange, events.current);
+  useEvent("onBlur", funcs["onBlur"], events.current);
+  useEvent("onPrevPage", funcs["onPrevPage"], events.current);
+  useEvent("onNextPage", funcs["onNextPage"], events.current);
+  useEvent("onCancel", funcs["onCancel"], events.current);
+  useEvent("onChange", funcs["onChange"], events.current);
+  useEvent("onCustomEvent", funcs["onCustomEvent"], events.current);
+  useEvent("onComponentChange", funcs["onComponentChange"], events.current);
+  useEvent("onSubmit", funcs["onSubmit"], events.current);
+  useEvent("onAsyncSubmit", funcs["onAsyncSubmit"], events.current);
+  useEvent("onSubmitDone", funcs["onSubmitDone"], events.current);
+  useEvent("onFormLoad", funcs["onFormLoad"], events.current);
+  useEvent("onError", funcs["onError"], events.current);
+  useEvent("onRender", funcs["onRender"], events.current);
+  useEvent("onAttach", funcs["onAttach"], events.current);
+  useEvent("onBuild", funcs["onBuild"], events.current);
+  useEvent("onFocus", funcs["onFocus"], events.current);
+  useEvent("onBlur", funcs["onBlur"], events.current);
+  useEvent("onInitialized", funcs["onInitialized"], events.current);
 
   return { events, emit, hasEvent };
 }
@@ -121,10 +143,8 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
         if (event.startsWith("formio.")) {
           const eventName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
 
-          if (eventName === "onChange") {
-            if (isEqual(get(submission, "data"), args[0].data)) {
-              return;
-            }
+          if (eventName === "onChange" && !args[0].changed) {
+            return;
           }
 
           emit(eventName, ...args, instance.current);
@@ -148,6 +168,10 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
   useEffect(() => {
     if (instance.current) {
       instance.current.ready.then((formio: any) => {
+        if (isEqual(formio.submission.data, submission?.data)) {
+          return;
+        }
+
         submission && (formio.submission = cloneDeep(submission));
       });
     }

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./actions-table/actionsTable.component";
 export * from "./alert/alert.component";
 export * from "./card/card.component";
 export * from "./form/form.component";
+export * from "./form/useForm.hook";
 export * from "./form-access/formAccess.component";
 export * from "./form-action/formAction.component";
 export * from "./form-builder/formBuilder.component";
@@ -9,6 +10,7 @@ export * from "./form-control/formControl.component";
 export * from "./form-edit/formCtas.component";
 export * from "./form-edit/formEdit.component";
 export * from "./form-edit/formParameters.component";
+export * from "./form-edit/useFormEdit.hook";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
 export * from "./input-tags/inputTags.component";

package/src/components/table/components/defaultCell.component.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element {
   if (value === undefined) {
-    return <></>;
+    return <span></span>;
   }
 
   const rendered = render(value);

package/src/index.ts

@@ -2,7 +2,6 @@ import Webform from "formiojs/Webform";
 import WebformBuilder from "formiojs/WebformBuilder";
 import Wizard from "formiojs/Wizard";
 import WizardBuilder from "formiojs/WizardBuilder";
-
 export {
   Webform,
   WebformBuilder,