@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

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
-  };
-}

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

@@ -1,364 +0,0 @@
-import { FormAction } from "./formAction.component";
-
-export default {
-  title: "ReactFormio/FormAction",
-  component: FormAction,
-  argTypes: {
-    onSubmit: { action: "onSubmit" },
-
-    type: {
-      control: {
-        type: "object"
-      }
-    },
-    form: {
-      control: {
-        type: "object"
-      }
-    },
-    options: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
-    }
-  }
-};
-
-export const Sandbox = (args: any) => {
-  return <FormAction {...args} />;
-};
-
-Sandbox.args = {
-  actionInfo: {
-    name: "save",
-    title: "Save Submission",
-    description: "Saves the submission into the database.",
-    priority: 10,
-    defaults: {
-      handler: ["before"],
-      method: ["create", "update"],
-      priority: 10,
-      name: "save",
-      title: "Save Submission"
-    },
-    access: {
-      handler: false,
-      method: false
-    },
-    settingsForm: {
-      components: [
-        {
-          type: "hidden",
-          input: true,
-          key: "priority"
-        },
-        {
-          type: "hidden",
-          input: true,
-          key: "name"
-        },
-        {
-          type: "textfield",
-          input: true,
-          label: "Title",
-          key: "title"
-        },
-        {
-          type: "fieldset",
-          input: false,
-          tree: true,
-          legend: "Action Settings",
-          components: [
-            {
-              input: false,
-              type: "container",
-              key: "settings",
-              components: [
-                {
-                  type: "resourcefields",
-                  key: "resource",
-                  title: "Save submission to",
-                  placeholder: "This form",
-                  basePath: "/project/5d0797bc872fc7d140559857/form",
-                  form: "62b18b10fbbba513555c6c5e",
-                  required: false
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          input: false,
-          tree: false,
-          key: "conditions",
-          legend: "Action Execution",
-          components: [
-            {
-              type: "select",
-              input: true,
-              key: "handler",
-              label: "Handler",
-              placeholder: "Select which handler(s) you would like to trigger",
-              dataSrc: "json",
-              data: {
-                json: '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
-              },
-              template: "<span>{{ item.title }}</span>",
-              valueProperty: "name",
-              multiple: true
-            },
-            {
-              type: "select",
-              input: true,
-              label: "Methods",
-              key: "method",
-              placeholder: "Trigger action on method(s)",
-              dataSrc: "json",
-              data: {
-                json: '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
-              },
-              template: "<span>{{ item.title }}</span>",
-              valueProperty: "name",
-              multiple: true
-            }
-          ]
-        },
-        {
-          key: "fieldset",
-          type: "fieldset",
-          input: false,
-          tree: false,
-          legend: "Action Conditions (optional)",
-          components: [
-            {
-              type: "container",
-              key: "condition",
-              input: false,
-              tree: true,
-              components: [
-                {
-                  key: "columns",
-                  type: "columns",
-                  input: false,
-                  columns: [
-                    {
-                      components: [
-                        {
-                          type: "select",
-                          input: true,
-                          label: "Trigger this action only if field",
-                          key: "field",
-                          placeholder: "Select the conditional field",
-                          template: "<span>{{ item.label || item.key }}</span>",
-                          dataSrc: "json",
-                          data: {
-                            json: '[{"key":""},{"label":"Rules","reorder":false,"addAnotherPosition":"bottom","layoutFixed":false,"enableRowGroups":false,"initEmpty":false,"tableView":false,"defaultValue":[{"path":{},"operator":""}],"key":"rules","type":"datagrid","input":true,"components":[{"label":"Path","widget":"choicesjs","tableView":true,"dataSrc":"url","data":{"url":"/test","headers":[{"key":"","value":""}]},"key":"path","type":"select","input":true,"disableLimit":false},{"label":"Operator","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"default","value":"default"},{"label":"Contains","value":"CONTAINS"}]},"key":"operator","type":"select","input":true},{"customClass":"mt-0 mb-0","key":"fieldset","type":"fieldset","label":"Field Set","input":false,"tableView":false,"components":[{"label":"Value","tableView":true,"key":"value1","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true}]},{"label":"Hello","tableView":true,"key":"textField","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true}]},{"label":"Path","widget":"choicesjs","tableView":true,"dataSrc":"url","data":{"url":"/test","headers":[{"key":"","value":""}]},"key":"path","type":"select","input":true,"disableLimit":false},{"label":"Operator","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"default","value":"default"},{"label":"Contains","value":"CONTAINS"}]},"key":"operator","type":"select","input":true},{"label":"Value","tableView":true,"key":"value1","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true},{"label":"Hello","tableView":true,"key":"textField","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true},{"type":"button","label":"Submit","key":"submit","disableOnInvalid":true,"input":true,"tableView":false}]'
-                          },
-                          valueProperty: "key",
-                          multiple: false
-                        },
-                        {
-                          type: "select",
-                          input: true,
-                          label: "",
-                          key: "eq",
-                          placeholder: "Select comparison",
-                          template: "<span>{{ item.label }}</span>",
-                          dataSrc: "values",
-                          data: {
-                            values: [
-                              {
-                                value: "",
-                                label: ""
-                              },
-                              {
-                                value: "equals",
-                                label: "Equals"
-                              },
-                              {
-                                value: "notEqual",
-                                label: "Does Not Equal"
-                              }
-                            ],
-                            json: "",
-                            url: "",
-                            resource: ""
-                          },
-                          valueProperty: "value",
-                          multiple: false
-                        },
-                        {
-                          input: true,
-                          type: "textfield",
-                          inputType: "text",
-                          label: "",
-                          key: "value",
-                          placeholder: "Enter value",
-                          multiple: false
-                        }
-                      ]
-                    },
-                    {
-                      components: [
-                        {
-                          key: "well2",
-                          type: "well",
-                          input: false,
-                          components: [
-                            {
-                              key: "html",
-                              type: "htmlelement",
-                              tag: "h4",
-                              input: false,
-                              content:
-                                'Or you can provide your own custom JavaScript or <a href="http://jsonlogic.com" target="_blank">JSON</a> condition logic here',
-                              className: ""
-                            },
-                            {
-                              label: "",
-                              type: "textarea",
-                              input: true,
-                              key: "custom",
-                              editorComponents: [
-                                {
-                                  label: "Rules",
-                                  reorder: false,
-                                  addAnotherPosition: "bottom",
-                                  layoutFixed: false,
-                                  enableRowGroups: false,
-                                  initEmpty: false,
-                                  tableView: false,
-                                  defaultValue: [
-                                    {
-                                      path: {},
-                                      operator: ""
-                                    }
-                                  ],
-                                  key: "rules",
-                                  type: "datagrid",
-                                  input: true,
-                                  components: [
-                                    {
-                                      label: "Path",
-                                      widget: "choicesjs",
-                                      tableView: true,
-                                      dataSrc: "url",
-                                      data: {
-                                        url: "/test",
-                                        headers: [
-                                          {
-                                            key: "",
-                                            value: ""
-                                          }
-                                        ]
-                                      },
-                                      key: "path",
-                                      type: "select",
-                                      input: true,
-                                      disableLimit: false
-                                    },
-                                    {
-                                      label: "Operator",
-                                      widget: "choicesjs",
-                                      tableView: true,
-                                      data: {
-                                        values: [
-                                          {
-                                            label: "default",
-                                            value: "default"
-                                          },
-                                          {
-                                            label: "Contains",
-                                            value: "CONTAINS"
-                                          }
-                                        ]
-                                      },
-                                      key: "operator",
-                                      type: "select",
-                                      input: true
-                                    },
-                                    {
-                                      customClass: "mt-0 mb-0",
-                                      key: "fieldset",
-                                      type: "fieldset",
-                                      label: "Field Set",
-                                      input: false,
-                                      tableView: false,
-                                      components: [
-                                        {
-                                          label: "Value",
-                                          tableView: true,
-                                          key: "value1",
-                                          customConditional: "show = row.operator === 'CONTAINS'",
-                                          type: "textfield",
-                                          input: true
-                                        }
-                                      ]
-                                    },
-                                    {
-                                      label: "Hello",
-                                      tableView: true,
-                                      key: "textField",
-                                      customConditional: "show = row.operator === 'CONTAINS'",
-                                      type: "textfield",
-                                      input: true
-                                    }
-                                  ]
-                                },
-                                {
-                                  type: "button",
-                                  label: "Submit",
-                                  key: "submit",
-                                  disableOnInvalid: true,
-                                  input: true,
-                                  tableView: false
-                                }
-                              ],
-                              placeholder:
-                                '// Example: Only execute if submitted roles has \'authenticated\'.\nJavaScript: execute = (data.roles.indexOf(\'authenticated\') !== -1);\nJSON: { "in": [ "authenticated", { "var": "data.roles" } ] }'
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          key: "html2",
-          type: "htmlelement",
-          tag: "hr",
-          input: false,
-          content: "",
-          className: ""
-        },
-        {
-          type: "button",
-          input: true,
-          label: "Save Action",
-          key: "submit",
-          size: "md",
-          leftIcon: "",
-          rightIcon: "",
-          block: false,
-          action: "submit",
-          disableOnInvalid: true,
-          theme: "primary"
-        }
-      ],
-      action: "/project/5d0797bc872fc7d140559857/form/62b18b10fbbba513555c6c5e/action"
-    }
-  },
-  options: { template: "tailwind", iconset: "bx" }
-};