norma-library 0.5.121 → 0.5.122
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/dist/esm/components/UncontrolledTable/components/pagination/index.d.ts +10 -2
- package/dist/esm/components/UncontrolledTable/components/pagination/index.js +13 -21
- package/dist/esm/components/UncontrolledTable/components/pagination/index.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/index.js +9 -81
- package/dist/esm/components/UncontrolledTable/index.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/interface.d.ts +7 -7
- package/package.json +1 -1
- package/src/components/UncontrolledTable/components/pagination/index.tsx +38 -35
- package/src/components/UncontrolledTable/index.tsx +13 -95
- package/src/components/UncontrolledTable/interface.ts +8 -3
- package/src/stories/UncontrolledTable.stories.tsx +44 -28
|
@@ -1,3 +1,11 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface PaginationProps {
|
|
3
|
+
count: number;
|
|
4
|
+
pagination: {
|
|
5
|
+
pageIndex: number;
|
|
6
|
+
pageSize: number;
|
|
7
|
+
};
|
|
8
|
+
onChangePage: (page: number) => void;
|
|
9
|
+
}
|
|
10
|
+
declare const Pagination: (props: PaginationProps) => React.JSX.Element;
|
|
3
11
|
export default Pagination;
|
|
@@ -1,26 +1,18 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
|
-
import React
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
|
|
4
|
-
import * as S from
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
onChangePage(page -
|
|
16
|
-
}
|
|
17
|
-
else {
|
|
18
|
-
table.setPageIndex(page - 1);
|
|
19
|
-
}
|
|
20
|
-
}, [table]);
|
|
21
|
-
return React.createElement(S.Pagination, null,
|
|
22
|
-
React.createElement("div", { className: 'content' },
|
|
23
|
-
React.createElement(MuiPagination, { onChange: onPageChange, count: table.getPageCount(), renderItem: function (item) { return (React.createElement(PaginationItem, __assign({ classes: { root: 'button', selected: 'button-active' }, slots: { previous: PreviousPagination, next: NextPagination }, sx: { height: '35px', minWidth: '35px' } }, item))); } })));
|
|
4
|
+
import * as S from './styles';
|
|
5
|
+
var Pagination = function (props) {
|
|
6
|
+
var count = props.count, pagination = props.pagination, onChangePage = props.onChangePage;
|
|
7
|
+
var PreviousPagination = function () {
|
|
8
|
+
return React.createElement("span", null, '<');
|
|
9
|
+
};
|
|
10
|
+
var NextPagination = function () {
|
|
11
|
+
return React.createElement("span", null, '>');
|
|
12
|
+
};
|
|
13
|
+
return (React.createElement(S.Pagination, null,
|
|
14
|
+
React.createElement("div", { className: "content" },
|
|
15
|
+
React.createElement(MuiPagination, { onChange: function (_event, page) { return onChangePage(page); }, page: pagination.pageIndex, count: count, renderItem: function (item) { return (React.createElement(PaginationItem, __assign({ classes: { root: 'button', selected: 'button-active' }, slots: { previous: PreviousPagination, next: NextPagination }, sx: { height: '35px', minWidth: '35px' } }, item))); } }))));
|
|
24
16
|
};
|
|
25
17
|
export default Pagination;
|
|
26
18
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/pagination/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/pagination/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAQ9B,IAAM,UAAU,GAAG,UAAC,KAAsB;IAChC,IAAA,KAAK,GAA+B,KAAK,MAApC,EAAE,UAAU,GAAmB,KAAK,WAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IAElD,IAAM,kBAAkB,GAAkB;QACxC,OAAO,kCAAO,GAAG,CAAQ,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAM,cAAc,GAAkB;QACpC,OAAO,kCAAO,GAAG,CAAQ,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,CAAC,CAAC,UAAU;QACX,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,aAAa,IACZ,QAAQ,EAAE,UAAC,MAAkC,EAAE,IAAY,IAAK,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,EAClF,IAAI,EAAE,UAAU,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAC,IAAS,IAAK,OAAA,CACzB,oBAAC,cAAc,aACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,EACtD,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,IAAI,EAAE,cAAc,EAAE,EAC7D,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IACpC,IAAI,EACR,CACH,EAP0B,CAO1B,GACD,CACE,CACO,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,104 +1,32 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
1
2
|
import React, { useState, useMemo } from 'react';
|
|
2
3
|
import * as S from './styles';
|
|
3
|
-
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable,
|
|
4
|
-
import { format, isAfter, isBefore } from 'date-fns';
|
|
4
|
+
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
|
|
5
5
|
import { Pagination, Header, TBody } from './components';
|
|
6
6
|
var UncontrolledTable = function (props) {
|
|
7
|
-
var data = props.data, columns = props.columns, onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, showTotalResults = props.showTotalResults, showSettings = props.showSettings,
|
|
7
|
+
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;
|
|
8
8
|
var _a = useState(''), openFilterDialog = _a[0], setOpenFilterDialog = _a[1];
|
|
9
9
|
var _b = useState([]), sorting = _b[0], setSorting = _b[1];
|
|
10
10
|
var _c = useState([]), filterByColumn = _c[0], setFilterByColumn = _c[1];
|
|
11
11
|
var _d = useState([]), globalFilters = _d[0], setGlobalFilters = _d[1];
|
|
12
12
|
var _e = useState(false), orderSmallest = _e[0], setOrderSmallest = _e[1];
|
|
13
13
|
var _f = useState(false), orderLargest = _f[0], setOrderLargest = _f[1];
|
|
14
|
-
var customFilterText = function (row, value) {
|
|
15
|
-
var itensFinded = globalFilters.map(function (item) {
|
|
16
|
-
var _a, _b, _c, _d, _e;
|
|
17
|
-
if (item.type === 'Horario Igual a') {
|
|
18
|
-
return item.value === row.original[item.acessor];
|
|
19
|
-
}
|
|
20
|
-
if (item.type === 'Horario maior que') {
|
|
21
|
-
var date = new Date();
|
|
22
|
-
var rowDate = new Date();
|
|
23
|
-
var hourSplited = (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.split(':');
|
|
24
|
-
var rowDateSplited = row.original[item.acessor].split(':');
|
|
25
|
-
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
|
|
26
|
-
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
|
|
27
|
-
return isAfter(rowDate, date);
|
|
28
|
-
}
|
|
29
|
-
if (item.type === 'Horario menor que') {
|
|
30
|
-
var date = new Date();
|
|
31
|
-
var rowDate = new Date();
|
|
32
|
-
var hourSplited = (_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.split(':');
|
|
33
|
-
var rowDateSplited = row.original[item.acessor].split(':');
|
|
34
|
-
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
|
|
35
|
-
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
|
|
36
|
-
return isBefore(rowDate, date);
|
|
37
|
-
}
|
|
38
|
-
if (item.type === 'Data Igual a') {
|
|
39
|
-
var dateSplited = (_c = item === null || item === void 0 ? void 0 : item.value) === null || _c === void 0 ? void 0 : _c.split('-');
|
|
40
|
-
return (row.original[item.acessor] ===
|
|
41
|
-
format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0, 0), 'dd/MM/yyyy'));
|
|
42
|
-
}
|
|
43
|
-
if (item.type === 'Data maior que') {
|
|
44
|
-
var dateSplited = (_d = item === null || item === void 0 ? void 0 : item.value) === null || _d === void 0 ? void 0 : _d.split('-');
|
|
45
|
-
var rowDateSplited = row.original[item.acessor].split('/');
|
|
46
|
-
return isAfter(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]));
|
|
47
|
-
}
|
|
48
|
-
if (item.type === 'Data menor que') {
|
|
49
|
-
var dateSplited = (_e = item === null || item === void 0 ? void 0 : item.value) === null || _e === void 0 ? void 0 : _e.split('-');
|
|
50
|
-
var rowDateSplited = row.original[item.acessor].split('/');
|
|
51
|
-
return isBefore(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]));
|
|
52
|
-
}
|
|
53
|
-
if (item.type === 'Igual a' && typeof value === 'number') {
|
|
54
|
-
return row.original[item.acessor] === item.value;
|
|
55
|
-
}
|
|
56
|
-
if (item.type === 'Igual a') {
|
|
57
|
-
return row.original[item.acessor] === item.value;
|
|
58
|
-
}
|
|
59
|
-
if (item.type === 'Contém') {
|
|
60
|
-
return !!row.original[item.acessor].includes(item.value);
|
|
61
|
-
}
|
|
62
|
-
if (item.type === 'Não é igual a') {
|
|
63
|
-
return row.original[item.acessor] !== item.value;
|
|
64
|
-
}
|
|
65
|
-
if (item.type === 'Maior que') {
|
|
66
|
-
return row.original[item.acessor] > item.value;
|
|
67
|
-
}
|
|
68
|
-
if (item.type === 'Menor que') {
|
|
69
|
-
return row.original[item.acessor] < item.value;
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
var result = itensFinded.every(function (item) { return item; });
|
|
73
|
-
return result;
|
|
74
|
-
};
|
|
75
14
|
var reactTableConfig = useMemo(function () {
|
|
76
15
|
var config = {
|
|
77
|
-
data: data,
|
|
78
16
|
columns: columns,
|
|
79
|
-
|
|
80
|
-
customFilterText: customFilterText,
|
|
81
|
-
},
|
|
17
|
+
data: data,
|
|
82
18
|
state: {
|
|
83
19
|
sorting: sorting,
|
|
84
20
|
columnFilters: filterByColumn,
|
|
21
|
+
pagination: pagination,
|
|
85
22
|
},
|
|
86
|
-
rowCount:
|
|
23
|
+
rowCount: totalPages,
|
|
87
24
|
getCoreRowModel: getCoreRowModel(),
|
|
88
25
|
getSortedRowModel: getSortedRowModel(),
|
|
89
|
-
getFilteredRowModel: getFilteredRowModel(),
|
|
90
26
|
onSortingChange: setSorting,
|
|
91
27
|
onColumnFiltersChange: setFilterByColumn,
|
|
28
|
+
manualPagination: true,
|
|
92
29
|
};
|
|
93
|
-
config.rowCount = rowCount || 10;
|
|
94
|
-
if (!pagination) {
|
|
95
|
-
config.getPaginationRowModel = getPaginationRowModel();
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
config.state.pagination = pagination;
|
|
99
|
-
config.manualPagination = true;
|
|
100
|
-
config.pageCount = pagination.totalPages;
|
|
101
|
-
}
|
|
102
30
|
return config;
|
|
103
31
|
}, [data, sorting, filterByColumn, columns, pagination]);
|
|
104
32
|
var table = useReactTable(reactTableConfig);
|
|
@@ -132,7 +60,7 @@ var UncontrolledTable = function (props) {
|
|
|
132
60
|
React.createElement("div", { className: "icon" },
|
|
133
61
|
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" },
|
|
134
62
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }))),
|
|
135
|
-
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.orderAsc) ||
|
|
63
|
+
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.orderAsc) || 'Menor primeiro')),
|
|
136
64
|
React.createElement(S.OptionFilterDialog, { style: {
|
|
137
65
|
background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
|
|
138
66
|
}, onClick: function () {
|
|
@@ -153,7 +81,7 @@ var UncontrolledTable = function (props) {
|
|
|
153
81
|
React.createElement("p", null, (labels === null || labels === void 0 ? void 0 : labels.filter) || 'Filtrar por'))))))))));
|
|
154
82
|
}))); })),
|
|
155
83
|
React.createElement(TBody, { table: table, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }))),
|
|
156
|
-
React.createElement(Pagination, {
|
|
84
|
+
React.createElement(Pagination, { pagination: pagination, count: totalPages, onChangePage: function (page) { return onChangePage(__assign(__assign({}, pagination), { pageIndex: page })); } })));
|
|
157
85
|
};
|
|
158
86
|
export default UncontrolledTable;
|
|
159
87
|
//# sourceMappingURL=index.js.map
|
|
@@ -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,OAAO,CAAC;AACjD,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAC9B,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,10 @@ type Labels = {
|
|
|
5
5
|
filter: string;
|
|
6
6
|
clearFilter: string;
|
|
7
7
|
};
|
|
8
|
+
interface Pagination {
|
|
9
|
+
pageIndex: number;
|
|
10
|
+
pageSize: number;
|
|
11
|
+
}
|
|
8
12
|
export interface UncontrolledTableProps {
|
|
9
13
|
data: any;
|
|
10
14
|
columns: ColumnDef<ColumnsTable>[];
|
|
@@ -13,15 +17,11 @@ export interface UncontrolledTableProps {
|
|
|
13
17
|
onMouseOut: any;
|
|
14
18
|
showTotalResults: boolean;
|
|
15
19
|
showSettings: boolean;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
pageIndex: number;
|
|
19
|
-
pageSize: number;
|
|
20
|
-
totalPages: number;
|
|
21
|
-
};
|
|
20
|
+
pagination: Pagination;
|
|
21
|
+
totalPages: number;
|
|
22
22
|
showClearFields?: boolean;
|
|
23
23
|
customTotalResults?: string;
|
|
24
|
-
onChangePage
|
|
24
|
+
onChangePage: (pagination: Pagination) => void;
|
|
25
25
|
onClearFieldsClick?: () => void;
|
|
26
26
|
onFilterClick?: (column: string) => void;
|
|
27
27
|
onSortClick?: (column: string, direction: string) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.122",
|
|
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": {
|
|
@@ -1,40 +1,43 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
|
|
3
|
-
import * as S from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
|
|
3
|
+
import * as S from './styles';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
return <span>{'>'}</span>
|
|
5
|
+
interface PaginationProps {
|
|
6
|
+
count: number;
|
|
7
|
+
pagination: { pageIndex: number; pageSize: number };
|
|
8
|
+
onChangePage: (page: number) => void;
|
|
10
9
|
}
|
|
11
10
|
|
|
12
|
-
const Pagination
|
|
13
|
-
|
|
14
|
-
const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
|
|
15
|
-
if(!!onChangePage) {
|
|
16
|
-
onChangePage(page-1)
|
|
17
|
-
} else {
|
|
18
|
-
table.setPageIndex(page - 1)
|
|
19
|
-
}
|
|
20
|
-
}, [table])
|
|
11
|
+
const Pagination = (props: PaginationProps) => {
|
|
12
|
+
const { count, pagination, onChangePage } = props;
|
|
21
13
|
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
14
|
+
const PreviousPagination: React.FC<any> = () => {
|
|
15
|
+
return <span>{'<'}</span>;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const NextPagination: React.FC<any> = () => {
|
|
19
|
+
return <span>{'>'}</span>;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<S.Pagination>
|
|
24
|
+
<div className="content">
|
|
25
|
+
<MuiPagination
|
|
26
|
+
onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
|
|
27
|
+
page={pagination.pageIndex}
|
|
28
|
+
count={count}
|
|
29
|
+
renderItem={(item: any) => (
|
|
30
|
+
<PaginationItem
|
|
31
|
+
classes={{ root: 'button', selected: 'button-active' }}
|
|
32
|
+
slots={{ previous: PreviousPagination, next: NextPagination }}
|
|
33
|
+
sx={{ height: '35px', minWidth: '35px' }}
|
|
34
|
+
{...item}
|
|
35
|
+
/>
|
|
36
|
+
)}
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
</S.Pagination>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
39
42
|
|
|
40
|
-
export default Pagination
|
|
43
|
+
export default Pagination;
|
|
@@ -5,12 +5,10 @@ import {
|
|
|
5
5
|
getCoreRowModel,
|
|
6
6
|
getSortedRowModel,
|
|
7
7
|
useReactTable,
|
|
8
|
-
getFilteredRowModel,
|
|
9
8
|
ColumnFiltersState,
|
|
10
|
-
|
|
9
|
+
TableOptions,
|
|
11
10
|
} from '@tanstack/react-table';
|
|
12
11
|
|
|
13
|
-
import { format, isAfter, isBefore } from 'date-fns';
|
|
14
12
|
import { Pagination, Header, TBody } from './components';
|
|
15
13
|
import { UncontrolledTableProps } from './interface';
|
|
16
14
|
|
|
@@ -23,9 +21,9 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
23
21
|
onMouseOut,
|
|
24
22
|
showTotalResults,
|
|
25
23
|
showSettings,
|
|
26
|
-
rowCount,
|
|
27
24
|
onChangePage,
|
|
28
25
|
pagination,
|
|
26
|
+
totalPages,
|
|
29
27
|
showClearFields,
|
|
30
28
|
onClearFieldsClick,
|
|
31
29
|
onFilterClick,
|
|
@@ -41,107 +39,23 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
41
39
|
const [orderSmallest, setOrderSmallest] = useState(false);
|
|
42
40
|
const [orderLargest, setOrderLargest] = useState(false);
|
|
43
41
|
|
|
44
|
-
const customFilterText = (row: any, value: string) => {
|
|
45
|
-
const itensFinded = globalFilters.map((item: any) => {
|
|
46
|
-
if (item.type === 'Horario Igual a') {
|
|
47
|
-
return item.value === row.original[item.acessor];
|
|
48
|
-
}
|
|
49
|
-
if (item.type === 'Horario maior que') {
|
|
50
|
-
const date = new Date();
|
|
51
|
-
const rowDate = new Date();
|
|
52
|
-
const hourSplited = item?.value?.split(':');
|
|
53
|
-
const rowDateSplited = row.original[item.acessor].split(':');
|
|
54
|
-
|
|
55
|
-
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
|
|
56
|
-
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
|
|
57
|
-
|
|
58
|
-
return isAfter(rowDate, date);
|
|
59
|
-
}
|
|
60
|
-
if (item.type === 'Horario menor que') {
|
|
61
|
-
const date = new Date();
|
|
62
|
-
const rowDate = new Date();
|
|
63
|
-
const hourSplited = item?.value?.split(':');
|
|
64
|
-
const rowDateSplited = row.original[item.acessor].split(':');
|
|
65
|
-
|
|
66
|
-
date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0);
|
|
67
|
-
rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0, 0);
|
|
68
|
-
|
|
69
|
-
return isBefore(rowDate, date);
|
|
70
|
-
}
|
|
71
|
-
if (item.type === 'Data Igual a') {
|
|
72
|
-
const dateSplited = item?.value?.split('-');
|
|
73
|
-
return (
|
|
74
|
-
row.original[item.acessor] ===
|
|
75
|
-
format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0, 0), 'dd/MM/yyyy')
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
if (item.type === 'Data maior que') {
|
|
79
|
-
const dateSplited = item?.value?.split('-');
|
|
80
|
-
const rowDateSplited = row.original[item.acessor].split('/');
|
|
81
|
-
return isAfter(
|
|
82
|
-
new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
|
|
83
|
-
new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
if (item.type === 'Data menor que') {
|
|
87
|
-
const dateSplited = item?.value?.split('-');
|
|
88
|
-
const rowDateSplited = row.original[item.acessor].split('/');
|
|
89
|
-
return isBefore(
|
|
90
|
-
new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]),
|
|
91
|
-
new Date(dateSplited[0], dateSplited[1], dateSplited[2]),
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
if (item.type === 'Igual a' && typeof value === 'number') {
|
|
95
|
-
return row.original[item.acessor] === item.value;
|
|
96
|
-
}
|
|
97
|
-
if (item.type === 'Igual a') {
|
|
98
|
-
return row.original[item.acessor] === item.value;
|
|
99
|
-
}
|
|
100
|
-
if (item.type === 'Contém') {
|
|
101
|
-
return !!row.original[item.acessor].includes(item.value);
|
|
102
|
-
}
|
|
103
|
-
if (item.type === 'Não é igual a') {
|
|
104
|
-
return row.original[item.acessor] !== item.value;
|
|
105
|
-
}
|
|
106
|
-
if (item.type === 'Maior que') {
|
|
107
|
-
return row.original[item.acessor] > item.value;
|
|
108
|
-
}
|
|
109
|
-
if (item.type === 'Menor que') {
|
|
110
|
-
return row.original[item.acessor] < item.value;
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
const result = itensFinded.every((item: any) => item);
|
|
115
|
-
return result;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
42
|
const reactTableConfig = useMemo(() => {
|
|
119
|
-
const config:
|
|
43
|
+
const config: TableOptions<unknown> = {
|
|
44
|
+
columns: columns as any,
|
|
120
45
|
data,
|
|
121
|
-
columns,
|
|
122
|
-
filterFns: {
|
|
123
|
-
customFilterText: customFilterText,
|
|
124
|
-
},
|
|
125
46
|
state: {
|
|
126
47
|
sorting: sorting,
|
|
127
48
|
columnFilters: filterByColumn,
|
|
49
|
+
pagination: pagination,
|
|
128
50
|
},
|
|
129
|
-
rowCount:
|
|
51
|
+
rowCount: totalPages,
|
|
130
52
|
getCoreRowModel: getCoreRowModel(),
|
|
131
53
|
getSortedRowModel: getSortedRowModel(),
|
|
132
|
-
getFilteredRowModel: getFilteredRowModel(),
|
|
133
54
|
onSortingChange: setSorting,
|
|
134
55
|
onColumnFiltersChange: setFilterByColumn,
|
|
56
|
+
manualPagination: true,
|
|
135
57
|
};
|
|
136
|
-
config.rowCount = rowCount || 10;
|
|
137
58
|
|
|
138
|
-
if (!pagination) {
|
|
139
|
-
config.getPaginationRowModel = getPaginationRowModel();
|
|
140
|
-
} else {
|
|
141
|
-
config.state.pagination = pagination;
|
|
142
|
-
config.manualPagination = true;
|
|
143
|
-
config.pageCount = pagination.totalPages;
|
|
144
|
-
}
|
|
145
59
|
return config;
|
|
146
60
|
}, [data, sorting, filterByColumn, columns, pagination]);
|
|
147
61
|
|
|
@@ -227,7 +141,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
227
141
|
></path>
|
|
228
142
|
</svg>
|
|
229
143
|
</div>
|
|
230
|
-
<p>{labels?.orderAsc ||
|
|
144
|
+
<p>{labels?.orderAsc || 'Menor primeiro'}</p>
|
|
231
145
|
</S.OptionFilterDialog>
|
|
232
146
|
<S.OptionFilterDialog
|
|
233
147
|
style={{
|
|
@@ -299,7 +213,11 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
299
213
|
<TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
|
|
300
214
|
</S.Table>
|
|
301
215
|
</S.Content>
|
|
302
|
-
<Pagination
|
|
216
|
+
<Pagination
|
|
217
|
+
pagination={pagination}
|
|
218
|
+
count={totalPages}
|
|
219
|
+
onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
|
|
220
|
+
/>
|
|
303
221
|
</S.Container>
|
|
304
222
|
);
|
|
305
223
|
};
|
|
@@ -5,6 +5,11 @@ type Labels = {
|
|
|
5
5
|
orderDesc: string;
|
|
6
6
|
filter: string;
|
|
7
7
|
clearFilter: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
interface Pagination {
|
|
11
|
+
pageIndex: number;
|
|
12
|
+
pageSize: number;
|
|
8
13
|
}
|
|
9
14
|
|
|
10
15
|
export interface UncontrolledTableProps {
|
|
@@ -15,11 +20,11 @@ export interface UncontrolledTableProps {
|
|
|
15
20
|
onMouseOut: any;
|
|
16
21
|
showTotalResults: boolean;
|
|
17
22
|
showSettings: boolean;
|
|
18
|
-
|
|
19
|
-
|
|
23
|
+
pagination: Pagination;
|
|
24
|
+
totalPages: number;
|
|
20
25
|
showClearFields?: boolean;
|
|
21
26
|
customTotalResults?: string;
|
|
22
|
-
onChangePage
|
|
27
|
+
onChangePage: (pagination: Pagination) => void;
|
|
23
28
|
onClearFieldsClick?: () => void;
|
|
24
29
|
onFilterClick?: (column: string) => void;
|
|
25
30
|
onSortClick?: (column: string, direction: string) => void;
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import UncontrolledTable from '../components/UncontrolledTable';
|
|
3
3
|
import { Button } from '../components/Button';
|
|
4
4
|
import { format } from 'date-fns';
|
|
5
5
|
|
|
6
|
+
const Template = args => {
|
|
7
|
+
return <UncontrolledTable {...args} />;
|
|
8
|
+
};
|
|
9
|
+
|
|
6
10
|
export default {
|
|
7
|
-
title: '
|
|
8
|
-
component:
|
|
11
|
+
title: 'Table/UncontrolledTable',
|
|
12
|
+
component: Template,
|
|
9
13
|
tags: ['autodocs'],
|
|
10
14
|
parameters: {
|
|
11
15
|
layout: 'centered',
|
|
@@ -292,30 +296,42 @@ const columns = [
|
|
|
292
296
|
},
|
|
293
297
|
];
|
|
294
298
|
|
|
295
|
-
export const Default = args =>
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
299
|
+
export const Default = args => {
|
|
300
|
+
const [pagination, setPagination] = useState({
|
|
301
|
+
pageIndex: 1,
|
|
302
|
+
pageSize: 10,
|
|
303
|
+
});
|
|
304
|
+
return (
|
|
305
|
+
<>
|
|
306
|
+
<div className="Buttons" style={{marginBottom: '10px'}}>
|
|
307
|
+
<button onClick={() => setPagination({ ...pagination, pageIndex: 1 })}>Page 1</button>
|
|
308
|
+
<button onClick={() => setPagination({ ...pagination, pageIndex: 10 })}>Page 10</button>
|
|
309
|
+
</div>
|
|
310
|
+
<UncontrolledTable
|
|
311
|
+
data={data}
|
|
312
|
+
columns={columns}
|
|
313
|
+
showTotalResults
|
|
314
|
+
showSettings
|
|
315
|
+
onClick={value => console.log('onClick line:', value)}
|
|
316
|
+
onMouseOver={value => console.log('onMouseOver line:', value)}
|
|
317
|
+
onMouseOut={value => console.log('onMouseOut line:', value)}
|
|
318
|
+
onClearFieldsClick={() => console.log('onClearFieldsClick')}
|
|
319
|
+
onFilterClick={column => console.log('onFilterClick', column)}
|
|
320
|
+
onChangePage={pagination => setPagination(pagination)}
|
|
321
|
+
onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
|
|
322
|
+
pagination={pagination}
|
|
323
|
+
totalPages={10}
|
|
324
|
+
showClearFields
|
|
325
|
+
labels={{
|
|
326
|
+
orderAsc: 'orderAsc',
|
|
327
|
+
orderDesc: 'orderDesc',
|
|
328
|
+
filter: 'filter',
|
|
329
|
+
clearFilter: 'clearFilter',
|
|
330
|
+
}}
|
|
331
|
+
{...args}
|
|
332
|
+
/>
|
|
333
|
+
</>
|
|
334
|
+
);
|
|
335
|
+
};
|
|
320
336
|
|
|
321
337
|
Default.args = {};
|