norma-library 0.5.77 → 0.5.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
|
-
import React, { useEffect, useState, useRef } from 'react';
|
|
2
|
+
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
3
3
|
import { Box, Stack, Paper } from '@mui/material';
|
|
4
4
|
import Table from '@mui/material/Table';
|
|
5
5
|
import TableBody from '@mui/material/TableBody';
|
|
@@ -25,17 +25,21 @@ export function Cog6ToothIcon(props) {
|
|
|
25
25
|
export var DataGrid = function (_a) {
|
|
26
26
|
var _b = _a.data, data = _b === void 0 ? [] : _b, onRowClick = _a.onRowClick;
|
|
27
27
|
var pageSize = 10;
|
|
28
|
-
var columns =
|
|
29
|
-
|
|
28
|
+
var columns = useMemo(function () {
|
|
29
|
+
return data[0].columns;
|
|
30
|
+
}, [data]);
|
|
31
|
+
var dataSource = useMemo(function () {
|
|
32
|
+
return data[0].dataSource;
|
|
33
|
+
}, [data]);
|
|
30
34
|
var _c = useState([]), selectedItems = _c[0], setSelectedItems = _c[1];
|
|
31
35
|
var _d = useState('down'), sorting = _d[0], setSorting = _d[1];
|
|
32
36
|
var _e = useState(false), selectAll = _e[0], setSelectAll = _e[1];
|
|
33
37
|
var _f = useState('id'), currentActiveSorting = _f[0], setCurrentActiveSorting = _f[1];
|
|
34
38
|
var _g = useState(null), currentDropDownActive = _g[0], setCurrentDropDownActive = _g[1];
|
|
35
|
-
var _h = useState(
|
|
36
|
-
var _j = useState(
|
|
37
|
-
var _k = useState(
|
|
38
|
-
var _l = useState(
|
|
39
|
+
var _h = useState([]), originalDataSource = _h[0], setOriginalDataSource = _h[1];
|
|
40
|
+
var _j = useState([]), newDataSource = _j[0], setDataSource = _j[1];
|
|
41
|
+
var _k = useState(0), totalRecords = _k[0], setTotalRecords = _k[1];
|
|
42
|
+
var _l = useState(0), totalPages = _l[0], setTotalPages = _l[1];
|
|
39
43
|
var _m = useState(1), currentPage = _m[0], setCurrentPage = _m[1];
|
|
40
44
|
var startIndex = (currentPage - 1) * pageSize;
|
|
41
45
|
var endIndex = Math.min(startIndex + pageSize, totalRecords);
|
|
@@ -79,7 +83,7 @@ export var DataGrid = function (_a) {
|
|
|
79
83
|
setDataSource(sortedData.slice(startIndex, endIndex));
|
|
80
84
|
}
|
|
81
85
|
else {
|
|
82
|
-
var sortedData = sortDataSourceByColumn(
|
|
86
|
+
var sortedData = sortDataSourceByColumn(newDataSource, currentActiveSorting, sorting);
|
|
83
87
|
setTotalRecords(sortedData.length);
|
|
84
88
|
setTotalPages(Math.ceil(sortedData.length / pageSize));
|
|
85
89
|
setCurrentPage(1);
|
|
@@ -95,13 +99,19 @@ export var DataGrid = function (_a) {
|
|
|
95
99
|
};
|
|
96
100
|
useEffect(function () {
|
|
97
101
|
if (selectedItems.length <= 0) {
|
|
98
|
-
var sortedData = sortDataSourceByColumn(
|
|
102
|
+
var sortedData = sortDataSourceByColumn(newDataSource, currentActiveSorting, sorting);
|
|
99
103
|
setDataSource(sortedData.slice(startIndex, endIndex));
|
|
100
104
|
setTotalRecords(sortedData.length);
|
|
101
105
|
setTotalPages(Math.ceil(sortedData.length / pageSize));
|
|
102
106
|
setCurrentPage(1);
|
|
103
107
|
}
|
|
104
|
-
}, [selectedItems]);
|
|
108
|
+
}, [selectedItems, dataSource]);
|
|
109
|
+
useEffect(function () {
|
|
110
|
+
setOriginalDataSource(dataSource);
|
|
111
|
+
setDataSource(dataSource);
|
|
112
|
+
setTotalRecords(dataSource.length);
|
|
113
|
+
setTotalPages(Math.ceil(dataSource.length / pageSize));
|
|
114
|
+
}, [dataSource]);
|
|
105
115
|
return (React.createElement(Box, { sx: { width: '100%', minHeight: 480 } },
|
|
106
116
|
React.createElement(DataGridHeaderStyled, null,
|
|
107
117
|
React.createElement(TotalRecordsStyled, null,
|
|
@@ -118,7 +128,7 @@ export var DataGrid = function (_a) {
|
|
|
118
128
|
React.createElement(ButtonStyled, { variant: "text", size: "small", color: currentActiveSorting === item.field ? 'primary' : 'inherit', endIcon: currentActiveSorting === item.field && sorting === 'up' ? (React.createElement(ArrowDropUpIcon, null)) : (React.createElement(ArrowDropDownIcon, null)), onClick: function () {
|
|
119
129
|
handleDropDown(item.field);
|
|
120
130
|
} }, item.headerText),
|
|
121
|
-
currentDropDownActive && currentDropDownActive === item.field && (React.createElement(DropdownFilter, { format: item.format, onOrder: handleSorting, onFilter: handleFilter, onSelected: handleItemSelected, itemsSelected: selectedItems, onFilterSelected: handleFilterSelected, onChecketAll: setSelectAll, onSelectAll: selectAll, data: groupByDataSource(
|
|
131
|
+
currentDropDownActive && currentDropDownActive === item.field && (React.createElement(DropdownFilter, { format: item.format, onOrder: handleSorting, onFilter: handleFilter, onSelected: handleItemSelected, itemsSelected: selectedItems, onFilterSelected: handleFilterSelected, onChecketAll: setSelectAll, onSelectAll: selectAll, data: groupByDataSource(newDataSource, item.field) }))))); }))),
|
|
122
132
|
React.createElement(TableBody, null, newDataSource &&
|
|
123
133
|
newDataSource.map(function (item, key) { return (React.createElement(TableRowStyled, { key: key, sx: { '&:last-child td, &:last-child th': { border: 0 } } }, Object.keys(item).map(function (columnKey) {
|
|
124
134
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataGrid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataGrid/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.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": {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState, useRef } from 'react';
|
|
1
|
+
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
2
2
|
|
|
3
3
|
import { Box, Stack, Paper } from '@mui/material';
|
|
4
4
|
|
|
@@ -65,8 +65,12 @@ export function Cog6ToothIcon(props: any) {
|
|
|
65
65
|
|
|
66
66
|
export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [], onRowClick }) => {
|
|
67
67
|
const pageSize = 10;
|
|
68
|
-
const columns =
|
|
69
|
-
|
|
68
|
+
const columns = useMemo(() => {
|
|
69
|
+
return data[0].columns;
|
|
70
|
+
}, [data]);
|
|
71
|
+
const dataSource = useMemo(() => {
|
|
72
|
+
return data[0].dataSource;
|
|
73
|
+
}, [data]);
|
|
70
74
|
|
|
71
75
|
const [selectedItems, setSelectedItems] = useState<(string | number)[]>([]);
|
|
72
76
|
|
|
@@ -77,10 +81,10 @@ export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [], onRowClick })
|
|
|
77
81
|
|
|
78
82
|
const [currentDropDownActive, setCurrentDropDownActive] = useState<string | null>(null);
|
|
79
83
|
|
|
80
|
-
const [originalDataSource, setOriginalDataSource] = useState<DataSourceItem[]>(
|
|
81
|
-
const [newDataSource, setDataSource] = useState<DataSourceItem[]>(
|
|
82
|
-
const [totalRecords, setTotalRecords] = useState(
|
|
83
|
-
const [totalPages, setTotalPages] = useState(
|
|
84
|
+
const [originalDataSource, setOriginalDataSource] = useState<DataSourceItem[]>([]);
|
|
85
|
+
const [newDataSource, setDataSource] = useState<DataSourceItem[]>([]);
|
|
86
|
+
const [totalRecords, setTotalRecords] = useState(0);
|
|
87
|
+
const [totalPages, setTotalPages] = useState(0);
|
|
84
88
|
|
|
85
89
|
const [currentPage, setCurrentPage] = useState(1);
|
|
86
90
|
const startIndex = (currentPage - 1) * pageSize;
|
|
@@ -131,7 +135,7 @@ export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [], onRowClick })
|
|
|
131
135
|
setCurrentPage(1);
|
|
132
136
|
setDataSource(sortedData.slice(startIndex, endIndex));
|
|
133
137
|
} else {
|
|
134
|
-
const sortedData = sortDataSourceByColumn(
|
|
138
|
+
const sortedData = sortDataSourceByColumn(newDataSource, currentActiveSorting, sorting);
|
|
135
139
|
setTotalRecords(sortedData.length);
|
|
136
140
|
setTotalPages(Math.ceil(sortedData.length / pageSize));
|
|
137
141
|
setCurrentPage(1);
|
|
@@ -149,13 +153,20 @@ export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [], onRowClick })
|
|
|
149
153
|
|
|
150
154
|
useEffect(() => {
|
|
151
155
|
if (selectedItems.length <= 0) {
|
|
152
|
-
const sortedData = sortDataSourceByColumn(
|
|
156
|
+
const sortedData = sortDataSourceByColumn(newDataSource, currentActiveSorting, sorting);
|
|
153
157
|
setDataSource(sortedData.slice(startIndex, endIndex));
|
|
154
158
|
setTotalRecords(sortedData.length);
|
|
155
159
|
setTotalPages(Math.ceil(sortedData.length / pageSize));
|
|
156
160
|
setCurrentPage(1);
|
|
157
161
|
}
|
|
158
|
-
}, [selectedItems]);
|
|
162
|
+
}, [selectedItems, dataSource]);
|
|
163
|
+
|
|
164
|
+
useEffect(() => {
|
|
165
|
+
setOriginalDataSource(dataSource)
|
|
166
|
+
setDataSource(dataSource)
|
|
167
|
+
setTotalRecords(dataSource.length)
|
|
168
|
+
setTotalPages(Math.ceil(dataSource.length / pageSize))
|
|
169
|
+
}, [dataSource])
|
|
159
170
|
|
|
160
171
|
return (
|
|
161
172
|
<Box sx={{ width: '100%', minHeight: 480 }}>
|
|
@@ -203,7 +214,7 @@ export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [], onRowClick })
|
|
|
203
214
|
onFilterSelected={handleFilterSelected}
|
|
204
215
|
onChecketAll={setSelectAll}
|
|
205
216
|
onSelectAll={selectAll}
|
|
206
|
-
data={groupByDataSource(
|
|
217
|
+
data={groupByDataSource(newDataSource, item.field)}
|
|
207
218
|
/>
|
|
208
219
|
)}
|
|
209
220
|
</Stack>
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"columns": [
|
|
4
|
+
{
|
|
5
|
+
"allowFiltering": true,
|
|
6
|
+
"allowFiltering": true,
|
|
7
|
+
"allowSorting": true,
|
|
8
|
+
"field": "data",
|
|
9
|
+
"format": "date",
|
|
10
|
+
"headerText": "Data",
|
|
11
|
+
"textAlign": "left",
|
|
12
|
+
"width": "100%"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"allowFiltering": true,
|
|
16
|
+
"allowSorting": true,
|
|
17
|
+
"field": "duration",
|
|
18
|
+
"format": "time",
|
|
19
|
+
"headerText": "Duração",
|
|
20
|
+
"textAlign": "left",
|
|
21
|
+
"width": "100%"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"allowFiltering": true,
|
|
25
|
+
"allowSorting": true,
|
|
26
|
+
"field": "campanha",
|
|
27
|
+
"format": "string",
|
|
28
|
+
"headerText": "Campanha",
|
|
29
|
+
"textAlign": "left",
|
|
30
|
+
"width": "100%"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"allowFiltering": true,
|
|
34
|
+
"allowSorting": true,
|
|
35
|
+
"field": "agente",
|
|
36
|
+
"format": "string",
|
|
37
|
+
"headerText": "Agente",
|
|
38
|
+
"textAlign": "center",
|
|
39
|
+
"width": "100%"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"allowFiltering": true,
|
|
43
|
+
"allowSorting": true,
|
|
44
|
+
"field": "ani",
|
|
45
|
+
"format": "number",
|
|
46
|
+
"headerText": "ANI",
|
|
47
|
+
"textAlign": "left",
|
|
48
|
+
"width": "100%"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"allowFiltering": true,
|
|
52
|
+
"allowSorting": true,
|
|
53
|
+
"field": "dnis",
|
|
54
|
+
"format": "number",
|
|
55
|
+
"headerText": "DNIS",
|
|
56
|
+
"textAlign": "left",
|
|
57
|
+
"width": "100%"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"allowFiltering": true,
|
|
61
|
+
"allowSorting": true,
|
|
62
|
+
"field": "disposition",
|
|
63
|
+
"format": "string",
|
|
64
|
+
"headerText": "Tabulação",
|
|
65
|
+
"textAlign": "left",
|
|
66
|
+
"width": "100%"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"allowFiltering": true,
|
|
70
|
+
"allowSorting": true,
|
|
71
|
+
"field": "origem",
|
|
72
|
+
"format": "number",
|
|
73
|
+
"headerText": "Origem",
|
|
74
|
+
"textAlign": "left",
|
|
75
|
+
"width": "100%"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"allowFiltering": true,
|
|
79
|
+
"allowSorting": true,
|
|
80
|
+
"field": "id",
|
|
81
|
+
"format": "number",
|
|
82
|
+
"headerText": "ID",
|
|
83
|
+
"textAlign": "left",
|
|
84
|
+
"width": "100%"
|
|
85
|
+
}
|
|
86
|
+
],
|
|
87
|
+
"dataSource": [
|
|
88
|
+
{
|
|
89
|
+
"data": "01/05/2022",
|
|
90
|
+
"duration": "08:18",
|
|
91
|
+
"campanha": "Campanha 1",
|
|
92
|
+
"agente": 16321,
|
|
93
|
+
"ani": 50364908,
|
|
94
|
+
"dnis": 123456,
|
|
95
|
+
"disposition": "Tabulação 1",
|
|
96
|
+
"origin": 12723,
|
|
97
|
+
"id": 10
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"data": "01/05/2022",
|
|
101
|
+
"duration": "00:18",
|
|
102
|
+
"campanha": "Campanha 2",
|
|
103
|
+
"agente": "16322",
|
|
104
|
+
"ani": "50364909",
|
|
105
|
+
"dnis": "123457",
|
|
106
|
+
"disposition": "Tabulação 2",
|
|
107
|
+
"origin": "12721",
|
|
108
|
+
"id": 20
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"data": "03/05/2022",
|
|
112
|
+
"duration": "03:13",
|
|
113
|
+
"campanha": "Campanha 1",
|
|
114
|
+
"agente": "16321",
|
|
115
|
+
"ani": "50364908",
|
|
116
|
+
"dnis": "123456",
|
|
117
|
+
"disposition": "Tabulação 1",
|
|
118
|
+
"origin": "12723",
|
|
119
|
+
"id": 30
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"data": "01/05/2022",
|
|
123
|
+
"duration": "09:19",
|
|
124
|
+
"campanha": "Campanha 1",
|
|
125
|
+
"agente": "16321",
|
|
126
|
+
"ani": "50364908",
|
|
127
|
+
"dnis": "123456",
|
|
128
|
+
"disposition": "Tabulação 1",
|
|
129
|
+
"origin": "12723",
|
|
130
|
+
"id": 40
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"data": "02/05/2022",
|
|
134
|
+
"duration": "02:59",
|
|
135
|
+
"campanha": "Campanha 1",
|
|
136
|
+
"agente": "16321",
|
|
137
|
+
"ani": "50364908",
|
|
138
|
+
"dnis": "123456",
|
|
139
|
+
"disposition": "Tabulação 1",
|
|
140
|
+
"origin": "12723",
|
|
141
|
+
"id": 50
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"data": "04/05/2022",
|
|
145
|
+
"duration": "05:02",
|
|
146
|
+
"campanha": "Campanha 1",
|
|
147
|
+
"agente": "16321",
|
|
148
|
+
"ani": "50364908",
|
|
149
|
+
"dnis": "123456",
|
|
150
|
+
"disposition": "Tabulação 1",
|
|
151
|
+
"origin": "12723",
|
|
152
|
+
"id": 60
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"data": "21/05/2022",
|
|
156
|
+
"duration": "06:02",
|
|
157
|
+
"campanha": "Campanha 7",
|
|
158
|
+
"agente": "16315",
|
|
159
|
+
"ani": "50364909",
|
|
160
|
+
"dnis": "123456",
|
|
161
|
+
"disposition": "Tabulação 7",
|
|
162
|
+
"origin": "12754",
|
|
163
|
+
"id": 70
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"data": "23/05/2022",
|
|
167
|
+
"duration": "04:04",
|
|
168
|
+
"campanha": "Campanha 8",
|
|
169
|
+
"agente": "16321",
|
|
170
|
+
"ani": "50364908",
|
|
171
|
+
"dnis": "123456",
|
|
172
|
+
"disposition": "Tabulação 8",
|
|
173
|
+
"origin": "12752",
|
|
174
|
+
"id": 80
|
|
175
|
+
}
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
]
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, {useState} from 'react';
|
|
2
2
|
|
|
3
3
|
import type { Meta } from '@storybook/react';
|
|
4
|
-
import { DataGrid } from '../components';
|
|
4
|
+
import { Button, DataGrid } from '../components';
|
|
5
5
|
import dataSource from '../components/DataGrid/allData.json';
|
|
6
6
|
import data from '../sample-data.json';
|
|
7
|
+
import data2 from '../sample-data-2.json';
|
|
7
8
|
|
|
8
9
|
const meta = {
|
|
9
10
|
title: 'Display/DataGrid',
|
|
@@ -18,9 +19,11 @@ const meta = {
|
|
|
18
19
|
export default meta;
|
|
19
20
|
|
|
20
21
|
export const DataGridBasic = () => {
|
|
22
|
+
const [currentMock, setCurrentMock] = useState(0)
|
|
21
23
|
return (
|
|
22
24
|
<>
|
|
23
|
-
<
|
|
25
|
+
{/* <Button label='change mock' onClick={() => { currentMock === 0 ? setCurrentMock(1) : setCurrentMock(0) }}/> */}
|
|
26
|
+
<DataGrid data={!!currentMock ? data : data2} onRowClick={() => console.log("onRowClick")} />
|
|
24
27
|
</>
|
|
25
28
|
);
|
|
26
29
|
};
|