@tsed/react-formio 2.0.3 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/coverage.json +4 -4
- package/dist/components/actions-table/actionsTable.component.d.ts +1 -1
- package/dist/components/form-access/formAccess.component.d.ts +1 -1
- package/dist/components/form-edit/formEdit.stories.d.ts +1 -1
- package/dist/components/forms-table/formsTable.component.d.ts +1 -1
- package/dist/components/submissions-table/submissionsTable.component.d.ts +1 -1
- package/dist/components/table/components/defaultCells.component.d.ts +4 -0
- package/dist/components/table/components/defaultRow.component.d.ts +12 -0
- package/dist/components/table/components/dragNDropContainer.d.ts +4 -0
- package/dist/components/table/hooks/useCustomTable.hook.d.ts +187 -0
- package/dist/components/table/hooks/useDragnDropRow.hook.d.ts +266 -0
- package/dist/components/table/index.d.ts +2 -1
- package/dist/components/table/table.component.d.ts +2 -71
- package/dist/components/table/table.stories.d.ts +25 -0
- package/dist/components/table/utils/swapElements.d.ts +1 -0
- package/dist/components/table/utils/swapElements.spec.d.ts +1 -0
- package/dist/index.js +276 -49
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +269 -49
- package/dist/index.modern.js.map +1 -1
- package/package.json +5 -3
- package/src/components/actions-table/actionsTable.component.tsx +2 -1
- package/src/components/form-access/formAccess.component.tsx +1 -1
- package/src/components/form-edit/formEdit.stories.tsx +2 -2
- package/src/components/forms-table/formsTable.component.tsx +2 -1
- package/src/components/forms-table/formsTable.stories.tsx +2 -2
- package/src/components/submissions-table/submissionsTable.component.tsx +2 -1
- package/src/components/table/components/defaultCells.component.tsx +22 -0
- package/src/components/table/components/defaultRow.component.tsx +50 -0
- package/src/components/table/components/dragNDropContainer.tsx +7 -0
- package/src/components/table/hooks/useCustomTable.hook.tsx +231 -0
- package/src/components/table/hooks/useDragnDropRow.hook.ts +80 -0
- package/src/components/table/index.ts +2 -1
- package/src/components/table/table.component.tsx +83 -233
- package/src/components/table/table.stories.tsx +56 -0
- package/src/components/table/utils/swapElements.spec.ts +7 -0
- package/src/components/table/utils/swapElements.ts +7 -0
- /package/dist/components/table/{utils → hooks}/useOperations.hook.d.ts +0 -0
- /package/src/components/table/{utils → hooks}/useOperations.hook.tsx +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,8 @@ var React = require('react');
|
|
|
7
7
|
var formiojs = require('formiojs');
|
|
8
8
|
var Choices = require('@formio/choices.js');
|
|
9
9
|
var PropTypes = require('prop-types');
|
|
10
|
+
var reactDnd = require('react-dnd');
|
|
11
|
+
var reactDndHtml5Backend = require('react-dnd-html5-backend');
|
|
10
12
|
var reactTable = require('react-table');
|
|
11
13
|
var AllComponents = require('formiojs/components');
|
|
12
14
|
var cloneDeep = require('lodash/cloneDeep');
|
|
@@ -295,6 +297,14 @@ Select.propTypes = {
|
|
|
295
297
|
choices: PropTypes__default['default'].array.isRequired
|
|
296
298
|
};
|
|
297
299
|
|
|
300
|
+
function DrapNDropContainer(_ref) {
|
|
301
|
+
var enableDragNDrop = _ref.enableDragNDrop,
|
|
302
|
+
children = _ref.children;
|
|
303
|
+
return enableDragNDrop ? /*#__PURE__*/React__default['default'].createElement(reactDnd.DndProvider, {
|
|
304
|
+
backend: reactDndHtml5Backend.HTML5Backend
|
|
305
|
+
}, children) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
|
|
306
|
+
}
|
|
307
|
+
|
|
298
308
|
var LEFT_PAGE = "LEFT";
|
|
299
309
|
var RIGHT_PAGE = "RIGHT";
|
|
300
310
|
function range(from, to, step) {
|
|
@@ -463,6 +473,155 @@ function DefaultCellHeader(_ref) {
|
|
|
463
473
|
}, column.render("Filter")) : null);
|
|
464
474
|
}
|
|
465
475
|
|
|
476
|
+
var _excluded$2 = ["onDrag", "onDrop", "index"];
|
|
477
|
+
var DND_ITEM_TYPE = "row";
|
|
478
|
+
function useDndRow(_ref) {
|
|
479
|
+
var onDrag = _ref.onDrag,
|
|
480
|
+
onDrop = _ref.onDrop,
|
|
481
|
+
index = _ref.index,
|
|
482
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
483
|
+
var dropRef = React.useRef(null);
|
|
484
|
+
var dragRef = React.useRef(null);
|
|
485
|
+
var _useDrop = reactDnd.useDrop({
|
|
486
|
+
accept: DND_ITEM_TYPE,
|
|
487
|
+
drop: function drop(item) {
|
|
488
|
+
onDrop(item);
|
|
489
|
+
},
|
|
490
|
+
hover: function hover(item, monitor) {
|
|
491
|
+
if (!dropRef.current) {
|
|
492
|
+
return;
|
|
493
|
+
}
|
|
494
|
+
var dragIndex = item.index;
|
|
495
|
+
var hoverIndex = index;
|
|
496
|
+
// Don't replace items with themselves
|
|
497
|
+
if (dragIndex === hoverIndex) {
|
|
498
|
+
return;
|
|
499
|
+
}
|
|
500
|
+
// Determine rectangle on screen
|
|
501
|
+
var hoverBoundingRect = dropRef.current.getBoundingClientRect();
|
|
502
|
+
// Get vertical middle
|
|
503
|
+
var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
|
504
|
+
// Determine mouse position
|
|
505
|
+
var clientOffset = monitor.getClientOffset();
|
|
506
|
+
if (!clientOffset) {
|
|
507
|
+
return;
|
|
508
|
+
}
|
|
509
|
+
// Get pixels to the top
|
|
510
|
+
var hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
|
511
|
+
// Only perform the move when the mouse has crossed half of the items height
|
|
512
|
+
// When dragging downwards, only move when the cursor is below 50%
|
|
513
|
+
// When dragging upwards, only move when the cursor is above 50%
|
|
514
|
+
// Dragging downwards
|
|
515
|
+
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
|
516
|
+
return;
|
|
517
|
+
}
|
|
518
|
+
// Dragging upwards
|
|
519
|
+
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
|
520
|
+
return;
|
|
521
|
+
}
|
|
522
|
+
// Time to actually perform the action
|
|
523
|
+
onDrag(dragIndex, hoverIndex);
|
|
524
|
+
// Note: we're mutating the monitor item here!
|
|
525
|
+
// Generally it's better to avoid mutations,
|
|
526
|
+
// but it's good here for the sake of performance
|
|
527
|
+
// to avoid expensive index searches.
|
|
528
|
+
item.index = hoverIndex;
|
|
529
|
+
}
|
|
530
|
+
}),
|
|
531
|
+
drop = _useDrop[1];
|
|
532
|
+
var _useDrag = reactDnd.useDrag(function () {
|
|
533
|
+
return {
|
|
534
|
+
type: DND_ITEM_TYPE,
|
|
535
|
+
item: {
|
|
536
|
+
index: index
|
|
537
|
+
},
|
|
538
|
+
collect: function collect(monitor) {
|
|
539
|
+
return {
|
|
540
|
+
isDragging: monitor.isDragging()
|
|
541
|
+
};
|
|
542
|
+
}
|
|
543
|
+
};
|
|
544
|
+
}),
|
|
545
|
+
isDragging = _useDrag[0].isDragging,
|
|
546
|
+
drag = _useDrag[1],
|
|
547
|
+
preview = _useDrag[2];
|
|
548
|
+
var opacity = isDragging ? 0 : 1;
|
|
549
|
+
preview(drop(dropRef));
|
|
550
|
+
drag(dragRef);
|
|
551
|
+
return _extends({}, props, {
|
|
552
|
+
opacity: opacity,
|
|
553
|
+
isDragging: isDragging,
|
|
554
|
+
dropRef: dropRef,
|
|
555
|
+
dragRef: dragRef
|
|
556
|
+
});
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
function DefaultCells(_ref) {
|
|
560
|
+
var row = _ref.row;
|
|
561
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, row.cells.map(function (cell, i) {
|
|
562
|
+
var _cell$column = cell.column,
|
|
563
|
+
hidden = _cell$column.hidden,
|
|
564
|
+
colspan = _cell$column.colspan;
|
|
565
|
+
if (hidden) {
|
|
566
|
+
return null;
|
|
567
|
+
}
|
|
568
|
+
return /*#__PURE__*/React__default['default'].createElement("td", _extends({
|
|
569
|
+
colSpan: colspan
|
|
570
|
+
}, cell.getCellProps(), {
|
|
571
|
+
key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
|
|
572
|
+
}), cell.render("Cell"));
|
|
573
|
+
}));
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
var _excluded$3 = ["onClick", "row", "enableDragNDrop", "onDrop", "onDrag"];
|
|
577
|
+
function DefaultDndRow(props) {
|
|
578
|
+
var _useDndRow = useDndRow(props),
|
|
579
|
+
isDragging = _useDndRow.isDragging,
|
|
580
|
+
dragRef = _useDndRow.dragRef,
|
|
581
|
+
dropRef = _useDndRow.dropRef,
|
|
582
|
+
opacity = _useDndRow.opacity;
|
|
583
|
+
return /*#__PURE__*/React__default['default'].createElement("tr", {
|
|
584
|
+
ref: dropRef,
|
|
585
|
+
style: {
|
|
586
|
+
opacity: opacity
|
|
587
|
+
}
|
|
588
|
+
}, /*#__PURE__*/React__default['default'].createElement("td", {
|
|
589
|
+
ref: dragRef,
|
|
590
|
+
role: "cell",
|
|
591
|
+
style: {
|
|
592
|
+
cursor: isDragging ? "grabbing" : "grab"
|
|
593
|
+
},
|
|
594
|
+
className: "align-middle"
|
|
595
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
596
|
+
className: "flex items-center justify-center"
|
|
597
|
+
}, /*#__PURE__*/React__default['default'].createElement("i", {
|
|
598
|
+
className: classnames(iconClass(undefined, "dots-vertical-rounded"))
|
|
599
|
+
}))), /*#__PURE__*/React__default['default'].createElement(DefaultCells, props));
|
|
600
|
+
}
|
|
601
|
+
function DefaultRow(_ref) {
|
|
602
|
+
var _onClick = _ref.onClick,
|
|
603
|
+
row = _ref.row,
|
|
604
|
+
enableDragNDrop = _ref.enableDragNDrop,
|
|
605
|
+
onDrop = _ref.onDrop,
|
|
606
|
+
onDrag = _ref.onDrag,
|
|
607
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
608
|
+
var opts = _extends({}, props, {
|
|
609
|
+
onClick: function onClick() {
|
|
610
|
+
return _onClick(row.original, "row");
|
|
611
|
+
}
|
|
612
|
+
}, row.getRowProps());
|
|
613
|
+
if (enableDragNDrop) {
|
|
614
|
+
return /*#__PURE__*/React__default['default'].createElement(DefaultDndRow, _extends({}, opts, {
|
|
615
|
+
row: row,
|
|
616
|
+
onDrag: onDrag,
|
|
617
|
+
onDrop: onDrop
|
|
618
|
+
}));
|
|
619
|
+
}
|
|
620
|
+
return /*#__PURE__*/React__default['default'].createElement("tr", opts, /*#__PURE__*/React__default['default'].createElement(DefaultCells, {
|
|
621
|
+
row: row
|
|
622
|
+
}));
|
|
623
|
+
}
|
|
624
|
+
|
|
466
625
|
function callLast(fn, time) {
|
|
467
626
|
var last = null;
|
|
468
627
|
return function () {
|
|
@@ -477,7 +636,7 @@ function callLast(fn, time) {
|
|
|
477
636
|
};
|
|
478
637
|
}
|
|
479
638
|
|
|
480
|
-
var _excluded$
|
|
639
|
+
var _excluded$4 = ["name", "value", "label", "onChange", "required", "size", "type", "prefix", "suffix", "description", "className", "placeholder"];
|
|
481
640
|
function InputText(_ref) {
|
|
482
641
|
var name = _ref.name,
|
|
483
642
|
value = _ref.value,
|
|
@@ -491,7 +650,7 @@ function InputText(_ref) {
|
|
|
491
650
|
description = _ref.description,
|
|
492
651
|
className = _ref.className,
|
|
493
652
|
placeholder = _ref.placeholder,
|
|
494
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
653
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
495
654
|
var _useState = React.useState(value),
|
|
496
655
|
localValue = _useState[0],
|
|
497
656
|
setValue = _useState[1];
|
|
@@ -564,6 +723,14 @@ function DefaultColumnFilter(props) {
|
|
|
564
723
|
});
|
|
565
724
|
}
|
|
566
725
|
|
|
726
|
+
var swapElements = function swapElements(myArray, index1, index2) {
|
|
727
|
+
myArray = [].concat(myArray);
|
|
728
|
+
var _ref = [myArray[index2], myArray[index1]];
|
|
729
|
+
myArray[index1] = _ref[0];
|
|
730
|
+
myArray[index2] = _ref[1];
|
|
731
|
+
return myArray;
|
|
732
|
+
};
|
|
733
|
+
|
|
567
734
|
var stopPropagationWrapper = function stopPropagationWrapper(fn) {
|
|
568
735
|
return function (event) {
|
|
569
736
|
event.stopPropagation();
|
|
@@ -601,7 +768,7 @@ function DefaultOperationButton(props) {
|
|
|
601
768
|
}, i18n(title)));
|
|
602
769
|
}
|
|
603
770
|
|
|
604
|
-
var _excluded$
|
|
771
|
+
var _excluded$5 = ["OperationButton"];
|
|
605
772
|
function DefaultCellOperations(_ref) {
|
|
606
773
|
var operations = _ref.operations,
|
|
607
774
|
row = _ref.row,
|
|
@@ -617,7 +784,7 @@ function DefaultCellOperations(_ref) {
|
|
|
617
784
|
}).map(function (_ref3) {
|
|
618
785
|
var _ref3$OperationButton = _ref3.OperationButton,
|
|
619
786
|
OperationButton = _ref3$OperationButton === void 0 ? DefaultOperationButton : _ref3$OperationButton,
|
|
620
|
-
operation = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
787
|
+
operation = _objectWithoutPropertiesLoose(_ref3, _excluded$5);
|
|
621
788
|
return /*#__PURE__*/React__default['default'].createElement(OperationButton, _extends({
|
|
622
789
|
key: operation.action
|
|
623
790
|
}, operation, {
|
|
@@ -667,7 +834,7 @@ function useOperations(_ref) {
|
|
|
667
834
|
};
|
|
668
835
|
}
|
|
669
836
|
|
|
670
|
-
var _excluded$
|
|
837
|
+
var _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"];
|
|
671
838
|
function getOperationCallback(operations, onClick) {
|
|
672
839
|
return function (data, action) {
|
|
673
840
|
var operation = operations.find(function (operation) {
|
|
@@ -689,7 +856,7 @@ function DefaultEmptyData() {
|
|
|
689
856
|
}, "No data found");
|
|
690
857
|
}
|
|
691
858
|
var hooks = [reactTable.useFilters, reactTable.useGroupBy, reactTable.useSortBy, reactTable.usePagination];
|
|
692
|
-
function
|
|
859
|
+
function useCustomTable(props) {
|
|
693
860
|
var children = props.children,
|
|
694
861
|
_props$className = props.className,
|
|
695
862
|
className = _props$className === void 0 ? "" : _props$className,
|
|
@@ -699,6 +866,10 @@ function Table(props) {
|
|
|
699
866
|
onChange = _props$onChange === void 0 ? noop__default['default'] : _props$onChange,
|
|
700
867
|
_props$onClick = props.onClick,
|
|
701
868
|
onClick = _props$onClick === void 0 ? noop__default['default'] : _props$onClick,
|
|
869
|
+
_props$onDrag = props.onDrag,
|
|
870
|
+
onDrag = _props$onDrag === void 0 ? noop__default['default'] : _props$onDrag,
|
|
871
|
+
_props$onDrop = props.onDrop,
|
|
872
|
+
onDrop = _props$onDrop === void 0 ? noop__default['default'] : _props$onDrop,
|
|
702
873
|
_props$operations = props.operations,
|
|
703
874
|
operations = _props$operations === void 0 ? [] : _props$operations,
|
|
704
875
|
_props$pageSizes = props.pageSizes,
|
|
@@ -721,6 +892,8 @@ function Table(props) {
|
|
|
721
892
|
Loader = _props$Loader === void 0 ? DefaultLoader : _props$Loader,
|
|
722
893
|
_props$Pagination = props.Pagination,
|
|
723
894
|
Pagination$1 = _props$Pagination === void 0 ? Pagination : _props$Pagination,
|
|
895
|
+
_props$Row = props.Row,
|
|
896
|
+
Row = _props$Row === void 0 ? DefaultRow : _props$Row,
|
|
724
897
|
_props$CellHeader = props.CellHeader,
|
|
725
898
|
CellHeader = _props$CellHeader === void 0 ? DefaultCellHeader : _props$CellHeader,
|
|
726
899
|
CellOperations = props.CellOperations,
|
|
@@ -728,7 +901,7 @@ function Table(props) {
|
|
|
728
901
|
i18n = _props$i18n === void 0 ? function (f) {
|
|
729
902
|
return f;
|
|
730
903
|
} : _props$i18n,
|
|
731
|
-
ctx = _objectWithoutPropertiesLoose(props, _excluded$
|
|
904
|
+
ctx = _objectWithoutPropertiesLoose(props, _excluded$6);
|
|
732
905
|
var _onClick = getOperationCallback(operations, onClick);
|
|
733
906
|
var defaultColumn = React__default['default'].useMemo(function () {
|
|
734
907
|
return {
|
|
@@ -740,11 +913,21 @@ function Table(props) {
|
|
|
740
913
|
var _React$useState = React__default['default'].useState(controlledFilterId),
|
|
741
914
|
filterId = _React$useState[0],
|
|
742
915
|
setFilterId = _React$useState[1];
|
|
916
|
+
// DND
|
|
917
|
+
var _useState = React.useState(data),
|
|
918
|
+
records = _useState[0],
|
|
919
|
+
setRecords = _useState[1];
|
|
920
|
+
var _onDrag = function _onDrag(dragIndex, hoverIndex) {
|
|
921
|
+
var newRecords = swapElements([].concat(records), dragIndex, hoverIndex);
|
|
922
|
+
setRecords(newRecords);
|
|
923
|
+
onDrag(newRecords);
|
|
924
|
+
};
|
|
743
925
|
var tableInstance = reactTable.useTable.apply(void 0, [_extends({}, props, {
|
|
744
926
|
columns: columns,
|
|
745
927
|
data: data,
|
|
746
928
|
ctx: ctx,
|
|
747
929
|
defaultColumn: defaultColumn,
|
|
930
|
+
// getRowId,
|
|
748
931
|
initialState: _extends({}, props.initialState || {}, {
|
|
749
932
|
filters: controlledFilters || [],
|
|
750
933
|
pageIndex: controlledPageIndex || 0,
|
|
@@ -779,55 +962,97 @@ function Table(props) {
|
|
|
779
962
|
filterId: filterId
|
|
780
963
|
});
|
|
781
964
|
}, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
|
|
965
|
+
return _extends({}, props, {
|
|
966
|
+
className: className,
|
|
967
|
+
tableInstance: tableInstance,
|
|
968
|
+
CellHeader: CellHeader,
|
|
969
|
+
isLoading: isLoading,
|
|
970
|
+
onClick: _onClick,
|
|
971
|
+
Loader: Loader,
|
|
972
|
+
EmptyData: EmptyData,
|
|
973
|
+
Row: Row,
|
|
974
|
+
data: data,
|
|
975
|
+
disablePagination: disablePagination,
|
|
976
|
+
Pagination: Pagination$1,
|
|
977
|
+
pageIndex: pageIndex,
|
|
978
|
+
pageSize: pageSize,
|
|
979
|
+
pageSizes: pageSizes,
|
|
980
|
+
setPageSize: setPageSize,
|
|
981
|
+
i18n: i18n,
|
|
982
|
+
children: children,
|
|
983
|
+
onDrag: _onDrag,
|
|
984
|
+
onDrop: onDrop
|
|
985
|
+
});
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
function Table(props) {
|
|
989
|
+
var _useCustomTable = useCustomTable(props),
|
|
990
|
+
className = _useCustomTable.className,
|
|
991
|
+
tableInstance = _useCustomTable.tableInstance,
|
|
992
|
+
CellHeader = _useCustomTable.CellHeader,
|
|
993
|
+
isLoading = _useCustomTable.isLoading,
|
|
994
|
+
onClick = _useCustomTable.onClick,
|
|
995
|
+
Loader = _useCustomTable.Loader,
|
|
996
|
+
EmptyData = _useCustomTable.EmptyData,
|
|
997
|
+
Row = _useCustomTable.Row,
|
|
998
|
+
data = _useCustomTable.data,
|
|
999
|
+
disablePagination = _useCustomTable.disablePagination,
|
|
1000
|
+
Pagination = _useCustomTable.Pagination,
|
|
1001
|
+
pageIndex = _useCustomTable.pageIndex,
|
|
1002
|
+
pageSize = _useCustomTable.pageSize,
|
|
1003
|
+
pageSizes = _useCustomTable.pageSizes,
|
|
1004
|
+
setPageSize = _useCustomTable.setPageSize,
|
|
1005
|
+
i18n = _useCustomTable.i18n,
|
|
1006
|
+
enableDragNDrop = _useCustomTable.enableDragNDrop,
|
|
1007
|
+
children = _useCustomTable.children,
|
|
1008
|
+
onDrag = _useCustomTable.onDrag,
|
|
1009
|
+
onDrop = _useCustomTable.onDrop;
|
|
782
1010
|
// Render the UI for your table
|
|
783
|
-
return /*#__PURE__*/React__default['default'].createElement(
|
|
1011
|
+
return /*#__PURE__*/React__default['default'].createElement(DrapNDropContainer, {
|
|
1012
|
+
enableDragNDrop: enableDragNDrop
|
|
1013
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
784
1014
|
className: classnames("table-group table-responsive", className)
|
|
785
1015
|
}, /*#__PURE__*/React__default['default'].createElement("table", _extends({
|
|
786
1016
|
className: "table table-striped table-hover"
|
|
787
1017
|
}, tableInstance.getTableProps()), /*#__PURE__*/React__default['default'].createElement("thead", null, tableInstance.headerGroups.map(function (headerGroup, i) {
|
|
788
1018
|
return /*#__PURE__*/React__default['default'].createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
|
|
789
1019
|
key: "tableInstance.headerGroups" + i
|
|
790
|
-
}),
|
|
1020
|
+
}), enableDragNDrop ? /*#__PURE__*/React__default['default'].createElement("th", {
|
|
1021
|
+
role: "columnheader",
|
|
1022
|
+
className: "text-center"
|
|
1023
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
1024
|
+
className: "table-cell-header"
|
|
1025
|
+
})) : null, headerGroup.headers.map(function (column) {
|
|
791
1026
|
return /*#__PURE__*/React__default['default'].createElement("th", _extends({}, column.getHeaderProps(), {
|
|
792
1027
|
key: "tableInstance.headers.column." + column.id
|
|
793
1028
|
}), /*#__PURE__*/React__default['default'].createElement(CellHeader, {
|
|
794
1029
|
column: column
|
|
795
1030
|
}));
|
|
796
1031
|
}));
|
|
797
|
-
})), !isLoading ? /*#__PURE__*/React__default['default'].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row) {
|
|
1032
|
+
})), !isLoading ? /*#__PURE__*/React__default['default'].createElement("tbody", tableInstance.getTableBodyProps(), tableInstance.page.map(function (row, index) {
|
|
798
1033
|
tableInstance.prepareRow(row);
|
|
799
|
-
return /*#__PURE__*/React__default['default'].createElement(
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
key: "tableInstance.page." + row.id
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
colspan = _cell$column.colspan;
|
|
809
|
-
if (hidden) {
|
|
810
|
-
return null;
|
|
811
|
-
}
|
|
812
|
-
return /*#__PURE__*/React__default['default'].createElement("td", _extends({
|
|
813
|
-
colSpan: colspan
|
|
814
|
-
}, cell.getCellProps(), {
|
|
815
|
-
key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
|
|
816
|
-
}), cell.render("Cell"));
|
|
817
|
-
}));
|
|
1034
|
+
return /*#__PURE__*/React__default['default'].createElement(Row, {
|
|
1035
|
+
index: index,
|
|
1036
|
+
enableDragNDrop: enableDragNDrop,
|
|
1037
|
+
onClick: onClick,
|
|
1038
|
+
row: row,
|
|
1039
|
+
key: "tableInstance.page." + row.id,
|
|
1040
|
+
onDrag: onDrag,
|
|
1041
|
+
onDrop: onDrop
|
|
1042
|
+
});
|
|
818
1043
|
})) : null), isLoading ? /*#__PURE__*/React__default['default'].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default['default'].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default['default'].createElement("div", {
|
|
819
1044
|
className: "overflow-hidden"
|
|
820
|
-
}, /*#__PURE__*/React__default['default'].createElement(Pagination
|
|
1045
|
+
}, /*#__PURE__*/React__default['default'].createElement(Pagination, _extends({}, tableInstance, {
|
|
821
1046
|
className: "text-sm",
|
|
822
1047
|
pageIndex: pageIndex,
|
|
823
1048
|
pageSize: pageSize,
|
|
824
1049
|
pageSizes: pageSizes,
|
|
825
1050
|
setPageSize: setPageSize,
|
|
826
1051
|
i18n: i18n
|
|
827
|
-
}))) : null, children);
|
|
1052
|
+
}))) : null, children));
|
|
828
1053
|
}
|
|
829
1054
|
|
|
830
|
-
var _excluded$
|
|
1055
|
+
var _excluded$7 = ["disableFilters", "disablePagination", "availableActions", "onAddAction"];
|
|
831
1056
|
function ActionsTable(_ref) {
|
|
832
1057
|
var _ref$disableFilters = _ref.disableFilters,
|
|
833
1058
|
disableFilters = _ref$disableFilters === void 0 ? true : _ref$disableFilters,
|
|
@@ -837,7 +1062,7 @@ function ActionsTable(_ref) {
|
|
|
837
1062
|
availableActions = _ref$availableActions === void 0 ? [] : _ref$availableActions,
|
|
838
1063
|
_ref$onAddAction = _ref.onAddAction,
|
|
839
1064
|
onAddAction = _ref$onAddAction === void 0 ? noop__default['default'] : _ref$onAddAction,
|
|
840
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
1065
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
841
1066
|
var _props$i18n = props.i18n,
|
|
842
1067
|
i18n = _props$i18n === void 0 ? function (f) {
|
|
843
1068
|
return f;
|
|
@@ -943,7 +1168,7 @@ function Card(_ref) {
|
|
|
943
1168
|
}, children));
|
|
944
1169
|
}
|
|
945
1170
|
|
|
946
|
-
var _excluded$
|
|
1171
|
+
var _excluded$8 = ["src", "form", "options", "submission", "url"];
|
|
947
1172
|
function _catch(body, recover) {
|
|
948
1173
|
try {
|
|
949
1174
|
var result = body();
|
|
@@ -1023,7 +1248,7 @@ function useForm(props) {
|
|
|
1023
1248
|
options = _props$options === void 0 ? {} : _props$options,
|
|
1024
1249
|
submission = props.submission,
|
|
1025
1250
|
url = props.url,
|
|
1026
|
-
funcs = _objectWithoutPropertiesLoose(props, _excluded$
|
|
1251
|
+
funcs = _objectWithoutPropertiesLoose(props, _excluded$8);
|
|
1027
1252
|
var element = React.useRef();
|
|
1028
1253
|
var isLoaded = React.useRef();
|
|
1029
1254
|
var instance = React.useRef();
|
|
@@ -1501,13 +1726,13 @@ FormAccess.propTypes = {
|
|
|
1501
1726
|
onSubmit: PropTypes__default['default'].func
|
|
1502
1727
|
};
|
|
1503
1728
|
|
|
1504
|
-
var _excluded$
|
|
1729
|
+
var _excluded$9 = ["action"],
|
|
1505
1730
|
_excluded2 = ["actionInfo", "children", "onSubmit", "options"];
|
|
1506
1731
|
function mapData(options, defaults) {
|
|
1507
1732
|
return _extends({}, defaults, options);
|
|
1508
1733
|
}
|
|
1509
1734
|
function mapSettingsForm(_ref) {
|
|
1510
|
-
var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
1735
|
+
var settingsForm = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
1511
1736
|
FormioUtils__default['default'].eachComponent(settingsForm.components, function (component) {
|
|
1512
1737
|
var resourceExclude = "";
|
|
1513
1738
|
if (component.type === "resourcefields") {
|
|
@@ -1839,7 +2064,7 @@ FormEditCTAs.propTypes = {
|
|
|
1839
2064
|
onReset: PropTypes__default['default'].func
|
|
1840
2065
|
};
|
|
1841
2066
|
|
|
1842
|
-
var _excluded$
|
|
2067
|
+
var _excluded$a = ["name", "value", "label", "onChange", "required", "description", "prefix", "suffix"];
|
|
1843
2068
|
function InputTags(_ref) {
|
|
1844
2069
|
var name = _ref.name,
|
|
1845
2070
|
_ref$value = _ref.value,
|
|
@@ -1850,7 +2075,7 @@ function InputTags(_ref) {
|
|
|
1850
2075
|
description = _ref.description,
|
|
1851
2076
|
prefix = _ref.prefix,
|
|
1852
2077
|
suffix = _ref.suffix,
|
|
1853
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
2078
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
1854
2079
|
var ref = React.useRef();
|
|
1855
2080
|
React.useEffect(function () {
|
|
1856
2081
|
var instance = new Choices__default['default'](ref.current, {
|
|
@@ -6919,10 +7144,10 @@ function FormsCell(props) {
|
|
|
6919
7144
|
}))));
|
|
6920
7145
|
}
|
|
6921
7146
|
|
|
6922
|
-
var _excluded$
|
|
7147
|
+
var _excluded$b = ["Cell"];
|
|
6923
7148
|
function FormsTable(_ref) {
|
|
6924
7149
|
var Cell = _ref.Cell,
|
|
6925
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7150
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
6926
7151
|
var _props$i18n = props.i18n,
|
|
6927
7152
|
i18n = _props$i18n === void 0 ? function (f) {
|
|
6928
7153
|
return f;
|
|
@@ -6985,7 +7210,7 @@ Loader.propTypes = {
|
|
|
6985
7210
|
className: PropTypes__default['default'].string
|
|
6986
7211
|
};
|
|
6987
7212
|
|
|
6988
|
-
var _excluded$
|
|
7213
|
+
var _excluded$c = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
|
|
6989
7214
|
function useModal() {
|
|
6990
7215
|
var _useState = React.useState(false),
|
|
6991
7216
|
show = _useState[0],
|
|
@@ -7013,7 +7238,7 @@ function Modal(_ref) {
|
|
|
7013
7238
|
style = _ref.style,
|
|
7014
7239
|
_ref$className = _ref.className,
|
|
7015
7240
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
7016
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7241
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
7017
7242
|
var titleRef = React.useRef();
|
|
7018
7243
|
var footerRef = React.useRef();
|
|
7019
7244
|
var _useState2 = React.useState(),
|
|
@@ -7071,7 +7296,7 @@ function Modal(_ref) {
|
|
|
7071
7296
|
})));
|
|
7072
7297
|
}
|
|
7073
7298
|
|
|
7074
|
-
var _excluded$
|
|
7299
|
+
var _excluded$d = ["maxWidth", "children"];
|
|
7075
7300
|
function RemoveModalFooter(_ref) {
|
|
7076
7301
|
var value = _ref.value,
|
|
7077
7302
|
valueToCompare = _ref.valueToCompare,
|
|
@@ -7105,7 +7330,7 @@ function RemoveModal(_ref2) {
|
|
|
7105
7330
|
var _ref2$maxWidth = _ref2.maxWidth,
|
|
7106
7331
|
maxWidth = _ref2$maxWidth === void 0 ? "300px" : _ref2$maxWidth,
|
|
7107
7332
|
children = _ref2.children,
|
|
7108
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7333
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
|
|
7109
7334
|
var _props$i18n = props.i18n,
|
|
7110
7335
|
i18n = _props$i18n === void 0 ? noop__default['default'] : _props$i18n;
|
|
7111
7336
|
var _useState = React.useState(),
|
|
@@ -7363,10 +7588,10 @@ function mapFormToColumns(form) {
|
|
|
7363
7588
|
return columns;
|
|
7364
7589
|
}
|
|
7365
7590
|
|
|
7366
|
-
var _excluded$
|
|
7591
|
+
var _excluded$e = ["form"];
|
|
7367
7592
|
function SubmissionsTable(_ref) {
|
|
7368
7593
|
var form = _ref.form,
|
|
7369
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
7594
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
7370
7595
|
var columns = form && mapFormToColumns(form);
|
|
7371
7596
|
return /*#__PURE__*/React__default['default'].createElement(Table, _extends({}, props, {
|
|
7372
7597
|
columns: columns
|
|
@@ -7405,7 +7630,7 @@ function SliderColumnFilter(_ref) {
|
|
|
7405
7630
|
}, "Off"));
|
|
7406
7631
|
}
|
|
7407
7632
|
|
|
7408
|
-
var _excluded$
|
|
7633
|
+
var _excluded$f = ["style", "current", "items", "children", "HeaderChildren", "AddButton", "Button", "className", "onClick", "i18n"];
|
|
7409
7634
|
function ButtonTab(_ref) {
|
|
7410
7635
|
var icon = _ref.icon,
|
|
7411
7636
|
back = _ref.back,
|
|
@@ -7446,7 +7671,7 @@ function Tabs(_ref2) {
|
|
|
7446
7671
|
i18n = _ref2$i18n === void 0 ? function (f) {
|
|
7447
7672
|
return f;
|
|
7448
7673
|
} : _ref2$i18n,
|
|
7449
|
-
additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7674
|
+
additionalProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
7450
7675
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
7451
7676
|
"data-testid": "tabs-comp",
|
|
7452
7677
|
className: "tw-tabs " + className,
|
|
@@ -7578,9 +7803,11 @@ exports.Table = Table;
|
|
|
7578
7803
|
exports.Tabs = Tabs;
|
|
7579
7804
|
exports.callLast = callLast;
|
|
7580
7805
|
exports.defaultDisplayChoices = defaultDisplayChoices;
|
|
7806
|
+
exports.getOperationCallback = getOperationCallback;
|
|
7581
7807
|
exports.iconClass = iconClass;
|
|
7582
7808
|
exports.mapPagination = mapPagination;
|
|
7583
7809
|
exports.stopPropagationWrapper = stopPropagationWrapper;
|
|
7810
|
+
exports.useCustomTable = useCustomTable;
|
|
7584
7811
|
exports.useForm = useForm;
|
|
7585
7812
|
exports.useFormEdit = useFormEdit;
|
|
7586
7813
|
exports.useModal = useModal;
|