argous 1.2.138 → 1.2.139
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/AutoCompleteFavorites/AutoCompleteFavorites.d.ts +89 -20
- package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js +55 -57
- package/dist/components/AutoCompleteFavorites/index.d.ts +2 -1
- package/dist/components/index.d.ts +4 -1
- package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts +89 -0
- package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js +81 -85
- package/lib/components/AutoCompleteFavorites/index.d.ts +2 -0
- package/lib/components/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,20 +1,89 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import { TextFieldProps } from '@material-ui/core';
|
|
2
|
+
import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
|
|
6
|
+
/**
|
|
7
|
+
* Valor do campo
|
|
8
|
+
*/
|
|
9
|
+
value?: Array<number|string> | object,
|
|
10
|
+
/**
|
|
11
|
+
* Props repassados ao componente Textfield
|
|
12
|
+
*/
|
|
13
|
+
textFieldProps?: TextFieldProps,
|
|
14
|
+
/**
|
|
15
|
+
* Callback fired when the value changes.
|
|
16
|
+
*
|
|
17
|
+
* @param event — The event source of the callback.
|
|
18
|
+
*
|
|
19
|
+
* @param value — The new value of the component.
|
|
20
|
+
*
|
|
21
|
+
* @param reason — One of "create-option", "select-option", "remove-option", "blur", "clear" ou "only-one-left".
|
|
22
|
+
*/
|
|
23
|
+
onChange?: ((event: React.ChangeEvent<{}>, value: any, reason: 'create-option' | 'select-option' | 'remove-option' | 'blur' | 'clear' | 'only-one-left', details?: AutocompleteChangeDetails<any> | undefined) => void) | undefined,
|
|
24
|
+
/**
|
|
25
|
+
* Formata o valor que aparece na listagem
|
|
26
|
+
*
|
|
27
|
+
* @param option - Opção sendo testada ou selecionada
|
|
28
|
+
*
|
|
29
|
+
* @param lista - Lista com todas as opções
|
|
30
|
+
*/
|
|
31
|
+
getOptionLabel?: ((option: Array<any>, lista: Array<Array<any>>) => string),
|
|
32
|
+
/**
|
|
33
|
+
* Utiliza um pgCode diferente do padrão
|
|
34
|
+
*/
|
|
35
|
+
pgCode?: string,
|
|
36
|
+
/**
|
|
37
|
+
* Objeto de busca personalizado
|
|
38
|
+
*/
|
|
39
|
+
busca?: string,
|
|
40
|
+
/**
|
|
41
|
+
* Objeto de resposta personalizado
|
|
42
|
+
*/
|
|
43
|
+
resposta?: string,
|
|
44
|
+
/**
|
|
45
|
+
* Action personalizada
|
|
46
|
+
*/
|
|
47
|
+
action?: string,
|
|
48
|
+
/**
|
|
49
|
+
* Label do campo
|
|
50
|
+
*/
|
|
51
|
+
label?: string,
|
|
52
|
+
/**
|
|
53
|
+
* Parametros utilizados no metodo de busca
|
|
54
|
+
*/
|
|
55
|
+
searchParams?: object,
|
|
56
|
+
/**
|
|
57
|
+
* Define a cor do loading
|
|
58
|
+
*/
|
|
59
|
+
loadingColor?: string,
|
|
60
|
+
/**
|
|
61
|
+
* Parametro que define se terá paginação
|
|
62
|
+
*/
|
|
63
|
+
favoritePage?: boolean,
|
|
64
|
+
/**
|
|
65
|
+
* Array contendo nome do grupo
|
|
66
|
+
*/
|
|
67
|
+
groupName?: Array<string>,
|
|
68
|
+
/**
|
|
69
|
+
* Array contendo a cor do titulo no grupo
|
|
70
|
+
*/
|
|
71
|
+
groupTitleColor?: Array<string>,
|
|
72
|
+
/**
|
|
73
|
+
* Array contendo o backgroundColor do header no grupo
|
|
74
|
+
*/
|
|
75
|
+
groupHeaderColor?: Array<string>,
|
|
76
|
+
/**
|
|
77
|
+
* Função para filtrar a lista de opções
|
|
78
|
+
*
|
|
79
|
+
* @param valor - Valor setado no componente
|
|
80
|
+
* @param item - Item a ser testado contra o valor
|
|
81
|
+
*
|
|
82
|
+
* @returns {boolean} Retorna true se item de ser removido da lista
|
|
83
|
+
*/
|
|
84
|
+
filterFunction?: (valor: any, item: any) => boolean,
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
|
|
88
|
+
|
|
89
|
+
export default AutoCompleteFavorites;
|
|
@@ -185,6 +185,61 @@ var CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
|
185
185
|
color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
|
|
186
186
|
}
|
|
187
187
|
}); })(core_1.Tooltip);
|
|
188
|
+
var AutoCompleteFavorites = function (_a) {
|
|
189
|
+
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"]);
|
|
190
|
+
var _d = react_1.useState({
|
|
191
|
+
lista: [],
|
|
192
|
+
slide: true,
|
|
193
|
+
direction: '',
|
|
194
|
+
favoritosLength: '',
|
|
195
|
+
pageNumber: favoritePage ? 1 : '',
|
|
196
|
+
}), dados = _d[0], setDados = _d[1];
|
|
197
|
+
var _e = react_1.useState(false), loading = _e[0], setLoading = _e[1];
|
|
198
|
+
var _f = react_1.useState(''), inputValue = _f[0], setInputValue = _f[1];
|
|
199
|
+
var buscar = react_1.useCallback(function (valor) { return __awaiter(void 0, void 0, void 0, function () {
|
|
200
|
+
var res;
|
|
201
|
+
var _a;
|
|
202
|
+
var _b;
|
|
203
|
+
return __generator(this, function (_c) {
|
|
204
|
+
switch (_c.label) {
|
|
205
|
+
case 0:
|
|
206
|
+
setLoading(true);
|
|
207
|
+
return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
|
|
208
|
+
case 1:
|
|
209
|
+
res = _c.sent();
|
|
210
|
+
if (((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)
|
|
211
|
+
carimbaLista(res[resposta || 'result']);
|
|
212
|
+
else if (res[resposta || 'result'])
|
|
213
|
+
setDados({ lista: res[resposta || 'result'] || [] });
|
|
214
|
+
else
|
|
215
|
+
api_1.setError('Erro ao tentar buscar dados.');
|
|
216
|
+
setLoading(false);
|
|
217
|
+
return [2 /*return*/];
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
}); }, [inputValue, searchParams]);
|
|
221
|
+
function carimbaLista(lista) {
|
|
222
|
+
var completo = [];
|
|
223
|
+
lista.map(function (arr, index) {
|
|
224
|
+
index === 0 && favoritePage && setDados(function (v) { return (__assign(__assign({}, v), { favoritosLength: arr.length })); });
|
|
225
|
+
return arr.map(function (itemArr) { return itemArr.length < 3 && itemArr.push(groupName[index]); });
|
|
226
|
+
});
|
|
227
|
+
lista.forEach(function (v) {
|
|
228
|
+
for (var _i = 0, _a = v.values(); _i < _a.length; _i++) {
|
|
229
|
+
var item = _a[_i];
|
|
230
|
+
completo.push(item);
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
setDados(function (v) { return (__assign(__assign({}, v), { lista: completo })); });
|
|
234
|
+
}
|
|
235
|
+
react_1.useEffect(function () { return buscar(); }, [inputValue, buscar]);
|
|
236
|
+
react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
|
|
237
|
+
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; }, 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,
|
|
238
|
+
params.InputProps.endAdornment,
|
|
239
|
+
react_1.default.createElement(core_1.Fade, { in: loading },
|
|
240
|
+
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 } })));
|
|
241
|
+
};
|
|
242
|
+
exports.default = AutoCompleteFavorites;
|
|
188
243
|
var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
189
244
|
var classes = useStyles();
|
|
190
245
|
var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
|
|
@@ -272,60 +327,3 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
|
272
327
|
retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
|
|
273
328
|
});
|
|
274
329
|
});
|
|
275
|
-
var AutoCompleteFavorites = function (_a) {
|
|
276
|
-
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"]);
|
|
277
|
-
var _d = react_1.useState({
|
|
278
|
-
lista: [],
|
|
279
|
-
slide: true,
|
|
280
|
-
direction: '',
|
|
281
|
-
favoritosLength: '',
|
|
282
|
-
pageNumber: favoritePage ? 1 : '',
|
|
283
|
-
}), dados = _d[0], setDados = _d[1];
|
|
284
|
-
var _e = react_1.useState(false), loading = _e[0], setLoading = _e[1];
|
|
285
|
-
var _f = react_1.useState(''), inputValue = _f[0], setInputValue = _f[1];
|
|
286
|
-
var buscar = react_1.useCallback(function (valor) { return __awaiter(void 0, void 0, void 0, function () {
|
|
287
|
-
var res;
|
|
288
|
-
var _a;
|
|
289
|
-
var _b;
|
|
290
|
-
return __generator(this, function (_c) {
|
|
291
|
-
switch (_c.label) {
|
|
292
|
-
case 0:
|
|
293
|
-
setLoading(true);
|
|
294
|
-
return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
|
|
295
|
-
case 1:
|
|
296
|
-
res = _c.sent();
|
|
297
|
-
if (((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)
|
|
298
|
-
carimbaLista(res[resposta || 'result']);
|
|
299
|
-
else if (res[resposta || 'result'])
|
|
300
|
-
setDados(function (v) { return (__assign(__assign({}, v), { lista: res[resposta || 'result'] || [] })); });
|
|
301
|
-
else
|
|
302
|
-
api_1.setError('Erro ao tentar buscar dados.');
|
|
303
|
-
setLoading(false);
|
|
304
|
-
return [2 /*return*/];
|
|
305
|
-
}
|
|
306
|
-
});
|
|
307
|
-
}); }, [inputValue, searchParams]);
|
|
308
|
-
function carimbaLista(lista) {
|
|
309
|
-
var completo = [];
|
|
310
|
-
lista.map(function (arr, index) {
|
|
311
|
-
index === 0 && favoritePage && setDados(function (v) { return (__assign(__assign({}, v), { favoritosLength: arr.length })); });
|
|
312
|
-
return arr.map(function (itemArr) { return itemArr.length < 3 && itemArr.push(groupName[index]); });
|
|
313
|
-
});
|
|
314
|
-
lista.forEach(function (v) {
|
|
315
|
-
for (var _i = 0, _a = v.values(); _i < _a.length; _i++) {
|
|
316
|
-
var item = _a[_i];
|
|
317
|
-
completo.push(item);
|
|
318
|
-
}
|
|
319
|
-
});
|
|
320
|
-
setDados(function (v) { return (__assign(__assign({}, v), { lista: completo })); });
|
|
321
|
-
}
|
|
322
|
-
react_1.useEffect(function () { return buscar(); }, [inputValue, buscar]);
|
|
323
|
-
react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
|
|
324
|
-
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) {
|
|
325
|
-
return value.map(function (option, index) { return (react_1.default.createElement(core_1.Chip, __assign({ variant: 'outlined', size: 'small', label: option }, getTagProps({ index: index })))); });
|
|
326
|
-
}, 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,
|
|
327
|
-
params.InputProps.endAdornment,
|
|
328
|
-
react_1.default.createElement(core_1.Fade, { in: loading },
|
|
329
|
-
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 } })));
|
|
330
|
-
};
|
|
331
|
-
exports.default = AutoCompleteFavorites;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default } from
|
|
1
|
+
export { default } from './AutoCompleteFavorites';
|
|
2
|
+
export * from './AutoCompleteFavorites';
|
|
@@ -145,4 +145,7 @@ export { default as ThreadLog } from './ThreadLog';
|
|
|
145
145
|
export * from './ThreadLog';
|
|
146
146
|
|
|
147
147
|
export { default as UtilAutoComplete } from './UtilAutoComplete';
|
|
148
|
-
export * from './UtilAutoComplete';
|
|
148
|
+
export * from './UtilAutoComplete';
|
|
149
|
+
|
|
150
|
+
export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
|
|
151
|
+
export * from './AutoCompleteFavorites';
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { TextFieldProps } from '@material-ui/core';
|
|
2
|
+
import { AutocompleteProps, AutocompleteChangeDetails } from '@material-ui/lab';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any, false, false, false>, 'getOptionLabel'>{
|
|
6
|
+
/**
|
|
7
|
+
* Valor do campo
|
|
8
|
+
*/
|
|
9
|
+
value?: Array<number|string> | object,
|
|
10
|
+
/**
|
|
11
|
+
* Props repassados ao componente Textfield
|
|
12
|
+
*/
|
|
13
|
+
textFieldProps?: TextFieldProps,
|
|
14
|
+
/**
|
|
15
|
+
* Callback fired when the value changes.
|
|
16
|
+
*
|
|
17
|
+
* @param event — The event source of the callback.
|
|
18
|
+
*
|
|
19
|
+
* @param value — The new value of the component.
|
|
20
|
+
*
|
|
21
|
+
* @param reason — One of "create-option", "select-option", "remove-option", "blur", "clear" ou "only-one-left".
|
|
22
|
+
*/
|
|
23
|
+
onChange?: ((event: React.ChangeEvent<{}>, value: any, reason: 'create-option' | 'select-option' | 'remove-option' | 'blur' | 'clear' | 'only-one-left', details?: AutocompleteChangeDetails<any> | undefined) => void) | undefined,
|
|
24
|
+
/**
|
|
25
|
+
* Formata o valor que aparece na listagem
|
|
26
|
+
*
|
|
27
|
+
* @param option - Opção sendo testada ou selecionada
|
|
28
|
+
*
|
|
29
|
+
* @param lista - Lista com todas as opções
|
|
30
|
+
*/
|
|
31
|
+
getOptionLabel?: ((option: Array<any>, lista: Array<Array<any>>) => string),
|
|
32
|
+
/**
|
|
33
|
+
* Utiliza um pgCode diferente do padrão
|
|
34
|
+
*/
|
|
35
|
+
pgCode?: string,
|
|
36
|
+
/**
|
|
37
|
+
* Objeto de busca personalizado
|
|
38
|
+
*/
|
|
39
|
+
busca?: string,
|
|
40
|
+
/**
|
|
41
|
+
* Objeto de resposta personalizado
|
|
42
|
+
*/
|
|
43
|
+
resposta?: string,
|
|
44
|
+
/**
|
|
45
|
+
* Action personalizada
|
|
46
|
+
*/
|
|
47
|
+
action?: string,
|
|
48
|
+
/**
|
|
49
|
+
* Label do campo
|
|
50
|
+
*/
|
|
51
|
+
label?: string,
|
|
52
|
+
/**
|
|
53
|
+
* Parametros utilizados no metodo de busca
|
|
54
|
+
*/
|
|
55
|
+
searchParams?: object,
|
|
56
|
+
/**
|
|
57
|
+
* Define a cor do loading
|
|
58
|
+
*/
|
|
59
|
+
loadingColor?: string,
|
|
60
|
+
/**
|
|
61
|
+
* Parametro que define se terá paginação
|
|
62
|
+
*/
|
|
63
|
+
favoritePage?: boolean,
|
|
64
|
+
/**
|
|
65
|
+
* Array contendo nome do grupo
|
|
66
|
+
*/
|
|
67
|
+
groupName?: Array<string>,
|
|
68
|
+
/**
|
|
69
|
+
* Array contendo a cor do titulo no grupo
|
|
70
|
+
*/
|
|
71
|
+
groupTitleColor?: Array<string>,
|
|
72
|
+
/**
|
|
73
|
+
* Array contendo o backgroundColor do header no grupo
|
|
74
|
+
*/
|
|
75
|
+
groupHeaderColor?: Array<string>,
|
|
76
|
+
/**
|
|
77
|
+
* Função para filtrar a lista de opções
|
|
78
|
+
*
|
|
79
|
+
* @param valor - Valor setado no componente
|
|
80
|
+
* @param item - Item a ser testado contra o valor
|
|
81
|
+
*
|
|
82
|
+
* @returns {boolean} Retorna true se item de ser removido da lista
|
|
83
|
+
*/
|
|
84
|
+
filterFunction?: (valor: any, item: any) => boolean,
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
declare function AutoCompleteFavorites(props: AutoCompleteFavoritesProps): JSX.Element
|
|
88
|
+
|
|
89
|
+
export default AutoCompleteFavorites;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { serverAction, setError } from '../../utils/api';
|
|
2
|
-
import {
|
|
2
|
+
import { CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, 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';
|
|
@@ -106,6 +106,85 @@ const CustomTooltip = withStyles((theme) => ({
|
|
|
106
106
|
}
|
|
107
107
|
}))(Tooltip);
|
|
108
108
|
|
|
109
|
+
const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
|
|
110
|
+
|
|
111
|
+
const [dados, setDados] = useState({
|
|
112
|
+
lista: [],
|
|
113
|
+
slide: true,
|
|
114
|
+
direction: '',
|
|
115
|
+
favoritosLength: '',
|
|
116
|
+
pageNumber: favoritePage ? 1 : '',
|
|
117
|
+
});
|
|
118
|
+
const [loading, setLoading] = useState(false);
|
|
119
|
+
const [inputValue, setInputValue] = useState('');
|
|
120
|
+
|
|
121
|
+
const buscar = useCallback(async valor => {
|
|
122
|
+
setLoading(true);
|
|
123
|
+
const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
|
|
124
|
+
if (res[resposta || 'result']?.length > 1) carimbaLista(res[resposta || 'result']);
|
|
125
|
+
else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
|
|
126
|
+
else setError('Erro ao tentar buscar dados.');
|
|
127
|
+
setLoading(false);
|
|
128
|
+
}, [inputValue, searchParams]);
|
|
129
|
+
|
|
130
|
+
function carimbaLista(lista) {
|
|
131
|
+
let completo = [];
|
|
132
|
+
lista.map((arr, index) => {
|
|
133
|
+
index === 0 && favoritePage && setDados(v => ({ ...v, favoritosLength: arr.length }));
|
|
134
|
+
return arr.map(itemArr => itemArr.length < 3 && itemArr.push(groupName[index]));
|
|
135
|
+
});
|
|
136
|
+
lista.forEach(v => {
|
|
137
|
+
for (let item of v.values()) {
|
|
138
|
+
completo.push(item);
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
setDados(v => ({ ...v, lista: completo }));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
useEffect(() => buscar(), [inputValue, buscar]);
|
|
145
|
+
useEffect(() => isString(value) && buscar(value), []);
|
|
146
|
+
|
|
147
|
+
return (
|
|
148
|
+
<Autocomplete
|
|
149
|
+
autoComplete
|
|
150
|
+
autoHighlight
|
|
151
|
+
openText='Abrir'
|
|
152
|
+
clearText='Limpar'
|
|
153
|
+
filterSelectedOptions
|
|
154
|
+
onInputChange={e => setInputValue(e?.target?.value || '')}
|
|
155
|
+
options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
|
|
156
|
+
getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
|
|
157
|
+
getOptionSelected={(o, v) => o[0] === v}
|
|
158
|
+
renderInput={params => (
|
|
159
|
+
<TextField
|
|
160
|
+
margin='dense'
|
|
161
|
+
variant='outlined'
|
|
162
|
+
label={label}
|
|
163
|
+
{...params}
|
|
164
|
+
{...textFieldProps}
|
|
165
|
+
InputProps={{
|
|
166
|
+
...textFieldProps.InputProps,
|
|
167
|
+
...params.InputProps,
|
|
168
|
+
endAdornment: (
|
|
169
|
+
<>
|
|
170
|
+
{params.InputProps.endAdornment}
|
|
171
|
+
<Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
|
|
172
|
+
</>
|
|
173
|
+
)
|
|
174
|
+
}}
|
|
175
|
+
/>
|
|
176
|
+
)}
|
|
177
|
+
{...props}
|
|
178
|
+
{...{ value, onChange }}
|
|
179
|
+
ListboxComponent={ListboxFavorites}
|
|
180
|
+
ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
|
|
181
|
+
/>
|
|
182
|
+
);
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
export default AutoCompleteFavorites;
|
|
186
|
+
|
|
187
|
+
|
|
109
188
|
const ListboxFavorites = forwardRef((props, ref) => {
|
|
110
189
|
|
|
111
190
|
const classes = useStyles();
|
|
@@ -212,87 +291,4 @@ const ListboxFavorites = forwardRef((props, ref) => {
|
|
|
212
291
|
{retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
|
|
213
292
|
</ul>
|
|
214
293
|
));
|
|
215
|
-
});
|
|
216
|
-
|
|
217
|
-
const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
|
|
218
|
-
|
|
219
|
-
const [dados, setDados] = useState({
|
|
220
|
-
lista: [],
|
|
221
|
-
slide: true,
|
|
222
|
-
direction: '',
|
|
223
|
-
favoritosLength: '',
|
|
224
|
-
pageNumber: favoritePage ? 1 : '',
|
|
225
|
-
});
|
|
226
|
-
const [loading, setLoading] = useState(false);
|
|
227
|
-
const [inputValue, setInputValue] = useState('');
|
|
228
|
-
|
|
229
|
-
const buscar = useCallback(async valor => {
|
|
230
|
-
setLoading(true);
|
|
231
|
-
const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
|
|
232
|
-
if (res[resposta || 'result']?.length > 1) carimbaLista(res[resposta || 'result']);
|
|
233
|
-
else if (res[resposta || 'result']) setDados(v => ({ ...v, lista: res[resposta || 'result'] || [] }));
|
|
234
|
-
else setError('Erro ao tentar buscar dados.');
|
|
235
|
-
setLoading(false);
|
|
236
|
-
}, [inputValue, searchParams]);
|
|
237
|
-
|
|
238
|
-
function carimbaLista(lista) {
|
|
239
|
-
let completo = [];
|
|
240
|
-
lista.map((arr, index) => {
|
|
241
|
-
index === 0 && favoritePage && setDados(v => ({ ...v, favoritosLength: arr.length }));
|
|
242
|
-
return arr.map(itemArr => itemArr.length < 3 && itemArr.push(groupName[index]));
|
|
243
|
-
});
|
|
244
|
-
lista.forEach(v => {
|
|
245
|
-
for (let item of v.values()) {
|
|
246
|
-
completo.push(item);
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
setDados(v => ({ ...v, lista: completo }));
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
useEffect(() => buscar(), [inputValue, buscar]);
|
|
253
|
-
useEffect(() => isString(value) && buscar(value), []);
|
|
254
|
-
|
|
255
|
-
return (
|
|
256
|
-
<Autocomplete
|
|
257
|
-
autoComplete
|
|
258
|
-
autoHighlight
|
|
259
|
-
openText='Abrir'
|
|
260
|
-
clearText='Limpar'
|
|
261
|
-
filterSelectedOptions
|
|
262
|
-
onInputChange={e => setInputValue(e?.target?.value || '')}
|
|
263
|
-
options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
|
|
264
|
-
getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
|
|
265
|
-
getOptionSelected={(o, v) => o[0] === v}
|
|
266
|
-
renderTags={(value, getTagProps) =>
|
|
267
|
-
value.map((option, index) => (
|
|
268
|
-
<Chip variant='outlined' size='small' label={option} {...getTagProps({ index })} />
|
|
269
|
-
))
|
|
270
|
-
}
|
|
271
|
-
renderInput={params => (
|
|
272
|
-
<TextField
|
|
273
|
-
margin='dense'
|
|
274
|
-
variant='outlined'
|
|
275
|
-
label={label}
|
|
276
|
-
{...params}
|
|
277
|
-
{...textFieldProps}
|
|
278
|
-
InputProps={{
|
|
279
|
-
...textFieldProps.InputProps,
|
|
280
|
-
...params.InputProps,
|
|
281
|
-
endAdornment: (
|
|
282
|
-
<>
|
|
283
|
-
{params.InputProps.endAdornment}
|
|
284
|
-
<Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
|
|
285
|
-
</>
|
|
286
|
-
)
|
|
287
|
-
}}
|
|
288
|
-
/>
|
|
289
|
-
)}
|
|
290
|
-
{...props}
|
|
291
|
-
{...{ value, onChange }}
|
|
292
|
-
ListboxComponent={ListboxFavorites}
|
|
293
|
-
ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
|
|
294
|
-
/>
|
|
295
|
-
);
|
|
296
|
-
};
|
|
297
|
-
|
|
298
|
-
export default AutoCompleteFavorites;
|
|
294
|
+
});
|
|
@@ -145,4 +145,7 @@ export { default as ThreadLog } from './ThreadLog';
|
|
|
145
145
|
export * from './ThreadLog';
|
|
146
146
|
|
|
147
147
|
export { default as UtilAutoComplete } from './UtilAutoComplete';
|
|
148
|
-
export * from './UtilAutoComplete';
|
|
148
|
+
export * from './UtilAutoComplete';
|
|
149
|
+
|
|
150
|
+
export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
|
|
151
|
+
export * from './AutoCompleteFavorites';
|