@ssplib/react-components 0.0.240 → 0.0.242

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.
Files changed (3) hide show
  1. package/components/form/table/Table.d.ts +6 -3
  2. package/components/form/table/Table.js +33 -9
  3. package/package.json +1 -1
package/components/form/table/Table.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React from 'react';
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;
@@ -73,7 +76,7 @@ interface FilterValue {
73
76
  value: string | any;
74
77
  value2?: string | any;
75
78
  useList?: {
76
- id: string;
79
+ id: string | number;
77
80
  label: string;
78
81
  }[];
79
82
  customFunc?: string;
package/components/form/table/Table.js CHANGED
@@ -54,7 +54,8 @@ function removePunctuationAndAccents(text) {
54
54
  return cleanedText;
55
55
  }
56
56
  function formatarString(str) {
57
- return str
57
+ const value = typeof str !== 'string' ? str.toString() : str;
58
+ return value
58
59
  .normalize('NFD')
59
60
  .replace(/[\u0300-\u036f]/g, '')
60
61
  .toLowerCase()
@@ -72,7 +73,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
72
73
  }, 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
74
  // filters = {},
74
75
  // filterSeparator = '|',
75
- hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], id, }) {
76
+ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, }) {
76
77
  var _a;
77
78
  const [isLoading, setIsLoading] = (0, react_1.useState)(true);
78
79
  const [error, setError] = (0, react_1.useState)(null);
@@ -689,20 +690,43 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
689
690
  console.log(filterContainer.current);
690
691
  }, [filterContainer.current]);
691
692
  if (error)
692
- return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
693
+ return (react_1.default.createElement(material_1.Box, { bgcolor: '#fff2c8', color: '#3e3129', padding: 2, marginX: 2, borderRadius: 4 },
693
694
  react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
694
695
  error.status === 403 && 'Acesso negado',
695
- error.status === 500 && (react_1.default.createElement(material_1.Box, { fontWeight: 500, textAlign: 'center' }, "Lamentavelmente, ocorreu um imprevisto em nosso servidor. Pedimos a sua compreens\u00E3o e solicitamos que aguarde por um momento enquanto verificamos a situa\u00E7\u00E3o.")))));
696
+ error.status === 500 && (react_1.default.createElement(material_1.Box, { fontWeight: 500, textAlign: 'center' },
697
+ react_1.default.createElement(icons_material_1.ReportProblemRounded, { sx: { transform: 'scale(2)', marginY: 1, fill: '#3e3129' } }),
698
+ react_1.default.createElement(material_1.Box, null, customErrorMsg ? (customErrorMsg) : (react_1.default.createElement(react_1.default.Fragment, null,
699
+ "N\u00E3o foi poss\u00EDvel se conectar ao servidor no momento. Por favor, aguarde alguns instantes e tente de novo.",
700
+ react_1.default.createElement("br", null),
701
+ react_1.default.createElement("br", null),
702
+ "Caso precise de ajuda, entre em contato pelo email: ",
703
+ react_1.default.createElement("strong", null, "cdes@ssp.df.gov.br")))))))));
696
704
  if (isLoading)
697
705
  return (react_1.default.createElement(material_1.Stack, { sx: { height: '100%', width: '100%' }, justifyContent: 'center', alignItems: 'center' },
698
- react_1.default.createElement(Typography_1.default, { fontWeight: 600, fontSize: 20, paddingBottom: 2, marginTop: 14 },
699
- "Carregando ",
700
- tableName),
701
- react_1.default.createElement(material_1.CircularProgress, null)));
706
+ react_1.default.createElement(material_1.Box, { width: '100%' },
707
+ react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', justifyItems: 'center', spacing: 2, marginY: 4 },
708
+ react_1.default.createElement(icons_material_1.PendingRounded, { sx: { fill: '#5e5e5e' } }),
709
+ react_1.default.createElement(Typography_1.default, { fontWeight: 600, fontSize: 20, textTransform: 'capitalize', textAlign: 'center', color: '#5e5e5e' },
710
+ "Carregando ",
711
+ tableName)),
712
+ react_1.default.createElement(material_1.LinearProgress, { color: 'inherit' }),
713
+ Array(10)
714
+ .fill('')
715
+ .map((x) => (react_1.default.createElement(material_1.Stack, { direction: {
716
+ xs: 'column',
717
+ md: 'row',
718
+ }, spacing: {
719
+ xs: 3,
720
+ md: 1,
721
+ }, justifyContent: 'space-between', paddingY: 8, borderBottom: '1px solid #cacaca' }, Array(7)
722
+ .fill(0)
723
+ .map((y) => (react_1.default.createElement(material_1.Box, null,
724
+ react_1.default.createElement(material_1.Skeleton, { width: 60 }),
725
+ react_1.default.createElement(material_1.Skeleton, { width: 120 }))))))))));
702
726
  if (!userLoaded && useKC)
703
727
  return react_1.default.createElement(material_1.LinearProgress, null);
704
728
  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 },
729
+ react_1.default.createElement(material_1.Box, Object.assign({ marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 }, customTableStyle),
706
730
  react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
707
731
  react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, height: { md: '40px', xs: 'inherit' }, width: '100%' },
708
732
  react_1.default.createElement(TextField_1.default, { InputProps: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.240",
3
+ "version": "0.0.242",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",