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

package/src/components/input-text/inputText.stories.tsx

@@ -1,126 +0,0 @@
-import React, { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { InputText } from "./inputText.component";
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "ReactFormio/InputText",
-  component: InputText,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    type: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "text"
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    },
-    description: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <InputText {...args} />;
-};
-
-Sandbox.args = {
-  name: "name",
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithPrefix = (args: any) => {
-  return <InputText prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithSuffix = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const TypeNumber = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-TypeNumber.args = {
-  label: "Label",
-  type: "number",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  description: "Use dollars!"
-};
-
-export const Sizing = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-Sizing.args = {
-  label: "Label",
-  type: "number",
-  value: "",
-  size: "sm",
-  placeholder: "Placeholder",
-  description: "Use dollars!"
-};

package/src/components/loader/loader.stories.tsx

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

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

@@ -1,79 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
-
-import { WithFooter, WithTitle } from "./modal.stories";
-
-describe("Modal", () => {
-  describe("WithTitle", () => {
-    it("should display the modal when we click on the button", async () => {
-      const onClose = jest.fn();
-
-      render(<WithTitle {...WithTitle.args} onClose={onClose} />);
-
-      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
-      expect(screen.queryByTestId("modalBody")).toBeFalsy();
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-
-      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
-
-      await screen.findByTestId("modalTitle");
-
-      expect(screen.getByTestId("modalTitle")).toBeTruthy();
-      expect(screen.getByTestId("modalTitle")).toHaveTextContent("Modal title");
-      expect(screen.getByTestId("modalBody")).toBeTruthy();
-      expect(screen.getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-
-      fireEvent.click(screen.getByTestId("closeModal"));
-
-      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
-      expect(screen.queryByTestId("modalBody")).toBeFalsy();
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-      expect(onClose).toHaveBeenCalledWith();
-    });
-  });
-
-  describe("WithFooter", () => {
-    it("should display the modal when we click on the button", async () => {
-      render(<WithFooter {...WithFooter.args} />);
-
-      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
-      expect(screen.queryByTestId("modalBody")).toBeFalsy();
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-
-      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
-
-      await screen.findByTestId("modalTitle");
-
-      expect(screen.getByTestId("modalTitle")).toBeTruthy();
-      expect(screen.getByTestId("modalTitle")).toHaveTextContent("Modal title");
-      expect(screen.getByTestId("modalBody")).toBeTruthy();
-      expect(screen.getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(screen.getByTestId("modalFooter")).toBeTruthy();
-
-      fireEvent.click(screen.getByTestId("customCloseModal"));
-
-      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
-      expect(screen.queryByTestId("modalBody")).toBeFalsy();
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-    });
-    it("should call the onSubmit listener", async () => {
-      const onSubmit = jest.fn();
-
-      render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
-
-      fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
-
-      await screen.findByTestId("modalTitle");
-
-      fireEvent.click(screen.getByTestId("customSubmitModal"));
-
-      expect(onSubmit).toHaveBeenCalled();
-      expect(screen.queryByTestId("modalTitle")).toBeFalsy();
-      expect(screen.queryByTestId("modalBody")).toBeFalsy();
-      expect(screen.queryByTestId("modalFooter")).toBeFalsy();
-    });
-  });
-});

package/src/components/modal/modal.stories.tsx

@@ -1,192 +0,0 @@
-import React from "react";
-
-import { Modal, ModalProps, useModal } from "./modal.component";
-import { RemoveModal, RemoveModalProps } from "./removeModal.component";
-
-export default {
-  title: "ReactFormio/Modal",
-  component: Modal,
-  argTypes: {
-    onSubmit: {
-      title: {
-        control: {
-          type: "text"
-        }
-      },
-      control: {
-        action: "onSubmit"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: ModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal}>
-        <div className={"p-5"} style={{ height: "900px" }}>
-          Hello body
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-Sandbox.args = {};
-
-export const WithTitle = (args: ModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal}>
-        <div className={"p-5"} style={{ height: "900px" }}>
-          Hello body
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-WithTitle.args = {
-  title: "Modal title"
-};
-
-export const WithFooter = (args: ModalProps) => {
-  const modal = useModal();
-
-  function ModalFooter({ closeModal, onSubmit }: any) {
-    return (
-      <div className={"flex items-center justify-center bg-white p-2"}>
-        <button
-          data-testid='customSubmitModal'
-          className={"btn btn-primary mx-1"}
-          onClick={(e) => {
-            onSubmit(e);
-            closeModal();
-          }}
-        >
-          Save
-        </button>
-
-        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
-          Close
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <Modal {...args} {...modal} footer={ModalFooter}>
-        <div className={"px-5"} style={{ height: "900px" }}>
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-          Hello body
-          <br />
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-WithFooter.args = {
-  title: "Modal title"
-};
-
-export const WithRemoveModal = (args: RemoveModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <RemoveModal
-        {...args}
-        i18n={(f) => f}
-        show={modal.show}
-        onSubmit={modal.closeModal}
-        onClose={modal.closeModal}
-        closeModal={modal.closeModal}
-      />
-    </div>
-  );
-};
-
-WithRemoveModal.args = {
-  valueToCompare: "value",
-  itemType: "form"
-};

package/src/components/pagination/pagination.stories.tsx

@@ -1,40 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { Pagination } from "./pagination.component";
-
-export default {
-  title: "ReactFormio/Pagination",
-  component: Pagination,
-
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
-
-  useEffect(() => {
-    args.gotoPage && args.gotoPage(currentPageIndex);
-  }, [currentPageIndex]);
-
-  return (
-    <div>
-      <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
-    </div>
-  );
-};
-
-Sandbox.args = {
-  pageSizes: [10, 25, 50, 100],
-  pageCount: 50,
-  pageIndex: 1
-  // gotoPage,
-  // canPreviousPage,
-  // previousPage,
-  // nextPage,
-  // canNextPage,
-  // pageCount,
-  // pageIndex,
-  // pageOptions,
-  // pageSize,
-  // setPageSize,
-};

package/src/components/react-component/reactComponent.component.tsx

@@ -1,197 +0,0 @@
-import { Components, ComponentSchema } from "formiojs";
-import ReactDOM from "react-dom";
-
-import { Submission } from "../../interfaces/Submission";
-
-export class ReactComponent<Data = any> extends Components.components.field {
-  public reactInstance: any;
-  public shouldSetValue?: boolean;
-  private dataForSetting?: Data;
-
-  /**
-   * This is the first phase of component building where the component is instantiated.
-   *
-   * @param component - The component definition created from the settings form.
-   * @param options - Any options passed into the renderer.
-   * @param data - The submission data where this component's data exists.
-   */
-  constructor(component: ComponentSchema, options: any, data: Submission<Data>) {
-    super(component, options, data);
-  }
-
-  get $reactNode() {
-    return (this.refs as any)[`react-${this.id}`];
-  }
-
-  /**
-   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
-   * components using the this.on() function.
-   */
-  init() {
-    return super.init();
-  }
-
-  /**
-   * This method is called before the component is going to be destroyed, which is when the component instance is
-   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
-   * removed.
-   */
-  destroy() {
-    return super.destroy();
-  }
-
-  /**
-   * The second phase of component building where the component is rendered as an HTML string.
-   *
-   * @returns {string} - The return is the full string of the component
-   */
-  render() {
-    // For react components, we simply render as a div which will become the react instance.
-    // By calling super.render(string) it will wrap the component with the needed wrappers to make it a full component.
-    return super.render(`<div ref="react-${this.id}"></div>`);
-  }
-
-  /**
-   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
-   * to have its javascript events attached.
-   *
-   * @param element
-   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
-   */
-  async attach(element: any) {
-    super.attach(element);
-
-    // The loadRefs function will find all dom elements that have the "ref" setting that match the object property.
-    // It can load a single element or multiple elements with the same ref.
-    this.loadRefs(element, {
-      [`react-${this.id}`]: "single"
-    });
-
-    // @ts-ignore
-    if (this.refs[`react-${this.id}`]) {
-      // @ts-ignore
-      this.reactInstance = this.attachReact(this.refs[`react-${this.id}`]);
-
-      if (this.shouldSetValue) {
-        this.setValue(this.dataForSetting);
-        this.updateValue(this.dataForSetting);
-      }
-    }
-  }
-
-  /**
-   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
-   * or it is being removed from the form.
-   */
-  detach() {
-    // @ts-ignore
-    if (this.refs[`react-${this.id}`]) {
-      // @ts-ignore
-      this.detachReact(this.refs[`react-${this.id}`]);
-    }
-    super.detach();
-  }
-
-  /**
-   * Override this function to render a react component.
-   */
-  renderReact(): any {
-    return null;
-  }
-
-  /**
-   * Override this function to insert your custom component.
-   *
-   * @param element
-   */
-
-  attachReact(element?: any) {
-    // eslint-disable-next-line react/no-render-return-value,react/no-deprecated
-    return ReactDOM.render(this.renderReact(), element);
-  }
-
-  /**
-   * Override this function.
-   */
-
-  detachReact(element?: any) {
-    if (element) {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.unmountComponentAtNode(element);
-    }
-  }
-
-  /**
-   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
-   *
-   * @param value
-   * @param flags
-   */
-  setValue(value: any) {
-    if (this.reactInstance) {
-      this.reactInstance.setState({
-        value: value
-      });
-      this.shouldSetValue = false;
-    } else {
-      this.shouldSetValue = true;
-      this.dataForSetting = value;
-    }
-
-    return false;
-  }
-
-  /**
-   * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
-   *
-   * @param value
-   * @param flags
-   */
-  updateValue = (value?: Data, flags?: Record<string, any>) => {
-    flags = flags || {};
-
-    const newValue = value === undefined || value === null ? this.getValue() : value;
-
-    const changed = newValue !== undefined ? this.hasChanged(newValue, this.dataValue) : false;
-
-    this.dataValue = Array.isArray(newValue) ? [...newValue] : newValue;
-
-    this.updateOnChange(flags, changed);
-    return changed;
-  };
-
-  /**
-   * Get the current value of the component. Should return the value set in the react component.
-   *
-   * @returns {*}
-   */
-  getValue(): Data {
-    if (this.reactInstance) {
-      return this.reactInstance.state.value;
-    }
-    return this.defaultValue;
-  }
-
-  /**
-   * Override normal validation check to insert custom validation in react component.
-   *
-   * @param data
-   * @param dirty
-   * @param rowData
-   * @returns {boolean}
-   */
-  checkValidity(data: Data, dirty: boolean, rowData: any) {
-    const valid = super.checkValidity(data, dirty, rowData);
-
-    if (!valid) {
-      return false;
-    }
-
-    return this.validate(data, dirty, rowData);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  validate(data: Data, dirty: boolean, rowData: any) {
-    return true;
-  }
-}