@tsed/react-formio 1.13.1 → 1.13.2

package/dist/stores/auth/auth.selectors.d.ts

@@ -1,6 +1,6 @@
 import { RoleSchema, Submission } from "../../interfaces";
 import { AuthState } from "./auth.reducers";
 export declare const selectAuth: (state: any) => AuthState<any>;
-export declare const selectUser: <User = any>(state: any) => Submission<User>;
+export declare const selectUser: <User = any>(state: any) => Submission<User> | null;
 export declare const selectRoles: (state: any) => Record<string, RoleSchema>;
 export declare const selectIsAuthenticated: (state: any) => boolean;

package/jest.config.js

@@ -1 +1 @@
-module.exports = require("@tsed/config/jest.config")("react-formio");
+module.exports = require("@tsed/config/jest/jest.web.config.js");

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "scripts": {
-    "test": "cross-env CI=1 yarn craco test --coverage",
+    "test": "cross-env NODE_ENV=test jest --coverage",
     "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
     "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.13.1",
+    "@tsed/redux-utils": "1.13.2",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -26,8 +26,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.13.1",
-    "@tsed/tailwind-formio": "1.13.1"
+    "@tsed/tailwind": "1.13.2",
+    "@tsed/tailwind-formio": "1.13.2"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/__fixtures__/form.fixture.json

@@ -1966,6 +1966,29 @@
       "id": "em22wkd",
       "defaultValue": null
     },
+    {
+      "label": "Edit Grid",
+      "tableView": false,
+      "rowDrafts": false,
+      "key": "editGrid",
+      "type": "editgrid",
+      "displayAsTable": false,
+      "input": true,
+      "components": [
+        {
+          "label": "Currency",
+          "mask": false,
+          "spellcheck": true,
+          "tableView": true,
+          "currency": "USD",
+          "inputFormat": "plain",
+          "key": "currency",
+          "type": "currency",
+          "input": true,
+          "delimiter": true
+        }
+      ]
+    },
     {
       "type": "button",
       "label": "Submit",

package/src/components/form/form.component.spec.tsx

@@ -0,0 +1,56 @@
+import {render} from "@testing-library/react";
+import {screen} from "@testing-library/dom";
+import {Form} from "./form.component";
+
+async function createFixture(props: any = {}) {
+  const onSubmit = jest.fn();
+  const form = {
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
+      {
+        label: "First name",
+        "placeholder": "Fill first name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: ""
+      },
+      {
+        label: "Submit form",
+        showValidations: false,
+        tableView: false,
+        key: "submit",
+        type: "button",
+        input: true
+      }
+    ]
+  };
+
+  render(<Form {...props} form={form} onSubmit={onSubmit}/>);
+
+  return {onSubmit};
+}
+
+describe("Form", () => {
+  it("should render the Form", async () => {
+    await createFixture({
+      data: [],
+      model: "MyForm",
+      groups: ["creation"],
+      params: {
+        env: "prod"
+      },
+      isActive: false
+    });
+
+    expect(screen.getByTestId("formioContainer")).toBeInTheDocument();
+    expect(screen.getByText("First name")).toBeInTheDocument();
+  });
+});

package/src/components/form/form.component.tsx

@@ -14,10 +14,10 @@ export interface FormProps<Data = any> extends UseFormHookProps<Data> {
   className?: string;
 }
 
-export function Form(props: Partial<FormProps>) {
+export function Form<Data = any>(props: Partial<FormProps<Data>>) {
   const { element } = useForm(props);
 
-  return <div data-testid={"formioContainer" + (props.name || "")} ref={element} className={props.className} />;
+  return <div data-testid={`formioContainer${props.name || ""}`} ref={element} className={props.className} />;
 }
 
 Form.propTypes = {

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

@@ -11,21 +11,112 @@ 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
-      {...args}
+      {...wrap(args)}
       form={args.form}
-      onFormReady={(formio) => {
-        console.log("ready", formio);
-      }}
       options={{template: "tailwind", iconset: "bx"}}
     />
   );
@@ -36,34 +127,27 @@ Sandbox.args = {
 };
 
 export const TriggerError = (args: any) => {
-  delete args.onRender;
-  delete args.onComponentChange;
+  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
-      {...args}
+    <Form<any>
+      {...wrap(args)}
       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"
-        }
-      }}
+      onAsyncSubmit={onAsyncSubmit}
     />
   );
 };
@@ -97,3 +181,26 @@ TriggerError.args = {
     ]
   }
 };
+
+
+export const ReadOnly = (args: any) => {
+  return (
+    <Form
+      {...wrap(args)}
+      options={{template: "tailwind", iconset: "bx", readOnly: args.readOnly}}
+      form={args.form}
+      submission={{
+        data: {
+          editGrid: [
+            {currency: "EUR"}
+          ]
+        }
+      }}
+    />
+  );
+};
+
+ReadOnly.args = {
+  readonly: true,
+  form
+};

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

@@ -1,10 +1,10 @@
-import { ExtendedComponentSchema, Form } from "formiojs";
-import { get } from "lodash";
+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 { callLast } from "../../utils/callLast";
-import { FormOptions, FormSchema, Submission } from "../../interfaces";
+import {useEffect, useRef} from "react";
+import {callLast} from "../../utils/callLast";
+import {FormOptions, FormSchema, Submission} from "../../interfaces";
 
 export interface ChangedSubmission<T = any> extends Submission<T> {
   changed: any;
@@ -34,6 +34,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 +43,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,20 +54,43 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onBlur?: Function;
   onInitialized?: Function;
   onFormReady?: (formio: Form) => void;
-  formioform?: any;
+}
+
+function useDebounce(event: string, callback: any, events: Map<string, any>) {
+  useEffect(() => {
+    callback && events.set(event, callLast(callback, 100));
+  }, [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);
+    }
+  };
+
+  useDebounce("onChange", funcs.onChange, 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 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 +118,15 @@ 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 (eventName === "onChange") {
             if (isEqual(get(submission, "data"), args[0].data)) {
               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)
         }
       });
 
@@ -172,18 +185,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

@@ -51,7 +51,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.utils.ts

@@ -1,10 +1,10 @@
-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;
@@ -31,19 +31,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] || []
@@ -69,8 +69,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 +79,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: {
@@ -100,14 +100,14 @@ 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) {
   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

@@ -39,7 +39,7 @@ 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 submission = mapData(props.submission || {}, actionInfo.defaults!);
     const form = mapSettingsForm(actionInfo.settingsForm);
 
     return { form, submission: { data: submission } };

package/src/components/form-builder/formBuilder.component.tsx

@@ -175,7 +175,7 @@ export class FormBuilder extends React.Component<FormBuilderProps, any> {
 
   whenComponentsChange(components: ComponentSchema[]) {
     this.setState({ components }, () => {
-      this.props?.onChange(components);
+      this.props?.onChange && this.props.onChange(components);
     });
   }