@ssplib/react-components 0.0.240 → 0.0.241
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,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { BoxProps } from '@mui/material';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
2
3
|
interface ColumnData {
|
|
3
4
|
title: string;
|
|
4
5
|
keyName: string;
|
|
@@ -10,7 +11,7 @@ interface OrderBy {
|
|
|
10
11
|
key: string;
|
|
11
12
|
type: 'string' | 'number';
|
|
12
13
|
}
|
|
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
|
+
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, customErrorMsg, customTableStyle, id, }: {
|
|
14
15
|
id: string;
|
|
15
16
|
mediaQueryLG?: {
|
|
16
17
|
all: number;
|
|
@@ -25,7 +26,9 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
|
|
|
25
26
|
customMarginMobile?: number;
|
|
26
27
|
normalize?: boolean;
|
|
27
28
|
csvUpper?: boolean;
|
|
29
|
+
customTableStyle?: BoxProps;
|
|
28
30
|
multipleDataPath?: string;
|
|
31
|
+
customErrorMsg?: string | ReactNode;
|
|
29
32
|
removeQuotes?: boolean;
|
|
30
33
|
columns: ColumnData[];
|
|
31
34
|
tableName: string;
|
|
@@ -72,7 +72,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
72
72
|
}, 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,
|
|
73
73
|
// filters = {},
|
|
74
74
|
// filterSeparator = '|',
|
|
75
|
-
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], id, }) {
|
|
75
|
+
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, }) {
|
|
76
76
|
var _a;
|
|
77
77
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
78
78
|
const [error, setError] = (0, react_1.useState)(null);
|
|
@@ -689,20 +689,43 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
689
689
|
console.log(filterContainer.current);
|
|
690
690
|
}, [filterContainer.current]);
|
|
691
691
|
if (error)
|
|
692
|
-
return (react_1.default.createElement(material_1.Box, { bgcolor: '#
|
|
692
|
+
return (react_1.default.createElement(material_1.Box, { bgcolor: '#fff2c8', color: '#3e3129', padding: 2, marginX: 2, borderRadius: 4 },
|
|
693
693
|
react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
|
|
694
694
|
error.status === 403 && 'Acesso negado',
|
|
695
|
-
error.status === 500 && (react_1.default.createElement(material_1.Box, { fontWeight: 500, textAlign: 'center' },
|
|
695
|
+
error.status === 500 && (react_1.default.createElement(material_1.Box, { fontWeight: 500, textAlign: 'center' },
|
|
696
|
+
react_1.default.createElement(icons_material_1.ReportProblemRounded, { sx: { transform: 'scale(2)', paddingX: 4, marginY: 1, fill: '#3e3129' } }),
|
|
697
|
+
react_1.default.createElement(material_1.Box, null, customErrorMsg ? (customErrorMsg) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
698
|
+
"N\u00E3o foi poss\u00EDvel se conectar ao servidor no momento. Por favor, aguarde alguns instantes e tente de novo.",
|
|
699
|
+
react_1.default.createElement("br", null),
|
|
700
|
+
react_1.default.createElement("br", null),
|
|
701
|
+
"Caso precise de ajuda, entre em contato pelo email: ",
|
|
702
|
+
react_1.default.createElement("strong", null, "cdes@ssp.df.gov.br")))))))));
|
|
696
703
|
if (isLoading)
|
|
697
704
|
return (react_1.default.createElement(material_1.Stack, { sx: { height: '100%', width: '100%' }, justifyContent: 'center', alignItems: 'center' },
|
|
698
|
-
react_1.default.createElement(
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
705
|
+
react_1.default.createElement(material_1.Box, { width: '100%' },
|
|
706
|
+
react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', justifyItems: 'center', spacing: 2, marginY: 4 },
|
|
707
|
+
react_1.default.createElement(icons_material_1.PendingRounded, { sx: { fill: '#5e5e5e' } }),
|
|
708
|
+
react_1.default.createElement(Typography_1.default, { fontWeight: 600, fontSize: 20, textTransform: 'capitalize', textAlign: 'center', color: '#5e5e5e' },
|
|
709
|
+
"Carregando ",
|
|
710
|
+
tableName)),
|
|
711
|
+
react_1.default.createElement(material_1.LinearProgress, { color: 'inherit' }),
|
|
712
|
+
Array(10)
|
|
713
|
+
.fill('')
|
|
714
|
+
.map((x) => (react_1.default.createElement(material_1.Stack, { direction: {
|
|
715
|
+
xs: 'column',
|
|
716
|
+
md: 'row',
|
|
717
|
+
}, spacing: {
|
|
718
|
+
xs: 3,
|
|
719
|
+
md: 1,
|
|
720
|
+
}, justifyContent: 'space-between', paddingY: 8, borderBottom: '1px solid #cacaca' }, Array(7)
|
|
721
|
+
.fill(0)
|
|
722
|
+
.map((y) => (react_1.default.createElement(material_1.Box, null,
|
|
723
|
+
react_1.default.createElement(material_1.Skeleton, { width: 60 }),
|
|
724
|
+
react_1.default.createElement(material_1.Skeleton, { width: 120 }))))))))));
|
|
702
725
|
if (!userLoaded && useKC)
|
|
703
726
|
return react_1.default.createElement(material_1.LinearProgress, null);
|
|
704
727
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
705
|
-
react_1.default.createElement(material_1.Box, { marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 },
|
|
728
|
+
react_1.default.createElement(material_1.Box, Object.assign({ marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 }, customTableStyle),
|
|
706
729
|
react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
|
|
707
730
|
react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, height: { md: '40px', xs: 'inherit' }, width: '100%' },
|
|
708
731
|
react_1.default.createElement(TextField_1.default, { InputProps: {
|