@ssplib/react-components 0.0.217 → 0.0.218
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
|
-
let value = x[key]
|
|
164
|
+
// let value = x[key]
|
|
165
|
+
let value = (0, lodash_get_1.default)(x, key, '');
|
|
157
166
|
if (typeof value === 'number')
|
|
158
167
|
value = value.toString();
|
|
159
168
|
if (typeof value !== 'string')
|
|
@@ -687,13 +696,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
687
696
|
return value;
|
|
688
697
|
});
|
|
689
698
|
};
|
|
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
699
|
// effect usado quando for mostrar "VER MAIS" e "VER MENOS"
|
|
698
700
|
(0, react_1.useEffect)(() => {
|
|
699
701
|
const start = currentPage * itemsCount;
|
|
@@ -701,7 +703,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
701
703
|
let obj = {};
|
|
702
704
|
newList.forEach((x, index) => {
|
|
703
705
|
columns.forEach((c) => {
|
|
704
|
-
obj[index] = obj[index] === true ? true : (0, lodash_get_1.default)(x, c.keyName).toString().length >=
|
|
706
|
+
obj[index] = obj[index] === true ? true : (0, lodash_get_1.default)(x, c.keyName, '').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,7 +897,6 @@ 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
902
|
console.log(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
|