@tsed/react-formio 2.0.2 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -23,13 +23,15 @@
     "lodash": ">=4.17.20",
     "prop-types": ">=15.7.2",
     "react": ">=16.14.0",
+    "react-dnd": ">=16.0.1",
+    "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "2.0.2",
-    "@tsed/tailwind-formio": "2.0.2"
+    "@tsed/tailwind": "2.1.0",
+    "@tsed/tailwind-formio": "2.1.0"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/actions-table/actionsTable.component.tsx

@@ -5,7 +5,8 @@ import React, { useState } from "react";
 import { ActionSchema } from "../../interfaces";
 import { iconClass } from "../../utils/iconClass";
 import { Select } from "../select/select.component";
-import { Table, TableProps } from "../table/table.component";
+import { TableProps } from "../table/hooks/useCustomTable.hook";
+import { Table } from "../table/table.component";
 
 export type ActionsTableProps = Omit<TableProps<ActionSchema>, "columns"> & {
   onAddAction?: (actionName: string) => void;

package/src/components/form-access/formAccess.component.tsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React, { PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState } from "react";
 
-import { FormOptions, FormSchema, Submission } from "../../interfaces";
+import type { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
 import { Form } from "../form/form.component";
 import { ChangedSubmission } from "../form/useForm.hook";

package/src/components/form-edit/formEdit.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { FormEdit } from "../../index";
+import { FormEdit } from "./formEdit.component";
 import { defaultDisplayChoices } from "./formParameters.component";
-
+console.log("===", FormEdit);
 export default {
   title: "ReactFormio/FormEdit",
   component: FormEdit,

package/src/components/forms-table/formsTable.component.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { FormSchema } from "../../interfaces";
 import { DefaultColumnFilter } from "../table/filters/defaultColumnFilter.component";
 import { SelectColumnFilter } from "../table/filters/selectColumnFilter.component";
-import { Table, TableProps } from "../table/table.component";
+import { TableProps } from "../table/hooks/useCustomTable.hook";
+import { Table } from "../table/table.component";
 import { FormsCell as DefaultFormCell } from "./components/formCell.component";
 
 export type FormsTableProps = Omit<TableProps<FormSchema>, "columns"> & {

package/src/components/forms-table/formsTable.stories.tsx

@@ -1,4 +1,4 @@
-import { ICONS } from "@tsed/tailwind-formio/lib/templates/tailwind/iconClass";
+import tailwind from "@tsed/tailwind-formio";
 import React from "react";
 
 import { FormsTable } from "./formsTable.component";
@@ -10,7 +10,7 @@ export default {
     icon: {
       control: {
         type: "select",
-        options: Object.keys(ICONS)
+        options: Object.keys(tailwind.templates.tailwind.ICONS)
       }
     },
     data: {

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

@@ -1,7 +1,8 @@
 import React from "react";
 
 import { FormSchema, Submission } from "../../interfaces";
-import { Table, TableProps } from "../table/table.component";
+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"> & {

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

@@ -0,0 +1,21 @@
+import { Row } from "react-table";
+
+export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
+  return (
+    <>
+      {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>
+        );
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,50 @@
+import classnames from "classnames";
+import React, { 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 }}>
+      <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

@@ -0,0 +1,7 @@
+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/hooks/useCustomTable.hook.tsx

@@ -0,0 +1,231 @@
+import noop from "lodash/noop";
+import React, { PropsWithChildren, useState } 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 { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
+import { DefaultColumnFilter } from "../filters/defaultColumnFilter.component";
+import { swapElements } from "../utils/swapElements";
+import { useOperations } from "./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>>;
+  /**
+   * 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,
+    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<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 {
+    ...props,
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick: _onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    i18n,
+    children,
+    onDrag: _onDrag,
+    onDrop: onDrop
+  };
+}

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

@@ -0,0 +1,80 @@
+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/index.ts

@@ -7,5 +7,6 @@ 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/useOperations.hook";