@tsed/react-formio 2.1.2 → 2.1.4

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

@@ -2,7 +2,7 @@ import React from "react";
 
 import { FormEdit } from "./formEdit.component";
 import { defaultDisplayChoices } from "./formParameters.component";
-console.log("===", FormEdit);
+
 export default {
   title: "ReactFormio/FormEdit",
   component: FormEdit,
@@ -45,327 +45,330 @@ export default {
   }
 };
 
-export const Sandbox = (args: any) => {
-  return <FormEdit {...args} />;
-};
-
-Sandbox.args = {
-  form: {
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      }
-    ],
-    title: "text-field",
-    display: "form",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    machineName: "tcspjwhsevrzpcd:textField"
+export const Sandbox = {
+  render: ({ form, typeChoices, displayChoices, enableTags, options }: any) => {
+    return <FormEdit form={form} typeChoices={typeChoices} displayChoices={displayChoices} enableTags={enableTags} options={options} />;
   },
-  typeChoices: [
-    { label: "Form", value: "form" },
-    { label: "Resources", value: "resource" }
-  ],
-  displayChoices: defaultDisplayChoices,
-  enableTags: true,
-  options: { template: "tailwind", iconset: "bx" }
-};
-
-export const WithoutTypeChoices = (args: any) => {
-  return <FormEdit {...args} />;
-};
-
-WithoutTypeChoices.args = {
-  form: {
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      }
+  args: {
+    typeChoices: [
+      { label: "Form", value: "form" },
+      { label: "Resources", value: "resource" }
     ],
-    title: "text-field",
-    display: "form",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    machineName: "tcspjwhsevrzpcd:textField"
-  },
-  displayChoices: defaultDisplayChoices,
-  enableTags: true,
-  options: { template: "tailwind", iconset: "bx" }
+    displayChoices: defaultDisplayChoices,
+    enableTags: true,
+    options: { template: "tailwind", iconset: "bx" },
+    form: {
+      type: "form",
+      tags: [],
+      owner: "5d0797a382461b6656d2c790",
+      components: [
+        {
+          label: "Text Field",
+          labelPosition: "top",
+          placeholder: "",
+          description: "",
+          tooltip: "",
+          prefix: "",
+          suffix: "",
+          widget: { type: "input" },
+          inputMask: "",
+          allowMultipleMasks: false,
+          customClass: "",
+          tabindex: "",
+          autocomplete: "",
+          hidden: false,
+          hideLabel: false,
+          showWordCount: false,
+          showCharCount: false,
+          mask: false,
+          autofocus: false,
+          spellcheck: true,
+          disabled: false,
+          tableView: true,
+          modalEdit: false,
+          multiple: false,
+          persistent: true,
+          inputFormat: "plain",
+          protected: false,
+          dbIndex: false,
+          case: "",
+          encrypted: false,
+          redrawOn: "",
+          clearOnHide: true,
+          customDefaultValue: "",
+          calculateValue: "",
+          calculateServer: false,
+          allowCalculateOverride: false,
+          validateOn: "change",
+          validate: {
+            required: true,
+            pattern: "",
+            customMessage: "",
+            custom: "",
+            customPrivate: false,
+            json: "",
+            minLength: "",
+            maxLength: "",
+            strictDateValidation: false,
+            multiple: false,
+            unique: false
+          },
+          unique: false,
+          errorLabel: "",
+          key: "textField",
+          tags: [],
+          properties: {},
+          conditional: { show: null, when: null, eq: "", json: "" },
+          customConditional: "",
+          logic: [],
+          attributes: {},
+          overlay: {
+            style: "",
+            page: "",
+            left: "",
+            top: "",
+            width: "",
+            height: ""
+          },
+          type: "textfield",
+          input: true,
+          refreshOn: "",
+          inputType: "text",
+          id: "eqb1o4r",
+          defaultValue: ""
+        }
+      ],
+      title: "text-field",
+      display: "form",
+      access: [
+        {
+          roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
+          type: "read_all"
+        }
+      ],
+      submissionAccess: [],
+      controller: "",
+      properties: {},
+      settings: {},
+      name: "textField",
+      path: "textfield",
+      machineName: "tcspjwhsevrzpcd:textField"
+    }
+  }
 };
 
-export const WithoutTags = (args: any) => {
-  return <FormEdit {...args} />;
+export const WithoutTypeChoices = {
+  render: (args: any) => {
+    return <FormEdit {...args} />;
+  },
+  args: {
+    form: {
+      type: "form",
+      tags: [],
+      owner: "5d0797a382461b6656d2c790",
+      components: [
+        {
+          label: "Text Field",
+          labelPosition: "top",
+          placeholder: "",
+          description: "",
+          tooltip: "",
+          prefix: "",
+          suffix: "",
+          widget: { type: "input" },
+          inputMask: "",
+          allowMultipleMasks: false,
+          customClass: "",
+          tabindex: "",
+          autocomplete: "",
+          hidden: false,
+          hideLabel: false,
+          showWordCount: false,
+          showCharCount: false,
+          mask: false,
+          autofocus: false,
+          spellcheck: true,
+          disabled: false,
+          tableView: true,
+          modalEdit: false,
+          multiple: false,
+          persistent: true,
+          inputFormat: "plain",
+          protected: false,
+          dbIndex: false,
+          case: "",
+          encrypted: false,
+          redrawOn: "",
+          clearOnHide: true,
+          customDefaultValue: "",
+          calculateValue: "",
+          calculateServer: false,
+          allowCalculateOverride: false,
+          validateOn: "change",
+          validate: {
+            required: true,
+            pattern: "",
+            customMessage: "",
+            custom: "",
+            customPrivate: false,
+            json: "",
+            minLength: "",
+            maxLength: "",
+            strictDateValidation: false,
+            multiple: false,
+            unique: false
+          },
+          unique: false,
+          errorLabel: "",
+          key: "textField",
+          tags: [],
+          properties: {},
+          conditional: { show: null, when: null, eq: "", json: "" },
+          customConditional: "",
+          logic: [],
+          attributes: {},
+          overlay: {
+            style: "",
+            page: "",
+            left: "",
+            top: "",
+            width: "",
+            height: ""
+          },
+          type: "textfield",
+          input: true,
+          refreshOn: "",
+          inputType: "text",
+          id: "eqb1o4r",
+          defaultValue: ""
+        }
+      ],
+      title: "text-field",
+      display: "form",
+      access: [
+        {
+          roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
+          type: "read_all"
+        }
+      ],
+      submissionAccess: [],
+      controller: "",
+      properties: {},
+      settings: {},
+      name: "textField",
+      path: "textfield",
+      machineName: "tcspjwhsevrzpcd:textField"
+    },
+    displayChoices: defaultDisplayChoices,
+    enableTags: true,
+    options: { template: "tailwind", iconset: "bx" }
+  }
 };
 
-WithoutTags.args = {
-  form: {
-    type: "form",
-    tags: [],
-    owner: "5d0797a382461b6656d2c790",
-    components: [
-      {
-        label: "Text Field",
-        labelPosition: "top",
-        placeholder: "",
-        description: "",
-        tooltip: "",
-        prefix: "",
-        suffix: "",
-        widget: { type: "input" },
-        inputMask: "",
-        allowMultipleMasks: false,
-        customClass: "",
-        tabindex: "",
-        autocomplete: "",
-        hidden: false,
-        hideLabel: false,
-        showWordCount: false,
-        showCharCount: false,
-        mask: false,
-        autofocus: false,
-        spellcheck: true,
-        disabled: false,
-        tableView: true,
-        modalEdit: false,
-        multiple: false,
-        persistent: true,
-        inputFormat: "plain",
-        protected: false,
-        dbIndex: false,
-        case: "",
-        encrypted: false,
-        redrawOn: "",
-        clearOnHide: true,
-        customDefaultValue: "",
-        calculateValue: "",
-        calculateServer: false,
-        allowCalculateOverride: false,
-        validateOn: "change",
-        validate: {
-          required: true,
-          pattern: "",
-          customMessage: "",
-          custom: "",
-          customPrivate: false,
-          json: "",
-          minLength: "",
-          maxLength: "",
-          strictDateValidation: false,
-          multiple: false,
-          unique: false
-        },
-        unique: false,
-        errorLabel: "",
-        key: "textField",
-        tags: [],
-        properties: {},
-        conditional: { show: null, when: null, eq: "", json: "" },
-        customConditional: "",
-        logic: [],
-        attributes: {},
-        overlay: {
-          style: "",
-          page: "",
-          left: "",
-          top: "",
-          width: "",
-          height: ""
-        },
-        type: "textfield",
-        input: true,
-        refreshOn: "",
-        inputType: "text",
-        id: "eqb1o4r",
-        defaultValue: ""
-      }
-    ],
-    title: "text-field",
-    display: "form",
-    access: [
-      {
-        roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
-        type: "read_all"
-      }
-    ],
-    submissionAccess: [],
-    controller: "",
-    properties: {},
-    settings: {},
-    name: "textField",
-    path: "textfield",
-    machineName: "tcspjwhsevrzpcd:textField"
+export const WithoutTags = {
+  render: (args: any) => {
+    return <FormEdit {...args} />;
   },
-  displayChoices: defaultDisplayChoices,
-  enableTags: false,
-  options: { template: "tailwind", iconset: "bx" }
+  args: {
+    form: {
+      type: "form",
+      tags: [],
+      owner: "5d0797a382461b6656d2c790",
+      components: [
+        {
+          label: "Text Field",
+          labelPosition: "top",
+          placeholder: "",
+          description: "",
+          tooltip: "",
+          prefix: "",
+          suffix: "",
+          widget: { type: "input" },
+          inputMask: "",
+          allowMultipleMasks: false,
+          customClass: "",
+          tabindex: "",
+          autocomplete: "",
+          hidden: false,
+          hideLabel: false,
+          showWordCount: false,
+          showCharCount: false,
+          mask: false,
+          autofocus: false,
+          spellcheck: true,
+          disabled: false,
+          tableView: true,
+          modalEdit: false,
+          multiple: false,
+          persistent: true,
+          inputFormat: "plain",
+          protected: false,
+          dbIndex: false,
+          case: "",
+          encrypted: false,
+          redrawOn: "",
+          clearOnHide: true,
+          customDefaultValue: "",
+          calculateValue: "",
+          calculateServer: false,
+          allowCalculateOverride: false,
+          validateOn: "change",
+          validate: {
+            required: true,
+            pattern: "",
+            customMessage: "",
+            custom: "",
+            customPrivate: false,
+            json: "",
+            minLength: "",
+            maxLength: "",
+            strictDateValidation: false,
+            multiple: false,
+            unique: false
+          },
+          unique: false,
+          errorLabel: "",
+          key: "textField",
+          tags: [],
+          properties: {},
+          conditional: { show: null, when: null, eq: "", json: "" },
+          customConditional: "",
+          logic: [],
+          attributes: {},
+          overlay: {
+            style: "",
+            page: "",
+            left: "",
+            top: "",
+            width: "",
+            height: ""
+          },
+          type: "textfield",
+          input: true,
+          refreshOn: "",
+          inputType: "text",
+          id: "eqb1o4r",
+          defaultValue: ""
+        }
+      ],
+      title: "text-field",
+      display: "form",
+      access: [
+        {
+          roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
+          type: "read_all"
+        }
+      ],
+      submissionAccess: [],
+      controller: "",
+      properties: {},
+      settings: {},
+      name: "textField",
+      path: "textfield",
+      machineName: "tcspjwhsevrzpcd:textField"
+    },
+    displayChoices: defaultDisplayChoices,
+    enableTags: false,
+    options: { template: "tailwind", iconset: "bx" }
+  }
 };

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

@@ -38,5 +38,5 @@ export function FormsTable({ Cell, ...props }: FormsTableProps) {
     }
   ];
 
-  return <Table {...props} columns={columns} />;
+  return <Table {...(props as any)} columns={columns} />;
 }

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

@@ -1,5 +1,4 @@
 import classnames from "classnames";
-import noop from "lodash/noop";
 import React, { PropsWithChildren, useState } from "react";
 
 import { iconClass } from "../../utils/iconClass";
@@ -37,7 +36,7 @@ export interface RemoveModalProps extends ModalProps {
 }
 
 export function RemoveModal({ maxWidth = "300px", children, ...props }: PropsWithChildren<RemoveModalProps>) {
-  const { i18n = noop } = props;
+  const { i18n = (f) => f } = props;
   const [value, setValue] = useState();
 
   return (
@@ -49,8 +48,8 @@ export function RemoveModal({ maxWidth = "300px", children, ...props }: PropsWit
       value={value}
       footer={RemoveModalFooter}
     >
-      <div className={"px-4 pt-3 pb-5"}>
-        <div className={"pb-1"}>
+      <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;

package/src/components/table/components/defaultCellHeader.component.tsx

@@ -9,11 +9,11 @@ export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ c
   return (
     <div className={"table-cell-header"}>
       <div className='table-cell-header__label' {...column.getSortByToggleProps()}>
-        <span>{column.render("Header")}</span>
+        <span>{column.render("Header") as any}</span>
 
-        {column.render("ArrowSort")}
+        {column.render("ArrowSort") as any}
       </div>
-      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter")}</div> : null}
+      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter") as any}</div> : null}
     </div>
   );
 }