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

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

@@ -1,69 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-
-import { render, screen } from "@testing-library/react";
-import React from "react";
-
-import { SelectColumnFilter } from "./selectColumnFilter.component";
-
-describe("SelectColumnFilter", () => {
-  it("should display select with choices", async () => {
-    const mockSetFilter = jest.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 = jest.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 = jest.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,52 +0,0 @@
-import React from "react";
-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,31 +0,0 @@
-import React from "react";
-import { FilterProps } from "react-table";
-
-export function SliderColumnFilter<D extends Record<string, unknown> = {}>({
-  column: { filterValue, setFilter, preFilteredRows, id }
-}: FilterProps<D>) {
-  const [min, max] = React.useMemo(() => {
-    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 [min, max];
-  }, [id, preFilteredRows]);
-
-  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>
-    </>
-  );
-}

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

@@ -1,272 +0,0 @@
-import noop from "lodash/noop";
-import React, { 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?: React.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?: React.ComponentType;
-  /**
-   * Custom ArrowSort
-   */
-  ArrowSort?: React.ComponentType;
-  /**
-   * Custom default ColumnFilter
-   */
-  ColumnFilter?: Renderer<FilterProps<Data>>;
-  /**
-   * Custom cell
-   */
-  Cell?: React.ComponentType<CellProps<Data>>;
-  /**
-   * Custom Row
-   */
-  Row?: React.ComponentType<DefaultRowProps<Data>>;
-  /**
-   *
-   */
-  CellHeader?: React.ComponentType<DefaultCellHeaderProps<Data>>;
-  /**
-   *
-   */
-  CellOperations?: React.ComponentType;
-  /**
-   * Custom Loader
-   */
-  Loader?: React.ComponentType;
-  /**
-   * Custom Loader
-   */
-  Pagination?: React.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 = React.useMemo(
-    () => ({
-      // Let's set up our default Filter UI
-      Filter: ColumnFilter,
-      ArrowSort
-    }),
-    [ColumnFilter, ArrowSort]
-  ) as any;
-
-  const [filterId, setFilterId] = React.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;
-
-  React.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 React, { 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 React, { 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>
-  );
-}