@ssplib/react-components 0.0.213 → 0.0.214

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 (12) hide show
  1. package/components/form/input/FetchAutoComplete.d.ts +5 -1
  2. package/components/form/input/FetchAutoComplete.js +16 -5
  3. package/components/form/input/FixedAutoComplete.d.ts +5 -1
  4. package/components/form/input/FixedAutoComplete.js +15 -5
  5. package/components/form/input/Input.d.ts +2 -1
  6. package/components/form/input/Input.js +6 -3
  7. package/components/form/input/MaskInput.js +24 -14
  8. package/components/form/input/MultInput.d.ts +2 -1
  9. package/components/form/input/MultInput.js +4 -1
  10. package/components/form/table/Table.js +72 -47
  11. package/components/navbar/TabNavBar.js +3 -3
  12. package/package.json +1 -1
package/components/form/input/FetchAutoComplete.d.ts CHANGED
@@ -1,8 +1,12 @@
1
1
  /// <reference types="react" />
2
- export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, route, onChange, xs, sm, md, }: {
2
+ export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, route, onChange, xs, sm, watchValue, md, }: {
3
3
  name: string;
4
4
  url: string;
5
5
  title: string;
6
+ watchValue?: {
7
+ id: number | string;
8
+ label: string;
9
+ };
6
10
  customLoadingText?: string;
7
11
  defaultValue?: number;
8
12
  required?: boolean;
package/components/form/input/FetchAutoComplete.js CHANGED
@@ -31,12 +31,13 @@ const lodash_get_1 = __importDefault(require("lodash.get"));
31
31
  const react_1 = __importStar(require("react"));
32
32
  const auth_1 = require("../../../context/auth");
33
33
  const form_1 = require("../../../context/form");
34
- function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, md, }) {
34
+ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, watchValue, md, }) {
35
35
  const context = (0, react_1.useContext)(form_1.FormContext);
36
36
  const [loading, setLoading] = (0, react_1.useState)(true);
37
37
  const [list, setList] = (0, react_1.useState)([]);
38
38
  const [loadingText, setLoadingText] = (0, react_1.useState)('Carregando...');
39
39
  const [dValue, setDValue] = (0, react_1.useState)(null);
40
+ const [value, setValue] = (0, react_1.useState)(null);
40
41
  const { user } = (0, react_1.useContext)(auth_1.AuthContext);
41
42
  (0, react_1.useEffect)(() => {
42
43
  if (defaultValue) {
@@ -53,7 +54,7 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
53
54
  if (value.length > 0) {
54
55
  setList((0, lodash_get_1.default)(j, route, j));
55
56
  setLoading(false);
56
- context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue);
57
+ context.formSetValue(name, defaultValue);
57
58
  setDValue(value[0]);
58
59
  }
59
60
  else {
@@ -67,6 +68,13 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
67
68
  });
68
69
  }
69
70
  }, []);
71
+ (0, react_1.useEffect)(() => {
72
+ if (watchValue) {
73
+ setValue(watchValue);
74
+ context.formSetValue(name, watchValue.id);
75
+ onChange(watchValue.id);
76
+ }
77
+ }, [watchValue]);
70
78
  function onFocus() {
71
79
  if ((defaultValue || !shouldRefetch) && list.length > 0)
72
80
  return;
@@ -91,8 +99,11 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
91
99
  });
92
100
  }
93
101
  function handleAutoCompleteChange(value) {
94
- context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
95
- onChange(value ? value.id : -1);
102
+ if (value) {
103
+ setValue(value);
104
+ context.formSetValue(name, value.id);
105
+ onChange(value.id);
106
+ }
96
107
  }
97
108
  if (defaultValue && list.length <= 0 && !dValue)
98
109
  return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
@@ -105,7 +116,7 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
105
116
  return 'Este campo é obrigatório';
106
117
  },
107
118
  }), { hidden: true })),
108
- react_1.default.createElement(material_1.Autocomplete, { loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
119
+ react_1.default.createElement(material_1.Autocomplete, { value: value, loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
109
120
  var _a;
110
121
  return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, onFocus: onFocus, error: (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
111
122
  }, sx: {
package/components/form/input/FixedAutoComplete.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  /// <reference types="react" />
2
- export declare function FixedAutoComplete({ name, title, required, list, defaultValue, onChange, xs, sm, md, }: {
2
+ export declare function FixedAutoComplete({ name, title, required, list, defaultValue, onChange, xs, sm, watchValue, md, }: {
3
3
  name: string;
4
4
  title: string;
5
+ watchValue?: {
6
+ id: number | string;
7
+ label: string;
8
+ };
5
9
  list: Object[];
6
10
  customLoadingText?: string;
7
11
  defaultValue?: Object;
package/components/form/input/FixedAutoComplete.js CHANGED
@@ -31,16 +31,26 @@ const material_1 = require("@mui/material");
31
31
  const lodash_get_1 = __importDefault(require("lodash.get"));
32
32
  const react_1 = __importStar(require("react"));
33
33
  const form_1 = require("../../../context/form");
34
- function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, md, }) {
34
+ function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, watchValue, md, }) {
35
35
  const context = (0, react_1.useContext)(form_1.FormContext);
36
+ const [value, setValue] = (0, react_1.useState)(null);
36
37
  (0, react_1.useEffect)(() => {
37
38
  if (defaultValue)
38
39
  context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue.id);
39
40
  }, []);
41
+ (0, react_1.useEffect)(() => {
42
+ if (watchValue) {
43
+ setValue(watchValue);
44
+ context.formSetValue(name, watchValue.id);
45
+ onChange(watchValue.id);
46
+ }
47
+ }, [watchValue]);
40
48
  function handleAutoCompleteChange(value) {
41
- console.log(value);
42
- context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
43
- onChange(value ? value.id : -1);
49
+ if (value) {
50
+ setValue(value);
51
+ context.formSetValue(name, value.id);
52
+ onChange(value.id);
53
+ }
44
54
  }
45
55
  return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
46
56
  title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
@@ -50,7 +60,7 @@ function FixedAutoComplete({ name, title, required = false, list, defaultValue,
50
60
  return 'Este campo é obrigatório';
51
61
  },
52
62
  }), { hidden: true })),
53
- react_1.default.createElement(material_1.Autocomplete, { options: list, defaultValue: defaultValue, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
63
+ react_1.default.createElement(material_1.Autocomplete, { value: value, options: list, defaultValue: defaultValue, getOptionLabel: (option) => (option.label ? option.label.toString() : 'Não Encontrado'), isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
54
64
  var _a;
55
65
  return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, error: (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
56
66
  }, size: 'small', sx: {
package/components/form/input/Input.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, ...props }: {
2
+ export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, watchValue, ...props }: {
3
3
  type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password' | 'cep' | 'sei';
4
4
  name: string;
5
+ watchValue?: string;
5
6
  title?: string;
6
7
  required?: boolean;
7
8
  numberMask?: string;
package/components/form/input/Input.js CHANGED
@@ -44,9 +44,12 @@ const react_1 = __importStar(require("react"));
44
44
  const MaskInput_1 = __importDefault(require("./MaskInput"));
45
45
  const form_1 = require("../../../context/form");
46
46
  function Input(_a) {
47
- var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md"]);
47
+ var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md, watchValue = '' } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md", "watchValue"]);
48
48
  const context = (0, react_1.useContext)(form_1.FormContext);
49
- const chooseInput = (0, react_1.useCallback)(() => {
49
+ (0, react_1.useEffect)(() => {
50
+ context.formSetValue(props.name, watchValue);
51
+ }, [watchValue]);
52
+ const chooseInput = () => {
50
53
  const inputConfig = {
51
54
  fullWidth: true,
52
55
  size: 'small',
@@ -154,7 +157,7 @@ function Input(_a) {
154
157
  mask: '00000[000000]',
155
158
  } }));
156
159
  }
157
- }, [props, context, type]);
160
+ };
158
161
  return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
159
162
  props.title && (react_1.default.createElement(material_1.InputLabel, { htmlFor: 'campo', required: props.required }, props.title)),
160
163
  chooseInput()));
package/components/form/input/MaskInput.js CHANGED
@@ -42,8 +42,21 @@ const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props,
42
42
  const { onChange, maskProps, onMask, maskValue, setMaskValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue"]);
43
43
  const [mask, setMask] = (0, react_1.useState)(maskProps.mask);
44
44
  delete prop.value;
45
- return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, inputRef: ref, onAccept: (value) => {
46
- setMaskValue(value);
45
+ const myRef = (0, react_1.useRef)(null);
46
+ const [myValue, setMyValue] = (0, react_1.useState)('');
47
+ const context = (0, react_1.useContext)(form_1.FormContext);
48
+ (0, react_1.useEffect)(() => {
49
+ const value = context.formGetValues(prop.name);
50
+ if (value) {
51
+ setMyValue(value);
52
+ }
53
+ }, [context.formWatch(prop.name)]);
54
+ (0, react_1.useEffect)(() => {
55
+ context.formSetValue(prop.name, myRef.current.element.value);
56
+ }, [myValue]);
57
+ return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, value: myValue, ref: myRef, inputRef: ref, onChange: (e) => { }, onAccept: (value, mask) => {
58
+ setMyValue(value);
59
+ mask.updateValue();
47
60
  if (!onMask)
48
61
  return;
49
62
  onMask(value, setMask);
@@ -51,18 +64,15 @@ const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props,
51
64
  });
52
65
  function MaskInput(props) {
53
66
  const context = (0, react_1.useContext)(form_1.FormContext);
54
- const [inputValue, setInputValue] = react_1.default.useState('');
55
67
  const [maskValue, setMaskValue] = (0, react_1.useState)('');
56
- const onChangeInput = (0, react_1.useCallback)((e) => {
57
- setInputValue(e.target.value);
58
- }, []);
59
- return (react_1.default.createElement(material_1.TextField, Object.assign({}, props.formConfig, { value: inputValue, onInput: (e) => {
60
- const name = props.formConfig.name;
61
- const value = e.target.value;
62
- context.formSetValue(name, value);
63
- }, defaultValue: props.defaultValue, onFocus: (e) => setMaskValue(e.target.value), onChange: onChangeInput, InputProps: {
64
- inputComponent: TextMaskCustom,
65
- inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
66
- }, disabled: props.disabled, fullWidth: true })));
68
+ return (react_1.default.createElement(react_1.default.Fragment, null,
69
+ react_1.default.createElement(material_1.TextField, Object.assign({}, props.formConfig, { onInput: (e) => {
70
+ const name = props.formConfig.name;
71
+ const value = e.target.value;
72
+ context.formSetValue(name, value);
73
+ }, InputProps: {
74
+ inputComponent: TextMaskCustom,
75
+ inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
76
+ }, disabled: props.disabled, fullWidth: true }))));
67
77
  }
68
78
  exports.default = MaskInput;
package/components/form/input/MultInput.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
- export default function MultInput({ name, required, title, customPlaceholder, defaultValue, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
2
+ export default function MultInput({ name, required, title, customPlaceholder, defaultValue, xs, sm, watchValue, inputMinLength, inputMaxLength, md, ...props }: {
3
3
  name: string;
4
4
  title?: string;
5
+ watchValue?: string;
5
6
  customPlaceholder?: string;
6
7
  required?: boolean;
7
8
  defaultValue?: string;
package/components/form/input/MultInput.js CHANGED
@@ -44,8 +44,11 @@ const react_1 = __importStar(require("react"));
44
44
  const form_1 = require("../../../context/form");
45
45
  function MultInput(_a) {
46
46
  var _b;
47
- var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
47
+ var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, watchValue = '', inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "watchValue", "inputMinLength", "inputMaxLength", "md"]);
48
48
  const context = (0, react_1.useContext)(form_1.FormContext);
49
+ (0, react_1.useEffect)(() => {
50
+ context.formSetValue(name, watchValue);
51
+ }, [watchValue]);
49
52
  return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
50
53
  title && (react_1.default.createElement(InputLabel_1.default, { required: required, sx: { textTransform: 'capitalize' } }, title)),
51
54
  react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, rows: 3, defaultValue: defaultValue }, context.formRegister(name, {
package/components/form/table/Table.js CHANGED
@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
35
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
36
27
  };
@@ -77,6 +68,9 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
77
68
  const [listPage, setListPage] = (0, react_1.useState)(1);
78
69
  const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
79
70
  const [oldSelectState, setOldSelectState] = (0, react_1.useState)('');
71
+ const [expandObj, setExpandObj] = (0, react_1.useState)({});
72
+ const [showExpandObj, setShowExpandObj] = (0, react_1.useState)({});
73
+ const [showExpandObjOnExited, setShowExpandObjOnExited] = (0, react_1.useState)({});
80
74
  // filters states
81
75
  const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
82
76
  const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
@@ -423,29 +417,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
423
417
  link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
424
418
  link.click();
425
419
  }, [list]);
426
- const getStatusMsg = (0, react_1.useCallback)((cod) => {
427
- switch (cod) {
428
- case 'P':
429
- return (react_1.default.createElement(Typography_1.default, { color: '#F59E0B', fontWeight: 600, fontFamily: 'Inter' }, "EM AN\u00C1LISE"));
430
- case 'A':
431
- return (react_1.default.createElement(Typography_1.default, { color: '#0EA5E9', fontWeight: 600, fontFamily: 'Inter' }, "CADASTRADO"));
432
- case 'C':
433
- return (react_1.default.createElement(Typography_1.default, { color: '#a1a1a1', fontWeight: 600, fontFamily: 'Inter' }, "CANCELADO"));
434
- case 'R':
435
- return (react_1.default.createElement(Typography_1.default, { color: '#EF4444', fontWeight: 600, fontFamily: 'Inter' }, "REPROVADO"));
436
- case 'L':
437
- return (react_1.default.createElement(Typography_1.default, { color: '#22C55E', fontWeight: 600, fontFamily: 'Inter' }, "LICENCIADO"));
438
- case 'PA':
439
- return (react_1.default.createElement(Typography_1.default, { color: '#6366F1', fontWeight: 600, fontFamily: 'Inter' }, "PR\u00C9 APROVADO"));
440
- case 'FP':
441
- return (react_1.default.createElement(Typography_1.default, { color: '#991b1b', fontWeight: 600, fontFamily: 'Inter' }, "FORA DO PRAZO"));
442
- }
443
- }, []);
444
- function getSelectValues(url) {
445
- return __awaiter(this, void 0, void 0, function* () {
446
- return ['dd'];
447
- });
448
- }
449
420
  (0, react_1.useEffect)(() => {
450
421
  filterBasedOnList(appliedFilters);
451
422
  }, [appliedFilters]);
@@ -483,10 +454,18 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
483
454
  function category(type, keyName, uniqueName, customValue, referencekey) {
484
455
  if (type === 'a-z') {
485
456
  rawList = rawList.sort((a, b) => {
486
- const aValue = String(a[keyName]);
487
- const bValue = String(b[keyName]);
488
- const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
489
- const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
457
+ const aValue = a[keyName];
458
+ const bValue = b[keyName];
459
+ let valueA = aValue;
460
+ let valueB = bValue;
461
+ if (typeof aValue === 'string' || typeof bValue === 'string') {
462
+ valueA = String(aValue).toLowerCase();
463
+ valueB = String(bValue).toLowerCase();
464
+ }
465
+ console.table({
466
+ values: valueA + ' < ' + valueB,
467
+ result: valueA < valueB,
468
+ });
490
469
  if (valueA < valueB) {
491
470
  return -1;
492
471
  }
@@ -498,10 +477,14 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
498
477
  } //
499
478
  else if (type === 'z-a') {
500
479
  rawList = rawList.sort((a, b) => {
501
- const aValue = String(a[keyName]);
502
- const bValue = String(b[keyName]);
503
- const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
504
- const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
480
+ const aValue = a[keyName];
481
+ const bValue = b[keyName];
482
+ let valueA = aValue;
483
+ let valueB = bValue;
484
+ if (typeof aValue === 'string' || typeof bValue === 'string') {
485
+ valueA = String(aValue).toLowerCase();
486
+ valueB = String(bValue).toLowerCase();
487
+ }
505
488
  if (valueA < valueB) {
506
489
  return 1;
507
490
  }
@@ -704,6 +687,25 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
704
687
  return value;
705
688
  });
706
689
  };
690
+ function expandContent(str, index) {
691
+ const content = str.toString();
692
+ if (content.length <= 100) {
693
+ return content;
694
+ }
695
+ return expandObj[index] === true ? content : content.substring(0, 100) + '...';
696
+ }
697
+ // effect usado quando for mostrar "VER MAIS" e "VER MENOS"
698
+ (0, react_1.useEffect)(() => {
699
+ const start = currentPage * itemsCount;
700
+ const newList = list.slice(start, start + itemsCount);
701
+ let obj = {};
702
+ newList.forEach((x, index) => {
703
+ columns.forEach((c) => {
704
+ obj[index] = obj[index] === true ? true : (0, lodash_get_1.default)(x, c.keyName).toString().length >= 100;
705
+ });
706
+ });
707
+ setShowExpandObj(obj);
708
+ }, [list, itemsCount, currentPage]);
707
709
  if (error)
708
710
  return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
709
711
  react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
@@ -763,15 +765,38 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
763
765
  " de ",
764
766
  list.length)))),
765
767
  react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
766
- react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: { padding: 0.5, backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white', paddingY: 2, borderTop: 'solid 1.5px #E2E8F0' }, elevation: 0 },
768
+ react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: {
769
+ padding: 0.5,
770
+ backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white',
771
+ paddingTop: 2,
772
+ borderTop: 'solid 1.5px #E2E8F0',
773
+ position: 'relative',
774
+ }, elevation: 0 },
767
775
  react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
768
- columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1) },
776
+ columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1), sx: {
777
+ overflow: 'hidden',
778
+ } },
769
779
  react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
770
780
  react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
771
- react_1.default.createElement(material_1.Box, { paddingLeft: 1 },
772
- react_1.default.createElement(material_1.Box, { sx: { wordWrap: 'break-word', color: '#1E293B', fontSize: 16 }, fontFamily: 'Inter' }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : c.keyName === statusKeyName ? (getStatusMsg((0, lodash_get_1.default)(x, c.keyName))) : (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, lodash_get_1.default)(x, c.keyName) } }))))))),
781
+ react_1.default.createElement(material_1.Box, { paddingLeft: 1, position: 'relative' },
782
+ react_1.default.createElement(material_1.Collapse, { in: expandObj[index] === true, collapsedSize: 100, onExited: (e) => setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: false }))) },
783
+ react_1.default.createElement(material_1.Box, { sx: {
784
+ wordWrap: 'break-word',
785
+ color: '#1E293B',
786
+ fontSize: 16,
787
+ }, fontFamily: 'Inter' },
788
+ react_1.default.createElement(material_1.Box, null, c.customComponent ? c.customComponent((0, lodash_get_1.default)(x, c.keyName), x) : react_1.default.createElement(material_1.Box, { color: 'transparent' }, (0, lodash_get_1.default)(x, c.keyName, ''))),
789
+ react_1.default.createElement(material_1.Box, { position: 'absolute', top: 0 }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : (react_1.default.createElement(react_1.default.Fragment, null, showExpandObjOnExited[index] ? ((0, lodash_get_1.default)(x, c.keyName, '')) : (0, lodash_get_1.default)(x, c.keyName, '').toString().length >= 100 ? (react_1.default.createElement(react_1.default.Fragment, null, (0, lodash_get_1.default)(x, c.keyName, '').toString().substring(0, 100) + '...')) : ((0, lodash_get_1.default)(x, c.keyName, ''))))))))))),
773
790
  react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
774
- react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))))))))),
791
+ react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))),
792
+ showExpandObj[index] && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', bottom: 0, width: '100%' },
793
+ react_1.default.createElement(material_1.Button, { onClick: (e) => {
794
+ setExpandObj((s) => (Object.assign(Object.assign({}, s), { [index]: !s[index] })));
795
+ setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: true })));
796
+ }, sx: {
797
+ padding: 0,
798
+ textTransform: 'capitalize',
799
+ }, endIcon: expandObj[index] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null) }, expandObj[index] ? 'Ver Menos' : 'Ver Mais'))))))))),
775
800
  getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { padding: 1, direction: {
776
801
  xs: 'column',
777
802
  md: 'row',
@@ -823,7 +848,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
823
848
  }), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
824
849
  react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5)' } })))),
825
850
  react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
826
- react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
851
+ react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, fIndex }) },
827
852
  react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
828
853
  if (idx === fIndex)
829
854
  return !x;
@@ -836,7 +861,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
836
861
  react_1.default.createElement(material_1.ListItemText, { primary: f }),
837
862
  filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
838
863
  react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
839
- react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x) => (react_1.default.createElement(react_1.default.Fragment, null, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
864
+ react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x, index) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, index }) }, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
840
865
  bgcolor: '#b7e4c7',
841
866
  ':hover': { bgcolor: '#b7e4c7' },
842
867
  })) },
package/components/navbar/TabNavBar.js CHANGED
@@ -104,9 +104,9 @@ function TabNavBar(_a) {
104
104
  react_1.default.createElement(link_1.default, { href: '/' }, next ? react_1.default.createElement(image_1.default, { src: img, alt: title, width: 40, height: 40 }) : react_1.default.createElement("img", { src: img, height: 35 })),
105
105
  react_1.default.createElement(material_1.Box, null,
106
106
  react_1.default.createElement(material_1.Typography, { variant: 'subtitle1', fontWeight: 600 }, title))),
107
- react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2, sx: { display: { xs: 'none', md: 'flex' } } }, links.map((x) => {
107
+ react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2, sx: { display: { xs: 'none', md: 'flex' } } }, links.map((x, index) => {
108
108
  var _a;
109
- return (react_1.default.createElement(material_1.Box, { borderBottom: next ? (verificarRota((_a = router === null || router === void 0 ? void 0 : router.pathname) !== null && _a !== void 0 ? _a : '', x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, sx: {
109
+ return (react_1.default.createElement(material_1.Box, { borderBottom: next ? (verificarRota((_a = router === null || router === void 0 ? void 0 : router.pathname) !== null && _a !== void 0 ? _a : '', x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, key: JSON.stringify({ x, index }), sx: {
110
110
  ':hover': {
111
111
  backgroundColor: '#fcfcfc',
112
112
  cursor: 'pointer',
@@ -126,7 +126,7 @@ function TabNavBar(_a) {
126
126
  } }, links.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
127
127
  react_1.default.createElement(material_1.IconButton, { onClick: onMenuClick },
128
128
  react_1.default.createElement(Menu_1.default, null)),
129
- react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x) => (react_1.default.createElement(material_1.MenuItem, { key: `navmenu${x}`, onClick: (e) => onMenuItemClick(e, x.path) },
129
+ react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x, index) => (react_1.default.createElement(material_1.MenuItem, { key: JSON.stringify({ x, index }), onClick: (e) => onMenuItemClick(e, x.path) },
130
130
  react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, x.name)))))))),
131
131
  react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', alignItems: 'center', sx: { width: { md: '100%' } }, paddingY: 1 },
132
132
  react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 2 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.213",
3
+ "version": "0.0.214",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",