@tsed/react-formio 1.11.2 → 1.12.0

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

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

@@ -1,30 +1,15 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
 import React, { PropsWithChildren } from "react";
-import {
-  CellProps,
-  FilterProps,
-  Renderer,
-  TableOptions,
-  useFilters,
-  useGroupBy,
-  usePagination,
-  useSortBy,
-  useTable
-} from "react-table";
+import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
 import { OnClickOperation, Operation, QueryOptions } from "../../interfaces";
 import { Pagination as DefaultPagination } from "../pagination/pagination.component";
 import { DefaultArrowSort } from "./components/defaultArrowSort.component";
-import {
-  DefaultCellHeader,
-  DefaultCellHeaderProps
-} from "./components/defaultCellHeader.component";
+import { DefaultCellHeader, DefaultCellHeaderProps } from "./components/defaultCellHeader.component";
 import { DefaultColumnFilter } from "./filters/defaultColumnFilter.component";
 import { useOperations } from "./utils/useOperations.hook";
 
-export interface TableProps<Data extends object = any>
-  extends TableOptions<Data>,
-    Partial<QueryOptions> {
+export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
   className?: string;
   /**
    * Call the listener when a filter / pagination  / sort change.
@@ -93,14 +78,9 @@ export interface TableProps<Data extends object = any>
   i18n?: (f: string) => string;
 }
 
-function getOperationCallback(
-  operations: Operation[],
-  onClick: OnClickOperation
-) {
+function getOperationCallback(operations: Operation[], onClick: OnClickOperation) {
   return (data: any, action: string) => {
-    const operation = operations.find(
-      (operation) => operation.action === action || operation.alias === action
-    );
+    const operation = operations.find((operation) => operation.action === action || operation.alias === action);
     if (operation) {
       onClick(data, operation);
     }
@@ -108,9 +88,7 @@ function getOperationCallback(
 }
 
 function DefaultLoader() {
-  return (
-    <div className={"text-center p-2 pb-4 font-bold"}>Loading in progress</div>
-  );
+  return <div className={"text-center p-2 pb-4 font-bold"}>Loading in progress</div>;
 }
 
 function DefaultEmptyData() {
@@ -119,9 +97,7 @@ function DefaultEmptyData() {
 
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
 
-export function Table<Data extends object = any>(
-  props: PropsWithChildren<TableProps<Data>>
-) {
+export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
   const {
     children,
     className = "",
@@ -177,12 +153,9 @@ export function Table<Data extends object = any>(
         pageSize: controlledPageSize || 10,
         sortBy: controlledSortBy || []
       } as any,
-      manualPagination:
-        props.manualPagination === undefined ? true : props.manualPagination,
-      manualSortBy:
-        props.manualSortBy === undefined ? true : props.manualPagination,
-      manualFilters:
-        props.manualFilters === undefined ? true : props.manualFilters,
+      manualPagination: props.manualPagination === undefined ? true : props.manualPagination,
+      manualSortBy: props.manualSortBy === undefined ? true : props.manualPagination,
+      manualFilters: props.manualFilters === undefined ? true : props.manualFilters,
       disableFilters,
       filterId,
       setFilterId
@@ -216,10 +189,7 @@ export function Table<Data extends object = any>(
       >
         <thead>
           {tableInstance.headerGroups.map((headerGroup, i) => (
-            <tr
-              key={`tableInstance.headerGroups${i}`}
-              {...headerGroup.getHeaderGroupProps()}
-            >
+            <tr key={`tableInstance.headerGroups${i}`} {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
                 <th
                   key={`tableInstance.headers.column.${column.id}`}
@@ -237,24 +207,14 @@ export function Table<Data extends object = any>(
             {tableInstance.page.map((row) => {
               tableInstance.prepareRow(row);
               return (
-                <tr
-                  key={`tableInstance.page.${row.id}`}
-                  onClick={() => _onClick(row.original, "row")}
-                  {...row.getRowProps()}
-                >
+                <tr key={`tableInstance.page.${row.id}`} onClick={() => _onClick(row.original, "row")} {...row.getRowProps()}>
                   {row.cells.map((cell, i) => {
                     const { hidden, colspan } = cell.column as any;
                     if (hidden) {
                       return null;
                     }
                     return (
-                      <td
-                        key={`tableInstance.page.cells.${
-                          cell.value || "value"
-                        }.${i}`}
-                        colSpan={colspan}
-                        {...cell.getCellProps()}
-                      >
+                      <td key={`tableInstance.page.cells.${cell.value || "value"}.${i}`} colSpan={colspan} {...cell.getCellProps()}>
                         {cell.render("Cell")}
                       </td>
                     );

package/src/components/table/table.stories.tsx

@@ -20,7 +20,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/utils/getPageNumbers.ts

@@ -13,23 +13,15 @@ function range(from: number, to: number, step = 1): any[] {
   return range;
 }
 
-export function getPageNumbers({
-  currentPage,
-  pageNeighbours = 1,
-  totalPages
-}: any) {
+export function getPageNumbers({ currentPage, pageNeighbours = 1, totalPages }: any) {
   const totalNumbers = pageNeighbours * 2 + 3;
   const totalBlocks = totalNumbers + 2;
 
   if (totalPages > totalBlocks) {
     const calculatedStartPage = Math.max(2, currentPage - pageNeighbours);
-    const calculatedEndPage = Math.min(
-      totalPages - 1,
-      currentPage + pageNeighbours
-    );
+    const calculatedEndPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
     const startPage = calculatedStartPage === 3 ? 2 : calculatedStartPage;
-    const endPage =
-      calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
+    const endPage = calculatedEndPage === totalPages - 2 ? totalPages - 1 : calculatedEndPage;
 
     let pages = range(startPage, endPage);
 

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

@@ -9,32 +9,24 @@ import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
 export function mapFormToColumns(form: FormSchema): Column[] {
   const columns: Column[] = [];
 
-  FormioUtils.eachComponent(
-    form.components,
-    (component: ExtendedComponentSchema) => {
-      if (component.tableView && component.key) {
-        const cmp: any = Components.create(component, null, null, true);
+  FormioUtils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
+    if (component.tableView && component.key) {
+      const cmp: any = Components.create(component, null, null, true);
 
-        const column: Column = {
-          Header: component.label || component.title || component.key,
-          accessor: `data.${component.key}`,
-          Cell: (props: any) => (
-            <DefaultCell
-              {...props}
-              render={(value: any) => cmp.asString(value)}
-            />
-          )
-        };
+      const column: Column = {
+        Header: component.label || component.title || component.key,
+        accessor: `data.${component.key}`,
+        Cell: (props: any) => <DefaultCell {...props} render={(value: any) => cmp.asString(value)} />
+      };
 
-        if (component.type === "select" && component.dataSrc === "values") {
-          column.Filter = SelectColumnFilter;
-          (column as any).choices = component.data.values;
-        }
-
-        columns.push(column);
+      if (component.type === "select" && component.dataSrc === "values") {
+        column.Filter = SelectColumnFilter;
+        (column as any).choices = component.data.values;
       }
+
+      columns.push(column);
     }
-  );
+  });
 
   return columns;
 }