@tsed/react-formio 2.0.2 → 2.1.0

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

@@ -1,247 +1,97 @@
 import classnames from "classnames";
-import noop from "lodash/noop";
 import React, { PropsWithChildren } from "react";
-import { CellProps, 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 { DefaultColumnFilter } from "./filters/defaultColumnFilter.component";
-import { useOperations } from "./utils/useOperations.hook";
-
-export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
-  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[];
-  /**
-   *
-   */
-  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>>;
-  /**
-   *
-   */
-  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;
-}
-
-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];
 
+import { DrapNDropContainer } from "./components/dragNDropContainer";
+import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";
 export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
   const {
-    children,
-    className = "",
-    columns,
-    data,
-    onChange = noop,
-    onClick = noop,
-    operations = [],
-    pageSizes = [10, 25, 50, 100],
-    filters: controlledFilters,
-    filterId: controlledFilterId,
-    pageSize: controlledPageSize,
-    pageIndex: controlledPageIndex,
-    sortBy: controlledSortBy,
+    className,
+    tableInstance,
+    CellHeader,
     isLoading,
-    disableFilters,
+    onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
     disablePagination,
-    ArrowSort = DefaultArrowSort,
-    ColumnFilter = DefaultColumnFilter,
-    EmptyData = DefaultEmptyData,
-    Loader = DefaultLoader,
-    Pagination = DefaultPagination,
-    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);
-
-  const tableInstance = useTable<Data>(
-    {
-      ...props,
-      columns,
-      data,
-      ctx,
-      defaultColumn,
-      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 {
+    Pagination,
+    pageIndex,
+    pageSize,
+    pageSizes,
     setPageSize,
-    state: { pageIndex, pageSize, sortBy, filters }
-  } = tableInstance;
-
-  React.useEffect(() => {
-    onChange({
-      pageIndex,
-      pageSize,
-      sortBy,
-      filters,
-      filterId
-    });
-  }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
+    i18n,
+    enableDragNDrop,
+    children,
+    onDrag,
+    onDrop
+  } = useCustomTable(props);
 
   // Render the UI for your table
   return (
-    <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}`}>
-              {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) => {
-              tableInstance.prepareRow(row);
-              return (
-                <tr onClick={() => _onClick(row.original, "row")} {...row.getRowProps()} key={`tableInstance.page.${row.id}`}>
-                  {row.cells.map((cell, i) => {
-                    const { hidden, colspan } = cell.column as any;
-                    if (hidden) {
-                      return null;
-                    }
-                    return (
-                      <td colSpan={colspan} {...cell.getCellProps()} key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
-                        {cell.render("Cell")}
-                      </td>
-                    );
-                  })}
-                </tr>
-              );
-            })}
-          </tbody>
+    <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}
+              className={"text-sm"}
+              pageIndex={pageIndex}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              setPageSize={setPageSize}
+              i18n={i18n}
+            />
+          </div>
         ) : null}
-      </table>
-      {isLoading ? <Loader /> : null}
-      {!data.length ? <EmptyData /> : null}
-      {!isLoading && data.length && !disablePagination ? (
-        <div className={"overflow-hidden"}>
-          <Pagination
-            {...tableInstance}
-            className={"text-sm"}
-            pageIndex={pageIndex}
-            pageSize={pageSize}
-            pageSizes={pageSizes}
-            setPageSize={setPageSize}
-            i18n={i18n}
-          />
-        </div>
-      ) : null}
-      {children}
-    </div>
+        {children}
+      </div>
+    </DrapNDropContainer>
   );
 }

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

@@ -62,3 +62,59 @@ Sandbox.args = {
     }
   ]
 };
+
+export const TableWithDragNDrop = (args: any) => {
+  const [skip, setSkip] = React.useState(0);
+  const [limit, setLimit] = React.useState(10);
+  const [serverCount] = React.useState(87);
+  const [data, setData] = React.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/swapElements.spec.ts

@@ -0,0 +1,7 @@
+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

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