argous 1.2.150 → 1.2.153
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.
- package/dist/components/ArgousAvatar/ArgousAvatar.js +2 -2
- package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js +47 -23
- package/lib/components/ArgousAvatar/ArgousAvatar.js +2 -2
- package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js +64 -32
- package/package.json +1 -1
|
@@ -95,13 +95,13 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
|
95
95
|
},
|
|
96
96
|
}); });
|
|
97
97
|
var ArgousAvatar = react_1.default.forwardRef(function (_a, ref) {
|
|
98
|
-
var nome = _a.nome, src = _a.src, className = _a.className, idUsuario = _a.idUsuario, props = __rest(_a, ["nome", "src", "className", "idUsuario"]);
|
|
98
|
+
var nome = _a.nome, src = _a.src, className = _a.className, idUsuario = _a.idUsuario, forwardedBlockSearch = _a.forwardedBlockSearch, props = __rest(_a, ["nome", "src", "className", "idUsuario", "forwardedBlockSearch"]);
|
|
99
99
|
var classes = useStyles();
|
|
100
100
|
var cores = [classes.orange, classes.purple, classes.blue, classes.rosa, classes.cinza, classes.red, classes.amarelo, classes.marrom, classes.preto, classes.green];
|
|
101
101
|
var _b = react_1.useState(undefined), userImage = _b[0], setUserImage = _b[1];
|
|
102
102
|
react_1.useEffect(function () {
|
|
103
103
|
setUserImage(localStorage.getItem("imgUsuario-" + idUsuario) || '');
|
|
104
|
-
if (!idUsuario || userImage || localStorage.getItem("imgUsuario-" + idUsuario))
|
|
104
|
+
if (!idUsuario || userImage || localStorage.getItem("imgUsuario-" + idUsuario) || (forwardedBlockSearch === null || forwardedBlockSearch === void 0 ? void 0 : forwardedBlockSearch.return))
|
|
105
105
|
return;
|
|
106
106
|
api_1.fetchToArgous('aguserimage', { idUsuario: idUsuario })
|
|
107
107
|
.then(function (_a) {
|
|
@@ -87,6 +87,7 @@ var lab_1 = require("@material-ui/lab");
|
|
|
87
87
|
var clsx_1 = __importDefault(require("clsx"));
|
|
88
88
|
var lodash_1 = require("lodash");
|
|
89
89
|
var react_1 = __importStar(require("react"));
|
|
90
|
+
var io_1 = require("react-icons/io");
|
|
90
91
|
var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
91
92
|
subHeader: {
|
|
92
93
|
display: 'flex',
|
|
@@ -168,8 +169,24 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
|
168
169
|
'&::-webkit-scrollbar-thumb': {
|
|
169
170
|
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
|
170
171
|
}
|
|
172
|
+
},
|
|
173
|
+
searchButton: {
|
|
174
|
+
color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
|
|
175
|
+
'&:hover': {
|
|
176
|
+
color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
|
|
177
|
+
background: '#0000'
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
popper: {
|
|
181
|
+
zIndex: 1,
|
|
182
|
+
width: function (_a) {
|
|
183
|
+
var widthListBox = _a.widthListBox;
|
|
184
|
+
return widthListBox ? "" + widthListBox + (testWidth(widthListBox.toString()) ? 'px' : '') + " !important" : '';
|
|
185
|
+
},
|
|
171
186
|
}
|
|
172
187
|
}); });
|
|
188
|
+
var testWidth = function (value) { var _a; return ((_a = value.replace(/[0-9]/g, '')) === null || _a === void 0 ? void 0 : _a.length) ? false : true; };
|
|
189
|
+
var CustomPopper = function (props, classes) { return react_1.default.createElement(core_1.Popper, __assign({}, props, { className: classes.popper })); };
|
|
173
190
|
exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
174
191
|
tooltip: theme.palette.type === 'light' ? {
|
|
175
192
|
fontSize: 15,
|
|
@@ -188,7 +205,7 @@ exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
|
188
205
|
}); })(core_1.Tooltip);
|
|
189
206
|
var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
190
207
|
var classes = useStyles();
|
|
191
|
-
var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
|
|
208
|
+
var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, group = props.group, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
|
|
192
209
|
var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
|
|
193
210
|
function retornaInicio() {
|
|
194
211
|
switch (pageNumber) {
|
|
@@ -255,26 +272,29 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
|
255
272
|
return 'right';
|
|
256
273
|
return 'left';
|
|
257
274
|
}
|
|
258
|
-
return children.map(function (section, sectionIndex) {
|
|
275
|
+
return react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), children.map(function (section, sectionIndex) {
|
|
259
276
|
var _a, _b, _c;
|
|
260
|
-
return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
|
|
261
|
-
react_1.default.createElement(
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
react_1.default.createElement(
|
|
265
|
-
react_1.default.createElement("div", { className: classes.
|
|
266
|
-
react_1.default.createElement("div", {
|
|
267
|
-
|
|
268
|
-
react_1.default.createElement("div", {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
react_1.default.createElement(
|
|
272
|
-
react_1.default.createElement("div", {
|
|
273
|
-
|
|
274
|
-
|
|
277
|
+
return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), group ?
|
|
278
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
279
|
+
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] } },
|
|
280
|
+
section.props.children[0].props.children,
|
|
281
|
+
react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
|
|
282
|
+
react_1.default.createElement("div", { className: classes.divButton },
|
|
283
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
284
|
+
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")),
|
|
285
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
286
|
+
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")),
|
|
287
|
+
favoritosLength > 14 &&
|
|
288
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
289
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
290
|
+
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")))))),
|
|
291
|
+
retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); }))
|
|
292
|
+
: retornaEstrutura(sectionIndex, section)));
|
|
293
|
+
}));
|
|
275
294
|
});
|
|
276
295
|
var AutoCompleteFavorites = function (_a) {
|
|
277
|
-
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"]);
|
|
296
|
+
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, group = _a.group, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, 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", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
|
|
297
|
+
var classes = useStyles({ widthListBox: widthListBox });
|
|
278
298
|
var _d = react_1.useState({
|
|
279
299
|
lista: [],
|
|
280
300
|
slide: true,
|
|
@@ -292,9 +312,11 @@ var AutoCompleteFavorites = function (_a) {
|
|
|
292
312
|
setSeconds(0);
|
|
293
313
|
};
|
|
294
314
|
var setInput = function (value) {
|
|
315
|
+
if (loading)
|
|
316
|
+
return;
|
|
295
317
|
stopCounter();
|
|
296
318
|
setInputValue(value);
|
|
297
|
-
startCounter();
|
|
319
|
+
autoSearch && startCounter();
|
|
298
320
|
};
|
|
299
321
|
function carimbaLista(lista) {
|
|
300
322
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -323,7 +345,7 @@ var AutoCompleteFavorites = function (_a) {
|
|
|
323
345
|
return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
|
|
324
346
|
case 1:
|
|
325
347
|
res = _c.sent();
|
|
326
|
-
if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)) return [3 /*break*/, 3];
|
|
348
|
+
if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1 && group)) return [3 /*break*/, 3];
|
|
327
349
|
return [4 /*yield*/, carimbaLista(res[resposta || 'result'])];
|
|
328
350
|
case 2:
|
|
329
351
|
_c.sent();
|
|
@@ -340,12 +362,14 @@ var AutoCompleteFavorites = function (_a) {
|
|
|
340
362
|
}
|
|
341
363
|
});
|
|
342
364
|
}); }, [inputValue, searchParams]);
|
|
343
|
-
react_1.useEffect(function () { return seconds === 1 && buscar(); }, [seconds, buscar]);
|
|
365
|
+
react_1.useEffect(function () { return autoSearch && seconds === 1 && buscar(); }, [autoSearch, seconds, buscar]);
|
|
344
366
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
345
367
|
react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
|
|
346
|
-
return (react_1.default.createElement(lab_1.Autocomplete, __assign({}, props, { value: value, onChange: onChange }, {
|
|
368
|
+
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,
|
|
347
369
|
params.InputProps.endAdornment,
|
|
348
370
|
react_1.default.createElement(core_1.Fade, { in: loading },
|
|
349
|
-
react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 }))
|
|
371
|
+
react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })),
|
|
372
|
+
!autoSearch && react_1.default.createElement(core_1.IconButton, { size: 'small', onClick: function (e) { return buscar(); }, className: classes.searchButton },
|
|
373
|
+
react_1.default.createElement(io_1.IoIosSearch, { size: 20 })))) }) }))); }, ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, group: group, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor }, PopperComponent: function (props) { return CustomPopper(props, classes); } })));
|
|
350
374
|
};
|
|
351
375
|
exports.default = AutoCompleteFavorites;
|
|
@@ -50,14 +50,14 @@ const useStyles = makeStyles(theme => ({
|
|
|
50
50
|
},
|
|
51
51
|
}));
|
|
52
52
|
|
|
53
|
-
const ArgousAvatar = React.forwardRef(({ nome, src, className, idUsuario, ...props }, ref) => {
|
|
53
|
+
const ArgousAvatar = React.forwardRef(({ nome, src, className, idUsuario, forwardedBlockSearch, ...props }, ref) => {
|
|
54
54
|
const classes = useStyles();
|
|
55
55
|
const cores = [classes.orange, classes.purple, classes.blue, classes.rosa, classes.cinza, classes.red, classes.amarelo, classes.marrom, classes.preto, classes.green];
|
|
56
56
|
const [userImage, setUserImage] = useState(undefined);
|
|
57
57
|
|
|
58
58
|
useEffect(() => {
|
|
59
59
|
setUserImage(localStorage.getItem(`imgUsuario-${idUsuario}`) || '');
|
|
60
|
-
if (!idUsuario || userImage || localStorage.getItem(`imgUsuario-${idUsuario}`)) return;
|
|
60
|
+
if (!idUsuario || userImage || localStorage.getItem(`imgUsuario-${idUsuario}`) || forwardedBlockSearch?.return) return;
|
|
61
61
|
fetchToArgous('aguserimage', { idUsuario })
|
|
62
62
|
.then(({ userImage }) => {
|
|
63
63
|
if (userImage) {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { serverAction, setError } from '../../utils/api';
|
|
2
|
-
import { CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
|
|
2
|
+
import { CircularProgress, Fade, IconButton, ListItem, ListItemText, ListSubheader, makeStyles, Popper, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
|
|
3
3
|
import { Autocomplete } from '@material-ui/lab';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { isObject, isString } from 'lodash';
|
|
6
6
|
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
|
|
7
|
+
import { IoIosSearch } from 'react-icons/io';
|
|
7
8
|
|
|
8
9
|
const useStyles = makeStyles((theme) => ({
|
|
9
10
|
subHeader: {
|
|
@@ -86,9 +87,24 @@ const useStyles = makeStyles((theme) => ({
|
|
|
86
87
|
'&::-webkit-scrollbar-thumb': {
|
|
87
88
|
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
|
88
89
|
}
|
|
90
|
+
},
|
|
91
|
+
searchButton: {
|
|
92
|
+
color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)',
|
|
93
|
+
'&:hover': {
|
|
94
|
+
color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
|
|
95
|
+
background: '#0000'
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
popper: {
|
|
99
|
+
zIndex: 1,
|
|
100
|
+
width: ({ widthListBox }) => widthListBox ? `${widthListBox}${testWidth(widthListBox.toString()) ? 'px' : ''} !important` : '',
|
|
89
101
|
}
|
|
90
102
|
}));
|
|
91
103
|
|
|
104
|
+
const testWidth = value => value.replace(/[0-9]/g, '')?.length ? false : true;
|
|
105
|
+
|
|
106
|
+
const CustomPopper = (props, classes) => <Popper {...props} className={classes.popper} />;
|
|
107
|
+
|
|
92
108
|
export const CustomTooltip = withStyles((theme) => ({
|
|
93
109
|
tooltip: theme.palette.type === 'light' ? {
|
|
94
110
|
fontSize: 15,
|
|
@@ -109,7 +125,7 @@ export const CustomTooltip = withStyles((theme) => ({
|
|
|
109
125
|
const ListboxFavorites = forwardRef((props, ref) => {
|
|
110
126
|
|
|
111
127
|
const classes = useStyles();
|
|
112
|
-
const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
|
|
128
|
+
const { children, favoritePage, dados, setDados, group, groupHeaderColor, groupTitleColor } = props;
|
|
113
129
|
const { pageNumber, favoritosLength, direction, slide } = dados;
|
|
114
130
|
|
|
115
131
|
function retornaInicio() {
|
|
@@ -187,35 +203,43 @@ const ListboxFavorites = forwardRef((props, ref) => {
|
|
|
187
203
|
return 'left';
|
|
188
204
|
}
|
|
189
205
|
|
|
190
|
-
return
|
|
191
|
-
|
|
192
|
-
<
|
|
193
|
-
{
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
206
|
+
return <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
|
|
207
|
+
{children.map((section, sectionIndex) => (
|
|
208
|
+
<ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
|
|
209
|
+
{group ?
|
|
210
|
+
<React.Fragment>
|
|
211
|
+
<ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
|
|
212
|
+
{section.props.children[0].props.children}
|
|
213
|
+
<Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
|
|
214
|
+
<div className={classes.divButton}>
|
|
215
|
+
<div className={classes.areaButton}>
|
|
216
|
+
<div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div className={classes.areaButton}>
|
|
219
|
+
<div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
|
|
220
|
+
</div>
|
|
221
|
+
{favoritosLength > 14 &&
|
|
203
222
|
<React.Fragment>
|
|
204
223
|
<div className={classes.areaButton}>
|
|
205
224
|
<div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
|
|
206
225
|
</div>
|
|
207
226
|
</React.Fragment>
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
227
|
+
}
|
|
228
|
+
</div>
|
|
229
|
+
</Fade>
|
|
230
|
+
</ListSubheader>
|
|
231
|
+
{retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
|
|
232
|
+
</React.Fragment>
|
|
233
|
+
: retornaEstrutura(sectionIndex, section)
|
|
234
|
+
}
|
|
235
|
+
</ul>
|
|
236
|
+
))}
|
|
237
|
+
</ul>;
|
|
215
238
|
});
|
|
216
239
|
|
|
217
|
-
const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
|
|
240
|
+
const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, group, groupName, groupHeaderColor, groupTitleColor, loadingColor, widthListBox, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
|
|
218
241
|
|
|
242
|
+
const classes = useStyles({ widthListBox });
|
|
219
243
|
const [dados, setDados] = useState({
|
|
220
244
|
lista: [],
|
|
221
245
|
slide: true,
|
|
@@ -236,9 +260,10 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
236
260
|
};
|
|
237
261
|
|
|
238
262
|
const setInput = value => {
|
|
263
|
+
if (loading) return;
|
|
239
264
|
stopCounter();
|
|
240
265
|
setInputValue(value);
|
|
241
|
-
startCounter();
|
|
266
|
+
autoSearch && startCounter();
|
|
242
267
|
};
|
|
243
268
|
|
|
244
269
|
async function carimbaLista(lista) {
|
|
@@ -255,14 +280,14 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
255
280
|
stopCounter();
|
|
256
281
|
setLoading(true);
|
|
257
282
|
const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
|
|
258
|
-
if (res[resposta || 'result']?.length > 1) await carimbaLista(res[resposta || 'result']);
|
|
283
|
+
if (res[resposta || 'result']?.length > 1 && group) await carimbaLista(res[resposta || 'result']);
|
|
259
284
|
else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
|
|
260
285
|
else setError('Erro ao tentar buscar dados.');
|
|
261
286
|
setLoading(false);
|
|
262
287
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
263
288
|
}, [inputValue, searchParams]);
|
|
264
289
|
|
|
265
|
-
useEffect(() => seconds === 1 && buscar(), [seconds, buscar]);
|
|
290
|
+
useEffect(() => autoSearch && seconds === 1 && buscar(), [autoSearch, seconds, buscar]);
|
|
266
291
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
267
292
|
useEffect(() => isString(value) && buscar(value), []);
|
|
268
293
|
|
|
@@ -270,16 +295,16 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
270
295
|
<Autocomplete
|
|
271
296
|
{...props}
|
|
272
297
|
{...{ value, onChange }}
|
|
273
|
-
options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
|
|
274
|
-
getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
|
|
275
|
-
noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
|
|
276
|
-
onInputChange={e => setInput(e?.target?.value || '')}
|
|
277
|
-
getOptionSelected={(o, v) => o[0] === v}
|
|
278
298
|
autoComplete
|
|
279
299
|
autoHighlight
|
|
280
300
|
openText='Abrir'
|
|
281
301
|
clearText='Limpar'
|
|
282
302
|
filterSelectedOptions
|
|
303
|
+
onInputChange={e => setInput(e?.target?.value || '')}
|
|
304
|
+
getOptionSelected={(o, v) => o[0] === v}
|
|
305
|
+
getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
|
|
306
|
+
noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
|
|
307
|
+
options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
|
|
283
308
|
renderInput={params => (
|
|
284
309
|
<TextField
|
|
285
310
|
margin='dense'
|
|
@@ -287,6 +312,11 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
287
312
|
label={label}
|
|
288
313
|
{...params}
|
|
289
314
|
{...textFieldProps}
|
|
315
|
+
onKeyUp={e => ((e.key === 'Enter' || e.key === 'Tab') && !loading) && buscar()}
|
|
316
|
+
inputProps={{
|
|
317
|
+
...params.inputProps,
|
|
318
|
+
onKeyDown: e => (e.key === 'Enter' || e.key === 'Tab') && e.stopPropagation()
|
|
319
|
+
}}
|
|
290
320
|
InputProps={{
|
|
291
321
|
...textFieldProps.InputProps,
|
|
292
322
|
...params.InputProps,
|
|
@@ -294,13 +324,15 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
294
324
|
<React.Fragment>
|
|
295
325
|
{params.InputProps.endAdornment}
|
|
296
326
|
<Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
|
|
327
|
+
{!autoSearch && <IconButton size='small' onClick={e => buscar()} className={classes.searchButton}><IoIosSearch size={20} /></IconButton>}
|
|
297
328
|
</React.Fragment>
|
|
298
329
|
)
|
|
299
330
|
}}
|
|
300
331
|
/>
|
|
301
332
|
)}
|
|
302
333
|
ListboxComponent={ListboxFavorites}
|
|
303
|
-
ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
|
|
334
|
+
ListboxProps={{ dados, setDados, favoritePage, group, groupHeaderColor, groupTitleColor }}
|
|
335
|
+
PopperComponent={props => CustomPopper(props, classes)}
|
|
304
336
|
/>
|
|
305
337
|
);
|
|
306
338
|
};
|