@ssplib/react-components 0.0.211 → 0.0.214

package/components/form/input/FetchAutoComplete.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, route, onChange, xs, sm, md, }: {
+export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, route, onChange, xs, sm, watchValue, md, }: {
     name: string;
     url: string;
     title: string;
+    watchValue?: {
+        id: number | string;
+        label: string;
+    };
     customLoadingText?: string;
     defaultValue?: number;
     required?: boolean;

package/components/form/input/FetchAutoComplete.js

@@ -31,12 +31,13 @@ const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
 const auth_1 = require("../../../context/auth");
 const form_1 = require("../../../context/form");
-function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, md, }) {
+function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, watchValue, md, }) {
     const context = (0, react_1.useContext)(form_1.FormContext);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [list, setList] = (0, react_1.useState)([]);
     const [loadingText, setLoadingText] = (0, react_1.useState)('Carregando...');
     const [dValue, setDValue] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)(null);
     const { user } = (0, react_1.useContext)(auth_1.AuthContext);
     (0, react_1.useEffect)(() => {
         if (defaultValue) {
@@ -53,7 +54,7 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
                         if (value.length > 0) {
                             setList((0, lodash_get_1.default)(j, route, j));
                             setLoading(false);
-                            context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue);
+                            context.formSetValue(name, defaultValue);
                             setDValue(value[0]);
                         }
                         else {
@@ -67,6 +68,13 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
             });
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (watchValue) {
+            setValue(watchValue);
+            context.formSetValue(name, watchValue.id);
+            onChange(watchValue.id);
+        }
+    }, [watchValue]);
     function onFocus() {
         if ((defaultValue || !shouldRefetch) && list.length > 0)
             return;
@@ -91,8 +99,11 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
         });
     }
     function handleAutoCompleteChange(value) {
-        context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
-        onChange(value ? value.id : -1);
+        if (value) {
+            setValue(value);
+            context.formSetValue(name, value.id);
+            onChange(value.id);
+        }
     }
     if (defaultValue && list.length <= 0 && !dValue)
         return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
@@ -105,7 +116,7 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
                     return 'Este campo é obrigatório';
             },
         }), { hidden: true })),
-        react_1.default.createElement(material_1.Autocomplete, { loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
+        react_1.default.createElement(material_1.Autocomplete, { value: value, loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
                 var _a;
                 return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, onFocus: onFocus, error: (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
             }, sx: {

package/components/form/input/FixedAutoComplete.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
-export declare function FixedAutoComplete({ name, title, required, list, defaultValue, onChange, xs, sm, md, }: {
+export declare function FixedAutoComplete({ name, title, required, list, defaultValue, onChange, xs, sm, watchValue, md, }: {
     name: string;
     title: string;
+    watchValue?: {
+        id: number | string;
+        label: string;
+    };
     list: Object[];
     customLoadingText?: string;
     defaultValue?: Object;

package/components/form/input/FixedAutoComplete.js

@@ -31,16 +31,26 @@ const material_1 = require("@mui/material");
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
-function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, md, }) {
+function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, watchValue, md, }) {
     const context = (0, react_1.useContext)(form_1.FormContext);
+    const [value, setValue] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (defaultValue)
             context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue.id);
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (watchValue) {
+            setValue(watchValue);
+            context.formSetValue(name, watchValue.id);
+            onChange(watchValue.id);
+        }
+    }, [watchValue]);
     function handleAutoCompleteChange(value) {
-        console.log(value);
-        context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
-        onChange(value ? value.id : -1);
+        if (value) {
+            setValue(value);
+            context.formSetValue(name, value.id);
+            onChange(value.id);
+        }
     }
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
@@ -50,7 +60,7 @@ function FixedAutoComplete({ name, title, required = false, list, defaultValue,
                     return 'Este campo é obrigatório';
             },
         }), { hidden: true })),
-        react_1.default.createElement(material_1.Autocomplete, { options: list, defaultValue: defaultValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
+        react_1.default.createElement(material_1.Autocomplete, { value: value, options: list, defaultValue: defaultValue, getOptionLabel: (option) => (option.label ? option.label.toString() : 'Não Encontrado'), isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
                 var _a;
                 return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, error: (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
             }, size: 'small', sx: {

package/components/form/input/Input.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, ...props }: {
+export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, watchValue, ...props }: {
     type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password' | 'cep' | 'sei';
     name: string;
+    watchValue?: string;
     title?: string;
     required?: boolean;
     numberMask?: string;

package/components/form/input/Input.js

@@ -44,9 +44,12 @@ const react_1 = __importStar(require("react"));
 const MaskInput_1 = __importDefault(require("./MaskInput"));
 const form_1 = require("../../../context/form");
 function Input(_a) {
-    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md"]);
+    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md, watchValue = '' } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md", "watchValue"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
-    const chooseInput = (0, react_1.useCallback)(() => {
+    (0, react_1.useEffect)(() => {
+        context.formSetValue(props.name, watchValue);
+    }, [watchValue]);
+    const chooseInput = () => {
         const inputConfig = {
             fullWidth: true,
             size: 'small',
@@ -154,7 +157,7 @@ function Input(_a) {
                         mask: '00000[000000]',
                     } }));
         }
-    }, [props, context, type]);
+    };
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         props.title && (react_1.default.createElement(material_1.InputLabel, { htmlFor: 'campo', required: props.required }, props.title)),
         chooseInput()));

package/components/form/input/MaskInput.js

@@ -42,8 +42,21 @@ const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props,
     const { onChange, maskProps, onMask, maskValue, setMaskValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue"]);
     const [mask, setMask] = (0, react_1.useState)(maskProps.mask);
     delete prop.value;
-    return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, inputRef: ref, onAccept: (value) => {
-            setMaskValue(value);
+    const myRef = (0, react_1.useRef)(null);
+    const [myValue, setMyValue] = (0, react_1.useState)('');
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    (0, react_1.useEffect)(() => {
+        const value = context.formGetValues(prop.name);
+        if (value) {
+            setMyValue(value);
+        }
+    }, [context.formWatch(prop.name)]);
+    (0, react_1.useEffect)(() => {
+        context.formSetValue(prop.name, myRef.current.element.value);
+    }, [myValue]);
+    return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, value: myValue, ref: myRef, inputRef: ref, onChange: (e) => { }, onAccept: (value, mask) => {
+            setMyValue(value);
+            mask.updateValue();
             if (!onMask)
                 return;
             onMask(value, setMask);
@@ -51,18 +64,15 @@ const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props,
 });
 function MaskInput(props) {
     const context = (0, react_1.useContext)(form_1.FormContext);
-    const [inputValue, setInputValue] = react_1.default.useState('');
     const [maskValue, setMaskValue] = (0, react_1.useState)('');
-    const onChangeInput = (0, react_1.useCallback)((e) => {
-        setInputValue(e.target.value);
-    }, []);
-    return (react_1.default.createElement(material_1.TextField, Object.assign({}, props.formConfig, { value: inputValue, onInput: (e) => {
-            const name = props.formConfig.name;
-            const value = e.target.value;
-            context.formSetValue(name, value);
-        }, defaultValue: props.defaultValue, onFocus: (e) => setMaskValue(e.target.value), onChange: onChangeInput, InputProps: {
-            inputComponent: TextMaskCustom,
-            inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
-        }, disabled: props.disabled, fullWidth: true })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.TextField, Object.assign({}, props.formConfig, { onInput: (e) => {
+                const name = props.formConfig.name;
+                const value = e.target.value;
+                context.formSetValue(name, value);
+            }, InputProps: {
+                inputComponent: TextMaskCustom,
+                inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
+            }, disabled: props.disabled, fullWidth: true }))));
 }
 exports.default = MaskInput;

package/components/form/input/MultInput.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-export default function MultInput({ name, required, title, customPlaceholder, defaultValue, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
+export default function MultInput({ name, required, title, customPlaceholder, defaultValue, xs, sm, watchValue, inputMinLength, inputMaxLength, md, ...props }: {
     name: string;
     title?: string;
+    watchValue?: string;
     customPlaceholder?: string;
     required?: boolean;
     defaultValue?: string;

package/components/form/input/MultInput.js

@@ -44,8 +44,11 @@ const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
 function MultInput(_a) {
     var _b;
-    var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
+    var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, watchValue = '', inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "watchValue", "inputMinLength", "inputMaxLength", "md"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
+    (0, react_1.useEffect)(() => {
+        context.formSetValue(name, watchValue);
+    }, [watchValue]);
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         title && (react_1.default.createElement(InputLabel_1.default, { required: required, sx: { textTransform: 'capitalize' } }, title)),
         react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, rows: 3, defaultValue: defaultValue }, context.formRegister(name, {

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

@@ -6,11 +6,13 @@ interface ColumnData {
     size?: number;
 }
 type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a' | 'select';
-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, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, }: {
+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, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, customMargin, customMarginMobile, }: {
     mediaQueryLG?: {
         all: number;
         action: number;
     };
+    customMargin?: number;
+    customMarginMobile?: number;
     normalize?: boolean;
     csvUpper?: boolean;
     multipleDataPath?: string;

package/components/form/table/Table.js

@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -64,7 +55,7 @@ let startData = [];
 function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
-}, 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, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', }) {
+}, 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, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', customMargin = 4, customMarginMobile = 0, }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
@@ -77,6 +68,9 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     const [listPage, setListPage] = (0, react_1.useState)(1);
     const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
     const [oldSelectState, setOldSelectState] = (0, react_1.useState)('');
+    const [expandObj, setExpandObj] = (0, react_1.useState)({});
+    const [showExpandObj, setShowExpandObj] = (0, react_1.useState)({});
+    const [showExpandObjOnExited, setShowExpandObjOnExited] = (0, react_1.useState)({});
     // filters states
     const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
     const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
@@ -423,29 +417,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
         link.click();
     }, [list]);
-    const getStatusMsg = (0, react_1.useCallback)((cod) => {
-        switch (cod) {
-            case 'P':
-                return (react_1.default.createElement(Typography_1.default, { color: '#F59E0B', fontWeight: 600, fontFamily: 'Inter' }, "EM AN\u00C1LISE"));
-            case 'A':
-                return (react_1.default.createElement(Typography_1.default, { color: '#0EA5E9', fontWeight: 600, fontFamily: 'Inter' }, "CADASTRADO"));
-            case 'C':
-                return (react_1.default.createElement(Typography_1.default, { color: '#a1a1a1', fontWeight: 600, fontFamily: 'Inter' }, "CANCELADO"));
-            case 'R':
-                return (react_1.default.createElement(Typography_1.default, { color: '#EF4444', fontWeight: 600, fontFamily: 'Inter' }, "REPROVADO"));
-            case 'L':
-                return (react_1.default.createElement(Typography_1.default, { color: '#22C55E', fontWeight: 600, fontFamily: 'Inter' }, "LICENCIADO"));
-            case 'PA':
-                return (react_1.default.createElement(Typography_1.default, { color: '#6366F1', fontWeight: 600, fontFamily: 'Inter' }, "PR\u00C9 APROVADO"));
-            case 'FP':
-                return (react_1.default.createElement(Typography_1.default, { color: '#991b1b', fontWeight: 600, fontFamily: 'Inter' }, "FORA DO PRAZO"));
-        }
-    }, []);
-    function getSelectValues(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return ['dd'];
-        });
-    }
     (0, react_1.useEffect)(() => {
         filterBasedOnList(appliedFilters);
     }, [appliedFilters]);
@@ -483,10 +454,18 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         function category(type, keyName, uniqueName, customValue, referencekey) {
             if (type === 'a-z') {
                 rawList = rawList.sort((a, b) => {
-                    const aValue = String(a[keyName]);
-                    const bValue = String(b[keyName]);
-                    const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
-                    const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                    const aValue = a[keyName];
+                    const bValue = b[keyName];
+                    let valueA = aValue;
+                    let valueB = bValue;
+                    if (typeof aValue === 'string' || typeof bValue === 'string') {
+                        valueA = String(aValue).toLowerCase();
+                        valueB = String(bValue).toLowerCase();
+                    }
+                    console.table({
+                        values: valueA + ' < ' + valueB,
+                        result: valueA < valueB,
+                    });
                     if (valueA < valueB) {
                         return -1;
                     }
@@ -498,10 +477,14 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
             } //
             else if (type === 'z-a') {
                 rawList = rawList.sort((a, b) => {
-                    const aValue = String(a[keyName]);
-                    const bValue = String(b[keyName]);
-                    const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
-                    const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                    const aValue = a[keyName];
+                    const bValue = b[keyName];
+                    let valueA = aValue;
+                    let valueB = bValue;
+                    if (typeof aValue === 'string' || typeof bValue === 'string') {
+                        valueA = String(aValue).toLowerCase();
+                        valueB = String(bValue).toLowerCase();
+                    }
                     if (valueA < valueB) {
                         return 1;
                     }
@@ -704,6 +687,25 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
             return value;
         });
     };
+    function expandContent(str, index) {
+        const content = str.toString();
+        if (content.length <= 100) {
+            return content;
+        }
+        return expandObj[index] === true ? content : content.substring(0, 100) + '...';
+    }
+    // effect usado quando for mostrar "VER MAIS" e "VER MENOS"
+    (0, react_1.useEffect)(() => {
+        const start = currentPage * itemsCount;
+        const newList = list.slice(start, start + itemsCount);
+        let obj = {};
+        newList.forEach((x, index) => {
+            columns.forEach((c) => {
+                obj[index] = obj[index] === true ? true : (0, lodash_get_1.default)(x, c.keyName).toString().length >= 100;
+            });
+        });
+        setShowExpandObj(obj);
+    }, [list, itemsCount, currentPage]);
     if (error)
         return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
             react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
@@ -718,7 +720,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     if (!userLoaded && useKC)
         return react_1.default.createElement(material_1.LinearProgress, null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4, bgcolor: 'white', p: 2, borderRadius: 6 },
+        react_1.default.createElement(material_1.Box, { marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 },
             react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
                 react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, marginBottom: 2, height: '40px', width: '100%' },
                     react_1.default.createElement(TextField_1.default, { InputProps: {
@@ -763,15 +765,38 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                             " de ",
                             list.length)))),
             react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
-                react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: { padding: 0.5, backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white', paddingY: 2, borderTop: 'solid 1.5px #E2E8F0' }, elevation: 0 },
+                react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: {
+                    padding: 0.5,
+                    backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white',
+                    paddingTop: 2,
+                    borderTop: 'solid 1.5px #E2E8F0',
+                    position: 'relative',
+                }, elevation: 0 },
                 react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
-                    columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1) },
+                    columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1), sx: {
+                            overflow: 'hidden',
+                        } },
                         react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
                             react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
-                        react_1.default.createElement(material_1.Box, { paddingLeft: 1 },
-                            react_1.default.createElement(material_1.Box, { sx: { wordWrap: 'break-word', color: '#1E293B', fontSize: 16 }, fontFamily: 'Inter' }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : c.keyName === statusKeyName ? (getStatusMsg((0, lodash_get_1.default)(x, c.keyName))) : (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, lodash_get_1.default)(x, c.keyName) } }))))))),
+                        react_1.default.createElement(material_1.Box, { paddingLeft: 1, position: 'relative' },
+                            react_1.default.createElement(material_1.Collapse, { in: expandObj[index] === true, collapsedSize: 100, onExited: (e) => setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: false }))) },
+                                react_1.default.createElement(material_1.Box, { sx: {
+                                        wordWrap: 'break-word',
+                                        color: '#1E293B',
+                                        fontSize: 16,
+                                    }, fontFamily: 'Inter' },
+                                    react_1.default.createElement(material_1.Box, null, c.customComponent ? c.customComponent((0, lodash_get_1.default)(x, c.keyName), x) : react_1.default.createElement(material_1.Box, { color: 'transparent' }, (0, lodash_get_1.default)(x, c.keyName, ''))),
+                                    react_1.default.createElement(material_1.Box, { position: 'absolute', top: 0 }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(react_1.default.Fragment, null, showExpandObjOnExited[index] ? ((0, lodash_get_1.default)(x, c.keyName, '')) : (0, lodash_get_1.default)(x, c.keyName, '').toString().length >= 100 ? (react_1.default.createElement(react_1.default.Fragment, null, (0, lodash_get_1.default)(x, c.keyName, '').toString().substring(0, 100) + '...')) : ((0, lodash_get_1.default)(x, c.keyName, ''))))))))))),
                     react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
-                        react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))))))))),
+                        react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))),
+                    showExpandObj[index] && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', bottom: 0, width: '100%' },
+                        react_1.default.createElement(material_1.Button, { onClick: (e) => {
+                                setExpandObj((s) => (Object.assign(Object.assign({}, s), { [index]: !s[index] })));
+                                setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: true })));
+                            }, sx: {
+                                padding: 0,
+                                textTransform: 'capitalize',
+                            }, endIcon: expandObj[index] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null) }, expandObj[index] ? 'Ver Menos' : 'Ver Mais'))))))))),
             getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { padding: 1, direction: {
                     xs: 'column',
                     md: 'row',
@@ -823,7 +848,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                     }), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
                     react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5)' } })))),
         react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
-            react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, fIndex }) },
                 react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
                         if (idx === fIndex)
                             return !x;
@@ -836,7 +861,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                     react_1.default.createElement(material_1.ListItemText, { primary: f }),
                     filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
                 react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
-                    react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x) => (react_1.default.createElement(react_1.default.Fragment, null, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
+                    react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x, index) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, index }) }, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
                             bgcolor: '#b7e4c7',
                             ':hover': { bgcolor: '#b7e4c7' },
                         })) },
@@ -906,7 +931,7 @@ function FetchSelectAutoComplete(props) {
             .catch((e) => console.log('Erro ao buscar dados do filtro'));
     }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Autocomplete, { options: data, onFocus: (e) => console.log('ata'), onChange: props.onChange, sx: {
+        react_1.default.createElement(material_1.Autocomplete, { options: data, onChange: props.onChange, sx: {
                 margin: 1,
             }, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: props.label })) })));
 }

package/components/navbar/TabNavBar.js

@@ -104,9 +104,9 @@ function TabNavBar(_a) {
                         react_1.default.createElement(link_1.default, { href: '/' }, next ? react_1.default.createElement(image_1.default, { src: img, alt: title, width: 40, height: 40 }) : react_1.default.createElement("img", { src: img, height: 35 })),
                         react_1.default.createElement(material_1.Box, null,
                             react_1.default.createElement(material_1.Typography, { variant: 'subtitle1', fontWeight: 600 }, title))),
-                    react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2, sx: { display: { xs: 'none', md: 'flex' } } }, links.map((x) => {
+                    react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2, sx: { display: { xs: 'none', md: 'flex' } } }, links.map((x, index) => {
                         var _a;
-                        return (react_1.default.createElement(material_1.Box, { borderBottom: next ? (verificarRota((_a = router === null || router === void 0 ? void 0 : router.pathname) !== null && _a !== void 0 ? _a : '', x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, sx: {
+                        return (react_1.default.createElement(material_1.Box, { borderBottom: next ? (verificarRota((_a = router === null || router === void 0 ? void 0 : router.pathname) !== null && _a !== void 0 ? _a : '', x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, key: JSON.stringify({ x, index }), sx: {
                                 ':hover': {
                                     backgroundColor: '#fcfcfc',
                                     cursor: 'pointer',
@@ -126,7 +126,7 @@ function TabNavBar(_a) {
                         } }, links.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(material_1.IconButton, { onClick: onMenuClick },
                             react_1.default.createElement(Menu_1.default, null)),
-                        react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x) => (react_1.default.createElement(material_1.MenuItem, { key: `navmenu${x}`, onClick: (e) => onMenuItemClick(e, x.path) },
+                        react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x, index) => (react_1.default.createElement(material_1.MenuItem, { key: JSON.stringify({ x, index }), onClick: (e) => onMenuItemClick(e, x.path) },
                             react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, x.name)))))))),
                     react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', alignItems: 'center', sx: { width: { md: '100%' } }, paddingY: 1 },
                         react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 2 },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.211",
+    "version": "0.0.214",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",