@tsed/react-formio 1.11.0 → 1.12.0

package/src/components/pagination/pagination.component.tsx

@@ -1,11 +1,7 @@
 import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 import { Select } from "../select/select.component";
-import {
-  getPageNumbers,
-  LEFT_PAGE,
-  RIGHT_PAGE
-} from "../table/utils/getPageNumbers";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
 
 function PaginationButton(
   props: PropsWithChildren<
@@ -17,24 +13,14 @@ function PaginationButton(
     } & Record<string, any>
   >
 ) {
-  const {
-    component: Component = "button",
-    children,
-    disabled,
-    active,
-    ...otherProps
-  } = props;
+  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
 
   return (
     <Component
       {...otherProps}
+      data-testid='pagination-button'
       disabled={disabled}
-      className={classnames(
-        "page-link",
-        disabled ? "disabled" : "",
-        active ? "" : "",
-        props.className
-      )}
+      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
     >
       {children}
     </Component>
@@ -67,7 +53,7 @@ export function Pagination(props: PaginationProps) {
     nextPage,
     canNextPage,
     pageCount,
-    pageIndex,
+    pageIndex = 1,
     pageOptions,
     pageSize,
     setPageSize,
@@ -82,17 +68,10 @@ export function Pagination(props: PaginationProps) {
   const choices: any[] = pageSizes.map((value) => ({ value, label: value }));
 
   return (
-    <nav
-      aria-label='Page navigation'
-      className={classnames("pagination-group -mb-3", className)}
-    >
+    <nav aria-label='Page navigation' className={classnames("pagination-group -mb-3", className)}>
       <ul className='pagination mb-3 mr-3'>
         <li className={classnames("page-item", !canPreviousPage && "disabled")}>
-          <PaginationButton
-            tabIndex={-1}
-            disabled={!canPreviousPage}
-            onClick={() => previousPage()}
-          >
+          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => previousPage()}>
             {i18n("Previous")}
           </PaginationButton>
         </li>
@@ -108,15 +87,8 @@ export function Pagination(props: PaginationProps) {
 
           const active = page - 1 === pageIndex;
           return (
-            <li
-              className={classnames("page-item", active && "active")}
-              key={page}
-            >
-              <PaginationButton
-                tabIndex={pageIndex}
-                active={active}
-                onClick={() => gotoPage(page - 1)}
-              >
+            <li className={classnames("page-item", active && "active")} key={page}>
+              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => gotoPage(page - 1)}>
                 {page}
               </PaginationButton>
             </li>
@@ -124,11 +96,7 @@ export function Pagination(props: PaginationProps) {
         })}
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
-          <PaginationButton
-            tabIndex={pageNumbers.length}
-            disabled={!canNextPage}
-            onClick={() => nextPage()}
-          >
+          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => nextPage()}>
             {i18n("Next")}
           </PaginationButton>
         </li>

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

@@ -1,43 +1,23 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination } from "./pagination.component";
 
 export default {
   title: "ReactFormio/Pagination",
   component: Pagination,
-  argTypes: {
-    pageSizes: {
-      control: {
-        type: "object"
-      }
-    },
-    pageCount: {
-      control: {
-        type: "number"
-      }
-    },
-    pageIndex: {
-      control: {
-        type: "number"
-      }
-    },
-    canPreviousPage: {
-      control: {
-        type: "boolean"
-      }
-    },
-    canNextPage: {
-      control: {
-        type: "boolean"
-      }
-    }
-  },
+
   parameters: {}
 };
 
 export const Sandbox = (args: any) => {
+  const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
+
+  useEffect(() => {
+    args.gotoPage && args.gotoPage(currentPageIndex);
+  }, [currentPageIndex]);
+
   return (
     <div>
-      <Pagination {...args} />
+      <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
     </div>
   );
 };

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

@@ -15,11 +15,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param data - The submission data where this component's data exists.
    */
   // eslint-disable-next-line no-useless-constructor
-  constructor(
-    component: ComponentSchema,
-    options: any,
-    data: Submission<Data>
-  ) {
+  constructor(component: ComponentSchema, options: any, data: Submission<Data>) {
     super(component, options, data);
   }
 
@@ -150,13 +146,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
   updateValue = (value?: Data, flags?: Record<string, any>) => {
     flags = flags || {};
 
-    const newValue =
-      value === undefined || value === null ? this.getValue() : value;
+    const newValue = value === undefined || value === null ? this.getValue() : value;
 
-    const changed =
-      newValue !== undefined
-        ? this.hasChanged(newValue, this.dataValue)
-        : false;
+    const changed = newValue !== undefined ? this.hasChanged(newValue, this.dataValue) : false;
 
     this.dataValue = Array.isArray(newValue) ? [...newValue] : newValue;
 

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { Choicesjs, Sandbox } from "./select.stories";
+
+describe("Select", () => {
+  describe("select component Sandbox version", () => {
+    it("should render the select component", () => {
+      const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
+
+      expect(getByTestId("select_test-sandbox")).toBeInTheDocument();
+    });
+
+    it("should render the select component with a different size", () => {
+      const { getByTestId } = render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
+      const select = getByTestId("select_test-sandbox");
+      expect(select).toBeInTheDocument();
+      expect(select).toHaveClass("form-control-small");
+    });
+
+    it("should render select options with 'Placeholder test' as first value", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+
+      expect(getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
+      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
+      expect(getByRole("option", { name: "test2" })).toBeInTheDocument();
+    });
+
+    it("should have Placeholder label as selected option by default", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
+      const option = getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
+
+      expect(option.selected).toBeTruthy();
+    });
+
+    it("should change the value of the selected option when you click on another choice", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+      const onChange = jest.fn();
+
+      const { getByRole, getByTestId } = render(
+        <Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />
+      );
+
+      fireEvent.change(getByTestId("select_test-sandbox"), {
+        target: { value: "value1" }
+      });
+
+      const option = getByRole("option", { name: "test1" }) as HTMLOptionElement;
+
+      expect(option.selected).toBeTruthy();
+      expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
+    });
+  });
+
+  describe("select component Choicesjs version", () => {
+    it("should render select options with 'test1' as first value", () => {
+      const choices = [
+        { label: "test1", value: "value1" },
+        { label: "test2", value: "value2" }
+      ];
+      const placeHolderTest = "Placeholder test";
+
+      const { getByRole } = render(
+        <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
+      );
+
+      expect(getByRole("option", { name: "test1" })).toBeInTheDocument();
+    });
+  });
+});

package/src/components/select/select.component.tsx

@@ -3,10 +3,7 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 import React, { ReactElement, useEffect, useRef } from "react";
 import { getEventValue } from "../../utils/getEventValue";
-import {
-  FormControl,
-  FormControlProps
-} from "../form-control/formControl.component";
+import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
 export interface SelectProps<T = any> extends FormControlProps {
   value?: any;
@@ -27,7 +24,7 @@ export function Select<T = any>({
   onChange,
   required,
   value,
-  choices = [],
+  choices,
   description,
   placeholder,
   prefix,
@@ -56,18 +53,17 @@ export function Select<T = any>({
   choices =
     layout === "choicesjs" || multiple || !placeholder
       ? choices
-      : ([{ label: placeholder, value: "" }, ...choices] as any[]);
+      : ([
+          {
+            label: placeholder,
+            value: ""
+          },
+          ...choices
+        ] as any[]);
 
   return (
-    <FormControl
-      name={name}
-      label={label}
-      required={required}
-      description={description}
-      prefix={prefix}
-      suffix={suffix}
-      shadow={false}
-    >
+    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
+      {/* eslint-disable-next-line jsx-a11y/no-onchange */}
       <select
         ref={ref}
         {...props}

package/src/components/select/select.stories.tsx

@@ -8,13 +8,13 @@ const choices = [
 ];
 
 const useValue = (args: any) => {
-  const [value, useValue] = useState(args.value);
+  const [value, setValue] = useState(args.value);
 
   return {
     ...args,
     value,
     onChange(name: string, value: any) {
-      useValue(value);
+      setValue(value);
       args.onChange(name, value);
     }
   };
@@ -92,12 +92,7 @@ Choicesjs.args = {
 };
 
 export const ChoicesjsPrefix = (args: any) => {
-  return (
-    <Select
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 ChoicesjsPrefix.args = {
@@ -111,12 +106,7 @@ ChoicesjsPrefix.args = {
 };
 
 export const WithPrefix = (args: any) => {
-  return (
-    <Select
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithPrefix.args = {
@@ -128,12 +118,7 @@ WithPrefix.args = {
 };
 
 export const WithSuffix = (args: any) => {
-  return (
-    <Select
-      suffix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <Select suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithSuffix.args = {
@@ -174,12 +159,7 @@ ChoicesjsMultiple.args = {
 };
 
 export const Sizing = (args: any) => {
-  return (
-    <Select
-      suffix={<i className={iconClass(undefined, "dollar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <Select suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
 };
 
 Sizing.args = {

package/src/components/submissions-table/submissionsTable.component.tsx

@@ -8,9 +8,7 @@ export type SubmissionsTableProps = Omit<TableProps<Submission>, "columns"> & {
 };
 
 export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
-  const columns: any[] = React.useMemo(() => form && mapFormToColumns(form), [
-    form
-  ]);
+  const columns: any[] = React.useMemo(() => form && mapFormToColumns(form), [form]);
 
   return <Table {...props} columns={columns} />;
 }

package/src/components/submissions-table/submissionsTable.stories.tsx

@@ -55,7 +55,7 @@ export const Sandbox = (args: any) => {
   const onChange = (obj: any) => {
     setLimit(obj.pageSize);
     setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange(obj);
+    args.onChange && args.onChange(obj);
   };
 
   return (

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

@@ -5,16 +5,7 @@ export function DefaultArrowSort({ column }: any) {
   const { isSorted, isSortedDesc } = column;
   return (
     <span className={"table-arrow-sort"}>
-      {isSorted ? (
-        <i
-          className={iconClass(
-            undefined,
-            isSortedDesc ? "sort-up" : "sort-down"
-          )}
-        />
-      ) : (
-        ""
-      )}
+      {isSorted ? <i className={iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")} /> : ""}
     </span>
   );
 }

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

@@ -1,9 +1,6 @@
 import React from "react";
 
-export function DefaultCell({
-  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/components/defaultCellHeader.component.tsx

@@ -1,29 +1,19 @@
 import React from "react";
 import { HeaderGroup } from "react-table";
 
-export interface DefaultCellHeaderProps<Data extends object = any>
-  extends Record<string, unknown> {
+export interface DefaultCellHeaderProps<Data extends object = any> extends Record<string, unknown> {
   column: HeaderGroup<Data>;
 }
 
-export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({
-  column
-}: DefaultCellHeaderProps) {
+export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ column }: DefaultCellHeaderProps) {
   return (
     <div className={"table-cell-header"}>
-      <div
-        className='table-cell-header__label'
-        {...column.getSortByToggleProps()}
-      >
+      <div className='table-cell-header__label' {...column.getSortByToggleProps()}>
         <span>{column.render("Header")}</span>
 
         {column.render("ArrowSort")}
       </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")}</div> : null}
     </div>
   );
 }

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

@@ -1,36 +1,25 @@
 import React from "react";
 import { DefaultOperationButton } from "./defaultOperationButton.component";
 
-export function DefaultCellOperations({
-  operations,
-  row,
-  onClick,
-  ctx,
-  i18n
-}: any) {
+export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {
   const data = row.original;
 
   return (
     <div className='btn-group'>
       {operations
-        .filter(
-          ({ permissionsResolver }: any) =>
-            !permissionsResolver || permissionsResolver(data, ctx)
-        )
-        .map(
-          ({ OperationButton = DefaultOperationButton, ...operation }: any) => {
-            return (
-              <OperationButton
-                key={operation.action}
-                {...operation}
-                onClick={(action: string) => onClick(data, action)}
-                data={data}
-                i18n={i18n}
-                ctx={ctx}
-              />
-            );
-          }
-        )}
+        .filter(({ permissionsResolver }: any) => !permissionsResolver || permissionsResolver(data, ctx))
+        .map(({ OperationButton = DefaultOperationButton, ...operation }: any) => {
+          return (
+            <OperationButton
+              key={operation.action}
+              {...operation}
+              onClick={(action: string) => onClick(data, action)}
+              data={data}
+              i18n={i18n}
+              ctx={ctx}
+            />
+          );
+        })}
     </div>
   );
 }

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

@@ -31,13 +31,7 @@ export function DefaultOperationButton(props: OperationButtonProps) {
 
   return (
     <button
-      className={classnames(
-        className,
-        ["btn", buttonOutline && "outline", buttonType]
-          .filter(Boolean)
-          .join("-"),
-        `btn-${buttonSize}`
-      )}
+      className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
       onClick={stopPropagationWrapper(() => onClick(action))}
     >
       {icon ? (
@@ -45,9 +39,7 @@ export function DefaultOperationButton(props: OperationButtonProps) {
           <i className={iconClass(undefined, icon)} /> {title && " "}
         </>
       ) : null}
-      {title && (
-        <span className={icon && title ? "ml-1" : ""}>{i18n(title)}</span>
-      )}
+      {title && <span className={icon && title ? "ml-1" : ""}>{i18n(title)}</span>}
     </button>
   );
 }

package/src/components/table/filters/defaultColumnFilter.component.spec.tsx

@@ -13,13 +13,13 @@ describe("DefaultColumnFilter", () => {
     };
 
     const { getByRole } = render(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       <DefaultColumnFilter {...props} />
     );
 
     const input = getByRole("textbox");
 
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     await act(async () => {
       fireEvent.change(input, { target: { value: "value-test" } });
 

package/src/components/table/filters/selectColumnFilter.component.spec.tsx

@@ -11,15 +11,11 @@ describe("SelectColumnFilter", () => {
       setFilter: mockSetFilter,
       column: {
         id: "id",
-        preFilteredRows: [
-          { values: { id: "select-choice-1" } },
-          { values: { id: "select-choice-2" } }
-        ]
+        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }]
       }
     };
 
     const { getByText } = render(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       <SelectColumnFilter {...props} />
     );
@@ -34,16 +30,12 @@ describe("SelectColumnFilter", () => {
       setFilter: mockSetFilter,
       column: {
         id: "id",
-        preFilteredRows: [
-          { values: { id: "select-choice-1" } },
-          { values: { id: "select-choice-2" } }
-        ],
+        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }],
         choices: [{ label: "fake-choice", value: "fake-choice" }]
       }
     };
 
     const { queryByText, getByText } = render(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       <SelectColumnFilter {...props} />
     );

package/src/components/table/filters/selectColumnFilter.component.tsx

@@ -2,17 +2,13 @@ import React from "react";
 import { FilterProps } from "react-table";
 import { Select } from "../../select/select.component";
 
-export function SelectColumnFilter<D extends Record<string, unknown> = {}>({
-  column
-}: FilterProps<D>) {
+export function SelectColumnFilter<D extends Record<string, unknown> = {}>({ column }: FilterProps<D>) {
   const { id, preFilteredRows, filterValue, setFilter } = column;
   const { choices: customChoices } = column as any;
 
   const choices =
     customChoices ||
-    [...new Set(preFilteredRows.map((row) => row.values[id]))]
-      .filter((value) => value)
-      .map((value) => ({ label: value, value }));
+    [...new Set(preFilteredRows.map((row) => row.values[id]))].filter((value) => value).map((value) => ({ label: value, value }));
 
   return (
     <Select