@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/dist/interfaces/ActionSchema.d.ts

@@ -1,23 +0,0 @@
-import { FormSchema } from "./FormSchema";
-export interface ActionDefaultsSchema {
-    handler: string[];
-    method: string[];
-    priority: number;
-    name: string;
-    title: string;
-}
-export interface ActionInfoSchema extends Record<string, unknown> {
-    name: string;
-    title: string;
-    description: string;
-    priority: number;
-    defaults: ActionDefaultsSchema;
-}
-export interface ActionSchema extends ActionInfoSchema {
-    _id?: string;
-    settingsForm: Partial<FormSchema>;
-    access?: {
-        handler: boolean;
-        method: boolean;
-    };
-}

package/dist/interfaces/Submission.d.ts

@@ -1,5 +0,0 @@
-export interface Submission<T = any> extends Record<string, unknown> {
-    _id?: string;
-    data: T;
-    metadata?: any;
-}

package/dist/setupTests.d.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

package/dist/utils/callLast.d.ts

@@ -1 +0,0 @@
-export declare function callLast(fn: Function, time: number): (...args: any[]) => void;

package/jest.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  ...require("@tsed/config/jest/jest.web.config.js"),
-  coverageThreshold: {
-    global: require("./coverage.json")
-  }
-};

package/src/components/alert/alert.stories.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-import { Alert } from "./alert.component";
-
-export default {
-  title: "ReactFormio/Alert",
-  component: Alert,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Alert {...args} />;
-};
-
-Sandbox.args = {
-  error: "error placeholder"
-};

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

@@ -1,73 +0,0 @@
-import { Components } from "formiojs";
-import AllComponents from "formiojs/components";
-import PropTypes from "prop-types";
-import React from "react";
-
-import { useForm, UseFormHookProps } from "./useForm.hook";
-
-Components.setComponents(AllComponents);
-
-export interface FormProps<Data = any> extends UseFormHookProps<Data> {
-  name?: string;
-  /**
-   *
-   */
-  className?: string;
-}
-
-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} />;
-}
-
-Form.propTypes = {
-  name: PropTypes.string,
-  className: PropTypes.string,
-  /**
-   *
-   */
-  src: PropTypes.string,
-  /**
-   * url to fetch form
-   */
-  url: PropTypes.string,
-  /**
-   * Raw form object
-   */
-  form: PropTypes.object,
-  /**
-   * Data submission
-   */
-  submission: PropTypes.object,
-  /**
-   * Configuration option
-   */
-  options: PropTypes.shape({
-    readOnly: PropTypes.bool,
-    noAlerts: PropTypes.bool,
-    i18n: PropTypes.any,
-    template: PropTypes.string,
-    saveDraft: PropTypes.bool,
-    hooks: PropTypes.any
-  }),
-  onPrevPage: PropTypes.func,
-  onNextPage: PropTypes.func,
-  onCancel: PropTypes.func,
-  onChange: PropTypes.func,
-  onCustomEvent: PropTypes.func,
-  onComponentChange: PropTypes.func,
-  onSubmit: PropTypes.func,
-  onAsyncSubmit: PropTypes.func,
-  onSubmitDone: PropTypes.func,
-  onFormLoad: PropTypes.func,
-  onError: PropTypes.func,
-  onRender: PropTypes.func,
-  onAttach: PropTypes.func,
-  onBuild: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onInitialized: PropTypes.func,
-  onFormReady: PropTypes.func,
-  formioform: PropTypes.any
-};

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

@@ -1,253 +0,0 @@
-import React, { useState } from "react";
-
-import form from "../__fixtures__/form.fixture.json";
-import { Form } from "./form.component";
-
-export default {
-  title: "ReactFormio/Form",
-  component: Form,
-  argTypes: {
-    form: {
-      control: {
-        type: "object"
-      }
-    },
-    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: {
-    form
-  },
-  render: (args: any) => {
-    return <Form {...wrap(args)} form={args.form} options={{ template: "tailwind", iconset: "bx" }} />;
-  }
-};
-
-export const TriggerError = {
-  render: (args: any) => {
-    const onAsyncSubmit = () => {
-      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} />;
-  },
-  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 = {
-  render: (args: any) => {
-    return (
-      <Form
-        {...wrap(args)}
-        options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
-        form={args.form}
-        submission={{
-          data: {
-            editGrid: [{ currency: "EUR" }]
-          }
-        }}
-      />
-    );
-  },
-
-  args: {
-    readonly: true,
-    form
-  }
-};
-
-export const OnChange = {
-  render: function Render(args: any) {
-    const [data, setForm] = useState<any>(() => {});
-    const props = wrap(args);
-
-    return (
-      <Form
-        {...props}
-        options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
-        form={args.form}
-        submission={{ data }}
-        onChange={(changedSubmission) => {
-          setForm(changedSubmission.data);
-        }}
-      />
-    );
-  },
-
-  args: {
-    form: {
-      type: "form",
-      display: "form",
-      tags: [],
-      components: [
-        {
-          label: "First name",
-          widget: {
-            type: "input"
-          },
-          errorLabel: "",
-          key: "firstName",
-          inputType: "text",
-          type: "textfield",
-          id: "eqb1o4r",
-          defaultValue: "",
-          validate: {
-            required: 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

@@ -1,216 +0,0 @@
-import { ExtendedComponentSchema, Form } from "formiojs";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
-import { useEffect, useRef } from "react";
-
-import { FormOptions, FormSchema, Submission } from "../../interfaces";
-
-export interface ChangedSubmission<T = any> extends Submission<T> {
-  changed: {
-    component: ExtendedComponentSchema;
-    instance: any;
-    value: any;
-  } & Record<string, any>;
-  isValid: boolean;
-}
-
-export interface FormPageChangeProps<Data = any> {
-  page: number;
-  submission: Submission<Data>;
-}
-
-export interface UseFormHookProps<Data = any> extends Record<string, any> {
-  src?: string;
-  /**
-   * url to fetch form
-   */
-  url?: string;
-  /**
-   * Raw form object
-   */
-  form?: Partial<FormSchema>;
-  /**
-   * Configuration option
-   */
-  options?: FormOptions;
-  /**
-   * Data submission
-   */
-  submission?: Submission<Data>;
-
-  /// events
-  onPrevPage?: (obj: FormPageChangeProps<Data>) => void;
-  onNextPage?: (obj: FormPageChangeProps<Data>) => void;
-  onCancel?: Function;
-  onChange?: (submission: ChangedSubmission) => void;
-  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<any>;
-  onSubmitDone?: (submission: Submission<Data>) => void;
-  onFormLoad?: Function;
-  onError?: (errors: any) => void;
-  onRender?: () => void;
-  onAttach?: Function;
-  onBuild?: Function;
-  onFocus?: Function;
-  onBlur?: Function;
-  onInitialized?: Function;
-  onFormReady?: (formio: any) => void;
-}
-
-function useEvent(event: string, callback: any, events: Map<string, any>) {
-  useEffect(() => {
-    if (callback) {
-      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>) {
-  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);
-
-  async function customValidation(submission: Submission, callback: (err: Error | null) => void) {
-    if (hasEvent("onAsyncSubmit")) {
-      try {
-        await emit("onAsyncSubmit", submission, instance.current);
-      } catch (err: any) {
-        callback(err?.errors || err);
-      }
-    } else {
-      callback(null);
-    }
-  }
-
-  const createWebForm = (srcOrForm: any, options: any) => {
-    options = Object.assign({}, options);
-    srcOrForm = typeof srcOrForm === "string" ? srcOrForm : cloneDeep(srcOrForm);
-
-    if (!instance.current) {
-      isLoaded.current = false;
-      options.hooks = {
-        ...(options.hooks || {}),
-        customValidation: options?.hooks?.customValidation || customValidation
-      };
-
-      instance.current = new Form(element.current, srcOrForm, options);
-
-      instance.current.onAny((event: string, ...args: any[]): void => {
-        if (!instance.current) {
-          return;
-        }
-
-        if (event.startsWith("formio.")) {
-          const eventName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
-
-          if (eventName === "onChange" && !args[0].changed) {
-            return;
-          }
-
-          emit(eventName, ...args, instance.current);
-        }
-      });
-
-      instance.current.ready.then((formio: any) => {
-        submission && (formio.submission = cloneDeep(submission));
-
-        if (props.onFormReady) {
-          props.onFormReady(formio);
-        }
-
-        isLoaded.current = true;
-      });
-    }
-
-    return instance.current;
-  };
-
-  useEffect(() => {
-    if (instance.current) {
-      instance.current.ready.then((formio: any) => {
-        if (isEqual(formio.submission.data, submission?.data)) {
-          return;
-        }
-
-        submission && (formio.submission = cloneDeep(submission));
-      });
-    }
-  }, [submission]);
-
-  useEffect(() => {
-    if (form && instance.current) {
-      instance.current.ready.then((formio: any) => {
-        formio.form = form;
-        if (url) {
-          formio.url = url;
-        }
-      });
-    }
-  }, [form, url]);
-
-  useEffect(() => {
-    if (src) {
-      if (instance.current) {
-        isLoaded.current = false;
-        (instance.current as any).destroy(true);
-      }
-
-      createWebForm(src, options);
-    }
-  }, [src]);
-
-  useEffect(() => {
-    if (form) {
-      createWebForm(form, options);
-    }
-
-    return () => {
-      isLoaded.current = false;
-      instance.current && (instance.current as any).destroy(true);
-    };
-  }, []);
-
-  return {
-    element
-  };
-}