@ssplib/react-components 0.0.274 → 0.0.276

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FilterValue } from './types';
+export declare function FilterMenu({ filters, baseFilters, filtrar, reset }: {
+    reset: () => void;
+    filtrar: (dt: FilterValue[]) => void;
+    filters: FilterValue[];
+    baseFilters: FilterValue[];
+}): JSX.Element;

package/components/form/table/FilterSection.js

@@ -0,0 +1,217 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterMenu = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
+const material_1 = require("@mui/material");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const Modal_1 = require("../../modal/Modal");
+function FilterMenu({ filters, baseFilters, filtrar, reset }) {
+    const [data, setData] = (0, react_1.useState)(filters);
+    const [resetFields, setResetFields] = (0, react_1.useState)(false);
+    function addRule(filter) {
+        setData((dt) => {
+            return [...dt, filter];
+        });
+    }
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(material_1.Box, { width: {
+            xs: 'inherit',
+            md: 850,
+        } },
+        react_1.default.createElement(material_1.Menu, { open: open, onClose: handleClose, anchorEl: anchorEl }, baseFilters.map((x) => (react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
+                addRule(x);
+                setAnchorEl(null);
+            } }, x.label)))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
+            react_1.default.createElement(Typography_1.default, { fontWeight: 700, fontSize: 18 }, "Filtrar"),
+            react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Refresh, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    reset();
+                    Modal_1.MODAL.close();
+                } }, "Limpar")),
+        react_1.default.createElement(material_1.Box, { marginBottom: 1 },
+            react_1.default.createElement(material_1.Alert, { severity: 'warning' }, "Preencha apenas os campos que deseja filtrar.")),
+        react_1.default.createElement(material_1.Stack, null, resetFields ? (data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))) : (react_1.default.createElement(material_1.Box, null, data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 1 },
+            react_1.default.createElement(material_1.Button, { variant: 'contained', color: 'success', startIcon: react_1.default.createElement(Search_1.default, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    filtrar(data);
+                    Modal_1.MODAL.close();
+                } }, "Filtrar"))));
+}
+exports.FilterMenu = FilterMenu;
+function FilterRow({ filterValue, setDt, removeDt, idx, setReset, }) {
+    const [currentOperator, setCurrentOperator] = (0, react_1.useState)(filterValue.operator);
+    const [data, setData] = (0, react_1.useState)(filterValue);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    (0, react_1.useEffect)(() => {
+        setDt(data);
+    }, [data]);
+    return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'end', spacing: 1, width: '100%', bgcolor: idx % 2 === 0 ? '#ededed' : 'inherit', padding: 0.5, borderRadius: 2 },
+        !isSmall && (react_1.default.createElement(Typography_1.default, { width: '100%', alignContent: 'center', fontWeight: 600, color: '#323232' }, filterValue.label)),
+        react_1.default.createElement(material_1.FormControl, { sx: {
+                width: '100%',
+            } },
+            isSmall && react_1.default.createElement(Typography_1.default, null, filterValue.label),
+            react_1.default.createElement(material_1.Select, { onChange: (e) => {
+                    const value = e.target.value;
+                    setData((obj) => (Object.assign(Object.assign({}, obj), { operator: value, value: '' })));
+                    setCurrentOperator(value);
+                }, defaultValue: currentOperator, size: 'small', sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }, filterValue.operators.map((x) => (react_1.default.createElement(material_1.MenuItem, { value: x }, x))))),
+        react_1.default.createElement(FilterField, { filterValue: filterValue, operator: data.operator, onChange: (value, type = 'value') => {
+                setData((obj) => (Object.assign(Object.assign({}, obj), { [type]: value })));
+            } })));
+}
+function FilterField({ filterValue, operator, onChange }) {
+    switch (filterValue.type) {
+        case 'number':
+            return (react_1.default.createElement(TextField_1.default, { type: 'number', size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'string':
+            if (filterValue.useList) {
+                switch (operator) {
+                    case 'tem um dos':
+                        return (react_1.default.createElement(material_1.Autocomplete, { multiple: true, id: 'tags-standard', onChange: (e, value) => {
+                                if (value.length <= 0) {
+                                    onChange('');
+                                    return;
+                                }
+                                onChange(value);
+                            }, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { variant: 'standard', placeholder: 'Escolha os valores', fullWidth: true })), fullWidth: true }));
+                    case 'contem':
+                    case 'igual':
+                        return (react_1.default.createElement(material_1.Box, { width: '100%' },
+                            react_1.default.createElement(material_1.Autocomplete, { options: filterValue.useList, onChange: (e, value) => {
+                                    onChange(value);
+                                }, defaultValue: typeof filterValue.value === 'object' ? filterValue.value : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', placeholder: 'Escolha um valor', fullWidth: true, sx: {
+                                        bgcolor: 'white',
+                                    } }))), fullWidth: true })));
+                }
+            }
+            return (react_1.default.createElement(TextField_1.default, { size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'date':
+        case 'dates':
+            switch (operator) {
+                case 'data exata':
+                case 'data fim':
+                case 'data inicio':
+                case 'tem a data':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+                case 'entre':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) }),
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '', 'value2');
+                            }, defaultValue: filterValue.value2 ? (0, dayjs_1.default)(filterValue.value2, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+            }
+            break;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
+}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { GenericTableProps } from './types';
+import { TableProps } 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, }: GenericTableProps<T>): 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, }: TableProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof GenericTable>;
 export default _default;

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

@@ -1,209 +1,5 @@
-import { BoxProps } from '@mui/material';
-import React, { ReactNode } from 'react';
-interface ColumnData {
-    title: string;
-    keyName: string;
-    customComponent?: (content: string, obj: any) => JSX.Element;
-    size?: number;
-}
-interface OrderBy {
-    label: string;
-    key: string;
-    type: 'string' | 'number';
-}
-/**
- * Interface para as propriedades do componente Table.
- */
-export interface TableProps {
-    /**
-     * Identificador único da tabela.
-     */
-    id: string;
-    /**
-     * Configuração de largura para exibição em telas grandes.
-     */
-    mediaQueryLG?: {
-        all: number;
-        action: number;
-    };
-    /**
-     * Funções de filtragem aplicáveis à tabela.
-     */
-    filtersFunc?: {
-        [key: string]: (value: string) => any;
-    };
-    /**
-     * Lista de filtros disponíveis.
-     */
-    filters?: FilterValue[];
-    /**
-     * Configuração da ordenação das colunas.
-     */
-    orderBy?: OrderBy[];
-    /**
-     * Margem personalizada para o componente.
-     */
-    customMargin?: number;
-    /**
-     * Margem personalizada para visualização em dispositivos móveis.
-     */
-    customMarginMobile?: number;
-    /**
-     * Define se os valores CSV devem ser normalizados (removendo acentos, por exemplo).
-     */
-    normalize?: boolean;
-    /**
-     * Define se os valores CSV devem ser convertidos para maiúsculas.
-     */
-    csvUpper?: boolean;
-    /**
-     * Estilo personalizado para a tabela.
-     */
-    customTableStyle?: BoxProps;
-    /**
-     * Caminho múltiplo para os dados dentro do JSON retornado pela API.
-     */
-    multipleDataPath?: string;
-    /**
-     * Mensagem de erro personalizada para exibição na tabela.
-     */
-    customErrorMsg?: string | ReactNode;
-    /**
-     * Remove aspas dos valores no CSV.
-     */
-    removeQuotes?: boolean;
-    /**
-     * Lista de colunas a serem exibidas na tabela.
-     */
-    columns: ColumnData[];
-    /**
-     * Nome da tabela para exibição.
-     */
-    tableName: string;
-    /**
-     * Exibe botão para exportar todos os dados para CSV.
-     */
-    csvShowAllButton?: boolean;
-    /**
-     * Lista de chaves que devem ser excluídas da exportação para CSV.
-     */
-    csvExcludeUpper?: string[];
-    /**
-     * Define se o CSV será exportado sem compactação.
-     */
-    csvWithoutZip?: boolean;
-    /**
-     * Define o tamanho colapsado das células expansíveis.
-     */
-    collapsedSize?: number;
-    /**
-     * Título do botão para exportação de todos os dados em CSV.
-     */
-    csvAllButtonTitle?: string;
-    /**
-     * Título do botão para exportação em CSV.
-     */
-    csvButtonTitle?: string;
-    /**
-     * Título do botão para exportação sem compactação.
-     */
-    csvNoZipText?: string;
-    /**
-     * Chave usada para nomeação de arquivos CSV compactados.
-     */
-    csvZipFileNamesKey?: string;
-    /**
-     * Define se será gerado um ZIP contendo os arquivos CSV.
-     */
-    generateCsvZip?: boolean;
-    /**
-     * Função de validação para exclusão de chaves ao exportar CSV.
-     */
-    csvExcludeValidate?: (key: string, value: string | number) => boolean;
-    /**
-     * Mapeamento de nomes personalizados para colunas do CSV.
-     */
-    csvCustomKeyNames?: {
-        [key: string]: string;
-    };
-    /**
-     * Define o tamanho máximo do texto antes de ser colapsado.
-     */
-    expandTextMaxLength?: number;
-    /**
-     * Lista de chaves a serem excluídas da exportação para CSV.
-     */
-    csvExcludeKeysCSV?: string[];
-    /**
-     * Lista de chaves a serem excluídas da exportação geral para CSV.
-     */
-    csvExcludeKeys?: string[];
-    /**
-     * Define se o título deve ser ocultado na exportação CSV.
-     */
-    hideTitleCSV?: boolean;
-    /**
-     * Lista de chaves a serem excluídas na exportação de todos os dados.
-     */
-    csvExcludeKeysAll?: string[];
-    /**
-     * Nome da chave do status para identificação de status da linha.
-     */
-    statusKeyName?: string;
-    /**
-     * Quantidade de itens por página.
-     */
-    itemCount?: number;
-    /**
-     * Componente para exibir ações específicas para cada linha.
-     */
-    action: (prop: any) => JSX.Element;
-    /**
-     * Configuração para exportação de arquivos CSV.
-     */
-    csv?: {
-        fileName: string;
-    };
-    /**
-     * Define o número de colunas exibidas na tabela.
-     */
-    columnSize: number;
-    /**
-     * Função para buscar os dados a serem exibidos na tabela.
-     */
-    fetchFunc: () => Promise<Response>;
-    /**
-     * Mensagens exibidas quando não há dados na tabela.
-     */
-    emptyMsg?: {
-        user: string;
-        public: string;
-    };
-    /**
-     * Caminho dentro do JSON de resposta onde os dados estão armazenados.
-     */
-    dataPath?: string;
-    /**
-     * Define se a autenticação via Keycloak será utilizada.
-     */
-    useKC?: boolean;
-}
-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, }: TableProps): JSX.Element;
-type FilterType = 'string' | 'number' | 'date' | 'dates';
-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';
-interface FilterValue {
-    label: string;
-    keyName: string;
-    type: FilterType;
-    operator: FilterOperators;
-    operators: FilterOperators[];
-    value: string | any;
-    value2?: string | any;
-    useList?: {
-        id: string | number;
-        label: string;
-    }[];
-    customFunc?: string;
-}
+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, }: TableProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;