npm - argous - Versions diffs - 1.2.136 → 1.2.140 - Mend

argous 1.2.136 → 1.2.140

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 (13) hide show

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts CHANGED Viewed

@@ -1,21 +1,89 @@
-declare var _default: React.ForwardRefExoticComponent<Pick<{
-    [x: string]: any;
-    action: any;
-    busca: any;
-    resposta: any;
-    label: any;
-    value: any;
-    pgCode: any;
-    favoritePage: any;
-    groupName: any;
-    groupHeaderColor: any;
-    groupTitleColor: any;
-    loadingColor: any;
-    filterFunction: any;
-    getOptionLabel: any;
-    onChange?: ((e: any) => any) | undefined;
-    textFieldProps?: {} | undefined;
-    searchParams: any;
-}, string | number> & React.RefAttributes<any>>;
-export default _default;
-import React from "react";
+import { TextFieldProps } from '@material-ui/core';
+import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
+import * as React from 'react';
+export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
+  /**
+   * Valor do campo
+   */
+  value?: Array<number|string> | object,
+  /**
+   * Props repassados ao componente Textfield
+   */
+  textFieldProps?: TextFieldProps,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param event — The event source of the callback.
+   *
+   * @param value — The new value of the component.
+   *
+   * @param reason — One of "create-option", "select-option", "remove-option", "blur", "clear" ou "only-one-left".
+   */
+  onChange?: ((event: React.ChangeEvent<{}>, value: any, reason: 'create-option' | 'select-option' | 'remove-option' | 'blur' | 'clear' | 'only-one-left', details?: AutocompleteChangeDetails<any> | undefined) => void) | undefined,
+  /**
+   * Formata o valor que aparece na listagem
+   *
+   * @param option - Opção sendo testada ou selecionada
+   *
+   * @param lista - Lista com todas as opções
+   */
+  getOptionLabel?: ((option: Array<any>, lista: Array<Array<any>>) => string),
+  /**
+   * Utiliza um pgCode diferente do padrão
+   */
+  pgCode?: string,
+  /**
+   * Objeto de busca personalizado
+   */
+  busca?: string,
+  /**
+   * Objeto de resposta personalizado
+   */
+  resposta?: string,
+  /**
+   * Action personalizada
+   */
+  action?: string,
+  /**
+   * Label do campo
+   */
+  label?: string,
+  /**
+   * Parametros utilizados no metodo de busca
+   */
+  searchParams?: object,
+  /**
+   * Define a cor do loading
+   */
+  loadingColor?: string,
+  /**
+    * Parametro que define se terá paginação
+    */
+  favoritePage?: boolean,
+  /**
+    * Array contendo nome do grupo
+    */
+  groupName?: Array<string>,
+  /**
+    * Array contendo a cor do titulo no grupo
+    */
+  groupTitleColor?: Array<string>,
+  /**
+    * Array contendo o backgroundColor do header no grupo
+    */
+  groupHeaderColor?: Array<string>,
+  /**
+   * Função para filtrar a lista de opções
+   *
+   * @param valor - Valor setado no componente
+   * @param item - Item a ser testado contra o valor
+   *
+   * @returns {boolean} Retorna true se item de ser removido da lista
+   */
+  filterFunction?: (valor: any, item: any) => boolean,
+}
+declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
+export default AutoCompleteFavorites;

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js CHANGED Viewed

@@ -80,6 +80,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomTooltip = void 0;
 var api_1 = require("../../utils/api");
 var core_1 = require("@material-ui/core");
 var lab_1 = require("@material-ui/lab");
@@ -169,111 +170,25 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
         }
     }
 }); });
-var CustomTooltip = core_1.withStyles(function (theme) { return ({
+exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
     tooltip: theme.palette.type === 'light' ? {
         fontSize: 15,
         fontWeight: 400,
-        color: 'rgb(255, 255, 255)',
+        color: '#FFF',
         backgroundColor: '#333333e3',
     } : {
         fontSize: 15,
         fontWeight: 400,
-        color: 'rgb(0, 0, 0)',
+        color: '#000',
         backgroundColor: '#fbfbfbd1',
     },
     arrow: {
         color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
     }
 }); })(core_1.Tooltip);
-var ListboxFavorites = react_1.forwardRef(function (props, ref) {
-    var classes = useStyles();
-    var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
-    var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
-    function retornaInicio() {
-        switch (pageNumber) {
-            case 1:
-                return 0;
-            case 2:
-                return 7;
-            case 3:
-                return 14;
-            default: return;
-        }
-    }
-    function retornaFim() {
-        switch (pageNumber) {
-            case 1:
-                return 7;
-            case 2:
-                return 14;
-            case 3:
-                return favoritosLength;
-            default: return;
-        }
-    }
-    function retornaArray(sectionIndex, section) {
-        if (sectionIndex === 0 && favoritePage && favoritosLength > 7)
-            return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
-        return section.props.children[1].props.children;
-    }
-    function retornaEstrutura(sectionIndex, item) {
-        if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
-            return (react_1.default.createElement(core_1.Slide, { in: slide, direction: direction },
-                react_1.default.createElement(CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
-                    react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
-                        react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })))));
-        }
-        return (react_1.default.createElement(CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
-            react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
-                react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText }))));
-    }
-    function buttonClick(evento, value) {
-        evento.preventDefault();
-        evento.stopPropagation();
-        if (value !== pageNumber) {
-            verificaSaidaSlide(value);
-            setDados(function (v) { return (__assign(__assign({}, v), { slide: false })); });
-            setTimeout(function () {
-                setDados(function (v) { return (__assign(__assign({}, v), { pageNumber: value, direction: retornaDirection(value) })); });
-                setTimeout(function () { return setDados(function (v) { return (__assign(__assign({}, v), { slide: true })); }); }, 100);
-            }, 200);
-        }
-    }
-    function verificaSaidaSlide(value) {
-        var direction = '';
-        if ((value === 2 || value === 3) && pageNumber === 1)
-            direction = 'right';
-        else if (value === 3 && pageNumber === 2)
-            direction = 'right';
-        else if (value === 1 && pageNumber === 2)
-            direction = 'left';
-        direction && setDados(function (v) { return (__assign(__assign({}, v), { direction: direction })); });
-    }
-    function retornaDirection(value) {
-        if (value < pageNumber)
-            return 'right';
-        return 'left';
-    }
-    return children.map(function (section, sectionIndex) {
-        var _a, _b, _c;
-        return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
-            react_1.default.createElement(core_1.ListSubheader, { className: classes.subHeader, style: { backgroundColor: groupHeaderColor === null || groupHeaderColor === void 0 ? void 0 : groupHeaderColor[sectionIndex], color: groupTitleColor === null || groupTitleColor === void 0 ? void 0 : groupTitleColor[sectionIndex] } },
-                section.props.children[0].props.children,
-                react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
-                    react_1.default.createElement("div", { className: classes.divButton },
-                        react_1.default.createElement("div", { className: classes.areaButton },
-                            react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 1); }, className: clsx_1.default((_a = {}, _a[classes.buttonActive] = pageNumber === 1, _a), classes.button) }, "1")),
-                        react_1.default.createElement("div", { className: classes.areaButton },
-                            react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 2); }, className: clsx_1.default((_b = {}, _b[classes.buttonActive] = pageNumber === 2, _b), classes.button) }, "2")),
-                        favoritosLength > 14 &&
-                            react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement("div", { className: classes.areaButton },
-                                    react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 3); }, className: clsx_1.default((_c = {}, _c[classes.buttonActive] = pageNumber === 3, _c), classes.button) }, "3")))))),
-            retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
-    });
-});
 var AutoCompleteFavorites = function (_a) {
     var action = _a.action, busca = _a.busca, resposta = _a.resposta, label = _a.label, value = _a.value, pgCode = _a.pgCode, favoritePage = _a.favoritePage, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, _b = _a.onChange, onChange = _b === void 0 ? function (e) { return e; } : _b, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, searchParams = _a.searchParams, props = __rest(_a, ["action", "busca", "resposta", "label", "value", "pgCode", "favoritePage", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
+    var classes = useStyles();
     var _d = react_1.useState({
         lista: [],
         slide: true,
@@ -283,6 +198,112 @@ var AutoCompleteFavorites = function (_a) {
     }), dados = _d[0], setDados = _d[1];
     var _e = react_1.useState(false), loading = _e[0], setLoading = _e[1];
     var _f = react_1.useState(''), inputValue = _f[0], setInputValue = _f[1];
+    var ListboxFavorites = react_1.forwardRef(function (props, ref) {
+        var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
+        var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
+        function retornaInicio() {
+            switch (pageNumber) {
+                case 1:
+                    return 0;
+                case 2:
+                    return 7;
+                case 3:
+                    return 14;
+                default: return;
+            }
+        }
+        function retornaFim() {
+            switch (pageNumber) {
+                case 1:
+                    return 7;
+                case 2:
+                    return 14;
+                case 3:
+                    return favoritosLength;
+                default: return;
+            }
+        }
+        function retornaArray(sectionIndex, section) {
+            if (sectionIndex === 0 && favoritePage && favoritosLength > 7)
+                return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
+            return section.props.children[1].props.children;
+        }
+        function retornaEstrutura(sectionIndex, item) {
+            if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
+                return (react_1.default.createElement(core_1.Slide, { in: slide, direction: direction },
+                    react_1.default.createElement(exports.CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
+                        react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
+                            react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })))));
+            }
+            return (react_1.default.createElement(exports.CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
+                react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
+                    react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText }))));
+        }
+        function buttonClick(evento, value) {
+            evento.preventDefault();
+            evento.stopPropagation();
+            if (value !== pageNumber) {
+                verificaSaidaSlide(value);
+                setDados(function (v) { return (__assign(__assign({}, v), { slide: false })); });
+                setTimeout(function () {
+                    setDados(function (v) { return (__assign(__assign({}, v), { pageNumber: value, direction: retornaDirection(value) })); });
+                    setTimeout(function () { return setDados(function (v) { return (__assign(__assign({}, v), { slide: true })); }); }, 100);
+                }, 200);
+            }
+        }
+        function verificaSaidaSlide(value) {
+            var direction = '';
+            if ((value === 2 || value === 3) && pageNumber === 1)
+                direction = 'right';
+            else if (value === 3 && pageNumber === 2)
+                direction = 'right';
+            else if (value === 1 && pageNumber === 2)
+                direction = 'left';
+            direction && setDados(function (v) { return (__assign(__assign({}, v), { direction: direction })); });
+        }
+        function retornaDirection(value) {
+            if (value < pageNumber)
+                return 'right';
+            return 'left';
+        }
+        return children.map(function (section, sectionIndex) {
+            var _a, _b, _c;
+            return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
+                react_1.default.createElement(core_1.ListSubheader, { className: classes.subHeader, style: { backgroundColor: groupHeaderColor === null || groupHeaderColor === void 0 ? void 0 : groupHeaderColor[sectionIndex], color: groupTitleColor === null || groupTitleColor === void 0 ? void 0 : groupTitleColor[sectionIndex] } },
+                    section.props.children[0].props.children,
+                    react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
+                        react_1.default.createElement("div", { className: classes.divButton },
+                            react_1.default.createElement("div", { className: classes.areaButton },
+                                react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 1); }, className: clsx_1.default((_a = {}, _a[classes.buttonActive] = pageNumber === 1, _a), classes.button) }, "1")),
+                            react_1.default.createElement("div", { className: classes.areaButton },
+                                react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 2); }, className: clsx_1.default((_b = {}, _b[classes.buttonActive] = pageNumber === 2, _b), classes.button) }, "2")),
+                            favoritosLength > 14 &&
+                                react_1.default.createElement(react_1.default.Fragment, null,
+                                    react_1.default.createElement("div", { className: classes.areaButton },
+                                        react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 3); }, className: clsx_1.default((_c = {}, _c[classes.buttonActive] = pageNumber === 3, _c), classes.button) }, "3")))))),
+                retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
+        });
+    });
+    function carimbaLista(lista) {
+        return __awaiter(this, void 0, void 0, function () {
+            var completo;
+            return __generator(this, function (_a) {
+                completo = [];
+                lista.map(function (arr, index) {
+                    index === 0 && favoritePage && setDados(function (v) { return (__assign(__assign({}, v), { favoritosLength: arr.length })); });
+                    return arr.map(function (itemArr) { return itemArr.length < 3 && itemArr.push(groupName[index]); });
+                });
+                lista.forEach(function (v) {
+                    for (var _i = 0, _a = v.values(); _i < _a.length; _i++) {
+                        var item = _a[_i];
+                        completo.push(item);
+                    }
+                });
+                setDados(function (v) { return (__assign(__assign({}, v), { lista: completo })); });
+                return [2 /*return*/];
+            });
+        });
+    }
     var buscar = react_1.useCallback(function (valor) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
         var _a;
@@ -294,38 +315,29 @@ var AutoCompleteFavorites = function (_a) {
                     return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
                 case 1:
                     res = _c.sent();
-                    if (((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)
-                        carimbaLista(res[resposta || 'result']);
-                    else if (res[resposta || 'result'])
-                        setDados(function (v) { return (__assign(__assign({}, v), { lista: res[resposta || 'result'] || [] })); });
+                    if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, carimbaLista(res[resposta || 'result'])];
+                case 2:
+                    _c.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    if (res[resposta || 'result'])
+                        setDados({ lista: res[resposta || 'result'] || [] });
                     else
                         api_1.setError('Erro ao tentar buscar dados.');
+                    _c.label = 4;
+                case 4:
                     setLoading(false);
                     return [2 /*return*/];
             }
         });
     }); }, [inputValue, searchParams]);
-    function carimbaLista(lista) {
-        var completo = [];
-        lista.map(function (arr, index) {
-            index === 0 && favoritePage && setDados(function (v) { return (__assign(__assign({}, v), { favoritosLength: arr.length })); });
-            return arr.map(function (itemArr) { return itemArr.length < 3 && itemArr.push(groupName[index]); });
-        });
-        lista.forEach(function (v) {
-            for (var _i = 0, _a = v.values(); _i < _a.length; _i++) {
-                var item = _a[_i];
-                completo.push(item);
-            }
-        });
-        setDados(function (v) { return (__assign(__assign({}, v), { lista: completo })); });
-    }
     react_1.useEffect(function () { return buscar(); }, [inputValue, buscar]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
-    return (react_1.default.createElement(lab_1.Autocomplete, __assign({ autoComplete: true, autoHighlight: true, openText: 'Abrir', clearText: 'Limpar', filterSelectedOptions: true, onInputChange: function (e) { var _a; return setInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); }, options: lodash_1.isObject(value) ? dados === null || dados === void 0 ? void 0 : dados.lista.filter(function (v) { return filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]; }) : dados === null || dados === void 0 ? void 0 : dados.lista, getOptionLabel: getOptionLabel && (function (option) { return getOptionLabel(option, dados === null || dados === void 0 ? void 0 : dados.lista); }), getOptionSelected: function (o, v) { return o[0] === v; }, renderTags: function (value, getTagProps) {
-            return value.map(function (option, index) { return (react_1.default.createElement(core_1.Chip, __assign({ variant: 'outlined', size: 'small', label: option }, getTagProps({ index: index })))); });
-        }, renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label }, params, textFieldProps, { InputProps: __assign(__assign(__assign({}, textFieldProps.InputProps), params.InputProps), { endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value, onChange: onChange }, { options: lodash_1.isObject(value) ? dados === null || dados === void 0 ? void 0 : dados.lista.filter(function (v) { return filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]; }) : dados === null || dados === void 0 ? void 0 : dados.lista, getOptionLabel: getOptionLabel && (function (option) { return getOptionLabel(option, dados === null || dados === void 0 ? void 0 : dados.lista); }), noOptionsText: inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado', onInputChange: function (e) { var _a; return setInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); }, getOptionSelected: function (o, v) { return o[0] === v; }, autoComplete: true, autoHighlight: true, openText: 'Abrir', clearText: 'Limpar', filterSelectedOptions: true, renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label }, params, textFieldProps, { InputProps: __assign(__assign(__assign({}, textFieldProps.InputProps), params.InputProps), { endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                     params.InputProps.endAdornment,
                     react_1.default.createElement(core_1.Fade, { in: loading },
-                        react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })))) }) }))); } }, props, { value: value, onChange: onChange }, { ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor } })));
+                        react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })))) }) }))); }, ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor } })));
 };
-exports.default = react_1.forwardRef(AutoCompleteFavorites);
+exports.default = AutoCompleteFavorites;

package/dist/components/AutoCompleteFavorites/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './AutoCompleteFavorites';
2	+ export * from './AutoCompleteFavorites';

package/dist/components/AutoCompleteFavorites/index.js ADDED Viewed

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AutoCompleteFavorites_1 = require("./AutoCompleteFavorites");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AutoCompleteFavorites_1).default; } });

package/dist/components/index.d.ts CHANGED Viewed

@@ -145,4 +145,7 @@ export { default as ThreadLog } from './ThreadLog';
 export * from './ThreadLog';
 export { default as UtilAutoComplete } from './UtilAutoComplete';
-export * from './UtilAutoComplete';
+export * from './UtilAutoComplete';
+export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
+export * from './AutoCompleteFavorites';

package/dist/components/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
+exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
 var Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 __exportStar(require("./Alert"), exports);
@@ -160,3 +160,6 @@ __exportStar(require("./ThreadLog"), exports);
 var UtilAutoComplete_1 = require("./UtilAutoComplete");
 Object.defineProperty(exports, "UtilAutoComplete", { enumerable: true, get: function () { return __importDefault(UtilAutoComplete_1).default; } });
 __exportStar(require("./UtilAutoComplete"), exports);
+var AutoCompleteFavorites_1 = require("./AutoCompleteFavorites");
+Object.defineProperty(exports, "AutoCompleteFavorites", { enumerable: true, get: function () { return __importDefault(AutoCompleteFavorites_1).default; } });
+__exportStar(require("./AutoCompleteFavorites"), exports);

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts ADDED Viewed

@@ -0,0 +1,89 @@
+import { TextFieldProps } from '@material-ui/core';
+import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
+import * as React from 'react';
+export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
+  /**
+   * Valor do campo
+   */
+  value?: Array<number|string> | object,
+  /**
+   * Props repassados ao componente Textfield
+   */
+  textFieldProps?: TextFieldProps,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param event — The event source of the callback.
+   *
+   * @param value — The new value of the component.
+   *
+   * @param reason — One of "create-option", "select-option", "remove-option", "blur", "clear" ou "only-one-left".
+   */
+  onChange?: ((event: React.ChangeEvent<{}>, value: any, reason: 'create-option' | 'select-option' | 'remove-option' | 'blur' | 'clear' | 'only-one-left', details?: AutocompleteChangeDetails<any> | undefined) => void) | undefined,
+  /**
+   * Formata o valor que aparece na listagem
+   *
+   * @param option - Opção sendo testada ou selecionada
+   *
+   * @param lista - Lista com todas as opções
+   */
+  getOptionLabel?: ((option: Array<any>, lista: Array<Array<any>>) => string),
+  /**
+   * Utiliza um pgCode diferente do padrão
+   */
+  pgCode?: string,
+  /**
+   * Objeto de busca personalizado
+   */
+  busca?: string,
+  /**
+   * Objeto de resposta personalizado
+   */
+  resposta?: string,
+  /**
+   * Action personalizada
+   */
+  action?: string,
+  /**
+   * Label do campo
+   */
+  label?: string,
+  /**
+   * Parametros utilizados no metodo de busca
+   */
+  searchParams?: object,
+  /**
+   * Define a cor do loading
+   */
+  loadingColor?: string,
+  /**
+    * Parametro que define se terá paginação
+    */
+  favoritePage?: boolean,
+  /**
+    * Array contendo nome do grupo
+    */
+  groupName?: Array<string>,
+  /**
+    * Array contendo a cor do titulo no grupo
+    */
+  groupTitleColor?: Array<string>,
+  /**
+    * Array contendo o backgroundColor do header no grupo
+    */
+  groupHeaderColor?: Array<string>,
+  /**
+   * Função para filtrar a lista de opções
+   *
+   * @param valor - Valor setado no componente
+   * @param item - Item a ser testado contra o valor
+   *
+   * @returns {boolean} Retorna true se item de ser removido da lista
+   */
+  filterFunction?: (valor: any, item: any) => boolean,
+}
+declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
+export default AutoCompleteFavorites;

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { serverAction, setError } from '../../utils/api';
-import { Chip, CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
+import { CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
 import { Autocomplete } from '@material-ui/lab';
 import clsx from 'clsx';
 import { isObject, isString } from 'lodash';
@@ -89,16 +89,16 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
-const CustomTooltip = withStyles((theme) => ({
+export const CustomTooltip = withStyles((theme) => ({
   tooltip: theme.palette.type === 'light' ? {
     fontSize: 15,
     fontWeight: 400,
-    color: 'rgb(255, 255, 255)',
+    color: '#FFF',
     backgroundColor: '#333333e3',
   } : {
     fontSize: 15,
     fontWeight: 400,
-    color: 'rgb(0, 0, 0)',
+    color: '#000',
     backgroundColor: '#fbfbfbd1',
   },
   arrow: {
@@ -106,116 +106,9 @@ const CustomTooltip = withStyles((theme) => ({
   }
 }))(Tooltip);
-const ListboxFavorites = forwardRef((props, ref) => {
-  const classes = useStyles();
-  const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
-  const { pageNumber, favoritosLength, direction, slide } = dados;
-  function retornaInicio() {
-    switch (pageNumber) {
-      case 1:
-        return 0;
-      case 2:
-        return 7;
-      case 3:
-        return 14;
-      default: return;
-    }
-  }
-  function retornaFim() {
-    switch (pageNumber) {
-      case 1:
-        return 7;
-      case 2:
-        return 14;
-      case 3:
-        return favoritosLength;
-      default: return;
-    }
-  }
-  function retornaArray(sectionIndex, section) {
-    if (sectionIndex === 0 && favoritePage && favoritosLength > 7) return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
-    return section.props.children[1].props.children;
-  }
-  function retornaEstrutura(sectionIndex, item) {
-    if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
-      return (
-        <Slide in={slide} direction={direction}>
-          <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
-            <ListItem {...item.props} key={item.key} className={classes.listItem}>
-              <ListItemText primary={item.props.children} className={classes.listItemText} />
-            </ListItem>
-          </CustomTooltip>
-        </Slide>
-      );
-    } return (
-      <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
-        <ListItem {...item.props} key={item.key} className={classes.listItem}>
-          <ListItemText primary={item.props.children} className={classes.listItemText} />
-        </ListItem>
-      </CustomTooltip>
-    );
-  }
-  function buttonClick(evento, value) {
-    evento.preventDefault();
-    evento.stopPropagation();
-    if (value !== pageNumber) {
-      verificaSaidaSlide(value);
-      setDados(v => ({ ...v, slide: false }));
-      setTimeout(() => {
-        setDados(v => ({ ...v, pageNumber: value, direction: retornaDirection(value) }));
-        setTimeout(() => setDados(v => ({ ...v, slide: true })), 100);
-      }, 200);
-    }
-  }
-  function verificaSaidaSlide(value) {
-    let direction = '';
-    if ((value === 2 || value === 3) && pageNumber === 1) direction = 'right';
-    else if (value === 3 && pageNumber === 2) direction = 'right';
-    else if (value === 1 && pageNumber === 2) direction = 'left';
-    direction && setDados(v => ({ ...v, direction: direction }));
-  }
-  function retornaDirection(value) {
-    if (value < pageNumber) return 'right';
-    return 'left';
-  }
-  return children.map((section, sectionIndex) => (
-    <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
-      <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
-        {section.props.children[0].props.children}
-        <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
-          <div className={classes.divButton}>
-            <div className={classes.areaButton}>
-              <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
-            </div>
-            <div className={classes.areaButton}>
-              <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
-            </div>
-            {favoritosLength > 14 &&
-              <>
-                <div className={classes.areaButton}>
-                  <div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
-                </div>
-              </>
-            }
-          </div>
-        </Fade>
-      </ListSubheader>
-      {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
-    </ul>
-  ));
-});
 const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
+  const classes = useStyles();
   const [dados, setDados] = useState({
     lista: [],
     slide: true,
@@ -226,16 +119,113 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState('');
-  const buscar = useCallback(async valor => {
-    setLoading(true);
-    const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
-    if (res[resposta || 'result']?.length > 1) carimbaLista(res[resposta || 'result']);
-    else if (res[resposta || 'result']) setDados(v => ({ ...v, lista: res[resposta || 'result'] || [] }));
-    else setError('Erro ao tentar buscar dados.');
-    setLoading(false);
-  }, [inputValue, searchParams]);
+  const ListboxFavorites = forwardRef((props, ref) => {
+    const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
+    const { pageNumber, favoritosLength, direction, slide } = dados;
+    function retornaInicio() {
+      switch (pageNumber) {
+        case 1:
+          return 0;
+        case 2:
+          return 7;
+        case 3:
+          return 14;
+        default: return;
+      }
+    }
+    function retornaFim() {
+      switch (pageNumber) {
+        case 1:
+          return 7;
+        case 2:
+          return 14;
+        case 3:
+          return favoritosLength;
+        default: return;
+      }
+    }
+    function retornaArray(sectionIndex, section) {
+      if (sectionIndex === 0 && favoritePage && favoritosLength > 7) return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
+      return section.props.children[1].props.children;
+    }
+    function retornaEstrutura(sectionIndex, item) {
+      if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
+        return (
+          <Slide in={slide} direction={direction}>
+            <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
+              <ListItem {...item.props} key={item.key} className={classes.listItem}>
+                <ListItemText primary={item.props.children} className={classes.listItemText} />
+              </ListItem>
+            </CustomTooltip>
+          </Slide>
+        );
+      } return (
+        <CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
+          <ListItem {...item.props} key={item.key} className={classes.listItem}>
+            <ListItemText primary={item.props.children} className={classes.listItemText} />
+          </ListItem>
+        </CustomTooltip>
+      );
+    }
+    function buttonClick(evento, value) {
+      evento.preventDefault();
+      evento.stopPropagation();
+      if (value !== pageNumber) {
+        verificaSaidaSlide(value);
+        setDados(v => ({ ...v, slide: false }));
+        setTimeout(() => {
+          setDados(v => ({ ...v, pageNumber: value, direction: retornaDirection(value) }));
+          setTimeout(() => setDados(v => ({ ...v, slide: true })), 100);
+        }, 200);
+      }
+    }
+    function verificaSaidaSlide(value) {
+      let direction = '';
+      if ((value === 2 || value === 3) && pageNumber === 1) direction = 'right';
+      else if (value === 3 && pageNumber === 2) direction = 'right';
+      else if (value === 1 && pageNumber === 2) direction = 'left';
+      direction && setDados(v => ({ ...v, direction: direction }));
+    }
+    function retornaDirection(value) {
+      if (value < pageNumber) return 'right';
+      return 'left';
+    }
+    return children.map((section, sectionIndex) => (
+      <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
+        <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
+          {section.props.children[0].props.children}
+          <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
+            <div className={classes.divButton}>
+              <div className={classes.areaButton}>
+                <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
+              </div>
+              <div className={classes.areaButton}>
+                <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
+              </div>
+              {favoritosLength > 14 &&
+                <React.Fragment>
+                  <div className={classes.areaButton}>
+                    <div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
+                  </div>
+                </React.Fragment>
+              }
+            </div>
+          </Fade>
+        </ListSubheader>
+        {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
+      </ul>
+    ));
+  });
-  function carimbaLista(lista) {
+  async function carimbaLista(lista) {
     let completo = [];
     lista.map((arr, index) => {
       index === 0 && favoritePage && setDados(v => ({ ...v, favoritosLength: arr.length }));
@@ -249,25 +239,34 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
     setDados(v => ({ ...v, lista: completo }));
   }
+  const buscar = useCallback(async valor => {
+    setLoading(true);
+    const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
+    if (res[resposta || 'result']?.length > 1) await carimbaLista(res[resposta || 'result']);
+    else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
+    else setError('Erro ao tentar buscar dados.');
+    setLoading(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue, searchParams]);
   useEffect(() => buscar(), [inputValue, buscar]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => isString(value) && buscar(value), []);
   return (
     <Autocomplete
+      {...props}
+      {...{ value, onChange }}
+      options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
+      getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
+      noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
+      onInputChange={e => setInputValue(e?.target?.value || '')}
+      getOptionSelected={(o, v) => o[0] === v}
       autoComplete
       autoHighlight
       openText='Abrir'
       clearText='Limpar'
       filterSelectedOptions
-      onInputChange={e => setInputValue(e?.target?.value || '')}
-      options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
-      getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
-      getOptionSelected={(o, v) => o[0] === v}
-      renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <Chip variant='outlined' size='small' label={option} {...getTagProps({ index })} />
-        ))
-      }
       renderInput={params => (
         <TextField
           margin='dense'
@@ -279,20 +278,18 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
             ...textFieldProps.InputProps,
             ...params.InputProps,
             endAdornment: (
-              <>
+              <React.Fragment>
                 {params.InputProps.endAdornment}
                 <Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
-              </>
+              </React.Fragment>
             )
           }}
         />
       )}
-      {...props}
-      {...{ value, onChange }}
       ListboxComponent={ListboxFavorites}
       ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
     />
   );
 };
-export default forwardRef(AutoCompleteFavorites);
+export default AutoCompleteFavorites;

package/lib/components/AutoCompleteFavorites/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './AutoCompleteFavorites';
2	+ export * from './AutoCompleteFavorites';

package/lib/components/AutoCompleteFavorites/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AutoCompleteFavorites';

package/lib/components/index.d.ts CHANGED Viewed

@@ -145,4 +145,7 @@ export { default as ThreadLog } from './ThreadLog';
 export * from './ThreadLog';
 export { default as UtilAutoComplete } from './UtilAutoComplete';
-export * from './UtilAutoComplete';
+export * from './UtilAutoComplete';
+export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
+export * from './AutoCompleteFavorites';

package/lib/components/index.js CHANGED Viewed

@@ -143,4 +143,7 @@ export { default as ThreadLog } from './ThreadLog';
 export * from './ThreadLog';
 export { default as UtilAutoComplete } from './UtilAutoComplete';
-export * from './UtilAutoComplete';
+export * from './UtilAutoComplete';
+export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
+export * from './AutoCompleteFavorites';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.136",
+  "version": "1.2.140",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",