@tsed/react-formio 1.13.3 → 1.13.4

package/dist/components/form/form.stories.d.ts

@@ -6417,3 +6417,28 @@ export declare const ReadOnly: {
         };
     };
 };
+export declare const OnChange: {
+    (args: any): JSX.Element;
+    args: {
+        form: {
+            type: string;
+            display: string;
+            tags: never[];
+            components: {
+                label: string;
+                widget: {
+                    type: string;
+                };
+                errorLabel: string;
+                key: string;
+                inputType: string;
+                type: string;
+                id: string;
+                defaultValue: string;
+                validate: {
+                    required: boolean;
+                };
+            }[];
+        };
+    };
+};

package/dist/components/form/useForm.hook.d.ts

@@ -2,7 +2,11 @@
 import { ExtendedComponentSchema, Form } from "formiojs";
 import { FormOptions, FormSchema, Submission } from "../../interfaces";
 export interface ChangedSubmission<T = any> extends Submission<T> {
-    changed: any;
+    changed: {
+        component: ExtendedComponentSchema;
+        instance: Form;
+        value: any;
+    } & Record<string, any>;
     isValid: boolean;
 }
 export interface FormPageChangeProps<Data = any> {

package/dist/index.js

@@ -9,7 +9,6 @@ var Choices = require('choices.js');
 var PropTypes = require('prop-types');
 var reactTable = require('react-table');
 var AllComponents = require('formiojs/components');
-var noop$1 = require('lodash');
 var cloneDeep = require('lodash/cloneDeep');
 var isEqual = require('lodash/isEqual');
 var FormioUtils = require('formiojs/utils');
@@ -18,6 +17,7 @@ var FormioFormBuilder = require('formiojs/FormBuilder');
 var Tooltip = require('tooltip.js');
 var uniq = require('lodash/uniq');
 var camelCase = require('lodash/camelCase');
+var noop$1 = require('lodash');
 var ReactDOM = require('react-dom');
 var reduxUtils = require('@tsed/redux-utils');
 var get = require('lodash/get');
@@ -33,7 +33,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Choices__default = /*#__PURE__*/_interopDefaultLegacy(Choices);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var AllComponents__default = /*#__PURE__*/_interopDefaultLegacy(AllComponents);
-var noop__default$1 = /*#__PURE__*/_interopDefaultLegacy(noop$1);
 var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var FormioUtils__default = /*#__PURE__*/_interopDefaultLegacy(FormioUtils);
@@ -42,6 +41,7 @@ var FormioFormBuilder__default = /*#__PURE__*/_interopDefaultLegacy(FormioFormBu
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
 var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
+var noop__default$1 = /*#__PURE__*/_interopDefaultLegacy(noop$1);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 
@@ -1004,9 +1004,14 @@ function _catch(body, recover) {
   return result;
 }
 
-function useDebounce(event, callback, events) {
+function useEvent(event, callback, events) {
   React.useEffect(function () {
-    callback && events.set(event, callLast(callback, 100));
+    if (callback) {
+      // if (event === "onChange") {
+      //   callback = callLast(callback, 200);
+      // }
+      events.set(event, callback);
+    }
   }, [callback, event, events]);
 }
 
@@ -1024,7 +1029,24 @@ function useEvents(funcs) {
     }
   };
 
-  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: events,
     emit: emit,
@@ -1093,10 +1115,8 @@ function useForm(props) {
         if (event.startsWith("formio.")) {
           var eventName = "on" + event.charAt(7).toUpperCase() + event.slice(8);
 
-          if (eventName === "onChange") {
-            if (isEqual__default['default'](noop$1.get(submission, "data"), args[0].data)) {
-              return;
-            }
+          if (eventName === "onChange" && !args[0].changed) {
+            return;
           }
 
           emit.apply(void 0, [eventName].concat(args, [instance.current]));
@@ -1119,6 +1139,10 @@ function useForm(props) {
   React.useEffect(function () {
     if (instance.current) {
       instance.current.ready.then(function (formio) {
+        if (isEqual__default['default'](formio.submission.data, submission == null ? void 0 : submission.data)) {
+          return;
+        }
+
         submission && (formio.submission = cloneDeep__default['default'](submission));
       });
     }