argous 1.2.148 → 1.2.151

package/dist/components/ArgousComplexTable/ArgousComplexTable.js

@@ -165,13 +165,13 @@ var initialState = function (defaultRowsPerPage) { return ({
     loading: false
 }); };
 var ArgousComplexTable = react_1.forwardRef(function (_a, ref) {
-    var _b = _a.ToolbarComponent, ToolbarComponent = _b === void 0 ? __1.ArgousComplexTableToolbar : _b, _c = _a.HeadComponent, HeadComponent = _c === void 0 ? __1.ArgousComplexTableHead : _c, _d = _a.BodyComponent, BodyComponent = _d === void 0 ? __1.ArgousComplexTableBody : _d, _e = _a.PaginationComponent, PaginationComponent = _e === void 0 ? __1.ArgousComplexPagination : _e, _f = _a.FooterComponent, FooterComponent = _f === void 0 ? undefined : _f, footerProps = _a.footerProps, dados = _a.dados, _g = _a.head, head = _g === void 0 ? [] : _g, _h = _a.line, line = _h === void 0 ? function (i) { return i; } : _h, actions = _a.actions, title = _a.title, _j = _a.defaultRowsPerPage, defaultRowsPerPage = _j === void 0 ? 10 : _j, _k = _a.rowsPerPageOptions, rowsPerPageOptions = _k === void 0 ? [10, 25, 50] : _k, checkEnabled = _a.enableCheck, disableCheckIf = _a.disableCheckIf, showCount = _a.showCount, lineStyle = _a.lineStyle, _l = _a.lineClass, lineClass = _l === void 0 ? function () { return undefined; } : _l, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, _m = _a.children, children = _m === void 0 ? undefined : _m, style = _a.style, className = _a.className, columnStyles = _a.columnStyles, headerColumnStyles = _a.headerColumnStyles, columnOptions = _a.columnOptions, disableFilter = _a.disableFilter, _o = _a.filterLabel, filterLabel = _o === void 0 ? 'Filtro' : _o, _p = _a.indexToSelect, indexToSelect = _p === void 0 ? 0 : _p, _q = _a.disableSorting, disableSorting = _q === void 0 ? [] : _q, _r = _a.size, size = _r === void 0 ? 'small' : _r, onOpen = _a.onOpen, lineTitle = _a.lineTitle, onClose = _a.onClose, method = _a.method, methodPrms = _a.methodPrms, _s = _a.methodResultList, methodResultList = _s === void 0 ? 'lista' : _s, onMethodResponse = _a.onMethodResponse, field = _a.field, fixedToolbar = _a.fixedToolbar, onSelect = _a.onSelect, customKey = _a.customKey, _t = _a.columnProps, columnProps = _t === void 0 ? function () { return ''; } : _t, _u = _a.rowProps, rowProps = _u === void 0 ? function () { return ''; } : _u, _v = _a.savedState, savedState = _v === void 0 ? {} : _v, containerProps = _a.containerProps, _w = _a.onClickAway, onClickAway = _w === void 0 ? function () { return undefined; } : _w, enableCheckIfSelected = _a.enableCheckIfSelected, enableDrag = _a.enableDrag, onDrop = _a.onDrop, tableProps = _a.tableProps, toolbarProps = _a.toolbarProps;
+    var _b = _a.ToolbarComponent, ToolbarComponent = _b === void 0 ? __1.ArgousComplexTableToolbar : _b, _c = _a.HeadComponent, HeadComponent = _c === void 0 ? __1.ArgousComplexTableHead : _c, _d = _a.BodyComponent, BodyComponent = _d === void 0 ? __1.ArgousComplexTableBody : _d, _e = _a.PaginationComponent, PaginationComponent = _e === void 0 ? __1.ArgousComplexPagination : _e, _f = _a.paginationControl, paginationControl = _f === void 0 ? {} : _f, _g = _a.FooterComponent, FooterComponent = _g === void 0 ? undefined : _g, footerProps = _a.footerProps, dados = _a.dados, _h = _a.head, head = _h === void 0 ? [] : _h, _j = _a.line, line = _j === void 0 ? function (i) { return i; } : _j, actions = _a.actions, title = _a.title, _k = _a.defaultRowsPerPage, defaultRowsPerPage = _k === void 0 ? 10 : _k, _l = _a.rowsPerPageOptions, rowsPerPageOptions = _l === void 0 ? [10, 25, 50] : _l, checkEnabled = _a.enableCheck, disableCheckIf = _a.disableCheckIf, showCount = _a.showCount, lineStyle = _a.lineStyle, _m = _a.lineClass, lineClass = _m === void 0 ? function () { return undefined; } : _m, onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, _o = _a.children, children = _o === void 0 ? undefined : _o, style = _a.style, className = _a.className, columnStyles = _a.columnStyles, headerColumnStyles = _a.headerColumnStyles, columnOptions = _a.columnOptions, disableFilter = _a.disableFilter, _p = _a.filterLabel, filterLabel = _p === void 0 ? 'Filtro' : _p, _q = _a.indexToSelect, indexToSelect = _q === void 0 ? 0 : _q, _r = _a.disableSorting, disableSorting = _r === void 0 ? [] : _r, _s = _a.size, size = _s === void 0 ? 'small' : _s, onOpen = _a.onOpen, lineTitle = _a.lineTitle, onClose = _a.onClose, method = _a.method, methodPrms = _a.methodPrms, _t = _a.methodResultList, methodResultList = _t === void 0 ? 'lista' : _t, onMethodResponse = _a.onMethodResponse, field = _a.field, fixedToolbar = _a.fixedToolbar, onSelect = _a.onSelect, customKey = _a.customKey, _u = _a.columnProps, columnProps = _u === void 0 ? function () { return ''; } : _u, _v = _a.rowProps, rowProps = _v === void 0 ? function () { return ''; } : _v, _w = _a.savedState, savedState = _w === void 0 ? {} : _w, containerProps = _a.containerProps, _x = _a.onClickAway, onClickAway = _x === void 0 ? function () { return undefined; } : _x, enableCheckIfSelected = _a.enableCheckIfSelected, enableDrag = _a.enableDrag, onDrop = _a.onDrop, tableProps = _a.tableProps, toolbarProps = _a.toolbarProps;
     var classes = useStyles();
-    var _x = react_1.useReducer(reducer, initialState(defaultRowsPerPage)), state = _x[0], dispatch = _x[1];
+    var _y = react_1.useReducer(reducer, initialState(defaultRowsPerPage)), state = _y[0], dispatch = _y[1];
     var memoState = react_1.useMemo(function () { return (__assign(__assign({}, state), { dispatch: dispatch })); }, [state, dispatch]);
     var selected = memoState.selected, page = memoState.page, rowsPerPage = memoState.rowsPerPage, order = memoState.order, orderBy = memoState.orderBy, filter = memoState.filter, open = memoState.open;
-    var _y = react_1.useState(dados /*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []), lista = _y[0], setLista = _y[1];
-    var _z = react_1.useState({ qtRegs: defaultRowsPerPage, pgAtl: 1 }), ctrlPgn = _z[0], setCtrlPgn = _z[1];
+    var _z = react_1.useState(dados /*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []), lista = _z[0], setLista = _z[1];
+    var _0 = react_1.useState(__assign(__assign({}, paginationControl), { qtRegs: defaultRowsPerPage, pgAtl: 1 })), ctrlPgn = _0[0], setCtrlPgn = _0[1];
     var qtRegs = ctrlPgn.qtRegs, pgAtl = ctrlPgn.pgAtl, ordCols = ctrlPgn.ordCols;
     var enableCheck = checkEnabled || (enableCheckIfSelected && !!selected.length);
     react_1.useEffect(function () {

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,
@@ -284,6 +293,20 @@ 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 interval = react_1.useRef(null);
+    var _g = react_1.useState(1), seconds = _g[0], setSeconds = _g[1];
+    var startCounter = function () { return interval.current = setInterval(function () { return setSeconds(1); }, 1000); };
+    var stopCounter = function () {
+        clearInterval(interval.current);
+        setSeconds(0);
+    };
+    var setInput = function (value) {
+        if (loading)
+            return;
+        stopCounter();
+        setInputValue(value);
+        autoSearch && startCounter();
+    };
     function carimbaLista(lista) {
         return __awaiter(this, void 0, void 0, function () {
             var completo;
@@ -306,6 +329,7 @@ var AutoCompleteFavorites = function (_a) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
+                    stopCounter();
                     setLoading(true);
                     return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
                 case 1:
@@ -327,12 +351,14 @@ var AutoCompleteFavorites = function (_a) {
             }
         });
     }); }, [inputValue, searchParams]);
-    react_1.useEffect(function () { return buscar(); }, [inputValue, 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 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,
+    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/ArgousComplexTable/ArgousComplexTable.js

@@ -125,6 +125,7 @@ const ArgousComplexTable = forwardRef(({
   HeadComponent = ArgousComplexTableHead,
   BodyComponent = ArgousComplexTableBody,
   PaginationComponent = ArgousComplexPagination,
+  paginationControl = {},
   FooterComponent = undefined,
   footerProps,
   dados, 
@@ -180,7 +181,7 @@ const ArgousComplexTable = forwardRef(({
   const { selected, page, rowsPerPage, order, orderBy, filter, open } = memoState;
 
   const [lista, setLista] = useState(dados/*.map(linha => isArray(linha) ? linha : Object.values(linha))*/ || []);
-  const [ctrlPgn, setCtrlPgn] = useState({ qtRegs: defaultRowsPerPage, pgAtl: 1 });
+  const [ctrlPgn, setCtrlPgn] = useState({ ...paginationControl, qtRegs: defaultRowsPerPage, pgAtl: 1 });
   const { qtRegs, pgAtl, ordCols } = ctrlPgn;
 
   const enableCheck = checkEnabled || (enableCheckIfSelected && !!selected.length);

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, useState } from 'react';
+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,
@@ -226,6 +235,22 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState('');
 
+  const interval = useRef(null);
+  const [seconds, setSeconds] = useState(1);
+
+  const startCounter = () => interval.current = setInterval(() => setSeconds(1), 1000);
+  const stopCounter = () => {
+    clearInterval(interval.current);
+    setSeconds(0);
+  };
+
+  const setInput = value => {
+    if (loading) return;
+    stopCounter();
+    setInputValue(value);
+    autoSearch && startCounter();
+  };
+
   async function carimbaLista(lista) {
     let completo = [];
     lista.map((arr, index) => {
@@ -237,6 +262,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   }
 
   const buscar = useCallback(async valor => {
+    stopCounter();
     setLoading(true);
     const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
     if (res[resposta || 'result']?.length > 1) await carimbaLista(res[resposta || 'result']);
@@ -246,7 +272,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, searchParams]);
 
-  useEffect(() => buscar(), [inputValue, buscar]);
+  useEffect(() => autoSearch && seconds === 1 && buscar(), [autoSearch, seconds, buscar]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => isString(value) && buscar(value), []);
 
@@ -254,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 => setInputValue(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'
@@ -271,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,
@@ -278,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.148",
+  "version": "1.2.151",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",