@tsed/react-formio 1.13.1 → 1.13.4

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

@@ -1,7 +1,8 @@
-import React from "react";
-import {Form} from "./form.component";
+import React, { useState } from "react";
+
+import { Submission } from "../../interfaces";
 import form from "../__fixtures__/form.fixture.json";
-import {Submission} from "../../interfaces";
+import { Form } from "./form.component";
 
 export default {
   title: "ReactFormio/Form",
@@ -11,88 +12,236 @@ 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 {...wrap(args)} form={args.form} options={{ template: "tailwind", iconset: "bx" }} />;
+};
+
+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
-      {...args}
+      {...wrap(args)}
+      options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
       form={args.form}
-      onFormReady={(formio) => {
-        console.log("ready", formio);
+      submission={{
+        data: {
+          editGrid: [{ currency: "EUR" }]
+        }
       }}
-      options={{template: "tailwind", iconset: "bx"}}
     />
   );
 };
 
-Sandbox.args = {
+ReadOnly.args = {
+  readonly: true,
   form
 };
 
-export const TriggerError = (args: any) => {
-  delete args.onRender;
-  delete args.onComponentChange;
+export const OnChange = (args: any) => {
+  const [data, setForm] = useState<any>(() => {});
+  const props = wrap(args);
 
   return (
     <Form
-      {...args}
+      {...props}
+      options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
       form={args.form}
-      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
-        });
-      }}
-      options={{
-        hooks: {
-          template: "tailwind",
-          iconset: "bx"
-        }
+      submission={{ data }}
+      onChange={(changedSubmission) => {
+        setForm(changedSubmission.data);
       }}
     />
   );
 };
 
-TriggerError.args = {
+OnChange.args = {
   form: {
-    "type": "form",
-    "display": "form",
-    "tags": [],
-    "components": [
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
       {
-        "label": "First name",
-        "widget": {
-          "type": "input"
+        label: "First name",
+        widget: {
+          type: "input"
         },
-        "errorLabel": "",
-        "key": "firstName",
-        "inputType": "text",
-        "type": "textfield",
-        "id": "eqb1o4r",
-        "defaultValue": ""
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: "",
+        validate: {
+          required: true
+        }
       },
       {
-        "label": "Submit",
-        "showValidations": false,
-        "tableView": false,
-        "key": "submit",
-        "type": "button",
-        "input": 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

@@ -3,11 +3,16 @@ 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 { callLast } from "../../utils/callLast";
 
 export interface ChangedSubmission<T = any> extends Submission<T> {
-  changed: any;
+  changed: {
+    component: ExtendedComponentSchema;
+    instance: Form;
+    value: any;
+  } & Record<string, any>;
   isValid: boolean;
 }
 
@@ -34,6 +39,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,7 +48,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<void>;
+  onAsyncSubmit?: (submission: Submission<Data>) => Promise<any>;
   onSubmitDone?: (submission: Submission<Data>) => void;
   onFormLoad?: Function;
   onError?: (errors: any) => void;
@@ -52,7 +59,53 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onBlur?: Function;
   onInitialized?: Function;
   onFormReady?: (formio: Form) => void;
-  formioform?: any;
+}
+
+function useEvent(event: string, callback: any, events: Map<string, any>) {
+  useEffect(() => {
+    if (callback) {
+      // if (event === "onChange") {
+      //   callback = callLast(callback, 200);
+      // }
+      events.set(event, callback);
+    }
+  }, [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);
+    }
+  };
+
+  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 };
 }
 
 export function useForm<Data = any>(props: UseFormHookProps<Data>) {
@@ -60,12 +113,12 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
   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 (events.current.has("onAsyncSubmit")) {
+    if (hasEvent("onAsyncSubmit")) {
       try {
-        await events.current.get("onAsyncSubmit")(submission);
+        await emit("onAsyncSubmit", submission, instance.current);
       } catch (err) {
         callback(err?.errors || err);
       }
@@ -93,27 +146,13 @@ 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 (isEqual(get(submission, "data"), args[0].data)) {
-              return;
-            }
+          if (eventName === "onChange" && !args[0].changed) {
+            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);
-            }
-
-            instance.current.instance.setAlert("success", "");
-            events.current.get(funcName)(...args, instance.current);
-          }
+          emit(eventName, ...args, instance.current);
         }
       });
 
@@ -134,6 +173,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));
       });
     }
@@ -172,18 +215,6 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
     };
   }, []);
 
-  useEffect(() => {
-    props.onSubmit && events.current.set("onSubmit", props.onSubmit);
-  }, [props.onSubmit, events]);
-
-  useEffect(() => {
-    props.onAsyncSubmit && events.current.set("onAsyncSubmit", props.onAsyncSubmit);
-  }, [props.onAsyncSubmit, events]);
-
-  useEffect(() => {
-    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
-  }, [props.onSubmitDone, events]);
-
   return {
     element
   };

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

@@ -1,8 +1,10 @@
 import PropTypes from "prop-types";
 import React, { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+
 import { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
 import { Form } from "../form/form.component";
+import { ChangedSubmission } from "../form/useForm.hook";
 import {
   AccessRoles,
   dataAccessToSubmissions,
@@ -13,7 +15,6 @@ import {
   submissionsToDataAccess,
   updateSubmissions
 } from "./formAccess.utils";
-import { ChangedSubmission } from "../form/useForm.hook";
 
 export interface FormAccessProps {
   form: Partial<FormSchema>;
@@ -51,7 +52,7 @@ function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormA
     submissions,
     onChange,
     onSubmit: () => {
-      onSubmit(submissionsToDataAccess(formDefinition, submissions));
+      onSubmit && onSubmit(submissionsToDataAccess(formDefinition, submissions));
     }
   };
 }

package/src/components/form-access/formAccess.schema.ts

@@ -1,4 +1,5 @@
 import { ExtendedComponentSchema } from "formiojs";
+
 import { FormSchema } from "../../interfaces/FormSchema";
 
 export function getRoleComponent({ label, key, description, choices, data }: any): ExtendedComponentSchema {

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

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FormAccess } from "./formAccess.component";
 
 export default {

package/src/components/form-access/formAccess.utils.ts

@@ -2,6 +2,7 @@ import { ExtendedComponentSchema } from "formiojs";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
+
 import { FormSchema, Submission } from "../../interfaces";
 import { RoleSchema } from "../../interfaces/RoleSchema";
 import { getAccessPermissionForm, getSubmissionPermissionForm } from "./formAccess.schema";
@@ -31,19 +32,19 @@ export type SubmissionAccess = {
 function rolesToChoices(roles: RoleSchema[]): Choice[] {
   return Object.values(roles).map((role) => {
     return {
-      label: role.title,
-      value: role._id
+      label: role.title || "",
+      value: role._id || ""
     };
   });
 }
 
-function accessToHash(keys: string[], access: Access[] = []): AccessRoles {
+function accessToHash(keys: (string | undefined)[] | undefined, access: Access[] = []): AccessRoles {
   const hash = Object.values(access).reduce((o: any, role: any) => {
     o[role.type] = role.roles;
     return o;
   }, {});
 
-  return keys.reduce((data, key) => {
+  return ((keys || []).filter(Boolean) as any[]).reduce((data, key: string) => {
     return {
       ...data,
       [key]: hash[key] || []
@@ -100,7 +101,7 @@ export function submissionsToDataAccess(form: Partial<FormSchema>, submissions:
 }
 
 export function shouldUpdate(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess) {
-  return !isEqual(submission.data, submissions[type].data);
+  return !isEqual(submission.data, (submissions as any)[type].data);
 }
 
 export function updateSubmissions(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess, cb: Function = noop) {

package/src/components/form-action/formAction.component.tsx

@@ -1,5 +1,6 @@
 import FormioUtils from "formiojs/utils";
-import React, { PropsWithChildren, ReactElement, useMemo } from "react";
+import React, { PropsWithChildren, ReactElement } from "react";
+
 import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
 import { Form } from "../form/form.component";
 
@@ -38,12 +39,12 @@ export interface FormActionProps {
 }
 
 export function FormAction({ actionInfo, children, onSubmit, options, ...props }: PropsWithChildren<FormActionProps>): ReactElement {
-  const { form, submission } = useMemo(() => {
-    const submission = mapData(props.submission || {}, actionInfo.defaults);
+  const { form, submission } = (() => {
+    const submission = mapData(props.submission || {}, actionInfo.defaults!);
     const form = mapSettingsForm(actionInfo.settingsForm);
 
     return { form, submission: { data: submission } };
-  }, [props.submission, actionInfo.settingsForm]);
+  })();
 
   return (
     <div>