@tsed/react-formio 1.11.2 → 1.12.0

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

@@ -25,17 +25,9 @@ const EVENTS = [
   "pasteComponent"
 ];
 
-const EVENTS_CHANGE = [
-  "addComponent",
-  "saveComponent",
-  "updateComponent",
-  "removeComponent"
-];
+const EVENTS_CHANGE = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
 
-async function createBuilder(
-  el: Element,
-  { components = [], display, options, onChange, events = {} }: any
-): Promise<void> {
+async function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<void> {
   const form = {
     display,
     components: [...components]
@@ -54,9 +46,7 @@ async function createBuilder(
       };
     };
 
-    EVENTS.forEach((event) =>
-      builder.on(event, callLast(handleEvent(event), 200))
-    );
+    EVENTS.forEach((event) => builder.on(event, callLast(handleEvent(event), 200)));
 
     return builder;
   } catch (er) {
@@ -166,6 +156,7 @@ export class FormBuilder extends React.Component<FormBuilderProps, any> {
     this.builderRef?.destroy();
   }
 
+  // eslint-disable-next-line react/no-deprecated
   async componentWillReceiveProps(nextProps: FormBuilderProps) {
     if (this.builderRef) {
       if (nextProps.display !== this.state.display) {

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

@@ -1126,8 +1126,7 @@ Sandbox.args = {
           key: "address1",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -1189,8 +1188,7 @@ Sandbox.args = {
           key: "address2",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -1252,8 +1250,7 @@ Sandbox.args = {
           key: "city",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -1315,8 +1312,7 @@ Sandbox.args = {
           key: "state",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -1378,8 +1374,7 @@ Sandbox.args = {
           key: "country",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -1441,8 +1436,7 @@ Sandbox.args = {
           key: "zip",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -2947,8 +2941,7 @@ Wizard.args = {
           key: "address1",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -3010,8 +3003,7 @@ Wizard.args = {
           key: "address2",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -3073,8 +3065,7 @@ Wizard.args = {
           key: "city",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -3136,8 +3127,7 @@ Wizard.args = {
           key: "state",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -3199,8 +3189,7 @@ Wizard.args = {
           key: "country",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",
@@ -3262,8 +3251,7 @@ Wizard.args = {
           key: "zip",
           type: "textfield",
           input: true,
-          customConditional:
-            "show = _.get(instance, 'parent.manualMode', false);",
+          customConditional: "show = _.get(instance, 'parent.manualMode', false);",
           placeholder: "",
           prefix: "",
           customClass: "",

package/src/components/form-control/formControl.component.tsx

@@ -24,15 +24,9 @@ export function FormControl({
   className
 }: React.PropsWithChildren<FormControlProps>) {
   return (
-    <div
-      id={`form-group-${name || ""}`}
-      className={classnames("form-group", className)}
-    >
+    <div id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
       {label && (
-        <label
-          htmlFor={name}
-          className={`col-form-label ${required ? " field-required" : ""}`}
-        >
+        <label htmlFor={name} className={`col-form-label ${required ? " field-required" : ""}`}>
           {label}
         </label>
       )}

package/src/components/form-edit/formCtas.component.tsx

@@ -59,9 +59,7 @@ export function FormEditCTAs({
     <div className={"form-edit__actions"}>
       <div>
         <button
-          className={`btn btn-primary btn-save flex ${
-            disabled ? "disabled" : ""
-          }`}
+          className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
           disabled={disabled}
           onClick={() => !disabled && onSubmit()}
         >
@@ -70,39 +68,23 @@ export function FormEditCTAs({
         </button>
 
         <div>
-          <button
-            className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`}
-            onClick={() => onUndo()}
-            ref={undoTooltipRef}
-          >
+          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo()} ref={undoTooltipRef}>
             <i className={iconClass(options.iconset, "undo")} />
           </button>
 
-          <button
-            className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`}
-            onClick={() => onRedo()}
-            ref={redoTooltipRef}
-          >
+          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo()} ref={redoTooltipRef}>
             <i className={iconClass(options.iconset, "redo")} />
           </button>
         </div>
 
         <div>
           {onCopy && (
-            <button
-              className='btn btn-light'
-              onClick={() => onCopy()}
-              ref={copyTooltipRef}
-            >
+            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef}>
               <i className={iconClass(options.iconset, "copy")} />
             </button>
           )}
 
-          <button
-            className={`btn btn-light btn-reset`}
-            onClick={() => onReset()}
-            ref={resetTooltipRef}
-          >
+          <button className={`btn btn-light btn-reset`} onClick={() => onReset()} ref={resetTooltipRef}>
             <i className={iconClass(options.iconset, "reset")} />
           </button>
         </div>

package/src/components/form-edit/formEdit.component.tsx

@@ -12,31 +12,13 @@ export interface FormEditProps extends UseFormEditHookProps {
 }
 
 export function FormEdit(props: FormEditProps) {
-  const {
-    form,
-    isValid,
-    setChange,
-    hasRedo,
-    hasChanged,
-    hasUndo,
-    redo,
-    undo,
-    reset,
-    onSubmit,
-    onCopy
-  } = useFormEdit(props);
+  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit(props);
   const { options = {}, builder } = props;
 
   return (
     <div>
       <div className='form-edit'>
-        <FormParameters
-          {...props}
-          className={""}
-          key={`form-settings-${form._id}`}
-          form={form}
-          onChange={setChange}
-        />
+        <FormParameters {...props} className={""} key={`form-settings-${form._id}`} form={form} onChange={setChange} />
         <FormEditCTAs
           {...props}
           className={""}

package/src/components/form-edit/formEdit.reducer.ts

@@ -3,10 +3,7 @@ import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 import { FormSchema } from "../../interfaces";
 
-export const hasChanged = (
-  form: Partial<FormSchema>,
-  value: Partial<FormSchema>
-): boolean => !isEqual(form, value);
+export const hasChanged = (form: Partial<FormSchema>, value: Partial<FormSchema>): boolean => !isEqual(form, value);
 
 export interface FormEditState {
   past: Partial<FormSchema>[];
@@ -24,10 +21,7 @@ export function createInitialState(props: any): FormEditState {
   };
 }
 
-export const reducer = (
-  state: FormEditState,
-  { type, value }: any
-): FormEditState => {
+export const reducer = (state: FormEditState, { type, value }: any): FormEditState => {
   const { past, current, future } = state;
 
   const update = (newValue: any): any => {

package/src/components/form-edit/formEdit.stories.tsx

@@ -134,11 +134,7 @@ Sandbox.args = {
     display: "form",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],
@@ -249,11 +245,7 @@ WithoutTypeChoices.args = {
     display: "form",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],
@@ -360,11 +352,7 @@ WithoutTags.args = {
     display: "form",
     access: [
       {
-        roles: [
-          "5d0797bc872fc747da559858",
-          "5d0797bc872fc71d05559859",
-          "5d0797bc872fc7da3b55985a"
-        ],
+        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
         type: "read_all"
       }
     ],

package/src/components/form-edit/formParameters.component.tsx

@@ -71,33 +71,16 @@ export function FormParameters({
         />
       </div>
       <div className={"w-1/3"}>
-        <Select
-          label={"Display as"}
-          name={"display"}
-          value={form.display}
-          choices={displayChoices}
-          onChange={onChange}
-        />
+        <Select label={"Display as"} name={"display"} value={form.display} choices={displayChoices} onChange={onChange} />
       </div>
       {hasTypeChoices && (
         <div className={"w-1/3"}>
-          <Select
-            label={"Type"}
-            name={"type"}
-            value={form.type}
-            choices={typeChoices}
-            onChange={onChange}
-          />
+          <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
         <div className={"w-1/3"}>
-          <InputTags
-            label={"Tags"}
-            name={"tags"}
-            value={form.tags}
-            onChange={onChange}
-          />
+          <InputTags label={"Tags"} name={"tags"} value={form.tags} onChange={onChange} />
         </div>
       )}
     </div>

package/src/components/form-edit/useFormEdit.hook.ts

@@ -12,10 +12,7 @@ export interface UseFormEditHookProps extends Record<string, unknown> {
 }
 
 export function useFormEdit(props: UseFormEditHookProps) {
-  const [{ current, future, past }, dispatchFormAction] = useReducer(
-    reducer,
-    createInitialState(props)
-  );
+  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));
 
   const onSubmit = () => {
     if (props.onSubmit && typeof props.onSubmit === "function") {
@@ -29,11 +26,7 @@ export function useFormEdit(props: UseFormEditHookProps) {
   };
 
   useEffect(() => {
-    if (
-      props.form &&
-      (current._id !== props.form._id ||
-        current.modified !== props.form.modified)
-    ) {
+    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
       dispatchFormAction({ type: "replaceForm", value: props.form });
     }
   }, [props.form]);

package/src/components/form-settings/formSettings.component.spec.tsx

@@ -7,7 +7,6 @@ describe("FormSettings", () => {
   it("should render form settings", async () => {
     const onSubmit = jest.fn();
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
     Sandbox.args.form.action = "https://test";
 
@@ -30,11 +29,7 @@ describe("FormSettings", () => {
       _id: "6023f8fe4b1a2ab9a3aae096",
       access: [
         {
-          roles: [
-            "5d0797bc872fc747da559858",
-            "5d0797bc872fc71d05559859",
-            "5d0797bc872fc7da3b55985a"
-          ],
+          roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
           type: "read_all"
         }
       ],
@@ -46,9 +41,7 @@ describe("FormSettings", () => {
       path: "textfield",
       properties: {},
       settings: {},
-      submissionAccess: [
-        { roles: ["5d0797bc872fc747da559858"], type: "read_all" }
-      ],
+      submissionAccess: [{ roles: ["5d0797bc872fc747da559858"], type: "read_all" }],
       tags: [],
       type: "form"
     });

package/src/components/form-settings/formSettings.component.tsx

@@ -2,11 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { FormOptions, FormSchema } from "../../interfaces";
 import { getFormSettingsSchema } from "./formSettings.schema";
 import { Form } from "../form/form.component";
-import {
-  FormSettingsSchema,
-  formSettingsToSubmission,
-  submissionToFormSettings
-} from "./formSettings.utils";
+import { FormSettingsSchema, formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
 import { ChangedSubmission } from "../form/useForm.hook";
@@ -17,16 +13,10 @@ export interface FormSettingsProps {
   options?: FormOptions;
 }
 
-function useFormSettings({
-  form: formDefinition,
-  onSubmit = noop,
-  options
-}: FormSettingsProps) {
+function useFormSettings({ form: formDefinition, onSubmit = noop, options }: FormSettingsProps) {
   const form = getFormSettingsSchema();
   const [isValid, setIsValid] = useState(true);
-  const [submission, setSubmission] = useState(() =>
-    formSettingsToSubmission(formDefinition)
-  );
+  const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));
 
   const onChange = useCallback(
     ({ data, isValid }: ChangedSubmission<FormSettingsSchema>) => {
@@ -60,33 +50,15 @@ function useFormSettings({
 }
 
 export function FormSettings(props: FormSettingsProps) {
-  const {
-    form,
-    submission,
-    options = {},
-    onChange,
-    onSubmit,
-    isValid
-  } = useFormSettings(props);
+  const { form, submission, options = {}, onChange, onSubmit, isValid } = useFormSettings(props);
 
   const i18n = options.i18n || ((f: string) => f);
 
   return (
     <div>
-      <Form
-        form={form}
-        submission={submission}
-        onChange={onChange}
-        options={options}
-      />
+      <Form form={form} submission={submission} onChange={onChange} options={options} />
 
-      <button
-        data-testid='submit'
-        disabled={!isValid}
-        className={"mt-5 btn btn-primary"}
-        onClick={onSubmit}
-        type={"submit"}
-      >
+      <button data-testid='submit' disabled={!isValid} className={"mt-5 btn btn-primary"} onClick={onSubmit} type={"submit"}>
         {i18n("Save settings")}
       </button>
     </div>

package/src/components/form-settings/formSettings.stories.tsx

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

package/src/components/form-settings/formSettings.utils.spec.ts

@@ -1,7 +1,4 @@
-import {
-  formSettingsToSubmission,
-  submissionToFormSettings
-} from "./formSettings.utils";
+import { formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
 
 describe("FormSettings utils", () => {
   describe("submissionToDataSettings()", () => {

package/src/components/form-settings/formSettings.utils.ts

@@ -7,9 +7,7 @@ export type FormSettingsSchema = {
   properties: Record<string, any>;
 };
 
-export function formSettingsToSubmission(
-  form: Partial<FormSchema>
-): Submission<FormSettingsSchema> {
+export function formSettingsToSubmission(form: Partial<FormSchema>): Submission<FormSettingsSchema> {
   return {
     data: {
       action: form.action,
@@ -19,10 +17,7 @@ export function formSettingsToSubmission(
   };
 }
 
-export function submissionToFormSettings(
-  form: Partial<FormSchema>,
-  submission: Submission<FormSettingsSchema>
-): Partial<FormSchema> {
+export function submissionToFormSettings(form: Partial<FormSchema>, submission: Submission<FormSettingsSchema>): Partial<FormSchema> {
   return {
     ...cloneDeep(form),
     tags: submission.data.tags,

package/src/components/forms-table/components/formCell.component.tsx

@@ -6,9 +6,7 @@ import { FormSchema } from "../../../interfaces";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export function FormsCell(
-  props: CellProps<FormSchema> & { icon: string; i18n: (f: string) => string }
-) {
+export function FormsCell(props: CellProps<FormSchema> & { icon: string; i18n: (f: string) => string }) {
   const {
     icon = "server",
     row: { original: form }
@@ -25,9 +23,7 @@ export function FormsCell(
         <li className={"text-sm"}>Name: {form.name || form.machineName}</li>
         <li className='mt-5'>
           <span className='badge bg-light mr-1'>
-            <i
-              className={classnames(iconClass(undefined, "history"), "mr-1")}
-            />
+            <i className={classnames(iconClass(undefined, "history"), "mr-1")} />
             <span>Updated {moment(form.modified).fromNow()}</span>
           </span>
 

package/src/components/forms-table/formsTable.component.tsx

@@ -19,9 +19,7 @@ export function FormsTable({ Cell, ...props }: FormsTableProps) {
         Header: i18n("Title"),
         accessor: "title",
         id: "title",
-        Cell: (props: any) => (
-          <FormCell {...props} icon={props.icon} i18n={i18n} />
-        ),
+        Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
         Filter: DefaultColumnFilter,
         colspan: 2
       },
@@ -32,10 +30,7 @@ export function FormsTable({ Cell, ...props }: FormsTableProps) {
         hidden: true,
         Filter: (props: any) =>
           tags && tags.length ? (
-            <SelectColumnFilter
-              {...props}
-              column={{ ...props.columns, choices: tags }}
-            />
+            <SelectColumnFilter {...props} column={{ ...props.columns, choices: tags }} />
           ) : (
             <DefaultColumnFilter {...props} />
           )

package/src/components/input-tags/inputTags.component.tsx

@@ -3,13 +3,9 @@ import uniq from "lodash/uniq";
 import PropTypes from "prop-types";
 import React, { useEffect, useRef } from "react";
 
-import {
-  FormControl,
-  FormControlProps
-} from "../form-control/formControl.component";
+import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
-export interface InputTagsProps<T = any>
-  extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
+export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
   value?: T;
   onChange?: (name: string, value: T) => void;
   placeholder?: string;
@@ -17,17 +13,7 @@ export interface InputTagsProps<T = any>
   [key: string]: any;
 }
 
-export function InputTags({
-  name,
-  value = [],
-  label,
-  onChange,
-  required,
-  description,
-  prefix,
-  suffix,
-  ...props
-}: InputTagsProps) {
+export function InputTags({ name, value = [], label, onChange, required, description, prefix, suffix, ...props }: InputTagsProps) {
   const ref = useRef();
 
   useEffect(() => {
@@ -43,15 +29,12 @@ export function InputTags({
       onChange(name, uniq(value.concat(event.detail.value)));
     });
 
-    instance.passedElement.element.addEventListener(
-      "removeItem",
-      (event: any) => {
-        onChange(
-          name,
-          value.filter((v: string) => v !== event.detail.value)
-        );
-      }
-    );
+    instance.passedElement.element.addEventListener("removeItem", (event: any) => {
+      onChange(
+        name,
+        value.filter((v: string) => v !== event.detail.value)
+      );
+    });
 
     return () => {
       instance.destroy();
@@ -59,14 +42,7 @@ export function InputTags({
   }, []);
 
   return (
-    <FormControl
-      name={name}
-      label={label}
-      required={required}
-      description={description}
-      prefix={prefix}
-      suffix={suffix}
-    >
+    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix}>
       <input ref={ref} type='text' {...props} id={name} required={required} />
     </FormControl>
   );