@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/molecules/table/hooks/useCustomTable.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 "../../../molecules/pagination/Pagination";
-import { DefaultArrowSort } from "../components/DefaultArrowSort";
-import { DefaultCellHeader, DefaultCellHeaderProps } from "../components/DefaultCellHeader";
-import { DefaultRow, DefaultRowProps } from "../components/DefaultRow";
-import { DefaultColumnFilter } from "../filters/DefaultColumnFilter";
-import { swapElements } from "../utils/swapElements";
-import { useOperations } from "./useOperations";
-
-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<any>;
-  /**
-   * Custom Loader
-   */
-  Loader?: ComponentType<any>;
-  /**
-   * Custom Loader
-   */
-  Pagination?: ComponentType<any>;
-  /**
-   * 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 as any;
-
-  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/molecules/table/hooks/useDragnDropRow.ts

@@ -1,80 +0,0 @@
-import { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
-
-import { DefaultRowProps } from "../components/DefaultRow";
-
-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/molecules/table/hooks/useOperations.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";
-
-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/molecules/table/index.ts

@@ -1,15 +0,0 @@
-export * from "./components/DefaultArrowSort";
-export * from "./components/DefaultCell";
-export * from "./components/DefaultCellHeader";
-export * from "./components/DefaultCellHeader";
-export * from "./components/DefaultCellOperations";
-export * from "./components/DefaultOperationButton";
-export * from "./filters/DefaultColumnFilter";
-export * from "./filters/SelectColumnFilter";
-export * from "./filters/SliderColumnFilter";
-export * from "./hooks/useCustomTable";
-export * from "./hooks/useOperations";
-export * from "./Table";
-export * from "./utils/getPageNumbers";
-export * from "./utils/mapFormToColumns";
-export * from "./utils/swapElements";

package/src/molecules/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/molecules/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;
-};