@tsed/react-formio 2.0.3 → 2.1.1

package/dist/index.modern.js

@@ -8,6 +8,8 @@ import { Templates, Form as Form$1, Components } from 'formiojs';
 export { Components, Formio, Templates, Utils } from 'formiojs';
 import Choices from '@formio/choices.js';
 import PropTypes from 'prop-types';
+import { DndProvider, useDrop, useDrag } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTable, useFilters, useGroupBy, useSortBy, usePagination } from 'react-table';
 import AllComponents from 'formiojs/components';
 import cloneDeep from 'lodash/cloneDeep';
@@ -235,6 +237,15 @@ Select.propTypes = {
   choices: PropTypes.array.isRequired
 };
 
+function DrapNDropContainer({
+  enableDragNDrop,
+  children
+}) {
+  return enableDragNDrop ? /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 const LEFT_PAGE = "LEFT";
 const RIGHT_PAGE = "RIGHT";
 function range(from, to, step = 1) {
@@ -394,6 +405,154 @@ function DefaultCellHeader({
   }, column.render("Filter")) : null);
 }
 
+const _excluded$2 = ["onDrag", "onDrop", "index"];
+const DND_ITEM_TYPE = "row";
+function useDndRow(_ref) {
+  let {
+      onDrag,
+      onDrop,
+      index
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const dropRef = useRef(null);
+  const dragRef = useRef(null);
+  const [, drop] = useDrop({
+    accept: DND_ITEM_TYPE,
+    drop(item) {
+      onDrop(item);
+    },
+    hover(item, 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 _extends({}, props, {
+    opacity,
+    isDragging,
+    dropRef,
+    dragRef
+  });
+}
+
+function DefaultCells({
+  row
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, row.cells.map((cell, i) => {
+    const {
+      hidden,
+      colspan
+    } = cell.column;
+    if (hidden) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("td", _extends({
+      colSpan: colspan
+    }, cell.getCellProps(), {
+      key: `tableInstance.page.cells.${cell.value || "value"}.${i}`
+    }), cell.render("Cell"));
+  }));
+}
+
+const _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
+function DefaultDndRow(props) {
+  const {
+    isDragging,
+    dragRef,
+    dropRef,
+    opacity
+  } = useDndRow(props);
+  return /*#__PURE__*/React.createElement("tr", {
+    ref: dropRef,
+    style: {
+      opacity
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    ref: dragRef,
+    role: "cell",
+    style: {
+      cursor: isDragging ? "grabbing" : "grab"
+    },
+    className: "align-middle"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: classnames(iconClass(undefined, "dots-vertical-rounded"))
+  }))), /*#__PURE__*/React.createElement(DefaultCells, props));
+}
+function DefaultRow(_ref) {
+  let {
+      onClick,
+      row,
+      enableDragNDrop,
+      onDrop,
+      onDrag
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  const opts = _extends({}, props, {
+    onClick: () => onClick(row.original, "row")
+  }, row.getRowProps());
+  if (enableDragNDrop) {
+    return /*#__PURE__*/React.createElement(DefaultDndRow, _extends({}, opts, {
+      row: row,
+      onDrag: onDrag,
+      onDrop: onDrop
+    }));
+  }
+  return /*#__PURE__*/React.createElement("tr", opts, /*#__PURE__*/React.createElement(DefaultCells, {
+    row: row
+  }));
+}
+
 function callLast(fn, time) {
   let last = null;
   return (...args) => {
@@ -405,7 +564,7 @@ function callLast(fn, time) {
   };
 }
 
-const _excluded$2 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
+const _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
 function InputText(_ref) {
   let {
       name,
@@ -421,7 +580,7 @@ function InputText(_ref) {
       className,
       placeholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const [localValue, setValue] = useState(value);
   const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
   useEffect(() => {
@@ -491,6 +650,12 @@ function DefaultColumnFilter(props) {
   });
 }
 
+const swapElements = (myArray, index1, index2) => {
+  myArray = [...myArray];
+  [myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
+  return myArray;
+};
+
 const stopPropagationWrapper = fn => event => {
   event.stopPropagation();
   fn();
@@ -518,7 +683,7 @@ function DefaultOperationButton(props) {
   }, i18n(title)));
 }
 
-const _excluded$3 = ["OperationButton"];
+const _excluded$5 = ["OperationButton"];
 function DefaultCellOperations({
   operations,
   row,
@@ -535,7 +700,7 @@ function DefaultCellOperations({
     let {
         OperationButton = DefaultOperationButton
       } = _ref,
-      operation = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      operation = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     return /*#__PURE__*/React.createElement(OperationButton, _extends({
       key: operation.action
     }, operation, {
@@ -576,7 +741,7 @@ function useOperations({
   };
 }
 
-const _excluded$4 = ["children", "className", "columns", "data", "onChange", "onClick", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "CellHeader", "CellOperations", "i18n"];
+const _excluded$6 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
 function getOperationCallback(operations, onClick) {
   return (data, action) => {
     const operation = operations.find(operation => operation.action === action || operation.alias === action);
@@ -596,7 +761,7 @@ function DefaultEmptyData() {
   }, "No data found");
 }
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
-function Table(props) {
+function useCustomTable(props) {
   const {
       children,
       className = "",
@@ -604,6 +769,8 @@ function Table(props) {
       data,
       onChange = noop,
       onClick = noop,
+      onDrag = noop,
+      onDrop = noop,
       operations = [],
       pageSizes = [10, 25, 50, 100],
       filters: controlledFilters,
@@ -619,11 +786,12 @@ function Table(props) {
       EmptyData = DefaultEmptyData,
       Loader = DefaultLoader,
       Pagination: Pagination$1 = Pagination,
+      Row = DefaultRow,
       CellHeader = DefaultCellHeader,
       CellOperations,
       i18n = f => f
     } = props,
-    ctx = _objectWithoutPropertiesLoose(props, _excluded$4);
+    ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
   const _onClick = getOperationCallback(operations, onClick);
   const defaultColumn = React.useMemo(() => ({
     // Let's set up our default Filter UI
@@ -631,11 +799,19 @@ function Table(props) {
     ArrowSort
   }), [ColumnFilter, ArrowSort]);
   const [filterId, setFilterId] = React.useState(controlledFilterId);
+  // DND
+  const [records, setRecords] = useState(data);
+  const _onDrag = (dragIndex, hoverIndex) => {
+    const newRecords = swapElements([...records], dragIndex, hoverIndex);
+    setRecords(newRecords);
+    onDrag(newRecords);
+  };
   const tableInstance = useTable(_extends({}, props, {
     columns,
     data,
     ctx,
     defaultColumn,
+    // getRowId,
     initialState: _extends({}, props.initialState || {}, {
       filters: controlledFilters || [],
       pageIndex: controlledPageIndex || 0,
@@ -673,50 +849,94 @@ function Table(props) {
       filterId
     });
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
+  return _extends({}, props, {
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick: _onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination: Pagination$1,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    i18n,
+    children,
+    onDrag: _onDrag,
+    onDrop: onDrop
+  });
+}
+
+function Table(props) {
+  const {
+    className,
+    tableInstance,
+    CellHeader,
+    isLoading,
+    onClick,
+    Loader,
+    EmptyData,
+    Row,
+    data,
+    disablePagination,
+    Pagination,
+    pageIndex,
+    pageSize,
+    pageSizes,
+    setPageSize,
+    i18n,
+    enableDragNDrop,
+    children,
+    onDrag,
+    onDrop
+  } = useCustomTable(props);
   // Render the UI for your table
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(DrapNDropContainer, {
+    enableDragNDrop: enableDragNDrop
+  }, /*#__PURE__*/React.createElement("div", {
     className: classnames("table-group table-responsive", className)
   }, /*#__PURE__*/React.createElement("table", _extends({
     className: "table table-striped table-hover"
   }, tableInstance.getTableProps()), /*#__PURE__*/React.createElement("thead", null, tableInstance.headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
     key: `tableInstance.headerGroups${i}`
-  }), headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
+  }), enableDragNDrop ? /*#__PURE__*/React.createElement("th", {
+    role: "columnheader",
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-header"
+  })) : null, headerGroup.headers.map(column => /*#__PURE__*/React.createElement("th", _extends({}, column.getHeaderProps(), {
     key: `tableInstance.headers.column.${column.id}`
   }), /*#__PURE__*/React.createElement(CellHeader, {
     column: column
-  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(row => {
+  })))))), !isLoading ? /*#__PURE__*/React.createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map((row, index) => {
     tableInstance.prepareRow(row);
-    return /*#__PURE__*/React.createElement("tr", _extends({
-      onClick: () => _onClick(row.original, "row")
-    }, row.getRowProps(), {
-      key: `tableInstance.page.${row.id}`
-    }), row.cells.map((cell, i) => {
-      const {
-        hidden,
-        colspan
-      } = cell.column;
-      if (hidden) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement("td", _extends({
-        colSpan: colspan
-      }, cell.getCellProps(), {
-        key: `tableInstance.page.cells.${cell.value || "value"}.${i}`
-      }), cell.render("Cell"));
-    }));
+    return /*#__PURE__*/React.createElement(Row, {
+      index: index,
+      enableDragNDrop: enableDragNDrop,
+      onClick: onClick,
+      row: row,
+      key: `tableInstance.page.${row.id}`,
+      onDrag: onDrag,
+      onDrop: onDrop
+    });
   })) : null), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React.createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React.createElement("div", {
     className: "overflow-hidden"
-  }, /*#__PURE__*/React.createElement(Pagination$1, _extends({}, tableInstance, {
+  }, /*#__PURE__*/React.createElement(Pagination, _extends({}, tableInstance, {
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
     pageSizes: pageSizes,
     setPageSize: setPageSize,
     i18n: i18n
-  }))) : null, children);
+  }))) : null, children));
 }
 
-const _excluded$5 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
+const _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
 function ActionsTable(_ref) {
   let {
       disableFilters = true,
@@ -724,7 +944,7 @@ function ActionsTable(_ref) {
       availableActions = [],
       onAddAction = noop
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const {
     i18n = f => f
   } = props;
@@ -824,7 +1044,7 @@ function Card({
   }, children));
 }
 
-const _excluded$6 = ["src", "form", "options", "submission", "url"];
+const _excluded$8 = ["src", "form", "options", "submission", "url"];
 function useEvent(event, callback, events) {
   useEffect(() => {
     if (callback) {
@@ -875,7 +1095,7 @@ function useForm(props) {
       submission,
       url
     } = props,
-    funcs = _objectWithoutPropertiesLoose(props, _excluded$6);
+    funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
   const element = useRef();
   const isLoaded = useRef();
   const instance = useRef();
@@ -1352,13 +1572,13 @@ FormAccess.propTypes = {
   onSubmit: PropTypes.func
 };
 
-const _excluded$7 = ["action"],
+const _excluded$9 = ["action"],
   _excluded2 = ["actionInfo", "children", "onSubmit", "options"];
 function mapData(options, defaults) {
   return _extends({}, defaults, options);
 }
 function mapSettingsForm(_ref) {
-  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  let settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   FormioUtils.eachComponent(settingsForm.components, component => {
     const resourceExclude = "";
     if (component.type === "resourcefields") {
@@ -1631,7 +1851,7 @@ FormEditCTAs.propTypes = {
   onReset: PropTypes.func
 };
 
-const _excluded$8 = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
+const _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
 function InputTags(_ref) {
   let {
       name,
@@ -1643,7 +1863,7 @@ function InputTags(_ref) {
       prefix,
       suffix
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   const ref = useRef();
   useEffect(() => {
     const instance = new Choices(ref.current, {
@@ -6695,12 +6915,12 @@ function FormsCell(props) {
   }), tag)))));
 }
 
-const _excluded$9 = ["Cell"];
+const _excluded$b = ["Cell"];
 function FormsTable(_ref) {
   let {
       Cell
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const {
     i18n = f => f,
     tags
@@ -6756,7 +6976,7 @@ Loader.propTypes = {
   className: PropTypes.string
 };
 
-const _excluded$a = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
+const _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
 function useModal() {
   const [show, setShowModal] = useState(false);
   return {
@@ -6781,7 +7001,7 @@ function Modal(_ref) {
       style,
       className = ""
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const titleRef = useRef();
   const footerRef = useRef();
   const [maxHeight, setMaxHeight] = useState();
@@ -6837,7 +7057,7 @@ function Modal(_ref) {
   })));
 }
 
-const _excluded$b = ["maxWidth", "children"];
+const _excluded$d = ["maxWidth", "children"];
 function RemoveModalFooter({
   value,
   valueToCompare,
@@ -6870,7 +7090,7 @@ function RemoveModal(_ref) {
       maxWidth = "300px",
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
     i18n = noop
   } = props;
@@ -7103,12 +7323,12 @@ function mapFormToColumns(form) {
   return columns;
 }
 
-const _excluded$c = ["form"];
+const _excluded$e = ["form"];
 function SubmissionsTable(_ref) {
   let {
       form
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const columns = form && mapFormToColumns(form);
   return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
     columns: columns
@@ -7145,7 +7365,7 @@ function SliderColumnFilter({
   }, "Off"));
 }
 
-const _excluded$d = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
+const _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
 function ButtonTab({
   icon,
   back,
@@ -7184,7 +7404,7 @@ function Tabs(_ref) {
       onClick,
       i18n = f => f
     } = _ref,
-    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    additionalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "tabs-comp",
     className: `tw-tabs ${className}`,
@@ -7231,5 +7451,5 @@ function mapPagination({
   };
 }
 
-export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, Loader, Modal, Pagination, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, iconClass, mapPagination, stopPropagationWrapper, useForm, useFormEdit, useModal, useOperations, useTooltip };
+export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, Loader, Modal, Pagination, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, iconClass, mapPagination, stopPropagationWrapper, useCustomTable, useForm, useFormEdit, useModal, useOperations, useTooltip };
 //# sourceMappingURL=index.modern.js.map