@tsed/react-formio 1.11.0 → 1.12.0

package/src/components/card/card.component.tsx

@@ -2,15 +2,12 @@ import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 
 export interface CardProps {
+  children: React.ReactNode;
   label: string;
   className?: string;
 }
 
-export function Card({
-  children,
-  label,
-  className
-}: PropsWithChildren<CardProps>) {
+export function Card({ children, label, className }: PropsWithChildren<CardProps>) {
   return (
     <div className={classnames("card", className)}>
       <div className={"card-header "}>

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

@@ -17,13 +17,7 @@ export interface FormProps<Data = any> extends UseFormHookProps<Data> {
 export function Form(props: Partial<FormProps>) {
   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/useForm.hook.ts

@@ -38,12 +38,7 @@ export interface UseFormHookProps<Data = any> extends Record<string, any> {
   onNextPage?: (obj: FormPageChangeProps<Data>) => void;
   onCancel?: Function;
   onChange?: (submission: ChangedSubmission) => void;
-  onCustomEvent?: (obj: {
-    type: string;
-    event: string;
-    component: ExtendedComponentSchema;
-    data: any;
-  }) => void;
+  onCustomEvent?: (obj: { type: string; event: string; component: ExtendedComponentSchema; data: any }) => void;
   onComponentChange?: (component: ExtendedComponentSchema) => void;
   onSubmit?: (submission: Submission<Data>) => void;
   onSubmitDone?: (submission: Submission<Data>) => void;
@@ -68,8 +63,7 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
 
   const createWebForm = (srcOrForm: any, options: any) => {
     options = Object.assign({}, options);
-    srcOrForm =
-      typeof srcOrForm === "string" ? srcOrForm : cloneDeep(srcOrForm);
+    srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep(srcOrForm);
 
     if (!instance.current) {
       isLoaded.current = false;
@@ -81,9 +75,7 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
         }
 
         if (event.startsWith("formio.")) {
-          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(
-            8
-          )}`;
+          const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
 
           if (funcName === "onChange") {
             if (isEqual(get(submission, "data"), args[0].data)) {
@@ -165,8 +157,7 @@ export function useForm<Data = any>(props: UseFormHookProps<Data>) {
   }, [props.onSubmit, events]);
 
   useEffect(() => {
-    props.onSubmitDone &&
-      events.current.set("onSubmitDone", props.onSubmitDone);
+    props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmitDone);
   }, [props.onSubmitDone, events]);
 
   return {

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

@@ -1,12 +1,5 @@
 import PropTypes from "prop-types";
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
+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";
@@ -29,18 +22,11 @@ export interface FormAccessProps {
   options?: FormOptions;
 }
 
-function useFormAccess({
-  form: formDefinition,
-  roles,
-  onSubmit,
-  options
-}: FormAccessProps) {
+function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormAccessProps) {
   // eslint-disable-next-line no-undef
   const form = useMemo(() => getFormAccess(roles), [roles]);
 
-  const [submissions, setSubmissions] = useState(() =>
-    dataAccessToSubmissions(formDefinition, form)
-  );
+  const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));
 
   const onChange = useCallback(
     (type: string, submission: Submission<AccessRoles>) => {
@@ -52,10 +38,7 @@ function useFormAccess({
   useEffect(() => {
     const input = dataAccessToSubmissions(formDefinition, form);
     if (formDefinition?._id) {
-      if (
-        shouldUpdate("access", submissions.access, input) ||
-        shouldUpdate("submissionAccess", submissions.submissionAccess, input)
-      ) {
+      if (shouldUpdate("access", submissions.access, input) || shouldUpdate("submissionAccess", submissions.submissionAccess, input)) {
         setSubmissions(input);
       }
     }
@@ -80,21 +63,10 @@ interface NamedFormAccessProps {
   options: any;
   onSubmit: any;
 
-  onChange(
-    name: "access" | "submissionAccess",
-    submission: Submission<AccessRoles>
-  ): void;
+  onChange(name: "access" | "submissionAccess", submission: Submission<AccessRoles>): void;
 }
 
-function NamedFormAccess({
-  name,
-  form,
-  submissions,
-  options,
-  onChange,
-  onSubmit,
-  children
-}: PropsWithChildren<NamedFormAccessProps>) {
+function NamedFormAccess({ name, form, submissions, options, onChange, onSubmit, children }: PropsWithChildren<NamedFormAccessProps>) {
   const [isValid, setIsValid] = useState(true);
 
   return (
@@ -110,35 +82,21 @@ function NamedFormAccess({
         options={options}
       />
 
-      <button
-        disabled={!isValid}
-        className={"mt-5 btn btn-primary"}
-        onClick={onSubmit}
-      >
+      <button disabled={!isValid} className={"mt-5 btn btn-primary"} onClick={onSubmit}>
         Save access
       </button>
 
       {children}
 
       <div className={"alert alert-warning mt-5"}>
-        Elevated permissions allow users to access and modify other user's
-        entities. Assign with caution.
+        Elevated permissions allow users to access and modify other user's entities. Assign with caution.
       </div>
     </>
   );
 }
 
-export function FormAccess(
-  props: PropsWithChildren<FormAccessProps>
-): ReactElement {
-  const {
-    type,
-    form,
-    submissions,
-    options,
-    onChange,
-    onSubmit
-  } = useFormAccess(props);
+export function FormAccess(props: PropsWithChildren<FormAccessProps>): ReactElement {
+  const { type, form, submissions, options, onChange, onSubmit } = useFormAccess(props);
 
   return (
     <div>
@@ -158,22 +116,16 @@ export function FormAccess(
         </Card>
         <div className={"w-1/4 pl-4"}>
           <Card label={"About Submission Data Permissions"}>
-            <p>
-              Submission Data Permissions allow you to control who can create,
-              view, and modify form submission data.
-            </p>
+            <p>Submission Data Permissions allow you to control who can create, view, and modify form submission data.</p>
 
             <ul className={"mt-5 pl-7 list-disc"}>
               <li className={"pb-2"}>
-                <strong>Own Permissions</strong> - These permissions apply if
-                the user is the original creator of the submission data and is
-                listed as the owner of the submission in submission.owner. This
-                allows users to create and edit their own submission data
+                <strong>Own Permissions</strong> - These permissions apply if the user is the original creator of the submission data and is
+                listed as the owner of the submission in submission.owner. This allows users to create and edit their own submission data
                 without seeing other user's data.
               </li>
               <li>
-                <strong>All Permissions</strong> - These permissions apply to
-                all submission data regardless of who owns it.
+                <strong>All Permissions</strong> - These permissions apply to all submission data regardless of who owns it.
               </li>
             </ul>
           </Card>
@@ -181,35 +133,20 @@ export function FormAccess(
       </div>
       <div className={"flex mb-5"}>
         <Card label={`Manage ${type} definition access`} className={"flex-1"}>
-          <NamedFormAccess
-            name={"access"}
-            form={form}
-            submissions={submissions}
-            onChange={onChange}
-            onSubmit={onSubmit}
-            options={options}
-          >
+          <NamedFormAccess name={"access"} form={form} submissions={submissions} onChange={onChange} onSubmit={onSubmit} options={options}>
             {props.children}
           </NamedFormAccess>
         </Card>
 
         <div className={"w-1/4 pl-4"}>
           <Card label={"About Form Definition Access"}>
-            <p>
-              These permissions allow you to give access to a single form's JSON
-              definition so they can render the form.
-            </p>
+            <p>These permissions allow you to give access to a single form's JSON definition so they can render the form.</p>
 
-            <p>
-              Typically you will want to allow all of your roles to be able to
-              Read the form definition.
-            </p>
+            <p>Typically you will want to allow all of your roles to be able to Read the form definition.</p>
 
             <p>
-              Each form also has an owner at <strong>form.owner</strong> which
-              is the user who created the form. In some applications users are
-              allowed to create their own forms. In those cases it is helpful to
-              have Owner based permissions as well.
+              Each form also has an owner at <strong>form.owner</strong> which is the user who created the form. In some applications users
+              are allowed to create their own forms. In those cases it is helpful to have Owner based permissions as well.
             </p>
           </Card>
         </div>

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

@@ -1,13 +1,7 @@
 import { ExtendedComponentSchema } from "formiojs";
 import { FormSchema } from "../../interfaces/FormSchema";
 
-export function getRoleComponent({
-  label,
-  key,
-  description,
-  choices,
-  data
-}: any): ExtendedComponentSchema {
+export function getRoleComponent({ label, key, description, choices, data }: any): ExtendedComponentSchema {
   return {
     label,
     key,
@@ -36,18 +30,12 @@ export function getRoleComponent({
 }
 
 function toDescription(description: string, hr = true): string {
-  return (
-    '<span class="text-sm">' +
-    description +
-    "</span> " +
-    (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "")
-  );
+  return '<span class="text-sm">' + description + "</span> " + (hr ? '<hr class="mt-6 mb-5 border-gray-200 mx-20"/>' : "");
 }
 
 export function getSubmissionPermissionForm({ choices }: any): FormSchema {
   return {
-    description:
-      "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
+    description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [
       getRoleComponent({
         key: "create_own",
@@ -120,13 +108,11 @@ export function getSubmissionPermissionForm({ choices }: any): FormSchema {
 
 export function getAccessPermissionForm({ choices }: any): FormSchema {
   return {
-    description:
-      "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
+    description: "<strong>Elevated permissions allow users to access and modify other user's entities. Assign with caution.</strong>",
     components: [
       getRoleComponent({
         key: "read_own",
-        label:
-          '<h4 class="text-gray-800">Read Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Read Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Read Own permission will allow a user, with one of the given Roles, to read a form. A user can only read a form if they are defined as its owner."
         ),
@@ -142,8 +128,7 @@ export function getAccessPermissionForm({ choices }: any): FormSchema {
       }),
       getRoleComponent({
         key: "update_own",
-        label:
-          '<h4 class="text-gray-800">Update Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Update Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Update Own permission will allow a user, with one of the given Roles, to update a form. A user can only update a form if they are defined as its owner."
         ),
@@ -159,8 +144,7 @@ export function getAccessPermissionForm({ choices }: any): FormSchema {
       }),
       getRoleComponent({
         key: "delete_own",
-        label:
-          '<h4 class="text-gray-800">Delete Form Definition (Restricted to owner)</h4>',
+        label: '<h4 class="text-gray-800">Delete Form Definition (Restricted to owner)</h4>',
         description: toDescription(
           "The Delete Own permission will allow a user, with one of the given Roles, to delete a form. A user can only delete a form if they are defined as its owner."
         ),

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

@@ -27,11 +27,8 @@ export default {
 };
 
 export const Sandbox = (args: any) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
-  return (
-    <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />
-  );
+  return <FormAccess {...args} options={{ template: "tailwind", iconset: "bx" }} />;
 };
 
 Sandbox.args = {
@@ -42,11 +39,7 @@ Sandbox.args = {
     owner: "5d0797a382461b6656d2c790",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],

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

@@ -1,11 +1,5 @@
 import { FormSchema } from "../../interfaces";
-import {
-  dataAccessToSubmissions,
-  getFormAccess,
-  SubmissionAccess,
-  submissionsToDataAccess,
-  updateSubmissions
-} from "./formAccess.utils";
+import { dataAccessToSubmissions, getFormAccess, SubmissionAccess, submissionsToDataAccess, updateSubmissions } from "./formAccess.utils";
 
 const roles: any[] = [
   {
@@ -24,11 +18,7 @@ describe("formAccess.utils", () => {
         components: [],
         access: [
           {
-            roles: [
-              "5d0797bc872fc747da559858",
-              "5d0797bc872fc71d05559859",
-              "5d0797bc872fc7da3b55985a"
-            ],
+            roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
             type: "read_all"
           }
         ],
@@ -47,11 +37,7 @@ describe("formAccess.utils", () => {
         data: {
           delete_all: [],
           delete_own: [],
-          read_all: [
-            "5d0797bc872fc747da559858",
-            "5d0797bc872fc71d05559859",
-            "5d0797bc872fc7da3b55985a"
-          ],
+          read_all: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
           read_own: [],
           update_all: [],
           update_own: []
@@ -104,11 +90,7 @@ describe("formAccess.utils", () => {
         components: [],
         access: [
           {
-            roles: [
-              "5d0797bc872fc747da559858",
-              "5d0797bc872fc71d05559859",
-              "5d0797bc872fc7da3b55985a"
-            ],
+            roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
             type: "read_all"
           }
         ],

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

@@ -4,10 +4,7 @@ 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 { getAccessPermissionForm, getSubmissionPermissionForm } from "./formAccess.schema";
 
 export interface Choice {
   label: string;
@@ -81,30 +78,20 @@ export function getFormAccess(roles: RoleSchema[]): FormAccessSchema {
   };
 }
 
-export function dataAccessToSubmissions(
-  form: Partial<FormSchema>,
-  formAccess: FormAccessSchema
-): SubmissionAccess {
-  const getKeys = (components: ExtendedComponentSchema[]) =>
-    components.map(({ key }) => key);
+export function dataAccessToSubmissions(form: Partial<FormSchema>, formAccess: FormAccessSchema): SubmissionAccess {
+  const getKeys = (components: ExtendedComponentSchema[]) => components.map(({ key }) => key);
 
   return {
     access: {
       data: accessToHash(getKeys(formAccess.access.components), form.access)
     },
     submissionAccess: {
-      data: accessToHash(
-        getKeys(formAccess.submissionAccess.components),
-        form.submissionAccess
-      )
+      data: accessToHash(getKeys(formAccess.submissionAccess.components), form.submissionAccess)
     }
   };
 }
 
-export function submissionsToDataAccess(
-  form: Partial<FormSchema>,
-  submissions: SubmissionAccess
-): Partial<FormSchema> {
+export function submissionsToDataAccess(form: Partial<FormSchema>, submissions: SubmissionAccess): Partial<FormSchema> {
   return {
     ...cloneDeep(form),
     access: hashToAccess(submissions.access.data),
@@ -112,20 +99,11 @@ export function submissionsToDataAccess(
   };
 }
 
-export function shouldUpdate(
-  type: string,
-  submission: Submission<AccessRoles>,
-  submissions: SubmissionAccess
-) {
+export function shouldUpdate(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess) {
   return !isEqual(submission.data, submissions[type].data);
 }
 
-export function updateSubmissions(
-  type: string,
-  submission: Submission<AccessRoles>,
-  submissions: SubmissionAccess,
-  cb: Function = noop
-) {
+export function updateSubmissions(type: string, submission: Submission<AccessRoles>, submissions: SubmissionAccess, cb: Function = noop) {
   if (shouldUpdate(type, submission, submissions)) {
     submissions = {
       ...submissions,

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

@@ -1,11 +1,6 @@
 import FormioUtils from "formiojs/utils";
 import React, { PropsWithChildren, ReactElement, useMemo } from "react";
-import {
-  ActionDefaultsSchema,
-  ActionSchema,
-  FormOptions,
-  Submission
-} from "../../interfaces";
+import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
 import { Form } from "../form/form.component";
 
 function mapData(options: any, defaults: ActionDefaultsSchema): any {
@@ -42,13 +37,7 @@ export interface FormActionProps {
   options: FormOptions;
 }
 
-export function FormAction({
-  actionInfo,
-  children,
-  onSubmit,
-  options,
-  ...props
-}: PropsWithChildren<FormActionProps>): ReactElement {
+export function FormAction({ actionInfo, children, onSubmit, options, ...props }: PropsWithChildren<FormActionProps>): ReactElement {
   const { form, submission } = useMemo(() => {
     const submission = mapData(props.submission || {}, actionInfo.defaults);
     const form = mapSettingsForm(actionInfo.settingsForm);
@@ -60,12 +49,7 @@ export function FormAction({
     <div>
       {children}
 
-      <Form
-        form={form}
-        submission={submission}
-        onSubmit={onSubmit}
-        options={options}
-      />
+      <Form form={form} submission={submission} onSubmit={onSubmit} options={options} />
 
       {children}
     </div>