norma-library 0.6.77 → 0.6.78
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/.storybook/preview.ts +5 -0
- package/dist/esm/components/UncontrolledTable/components/index.d.ts +4 -2
- package/dist/esm/components/UncontrolledTable/components/index.js +4 -2
- package/dist/esm/components/UncontrolledTable/components/index.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/components/row/DraggableRow.d.ts +3 -0
- package/dist/esm/components/UncontrolledTable/components/row/DraggableRow.js +23 -0
- package/dist/esm/components/UncontrolledTable/components/row/DraggableRow.js.map +1 -0
- package/dist/esm/components/UncontrolledTable/components/row/RowDragHandleCell.d.ts +3 -0
- package/dist/esm/components/UncontrolledTable/components/row/RowDragHandleCell.js +15 -0
- package/dist/esm/components/UncontrolledTable/components/row/RowDragHandleCell.js.map +1 -0
- package/dist/esm/components/UncontrolledTable/components/row/SimpleRow.d.ts +3 -0
- package/dist/esm/components/UncontrolledTable/components/row/SimpleRow.js +13 -0
- package/dist/esm/components/UncontrolledTable/components/row/SimpleRow.js.map +1 -0
- package/dist/esm/components/UncontrolledTable/components/row/styles.d.ts +2 -0
- package/dist/esm/components/UncontrolledTable/components/row/styles.js +12 -0
- package/dist/esm/components/UncontrolledTable/components/row/styles.js.map +1 -0
- package/dist/esm/components/UncontrolledTable/index.js +86 -50
- package/dist/esm/components/UncontrolledTable/index.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/interface.d.ts +6 -4
- package/package.json +4 -1
- package/src/components/UncontrolledTable/components/index.tsx +6 -2
- package/src/components/UncontrolledTable/components/row/DraggableRow.tsx +34 -0
- package/src/components/UncontrolledTable/components/row/RowDragHandleCell.tsx +17 -0
- package/src/components/UncontrolledTable/components/row/SimpleRow.tsx +26 -0
- package/src/components/UncontrolledTable/index.tsx +191 -105
- package/src/components/UncontrolledTable/interface.ts +6 -4
- package/src/stories/ModalStatus.stories.tsx +1 -0
- package/src/stories/UncontrolledTable.stories.tsx +464 -206
- package/src/components/UncontrolledTable/components/tbody/index.tsx +0 -33
- /package/src/components/UncontrolledTable/components/{tbody → row}/styles.tsx +0 -0
package/.storybook/preview.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import Pagination from "./pagination";
|
|
2
2
|
import Header from "./header";
|
|
3
|
-
import
|
|
4
|
-
|
|
3
|
+
import SimpleRow from "./row/SimpleRow";
|
|
4
|
+
import DraggableRow from "./row/DraggableRow";
|
|
5
|
+
import RowDragHandleCell from "./row/RowDragHandleCell";
|
|
6
|
+
export { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import Pagination from "./pagination";
|
|
2
2
|
import Header from "./header";
|
|
3
|
-
import
|
|
4
|
-
|
|
3
|
+
import SimpleRow from "./row/SimpleRow";
|
|
4
|
+
import DraggableRow from "./row/DraggableRow";
|
|
5
|
+
import RowDragHandleCell from "./row/RowDragHandleCell";
|
|
6
|
+
export { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell };
|
|
5
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/UncontrolledTable/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/UncontrolledTable/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AAExD,OAAO,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,YAAY,EACZ,iBAAiB,EAClB,CAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import * as S from './styles';
|
|
3
|
+
import { flexRender } from '@tanstack/react-table';
|
|
4
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
5
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
6
|
+
var DraggableRow = function (_a) {
|
|
7
|
+
var row = _a.row, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
|
|
8
|
+
var _b = useSortable({
|
|
9
|
+
id: row.id,
|
|
10
|
+
}), transform = _b.transform, transition = _b.transition, setNodeRef = _b.setNodeRef, isDragging = _b.isDragging;
|
|
11
|
+
var style = {
|
|
12
|
+
transform: CSS.Transform.toString(transform),
|
|
13
|
+
transition: transition,
|
|
14
|
+
opacity: isDragging ? 0.8 : 1,
|
|
15
|
+
zIndex: isDragging ? 1 : 0,
|
|
16
|
+
position: 'relative',
|
|
17
|
+
};
|
|
18
|
+
return (React.createElement(S.Tr, { "$hasAction": !!onClick || !!onMouseOver || !!onMouseOut, ref: setNodeRef, style: style }, row.getVisibleCells().map(function (cell) { return (React.createElement(S.Td, { key: cell.id, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, cell.column.columnDef.type == 'action'
|
|
19
|
+
? cell.getValue()
|
|
20
|
+
: flexRender(cell.column.columnDef.cell, cell.getContext()))); })));
|
|
21
|
+
};
|
|
22
|
+
export default DraggableRow;
|
|
23
|
+
//# sourceMappingURL=DraggableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DraggableRow.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/DraggableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,IAAM,YAAY,GAAkB,UAAC,EAAyC;QAAvC,GAAG,SAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,UAAU,gBAAA;IACpE,IAAA,KAAoD,WAAW,CAAC;QACpE,EAAE,EAAE,GAAG,CAAC,EAAE;KACX,CAAC,EAFM,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAEnD,CAAC;IAEH,IAAM,KAAK,GAAkB;QAC3B,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU,EAAE,UAAU;QACtB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1B,QAAQ,EAAE,UAAU;KACrB,CAAC;IAEF,OAAO,CACL,oBAAC,CAAC,CAAC,EAAE,kBAAa,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,IACxF,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CACxC,oBAAC,CAAC,CAAC,EAAE,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,IACnF,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,IAAI,QAAQ;QACrC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;QACjB,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CACxD,CACR,EANyC,CAMzC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
4
|
+
import { Button } from '../../../../components/Button';
|
|
5
|
+
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
|
6
|
+
var RowDragHandleCell = function (_a) {
|
|
7
|
+
var rowId = _a.rowId;
|
|
8
|
+
var _b = useSortable({
|
|
9
|
+
id: rowId,
|
|
10
|
+
}), attributes = _b.attributes, listeners = _b.listeners;
|
|
11
|
+
return (React.createElement(Button, __assign({}, attributes, listeners, { style: { cursor: 'grab' } }),
|
|
12
|
+
React.createElement(DragIndicatorIcon, null)));
|
|
13
|
+
};
|
|
14
|
+
export default RowDragHandleCell;
|
|
15
|
+
//# sourceMappingURL=RowDragHandleCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RowDragHandleCell.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/RowDragHandleCell.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAElE,IAAM,iBAAiB,GAAkB,UAAC,EAA2B;QAAzB,KAAK,WAAA;IACzC,IAAA,KAA4B,WAAW,CAAC;QAC5C,EAAE,EAAE,KAAK;KACV,CAAC,EAFM,UAAU,gBAAA,EAAE,SAAS,eAE3B,CAAC;IACH,OAAO,CACL,oBAAC,MAAM,eAAK,UAAU,EAAM,SAAS,IAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;QAC9D,oBAAC,iBAAiB,OAAG,CACd,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { flexRender } from '@tanstack/react-table';
|
|
3
|
+
import * as S from './styles';
|
|
4
|
+
var SimpleRow = function (_a) {
|
|
5
|
+
var row = _a.row, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
|
|
6
|
+
return (React.createElement(S.Tr, { "$hasAction": !!onClick || !!onMouseOver || !!onMouseOut, onClick: function () { return (onClick ? onClick(row.original) : null); }, onMouseOver: function () { return (onMouseOver ? onMouseOver(row.original) : null); }, onMouseOut: function () { return (onMouseOut ? onMouseOut(row.original) : null); } }, row.getVisibleCells().map(function (cell, index) {
|
|
7
|
+
return (React.createElement(S.Td, { key: index }, cell.column.columnDef.type == 'action'
|
|
8
|
+
? cell.getValue()
|
|
9
|
+
: flexRender(cell.column.columnDef.cell, cell.getContext())));
|
|
10
|
+
})));
|
|
11
|
+
};
|
|
12
|
+
export default SimpleRow;
|
|
13
|
+
//# sourceMappingURL=SimpleRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SimpleRow.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/SimpleRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAE9B,IAAM,SAAS,GAAkB,UAAC,EAAyC;QAAvC,GAAG,SAAA,EAAE,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,UAAU,gBAAA;IACvE,OAAO,CACL,oBAAC,CAAC,CAAC,EAAE,kBACS,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,UAAU,EACtD,OAAO,EAAE,cAAM,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAxC,CAAwC,EACvD,WAAW,EAAE,cAAM,OAAA,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAhD,CAAgD,EACnE,UAAU,EAAE,cAAM,OAAA,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAA9C,CAA8C,IAE/D,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,UAAC,IAAS,EAAE,KAAa;QAClD,OAAO,CACL,oBAAC,CAAC,CAAC,EAAE,IAAC,GAAG,EAAE,KAAK,IACb,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,IAAI,QAAQ;YACrC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CACxD,CACR,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const Tr: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
|
|
2
|
+
export declare const Td: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import { breakpoints } from '../../../../utils/styledBreakpoints';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
export var Tr = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n &:nth-of-type(even) {\n background-color: #fafafa;\n }\n"], ["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n &:nth-of-type(even) {\n background-color: #fafafa;\n }\n"])));
|
|
5
|
+
export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n ", ";\n color: #666666;\n font-size: 0.875rem;\n"], ["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n ", ";\n color: #666666;\n font-size: 0.875rem;\n"])), breakpoints({
|
|
6
|
+
cssProp: 'padding',
|
|
7
|
+
cssPropUnits: 'px',
|
|
8
|
+
values: [{ 1440: 8 }],
|
|
9
|
+
mediaQueryType: 'max-width',
|
|
10
|
+
}));
|
|
11
|
+
var templateObject_1, templateObject_2;
|
|
12
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,6WAAA,wPAUvB,EAKA,gDAGH,KARG,WAAW,CAAC;IACZ,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IACrB,cAAc,EAAE,WAAW;CAC5B,CAAC,CAGH,CAAC"}
|
|
@@ -1,21 +1,38 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
1
|
+
import { __assign, __spreadArray } from "tslib";
|
|
2
2
|
import React, { useState, useMemo, useRef } from 'react';
|
|
3
3
|
import * as S from './styles';
|
|
4
4
|
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
|
|
5
|
-
import {
|
|
5
|
+
import { DndContext, MouseSensor, closestCenter, useSensor, useSensors, TouchSensor, KeyboardSensor, } from '@dnd-kit/core';
|
|
6
|
+
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
|
7
|
+
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
8
|
+
import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
|
|
6
9
|
import useClickOutside from '../../hooks/useClickOutside';
|
|
7
10
|
var UncontrolledTable = function (props) {
|
|
8
|
-
var data = props.data, columns = props.columns, onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, showTotalResults = props.showTotalResults, showSettings = props.showSettings, onChangePage = props.onChangePage, pagination = props.pagination, totalPages = props.totalPages, showClearFields = props.showClearFields, onClearFieldsClick = props.onClearFieldsClick, onFilterClick = props.onFilterClick, onSortClick = props.onSortClick, customTotalResults = props.customTotalResults, labels = props.labels, tableClassName = props.tableClassName, stickyHeader = props.stickyHeader, stickyHeaderP = props.stickyHeaderP;
|
|
11
|
+
var data = props.data, columns = props.columns, onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, showTotalResults = props.showTotalResults, showSettings = props.showSettings, onChangePage = props.onChangePage, pagination = props.pagination, totalPages = props.totalPages, showClearFields = props.showClearFields, onClearFieldsClick = props.onClearFieldsClick, onFilterClick = props.onFilterClick, onSortClick = props.onSortClick, customTotalResults = props.customTotalResults, labels = props.labels, tableClassName = props.tableClassName, stickyHeader = props.stickyHeader, stickyHeaderP = props.stickyHeaderP, draggable = props.draggable, onDragEnd = props.onDragEnd;
|
|
9
12
|
var _a = useState(''), openFilterDialog = _a[0], setOpenFilterDialog = _a[1];
|
|
10
13
|
var _b = useState([]), sorting = _b[0], setSorting = _b[1];
|
|
11
14
|
var _c = useState([]), filterByColumn = _c[0], setFilterByColumn = _c[1];
|
|
12
15
|
var _d = useState([]), globalFilters = _d[0], setGlobalFilters = _d[1];
|
|
13
16
|
var _e = useState(false), orderSmallest = _e[0], setOrderSmallest = _e[1];
|
|
14
17
|
var _f = useState(false), orderLargest = _f[0], setOrderLargest = _f[1];
|
|
18
|
+
var _columns = useMemo(function () {
|
|
19
|
+
return draggable
|
|
20
|
+
? __spreadArray([
|
|
21
|
+
{
|
|
22
|
+
id: 'drag',
|
|
23
|
+
header: '',
|
|
24
|
+
cell: function (_a) {
|
|
25
|
+
var row = _a.row;
|
|
26
|
+
return React.createElement(RowDragHandleCell, { rowId: row.id });
|
|
27
|
+
},
|
|
28
|
+
disableMenu: true,
|
|
29
|
+
}
|
|
30
|
+
], columns.map(function (column) { return (__assign(__assign({}, column), { disableMenu: true })); }), true) : columns;
|
|
31
|
+
}, [columns]);
|
|
15
32
|
var reactTableConfig = useMemo(function () {
|
|
16
33
|
var config = {
|
|
17
|
-
columns: columns,
|
|
18
34
|
data: data,
|
|
35
|
+
columns: _columns,
|
|
19
36
|
state: {
|
|
20
37
|
sorting: sorting,
|
|
21
38
|
columnFilters: filterByColumn,
|
|
@@ -27,59 +44,78 @@ var UncontrolledTable = function (props) {
|
|
|
27
44
|
onSortingChange: setSorting,
|
|
28
45
|
onColumnFiltersChange: setFilterByColumn,
|
|
29
46
|
manualPagination: true,
|
|
47
|
+
getRowId: function (row) { return row.id; },
|
|
48
|
+
debugTable: true,
|
|
49
|
+
debugHeaders: true,
|
|
50
|
+
debugColumns: true,
|
|
30
51
|
};
|
|
31
52
|
return config;
|
|
32
|
-
}, [data, sorting, filterByColumn,
|
|
53
|
+
}, [data, sorting, filterByColumn, _columns, pagination]);
|
|
33
54
|
var table = useReactTable(reactTableConfig);
|
|
34
55
|
var filterRef = useRef(null);
|
|
35
56
|
useClickOutside(filterRef, function () { return setOpenFilterDialog(''); });
|
|
57
|
+
var handleDragEnd = function (event) {
|
|
58
|
+
var active = event.active, over = event.over;
|
|
59
|
+
if (active && over && active.id !== over.id && onDragEnd) {
|
|
60
|
+
var oldIndex = dataIds.indexOf(active.id);
|
|
61
|
+
var newIndex = dataIds.indexOf(over.id);
|
|
62
|
+
var _data = arrayMove(data, oldIndex, newIndex);
|
|
63
|
+
onDragEnd(_data);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
|
|
67
|
+
var dataIds = useMemo(function () { return (data === null || data === void 0 ? void 0 : data.map(function (item) { return item.id; })) || []; }, [data]);
|
|
36
68
|
return (React.createElement(S.Container, null,
|
|
37
69
|
React.createElement(Header, { table: table, globalFilters: globalFilters, orderSmallest: orderSmallest, orderLargest: orderLargest, showTotalResults: showTotalResults, showSettings: showSettings, setGlobalFilters: setGlobalFilters, setOrderLargest: setOrderLargest, setOrderSmallest: setOrderSmallest, showClearFiels: showClearFields, customTotalResults: customTotalResults, clearLabel: labels === null || labels === void 0 ? void 0 : labels.clearFilter, onClearFieldsClick: function () { return onClearFieldsClick && onClearFieldsClick(); }, customIcons: props.customIcons, hideColumns: props.hideColumns, onColumnVisibilityChange: props.onColumnVisibilityChange }),
|
|
38
|
-
React.createElement(
|
|
39
|
-
React.createElement(S.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
React.createElement(S.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
React.createElement("
|
|
51
|
-
|
|
52
|
-
React.createElement(S.
|
|
53
|
-
React.createElement(S.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
React.createElement("
|
|
61
|
-
React.createElement("
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
React.createElement("
|
|
71
|
-
React.createElement("
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
React.createElement("
|
|
79
|
-
React.createElement("
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
70
|
+
React.createElement(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: handleDragEnd, sensors: sensors },
|
|
71
|
+
React.createElement(S.Table, { className: tableClassName || '' },
|
|
72
|
+
React.createElement(S.Thead, { "$sticky": stickyHeader, "$stickyTopP": stickyHeaderP }, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(S.TableRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) {
|
|
73
|
+
var _a, _b, _c, _d;
|
|
74
|
+
return (React.createElement(S.Th, { key: header.id },
|
|
75
|
+
React.createElement(S.ColumnContent, { onClick: function () {
|
|
76
|
+
var _a, _b;
|
|
77
|
+
if (!((_b = (_a = header === null || header === void 0 ? void 0 : header.column) === null || _a === void 0 ? void 0 : _a.columnDef) === null || _b === void 0 ? void 0 : _b.disableMenu))
|
|
78
|
+
setOpenFilterDialog(header.column.columnDef.accessorKey);
|
|
79
|
+
} },
|
|
80
|
+
React.createElement(S.TextColumn, null, !header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())),
|
|
81
|
+
!((_b = (_a = header === null || header === void 0 ? void 0 : header.column) === null || _a === void 0 ? void 0 : _a.columnDef) === null || _b === void 0 ? void 0 : _b.disableMenu) && (React.createElement(S.IconFilterDialog, null,
|
|
82
|
+
React.createElement("svg", { fill: "#666", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24" },
|
|
83
|
+
React.createElement("path", { d: "m7 10 5 5 5-5z" }))))),
|
|
84
|
+
openFilterDialog === header.column.columnDef.accessorKey && (React.createElement(S.FilterDialog, { ref: filterRef },
|
|
85
|
+
React.createElement(S.ListFilterDialog, null,
|
|
86
|
+
React.createElement(S.OptionFilterDialog, { style: {
|
|
87
|
+
background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
|
|
88
|
+
}, onClick: function () {
|
|
89
|
+
onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
|
|
90
|
+
setOpenFilterDialog('');
|
|
91
|
+
} },
|
|
92
|
+
React.createElement("div", { className: "icon" },
|
|
93
|
+
React.createElement("svg", { fill: "#666", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "20", height: "20" },
|
|
94
|
+
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }))),
|
|
95
|
+
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.orderAsc) || 'Menor primeiro')),
|
|
96
|
+
React.createElement(S.OptionFilterDialog, { style: {
|
|
97
|
+
background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
|
|
98
|
+
}, onClick: function () {
|
|
99
|
+
onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
|
|
100
|
+
setOpenFilterDialog('');
|
|
101
|
+
} },
|
|
102
|
+
React.createElement("div", { className: "icon rotate" },
|
|
103
|
+
React.createElement("svg", { fill: "#666", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "20", height: "20" },
|
|
104
|
+
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }))),
|
|
105
|
+
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.orderDesc) || 'Maior primeiro')),
|
|
106
|
+
!((_d = (_c = header === null || header === void 0 ? void 0 : header.column) === null || _c === void 0 ? void 0 : _c.columnDef) === null || _d === void 0 ? void 0 : _d.nofilter) && (React.createElement(S.OptionFilterDialog, { onClick: function () {
|
|
107
|
+
onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
|
|
108
|
+
setOpenFilterDialog('');
|
|
109
|
+
} },
|
|
110
|
+
React.createElement("div", { className: "icon" },
|
|
111
|
+
React.createElement("svg", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "16", height: "16" },
|
|
112
|
+
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" }))),
|
|
113
|
+
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.filter) || 'Filtrar por'))))))));
|
|
114
|
+
}))); })),
|
|
115
|
+
React.createElement("tbody", null,
|
|
116
|
+
React.createElement(SortableContext, { items: dataIds, strategy: verticalListSortingStrategy }, table.getRowModel().rows.map(function (row) {
|
|
117
|
+
return draggable ? (React.createElement(DraggableRow, { key: row.id, row: row, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut })) : (React.createElement(SimpleRow, { key: row.id, row: row, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }));
|
|
118
|
+
}))))),
|
|
83
119
|
pagination && (React.createElement(Pagination, { pagination: pagination, count: totalPages, onChangePage: function (page) { return onChangePage(__assign(__assign({}, pagination), { pageIndex: page })); } }))));
|
|
84
120
|
};
|
|
85
121
|
export default UncontrolledTable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAE9B,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GAGd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAE9B,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GAGd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,UAAU,EACV,WAAW,EACX,aAAa,EAGb,SAAS,EACT,UAAU,EACV,WAAW,EACX,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAE5F,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE9F,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAE1D,IAAM,iBAAiB,GAAG,UAAC,KAA6B;IAEpD,IAAA,IAAI,GAqBF,KAAK,KArBH,EACJ,OAAO,GAoBL,KAAK,QApBA,EACP,OAAO,GAmBL,KAAK,QAnBA,EACP,WAAW,GAkBT,KAAK,YAlBI,EACX,UAAU,GAiBR,KAAK,WAjBG,EACV,gBAAgB,GAgBd,KAAK,iBAhBS,EAChB,YAAY,GAeV,KAAK,aAfK,EACZ,YAAY,GAcV,KAAK,aAdK,EACZ,UAAU,GAaR,KAAK,WAbG,EACV,UAAU,GAYR,KAAK,WAZG,EACV,eAAe,GAWb,KAAK,gBAXQ,EACf,kBAAkB,GAUhB,KAAK,mBAVW,EAClB,aAAa,GASX,KAAK,cATM,EACb,WAAW,GAQT,KAAK,YARI,EACX,kBAAkB,GAOhB,KAAK,mBAPW,EAClB,MAAM,GAMJ,KAAK,OAND,EACN,cAAc,GAKZ,KAAK,eALO,EACd,YAAY,GAIV,KAAK,aAJK,EACZ,aAAa,GAGX,KAAK,cAHM,EACb,SAAS,GAEP,KAAK,UAFE,EACT,SAAS,GACP,KAAK,UADE,CACD;IAEJ,IAAA,KAA0C,QAAQ,CAAC,EAAE,CAAC,EAArD,gBAAgB,QAAA,EAAE,mBAAmB,QAAgB,CAAC;IACvD,IAAA,KAAwB,QAAQ,CAAM,EAAE,CAAC,EAAxC,OAAO,QAAA,EAAE,UAAU,QAAqB,CAAC;IAC1C,IAAA,KAAsC,QAAQ,CAAqB,EAAE,CAAC,EAArE,cAAc,QAAA,EAAE,iBAAiB,QAAoC,CAAC;IACvE,IAAA,KAAoC,QAAQ,CAAM,EAAE,CAAC,EAApD,aAAa,QAAA,EAAE,gBAAgB,QAAqB,CAAC;IACtD,IAAA,KAAoC,QAAQ,CAAC,KAAK,CAAC,EAAlD,aAAa,QAAA,EAAE,gBAAgB,QAAmB,CAAC;IACpD,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IAExD,IAAM,QAAQ,GAAU,OAAO,CAAC;QAC9B,OAAO,SAAS;YACd,CAAC;gBACG;oBACE,EAAE,EAAE,MAAM;oBACV,MAAM,EAAE,EAAE;oBACV,IAAI,EAAE,UAAC,EAAqB;4BAAnB,GAAG,SAAA;wBAAqB,OAAA,oBAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG;oBAAnC,CAAmC;oBACpE,WAAW,EAAE,IAAI;iBAClB;eACE,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,uBACtB,MAAM,KACT,WAAW,EAAE,IAAI,IACjB,EAHyB,CAGzB,CAAC,QAEP,CAAC,CAAC,OAAO,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,gBAAgB,GAAG,OAAO,CAAC;QAC/B,IAAM,MAAM,GAA0B;YACpC,IAAI,MAAA;YACJ,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,OAAO,EAAE,OAAO;gBAChB,aAAa,EAAE,cAAc;gBAC7B,UAAU,EAAE,UAAU;aACvB;YACD,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,eAAe,EAAE;YAClC,iBAAiB,EAAE,iBAAiB,EAAE;YACtC,eAAe,EAAE,UAAU;YAC3B,qBAAqB,EAAE,iBAAiB;YACxC,gBAAgB,EAAE,IAAI;YACtB,QAAQ,EAAE,UAAC,GAAQ,IAAK,OAAA,GAAG,CAAC,EAAE,EAAN,CAAM;YAC9B,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI;YAClB,YAAY,EAAE,IAAI;SACnB,CAAC;QAEF,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1D,IAAM,KAAK,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,eAAe,CAAC,SAAS,EAAE,cAAM,OAAA,mBAAmB,CAAC,EAAE,CAAC,EAAvB,CAAuB,CAAC,CAAC;IAE1D,IAAM,aAAa,GAAG,UAAC,KAAmB;QAChC,IAAA,MAAM,GAAW,KAAK,OAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QAG/B,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC;YACzD,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC5C,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAE1C,IAAM,KAAK,GAAG,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAClD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC;IAElH,IAAM,OAAO,GAAG,OAAO,CACrB,cAAM,OAAA,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,UAAC,IAA8B,IAAK,OAAA,IAAI,CAAC,EAAE,EAAP,CAAO,CAAC,KAAI,EAAE,EAA5D,CAA4D,EAClE,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,OAAO,CACL,oBAAC,CAAC,CAAC,SAAS;QACV,oBAAC,MAAM,IACL,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,eAAe,EAC/B,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAC/B,kBAAkB,EAAE,cAAM,OAAA,kBAAkB,IAAI,kBAAkB,EAAE,EAA1C,CAA0C,EACpE,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,GACxD;QACF,oBAAC,UAAU,IACT,kBAAkB,EAAE,aAAa,EACjC,SAAS,EAAE,CAAC,sBAAsB,CAAC,EACnC,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO;YAEhB,oBAAC,CAAC,CAAC,KAAK,IAAC,SAAS,EAAE,cAAc,IAAI,EAAE;gBACtC,oBAAC,CAAC,CAAC,KAAK,eAAU,YAAY,iBAAe,aAAa,IACvD,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,UAAC,WAAgB,IAAK,OAAA,CACjD,oBAAC,CAAC,CAAC,QAAQ,IAAC,GAAG,EAAE,WAAW,CAAC,EAAE,IAC5B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAW;;oBAAK,OAAA,CACxC,oBAAC,CAAC,CAAC,EAAE,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE;wBAClB,oBAAC,CAAC,CAAC,aAAa,IACd,OAAO,EAAE;;gCACP,IAAI,CAAC,CAAA,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,0CAAE,SAAS,0CAAE,WAAW,CAAA;oCACzC,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;4BAC7D,CAAC;4BAED,oBAAC,CAAC,CAAC,UAAU,QACV,CAAC,MAAM,CAAC,aAAa,IAAI,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAC5E;4BACd,CAAC,CAAA,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,0CAAE,SAAS,0CAAE,WAAW,CAAA,IAAI,CAC1C,oBAAC,CAAC,CAAC,gBAAgB;gCACjB,6BAAK,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,iBAAa,MAAM,EAAC,OAAO,EAAC,WAAW;oCACvE,8BAAM,CAAC,EAAC,gBAAgB,GAAG,CACvB,CACa,CACtB,CACe;wBACjB,gBAAgB,KAAK,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,IAAI,CAC3D,oBAAC,CAAC,CAAC,YAAY,IAAC,GAAG,EAAE,SAAS;4BAC5B,oBAAC,CAAC,CAAC,gBAAgB;gCACjB,oBAAC,CAAC,CAAC,kBAAkB,IACnB,KAAK,EAAE;wCACL,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;qCACvD,EACD,OAAO,EAAE;wCACP,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;wCACvE,mBAAmB,CAAC,EAAE,CAAC,CAAC;oCAC1B,CAAC;oCAED,6BAAK,SAAS,EAAC,MAAM;wCACnB,6BACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;4CAEX,8BACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6CAA6C,GAC/C,CACE,CACF;oCACN,+BAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAAI,gBAAgB,CAAK,CACxB;gCACvB,oBAAC,CAAC,CAAC,kBAAkB,IACnB,KAAK,EAAE;wCACL,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;qCACtD,EACD,OAAO,EAAE;wCACP,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;wCACxE,mBAAmB,CAAC,EAAE,CAAC,CAAC;oCAC1B,CAAC;oCAED,6BAAK,SAAS,EAAC,aAAa;wCAC1B,6BACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;4CAEX,8BACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6CAA6C,GACzC,CACJ,CACF;oCACN,+BAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,KAAI,gBAAgB,CAAK,CACzB;gCACtB,CAAC,CAAA,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,0CAAE,SAAS,0CAAE,QAAQ,CAAA,IAAI,CACvC,oBAAC,CAAC,CAAC,kBAAkB,IACnB,OAAO,EAAE;wCACP,aAAa,IAAI,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;wCACpE,mBAAmB,CAAC,EAAE,CAAC,CAAC;oCAC1B,CAAC;oCAED,6BAAK,SAAS,EAAC,MAAM;wCACnB,6BACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;4CAEX,8BACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,qSAAqS,GACjS,CACJ,CACF;oCACN,+BAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,aAAa,CAAK,CACnB,CACxB,CACkB,CACN,CAClB,CACI,CACR,CAAA;iBAAA,CAAC,CACS,CACd,EApHkD,CAoHlD,CAAC,CACM;gBACV;oBACE,oBAAC,eAAe,IAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,2BAA2B,IACnE,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,GAAQ;wBACrC,OAAO,SAAS,CAAC,CAAC,CAAC,CACjB,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;oBACJ,CAAC,CAAC,CACc,CACZ,CACA,CACC;QACZ,UAAU,IAAI,CACb,oBAAC,UAAU,IACT,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,UAAU,EACjB,YAAY,EAAE,UAAC,IAAY,IAAK,OAAA,YAAY,uBAAM,UAAU,KAAE,SAAS,EAAE,IAAI,IAAG,EAAhD,CAAgD,GAChF,CACH,CACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -21,17 +21,19 @@ export interface UncontrolledTableProps {
|
|
|
21
21
|
totalPages: number;
|
|
22
22
|
showClearFields?: boolean;
|
|
23
23
|
customTotalResults?: string;
|
|
24
|
-
onChangePage: (pagination: Pagination) => void;
|
|
25
|
-
onClearFieldsClick?: () => void;
|
|
26
|
-
onFilterClick?: (column: string) => void;
|
|
27
|
-
onSortClick?: (column: string, direction: string) => void;
|
|
28
24
|
labels?: Labels;
|
|
29
25
|
tableClassName?: string;
|
|
30
26
|
stickyHeader?: boolean;
|
|
31
27
|
stickyHeaderP?: number;
|
|
32
28
|
customIcons?: React.ReactNode[];
|
|
33
29
|
hideColumns?: string[];
|
|
30
|
+
draggable?: boolean;
|
|
31
|
+
onChangePage: (pagination: Pagination) => void;
|
|
32
|
+
onClearFieldsClick?: () => void;
|
|
33
|
+
onFilterClick?: (column: string) => void;
|
|
34
|
+
onSortClick?: (column: string, direction: string) => void;
|
|
34
35
|
onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
|
|
36
|
+
onDragEnd?: (data: any[]) => void;
|
|
35
37
|
}
|
|
36
38
|
export interface ColumnsTable {
|
|
37
39
|
header: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.78",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
|
|
6
6
|
"scripts": {
|
|
@@ -89,6 +89,9 @@
|
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
|
+
"@dnd-kit/core": "^6.3.1",
|
|
93
|
+
"@dnd-kit/modifiers": "^9.0.0",
|
|
94
|
+
"@dnd-kit/sortable": "^10.0.0",
|
|
92
95
|
"@emotion/react": "^11.11.1",
|
|
93
96
|
"@emotion/styled": "^11.11.0",
|
|
94
97
|
"@mui/icons-material": "^5.14.9",
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import Pagination from "./pagination";
|
|
2
2
|
import Header from "./header"
|
|
3
|
-
import
|
|
3
|
+
import SimpleRow from "./row/SimpleRow";
|
|
4
|
+
import DraggableRow from "./row/DraggableRow";
|
|
5
|
+
import RowDragHandleCell from "./row/RowDragHandleCell";
|
|
4
6
|
|
|
5
7
|
export {
|
|
6
8
|
Pagination,
|
|
7
9
|
Header,
|
|
8
|
-
|
|
10
|
+
SimpleRow,
|
|
11
|
+
DraggableRow,
|
|
12
|
+
RowDragHandleCell
|
|
9
13
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import * as S from './styles';
|
|
3
|
+
|
|
4
|
+
import { flexRender } from '@tanstack/react-table';
|
|
5
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
6
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
7
|
+
|
|
8
|
+
const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
|
|
9
|
+
const { transform, transition, setNodeRef, isDragging } = useSortable({
|
|
10
|
+
id: row.id,
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
const style: CSSProperties = {
|
|
14
|
+
transform: CSS.Transform.toString(transform),
|
|
15
|
+
transition: transition,
|
|
16
|
+
opacity: isDragging ? 0.8 : 1,
|
|
17
|
+
zIndex: isDragging ? 1 : 0,
|
|
18
|
+
position: 'relative',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<S.Tr $hasAction={!!onClick || !!onMouseOver || !!onMouseOut} ref={setNodeRef} style={style}>
|
|
23
|
+
{row.getVisibleCells().map((cell: any) => (
|
|
24
|
+
<S.Td key={cell.id} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
|
|
25
|
+
{cell.column.columnDef.type == 'action'
|
|
26
|
+
? cell.getValue()
|
|
27
|
+
: flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
28
|
+
</S.Td>
|
|
29
|
+
))}
|
|
30
|
+
</S.Tr>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default DraggableRow;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
3
|
+
import { Button } from '../../../../components/Button';
|
|
4
|
+
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
|
5
|
+
|
|
6
|
+
const RowDragHandleCell: React.FC<any> = ({ rowId }: { rowId: string}) => {
|
|
7
|
+
const { attributes, listeners } = useSortable({
|
|
8
|
+
id: rowId,
|
|
9
|
+
});
|
|
10
|
+
return (
|
|
11
|
+
<Button {...attributes} {...listeners} style={{ cursor: 'grab' }}>
|
|
12
|
+
<DragIndicatorIcon />
|
|
13
|
+
</Button>
|
|
14
|
+
);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export default RowDragHandleCell;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { flexRender } from '@tanstack/react-table';
|
|
3
|
+
import * as S from './styles';
|
|
4
|
+
|
|
5
|
+
const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
|
|
6
|
+
return (
|
|
7
|
+
<S.Tr
|
|
8
|
+
$hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
|
|
9
|
+
onClick={() => (onClick ? onClick(row.original) : null)}
|
|
10
|
+
onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
|
|
11
|
+
onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
|
|
12
|
+
>
|
|
13
|
+
{row.getVisibleCells().map((cell: any, index: number) => {
|
|
14
|
+
return (
|
|
15
|
+
<S.Td key={index}>
|
|
16
|
+
{cell.column.columnDef.type == 'action'
|
|
17
|
+
? cell.getValue()
|
|
18
|
+
: flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
19
|
+
</S.Td>
|
|
20
|
+
);
|
|
21
|
+
})}
|
|
22
|
+
</S.Tr>
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default SimpleRow;
|