argous 1.2.135 → 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 -0
- package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js +329 -0
- package/dist/components/AutoCompleteFavorites/index.d.ts +2 -0
- package/dist/components/AutoCompleteFavorites/index.js +8 -0
- package/dist/components/index.d.ts +4 -1
- package/dist/components/index.js +4 -1
- package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts +89 -0
- package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js +294 -0
- package/lib/components/AutoCompleteFavorites/index.d.ts +2 -0
- package/lib/components/AutoCompleteFavorites/index.js +1 -0
- package/lib/components/index.d.ts +4 -1
- package/lib/components/index.js +4 -1
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
33
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
34
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
35
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
36
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
37
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
38
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
42
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
43
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
44
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
45
|
+
function step(op) {
|
|
46
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
47
|
+
while (_) try {
|
|
48
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
49
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
50
|
+
switch (op[0]) {
|
|
51
|
+
case 0: case 1: t = op; break;
|
|
52
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
53
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
54
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
55
|
+
default:
|
|
56
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
57
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
58
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
59
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
60
|
+
if (t[2]) _.ops.pop();
|
|
61
|
+
_.trys.pop(); continue;
|
|
62
|
+
}
|
|
63
|
+
op = body.call(thisArg, _);
|
|
64
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
65
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
69
|
+
var t = {};
|
|
70
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
71
|
+
t[p] = s[p];
|
|
72
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
73
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
74
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
75
|
+
t[p[i]] = s[p[i]];
|
|
76
|
+
}
|
|
77
|
+
return t;
|
|
78
|
+
};
|
|
79
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
80
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
81
|
+
};
|
|
82
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
83
|
+
var api_1 = require("../../utils/api");
|
|
84
|
+
var core_1 = require("@material-ui/core");
|
|
85
|
+
var lab_1 = require("@material-ui/lab");
|
|
86
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
87
|
+
var lodash_1 = require("lodash");
|
|
88
|
+
var react_1 = __importStar(require("react"));
|
|
89
|
+
var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
90
|
+
subHeader: {
|
|
91
|
+
display: 'flex',
|
|
92
|
+
alignItems: 'center',
|
|
93
|
+
justifyContent: 'space-between',
|
|
94
|
+
backgroundColor: theme.palette.background.default,
|
|
95
|
+
height: 25
|
|
96
|
+
},
|
|
97
|
+
divButton: {
|
|
98
|
+
display: 'flex',
|
|
99
|
+
alignItems: 'center',
|
|
100
|
+
justifyContent: 'center',
|
|
101
|
+
},
|
|
102
|
+
areaButton: {
|
|
103
|
+
padding: '0px 8px 0px 8px'
|
|
104
|
+
},
|
|
105
|
+
button: theme.palette.type === 'light' ? {
|
|
106
|
+
width: 15,
|
|
107
|
+
height: 15,
|
|
108
|
+
display: 'flex',
|
|
109
|
+
alignItems: 'center',
|
|
110
|
+
justifyContent: 'center',
|
|
111
|
+
cursor: 'pointer',
|
|
112
|
+
color: 'rgba(0, 0, 0, 0.4)',
|
|
113
|
+
'&:hover': {
|
|
114
|
+
fontWeight: 500,
|
|
115
|
+
color: '#000000',
|
|
116
|
+
}
|
|
117
|
+
} : {
|
|
118
|
+
width: 15,
|
|
119
|
+
height: 15,
|
|
120
|
+
display: 'flex',
|
|
121
|
+
alignItems: 'center',
|
|
122
|
+
justifyContent: 'center',
|
|
123
|
+
cursor: 'pointer',
|
|
124
|
+
color: 'rgba(255, 255, 255, 0.4)',
|
|
125
|
+
'&:hover': {
|
|
126
|
+
fontWeight: 500,
|
|
127
|
+
color: '#ffffff',
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
buttonActive: theme.palette.type === 'light' ? {
|
|
131
|
+
color: 'rgba(0, 0, 0, 0.8)',
|
|
132
|
+
'&:hover': {
|
|
133
|
+
fontWeight: 600,
|
|
134
|
+
}
|
|
135
|
+
} : {
|
|
136
|
+
color: 'rgba(255, 255, 255, 0.8)',
|
|
137
|
+
'&:hover': {
|
|
138
|
+
fontWeight: 600,
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
listItem: {
|
|
142
|
+
padding: 0,
|
|
143
|
+
width: '100%',
|
|
144
|
+
cursor: 'pointer',
|
|
145
|
+
'&:hover': {
|
|
146
|
+
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
listItemText: {
|
|
150
|
+
margin: 0,
|
|
151
|
+
width: '100%',
|
|
152
|
+
direction: 'ltr',
|
|
153
|
+
overflow: 'visible',
|
|
154
|
+
whiteSpace: 'nowrap',
|
|
155
|
+
textOverflow: 'ellipsis',
|
|
156
|
+
padding: '0px 0px 0px 6px',
|
|
157
|
+
},
|
|
158
|
+
box: {
|
|
159
|
+
padding: 0,
|
|
160
|
+
overflowX: 'hidden',
|
|
161
|
+
'&::-webkit-scrollbar': {
|
|
162
|
+
width: 5
|
|
163
|
+
},
|
|
164
|
+
'&::-webkit-scrollbar-track': {
|
|
165
|
+
background: '#0000'
|
|
166
|
+
},
|
|
167
|
+
'&::-webkit-scrollbar-thumb': {
|
|
168
|
+
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}); });
|
|
172
|
+
var CustomTooltip = core_1.withStyles(function (theme) { return ({
|
|
173
|
+
tooltip: theme.palette.type === 'light' ? {
|
|
174
|
+
fontSize: 15,
|
|
175
|
+
fontWeight: 400,
|
|
176
|
+
color: 'rgb(255, 255, 255)',
|
|
177
|
+
backgroundColor: '#333333e3',
|
|
178
|
+
} : {
|
|
179
|
+
fontSize: 15,
|
|
180
|
+
fontWeight: 400,
|
|
181
|
+
color: 'rgb(0, 0, 0)',
|
|
182
|
+
backgroundColor: '#fbfbfbd1',
|
|
183
|
+
},
|
|
184
|
+
arrow: {
|
|
185
|
+
color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
|
|
186
|
+
}
|
|
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;
|
|
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
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var AutoCompleteFavorites_1 = require("./AutoCompleteFavorites");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AutoCompleteFavorites_1).default; } });
|
|
@@ -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';
|
package/dist/components/index.js
CHANGED
|
@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
13
13
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
14
14
|
};
|
|
15
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
-
exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
|
|
16
|
+
exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
|
|
17
17
|
var Alert_1 = require("./Alert");
|
|
18
18
|
Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
|
|
19
19
|
__exportStar(require("./Alert"), exports);
|
|
@@ -160,3 +160,6 @@ __exportStar(require("./ThreadLog"), exports);
|
|
|
160
160
|
var UtilAutoComplete_1 = require("./UtilAutoComplete");
|
|
161
161
|
Object.defineProperty(exports, "UtilAutoComplete", { enumerable: true, get: function () { return __importDefault(UtilAutoComplete_1).default; } });
|
|
162
162
|
__exportStar(require("./UtilAutoComplete"), exports);
|
|
163
|
+
var AutoCompleteFavorites_1 = require("./AutoCompleteFavorites");
|
|
164
|
+
Object.defineProperty(exports, "AutoCompleteFavorites", { enumerable: true, get: function () { return __importDefault(AutoCompleteFavorites_1).default; } });
|
|
165
|
+
__exportStar(require("./AutoCompleteFavorites"), exports);
|
|
@@ -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;
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import { serverAction, setError } from '../../utils/api';
|
|
2
|
+
import { CircularProgress, Fade, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
|
|
3
|
+
import { Autocomplete } from '@material-ui/lab';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { isObject, isString } from 'lodash';
|
|
6
|
+
import React, { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
7
|
+
|
|
8
|
+
const useStyles = makeStyles((theme) => ({
|
|
9
|
+
subHeader: {
|
|
10
|
+
display: 'flex',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
justifyContent: 'space-between',
|
|
13
|
+
backgroundColor: theme.palette.background.default,
|
|
14
|
+
height: 25
|
|
15
|
+
},
|
|
16
|
+
divButton: {
|
|
17
|
+
display: 'flex',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
justifyContent: 'center',
|
|
20
|
+
},
|
|
21
|
+
areaButton: {
|
|
22
|
+
padding: '0px 8px 0px 8px'
|
|
23
|
+
},
|
|
24
|
+
button: theme.palette.type === 'light' ? {
|
|
25
|
+
width: 15,
|
|
26
|
+
height: 15,
|
|
27
|
+
display: 'flex',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
justifyContent: 'center',
|
|
30
|
+
cursor: 'pointer',
|
|
31
|
+
color: 'rgba(0, 0, 0, 0.4)',
|
|
32
|
+
'&:hover': {
|
|
33
|
+
fontWeight: 500,
|
|
34
|
+
color: '#000000',
|
|
35
|
+
}
|
|
36
|
+
} : {
|
|
37
|
+
width: 15,
|
|
38
|
+
height: 15,
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
cursor: 'pointer',
|
|
43
|
+
color: 'rgba(255, 255, 255, 0.4)',
|
|
44
|
+
'&:hover': {
|
|
45
|
+
fontWeight: 500,
|
|
46
|
+
color: '#ffffff',
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
buttonActive: theme.palette.type === 'light' ? {
|
|
50
|
+
color: 'rgba(0, 0, 0, 0.8)',
|
|
51
|
+
'&:hover': {
|
|
52
|
+
fontWeight: 600,
|
|
53
|
+
}
|
|
54
|
+
} : {
|
|
55
|
+
color: 'rgba(255, 255, 255, 0.8)',
|
|
56
|
+
'&:hover': {
|
|
57
|
+
fontWeight: 600,
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
listItem: {
|
|
61
|
+
padding: 0,
|
|
62
|
+
width: '100%',
|
|
63
|
+
cursor: 'pointer',
|
|
64
|
+
'&:hover': {
|
|
65
|
+
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.08)'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
listItemText: {
|
|
69
|
+
margin: 0,
|
|
70
|
+
width: '100%',
|
|
71
|
+
direction: 'ltr',
|
|
72
|
+
overflow: 'visible',
|
|
73
|
+
whiteSpace: 'nowrap',
|
|
74
|
+
textOverflow: 'ellipsis',
|
|
75
|
+
padding: '0px 0px 0px 6px',
|
|
76
|
+
},
|
|
77
|
+
box: {
|
|
78
|
+
padding: 0,
|
|
79
|
+
overflowX: 'hidden',
|
|
80
|
+
'&::-webkit-scrollbar': {
|
|
81
|
+
width: 5
|
|
82
|
+
},
|
|
83
|
+
'&::-webkit-scrollbar-track': {
|
|
84
|
+
background: '#0000'
|
|
85
|
+
},
|
|
86
|
+
'&::-webkit-scrollbar-thumb': {
|
|
87
|
+
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}));
|
|
91
|
+
|
|
92
|
+
const CustomTooltip = withStyles((theme) => ({
|
|
93
|
+
tooltip: theme.palette.type === 'light' ? {
|
|
94
|
+
fontSize: 15,
|
|
95
|
+
fontWeight: 400,
|
|
96
|
+
color: 'rgb(255, 255, 255)',
|
|
97
|
+
backgroundColor: '#333333e3',
|
|
98
|
+
} : {
|
|
99
|
+
fontSize: 15,
|
|
100
|
+
fontWeight: 400,
|
|
101
|
+
color: 'rgb(0, 0, 0)',
|
|
102
|
+
backgroundColor: '#fbfbfbd1',
|
|
103
|
+
},
|
|
104
|
+
arrow: {
|
|
105
|
+
color: theme.palette.type === 'light' ? '#333333e3' : '#fbfbfbd1'
|
|
106
|
+
}
|
|
107
|
+
}))(Tooltip);
|
|
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
|
+
|
|
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
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } 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';
|
package/lib/components/index.js
CHANGED
|
@@ -143,4 +143,7 @@ export { default as ThreadLog } from './ThreadLog';
|
|
|
143
143
|
export * from './ThreadLog';
|
|
144
144
|
|
|
145
145
|
export { default as UtilAutoComplete } from './UtilAutoComplete';
|
|
146
|
-
export * from './UtilAutoComplete';
|
|
146
|
+
export * from './UtilAutoComplete';
|
|
147
|
+
|
|
148
|
+
export { default as AutoCompleteFavorites } from './AutoCompleteFavorites';
|
|
149
|
+
export * from './AutoCompleteFavorites';
|