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

package/src/components/table/hooks/useCustomTable.hook.tsx

@@ -1,268 +0,0 @@
-import noop from "lodash/noop";
-import { ComponentType, CSSProperties, PropsWithChildren, useEffect, useState } from "react";
-import {
-  Cell,
-  CellProps,
-  Column,
-  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 { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
-import { DefaultColumnFilter } from "../filters/defaultColumnFilter.component";
-import { swapElements } from "../utils/swapElements";
-import { useOperations } from "./useOperations.hook";
-
-export interface ExtraColumnProps {
-  colspan?: number;
-  hidden?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
-
-export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
-  column: ExtraColumnProps;
-};
-
-export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
-  /**
-   * extended columns interface
-   */
-  columns: ReadonlyArray<ExtendedColumn<Data>>;
-
-  className?: string;
-  /**
-   * Call the listener when a filter / pagination  / sort change.
-   */
-  onChange?: (query: QueryOptions) => void;
-  /**
-   * Call the listener when a line is clicked.
-   */
-  onClick?: OnClickOperation<Data>;
-  /**
-   * Pagination steps list
-   */
-  pageSizes?: number[];
-  /**
-   * Total length of the data
-   */
-  totalLength?: number;
-  /**
-   *
-   */
-  isLoading?: boolean;
-  /**
-   * Custom EmptyData displayed when there is no data
-   */
-  EmptyData?: ComponentType;
-  /**
-   * Custom ArrowSort
-   */
-  ArrowSort?: ComponentType;
-  /**
-   * Custom default ColumnFilter
-   */
-  ColumnFilter?: Renderer<FilterProps<Data>>;
-  /**
-   * Custom cell
-   */
-  Cell?: ComponentType<CellProps<Data>>;
-  /**
-   * Custom Row
-   */
-  Row?: ComponentType<DefaultRowProps<Data>>;
-  /**
-   *
-   */
-  CellHeader?: ComponentType<DefaultCellHeaderProps<Data>>;
-  /**
-   *
-   */
-  CellOperations?: ComponentType;
-  /**
-   * Custom Loader
-   */
-  Loader?: ComponentType;
-  /**
-   * Custom Loader
-   */
-  Pagination?: ComponentType;
-  /**
-   * Disable filters
-   */
-  disableFilters?: boolean;
-  /**
-   * Disable pagination
-   */
-  disablePagination?: boolean;
-  manualPagination?: boolean;
-  manualSortBy?: boolean;
-  manualFilters?: boolean;
-  /**
-   * Configuration operation for each line.
-   */
-  operations?: Operation[];
-
-  i18n?: (f: string) => string;
-
-  /**
-   * Enable drag and drop rows
-   */
-  enableDragNDrop?: boolean;
-  onDrag?: (data: Data[]) => void;
-  onDrop?: (item: Data) => void;
-}
-
-export function getOperationCallback(operations: Operation[], onClick: OnClickOperation) {
-  return (data: any, action: string) => {
-    const operation = operations.find((operation) => operation.action === action || operation.alias === action);
-    if (operation) {
-      onClick(data, operation);
-    }
-  };
-}
-
-function DefaultLoader() {
-  return <div className={"text-center p-2 pb-4 font-bold"}>Loading in progress</div>;
-}
-
-function DefaultEmptyData() {
-  return <div className='text-center p-2 pb-4 font-bold'>No data found</div>;
-}
-
-const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
-
-export function useCustomTable<Data extends object = {}>(props: PropsWithChildren<TableProps<Data>>) {
-  const {
-    children,
-    className = "",
-    columns,
-    data,
-    onChange = noop,
-    onClick = noop,
-    onDrag = noop,
-    onDrop = noop,
-    operations = [],
-    pageSizes = [10, 25, 50, 100],
-    filters: controlledFilters,
-    filterId: controlledFilterId,
-    pageSize: controlledPageSize,
-    pageIndex: controlledPageIndex,
-    totalLength,
-    sortBy: controlledSortBy,
-    isLoading,
-    disableFilters,
-    disablePagination,
-    ArrowSort = DefaultArrowSort,
-    ColumnFilter = DefaultColumnFilter,
-    EmptyData = DefaultEmptyData,
-    Loader = DefaultLoader,
-    Pagination = DefaultPagination,
-    Row = DefaultRow,
-    CellHeader = DefaultCellHeader as any,
-    CellOperations,
-    i18n = (f: string) => f,
-    ...ctx
-  } = props;
-
-  const _onClick = getOperationCallback(operations, onClick);
-
-  const defaultColumn = {
-    Filter: ColumnFilter,
-    ArrowSort
-  };
-
-  const [filterId, setFilterId] = useState(controlledFilterId);
-
-  // DND
-  const [records, setRecords] = useState<readonly Data[]>(data);
-
-  useEffect(() => {
-    setRecords(data);
-  }, [data]);
-
-  const _onDrag = (dragIndex: number, hoverIndex: number) => {
-    const newRecords = swapElements([...records], dragIndex, hoverIndex);
-
-    setRecords(newRecords);
-
-    onDrag(newRecords);
-  };
-
-  const tableInstance = useTable<Data>(
-    {
-      ...props,
-      columns,
-      data,
-      ctx,
-      defaultColumn,
-      // getRowId,
-      initialState: {
-        ...(props.initialState || {}),
-        filters: controlledFilters || [],
-        pageIndex: controlledPageIndex || 0,
-        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,
-      disableFilters,
-      filterId,
-      setFilterId
-    } as any,
-    ...hooks,
-    useOperations({ operations, CellOperations, onClick: _onClick, ctx, i18n })
-  );
-
-  const {
-    setPageSize,
-    state: { pageIndex, pageSize, sortBy, filters }
-  } = tableInstance;
-
-  useEffect(() => {
-    onChange({
-      pageIndex,
-      pageSize,
-      sortBy,
-      filters,
-      filterId
-    });
-  }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
-
-  return {
-    className,
-    tableInstance,
-    CellHeader,
-    isLoading,
-    Loader,
-    EmptyData,
-    Row,
-    data,
-    disablePagination,
-    Pagination,
-    pageIndex,
-    pageSize,
-    pageSizes,
-    totalLength,
-    setPageSize,
-    i18n,
-    children,
-    onClick: _onClick as any,
-    onDrag: _onDrag,
-    onDrop: onDrop,
-    enableDragNDrop: props.enableDragNDrop
-  };
-}

package/src/components/table/hooks/useDragnDropRow.hook.ts

@@ -1,80 +0,0 @@
-import { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
-
-import { DefaultRowProps } from "../components/defaultRow.component";
-
-const DND_ITEM_TYPE = "row";
-
-export function useDndRow<Data extends object = {}>({ onDrag, onDrop, index, ...props }: DefaultRowProps<Data>) {
-  const dropRef = useRef<HTMLTableRowElement>(null);
-  const dragRef = useRef<HTMLTableDataCellElement>(null);
-
-  const [, drop] = useDrop<Data>({
-    accept: DND_ITEM_TYPE,
-    drop(item) {
-      onDrop(item);
-    },
-    hover(item: any, monitor) {
-      if (!dropRef.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      // Determine rectangle on screen
-      const hoverBoundingRect = dropRef.current!.getBoundingClientRect();
-      // Get vertical middle
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      if (!clientOffset) {
-        return;
-      }
-      // Get pixels to the top
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      // Only perform the move when the mouse has crossed half of the items height
-      // When dragging downwards, only move when the cursor is below 50%
-      // When dragging upwards, only move when the cursor is above 50%
-      // Dragging downwards
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-
-      // Time to actually perform the action
-      onDrag(dragIndex, hoverIndex);
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      item.index = hoverIndex;
-    }
-  });
-
-  const [{ isDragging }, drag, preview] = useDrag(() => ({
-    type: DND_ITEM_TYPE,
-    item: { index },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  }));
-
-  const opacity = isDragging ? 0 : 1;
-
-  preview(drop(dropRef));
-  drag(dragRef);
-
-  return {
-    ...props,
-    opacity,
-    isDragging,
-    dropRef,
-    dragRef
-  };
-}

package/src/components/table/hooks/useOperations.hook.tsx

@@ -1,39 +0,0 @@
-import { type ComponentType, type FunctionComponent } from "react";
-import { Hooks } from "react-table";
-
-import { Operation } from "../../../interfaces";
-import { DefaultCellOperations } from "../components/defaultCellOperations.component";
-
-export type UseOperationsHookProps = {
-  CellOperations?: FunctionComponent | ComponentType<{}>;
-  operations: Operation[];
-  onClick?: (data: any, event: string) => void;
-  i18n?: (f: string) => string;
-  ctx?: any;
-};
-
-export function useOperations<D extends object = {}>({
-  operations,
-  CellOperations = DefaultCellOperations as FunctionComponent,
-  onClick,
-  i18n = (f: string) => f,
-  ctx
-}: UseOperationsHookProps) {
-  return (hooks: Hooks<D>): void => {
-    hooks.visibleColumns.push((columns) => {
-      if (!operations.length) {
-        return columns;
-      }
-
-      return [
-        ...columns,
-        {
-          id: "operations",
-          groupByBoundary: true,
-          Header: () => <div className={"text-center"}>{i18n("Operations")}</div>,
-          Cell: (props: any) => <CellOperations {...props} operations={operations} onClick={onClick} ctx={ctx} i18n={i18n} />
-        }
-      ];
-    });
-  };
-}

package/src/components/table/index.ts

@@ -1,15 +0,0 @@
-export * from "./components/defaultArrowSort.component";
-export * from "./components/defaultCell.component";
-export * from "./components/defaultCellHeader.component";
-export * from "./components/defaultCellHeader.component";
-export * from "./components/defaultCellOperations.component";
-export * from "./components/defaultOperationButton.component";
-export * from "./filters/defaultColumnFilter.component";
-export * from "./filters/selectColumnFilter.component";
-export * from "./filters/sliderColumnFilter.component";
-export * from "./hooks/useCustomTable.hook";
-export * from "./hooks/useOperations.hook";
-export * from "./table.component";
-export * from "./utils/getPageNumbers";
-export * from "./utils/mapFormToColumns";
-export * from "./utils/swapElements";

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

@@ -1,100 +0,0 @@
-import classnames from "classnames";
-import { PropsWithChildren } from "react";
-
-import { DrapNDropContainer } from "./components/dragNDropContainer";
-import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";
-
-export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
-  const {
-    className,
-    tableInstance,
-    CellHeader,
-    isLoading,
-    onClick,
-    Loader,
-    EmptyData,
-    Row,
-    data,
-    disablePagination,
-    Pagination,
-    pageIndex,
-    pageSize,
-    pageSizes,
-    setPageSize,
-    totalLength,
-    i18n,
-    enableDragNDrop,
-    children,
-    onDrag,
-    onDrop
-  } = useCustomTable(props);
-
-  // Render the UI for your table
-  return (
-    <DrapNDropContainer enableDragNDrop={enableDragNDrop}>
-      <div className={classnames("table-group table-responsive", className)}>
-        <table
-          className={"table table-striped table-hover"}
-          {...tableInstance.getTableProps()}
-          /* style={{ marginBottom: disablePagination ? "-1px" : "0px" }} */
-        >
-          <thead>
-            {tableInstance.headerGroups.map((headerGroup, i) => (
-              <tr {...headerGroup.getHeaderGroupProps()} key={`tableInstance.headerGroups${i}`}>
-                {enableDragNDrop ? (
-                  <th role='columnheader' className='text-center'>
-                    <div className='table-cell-header'></div>
-                  </th>
-                ) : null}
-                {headerGroup.headers.map((column) => (
-                  <th
-                    /* className='text-left py-2 align-top' */
-                    {...column.getHeaderProps()}
-                    key={`tableInstance.headers.column.${column.id}`}
-                  >
-                    <CellHeader column={column} />
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          {!isLoading ? (
-            <tbody {...tableInstance.getTableBodyProps()}>
-              {tableInstance.page.map((row, index) => {
-                tableInstance.prepareRow(row);
-                return (
-                  <Row<Data>
-                    index={index}
-                    enableDragNDrop={enableDragNDrop}
-                    onClick={onClick}
-                    row={row}
-                    key={`tableInstance.page.${row.id}`}
-                    onDrag={onDrag}
-                    onDrop={onDrop}
-                  />
-                );
-              })}
-            </tbody>
-          ) : null}
-        </table>
-        {isLoading ? <Loader /> : null}
-        {!data.length ? <EmptyData /> : null}
-        {!isLoading && data.length && !disablePagination ? (
-          <div className={"overflow-hidden"}>
-            <Pagination
-              {...tableInstance}
-              totalLength={totalLength}
-              className={"text-sm"}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              setPageSize={setPageSize}
-              i18n={i18n}
-            />
-          </div>
-        ) : null}
-        {children}
-      </div>
-    </DrapNDropContainer>
-  );
-}

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

@@ -1,120 +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 { Table } from "./table.component";
-import { mapFormToColumns } from "./utils/mapFormToColumns";
-
-export default {
-  title: "ReactFormio/Table",
-  component: Table,
-  argTypes: {},
-  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 (
-    <Table
-      {...args}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-    />
-  );
-};
-
-Sandbox.args = {
-  data: formSubmissions,
-  columns: mapFormToColumns(formSchema as any),
-  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;
-      }
-    }
-  ]
-};
-
-export const TableWithDragNDrop = (args: any) => {
-  const [skip, setSkip] = useState(0);
-  const [limit, setLimit] = useState(10);
-  const [serverCount] = useState(87);
-  const [data, setData] = useState(() => formSubmissions);
-
-  const onChange = (obj: any) => {
-    setLimit(obj.pageSize);
-    setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange && args.onChange(obj);
-  };
-
-  return (
-    <Table
-      {...args}
-      data={data}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-      onDrag={(data) => {
-        setData(data);
-      }}
-    />
-  );
-};
-
-TableWithDragNDrop.args = {
-  enableDragNDrop: true,
-  data: [],
-  columns: mapFormToColumns(formSchema as any),
-  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/utils/mapFormToColumns.tsx

@@ -1,33 +0,0 @@
-import { Components, ExtendedComponentSchema } from "formiojs";
-import FormioUtils from "formiojs/utils";
-
-import { FormSchema } from "../../../interfaces";
-import { DefaultCell } from "../components/defaultCell.component";
-import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
-import { ExtendedColumn } from "../hooks/useCustomTable.hook";
-
-export function mapFormToColumns(form: FormSchema): ExtendedColumn[] {
-  const columns: ExtendedColumn[] = [];
-
-  FormioUtils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
-    if (component.tableView && component.key) {
-      const cmp: any = Components.create(component, {}, null, true);
-
-      const column: ExtendedColumn = {
-        Header: component.label || component.title || component.key,
-        accessor: `data.${component.key}`,
-        className: "text-center",
-        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);
-    }
-  });
-
-  return columns;
-}

package/src/components/table/utils/swapElements.spec.ts

@@ -1,7 +0,0 @@
-import { swapElements } from "./swapElements";
-
-describe("swapElements", () => {
-  it("should swap elements in array", () => {
-    expect(swapElements([1, 2, 3, 4, 5], 1, 3)).toEqual([1, 4, 3, 2, 5]);
-  });
-});

package/src/components/table/utils/swapElements.ts

@@ -1,7 +0,0 @@
-export const swapElements = <T = any>(myArray: T[], index1: number, index2: number): T[] => {
-  myArray = [...myArray];
-
-  [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
-
-  return myArray;
-};