@ssplib/react-components 0.0.280 → 0.0.282

package/components/form/table/GenericTable.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TableProps } from './types';
+import { TableProps2 } from './types';
 /**
  * Tabela cujo dados devem ser passados via props
  */
-export declare function GenericTable<T>({ mediaQueryLG, columns, 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, initialData, isLoading, }: TableProps): JSX.Element;
+export declare function GenericTable<T>({ mediaQueryLG, columns, 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, initialData, isLoading, }: TableProps2): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof GenericTable>;
 export default _default;

package/components/form/table/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TableProps } from './types';
-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, initialData, isExpandable, }: TableProps): JSX.Element;
+export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csvConfig, csv, columnSize, action, useKC, itemCount, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filtersFunc, filters, orderBy, customErrorMsg, customTableStyle, id, initialData, isExpandable, }: TableProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

package/components/form/table/Table.js

@@ -53,8 +53,11 @@ let localTableNameCache = '';
 function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
-}, dataPath = '', tableName = 'Dado', 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, hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, initialData = null, isExpandable = true, }) {
-    var _a;
+}, dataPath = '', tableName = 'Dado', csvConfig = {
+    fileName: tableName,
+    map: []
+}, csv, columnSize, action, useKC = true, itemCount = 10, expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, initialData = null, isExpandable = true, }) {
+    var _a, _b;
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(initialData);
@@ -299,27 +302,9 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         localStorage.removeItem(localTableName);
         setFilterKey(new Date().getTime().toString());
     }
-    const handleCSVDownload = (e, zip = false) => {
-        (0, utils_1.downloadCSVFile)(e, zip, {
-            list,
-            csvUpper,
-            csvExcludeUpper,
-            csvExcludeKeys,
-            csvExcludeKeysCSV,
-            csvCustomKeyNames,
-            csvExcludeValidate,
-            csv,
-            multipleDataPath,
-            normalize,
-            removeQuotes,
-            hideTitleCSV,
-            generateCsvZip,
-            csvZipFileNamesKey,
-        });
-    };
-    const handleDownloadAll = (e) => {
-        const keys = Object.keys(list[0]).filter((k) => !csvExcludeKeysAll.includes(k));
-        (0, utils_1.downloadCSVAll)(e, list, keys, (csv === null || csv === void 0 ? void 0 : csv.fileName) || 'dados');
+    const handleCSVDownload = (list) => {
+        var _a;
+        (0, utils_1.downloadCSVFile)(list, csvConfig, JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]') || []);
     };
     const handleFiltrarDados = (dt) => {
         (0, utils_1.filtrarDados)({
@@ -484,9 +469,10 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                     xs: 'column',
                     md: 'row',
                 }, justifyContent: 'flex-end', spacing: 1 },
-                csvWithoutZip && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: handleCSVDownload, sx: { backgroundColor: '#5a88b0', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvNoZipText)),
-                csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: handleDownloadAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
-                react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: (e) => handleCSVDownload(e, true), sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
+                JSON.parse((_b = localStorage.getItem(localTableName)) !== null && _b !== void 0 ? _b : '[]')
+                    .filter((x) => x.value || (x.operator === 'entre' && (x.value || x.value2))).length > 0 &&
+                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: (e) => handleCSVDownload(list), sx: { backgroundColor: '#a5a5a5', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, "Baixar Filtrados"),
+                react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: (e) => handleCSVDownload(startData.current), sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, "Baixar Tabela")))))),
         react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', paddingY: 1, paddingTop: 2 },
             react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', spacing: 2 },
                 react_1.default.createElement(material_1.Button, { onClick: (e) => setListPage((s) => {

package/components/form/table/types.d.ts

@@ -27,10 +27,87 @@ export interface FilterValue {
     }[];
     customFunc?: string;
 }
+export interface CsvMapProps {
+    name: string;
+    key: string;
+    useFilterValue?: {
+        label: string;
+        operators: FilterOperators[];
+    };
+}
+export interface CsvConfigProp {
+    fileName: string;
+    map: CsvMapProps[];
+}
 /**
  * Interface para as propriedades do componente Table.
  */
 export interface TableProps {
+    /** ID único da tabela */
+    id: string;
+    /** Configurações de largura para telas grandes */
+    mediaQueryLG?: {
+        all: number;
+        action: number;
+    };
+    /** Funções de transformação para filtros */
+    filtersFunc?: {
+        [key: string]: (value: string) => any;
+    };
+    /** Filtros disponíveis */
+    filters?: FilterValue[];
+    /** Ordenação por colunas */
+    orderBy?: OrderBy[];
+    /** Margem personalizada (desktop) */
+    customMargin?: number;
+    /** Margem personalizada (mobile) */
+    customMarginMobile?: number;
+    /** Estilo customizado da tabela */
+    customTableStyle?: BoxProps;
+    /** Mensagem de erro personalizada */
+    customErrorMsg?: string | ReactNode;
+    /** Colunas da tabela */
+    columns: any[];
+    /** Nome da tabela */
+    tableName: string;
+    csvConfig?: CsvConfigProp;
+    /** Altura da célula colapsada */
+    collapsedSize?: number;
+    /** Validação para exclusão de chaves no CSV */
+    csvExcludeValidate?: (key: string, value: string | number) => boolean;
+    /** Tamanho máximo do texto antes de colapsar */
+    expandTextMaxLength?: number;
+    /** Ações por linha */
+    action: (prop: any) => JSX.Element;
+    /** Configuração para exportação CSV */
+    csv?: {
+        fileName: string;
+    };
+    /** Quantidade de itens por página */
+    itemCount?: number;
+    /** Número de colunas da tabela */
+    columnSize: number;
+    /** Função para buscar dados */
+    fetchFunc?: () => Promise<Response>;
+    /** Mensagens para quando não há dados */
+    emptyMsg?: {
+        user: string;
+        public: string;
+    };
+    /** Caminho dos dados no JSON da resposta */
+    dataPath?: string;
+    /** Usa autenticação via Keycloak */
+    useKC?: boolean;
+    /** Dados iniciais da tabela */
+    initialData?: Array<{
+        [key: string]: any;
+    }> | null;
+    /** Flag de carregamento dos dados da tabela */
+    isLoading?: boolean;
+    /** Flag para mostrar ou não o botão de expandir a Linha */
+    isExpandable?: boolean;
+}
+export interface TableProps2 {
     /** ID único da tabela */
     id: string;
     /** Configurações de largura para telas grandes */

package/components/form/table/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FilterValue, OrderBy } from './types';
+import { CsvConfigProp, FilterValue, OrderBy } from './types';
 export declare const getCount: (countData: any[], itemsCount: number) => number;
 export declare function transformArrayObjectInString(o: Object): String;
 export declare function removePunctuationAndAccents(text: string): string;
@@ -25,27 +25,6 @@ interface OrdenarDadosProps {
     orderAsc: boolean;
 }
 export declare function ordenarDados({ order, list, orderAsc }: OrdenarDadosProps): any[];
-export interface CsvExportOptions {
-    list: any[];
-    csvUpper?: boolean;
-    csvExcludeUpper?: string[];
-    csvExcludeKeys?: string[];
-    csvExcludeKeysCSV?: string[];
-    csvExcludeKeysAll?: string[];
-    csvCustomKeyNames?: {
-        [key: string]: string;
-    };
-    csvExcludeValidate?: (key: string, value: any) => boolean;
-    csv?: {
-        fileName: string;
-    };
-    multipleDataPath?: string;
-    normalize?: boolean;
-    removeQuotes?: boolean;
-    hideTitleCSV?: boolean;
-    generateCsvZip?: boolean;
-    csvZipFileNamesKey?: string;
-}
-export declare function downloadCSVFile(e: React.MouseEvent, zip: boolean, options: CsvExportOptions): Promise<void>;
+export declare function downloadCSVFile(list: any[], config: CsvConfigProp, filters: FilterValue[]): Promise<void>;
 export declare function downloadCSVAll(e: React.MouseEvent, list: any[], keys: string[], fileName: string): void;
 export {};

package/components/form/table/utils.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -15,8 +38,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.downloadCSVAll = exports.downloadCSVFile = exports.ordenarDados = exports.filtrarDados = exports.formatarString = exports.removePunctuationAndAccents = exports.transformArrayObjectInString = exports.getCount = void 0;
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const dayjs_1 = __importDefault(require("dayjs"));
-const jszip_1 = __importDefault(require("jszip"));
 const lodash_clonedeep_1 = __importDefault(require("lodash.clonedeep"));
+const XLSX = __importStar(require("xlsx"));
 const getCount = (countData, itemsCount) => {
     if (countData.length <= 0)
         return 1;
@@ -273,84 +296,29 @@ function ordenarDados({ order, list, orderAsc = false }) {
     return sortedList;
 }
 exports.ordenarDados = ordenarDados;
-function downloadCSVFile(e, zip = false, options) {
+function downloadCSVFile(list, config, filters) {
     return __awaiter(this, void 0, void 0, function* () {
-        e.preventDefault();
-        const { list, csvUpper = false, csvExcludeUpper = [], csvExcludeKeys = [], csvExcludeKeysCSV = [], csvCustomKeyNames = {}, csvExcludeValidate = () => false, csv, multipleDataPath = '', normalize = false, removeQuotes = false, hideTitleCSV = false, generateCsvZip = false, csvZipFileNamesKey = '', } = options;
         if (list.length <= 0)
             return;
-        const originalKeys = Object.keys(list[0]);
-        if (generateCsvZip && zip) {
-            const keys = originalKeys.filter((k) => !csvExcludeKeys.includes(k));
-            const header = keys.map((k) => csvCustomKeyNames[k] || k).join(',') + '\n';
-            const zip = new jszip_1.default();
+        // definindo os campos especificados do csv
+        const newData = list.map(x => {
             const obj = {};
-            list.forEach((item) => {
-                const key = item[csvZipFileNamesKey];
-                if (!obj[key])
-                    obj[key] = [];
-                obj[key].push(item);
-            });
-            for (const [fileName, items] of Object.entries(obj)) {
-                const values = [];
-                for (const x of items) {
-                    if (originalKeys.some((k) => csvExcludeValidate(k, x[k])))
-                        continue;
-                    const value = keys.map((k) => formatCell(x[k], k)).join(',');
-                    values.push(value);
-                }
-                const csvData = hideTitleCSV ? values.join('\n') : '\uFEFF' + header + values.join('\n');
-                if (values.length > 0) {
-                    zip.file(`${normalizeString(fileName)}.csv`, csvData);
-                }
-            }
-            const link = document.createElement('a');
-            const base = yield zip.generateAsync({ type: 'base64' });
-            link.href = 'data:application/zip;base64,' + base;
-            link.download = `${csv === null || csv === void 0 ? void 0 : csv.fileName}.zip`;
-            link.click();
-        }
-        else {
-            let keys = originalKeys.filter((k) => !csvExcludeKeysCSV.includes(k));
-            if (multipleDataPath)
-                keys = ['dtInicio', 'hrInicio', ...keys.map((k) => (k === multipleDataPath ? 'hrTermino' : k))];
-            const header = keys.map((k) => csvCustomKeyNames[k] || k).join(',') + '\n';
-            const values = [];
-            for (const x of list) {
-                if (originalKeys.some((k) => csvExcludeValidate(k, x[k])))
-                    continue;
-                const value = keys.map((k) => formatCell(x[k], k)).join(',');
-                if (multipleDataPath && x[multipleDataPath]) {
-                    for (const d of x[multipleDataPath]) {
-                        values.push(value.replace('{dtInicio}', d.dtInicio).replace('{hrInicio}', d.hrInicio).replace('{hrTermino}', d.hrTermino));
-                    }
-                }
-                else {
-                    values.push(value);
+            config.map.forEach(m => {
+                // opção de usar o valor do filtro no próprio campo
+                if (m.useFilterValue) {
+                    const filterValueList = filters.filter(f => f.label == m.useFilterValue.label && m.useFilterValue.operators.includes(f.operator));
+                    const filterValue = filterValueList.length > 0 ? (filterValueList.reduce(r => r.value).value || undefined) : undefined;
+                    obj[m.name] = filterValue || (0, lodash_get_1.default)(x, m.key);
+                    return;
                 }
-            }
-            const csvData = header + values.join('\n');
-            const link = document.createElement('a');
-            link.href = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvData);
-            link.download = `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`;
-            link.click();
-        }
-        function formatCell(cell, key) {
-            let item = typeof cell === 'object' && cell !== null && !Array.isArray(cell) ? transformArrayObjectInString(cell).slice(1, -1) : cell;
-            if (csvUpper && typeof item === 'string' && !csvExcludeUpper.includes(key)) {
-                item = item.toUpperCase();
-            }
-            if (normalize && typeof item === 'string') {
-                item = normalizeString(item);
-            }
-            if (typeof item === 'string') {
-                return removeQuotes ? `${item}` : `"${item}"`;
-            }
-            return item;
-        }
-        function normalizeString(str) {
-            return str.normalize('NFD').replace(/[̀-ͯ]/g, '');
-        }
+                obj[m.name] = (0, lodash_get_1.default)(x, m.key);
+            });
+            return obj;
+        });
+        const worksheet = XLSX.utils.json_to_sheet(newData);
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, config.fileName);
+        XLSX.writeFile(workbook, `${config.fileName}.xlsx`);
     });
 }
 exports.downloadCSVFile = downloadCSVFile;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.280",
+    "version": "0.0.282",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",
@@ -24,7 +24,8 @@
         "react-dropzone": "^14.3.8",
         "leaflet": "^1.9.4",
         "leaflet-defaulticon-compatibility": "^0.1.2",
-        "react-leaflet": "^4.2.1"
+        "react-leaflet": "^4.2.1",
+        "xlsx": "^0.18.5"
     },
     "devDependencies": {
         "@types/lodash.clonedeep": "^4.5.9",