@ssplib/react-components 0.0.228 → 0.0.230
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.
|
@@ -10,12 +10,15 @@ interface OrderBy {
|
|
|
10
10
|
key: string;
|
|
11
11
|
type: 'string' | 'number';
|
|
12
12
|
}
|
|
13
|
-
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, hideTitleCSV, csvExcludeUpper, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filters, orderBy, id, }: {
|
|
13
|
+
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, hideTitleCSV, csvExcludeUpper, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filtersFunc, filters, orderBy, id, }: {
|
|
14
14
|
id: string;
|
|
15
15
|
mediaQueryLG?: {
|
|
16
16
|
all: number;
|
|
17
17
|
action: number;
|
|
18
18
|
};
|
|
19
|
+
filtersFunc?: {
|
|
20
|
+
[key: string]: (value: string) => any;
|
|
21
|
+
};
|
|
19
22
|
filters?: FilterValue[];
|
|
20
23
|
orderBy?: OrderBy[];
|
|
21
24
|
customMargin?: number;
|
|
@@ -59,8 +62,8 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
|
|
|
59
62
|
dataPath?: string;
|
|
60
63
|
useKC?: boolean;
|
|
61
64
|
}): JSX.Element;
|
|
62
|
-
type FilterType = 'string' | 'number' | 'date';
|
|
63
|
-
type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos';
|
|
65
|
+
type FilterType = 'string' | 'number' | 'date' | 'dates';
|
|
66
|
+
type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos' | 'depois de' | 'antes de' | 'data inicio' | 'data fim' | 'tem a data';
|
|
64
67
|
interface FilterValue {
|
|
65
68
|
label: string;
|
|
66
69
|
keyName: string;
|
|
@@ -73,6 +76,7 @@ interface FilterValue {
|
|
|
73
76
|
id: string;
|
|
74
77
|
label: string;
|
|
75
78
|
}[];
|
|
79
|
+
customFunc?: string;
|
|
76
80
|
}
|
|
77
81
|
declare const _default: React.MemoExoticComponent<typeof Table>;
|
|
78
82
|
export default _default;
|
|
@@ -57,13 +57,14 @@ let startData = [];
|
|
|
57
57
|
let isExpandAll = false;
|
|
58
58
|
let localTableName = '';
|
|
59
59
|
let orderAsc = false;
|
|
60
|
+
let filtersFuncData = {};
|
|
60
61
|
function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
61
62
|
user: 'Nenhum dado encontrado',
|
|
62
63
|
public: 'Nenhum dado encontrado',
|
|
63
64
|
}, 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,
|
|
64
65
|
// filters = {},
|
|
65
66
|
// filterSeparator = '|',
|
|
66
|
-
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filters = [], orderBy = [], id, }) {
|
|
67
|
+
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], id, }) {
|
|
67
68
|
var _a;
|
|
68
69
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
69
70
|
const [error, setError] = (0, react_1.useState)(null);
|
|
@@ -86,6 +87,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
86
87
|
const filterContainer = (0, react_1.useRef)(null);
|
|
87
88
|
const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
|
|
88
89
|
localTableName = `tableFilter_${id}`;
|
|
90
|
+
filtersFuncData = filtersFunc !== null && filtersFunc !== void 0 ? filtersFunc : {};
|
|
89
91
|
(0, react_1.useEffect)(() => {
|
|
90
92
|
setError(null);
|
|
91
93
|
if (userLoaded || !useKC) {
|
|
@@ -504,6 +506,8 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
504
506
|
case 'contem':
|
|
505
507
|
currentData.forEach((cd) => {
|
|
506
508
|
const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
|
|
509
|
+
if (!value)
|
|
510
|
+
return;
|
|
507
511
|
if (dt.useList) {
|
|
508
512
|
if (value.includes(dt.value.id)) {
|
|
509
513
|
filteredData.push(cd);
|
|
@@ -519,6 +523,8 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
519
523
|
case 'tem um dos':
|
|
520
524
|
currentData.forEach((cd) => {
|
|
521
525
|
const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
|
|
526
|
+
if (!value)
|
|
527
|
+
return;
|
|
522
528
|
if (dt.value.map((x) => x.id).includes(value)) {
|
|
523
529
|
filteredData.push(cd);
|
|
524
530
|
}
|
|
@@ -543,7 +549,6 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
543
549
|
const value = (0, dayjs_1.default)((0, lodash_get_1.default)(cd, dt.keyName, ''), 'DD/MM/YYYY');
|
|
544
550
|
const dateA = (0, dayjs_1.default)(dt.value, 'DD/MM/YYYY');
|
|
545
551
|
const dateB = (0, dayjs_1.default)(dt.value2, 'DD/MM/YYYY');
|
|
546
|
-
console.log(dateA.isValid(), dateB.isValid());
|
|
547
552
|
if (!dateA.isValid() || !dateB.isValid())
|
|
548
553
|
return;
|
|
549
554
|
if ((value.isAfter(dateA) || value.isSame(dateA)) && (value.isBefore(dateB) || value.isSame(dateB))) {
|
|
@@ -553,8 +558,46 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
553
558
|
break;
|
|
554
559
|
}
|
|
555
560
|
break;
|
|
561
|
+
case 'dates':
|
|
562
|
+
switch (dt.operator) {
|
|
563
|
+
case 'data inicio':
|
|
564
|
+
currentData.forEach((cd) => {
|
|
565
|
+
var _a;
|
|
566
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
567
|
+
if (dates.length <= 0)
|
|
568
|
+
return;
|
|
569
|
+
var inicioDate = dates[0];
|
|
570
|
+
var inicioValue = (0, dayjs_1.default)(inicioDate, 'DD/MM/YYYY');
|
|
571
|
+
if (inicioValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
|
|
572
|
+
filteredData.push(cd);
|
|
573
|
+
}
|
|
574
|
+
});
|
|
575
|
+
break;
|
|
576
|
+
case 'data fim':
|
|
577
|
+
currentData.forEach((cd) => {
|
|
578
|
+
var _a;
|
|
579
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
580
|
+
if (dates.length <= 0)
|
|
581
|
+
return;
|
|
582
|
+
var fimDate = dates[dates.length - 1];
|
|
583
|
+
var fimValue = (0, dayjs_1.default)(fimDate, 'DD/MM/YYYY');
|
|
584
|
+
if (fimValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
|
|
585
|
+
filteredData.push(cd);
|
|
586
|
+
}
|
|
587
|
+
});
|
|
588
|
+
break;
|
|
589
|
+
case 'tem a data':
|
|
590
|
+
currentData.forEach((cd) => {
|
|
591
|
+
var _a;
|
|
592
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
593
|
+
if (dates.includes(dt.value)) {
|
|
594
|
+
filteredData.push(cd);
|
|
595
|
+
}
|
|
596
|
+
});
|
|
597
|
+
break;
|
|
598
|
+
}
|
|
599
|
+
break;
|
|
556
600
|
}
|
|
557
|
-
console.log('filtred: ', filteredData);
|
|
558
601
|
currentData = filteredData;
|
|
559
602
|
});
|
|
560
603
|
setList(currentData);
|
|
@@ -914,8 +957,12 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
914
957
|
bgcolor: 'white',
|
|
915
958
|
}, fullWidth: true }));
|
|
916
959
|
case 'date':
|
|
960
|
+
case 'dates':
|
|
917
961
|
switch (operator) {
|
|
918
962
|
case 'data exata':
|
|
963
|
+
case 'data fim':
|
|
964
|
+
case 'data inicio':
|
|
965
|
+
case 'tem a data':
|
|
919
966
|
return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
|
|
920
967
|
react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
|
|
921
968
|
onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
|