@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -1,14 +0,0 @@
-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/submissions-table/submissionsTable.stories.tsx

@@ -1,99 +0,0 @@
-import { useState } from "react";
-
-import { mapPagination } from "../../utils/mapPagination";
-import formSchema from "../__fixtures__/form-schema.json";
-import formSubmissions from "../__fixtures__/form-submissions.json";
-import { SubmissionsTable } from "./submissionsTable.component";
-
-export default {
-  title: "ReactFormio/SubmissionsTable",
-  component: SubmissionsTable,
-  argTypes: {
-    form: {
-      control: {
-        type: "object"
-      }
-    },
-    data: {
-      control: {
-        type: "object"
-      }
-    },
-    operations: {
-      control: {
-        type: "object"
-      }
-    },
-    isLoading: {
-      control: {
-        type: "boolean"
-      }
-    },
-    isEmpty: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disableFilters: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disablePagination: {
-      control: {
-        type: "boolean"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const [skip, setSkip] = useState(0);
-  const [limit, setLimit] = useState(10);
-  const [serverCount] = useState(87);
-
-  const onChange = (obj: any) => {
-    setLimit(obj.pageSize);
-    setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange && args.onChange(obj);
-  };
-
-  return (
-    <SubmissionsTable
-      {...args}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-    />
-  );
-};
-
-Sandbox.args = {
-  form: formSchema,
-  data: formSubmissions,
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
-      }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
-      }
-    }
-  ]
-};

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

@@ -1,10 +0,0 @@
-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,13 +0,0 @@
-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,18 +0,0 @@
-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,37 +0,0 @@
-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,30 +0,0 @@
-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,56 +0,0 @@
-import classnames from "classnames";
-import { 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;
-  permissionsResolver?: (ctx: any) => boolean;
-}
-
-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,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    permissionsResolver,
-    ...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 { 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 { 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,31 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-
-import { DefaultColumnFilter } from "./defaultColumnFilter.component";
-
-describe("DefaultColumnFilter", () => {
-  it("should display text-field and handle change", async () => {
-    const props = {
-      filterId: "data.id",
-      setFilterId: vi.fn(),
-      name: "data.id",
-      column: { id: "id", filterValue: "", setFilter: vi.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 { 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..."}
-    />
-  );
-}

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

@@ -1,66 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { SelectColumnFilter } from "./selectColumnFilter.component";
-
-describe("SelectColumnFilter", () => {
-  it("should display select with choices", async () => {
-    const mockSetFilter = vi.fn();
-    const props = {
-      name: "data.id",
-      setFilter: mockSetFilter,
-      column: {
-        id: "id",
-        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }]
-      }
-    };
-
-    render(
-      // @ts-ignore
-      <SelectColumnFilter {...props} />
-    );
-
-    expect(screen.getByText("select-choice-1")).toBeDefined();
-    expect(screen.getByText("select-choice-2")).toBeDefined();
-  });
-  it("should display select with custom choices", async () => {
-    const mockSetFilter = vi.fn();
-    const props = {
-      name: "data.id",
-      setFilter: mockSetFilter,
-      column: {
-        id: "id",
-        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }],
-        choices: [{ label: "fake-choice", value: "fake-choice" }]
-      }
-    };
-
-    render(
-      // @ts-ignore
-      <SelectColumnFilter {...props} />
-    );
-
-    expect(screen.queryByText("select-choice-1")).toBeNull();
-    expect(screen.getByText("fake-choice")).toBeDefined();
-  });
-
-  it("should display select with custom choices (function)", async () => {
-    const mockSetFilter = vi.fn();
-    const props = {
-      name: "data.id",
-      setFilter: mockSetFilter,
-      column: {
-        id: "id",
-        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }],
-        choices: () => [{ label: "fake-choice", value: "fake-choice" }]
-      }
-    };
-
-    render(
-      // @ts-ignore
-      <SelectColumnFilter {...props} />
-    );
-
-    expect(screen.queryByText("select-choice-1")).toBeNull();
-    expect(screen.getByText("fake-choice")).toBeDefined();
-  });
-});

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

@@ -1,51 +0,0 @@
-import { FilterProps } from "react-table";
-
-import { Select } from "../../select/select.component";
-
-export function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
-  const { column } = props;
-  const { id, preFilteredRows } = column;
-  const { choices: customChoices } = column as any;
-  const { filterValue, setFilter } = column;
-
-  const choices = (() => {
-    if (customChoices) {
-      if (typeof customChoices === "function") {
-        return customChoices(props);
-      }
-      return customChoices;
-    }
-
-    return [...new Set(preFilteredRows.map((row) => row.values[id]))]
-      .filter((value) => value)
-      .map((value) => ({
-        label: value,
-        value
-      }));
-  })();
-
-  const onChange = (_: string, value: any) => {
-    setFilter(value || undefined);
-  };
-
-  return {
-    value: filterValue,
-    onChange,
-    choices: [{ value: "", label: "All" }].concat(choices)
-  };
-}
-
-export function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
-  const { value, choices, onChange } = useSelectColumnFilter(props);
-
-  return (
-    <Select
-      key={`filter-${props.column.id}`}
-      name={`filter-${props.column.id}`}
-      size={"sm"}
-      value={value}
-      choices={choices}
-      onChange={onChange}
-    />
-  );
-}

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

@@ -1,28 +0,0 @@
-import { FilterProps } from "react-table";
-
-export function SliderColumnFilter<D extends Record<string, unknown> = {}>({
-  column: { filterValue, setFilter, preFilteredRows, id }
-}: FilterProps<D>) {
-  let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-  let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-
-  preFilteredRows.forEach((row) => {
-    min = Math.min(row?.values[id], min);
-    max = Math.max(row?.values[id], max);
-  });
-
-  return (
-    <>
-      <input
-        type='range'
-        min={min}
-        max={max}
-        value={filterValue || min}
-        onChange={(e) => {
-          setFilter(parseInt(e.target.value, 10));
-        }}
-      />
-      <button onClick={() => setFilter(undefined)}>Off</button>
-    </>
-  );
-}