argous 1.2.139 → 1.2.140
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.
|
@@ -80,6 +80,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
80
80
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
81
81
|
};
|
|
82
82
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
83
|
+
exports.CustomTooltip = void 0;
|
|
83
84
|
var api_1 = require("../../utils/api");
|
|
84
85
|
var core_1 = require("@material-ui/core");
|
|
85
86
|
var lab_1 = require("@material-ui/lab");
|
|
@@ -169,16 +170,16 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
|
169
170
|
}
|
|
170
171
|
}
|
|
171
172
|
}); });
|
|
172
|
-
|
|
173
|
+
exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
173
174
|
tooltip: theme.palette.type === 'light' ? {
|
|
174
175
|
fontSize: 15,
|
|
175
176
|
fontWeight: 400,
|
|
176
|
-
color: '
|
|
177
|
+
color: '#FFF',
|
|
177
178
|
backgroundColor: '#333333e3',
|
|
178
179
|
} : {
|
|
179
180
|
fontSize: 15,
|
|
180
181
|
fontWeight: 400,
|
|
181
|
-
color: '
|
|
182
|
+
color: '#000',
|
|
182
183
|
backgroundColor: '#fbfbfbd1',
|
|
183
184
|
},
|
|
184
185
|
arrow: {
|
|
@@ -187,6 +188,7 @@ var CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
|
187
188
|
}); })(core_1.Tooltip);
|
|
188
189
|
var AutoCompleteFavorites = function (_a) {
|
|
189
190
|
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"]);
|
|
191
|
+
var classes = useStyles();
|
|
190
192
|
var _d = react_1.useState({
|
|
191
193
|
lista: [],
|
|
192
194
|
slide: true,
|
|
@@ -196,6 +198,112 @@ var AutoCompleteFavorites = function (_a) {
|
|
|
196
198
|
}), dados = _d[0], setDados = _d[1];
|
|
197
199
|
var _e = react_1.useState(false), loading = _e[0], setLoading = _e[1];
|
|
198
200
|
var _f = react_1.useState(''), inputValue = _f[0], setInputValue = _f[1];
|
|
201
|
+
var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
202
|
+
var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
|
|
203
|
+
var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
|
|
204
|
+
function retornaInicio() {
|
|
205
|
+
switch (pageNumber) {
|
|
206
|
+
case 1:
|
|
207
|
+
return 0;
|
|
208
|
+
case 2:
|
|
209
|
+
return 7;
|
|
210
|
+
case 3:
|
|
211
|
+
return 14;
|
|
212
|
+
default: return;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
function retornaFim() {
|
|
216
|
+
switch (pageNumber) {
|
|
217
|
+
case 1:
|
|
218
|
+
return 7;
|
|
219
|
+
case 2:
|
|
220
|
+
return 14;
|
|
221
|
+
case 3:
|
|
222
|
+
return favoritosLength;
|
|
223
|
+
default: return;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
function retornaArray(sectionIndex, section) {
|
|
227
|
+
if (sectionIndex === 0 && favoritePage && favoritosLength > 7)
|
|
228
|
+
return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
|
|
229
|
+
return section.props.children[1].props.children;
|
|
230
|
+
}
|
|
231
|
+
function retornaEstrutura(sectionIndex, item) {
|
|
232
|
+
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
|
|
233
|
+
return (react_1.default.createElement(core_1.Slide, { in: slide, direction: direction },
|
|
234
|
+
react_1.default.createElement(exports.CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
|
|
235
|
+
react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
|
|
236
|
+
react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })))));
|
|
237
|
+
}
|
|
238
|
+
return (react_1.default.createElement(exports.CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
|
|
239
|
+
react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
|
|
240
|
+
react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText }))));
|
|
241
|
+
}
|
|
242
|
+
function buttonClick(evento, value) {
|
|
243
|
+
evento.preventDefault();
|
|
244
|
+
evento.stopPropagation();
|
|
245
|
+
if (value !== pageNumber) {
|
|
246
|
+
verificaSaidaSlide(value);
|
|
247
|
+
setDados(function (v) { return (__assign(__assign({}, v), { slide: false })); });
|
|
248
|
+
setTimeout(function () {
|
|
249
|
+
setDados(function (v) { return (__assign(__assign({}, v), { pageNumber: value, direction: retornaDirection(value) })); });
|
|
250
|
+
setTimeout(function () { return setDados(function (v) { return (__assign(__assign({}, v), { slide: true })); }); }, 100);
|
|
251
|
+
}, 200);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
function verificaSaidaSlide(value) {
|
|
255
|
+
var direction = '';
|
|
256
|
+
if ((value === 2 || value === 3) && pageNumber === 1)
|
|
257
|
+
direction = 'right';
|
|
258
|
+
else if (value === 3 && pageNumber === 2)
|
|
259
|
+
direction = 'right';
|
|
260
|
+
else if (value === 1 && pageNumber === 2)
|
|
261
|
+
direction = 'left';
|
|
262
|
+
direction && setDados(function (v) { return (__assign(__assign({}, v), { direction: direction })); });
|
|
263
|
+
}
|
|
264
|
+
function retornaDirection(value) {
|
|
265
|
+
if (value < pageNumber)
|
|
266
|
+
return 'right';
|
|
267
|
+
return 'left';
|
|
268
|
+
}
|
|
269
|
+
return children.map(function (section, sectionIndex) {
|
|
270
|
+
var _a, _b, _c;
|
|
271
|
+
return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
|
|
272
|
+
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] } },
|
|
273
|
+
section.props.children[0].props.children,
|
|
274
|
+
react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
|
|
275
|
+
react_1.default.createElement("div", { className: classes.divButton },
|
|
276
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
277
|
+
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")),
|
|
278
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
279
|
+
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")),
|
|
280
|
+
favoritosLength > 14 &&
|
|
281
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
282
|
+
react_1.default.createElement("div", { className: classes.areaButton },
|
|
283
|
+
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")))))),
|
|
284
|
+
retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
|
|
285
|
+
});
|
|
286
|
+
});
|
|
287
|
+
function carimbaLista(lista) {
|
|
288
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
289
|
+
var completo;
|
|
290
|
+
return __generator(this, function (_a) {
|
|
291
|
+
completo = [];
|
|
292
|
+
lista.map(function (arr, index) {
|
|
293
|
+
index === 0 && favoritePage && setDados(function (v) { return (__assign(__assign({}, v), { favoritosLength: arr.length })); });
|
|
294
|
+
return arr.map(function (itemArr) { return itemArr.length < 3 && itemArr.push(groupName[index]); });
|
|
295
|
+
});
|
|
296
|
+
lista.forEach(function (v) {
|
|
297
|
+
for (var _i = 0, _a = v.values(); _i < _a.length; _i++) {
|
|
298
|
+
var item = _a[_i];
|
|
299
|
+
completo.push(item);
|
|
300
|
+
}
|
|
301
|
+
});
|
|
302
|
+
setDados(function (v) { return (__assign(__assign({}, v), { lista: completo })); });
|
|
303
|
+
return [2 /*return*/];
|
|
304
|
+
});
|
|
305
|
+
});
|
|
306
|
+
}
|
|
199
307
|
var buscar = react_1.useCallback(function (valor) { return __awaiter(void 0, void 0, void 0, function () {
|
|
200
308
|
var res;
|
|
201
309
|
var _a;
|
|
@@ -207,123 +315,29 @@ var AutoCompleteFavorites = function (_a) {
|
|
|
207
315
|
return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
|
|
208
316
|
case 1:
|
|
209
317
|
res = _c.sent();
|
|
210
|
-
if (((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)
|
|
211
|
-
|
|
212
|
-
|
|
318
|
+
if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)) return [3 /*break*/, 3];
|
|
319
|
+
return [4 /*yield*/, carimbaLista(res[resposta || 'result'])];
|
|
320
|
+
case 2:
|
|
321
|
+
_c.sent();
|
|
322
|
+
return [3 /*break*/, 4];
|
|
323
|
+
case 3:
|
|
324
|
+
if (res[resposta || 'result'])
|
|
213
325
|
setDados({ lista: res[resposta || 'result'] || [] });
|
|
214
326
|
else
|
|
215
327
|
api_1.setError('Erro ao tentar buscar dados.');
|
|
328
|
+
_c.label = 4;
|
|
329
|
+
case 4:
|
|
216
330
|
setLoading(false);
|
|
217
331
|
return [2 /*return*/];
|
|
218
332
|
}
|
|
219
333
|
});
|
|
220
334
|
}); }, [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
335
|
react_1.useEffect(function () { return buscar(); }, [inputValue, buscar]);
|
|
336
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
236
337
|
react_1.useEffect(function () { return lodash_1.isString(value) && buscar(value); }, []);
|
|
237
|
-
return (react_1.default.createElement(lab_1.Autocomplete, __assign({
|
|
338
|
+
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,
|
|
238
339
|
params.InputProps.endAdornment,
|
|
239
340
|
react_1.default.createElement(core_1.Fade, { in: loading },
|
|
240
|
-
react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })))) }) }))); }
|
|
341
|
+
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 } })));
|
|
241
342
|
};
|
|
242
343
|
exports.default = AutoCompleteFavorites;
|
|
243
|
-
var ListboxFavorites = react_1.forwardRef(function (props, ref) {
|
|
244
|
-
var classes = useStyles();
|
|
245
|
-
var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
|
|
246
|
-
var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
|
|
247
|
-
function retornaInicio() {
|
|
248
|
-
switch (pageNumber) {
|
|
249
|
-
case 1:
|
|
250
|
-
return 0;
|
|
251
|
-
case 2:
|
|
252
|
-
return 7;
|
|
253
|
-
case 3:
|
|
254
|
-
return 14;
|
|
255
|
-
default: return;
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
function retornaFim() {
|
|
259
|
-
switch (pageNumber) {
|
|
260
|
-
case 1:
|
|
261
|
-
return 7;
|
|
262
|
-
case 2:
|
|
263
|
-
return 14;
|
|
264
|
-
case 3:
|
|
265
|
-
return favoritosLength;
|
|
266
|
-
default: return;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
function retornaArray(sectionIndex, section) {
|
|
270
|
-
if (sectionIndex === 0 && favoritePage && favoritosLength > 7)
|
|
271
|
-
return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
|
|
272
|
-
return section.props.children[1].props.children;
|
|
273
|
-
}
|
|
274
|
-
function retornaEstrutura(sectionIndex, item) {
|
|
275
|
-
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
|
|
276
|
-
return (react_1.default.createElement(core_1.Slide, { in: slide, direction: direction },
|
|
277
|
-
react_1.default.createElement(CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
|
|
278
|
-
react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
|
|
279
|
-
react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText })))));
|
|
280
|
-
}
|
|
281
|
-
return (react_1.default.createElement(CustomTooltip, { title: item.props.children, arrow: true, enterDelay: '1000', enterNextDelay: '1000', placement: 'top-end', TransitionComponent: core_1.Fade, TransitionProps: { timeout: { enter: 100, exit: 500 } } },
|
|
282
|
-
react_1.default.createElement(core_1.ListItem, __assign({}, item.props, { key: item.key, className: classes.listItem }),
|
|
283
|
-
react_1.default.createElement(core_1.ListItemText, { primary: item.props.children, className: classes.listItemText }))));
|
|
284
|
-
}
|
|
285
|
-
function buttonClick(evento, value) {
|
|
286
|
-
evento.preventDefault();
|
|
287
|
-
evento.stopPropagation();
|
|
288
|
-
if (value !== pageNumber) {
|
|
289
|
-
verificaSaidaSlide(value);
|
|
290
|
-
setDados(function (v) { return (__assign(__assign({}, v), { slide: false })); });
|
|
291
|
-
setTimeout(function () {
|
|
292
|
-
setDados(function (v) { return (__assign(__assign({}, v), { pageNumber: value, direction: retornaDirection(value) })); });
|
|
293
|
-
setTimeout(function () { return setDados(function (v) { return (__assign(__assign({}, v), { slide: true })); }); }, 100);
|
|
294
|
-
}, 200);
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
function verificaSaidaSlide(value) {
|
|
298
|
-
var direction = '';
|
|
299
|
-
if ((value === 2 || value === 3) && pageNumber === 1)
|
|
300
|
-
direction = 'right';
|
|
301
|
-
else if (value === 3 && pageNumber === 2)
|
|
302
|
-
direction = 'right';
|
|
303
|
-
else if (value === 1 && pageNumber === 2)
|
|
304
|
-
direction = 'left';
|
|
305
|
-
direction && setDados(function (v) { return (__assign(__assign({}, v), { direction: direction })); });
|
|
306
|
-
}
|
|
307
|
-
function retornaDirection(value) {
|
|
308
|
-
if (value < pageNumber)
|
|
309
|
-
return 'right';
|
|
310
|
-
return 'left';
|
|
311
|
-
}
|
|
312
|
-
return children.map(function (section, sectionIndex) {
|
|
313
|
-
var _a, _b, _c;
|
|
314
|
-
return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
|
|
315
|
-
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] } },
|
|
316
|
-
section.props.children[0].props.children,
|
|
317
|
-
react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
|
|
318
|
-
react_1.default.createElement("div", { className: classes.divButton },
|
|
319
|
-
react_1.default.createElement("div", { className: classes.areaButton },
|
|
320
|
-
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")),
|
|
321
|
-
react_1.default.createElement("div", { className: classes.areaButton },
|
|
322
|
-
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")),
|
|
323
|
-
favoritosLength > 14 &&
|
|
324
|
-
react_1.default.createElement(react_1.default.Fragment, null,
|
|
325
|
-
react_1.default.createElement("div", { className: classes.areaButton },
|
|
326
|
-
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")))))),
|
|
327
|
-
retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
|
|
328
|
-
});
|
|
329
|
-
});
|
|
@@ -89,16 +89,16 @@ const useStyles = makeStyles((theme) => ({
|
|
|
89
89
|
}
|
|
90
90
|
}));
|
|
91
91
|
|
|
92
|
-
const CustomTooltip = withStyles((theme) => ({
|
|
92
|
+
export const CustomTooltip = withStyles((theme) => ({
|
|
93
93
|
tooltip: theme.palette.type === 'light' ? {
|
|
94
94
|
fontSize: 15,
|
|
95
95
|
fontWeight: 400,
|
|
96
|
-
color: '
|
|
96
|
+
color: '#FFF',
|
|
97
97
|
backgroundColor: '#333333e3',
|
|
98
98
|
} : {
|
|
99
99
|
fontSize: 15,
|
|
100
100
|
fontWeight: 400,
|
|
101
|
-
color: '
|
|
101
|
+
color: '#000',
|
|
102
102
|
backgroundColor: '#fbfbfbd1',
|
|
103
103
|
},
|
|
104
104
|
arrow: {
|
|
@@ -108,6 +108,7 @@ const CustomTooltip = withStyles((theme) => ({
|
|
|
108
108
|
|
|
109
109
|
const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
|
|
110
110
|
|
|
111
|
+
const classes = useStyles();
|
|
111
112
|
const [dados, setDados] = useState({
|
|
112
113
|
lista: [],
|
|
113
114
|
slide: true,
|
|
@@ -118,16 +119,113 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
118
119
|
const [loading, setLoading] = useState(false);
|
|
119
120
|
const [inputValue, setInputValue] = useState('');
|
|
120
121
|
|
|
121
|
-
const
|
|
122
|
-
|
|
123
|
-
const
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
122
|
+
const ListboxFavorites = forwardRef((props, ref) => {
|
|
123
|
+
const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
|
|
124
|
+
const { pageNumber, favoritosLength, direction, slide } = dados;
|
|
125
|
+
|
|
126
|
+
function retornaInicio() {
|
|
127
|
+
switch (pageNumber) {
|
|
128
|
+
case 1:
|
|
129
|
+
return 0;
|
|
130
|
+
case 2:
|
|
131
|
+
return 7;
|
|
132
|
+
case 3:
|
|
133
|
+
return 14;
|
|
134
|
+
default: return;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
function retornaFim() {
|
|
139
|
+
switch (pageNumber) {
|
|
140
|
+
case 1:
|
|
141
|
+
return 7;
|
|
142
|
+
case 2:
|
|
143
|
+
return 14;
|
|
144
|
+
case 3:
|
|
145
|
+
return favoritosLength;
|
|
146
|
+
default: return;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
function retornaArray(sectionIndex, section) {
|
|
151
|
+
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
|
|
152
|
+
return section.props.children[1].props.children;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
function retornaEstrutura(sectionIndex, item) {
|
|
156
|
+
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
|
|
157
|
+
return (
|
|
158
|
+
<Slide in={slide} direction={direction}>
|
|
159
|
+
<CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
|
|
160
|
+
<ListItem {...item.props} key={item.key} className={classes.listItem}>
|
|
161
|
+
<ListItemText primary={item.props.children} className={classes.listItemText} />
|
|
162
|
+
</ListItem>
|
|
163
|
+
</CustomTooltip>
|
|
164
|
+
</Slide>
|
|
165
|
+
);
|
|
166
|
+
} return (
|
|
167
|
+
<CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
|
|
168
|
+
<ListItem {...item.props} key={item.key} className={classes.listItem}>
|
|
169
|
+
<ListItemText primary={item.props.children} className={classes.listItemText} />
|
|
170
|
+
</ListItem>
|
|
171
|
+
</CustomTooltip>
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
function buttonClick(evento, value) {
|
|
176
|
+
evento.preventDefault();
|
|
177
|
+
evento.stopPropagation();
|
|
178
|
+
if (value !== pageNumber) {
|
|
179
|
+
verificaSaidaSlide(value);
|
|
180
|
+
setDados(v => ({ ...v, slide: false }));
|
|
181
|
+
setTimeout(() => {
|
|
182
|
+
setDados(v => ({ ...v, pageNumber: value, direction: retornaDirection(value) }));
|
|
183
|
+
setTimeout(() => setDados(v => ({ ...v, slide: true })), 100);
|
|
184
|
+
}, 200);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
function verificaSaidaSlide(value) {
|
|
189
|
+
let direction = '';
|
|
190
|
+
if ((value === 2 || value === 3) && pageNumber === 1) direction = 'right';
|
|
191
|
+
else if (value === 3 && pageNumber === 2) direction = 'right';
|
|
192
|
+
else if (value === 1 && pageNumber === 2) direction = 'left';
|
|
193
|
+
direction && setDados(v => ({ ...v, direction: direction }));
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
function retornaDirection(value) {
|
|
197
|
+
if (value < pageNumber) return 'right';
|
|
198
|
+
return 'left';
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
return children.map((section, sectionIndex) => (
|
|
202
|
+
<ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
|
|
203
|
+
<ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
|
|
204
|
+
{section.props.children[0].props.children}
|
|
205
|
+
<Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
|
|
206
|
+
<div className={classes.divButton}>
|
|
207
|
+
<div className={classes.areaButton}>
|
|
208
|
+
<div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
|
|
209
|
+
</div>
|
|
210
|
+
<div className={classes.areaButton}>
|
|
211
|
+
<div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
|
|
212
|
+
</div>
|
|
213
|
+
{favoritosLength > 14 &&
|
|
214
|
+
<React.Fragment>
|
|
215
|
+
<div className={classes.areaButton}>
|
|
216
|
+
<div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
|
|
217
|
+
</div>
|
|
218
|
+
</React.Fragment>
|
|
219
|
+
}
|
|
220
|
+
</div>
|
|
221
|
+
</Fade>
|
|
222
|
+
</ListSubheader>
|
|
223
|
+
{retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
|
|
224
|
+
</ul>
|
|
225
|
+
));
|
|
226
|
+
});
|
|
129
227
|
|
|
130
|
-
function carimbaLista(lista) {
|
|
228
|
+
async function carimbaLista(lista) {
|
|
131
229
|
let completo = [];
|
|
132
230
|
lista.map((arr, index) => {
|
|
133
231
|
index === 0 && favoritePage && setDados(v => ({ ...v, favoritosLength: arr.length }));
|
|
@@ -141,20 +239,34 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
141
239
|
setDados(v => ({ ...v, lista: completo }));
|
|
142
240
|
}
|
|
143
241
|
|
|
242
|
+
const buscar = useCallback(async valor => {
|
|
243
|
+
setLoading(true);
|
|
244
|
+
const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
|
|
245
|
+
if (res[resposta || 'result']?.length > 1) await carimbaLista(res[resposta || 'result']);
|
|
246
|
+
else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
|
|
247
|
+
else setError('Erro ao tentar buscar dados.');
|
|
248
|
+
setLoading(false);
|
|
249
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
250
|
+
}, [inputValue, searchParams]);
|
|
251
|
+
|
|
144
252
|
useEffect(() => buscar(), [inputValue, buscar]);
|
|
253
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
145
254
|
useEffect(() => isString(value) && buscar(value), []);
|
|
146
255
|
|
|
147
256
|
return (
|
|
148
257
|
<Autocomplete
|
|
258
|
+
{...props}
|
|
259
|
+
{...{ value, onChange }}
|
|
260
|
+
options={isObject(value) ? dados?.lista.filter(v => filterFunction ? filterFunction(v, value) : true || v[0] !== value[0]) : dados?.lista}
|
|
261
|
+
getOptionLabel={getOptionLabel && (option => getOptionLabel(option, dados?.lista))}
|
|
262
|
+
noOptionsText={inputValue.length < 2 ? 'Digite para pesquisar' : 'Não Encontrado'}
|
|
263
|
+
onInputChange={e => setInputValue(e?.target?.value || '')}
|
|
264
|
+
getOptionSelected={(o, v) => o[0] === v}
|
|
149
265
|
autoComplete
|
|
150
266
|
autoHighlight
|
|
151
267
|
openText='Abrir'
|
|
152
268
|
clearText='Limpar'
|
|
153
269
|
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
270
|
renderInput={params => (
|
|
159
271
|
<TextField
|
|
160
272
|
margin='dense'
|
|
@@ -166,129 +278,18 @@ const AutoCompleteFavorites = ({ action, busca, resposta, label, value, pgCode,
|
|
|
166
278
|
...textFieldProps.InputProps,
|
|
167
279
|
...params.InputProps,
|
|
168
280
|
endAdornment: (
|
|
169
|
-
|
|
281
|
+
<React.Fragment>
|
|
170
282
|
{params.InputProps.endAdornment}
|
|
171
283
|
<Fade in={loading}><CircularProgress disableShrink color={loadingColor || 'inherit'} size={20} /></Fade>
|
|
172
|
-
|
|
284
|
+
</React.Fragment>
|
|
173
285
|
)
|
|
174
286
|
}}
|
|
175
287
|
/>
|
|
176
288
|
)}
|
|
177
|
-
{...props}
|
|
178
|
-
{...{ value, onChange }}
|
|
179
289
|
ListboxComponent={ListboxFavorites}
|
|
180
290
|
ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
|
|
181
291
|
/>
|
|
182
292
|
);
|
|
183
293
|
};
|
|
184
294
|
|
|
185
|
-
export default AutoCompleteFavorites;
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
const ListboxFavorites = forwardRef((props, ref) => {
|
|
189
|
-
|
|
190
|
-
const classes = useStyles();
|
|
191
|
-
const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
|
|
192
|
-
const { pageNumber, favoritosLength, direction, slide } = dados;
|
|
193
|
-
|
|
194
|
-
function retornaInicio() {
|
|
195
|
-
switch (pageNumber) {
|
|
196
|
-
case 1:
|
|
197
|
-
return 0;
|
|
198
|
-
case 2:
|
|
199
|
-
return 7;
|
|
200
|
-
case 3:
|
|
201
|
-
return 14;
|
|
202
|
-
default: return;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
function retornaFim() {
|
|
207
|
-
switch (pageNumber) {
|
|
208
|
-
case 1:
|
|
209
|
-
return 7;
|
|
210
|
-
case 2:
|
|
211
|
-
return 14;
|
|
212
|
-
case 3:
|
|
213
|
-
return favoritosLength;
|
|
214
|
-
default: return;
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
function retornaArray(sectionIndex, section) {
|
|
219
|
-
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) return section.props.children[1].props.children.slice(retornaInicio(), retornaFim());
|
|
220
|
-
return section.props.children[1].props.children;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
function retornaEstrutura(sectionIndex, item) {
|
|
224
|
-
if (sectionIndex === 0 && favoritePage && favoritosLength > 7) {
|
|
225
|
-
return (
|
|
226
|
-
<Slide in={slide} direction={direction}>
|
|
227
|
-
<CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
|
|
228
|
-
<ListItem {...item.props} key={item.key} className={classes.listItem}>
|
|
229
|
-
<ListItemText primary={item.props.children} className={classes.listItemText} />
|
|
230
|
-
</ListItem>
|
|
231
|
-
</CustomTooltip>
|
|
232
|
-
</Slide>
|
|
233
|
-
);
|
|
234
|
-
} return (
|
|
235
|
-
<CustomTooltip title={item.props.children} arrow enterDelay='1000' enterNextDelay='1000' placement='top-end' TransitionComponent={Fade} TransitionProps={{ timeout: { enter: 100, exit: 500 } }}>
|
|
236
|
-
<ListItem {...item.props} key={item.key} className={classes.listItem}>
|
|
237
|
-
<ListItemText primary={item.props.children} className={classes.listItemText} />
|
|
238
|
-
</ListItem>
|
|
239
|
-
</CustomTooltip>
|
|
240
|
-
);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
function buttonClick(evento, value) {
|
|
244
|
-
evento.preventDefault();
|
|
245
|
-
evento.stopPropagation();
|
|
246
|
-
if (value !== pageNumber) {
|
|
247
|
-
verificaSaidaSlide(value);
|
|
248
|
-
setDados(v => ({ ...v, slide: false }));
|
|
249
|
-
setTimeout(() => {
|
|
250
|
-
setDados(v => ({ ...v, pageNumber: value, direction: retornaDirection(value) }));
|
|
251
|
-
setTimeout(() => setDados(v => ({ ...v, slide: true })), 100);
|
|
252
|
-
}, 200);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
function verificaSaidaSlide(value) {
|
|
257
|
-
let direction = '';
|
|
258
|
-
if ((value === 2 || value === 3) && pageNumber === 1) direction = 'right';
|
|
259
|
-
else if (value === 3 && pageNumber === 2) direction = 'right';
|
|
260
|
-
else if (value === 1 && pageNumber === 2) direction = 'left';
|
|
261
|
-
direction && setDados(v => ({ ...v, direction: direction }));
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
function retornaDirection(value) {
|
|
265
|
-
if (value < pageNumber) return 'right';
|
|
266
|
-
return 'left';
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
return children.map((section, sectionIndex) => (
|
|
270
|
-
<ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
|
|
271
|
-
<ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
|
|
272
|
-
{section.props.children[0].props.children}
|
|
273
|
-
<Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
|
|
274
|
-
<div className={classes.divButton}>
|
|
275
|
-
<div className={classes.areaButton}>
|
|
276
|
-
<div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
|
|
277
|
-
</div>
|
|
278
|
-
<div className={classes.areaButton}>
|
|
279
|
-
<div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
|
|
280
|
-
</div>
|
|
281
|
-
{favoritosLength > 14 &&
|
|
282
|
-
<>
|
|
283
|
-
<div className={classes.areaButton}>
|
|
284
|
-
<div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
|
|
285
|
-
</div>
|
|
286
|
-
</>
|
|
287
|
-
}
|
|
288
|
-
</div>
|
|
289
|
-
</Fade>
|
|
290
|
-
</ListSubheader>
|
|
291
|
-
{retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
|
|
292
|
-
</ul>
|
|
293
|
-
));
|
|
294
|
-
});
|
|
295
|
+
export default AutoCompleteFavorites;
|