argous 1.2.152 → 1.2.155

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.
Files changed (5) hide show
  1. package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts +8 -0
  2. package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js +32 -21
  3. package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts +8 -0
  4. package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js +42 -26
  5. package/package.json +1 -1
package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts CHANGED
@@ -61,6 +61,14 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
61
61
  * Parametro que define se terá paginação
62
62
  */
63
63
  favoritePage?: boolean,
64
+ /**
65
+ * Define a largura do listbox
66
+ */
67
+ widthListBox?: number|string,
68
+ /**
69
+ * Prop para utilizar grupo
70
+ */
71
+ group?: boolean,
64
72
  /**
65
73
  * Array contendo nome do grupo
66
74
  */
package/dist/components/AutoCompleteFavorites/AutoCompleteFavorites.js CHANGED
@@ -176,8 +176,17 @@ var useStyles = core_1.makeStyles(function (theme) { return ({
176
176
  color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
177
177
  background: '#0000'
178
178
  }
179
+ },
180
+ popper: {
181
+ zIndex: 1301,
182
+ width: function (_a) {
183
+ var widthListBox = _a.widthListBox;
184
+ return widthListBox ? "" + widthListBox + (testWidth(widthListBox.toString()) ? 'px' : '') + " !important" : '';
185
+ },
179
186
  }
180
187
  }); });
188
+ var testWidth = function (value) { var _a; return ((_a = value.replace(/[0-9]/g, '')) === null || _a === void 0 ? void 0 : _a.length) ? false : true; };
189
+ var CustomPopper = function (props, classes) { return react_1.default.createElement(core_1.Popper, __assign({}, props, { className: classes.popper })); };
181
190
  exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
182
191
  tooltip: theme.palette.type === 'light' ? {
183
192
  fontSize: 15,
@@ -196,7 +205,7 @@ exports.CustomTooltip = core_1.withStyles(function (theme) { return ({
196
205
  }); })(core_1.Tooltip);
197
206
  var ListboxFavorites = react_1.forwardRef(function (props, ref) {
198
207
  var classes = useStyles();
199
- var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
208
+ var children = props.children, favoritePage = props.favoritePage, dados = props.dados, setDados = props.setDados, group = props.group, groupHeaderColor = props.groupHeaderColor, groupTitleColor = props.groupTitleColor;
200
209
  var pageNumber = dados.pageNumber, favoritosLength = dados.favoritosLength, direction = dados.direction, slide = dados.slide;
201
210
  function retornaInicio() {
202
211
  switch (pageNumber) {
@@ -263,27 +272,29 @@ var ListboxFavorites = react_1.forwardRef(function (props, ref) {
263
272
  return 'right';
264
273
  return 'left';
265
274
  }
266
- return children.map(function (section, sectionIndex) {
275
+ return react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), children.map(function (section, sectionIndex) {
267
276
  var _a, _b, _c;
268
- return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }),
269
- 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] } },
270
- section.props.children[0].props.children,
271
- react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
272
- react_1.default.createElement("div", { className: classes.divButton },
273
- react_1.default.createElement("div", { className: classes.areaButton },
274
- 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")),
275
- react_1.default.createElement("div", { className: classes.areaButton },
276
- 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")),
277
- favoritosLength > 14 &&
278
- react_1.default.createElement(react_1.default.Fragment, null,
279
- react_1.default.createElement("div", { className: classes.areaButton },
280
- 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")))))),
281
- retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); })));
282
- });
277
+ return (react_1.default.createElement("ul", __assign({}, props, { className: clsx_1.default('MuiAutocomplete-listbox', classes.box) }), group ?
278
+ react_1.default.createElement(react_1.default.Fragment, null,
279
+ react_1.default.createElement(core_1.ListSubheader, { className: classes.subHeader, style: { backgroundColor: groupHeaderColor === null || groupHeaderColor === void 0 ? void 0 : groupHeaderColor[sectionIndex], color: groupTitleColor === null || groupTitleColor === void 0 ? void 0 : groupTitleColor[sectionIndex] } },
280
+ section.props.children[0].props.children,
281
+ react_1.default.createElement(core_1.Fade, { in: sectionIndex === 0 && favoritePage && favoritosLength > 7 },
282
+ react_1.default.createElement("div", { className: classes.divButton },
283
+ react_1.default.createElement("div", { className: classes.areaButton },
284
+ react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 1); }, className: clsx_1.default((_a = {}, _a[classes.buttonActive] = pageNumber === 1, _a), classes.button) }, "1")),
285
+ react_1.default.createElement("div", { className: classes.areaButton },
286
+ react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 2); }, className: clsx_1.default((_b = {}, _b[classes.buttonActive] = pageNumber === 2, _b), classes.button) }, "2")),
287
+ favoritosLength > 14 &&
288
+ react_1.default.createElement(react_1.default.Fragment, null,
289
+ react_1.default.createElement("div", { className: classes.areaButton },
290
+ react_1.default.createElement("div", { onClick: function (e) { return buttonClick(e, 3); }, className: clsx_1.default((_c = {}, _c[classes.buttonActive] = pageNumber === 3, _c), classes.button) }, "3")))))),
291
+ retornaArray(sectionIndex, section).map(function (item, itemIndex) { return retornaEstrutura(sectionIndex, item); }))
292
+ : retornaEstrutura(sectionIndex, section)));
293
+ }));
283
294
  });
284
295
  var AutoCompleteFavorites = function (_a) {
285
- var action = _a.action, busca = _a.busca, resposta = _a.resposta, autoSearch = _a.autoSearch, label = _a.label, value = _a.value, pgCode = _a.pgCode, favoritePage = _a.favoritePage, 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", "autoSearch", "label", "value", "pgCode", "favoritePage", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
286
- var classes = useStyles();
296
+ var action = _a.action, busca = _a.busca, resposta = _a.resposta, autoSearch = _a.autoSearch, label = _a.label, value = _a.value, pgCode = _a.pgCode, favoritePage = _a.favoritePage, group = _a.group, groupName = _a.groupName, groupHeaderColor = _a.groupHeaderColor, groupTitleColor = _a.groupTitleColor, loadingColor = _a.loadingColor, widthListBox = _a.widthListBox, filterFunction = _a.filterFunction, getOptionLabel = _a.getOptionLabel, _b = _a.onChange, onChange = _b === void 0 ? function (e) { return e; } : _b, _c = _a.textFieldProps, textFieldProps = _c === void 0 ? {} : _c, searchParams = _a.searchParams, props = __rest(_a, ["action", "busca", "resposta", "autoSearch", "label", "value", "pgCode", "favoritePage", "group", "groupName", "groupHeaderColor", "groupTitleColor", "loadingColor", "widthListBox", "filterFunction", "getOptionLabel", "onChange", "textFieldProps", "searchParams"]);
297
+ var classes = useStyles({ widthListBox: widthListBox });
287
298
  var _d = react_1.useState({
288
299
  lista: [],
289
300
  slide: true,
@@ -334,7 +345,7 @@ var AutoCompleteFavorites = function (_a) {
334
345
  return [4 /*yield*/, api_1.serverAction(action, __assign((_a = {}, _a[busca] = valor || inputValue, _a), searchParams), true, pgCode)];
335
346
  case 1:
336
347
  res = _c.sent();
337
- if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1)) return [3 /*break*/, 3];
348
+ if (!(((_b = res[resposta || 'result']) === null || _b === void 0 ? void 0 : _b.length) > 1 && group)) return [3 /*break*/, 3];
338
349
  return [4 /*yield*/, carimbaLista(res[resposta || 'result'])];
339
350
  case 2:
340
351
  _c.sent();
@@ -359,6 +370,6 @@ var AutoCompleteFavorites = function (_a) {
359
370
  react_1.default.createElement(core_1.Fade, { in: loading },
360
371
  react_1.default.createElement(core_1.CircularProgress, { disableShrink: true, color: loadingColor || 'inherit', size: 20 })),
361
372
  !autoSearch && react_1.default.createElement(core_1.IconButton, { size: 'small', onClick: function (e) { return buscar(); }, className: classes.searchButton },
362
- react_1.default.createElement(io_1.IoIosSearch, { size: 20 })))) }) }))); }, ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor } })));
373
+ react_1.default.createElement(io_1.IoIosSearch, { size: 20 })))) }) }))); }, ListboxComponent: ListboxFavorites, ListboxProps: { dados: dados, setDados: setDados, favoritePage: favoritePage, group: group, groupHeaderColor: groupHeaderColor, groupTitleColor: groupTitleColor }, PopperComponent: function (props) { return CustomPopper(props, classes); } })));
363
374
  };
364
375
  exports.default = AutoCompleteFavorites;
package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.d.ts CHANGED
@@ -61,6 +61,14 @@ export interface AutoCompleteFavoritesProps extends Omit<AutocompleteProps<any,
61
61
  * Parametro que define se terá paginação
62
62
  */
63
63
  favoritePage?: boolean,
64
+ /**
65
+ * Define a largura do listbox
66
+ */
67
+ widthListBox?: number|string,
68
+ /**
69
+ * Prop para utilizar grupo
70
+ */
71
+ group?: boolean,
64
72
  /**
65
73
  * Array contendo nome do grupo
66
74
  */
package/lib/components/AutoCompleteFavorites/AutoCompleteFavorites.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { serverAction, setError } from '../../utils/api';
2
- import { CircularProgress, Fade, IconButton, ListItem, ListItemText, ListSubheader, makeStyles, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
2
+ import { CircularProgress, Fade, IconButton, ListItem, ListItemText, ListSubheader, makeStyles, Popper, Slide, TextField, Tooltip, withStyles } from '@material-ui/core';
3
3
  import { Autocomplete } from '@material-ui/lab';
4
4
  import clsx from 'clsx';
5
5
  import { isObject, isString } from 'lodash';
@@ -94,9 +94,17 @@ const useStyles = makeStyles((theme) => ({
94
94
  color: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
95
95
  background: '#0000'
96
96
  }
97
+ },
98
+ popper: {
99
+ zIndex: 1301,
100
+ width: ({ widthListBox }) => widthListBox ? `${widthListBox}${testWidth(widthListBox.toString()) ? 'px' : ''} !important` : '',
97
101
  }
98
102
  }));
99
103
 
104
+ const testWidth = value => value.replace(/[0-9]/g, '')?.length ? false : true;
105
+
106
+ const CustomPopper = (props, classes) => <Popper {...props} className={classes.popper} />;
107
+
100
108
  export const CustomTooltip = withStyles((theme) => ({
101
109
  tooltip: theme.palette.type === 'light' ? {
102
110
  fontSize: 15,
@@ -117,7 +125,7 @@ export const CustomTooltip = withStyles((theme) => ({
117
125
  const ListboxFavorites = forwardRef((props, ref) => {
118
126
 
119
127
  const classes = useStyles();
120
- const { children, favoritePage, dados, setDados, groupHeaderColor, groupTitleColor } = props;
128
+ const { children, favoritePage, dados, setDados, group, groupHeaderColor, groupTitleColor } = props;
121
129
  const { pageNumber, favoritosLength, direction, slide } = dados;
122
130
 
123
131
  function retornaInicio() {
@@ -195,36 +203,43 @@ const ListboxFavorites = forwardRef((props, ref) => {
195
203
  return 'left';
196
204
  }
197
205
 
198
- return children.map((section, sectionIndex) => (
199
- <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
200
- <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
201
- {section.props.children[0].props.children}
202
- <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
203
- <div className={classes.divButton}>
204
- <div className={classes.areaButton}>
205
- <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
206
- </div>
207
- <div className={classes.areaButton}>
208
- <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
209
- </div>
210
- {favoritosLength > 14 &&
206
+ return <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
207
+ {children.map((section, sectionIndex) => (
208
+ <ul {...props} className={clsx('MuiAutocomplete-listbox', classes.box)}>
209
+ {group ?
210
+ <React.Fragment>
211
+ <ListSubheader className={classes.subHeader} style={{ backgroundColor: groupHeaderColor?.[sectionIndex], color: groupTitleColor?.[sectionIndex] }}>
212
+ {section.props.children[0].props.children}
213
+ <Fade in={sectionIndex === 0 && favoritePage && favoritosLength > 7}>
214
+ <div className={classes.divButton}>
215
+ <div className={classes.areaButton}>
216
+ <div onClick={e => buttonClick(e, 1)} className={clsx({ [classes.buttonActive]: pageNumber === 1 }, classes.button)}>1</div>
217
+ </div>
218
+ <div className={classes.areaButton}>
219
+ <div onClick={e => buttonClick(e, 2)} className={clsx({ [classes.buttonActive]: pageNumber === 2 }, classes.button)}>2</div>
220
+ </div>
221
+ {favoritosLength > 14 &&
211
222
  <React.Fragment>
212
223
  <div className={classes.areaButton}>
213
224
  <div onClick={e => buttonClick(e, 3)} className={clsx({ [classes.buttonActive]: pageNumber === 3 }, classes.button)}>3</div>
214
225
  </div>
215
226
  </React.Fragment>
216
- }
217
- </div>
218
- </Fade>
219
- </ListSubheader>
220
- {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
221
- </ul>
222
- ));
227
+ }
228
+ </div>
229
+ </Fade>
230
+ </ListSubheader>
231
+ {retornaArray(sectionIndex, section).map((item, itemIndex) => retornaEstrutura(sectionIndex, item))}
232
+ </React.Fragment>
233
+ : retornaEstrutura(sectionIndex, section)
234
+ }
235
+ </ul>
236
+ ))}
237
+ </ul>;
223
238
  });
224
239
 
225
- const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, groupName, groupHeaderColor, groupTitleColor, loadingColor, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
240
+ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, value, pgCode, favoritePage, group, groupName, groupHeaderColor, groupTitleColor, loadingColor, widthListBox, filterFunction, getOptionLabel, onChange = e => e, textFieldProps = {}, searchParams, ...props }) => {
226
241
 
227
- const classes = useStyles();
242
+ const classes = useStyles({ widthListBox });
228
243
  const [dados, setDados] = useState({
229
244
  lista: [],
230
245
  slide: true,
@@ -265,7 +280,7 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
265
280
  stopCounter();
266
281
  setLoading(true);
267
282
  const res = await serverAction(action, { [busca]: valor || inputValue, ...searchParams }, true, pgCode);
268
- if (res[resposta || 'result']?.length > 1) await carimbaLista(res[resposta || 'result']);
283
+ if (res[resposta || 'result']?.length > 1 && group) await carimbaLista(res[resposta || 'result']);
269
284
  else if (res[resposta || 'result']) setDados({ lista: res[resposta || 'result'] || [] });
270
285
  else setError('Erro ao tentar buscar dados.');
271
286
  setLoading(false);
@@ -316,7 +331,8 @@ const AutoCompleteFavorites = ({ action, busca, resposta, autoSearch, label, val
316
331
  />
317
332
  )}
318
333
  ListboxComponent={ListboxFavorites}
319
- ListboxProps={{ dados, setDados, favoritePage, groupHeaderColor, groupTitleColor }}
334
+ ListboxProps={{ dados, setDados, favoritePage, group, groupHeaderColor, groupTitleColor }}
335
+ PopperComponent={props => CustomPopper(props, classes)}
320
336
  />
321
337
  );
322
338
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "argous",
3
- "version": "1.2.152",
3
+ "version": "1.2.155",
4
4
  "description": "Argous.",
5
5
  "main": "lib/index.js",
6
6
  "author": "Carlos Schneider",