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

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

@@ -1,85 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
-
-import { Choicesjs, Sandbox } from "./select.stories";
-
-describe("Select", () => {
-  describe("select component Sandbox version", () => {
-    it("should render the select component", () => {
-      render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
-
-      expect(screen.getByTestId("select_test-sandbox")).toBeInTheDocument();
-    });
-
-    it("should render the select component with a different size", () => {
-      render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
-      const select = screen.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";
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-
-      expect(screen.getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-      expect(screen.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";
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-      const option = screen.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();
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
-
-      fireEvent.change(screen.getByTestId("select_test-sandbox"), {
-        target: { value: "value1" }
-      });
-
-      const option = screen.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";
-
-      render(
-        <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
-      );
-
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,88 +0,0 @@
-import Choices from "@formio/choices.js";
-import classnames from "classnames";
-import React, { type HTMLAttributes, type ReactElement, useEffect, useRef } from "react";
-
-import { getEventValue } from "../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
-
-export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
-  size?: string;
-  placeholder?: string;
-  choices: { label: string; value: Data }[];
-  layout?: "html5" | "choicesjs";
-  disabled?: boolean;
-  multiple?: boolean;
-}
-
-export function Select<Data = any>({
-  name,
-  label,
-  size,
-  onChange,
-  required,
-  value,
-  choices,
-  description,
-  placeholder,
-  prefix,
-  suffix,
-  multiple,
-  layout,
-  ...props
-}: SelectProps<Data>): ReactElement {
-  const ref = useRef<HTMLSelectElement>(null);
-
-  useEffect(() => {
-    let instance: any;
-
-    if (layout === "choicesjs") {
-      instance = new Choices(ref.current as unknown as HTMLInputElement, {
-        removeItemButton: true,
-        placeholderValue: placeholder
-      });
-    }
-
-    return () => {
-      instance && instance.destroy();
-    };
-  }, []);
-
-  choices =
-    layout === "choicesjs" || multiple || !placeholder
-      ? choices
-      : ([
-          {
-            label: placeholder,
-            value: ""
-          },
-          ...choices
-        ] as any[]);
-
-  return (
-    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
-      {}
-      <select
-        ref={ref}
-        data-testid={`select_${name}`}
-        {...props}
-        className={classnames("form-control", size && `form-control-${size}`)}
-        name={name}
-        id={name}
-        multiple={multiple}
-        value={value || ("" as any)}
-        placeholder={placeholder}
-        onChange={(event) => {
-          onChange && onChange(name, getEventValue(event));
-        }}
-      >
-        {choices.map(({ label, value }) => {
-          return (
-            <option key={String(value)} label={label} value={value as any}>
-              {label}
-            </option>
-          );
-        })}
-      </select>
-    </FormControl>
-  );
-}

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

@@ -1,173 +0,0 @@
-import React, { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { Select } from "./select.component";
-
-const choices = [
-  { label: "label1", value: "value1" },
-  { label: "label2", value: "value2" }
-];
-
-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/Select",
-  component: Select,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "select",
-        options: choices
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    layout: {
-      control: {
-        type: "select",
-        options: ["html5", "choicesjs"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Sandbox.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Choicesjs = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Choicesjs.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const ChoicesjsPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-ChoicesjsPrefix.args = {
-  label: "Label",
-  name: "name",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithSuffix = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const TypeMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-TypeMultiple.args = {
-  label: "Label",
-  name: "name",
-  value: [],
-  size: "",
-  multiple: true,
-  placeholder: "Placeholder",
-  description: "Select multiple values",
-  choices
-};
-
-export const ChoicesjsMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-ChoicesjsMultiple.args = {
-  label: "Label",
-  value: [],
-  size: "",
-  multiple: true,
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Sizing = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-Sizing.args = {
-  label: "Label",
-  value: "",
-  size: "sm",
-  placeholder: "Placeholder",
-  description: "Use dollars!",
-  choices
-};

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

@@ -1,16 +0,0 @@
-import React from "react";
-
-import { FormSchema, Submission } from "../../interfaces";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
-import { mapFormToColumns } from "../table/utils/mapFormToColumns";
-
-export type SubmissionsTableProps = Omit<TableProps<Submission>, "columns"> & {
-  form?: FormSchema;
-};
-
-export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
-  const columns: any[] | undefined = form && mapFormToColumns(form);
-
-  return <Table {...props} columns={columns!} />;
-}

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

@@ -1,12 +0,0 @@
-import React from "react";
-
-import { iconClass } from "../../../utils/iconClass";
-
-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")} /> : ""}
-    </span>
-  );
-}

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

@@ -1,15 +0,0 @@
-import React from "react";
-
-export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element {
-  if (value === undefined) {
-    return <span></span>;
-  }
-
-  const rendered = render(value);
-
-  if (value !== rendered) {
-    return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
-  }
-
-  return <span>{String(value)}</span>;
-}

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

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

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

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
-
-export interface DefaultCellOperationsProps {
-  operations: (OperationButtonProps & {
-    OperationButton: typeof DefaultOperationButton;
-    permissionsResolver?(data: unknown, ctx: any): boolean;
-  })[];
-  row: any;
-
-  onClick: (data: any, action: string) => void;
-  ctx: any;
-  i18n: (i18n: string) => string;
-}
-
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
-  const data = row.original;
-
-  return (
-    <div className='btn-group'>
-      {operations
-        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
-          return (
-            <OperationButton
-              key={operation.action}
-              {...operation}
-              data-testid={`operation-${index}-${operation.action}`}
-              onClick={(action: string) => onClick(data, action)}
-              data={data}
-              i18n={i18n}
-              ctx={ctx}
-            />
-          );
-        })}
-    </div>
-  );
-}

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { Row } from "react-table";
-
-import type { ExtendedCell } from "../hooks/useCustomTable.hook";
-
-export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
-  return (
-    <>
-      {row.cells.map((cell: ExtendedCell<Data>, i) => {
-        const { hidden, colspan } = cell.column;
-
-        if (hidden) {
-          return null;
-        }
-
-        return (
-          <td
-            colSpan={colspan}
-            {...cell.getCellProps({
-              className: cell.column.className,
-              style: cell.column.style
-            })}
-            key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}
-          >
-            {cell.render("Cell") as any}
-          </td>
-        );
-      })}
-    </>
-  );
-}

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

@@ -1,53 +0,0 @@
-import classnames from "classnames";
-import React, { type HTMLAttributes } from "react";
-
-import { iconClass } from "../../../utils/iconClass";
-import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
-
-export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
-  buttonType?: string;
-  buttonSize?: string;
-  buttonOutline?: boolean;
-  data: any[];
-  onClick: (action: string) => void;
-  action: string;
-  icon?: string;
-  title?: string;
-  i18n?: (i18n: string) => string;
-  ctx?: any;
-}
-
-export function DefaultOperationButton(props: OperationButtonProps) {
-  const {
-    className = "btn",
-    buttonSize = "xs",
-    buttonType = "primary",
-    buttonOutline,
-    onClick,
-    action,
-    icon = "",
-    title = "",
-    i18n = (f: string) => f,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    data,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ctx,
-    ...otherProps
-  } = props;
-
-  return (
-    <button
-      {...otherProps}
-      aria-label={"Operation button: " + (title || action)}
-      className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
-      onClick={stopPropagationWrapper(() => onClick(action))}
-    >
-      {icon ? (
-        <>
-          <i className={iconClass(undefined, icon)} /> {title && " "}
-        </>
-      ) : null}
-      {title && <span className={icon && title ? "ml-1" : ""}>{i18n(title)}</span>}
-    </button>
-  );
-}

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

@@ -1,51 +0,0 @@
-import classnames from "classnames";
-import React, { DetailedHTMLProps, HTMLAttributes } from "react";
-import { Row } from "react-table";
-
-import { iconClass } from "../../../utils/iconClass";
-import { useDndRow } from "../hooks/useDragnDropRow.hook";
-import { DefaultCells } from "./defaultCells.component";
-
-export interface DefaultRowProps<Data extends object = {}>
-  extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "onClick" | "onDrag" | "onDrop"> {
-  onClick: (data: any, action: string) => void;
-  row: Row<Data>;
-  index: number;
-  onDrop: (item: Data) => void;
-  onDrag: (index: number, hoverIndex: number) => void;
-  enableDragNDrop?: boolean;
-}
-
-export function DefaultDndRow<Data extends object = {}>(props: DefaultRowProps<Data>) {
-  const { isDragging, dragRef, dropRef, opacity } = useDndRow(props);
-
-  return (
-    <tr ref={dropRef} style={{ opacity }}>
-      {/* eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role */}
-      <td ref={dragRef} role='cell' style={{ cursor: isDragging ? "grabbing" : "grab" }} className='align-middle'>
-        <div className='flex items-center justify-center'>
-          <i className={classnames(iconClass(undefined, "dots-vertical-rounded"))} />
-        </div>
-      </td>
-      <DefaultCells<Data> {...props} />
-    </tr>
-  );
-}
-
-export function DefaultRow<Data extends object = {}>({ onClick, row, enableDragNDrop, onDrop, onDrag, ...props }: DefaultRowProps<Data>) {
-  const opts = {
-    ...props,
-    onClick: () => onClick(row.original, "row"),
-    ...row.getRowProps()
-  };
-
-  if (enableDragNDrop) {
-    return <DefaultDndRow<Data> {...opts} row={row} onDrag={onDrag} onDrop={onDrop} />;
-  }
-
-  return (
-    <tr {...opts}>
-      <DefaultCells<Data> row={row} />
-    </tr>
-  );
-}

package/src/components/table/components/dragNDropContainer.tsx

@@ -1,7 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-
-export function DrapNDropContainer({ enableDragNDrop, children }: PropsWithChildren<{ enableDragNDrop?: boolean }>) {
-  return enableDragNDrop ? <DndProvider backend={HTML5Backend}>{children}</DndProvider> : <>{children}</>;
-}

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

@@ -1,34 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
-
-import { DefaultColumnFilter } from "./defaultColumnFilter.component";
-
-describe("DefaultColumnFilter", () => {
-  it("should display text-field and handle change", async () => {
-    const props = {
-      filterId: "data.id",
-      setFilterId: jest.fn(),
-      name: "data.id",
-      column: { id: "id", filterValue: "", setFilter: jest.fn() }
-    };
-
-    render(
-      // @ts-ignore
-      <DefaultColumnFilter {...props} />
-    );
-
-    const input = screen.getByRole("textbox");
-
-    // eslint-disable-next-line testing-library/no-unnecessary-act
-    await act(async () => {
-      fireEvent.change(input, { target: { value: "value-test" } });
-
-      await new Promise((resolve) => setTimeout(resolve, 300));
-    });
-
-    expect(props.column.setFilter).toHaveBeenCalledWith("value-test");
-    expect(props.setFilterId).toHaveBeenCalledWith("id");
-  });
-});

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

@@ -1,39 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { FilterProps } from "react-table";
-
-import { InputText } from "../../input-text/inputText.component";
-
-export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
-  props: FilterProps<D> & { filterId: string; setFilterId: any }
-) {
-  const {
-    filterId,
-    setFilterId,
-    column: { id, filterValue, setFilter }
-  } = props;
-
-  const [value, setValue] = useState(filterValue || "");
-
-  const onChange = useCallback(
-    (name: string, value: any) => {
-      setValue(value);
-      setFilterId(id);
-      setFilter(value || undefined);
-    },
-    [id, setValue, setFilterId, setFilter]
-  );
-
-  /* eslint-disable jsx-a11y/no-autofocus */
-  return (
-    <InputText
-      size={"sm"}
-      id={id}
-      name={id}
-      key={id}
-      autoFocus={id === filterId}
-      value={value}
-      onChange={onChange}
-      placeholder={"Search records..."}
-    />
-  );
-}