@tsed/react-formio 1.10.5 → 1.10.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.5",
+  "version": "1.10.9",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.10.5",
+    "@tsed/redux-utils": "1.10.9",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,8 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.5",
-    "@tsed/tailwind-formio": "1.10.5"
+    "@tsed/tailwind": "1.10.9",
+    "@tsed/tailwind-formio": "1.10.9"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/form/useForm.hook.ts

@@ -62,14 +62,6 @@ export const useForm = (props: any): any => {
       });
     }
 
-    useEffect(() => {
-      props.onSubmit && events.current.set("onSubmit", props.onSubmit);
-    }, [props.onSubmit, events]);
-
-    useEffect(() => {
-      props.onSubmitDone && events.current.set("onSubmitDone", props.onSubmit);
-    }, [props.onSubmitDone, events]);
-
     return instance.current;
   };
 
@@ -103,6 +95,26 @@ export const useForm = (props: any): any => {
     }
   }, [src]);
 
+  useEffect(() => {
+    if (form) {
+      createWebForm(form, options);
+    }
+
+    return () => {
+      isLoaded.current = false;
+      instance.current && instance.current.destroy(true);
+    };
+  }, []);
+
+  useEffect(() => {
+    props.onSubmit && events.current.set("onSubmit", props.onSubmit);
+  }, [props.onSubmit, events]);
+
+  useEffect(() => {
+    props.onSubmitDone &&
+      events.current.set("onSubmitDone", props.onSubmitDone);
+  }, [props.onSubmitDone, events]);
+
   return {
     element
   };

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

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
-import React, { useState } from "react";
+import React, { PropsWithChildren, useState } from "react";
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
@@ -10,7 +10,7 @@ function RemoveModalFooter({
   valueToCompare,
   onSubmit,
   onClose,
-  i18n = noop
+  i18n = (f: string) => f
 }: ModalProps) {
   return (
     <div className={"flex items-center justify-center bg-white p-2"}>
@@ -42,22 +42,29 @@ export interface RemoveModalProps extends ModalProps {
   valueToCompare: string;
   itemType?: string;
   i18n?: (f: string) => string;
+  maxWidth?: string;
 }
 
-export function RemoveModal(props: RemoveModalProps) {
+export function RemoveModal({
+  maxWidth = "300px",
+  children,
+  ...props
+}: PropsWithChildren<RemoveModalProps>) {
   const { i18n = noop } = props;
   const [value, setValue] = useState();
 
   return (
     <Modal
       {...props}
-      style={{ maxWidth: "300px" }}
+      className={classnames(props.className, "formio-dialog-theme-remove")}
+      style={{ maxWidth }}
       title={`Drop ${props.itemType?.toLowerCase()}`}
       value={value}
       footer={RemoveModalFooter}
     >
       <div className={"px-4 pt-3 pb-5"}>
         <div className={"pb-1"}>
+          {children}
           {i18n("To drop")} <strong>{props.valueToCompare}</strong>,&nbsp;
           {i18n("type the")}&nbsp;
           <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;

package/src/components/table/components/{cell.component.tsx → defaultCell.component.tsx}

@@ -1,6 +1,9 @@
 import React from "react";
 
-export function Cell({ value, render = (f: any) => f }: any): JSX.Element {
+export function DefaultCell({
+  value,
+  render = (f: any) => f
+}: any): JSX.Element {
   if (value === undefined) {
     return <></>;
   }

package/src/components/table/index.ts

@@ -1,6 +1,6 @@
 export * from "./utils/useOperations.hook";
-export * from "./components/cell.component";
 export * from "./components/defaultArrowSort.component";
+export * from "./components/defaultCell.component";
 export * from "./components/defaultCellHeader.component";
 export * from "./components/defaultCellHeader.component";
 export * from "./components/defaultCellOperations.component";

package/src/components/table/utils/mapFormToColumns.tsx

@@ -1,9 +1,9 @@
+import React from "react";
 import { Components, ExtendedComponentSchema } from "formiojs";
 import FormioUtils from "formiojs/utils";
-import React from "react";
 import { Column } from "react-table";
 import { FormSchema } from "../../../interfaces";
-import { Cell } from "../components/cell.component";
+import { DefaultCell } from "../components/defaultCell.component";
 import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
 
 export function mapFormToColumns(form: FormSchema): Column[] {
@@ -19,7 +19,10 @@ export function mapFormToColumns(form: FormSchema): Column[] {
           Header: component.label || component.title || component.key,
           accessor: `data.${component.key}`,
           Cell: (props: any) => (
-            <Cell {...props} render={(value: any) => cmp.asString(value)} />
+            <DefaultCell
+              {...props}
+              render={(value: any) => cmp.asString(value)}
+            />
           )
         };
 

package/dist/components/table/components/cell.component.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Cell({ value, render }: any): JSX.Element;