@ssplib/react-components 0.0.217 → 0.0.219
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.
|
@@ -6,7 +6,7 @@ interface ColumnData {
|
|
|
6
6
|
size?: number;
|
|
7
7
|
}
|
|
8
8
|
type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a' | 'select';
|
|
9
|
-
export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, customMargin, customMarginMobile, }: {
|
|
9
|
+
export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, }: {
|
|
10
10
|
mediaQueryLG?: {
|
|
11
11
|
all: number;
|
|
12
12
|
action: number;
|
|
@@ -23,6 +23,7 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
|
|
|
23
23
|
csvShowAllButton?: boolean;
|
|
24
24
|
csvExcludeUpper?: string[];
|
|
25
25
|
csvWithoutZip?: boolean;
|
|
26
|
+
collapsedSize?: number;
|
|
26
27
|
csvAllButtonTitle?: string;
|
|
27
28
|
csvButtonTitle?: string;
|
|
28
29
|
csvNoZipText?: string;
|
|
@@ -32,6 +33,7 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
|
|
|
32
33
|
csvCustomKeyNames?: {
|
|
33
34
|
[key: string]: string;
|
|
34
35
|
};
|
|
36
|
+
expandTextMaxLength?: number;
|
|
35
37
|
csvExcludeKeysCSV?: string[];
|
|
36
38
|
csvExcludeKeys?: string[];
|
|
37
39
|
hideTitleCSV?: boolean;
|
|
@@ -55,7 +55,7 @@ let startData = [];
|
|
|
55
55
|
function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
56
56
|
user: 'Nenhum dado encontrado',
|
|
57
57
|
public: 'Nenhum dado encontrado',
|
|
58
|
-
}, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', customMargin = 4, customMarginMobile = 0, }) {
|
|
58
|
+
}, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, }) {
|
|
59
59
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
60
60
|
const [error, setError] = (0, react_1.useState)(null);
|
|
61
61
|
const [data, setData] = (0, react_1.useState)(null);
|
|
@@ -83,10 +83,13 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
83
83
|
setIsLoading(true);
|
|
84
84
|
fetchFunc()
|
|
85
85
|
.then((res) => {
|
|
86
|
-
if (!res.ok)
|
|
86
|
+
if (!res.ok) {
|
|
87
87
|
setError({
|
|
88
88
|
status: 500,
|
|
89
89
|
});
|
|
90
|
+
setIsLoading(false);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
90
93
|
return res.json().then((j) => {
|
|
91
94
|
if (j.statusCode === 204) {
|
|
92
95
|
setData({ body: { data: [] } });
|
|
@@ -97,12 +100,18 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
97
100
|
status: j.statusCode,
|
|
98
101
|
});
|
|
99
102
|
else {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
if (!j || !Array.isArray(j)) {
|
|
104
|
+
setData({ body: { data: [] } });
|
|
105
|
+
startData = [];
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
setData(j);
|
|
109
|
+
startData = JSON.parse(JSON.stringify(j));
|
|
110
|
+
const oldFilters = localStorage.getItem(filterStorageName);
|
|
111
|
+
if (oldFilters) {
|
|
112
|
+
const filters = JSON.parse(oldFilters);
|
|
113
|
+
setAppliedFilters(filters);
|
|
114
|
+
}
|
|
106
115
|
}
|
|
107
116
|
}
|
|
108
117
|
setIsLoading(false);
|
|
@@ -148,12 +157,12 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
148
157
|
return;
|
|
149
158
|
}
|
|
150
159
|
const listData = getData(data);
|
|
151
|
-
console.log(listData);
|
|
152
160
|
const newList = [];
|
|
153
161
|
listData.forEach((x) => {
|
|
154
162
|
const dataStr = [];
|
|
155
163
|
Object.keys(x).map((key) => {
|
|
156
|
-
|
|
164
|
+
var _a;
|
|
165
|
+
let value = (_a = (0, lodash_get_1.default)(x, key, '')) !== null && _a !== void 0 ? _a : '';
|
|
157
166
|
if (typeof value === 'number')
|
|
158
167
|
value = value.toString();
|
|
159
168
|
if (typeof value !== 'string')
|
|
@@ -305,7 +314,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
305
314
|
if (multipleDataPath !== '') {
|
|
306
315
|
keys = ['dtInicio', 'hrInicio', ...keys];
|
|
307
316
|
}
|
|
308
|
-
console.log(keys);
|
|
309
317
|
const header = keys.map((k) => (csvCustomKeyNames[k] ? csvCustomKeyNames[k] : k)).join(',') + '\n';
|
|
310
318
|
const values = [];
|
|
311
319
|
list.forEach((x) => {
|
|
@@ -344,7 +352,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
344
352
|
if (multipleDataPath !== '') {
|
|
345
353
|
const dates = x[multipleDataPath];
|
|
346
354
|
if (dates) {
|
|
347
|
-
|
|
355
|
+
;
|
|
348
356
|
dates.forEach((d) => {
|
|
349
357
|
values.push(value.replace('{dtInicio}', d.dtInicio).replace('{hrInicio}', d.hrInicio).replace('{hrTermino}', d.hrTermino));
|
|
350
358
|
});
|
|
@@ -687,13 +695,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
687
695
|
return value;
|
|
688
696
|
});
|
|
689
697
|
};
|
|
690
|
-
function expandContent(str, index) {
|
|
691
|
-
const content = str.toString();
|
|
692
|
-
if (content.length <= 100) {
|
|
693
|
-
return content;
|
|
694
|
-
}
|
|
695
|
-
return expandObj[index] === true ? content : content.substring(0, 100) + '...';
|
|
696
|
-
}
|
|
697
698
|
// effect usado quando for mostrar "VER MAIS" e "VER MENOS"
|
|
698
699
|
(0, react_1.useEffect)(() => {
|
|
699
700
|
const start = currentPage * itemsCount;
|
|
@@ -701,7 +702,8 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
701
702
|
let obj = {};
|
|
702
703
|
newList.forEach((x, index) => {
|
|
703
704
|
columns.forEach((c) => {
|
|
704
|
-
|
|
705
|
+
var _a;
|
|
706
|
+
obj[index] = obj[index] === true ? true : ((_a = (0, lodash_get_1.default)(x, c.keyName, '')) !== null && _a !== void 0 ? _a : 'Não Informado').toString().length >= expandTextMaxLength;
|
|
705
707
|
});
|
|
706
708
|
});
|
|
707
709
|
setShowExpandObj(obj);
|
|
@@ -773,20 +775,23 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
773
775
|
position: 'relative',
|
|
774
776
|
}, elevation: 0 },
|
|
775
777
|
react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
|
|
776
|
-
columns.map((c) =>
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
778
|
+
columns.map((c) => {
|
|
779
|
+
var _a, _b;
|
|
780
|
+
return (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1), sx: {
|
|
781
|
+
overflow: 'hidden',
|
|
782
|
+
} },
|
|
783
|
+
react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
|
|
784
|
+
react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
|
|
785
|
+
react_1.default.createElement(material_1.Box, { paddingLeft: 1, position: 'relative' },
|
|
786
|
+
react_1.default.createElement(material_1.Collapse, { in: expandObj[index] === true, collapsedSize: collapsedSize, onExited: (e) => setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: false }))) },
|
|
787
|
+
react_1.default.createElement(material_1.Box, { sx: {
|
|
788
|
+
wordWrap: 'break-word',
|
|
789
|
+
color: '#1E293B',
|
|
790
|
+
fontSize: 16,
|
|
791
|
+
}, fontFamily: 'Inter' },
|
|
792
|
+
react_1.default.createElement(material_1.Box, null, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(material_1.Box, { color: 'transparent', sx: { pointerEvents: 'none', userSelect: 'none' } }, (0, lodash_get_1.default)(x, c.keyName, '')))),
|
|
793
|
+
react_1.default.createElement(material_1.Box, { position: 'absolute', top: 0 }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(react_1.default.Fragment, null, showExpandObjOnExited[index] ? ((0, lodash_get_1.default)(x, c.keyName, '')) : ((_a = (0, lodash_get_1.default)(x, c.keyName, '')) !== null && _a !== void 0 ? _a : '').toString().length >= expandTextMaxLength ? (react_1.default.createElement(react_1.default.Fragment, null, ((_b = (0, lodash_get_1.default)(x, c.keyName, '')) !== null && _b !== void 0 ? _b : '').toString().substring(0, expandTextMaxLength) + '...')) : ((0, lodash_get_1.default)(x, c.keyName, ''))))))))));
|
|
794
|
+
}),
|
|
790
795
|
react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
|
|
791
796
|
react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))),
|
|
792
797
|
showExpandObj[index] && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', bottom: 0, width: '100%' },
|
|
@@ -880,7 +885,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
880
885
|
id: x.toLowerCase(),
|
|
881
886
|
label: x,
|
|
882
887
|
})), onFocus: (e) => console.log('ata'), onChange: (e, value) => {
|
|
883
|
-
console.log(value);
|
|
884
888
|
if (value) {
|
|
885
889
|
const id = `${f}:${JSON.stringify(value)}`;
|
|
886
890
|
handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
|
|
@@ -893,10 +897,8 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
893
897
|
margin: 1,
|
|
894
898
|
}, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: 'Teste' })) }))) : x.listEndpoint ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
895
899
|
react_1.default.createElement(FetchSelectAutoComplete, { url: x.listEndpoint, label: x.name, onChange: (e, value) => {
|
|
896
|
-
console.log(value);
|
|
897
900
|
if (value) {
|
|
898
901
|
const id = `${f}:${JSON.stringify(value)}`;
|
|
899
|
-
console.log(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
|
|
900
902
|
handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.id.toLowerCase(), x.referenceKey);
|
|
901
903
|
setOldSelectState(id);
|
|
902
904
|
}
|