@ssplib/react-components 0.0.251 → 0.0.252

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 (115) hide show
  1. package/components/detalhes/Category.js +14 -0
  2. package/components/detalhes/Field.js +42 -0
  3. package/components/detalhes/FieldLabel.js +28 -0
  4. package/components/detalhes/File.js +62 -0
  5. package/components/form/checkbox/CheckBox.js +18 -0
  6. package/{src/components → components}/form/checkbox/CheckBoxAdditional.js +37 -11
  7. package/components/form/checkbox/CheckBoxWarning.js +43 -0
  8. package/components/form/checkbox/RequiredCheckBoxValidator.js +85 -0
  9. package/components/form/date/DatePicker.js +100 -0
  10. package/components/form/date/TimePicker.js +82 -0
  11. package/components/form/file/DropFileUpload.js +236 -0
  12. package/components/form/file/FileUpload.js +200 -0
  13. package/components/form/input/ActiveInput.js +33 -0
  14. package/components/form/input/AutoComplete.js +69 -0
  15. package/components/form/input/FetchAutoComplete.js +132 -0
  16. package/components/form/input/FixedAutoComplete.js +76 -0
  17. package/{src/components → components}/form/input/Input.js +52 -22
  18. package/components/form/input/MaskInput.js +78 -0
  19. package/components/form/input/MultInput.js +67 -0
  20. package/components/form/input/OtherCheckBox.js +56 -0
  21. package/components/form/stepper/Stepper.js +135 -0
  22. package/components/form/stepper/StepperBlock.js +97 -0
  23. package/components/form/switch/Switch.js +54 -0
  24. package/components/form/switch/ToggleVisibility.js +61 -0
  25. package/{src/components → components}/form/table/Table.js +230 -200
  26. package/components/icons/icons.js +24 -0
  27. package/components/modal/Modal.js +105 -0
  28. package/components/navbar/NavBar.js +156 -0
  29. package/components/navbar/TabNavBar.js +164 -0
  30. package/components/providers/FormProvider.js +49 -0
  31. package/components/providers/KeycloakAuthProvider.js +99 -0
  32. package/{src/components → components}/providers/OAuthProvider.js +49 -19
  33. package/components/providers/SspComponentsProvider.js +18 -0
  34. package/{src/components → components}/utils/Bt.js +13 -7
  35. package/components/utils/CustomMenu.js +39 -0
  36. package/context/auth.js +5 -0
  37. package/context/form.js +5 -0
  38. package/index.js +80 -0
  39. package/package.json +2 -2
  40. package/types/auth.js +2 -0
  41. package/{src/types → types}/form.js +7 -4
  42. package/src/components/detalhes/Category.js +0 -7
  43. package/src/components/detalhes/Field.js +0 -35
  44. package/src/components/detalhes/FieldLabel.js +0 -21
  45. package/src/components/detalhes/File.js +0 -35
  46. package/src/components/form/checkbox/CheckBox.js +0 -12
  47. package/src/components/form/checkbox/CheckBoxWarning.js +0 -14
  48. package/src/components/form/checkbox/RequiredCheckBoxValidator.js +0 -56
  49. package/src/components/form/date/DatePicker.js +0 -71
  50. package/src/components/form/date/TimePicker.js +0 -53
  51. package/src/components/form/file/DropFileUpload.js +0 -207
  52. package/src/components/form/file/FileUpload.js +0 -171
  53. package/src/components/form/input/ActiveInput.js +0 -27
  54. package/src/components/form/input/AutoComplete.js +0 -40
  55. package/src/components/form/input/FetchAutoComplete.js +0 -103
  56. package/src/components/form/input/FixedAutoComplete.js +0 -46
  57. package/src/components/form/input/MaskInput.js +0 -52
  58. package/src/components/form/input/MultInput.js +0 -38
  59. package/src/components/form/input/OtherCheckBox.js +0 -27
  60. package/src/components/form/stepper/Stepper.js +0 -105
  61. package/src/components/form/stepper/StepperBlock.js +0 -67
  62. package/src/components/form/switch/Switch.js +0 -27
  63. package/src/components/form/switch/ToggleVisibility.js +0 -33
  64. package/src/components/icons/icons.js +0 -16
  65. package/src/components/modal/Modal.js +0 -75
  66. package/src/components/navbar/NavBar.js +0 -127
  67. package/src/components/navbar/TabNavBar.js +0 -135
  68. package/src/components/providers/FormProvider.js +0 -23
  69. package/src/components/providers/KeycloakAuthProvider.js +0 -69
  70. package/src/components/providers/SspComponentsProvider.js +0 -11
  71. package/src/components/utils/CustomMenu.js +0 -33
  72. package/src/context/auth.js +0 -2
  73. package/src/context/form.js +0 -2
  74. package/src/index.js +0 -41
  75. package/src/types/auth.js +0 -1
  76. /package/{src/components → components}/detalhes/Category.d.ts +0 -0
  77. /package/{src/components → components}/detalhes/Field.d.ts +0 -0
  78. /package/{src/components → components}/detalhes/FieldLabel.d.ts +0 -0
  79. /package/{src/components → components}/detalhes/File.d.ts +0 -0
  80. /package/{src/components → components}/form/checkbox/CheckBox.d.ts +0 -0
  81. /package/{src/components → components}/form/checkbox/CheckBoxAdditional.d.ts +0 -0
  82. /package/{src/components → components}/form/checkbox/CheckBoxWarning.d.ts +0 -0
  83. /package/{src/components → components}/form/checkbox/RequiredCheckBoxValidator.d.ts +0 -0
  84. /package/{src/components → components}/form/date/DatePicker.d.ts +0 -0
  85. /package/{src/components → components}/form/date/TimePicker.d.ts +0 -0
  86. /package/{src/components → components}/form/file/DropFileUpload.d.ts +0 -0
  87. /package/{src/components → components}/form/file/FileUpload.d.ts +0 -0
  88. /package/{src/components → components}/form/input/ActiveInput.d.ts +0 -0
  89. /package/{src/components → components}/form/input/AutoComplete.d.ts +0 -0
  90. /package/{src/components → components}/form/input/FetchAutoComplete.d.ts +0 -0
  91. /package/{src/components → components}/form/input/FixedAutoComplete.d.ts +0 -0
  92. /package/{src/components → components}/form/input/Input.d.ts +0 -0
  93. /package/{src/components → components}/form/input/MaskInput.d.ts +0 -0
  94. /package/{src/components → components}/form/input/MultInput.d.ts +0 -0
  95. /package/{src/components → components}/form/input/OtherCheckBox.d.ts +0 -0
  96. /package/{src/components → components}/form/stepper/Stepper.d.ts +0 -0
  97. /package/{src/components → components}/form/stepper/StepperBlock.d.ts +0 -0
  98. /package/{src/components → components}/form/switch/Switch.d.ts +0 -0
  99. /package/{src/components → components}/form/switch/ToggleVisibility.d.ts +0 -0
  100. /package/{src/components → components}/form/table/Table.d.ts +0 -0
  101. /package/{src/components → components}/icons/icons.d.ts +0 -0
  102. /package/{src/components → components}/modal/Modal.d.ts +0 -0
  103. /package/{src/components → components}/navbar/NavBar.d.ts +0 -0
  104. /package/{src/components → components}/navbar/TabNavBar.d.ts +0 -0
  105. /package/{src/components → components}/providers/FormProvider.d.ts +0 -0
  106. /package/{src/components → components}/providers/KeycloakAuthProvider.d.ts +0 -0
  107. /package/{src/components → components}/providers/OAuthProvider.d.ts +0 -0
  108. /package/{src/components → components}/providers/SspComponentsProvider.d.ts +0 -0
  109. /package/{src/components → components}/utils/Bt.d.ts +0 -0
  110. /package/{src/components → components}/utils/CustomMenu.d.ts +0 -0
  111. /package/{src/context → context}/auth.d.ts +0 -0
  112. /package/{src/context → context}/form.d.ts +0 -0
  113. /package/{src/index.d.ts → index.d.ts} +0 -0
  114. /package/{src/types → types}/auth.d.ts +0 -0
  115. /package/{src/types → types}/form.d.ts +0 -0
@@ -1,53 +0,0 @@
1
- import { Grid, InputLabel, TextField, Typography } from '@mui/material';
2
- import { LocalizationProvider, TimePicker as MUITimePicker } from '@mui/x-date-pickers';
3
- import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
4
- import dayjs from 'dayjs';
5
- import get from 'lodash.get';
6
- import 'dayjs/locale/pt-br';
7
- import React, { useContext, useEffect, useState } from 'react';
8
- import { FormContext } from '../../../context/form';
9
- import hasIn from 'lodash.hasin';
10
- export default function TimePicker({ name, required = false, title, defaultValue = '', xs = 12, sm, md, }) {
11
- var _a;
12
- const context = useContext(FormContext);
13
- const [value, setValue] = useState(defaultValue ? dayjs(defaultValue, 'HH:mm') : null);
14
- const handleChange = (newValue) => {
15
- setValue(newValue);
16
- };
17
- useEffect(() => {
18
- context.formSetValue(name, value ? value.format('HH:mm') : value);
19
- }, [value]);
20
- useEffect(() => {
21
- return () => {
22
- context.formUnregister(name);
23
- };
24
- }, []);
25
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
26
- title && React.createElement(InputLabel, { required: required }, title),
27
- React.createElement(LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs },
28
- React.createElement(MUITimePicker, { value: value, ampm: false, onChange: handleChange, sx: {
29
- outline: get(context.errors, name) ? '1px solid #a51c30' : '',
30
- backgroundColor: 'white',
31
- width: '100%',
32
- div: {
33
- input: {
34
- paddingX: 2,
35
- paddingY: 1.05,
36
- },
37
- },
38
- }, inputRef: (params) => (React.createElement(TextField, Object.assign({ size: 'small' }, params, context === null || context === void 0 ? void 0 : context.formRegister(name, {
39
- validate: (v, f) => {
40
- if (!hasIn(f, name)) {
41
- return true;
42
- }
43
- if (!v)
44
- v = '';
45
- if (v.length <= 0 && required)
46
- return 'Este campo é obrigatório';
47
- if (v.length < 5 && required)
48
- return 'A hora precisa seguir o padrão HH:MM';
49
- },
50
- shouldUnregister: true,
51
- }), { fullWidth: true }))) }),
52
- React.createElement(Typography, { sx: { color: '#a51c30', fontSize: 15, paddingLeft: 1 } }, (_a = get(context.errors, name)) === null || _a === void 0 ? void 0 : _a.message))));
53
- }
@@ -1,207 +0,0 @@
1
- import { Box, Button, Grid, InputLabel, LinearProgress, Typography, useMediaQuery, useTheme } from '@mui/material';
2
- import { Stack } from '@mui/system';
3
- import get from 'lodash.get';
4
- import React, { useContext, useEffect, useState } from 'react';
5
- import { AuthContext } from '../../../context/auth';
6
- import { FormContext } from '../../../context/form';
7
- import { useDropzone } from 'react-dropzone';
8
- import axios from 'axios';
9
- import { PDFIcon, TrashIcon } from '../../icons/icons';
10
- function bytesToMegabytes(bytes) {
11
- const megabytes = bytes / (1024 * 1024);
12
- return megabytes;
13
- }
14
- function bytesToKBorMB(bytes) {
15
- const KB = 1024;
16
- const MB = 1024 * KB;
17
- if (bytes < MB) {
18
- const KBValue = bytes / KB;
19
- return `${KBValue.toFixed(1)}KB`;
20
- }
21
- else {
22
- const MBValue = bytes / MB;
23
- return `${MBValue.toFixed(1)}MB`;
24
- }
25
- }
26
- function LinearProgressWithLabel(props) {
27
- return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
28
- React.createElement(Box, { sx: { width: '100%', mr: 1 } },
29
- React.createElement(LinearProgress, Object.assign({ variant: 'determinate' }, props))),
30
- React.createElement(Box, { sx: { minWidth: 3 } },
31
- React.createElement(Typography, { variant: 'body2', color: 'text.secondary' }, `${Math.round(props.value)}%`))));
32
- }
33
- export default function DropFileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, sizeLimit = 4, xs = 12, sm, md, route = '', tstToken = '', }) {
34
- const { getRootProps, getInputProps } = useDropzone({
35
- multiple,
36
- onDrop: (dropFiles) => {
37
- const fileList = [];
38
- setProgress(-1);
39
- dropFiles
40
- .filter((file) => {
41
- if (bytesToMegabytes(file.size) > sizeLimit) {
42
- setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
43
- setTimeout(() => {
44
- setErrorMsg('');
45
- }, 3000);
46
- return false;
47
- }
48
- return true;
49
- })
50
- .forEach((file, index) => {
51
- let id = Date.now() + index;
52
- // fetch API
53
- const fd = new FormData();
54
- fd.append('files', file);
55
- fd.append('tipoArquivo', tipoArquivo);
56
- axios
57
- .post(apiURL, fd, {
58
- onUploadProgress: (progressEvent) => {
59
- const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
60
- setProgress(percentCompleted);
61
- if (percentCompleted >= 100) {
62
- setFiles((f) => [...f, { id: id, name: file.name, loading: true, error: false, file: file, size: file.size }]);
63
- }
64
- },
65
- headers: { Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}` },
66
- })
67
- .then((res) => {
68
- if (res.status > 200) {
69
- const fileIdFromApi = get(res.data, route, res.data)[0];
70
- const fileId = fileIdFromApi['coSeqArquivo'];
71
- context.setFilesUid((fId) => [
72
- ...fId,
73
- {
74
- CO_SEQ_ARQUIVO: fileId,
75
- CO_TIPO_ARQUIVO: parseInt(tipoArquivo),
76
- },
77
- ]);
78
- setFilesLoaded((fl) => [...fl, id]);
79
- const f = {};
80
- f[id] = fileId;
81
- setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
82
- }
83
- else {
84
- setProgress(-1);
85
- removeFile(id);
86
- }
87
- })
88
- .catch((err) => {
89
- console.log(err);
90
- setProgress(-1);
91
- removeFile(id);
92
- });
93
- });
94
- },
95
- });
96
- const context = useContext(FormContext);
97
- const { user } = useContext(AuthContext);
98
- const theme = useTheme();
99
- const isSmall = useMediaQuery(theme.breakpoints.only('xs'));
100
- const [progress, setProgress] = useState(-1);
101
- const [files, setFiles] = useState([]);
102
- const [filesLoaded, setFilesLoaded] = useState([]);
103
- const [fileIds, setFilesIds] = useState({});
104
- // const [filesError, setFilesError] = useState<number[]>([])
105
- const [errorMsg, setErrorMsg] = useState('');
106
- const removeFile = (id, hideMsg, fileId) => {
107
- setFiles(files.filter((x) => x.id !== id));
108
- if (fileId)
109
- context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== fileId));
110
- if (!hideMsg) {
111
- setErrorMsg('Erro ao enviar arquivo. Verifique o formato e tente mais tarde.');
112
- setTimeout(() => {
113
- setErrorMsg('');
114
- }, 3000);
115
- }
116
- };
117
- const deleteFile = (e, id) => {
118
- if (Object.keys(fileIds).includes(id.toString())) {
119
- fetch(`${apiURL}/${fileIds[id]}`, {
120
- method: 'DELETE',
121
- headers: {
122
- Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}`,
123
- },
124
- })
125
- .then((res) => {
126
- if (!res.ok)
127
- removeFile(id, true, fileIds[id]);
128
- if (res.status === 200) {
129
- removeFile(id, true, fileIds[id]);
130
- }
131
- })
132
- .catch((err) => console.log(err));
133
- }
134
- };
135
- useEffect(() => {
136
- const dt = new DataTransfer();
137
- files.forEach((x) => {
138
- dt.items.add(x.file);
139
- });
140
- context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
141
- }, [files, context, name]);
142
- useEffect(() => {
143
- return () => {
144
- context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
145
- };
146
- }, []);
147
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
148
- React.createElement(Box, { bgcolor: 'white', p: 2, borderRadius: '8px', color: '#1E293B' },
149
- React.createElement(InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
150
- React.createElement(Stack, Object.assign({}, getRootProps({ className: 'dropzone' }), { bgcolor: '#EFEFEF', justifyContent: 'center', alignItems: 'center', textAlign: 'center', borderRadius: '6px', py: 8, border: 'solid 1.5px #989898', sx: {
151
- borderStyle: 'dashed',
152
- cursor: 'pointer',
153
- } }),
154
- React.createElement("input", Object.assign({}, getInputProps(), context.formRegister(name, {
155
- validate: (v, f) => {
156
- if ((v.length && filesLoaded.length) <= 0 && required)
157
- return 'O campo de arquivo é obrigatório';
158
- },
159
- }))),
160
- React.createElement(Stack, { spacing: 2, alignItems: 'center' },
161
- React.createElement(Box, null,
162
- React.createElement(Typography, { fontWeight: 600, fontSize: 18 }, "Arraste seus arquivos at\u00E9 aqui"),
163
- React.createElement(Typography, null, "ou selecione arquivos que est\u00E3o no seu computador")),
164
- React.createElement(Button, { variant: 'contained', sx: {
165
- backgroundColor: '#64748B',
166
- pointerEvents: 'none',
167
- borderRadius: '8px',
168
- width: 'fit-content',
169
- } }, "Selecionar"),
170
- React.createElement(Typography, { fontWeight: 300 },
171
- "Tamanho m\u00E1ximo por arquivo ",
172
- sizeLimit,
173
- "MB"))),
174
- React.createElement(Typography, { pt: 2, fontSize: 16, fontWeight: 600 },
175
- "Voc\u00EA selecionou ",
176
- files.length,
177
- " arquivo",
178
- files.length > 1 ? 's' : '',
179
- "."),
180
- React.createElement(Stack, { width: '100%', marginTop: 1, spacing: 1 },
181
- files.map((x) => (React.createElement(Stack, { direction: 'row', justifyContent: 'space-between', border: 'solid 1px #E2E8F0', borderRadius: 2, p: 1 },
182
- React.createElement(Stack, { direction: 'row' },
183
- React.createElement(Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', minWidth: 30, pr: 1.5 },
184
- React.createElement(PDFIcon, { sx: {
185
- filter: 'invert(42%) sepia(86%) saturate(2412%) hue-rotate(326deg) brightness(86%) contrast(102%)',
186
- transform: 'scale(1.5)',
187
- width: 30,
188
- } })),
189
- React.createElement(Stack, null,
190
- React.createElement(Typography, { fontWeight: 600 }, x.name),
191
- React.createElement(Typography, { fontSize: 14 }, bytesToKBorMB(x.size)))),
192
- React.createElement(Button, { size: 'small', startIcon: React.createElement(TrashIcon, null), variant: 'contained', onClick: (e) => deleteFile(e, x.id), sx: {
193
- height: 40,
194
- backgroundColor: '#DE3F50',
195
- borderRadius: '8px',
196
- } }, "Remover")))),
197
- progress > 0 && progress < 100 && (React.createElement(LinearProgressWithLabel, { value: progress, sx: {
198
- backgroundColor: '#103D6A',
199
- '.MuiLinearProgress-bar': {
200
- backgroundColor: '#BDDDFA',
201
- },
202
- } }))),
203
- errorMsg && (React.createElement(React.Fragment, null,
204
- React.createElement(Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
205
- React.createElement("br", null))),
206
- get(context === null || context === void 0 ? void 0 : context.errors, name) && (React.createElement(Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14 }, "* O campo de arquivo \u00E9 obrigat\u00F3rio")))));
207
- }
@@ -1,171 +0,0 @@
1
- import CameraAltIcon from '@mui/icons-material/CameraAlt';
2
- import Delete from '@mui/icons-material/Delete';
3
- import DoneIcon from '@mui/icons-material/Done';
4
- import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
5
- import PictureAsPdf from '@mui/icons-material/PictureAsPdf';
6
- import { Box, Button, CircularProgress, Grid, InputLabel, Paper, TableContainer, Typography, useMediaQuery, useTheme } from '@mui/material';
7
- import { Stack } from '@mui/system';
8
- import get from 'lodash.get';
9
- import React, { useCallback, useContext, useEffect, useState } from 'react';
10
- import { AuthContext } from '../../../context/auth';
11
- import { FormContext } from '../../../context/form';
12
- function bytesToMegabytes(bytes) {
13
- const megabytes = bytes / (1024 * 1024);
14
- return megabytes;
15
- }
16
- export default function FileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, route = '', sizeLimit = 4, xs = 12, sm, md, }) {
17
- const context = useContext(FormContext);
18
- const { user } = useContext(AuthContext);
19
- const theme = useTheme();
20
- const isSmall = useMediaQuery(theme.breakpoints.only('xs'));
21
- const [files, setFiles] = useState([]);
22
- const [filesLoaded, setFilesLoaded] = useState([]);
23
- const [fileIds, setFilesIds] = useState({});
24
- // const [filesError, setFilesError] = useState<number[]>([])
25
- const [errorMsg, setErrorMsg] = useState('');
26
- const onFile = useCallback((e) => {
27
- const newFiles = e.target.files;
28
- const filesTo = Object.keys(newFiles).map((key) => newFiles[key]);
29
- setFiles([
30
- ...files,
31
- ...filesTo
32
- .filter((file) => {
33
- if (bytesToMegabytes(file.size) > sizeLimit) {
34
- setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
35
- setTimeout(() => {
36
- setErrorMsg('');
37
- }, 3000);
38
- return false;
39
- }
40
- return true;
41
- })
42
- .map((file, index) => {
43
- let id = Date.now() + index;
44
- // fetch API
45
- const fd = new FormData();
46
- fd.append('files', file);
47
- fd.append('tipoArquivo', tipoArquivo);
48
- fetch(apiURL, {
49
- method: 'POST',
50
- body: fd,
51
- headers: {
52
- Authorization: `Bearer ${user ? user.token : ''}`,
53
- },
54
- })
55
- .then((res) => {
56
- if (!res.ok) {
57
- removeFile(id);
58
- return;
59
- }
60
- res.json().then((j) => {
61
- if (j.status && j.status.status === 200) {
62
- const fileIdFromApi = get(j, route, j)[0];
63
- const fileId = fileIdFromApi['coSeqArquivo'];
64
- context.setFilesUid((fId) => [
65
- ...fId,
66
- {
67
- CO_SEQ_ARQUIVO: fileId,
68
- CO_TIPO_ARQUIVO: parseInt(tipoArquivo),
69
- },
70
- ]);
71
- setFilesLoaded((fl) => [...fl, id]);
72
- const f = {};
73
- f[id] = fileId;
74
- setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
75
- }
76
- else {
77
- removeFile(id);
78
- }
79
- });
80
- })
81
- .catch((err) => {
82
- removeFile(id);
83
- });
84
- return { id: id, name: file.name, loading: true, error: false, file: file };
85
- }),
86
- ]);
87
- }, [files, context]);
88
- const removeFile = (id, hideMsg, fileId) => {
89
- setFiles(files.filter((x) => x.id !== id));
90
- if (fileId)
91
- context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== fileId));
92
- if (!hideMsg) {
93
- setErrorMsg('Erro ao enviar arquivo. Tente novamente mais tarde');
94
- setTimeout(() => {
95
- setErrorMsg('');
96
- }, 3000);
97
- }
98
- };
99
- const deleteFile = (e, id) => {
100
- if (Object.keys(fileIds).includes(id.toString())) {
101
- fetch(`${apiURL}/${fileIds[id]}`, {
102
- method: 'DELETE',
103
- headers: {
104
- Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
105
- },
106
- })
107
- .then((res) => {
108
- if (!res.ok)
109
- removeFile(id, true, fileIds[id]);
110
- if (res.status === 200) {
111
- removeFile(id, true, fileIds[id]);
112
- }
113
- })
114
- .catch((err) => console.log(err));
115
- }
116
- };
117
- useEffect(() => {
118
- const dt = new DataTransfer();
119
- files.forEach((x) => {
120
- dt.items.add(x.file);
121
- });
122
- context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
123
- }, [files, context, name]);
124
- useEffect(() => {
125
- return () => {
126
- context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
127
- };
128
- }, []);
129
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
130
- React.createElement(InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
131
- React.createElement(Box, { sx: { backgroundColor: '#e2eafc', padding: 1, borderRadius: 1, marginTop: 1 } },
132
- React.createElement("input", Object.assign({ id: name, type: 'file', multiple: multiple }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
133
- validate: (v, f) => {
134
- if ((v.length && filesLoaded.length) <= 0 && required)
135
- return 'O campo de arquivo é obrigatório';
136
- },
137
- }), { onChange: onFile, accept: '.pdf', style: { display: 'none' } })),
138
- React.createElement("input", Object.assign({ id: name + 'foto', type: 'file', capture: 'environment', multiple: multiple }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
139
- validate: (v, f) => {
140
- if ((v.length && filesLoaded.length) <= 0 && required)
141
- return 'O campo de arquivo é obrigatório';
142
- },
143
- }), { onChange: onFile, accept: '.jpg, .png, .jpeg', style: { display: 'none' } })),
144
- React.createElement(Box, { sx: {
145
- display: {
146
- sx: 'block',
147
- md: 'flex',
148
- },
149
- } },
150
- React.createElement(Box, { sx: { width: '100%', marginRight: { xs: 0, md: 1 }, marginBottom: { xs: 1, md: 0 } } }, !multiple && files.length >= 1 ? (React.createElement(Button, { disabled: true, variant: 'contained', disableElevation: true, startIcon: React.createElement(InsertDriveFileIcon, null), component: 'span', sx: { textTransform: 'none' }, fullWidth: true }, "Escolher Documento")) : (React.createElement("label", { htmlFor: name },
151
- React.createElement(Button, { variant: 'contained', disableElevation: true, startIcon: React.createElement(InsertDriveFileIcon, null), component: 'span', sx: { textTransform: 'none' }, fullWidth: true }, "Escolher Documento")))),
152
- React.createElement(Box, { sx: { width: '100%' } }, !multiple && files.length >= 1 ? (React.createElement(Button, { disabled: true, variant: 'contained', disableElevation: true, startIcon: React.createElement(CameraAltIcon, null), component: 'span', sx: { textTransform: 'none', backgroundColor: '#0096c7' }, fullWidth: true }, isSmall ? 'Tirar Foto' : 'Escolher Imagem')) : (React.createElement("label", { htmlFor: name + 'foto' },
153
- React.createElement(Button, { variant: 'contained', disableElevation: true, startIcon: React.createElement(CameraAltIcon, null), component: 'span', sx: { textTransform: 'none', backgroundColor: '#0096c7' }, fullWidth: true }, isSmall ? 'Tirar Foto' : 'Escolher Imagem'))))),
154
- React.createElement(Typography, { fontWeight: 600, paddingY: 1, color: 'black' },
155
- "Voc\u00EA selecionou ",
156
- files.length,
157
- " arquivo",
158
- files.length > 1 && 's'),
159
- files.length > 0 && (React.createElement(TableContainer, { component: Paper },
160
- React.createElement(Stack, { direction: 'column' }, files.map((x) => (React.createElement(Stack, { key: x.name, direction: 'row', justifyContent: 'space-between', padding: 0.5 },
161
- React.createElement(Box, null,
162
- React.createElement(Stack, { direction: 'row', spacing: 2 },
163
- filesLoaded.includes(x.id) ? React.createElement(DoneIcon, { sx: { fill: '#06d6a0' } }) : React.createElement(CircularProgress, { size: 22, sx: { color: 'black' } }),
164
- React.createElement(PictureAsPdf, { color: 'error' }),
165
- React.createElement(Typography, { fontWeight: 600 }, x.name))),
166
- React.createElement(Box, null, filesLoaded.includes(x.id) && (React.createElement(Button, { variant: 'contained', size: 'small', sx: { textTransform: 'none', backgroundColor: '#d1495b', '&:hover': { backgroundColor: '#c1121f' } }, onClick: (e) => deleteFile(e, x.id), startIcon: React.createElement(Delete, null) }, "Remover"))))))))),
167
- errorMsg && (React.createElement(React.Fragment, null,
168
- React.createElement(Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
169
- React.createElement("br", null))),
170
- get(context === null || context === void 0 ? void 0 : context.errors, name) && (React.createElement(Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14 }, "* O campo de arquivo \u00E9 obrigat\u00F3rio")))));
171
- }
@@ -1,27 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { Grid, Stack } from '@mui/material';
13
- import InputLabel from '@mui/material/InputLabel';
14
- import React from 'react';
15
- import Switch from '../switch/Switch';
16
- import { SwitchWatch } from '../switch/ToggleVisibility';
17
- import { Input } from './Input';
18
- export default function FileUpload(_a) {
19
- var { name, required = false, title, defaultChecked = false, xs = 12, unregisterNameList, sm, md } = _a, props = __rest(_a, ["name", "required", "title", "defaultChecked", "xs", "unregisterNameList", "sm", "md"]);
20
- const switchName = `${name}-switch`;
21
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
22
- title && (React.createElement(InputLabel, { required: required, sx: { textTransform: 'capitalize' } }, title)),
23
- React.createElement(Stack, { direction: 'row' },
24
- React.createElement(Switch, { name: switchName, defaultChecked: defaultChecked }),
25
- React.createElement(SwitchWatch, { switchId: switchName, unregisterNameList: unregisterNameList },
26
- React.createElement(Input, { name: 'ddd', type: 'input' })))));
27
- }
@@ -1,40 +0,0 @@
1
- import { Autocomplete, Grid, TextField } from '@mui/material';
2
- import InputLabel from '@mui/material/InputLabel';
3
- import get from 'lodash.get';
4
- import React, { useCallback, useContext, useState } from 'react';
5
- import { useQuery } from 'react-query';
6
- import { AuthContext } from '../../../context/auth';
7
- import { FormContext } from '../../../context/form';
8
- export default function AutoComplete({ name, required = false, title, customPlaceholder, url, xs = 12, sm, md, dataPath = '', }) {
9
- const context = useContext(FormContext);
10
- const { user } = useContext(AuthContext);
11
- const [options, setOptions] = useState([]);
12
- const { isLoading, data, error } = useQuery(`autocomplete-${name}`, () => fetch(url, {
13
- headers: {
14
- Authorization: `Bearer ${user ? user.token : ''}`,
15
- },
16
- }).then((x) => x.json().then((list) => setOptions(getData(list)))));
17
- // transformar isso em um component ou utils
18
- const getData = useCallback((dt) => {
19
- if (Array.isArray(dt))
20
- return dt;
21
- if (typeof dt === 'object')
22
- return get(dt, dataPath);
23
- }, []);
24
- const onSelect = useCallback((e, value) => {
25
- context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
26
- context === null || context === void 0 ? void 0 : context.formTrigger(name);
27
- }, [context, name]);
28
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
29
- title && React.createElement(InputLabel, { required: required }, title),
30
- React.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
31
- validate: (v, f) => {
32
- if (v.length <= 0 && required)
33
- return 'Este campo é obrigatório';
34
- },
35
- }), { hidden: true })),
36
- React.createElement(Autocomplete, { options: options, isOptionEqualToValue: (option, value) => option.id === value.id, onChange: onSelect, renderInput: (params) => {
37
- var _a;
38
- return (React.createElement(TextField, Object.assign({}, params, { placeholder: customPlaceholder, size: 'small', error: get(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = get(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
39
- } })));
40
- }
@@ -1,103 +0,0 @@
1
- import { Autocomplete, Grid, InputLabel, TextField } from '@mui/material';
2
- import get from 'lodash.get';
3
- import React, { useContext, useEffect, useState } from 'react';
4
- import { AuthContext } from '../../../context/auth';
5
- import { FormContext } from '../../../context/form';
6
- let useDefault = true;
7
- export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, watchValue, md, }) {
8
- const context = useContext(FormContext);
9
- const [loading, setLoading] = useState(true);
10
- const [list, setList] = useState([]);
11
- const [loadingText, setLoadingText] = useState('Carregando...');
12
- const [dValue, setDValue] = useState(null);
13
- const [value, setValue] = useState(null);
14
- const { user } = useContext(AuthContext);
15
- useEffect(() => {
16
- if (defaultValue) {
17
- fetch(url, {
18
- method: 'GET',
19
- headers: {
20
- Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
21
- },
22
- }).then((res) => {
23
- if (res.ok) {
24
- console.log('llll');
25
- res.json().then((j) => {
26
- let value = get(j, route, j).filter((x) => x.id === defaultValue);
27
- if (value.length > 0) {
28
- setList(get(j, route, j));
29
- setLoading(false);
30
- context.formSetValue(name, defaultValue);
31
- setDValue(value[0]);
32
- }
33
- else {
34
- setLoadingText('Erro ao carregar dados. Valor inválido');
35
- }
36
- });
37
- }
38
- else {
39
- setLoadingText('Erro ao carregar dados');
40
- }
41
- });
42
- }
43
- }, []);
44
- useEffect(() => {
45
- if (watchValue && useDefault) {
46
- setValue(watchValue);
47
- context.formSetValue(name, watchValue.id);
48
- onChange(watchValue.id);
49
- }
50
- }, [watchValue]);
51
- function onFocus() {
52
- if ((defaultValue || !shouldRefetch) && list.length > 0)
53
- return;
54
- setLoading(true);
55
- setList([]);
56
- customLoadingText && setLoadingText(customLoadingText);
57
- fetch(url, {
58
- method: 'GET',
59
- headers: {
60
- Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
61
- },
62
- }).then((res) => {
63
- if (res.ok) {
64
- res.json().then((j) => {
65
- setList(get(j, route, j));
66
- setLoading(false);
67
- });
68
- }
69
- else {
70
- setLoadingText('Erro ao carregar dados');
71
- }
72
- });
73
- }
74
- function handleAutoCompleteChange(value) {
75
- useDefault = false;
76
- if (value) {
77
- setValue(value);
78
- context.formSetValue(name, value.id);
79
- onChange(value.id);
80
- return;
81
- }
82
- setValue(null);
83
- context.formSetValue(name, '');
84
- onChange(undefined);
85
- }
86
- if (defaultValue && list.length <= 0 && !dValue)
87
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
88
- React.createElement(TextField, { size: 'small', fullWidth: true, placeholder: loadingText, disabled: true })));
89
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
90
- title && React.createElement(InputLabel, { required: required }, title),
91
- React.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
92
- validate: (v, f) => {
93
- if (v.length <= 0 && required)
94
- return 'Este campo é obrigatório';
95
- },
96
- }), { hidden: true })),
97
- React.createElement(Autocomplete, { value: value, loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, getOptionDisabled: (option) => { var _a; return (_a = option === null || option === void 0 ? void 0 : option.disabled) !== null && _a !== void 0 ? _a : false; }, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
98
- var _a;
99
- return (React.createElement(TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, onFocus: onFocus, error: get(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = get(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
100
- }, sx: {
101
- bgcolor: 'white',
102
- }, size: 'small', fullWidth: true })));
103
- }
@@ -1,46 +0,0 @@
1
- import { Autocomplete, Grid, InputLabel, TextField } from '@mui/material';
2
- import get from 'lodash.get';
3
- import React, { useContext, useEffect, useState } from 'react';
4
- import { FormContext } from '../../../context/form';
5
- let useDefault = true;
6
- export function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, watchValue, md, }) {
7
- const context = useContext(FormContext);
8
- const [value, setValue] = useState(null);
9
- useEffect(() => {
10
- if (defaultValue)
11
- context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue.id);
12
- }, []);
13
- useEffect(() => {
14
- if (watchValue && useDefault) {
15
- setValue(watchValue);
16
- context.formSetValue(name, watchValue.id);
17
- onChange(watchValue.id);
18
- }
19
- }, [watchValue]);
20
- function handleAutoCompleteChange(value) {
21
- useDefault = false;
22
- if (value) {
23
- setValue(value);
24
- context.formSetValue(name, value.id);
25
- onChange(value.id);
26
- return;
27
- }
28
- setValue(null);
29
- context.formSetValue(name, '');
30
- onChange(undefined);
31
- }
32
- return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
33
- title && React.createElement(InputLabel, { required: required }, title),
34
- React.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
35
- validate: (v, f) => {
36
- if (v.length <= 0 && required)
37
- return 'Este campo é obrigatório';
38
- },
39
- }), { hidden: true })),
40
- React.createElement(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) => {
41
- var _a;
42
- return (React.createElement(TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, error: get(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = get(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
43
- }, size: 'small', sx: {
44
- bgcolor: 'white',
45
- }, fullWidth: true })));
46
- }