@tsed/react-formio 1.13.2 → 1.13.5

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

@@ -1,13 +1,16 @@
-import {ExtendedComponentSchema, Form} from "formiojs";
-import {get} from "lodash";
+import { ExtendedComponentSchema, Form } from "formiojs";
 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 { 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;
 }
 
@@ -53,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]);
 }
 
@@ -66,26 +71,44 @@ function useEvents(funcs: any) {
   const events = useRef<Map<string, any>>(new Map());
 
   const hasEvent = (event: string) => {
-    return funcs.hasOwnProperty(event) && typeof funcs[event] === "function"
-  }
+    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]
+      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};
+  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>) {
-  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 {emit, hasEvent} = useEvents(funcs);
+  const { emit, hasEvent } = useEvents(funcs);
 
   async function customValidation(submission: Submission, callback: (err: Error | null) => void) {
     if (hasEvent("onAsyncSubmit")) {
@@ -120,13 +143,11 @@ 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)
+          emit(eventName, ...args, instance.current);
         }
       });
 
@@ -147,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/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>;

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

@@ -1,10 +1,11 @@
-import {ExtendedComponentSchema} from "formiojs";
+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";
+
+import { FormSchema, Submission } from "../../interfaces";
+import { RoleSchema } from "../../interfaces/RoleSchema";
+import { getAccessPermissionForm, getSubmissionPermissionForm } from "./formAccess.schema";
 
 export interface Choice {
   label: string;
@@ -69,8 +70,8 @@ function hashToAccess(data: AccessRoles) {
 
 export function getFormAccess(roles: RoleSchema[]): FormAccessSchema {
   const choices = rolesToChoices(roles);
-  const access = getAccessPermissionForm({choices});
-  const submissionAccess = getSubmissionPermissionForm({choices});
+  const access = getAccessPermissionForm({ choices });
+  const submissionAccess = getSubmissionPermissionForm({ choices });
 
   return {
     access,
@@ -79,7 +80,7 @@ export function getFormAccess(roles: RoleSchema[]): FormAccessSchema {
 }
 
 export function dataAccessToSubmissions(form: Partial<FormSchema>, formAccess: FormAccessSchema): SubmissionAccess {
-  const getKeys = (components: ExtendedComponentSchema[]) => components.map(({key}) => key);
+  const getKeys = (components: ExtendedComponentSchema[]) => components.map(({ key }) => key);
 
   return {
     access: {
@@ -107,7 +108,7 @@ export function updateSubmissions(type: string, submission: Submission<AccessRol
   if (shouldUpdate(type, submission, submissions)) {
     submissions = {
       ...submissions,
-      [type]: {data: submission.data}
+      [type]: { data: submission.data }
     };
     cb(submissions);
   }

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 { 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>