argous 1.2.171 → 1.2.173

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

@@ -81,6 +81,10 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
     * Array contendo o backgroundColor do header no grupo
     */
   groupHeaderColor?: Array<string>,
+  /**
+   * Prop que ativa a seleção automática da primeira opção da pesquisa
+   */
+  autoSelectFirstOption?: boolean,
   /**
    * Função para filtrar a lista de opções
    * 

package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -298,7 +298,7 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
 });
 var AutoCompleteFavorites = function (_a) {
     var _b;
-    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, _c = _a.group, group = _c === void 0 ? false : _c, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, _d = _a.onChange, onChange = _d === void 0 ? function (e) { return e; } : _d, _e = _a.textFieldProps, textFieldProps = _e === void 0 ? {} : _e, searchParams = _a.searchParams, props = __rest(_a, ["action", "busca", "resposta", "autoSearch", "label", "value", "pgCode", "favoritePage", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "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, _c = _a.group, group = _c === void 0 ? false : _c, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, searchParams = _a.searchParams, autoSelectFirstOption = _a.autoSelectFirstOption, _d = _a.onChange, onChange = _d === void 0 ? function (e) { return e; } : _d, _e = _a.textFieldProps, textFieldProps = _e === void 0 ? {} : _e, props = __rest(_a, ["action", "busca", "resposta", "autoSearch", "label", "value", "pgCode", "favoritePage", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "filterFunction", "getOptionLabel", "searchParams", "autoSelectFirstOption", "onChange", "textFieldProps"]);
     var classes = useStyles({ widthListBox: widthListBox });
     var _f = react_1.useState({
         lista: [],
@@ -370,6 +370,8 @@ var AutoCompleteFavorites = function (_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
     react_1.useEffect(function () { var _a; return (value !== ((_a = dados.cursor) === null || _a === void 0 ? void 0 : _a.linha)) && setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: '', page: '' } })); }); }, [value, (_b = dados.cursor) === null || _b === void 0 ? void 0 : _b.linha]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    react_1.useEffect(function () { var _a; return autoSelectFirstOption && !!inputValue.length && onChange(undefined, ((_a = dados === null || dados === void 0 ? void 0 : dados.lista) === null || _a === void 0 ? void 0 : _a[0]) || null); }, [dados.lista]);
     var keyDown = function (e) {
         ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar();
         (e.key === 'ArrowDown' || e.key === 'ArrowUp') && selectListboxItem(e.key);
@@ -451,7 +453,7 @@ var AutoCompleteFavorites = function (_a) {
             lastScrollTop = elListBox.scrollTop;
         linha && setDados(function (v) { return (__assign(__assign({}, v), { cursor: { index: indexCapture, page: v.pageNumber, linha: linha, elTop: elTop, elTotalHeight: elTotalHeight, lastScrollTop: lastScrollTop } })); });
         if (linha !== value)
-            invokeOnChange('', linha);
+            onChange(undefined, linha);
     }
     var scrollToSelected = react_1.useCallback(function () {
         var _a, _b, _c, _d;
@@ -467,8 +469,7 @@ var AutoCompleteFavorites = function (_a) {
         }
     }, [dados]);
     react_1.useEffect(function () { var _a; return ((_a = dados.lista) === null || _a === void 0 ? void 0 : _a.length) && setTimeout(function () { return scrollToSelected(); }, 0); }, [dados.lista, scrollToSelected]);
-    var invokeOnChange = onChange;
-    return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value }, { onChange: invokeOnChange, 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 keyUp(e); }, inputProps: __assign(__assign({}, params.inputProps), { onKeyDown: function (e) { return keyDown(e); } }), 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 keyUp(e); }, inputProps: __assign(__assign({}, params.inputProps), { onKeyDown: function (e) { return keyDown(e); } }), 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 })),

package/dist/components/UtilAutoComplete/UtilAutoComplete.d.ts

@@ -73,6 +73,10 @@ export interface UtilAutoCompleteProps extends Omit<AutocompleteProps<any, false
    * Parametros utilizados no metodo de busca
    */
   searchParams?: object,
+  /**
+   * Disponível para leitura apenas
+   */
+  readOnly?: boolean,
   /**
    * Função para filtrar a lista de opções
    * 

package/dist/components/UtilAutoComplete/UtilAutoComplete.js

@@ -147,9 +147,10 @@ var retornaType = function (type) {
     }
 };
 var UtilAutoComplete = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? '' : _b, label = _a.label, value = _a.value, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, _d = _a.onChange, onChange = _d === void 0 ? function (e) { return e; } : _d, excluidos = _a.excluidos, idEmpresa = _a.idEmpresa, cdEstado = _a.cdEstado, cdUnimed = _a.cdUnimed, getOptionLabel = _a.getOptionLabel, _e = _a.pgCode, pgCode = _e === void 0 ? 'BuscasHelper' : _e, action = _a.action, busca = _a.busca, resposta = _a.resposta, searchParams = _a.searchParams, filterFunction = _a.filterFunction, forceUpdate = _a.forceUpdate, props = __rest(_a, ["type", "label", "value", "textFieldProps", "onChange", "excluidos", "idEmpresa", "cdEstado", "cdUnimed", "getOptionLabel", "pgCode", "action", "busca", "resposta", "searchParams", "filterFunction", "forceUpdate"]);
-    var _f = react_1.useState([]), lista = _f[0], setLista = _f[1];
-    var _g = react_1.useState(''), inputValue = _g[0], setInputValue = _g[1];
+    var _b = _a.type, type = _b === void 0 ? '' : _b, label = _a.label, value = _a.value, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, _d = _a.onChange, onChange = _d === void 0 ? function (e) { return e; } : _d, excluidos = _a.excluidos, idEmpresa = _a.idEmpresa, cdEstado = _a.cdEstado, cdUnimed = _a.cdUnimed, getOptionLabel = _a.getOptionLabel, _e = _a.pgCode, pgCode = _e === void 0 ? 'BuscasHelper' : _e, action = _a.action, busca = _a.busca, resposta = _a.resposta, searchParams = _a.searchParams, filterFunction = _a.filterFunction, forceUpdate = _a.forceUpdate, readOnly = _a.readOnly, props = __rest(_a, ["type", "label", "value", "textFieldProps", "onChange", "excluidos", "idEmpresa", "cdEstado", "cdUnimed", "getOptionLabel", "pgCode", "action", "busca", "resposta", "searchParams", "filterFunction", "forceUpdate", "readOnly"]);
+    var _f = react_1.useState(false), open = _f[0], setOpen = _f[1];
+    var _g = react_1.useState([]), lista = _g[0], setLista = _g[1];
+    var _h = react_1.useState(''), inputValue = _h[0], setInputValue = _h[1];
     var buscar = react_1.useCallback(function (valor) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
         var _a;
@@ -167,12 +168,13 @@ var UtilAutoComplete = function (_a) {
     react_1.useEffect(function () {
         if (lodash_1.isString(value))
             buscar(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     react_1.useEffect(function () {
         // if (inputValue.length < 2) return;
         buscar();
     }, [inputValue, buscar]);
-    return (react_1.default.createElement(lab_1.Autocomplete, __assign({ options: lodash_1.isObject(value) ? lista.filter(function (v) { return filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]; }) : lista, getOptionSelected: function (o, v) { return o[0] === v; }, getOptionLabel: getOptionLabel ? (function (option) { return getOptionLabel(option, lista); }) : (function (option) { return retornaType(type).getLabel(option, lista); }), noOptionsText: inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado', clearText: 'Limpar', openText: 'Abrir', 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) || ''); }, filterSelectedOptions: true, autoComplete: true, autoHighlight: true }, { value: value, onChange: onChange }, props, { renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label || retornaType(type).label }, params, textFieldProps, { InputProps: __assign(__assign({}, textFieldProps.InputProps), params.InputProps) }))); } })));
+    return (react_1.default.createElement(lab_1.Autocomplete, __assign({ open: open, onOpen: function () { return !readOnly && setOpen(true); }, onClose: function () { return setOpen(false); }, disableClearable: readOnly, options: lodash_1.isObject(value) ? lista.filter(function (v) { return filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]; }) : lista, getOptionSelected: function (o, v) { return o[0] === v; }, getOptionLabel: getOptionLabel ? (function (option) { return getOptionLabel(option, lista); }) : (function (option) { return retornaType(type).getLabel(option, lista); }), noOptionsText: inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado', clearText: 'Limpar', openText: 'Abrir', 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) || ''); }, filterSelectedOptions: true, autoComplete: true, autoHighlight: true }, { value: value, onChange: onChange }, props, { renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ margin: 'dense', variant: 'outlined', label: label || retornaType(type).label }, params, textFieldProps, { InputProps: __assign(__assign({}, textFieldProps.InputProps), params.InputProps), inputProps: __assign(__assign(__assign({}, textFieldProps.inputProps), params.inputProps), { readOnly: readOnly }) }))); } })));
 };
 // UtilAutoComplete.propTypes = {
 //   type: PropTypes.oneOf(['beneficiarios', 'empresas', 'gruposUnimed', 'estados', 'cidades', 'unimeds', 'prestadores']).isRequired,

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

@@ -81,6 +81,10 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
     * Array contendo o backgroundColor do header no grupo
     */
   groupHeaderColor?: Array<string>,
+  /**
+   * Prop que ativa a seleção automática da primeira opção da pesquisa
+   */
+  autoSelectFirstOption?: boolean,
   /**
    * Função para filtrar a lista de opções
    * 

package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js

@@ -232,7 +232,29 @@ const ListboxFavorites = forwardRef((props, ref) => {
   </ul>;
 });
 
-const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, group = false, groupName, groupHeaderColor, groupTitleColor, loadingColor, widthListBox, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
+const AutoCompleteFavorites = ({ 
+  action, 
+  busca, 
+  resposta, 
+  autoSearch, 
+  label,
+  value,
+  pgCode,
+  favoritePage,
+  group = false,
+  groupName,
+  groupHeaderColor,
+  groupTitleColor,
+  loadingColor,
+  widthListBox,
+  filterFunction,
+  getOptionLabel,
+  searchParams,
+  autoSelectFirstOption,
+  onChange = e => e,
+  textFieldProps = {}, 
+  ...props 
+}) => {
   
   const classes = useStyles({ widthListBox });
   const [dados, setDados] = useState({
@@ -288,6 +310,9 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
 
   useEffect(() => (value !== dados.cursor?.linha) && setDados(v => ({ ...v, cursor: { index: '', page: '' } })), [value, dados.cursor?.linha]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => autoSelectFirstOption && !!inputValue.length && onChange(undefined, dados?.lista?.[0] || null), [dados.lista]);
+
   const keyDown = e => {
     ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar();
     (e.key === 'ArrowDown' || e.key === 'ArrowUp') && selectListboxItem(e.key);
@@ -362,7 +387,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
     if (elListBox) lastScrollTop = elListBox.scrollTop;
 
     linha && setDados(v => ({ ...v, cursor: { index: indexCapture, page: v.pageNumber, linha: linha, elTop: elTop, elTotalHeight: elTotalHeight, lastScrollTop: lastScrollTop } }));
-    if (linha !== value) invokeOnChange('', linha);
+    if (linha !== value) onChange(undefined, linha);
   }
 
   const scrollToSelected = useCallback(() => {
@@ -378,13 +403,10 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
   }, [dados]);
   useEffect(() => dados.lista?.length && setTimeout(() => scrollToSelected(), 0), [dados.lista, scrollToSelected]);
 
-  const invokeOnChange = onChange;
-
   return (
     <Autocomplete
       {...props}
-      {...{ value }}
-      onChange={invokeOnChange}
+      {...{ value, onChange }}
       autoComplete
       autoHighlight
       openText='Abrir'

package/lib/components/UtilAutoComplete/UtilAutoComplete.d.ts

@@ -73,6 +73,10 @@ export interface UtilAutoCompleteProps extends Omit<AutocompleteProps<any, false
    * Parametros utilizados no metodo de busca
    */
   searchParams?: object,
+  /**
+   * Disponível para leitura apenas
+   */
+  readOnly?: boolean,
   /**
    * Função para filtrar a lista de opções
    * 

package/lib/components/UtilAutoComplete/UtilAutoComplete.js

@@ -69,17 +69,20 @@ const retornaType = type => {
   }
 };
 
-const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChange = e => e, excluidos, idEmpresa, cdEstado, cdUnimed, getOptionLabel, pgCode = 'BuscasHelper', action, busca, resposta, searchParams, filterFunction, forceUpdate, ...props }) => {
+const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChange = e => e, excluidos, idEmpresa, cdEstado, cdUnimed, getOptionLabel, pgCode = 'BuscasHelper', action, busca, resposta, searchParams, filterFunction, forceUpdate, readOnly, ...props }) => {
+  const [open, setOpen] = useState(false);
   const [lista, setLista] = useState([]);
   const [inputValue, setInputValue] = useState('');
 
   const buscar = useCallback(async valor => {
     const res = await serverAction(action || retornaType(type).action, { [busca || retornaType(type)?.busca || 'value']: valor || inputValue, excluidos, idEmpresa, cdEstado, cdUnimed, ...searchParams }, true, pgCode);
     setLista(res[resposta || retornaType(type)?.res || 'result'] || []);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, type, searchParams]);
 
   useEffect(() => {
     if (isString(value)) buscar(value);    
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -89,6 +92,10 @@ const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChan
 
   return (
     <Autocomplete
+      open={open}
+      onOpen={() => !readOnly && setOpen(true)}
+      onClose={() => setOpen(false)}
+      disableClearable={readOnly}
       options={isObject(value) ? lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : lista}
       getOptionSelected={(o, v) => o[0] === v}
       getOptionLabel={getOptionLabel ? (option => getOptionLabel(option, lista)) : (option => retornaType(type).getLabel(option, lista)) }
@@ -109,6 +116,7 @@ const UtilAutoComplete = ({ type = '', label, value, textFieldProps = {}, onChan
           {...params}
           {...textFieldProps}
           InputProps={{ ...textFieldProps.InputProps, ...params.InputProps }}
+          inputProps={{ ...textFieldProps.inputProps, ...params.inputProps, readOnly }}
         />
       )}
     />

package/package.json

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