argous 1.2.150 → 1.2.151

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -87,6 +87,7 @@ var lab_1 = require("@material-ui/lab");
 var clsx_1 = __importDefault(require("clsx"));
 var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
+var io_1 = require("react-icons/io");
 var useStyles = core_1.makeStyles(function (theme) { return ({
     subHeader: {
         display: 'flex',
@@ -168,6 +169,13 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
         '&::-webkit-scrollbar-thumb': {
             background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
         }
+    },
+    searchButton: {
+        color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
+        '&:hover': {
+            color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+            background: '#0000'
+        }
     }
 }); });
 exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
@@ -274,7 +282,8 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
     });
 });
 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 action = _a.action, busca = _a.busca, resposta = _a.resposta, autoSearch = _a.autoSearch, 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", "autoSearch", "label", "value", "pgCode", "favoritePage", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
+    var classes = useStyles();
     var _d = react_1.useState({
         lista: [],
         slide: true,
@@ -292,9 +301,11 @@ var AutoCompleteFavorites = function (_a) {
         setSeconds(0);
     };
     var setInput = function (value) {
+        if (loading)
+            return;
         stopCounter();
         setInputValue(value);
-        startCounter();
+        autoSearch && startCounter();
     };
     function carimbaLista(lista) {
         return __awaiter(this, void 0, void 0, function () {
@@ -340,12 +351,14 @@ var AutoCompleteFavorites = function (_a) {
             }
         });
     }); }, [inputValue, searchParams]);
-    react_1.useEffect(function () { return seconds === 1 && buscar(); }, [seconds, buscar]);
+    react_1.useEffect(function () { return autoSearch && seconds === 1 && buscar(); }, [autoSearch, seconds, 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({}, 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 setInput(((_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,
+    return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value, onChange: onChange }, { autoComplete: true, autoHighlight: true, openText: 'Abrir', clearText: 'Limpar', filterSelectedOptions: true, onInputChange: function (e) { var _a; return setInput(((_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; }, 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', 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, renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label }, params, textFieldProps, { onKeyUp: function (e) { return ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar(); }, inputProps: __assign(__assign({}, params.inputProps), { onKeyDown: function (e) { return (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation(); } }), 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 })))) }) }))); }, 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 })),
+                    !autoSearch && react_1.default.createElement(core_1.IconButton, { size: 'small', onClick: function (e) { return buscar(); }, className: classes.searchButton },
+                        react_1.default.createElement(io_1.IoIosSearch, { size: 20 })))) }) }))); }, ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor } })));
 };
 exports.default = AutoCompleteFavorites;

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -1,9 +1,10 @@
 import { serverAction, setError } from '../../utils/api';
-import { CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
+import { CircularProgress, Fade, IconButton, 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';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { IoIosSearch } from 'react-icons/io';
 
 const useStyles = makeStyles((theme) => ({
   subHeader: {
@@ -86,6 +87,13 @@ const useStyles = makeStyles((theme) => ({
     '&::-webkit-scrollbar-thumb': {
       background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
     }
+  },
+  searchButton: {
+    color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
+    '&:hover': {
+      color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
+      background: '#0000'
+    }
   }
 }));
 
@@ -214,8 +222,9 @@ const ListboxFavorites = forwardRef((props, ref) => {
   ));
 });
 
-const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
+const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, 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,
@@ -236,9 +245,10 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   };
 
   const setInput = value => {
+    if (loading) return;
     stopCounter();
     setInputValue(value);
-    startCounter();
+    autoSearch && startCounter();
   };
 
   async function carimbaLista(lista) {
@@ -262,7 +272,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, searchParams]);
 
-  useEffect(() => seconds === 1 && buscar(), [seconds, buscar]);
+  useEffect(() => autoSearch && seconds === 1 && buscar(), [autoSearch, seconds, buscar]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => isString(value) && buscar(value), []);
 
@@ -270,16 +280,16 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
     <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 => setInput(e?.target?.value || '')}
-      getOptionSelected={(o, v) => o[0] === v}
       autoComplete
       autoHighlight
       openText='Abrir'
       clearText='Limpar'
       filterSelectedOptions        
+      onInputChange={e => setInput(e?.target?.value || '')}
+      getOptionSelected={(o, v) => o[0] === v}
+      getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
+      noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
+      options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
       renderInput={params => (
         <TextField
           margin='dense'
@@ -287,6 +297,11 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
           label={label}
           {...params}
           {...textFieldProps}
+          onKeyUp={e => ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar()}
+          inputProps={{
+            ...params.inputProps,
+            onKeyDown: e => (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation()
+          }}
           InputProps={{
             ...textFieldProps.InputProps,
             ...params.InputProps,
@@ -294,6 +309,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
               <React.Fragment>
                 {params.InputProps.endAdornment}
                 <Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
+                {!autoSearch && <IconButton size='small' onClick={e => buscar()} className={classes.searchButton}><IoIosSearch size={20} /></IconButton>}
               </React.Fragment>
             )
           }}

package/package.json

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