@tsed/react-formio 1.13.3 → 1.13.6

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

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import { ExtendedComponentSchema, Form } from "formiojs";
+import { ExtendedComponentSchema } from "formiojs";
 import { FormOptions, FormSchema, Submission } from "../../interfaces";
 export interface ChangedSubmission<T = any> extends Submission<T> {
-    changed: any;
+    changed: {
+        component: ExtendedComponentSchema;
+        instance: any;
+        value: any;
+    } & Record<string, any>;
     isValid: boolean;
 }
 export interface FormPageChangeProps<Data = any> {
@@ -49,7 +53,7 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
     onFocus?: Function;
     onBlur?: Function;
     onInitialized?: Function;
-    onFormReady?: (formio: Form) => void;
+    onFormReady?: (formio: any) => void;
 }
 export declare function useForm<Data = any>(props: UseFormHookProps<Data>): {
     element: import("react").MutableRefObject<any>;

package/dist/components/index.d.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/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);
 
@@ -620,7 +620,7 @@ function DefaultOperationButton(props) {
     onClick: stopPropagationWrapper(function () {
       return onClick(action);
     })
-  }, icon ? /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement("i", {
+  }, icon ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("i", {
     className: iconClass(undefined, icon)
   }), " ", title && " ") : null, title && /*#__PURE__*/React__default['default'].createElement("span", {
     className: icon && title ? "ml-1" : ""
@@ -1004,9 +1004,11 @@ 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) {
+      events.set(event, callback);
+    }
   }, [callback, event, events]);
 }
 
@@ -1024,7 +1026,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 +1112,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 +1136,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));
       });
     }
@@ -1504,7 +1525,7 @@ function NamedFormAccess(_ref2) {
       isValid = _useState2[0],
       setIsValid = _useState2[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement(Form, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Form, {
     name: name,
     form: form[name],
     submission: submissions[name],
@@ -8116,7 +8137,7 @@ function DefaultCell(_ref) {
   } : _ref$render;
 
   if (value === undefined) {
-    return /*#__PURE__*/React__default['default'].createElement(Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement("span", null);
   }
 
   var rendered = render(value);
@@ -8189,7 +8210,7 @@ function SliderColumnFilter(_ref) {
       min = _React$useMemo[0],
       max = _React$useMemo[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(Fragment, null, /*#__PURE__*/React__default['default'].createElement("input", {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "range",
     min: min,
     max: max,
@@ -9957,6 +9978,8 @@ exports.setUser = setUser;
 exports.submissionAccessUser = submissionAccessUser;
 exports.submissionReducer = submissionReducer;
 exports.submissionsReducer = submissionsReducer;
+exports.useForm = useForm;
+exports.useFormEdit = useFormEdit;
 exports.useModal = useModal;
 exports.useOperations = useOperations;
 exports.useTooltip = useTooltip;