@ssplib/react-components 0.0.117 → 0.0.119
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.
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export default function FileUpload({ name, tipoArquivo, title, required, multiple, apiURL, xs, sm, md, }: {
|
|
2
|
+
export default function FileUpload({ name, tipoArquivo, title, required, multiple, apiURL, sizeLimit, xs, sm, md, }: {
|
|
3
3
|
name: string;
|
|
4
4
|
tipoArquivo: string;
|
|
5
5
|
title: string;
|
|
6
6
|
apiURL: string;
|
|
7
7
|
required?: boolean;
|
|
8
8
|
multiple?: boolean;
|
|
9
|
+
sizeLimit?: number;
|
|
9
10
|
xs?: number;
|
|
10
11
|
sm?: number;
|
|
11
12
|
md?: number;
|
|
@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const CameraAlt_1 = __importDefault(require("@mui/icons-material/CameraAlt"));
|
|
30
|
-
const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
|
|
31
30
|
const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
|
|
32
31
|
const Done_1 = __importDefault(require("@mui/icons-material/Done"));
|
|
33
32
|
const InsertDriveFile_1 = __importDefault(require("@mui/icons-material/InsertDriveFile"));
|
|
@@ -38,7 +37,11 @@ const lodash_get_1 = __importDefault(require("lodash.get"));
|
|
|
38
37
|
const react_1 = __importStar(require("react"));
|
|
39
38
|
const auth_1 = require("../../../context/auth");
|
|
40
39
|
const form_1 = require("../../../context/form");
|
|
41
|
-
function
|
|
40
|
+
function bytesToMegabytes(bytes) {
|
|
41
|
+
const megabytes = bytes / (1024 * 1024);
|
|
42
|
+
return megabytes;
|
|
43
|
+
}
|
|
44
|
+
function FileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, sizeLimit = 4, xs = 12, sm, md, }) {
|
|
42
45
|
const context = (0, react_1.useContext)(form_1.FormContext);
|
|
43
46
|
const { user } = (0, react_1.useContext)(auth_1.AuthContext);
|
|
44
47
|
const theme = (0, material_1.useTheme)();
|
|
@@ -46,13 +49,25 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
46
49
|
const [files, setFiles] = (0, react_1.useState)([]);
|
|
47
50
|
const [filesLoaded, setFilesLoaded] = (0, react_1.useState)([]);
|
|
48
51
|
const [fileIds, setFilesIds] = (0, react_1.useState)({});
|
|
49
|
-
const [filesError, setFilesError] =
|
|
52
|
+
// const [filesError, setFilesError] = useState<number[]>([])
|
|
53
|
+
const [errorMsg, setErrorMsg] = (0, react_1.useState)('');
|
|
50
54
|
const onFile = (0, react_1.useCallback)((e) => {
|
|
51
55
|
const newFiles = e.target.files;
|
|
52
56
|
const filesTo = Object.keys(newFiles).map((key) => newFiles[key]);
|
|
53
57
|
setFiles([
|
|
54
58
|
...files,
|
|
55
|
-
...filesTo
|
|
59
|
+
...filesTo
|
|
60
|
+
.filter((file) => {
|
|
61
|
+
if (bytesToMegabytes(file.size) > sizeLimit) {
|
|
62
|
+
setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
setErrorMsg('');
|
|
65
|
+
}, 3000);
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
return true;
|
|
69
|
+
})
|
|
70
|
+
.map((file, index) => {
|
|
56
71
|
let id = Date.now() + index;
|
|
57
72
|
// fetch API
|
|
58
73
|
const fd = new FormData();
|
|
@@ -62,12 +77,15 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
62
77
|
method: 'POST',
|
|
63
78
|
body: fd,
|
|
64
79
|
headers: {
|
|
65
|
-
Authorization: `Bearer ${user ? user.token : ''}`,
|
|
80
|
+
// Authorization: `Bearer ${user ? user.token : ''}`,
|
|
81
|
+
Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NywibmFtZSI6IlBlZGluIiwiZW1haWwiOiJnYWl0YWNoaTBAZ21haWwuY29tIiwicGhvbmVfbnVtYmVyIjoiNjE5OTMwNTg0MjMiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiIwNTUxOTQyOTE2MiIsInJvbGVzIjpbeyJjb2RlIjoxLCJuYW1lIjoiVXNlciBFdmVudG9zIiwic3lzdGVtIjoyfSx7ImNvZGUiOjIsIm5hbWUiOiJBZG1pbiBFdmVudG9zIiwic3lzdGVtIjoyfSx7ImNvZGUiOjQsIm5hbWUiOiJDb25zZWcgVmFsaWRhZG9yIiwic3lzdGVtIjozfSx7ImNvZGUiOjYsIm5hbWUiOiJVc2VyIENvbnNlZyIsInN5c3RlbSI6M31dLCJpYXQiOjE2OTE2MDEyODksImV4cCI6MTY5MjIwNjA4OSwiYXVkIjoiVXNlcnMiLCJpc3MiOiJBdXRoU1NQIiwic3ViIjoiMDU1MTk0MjkxNjIifQ.SNU02JpcWQejBnrG6OMGVof4ALAgSEIAc3qAUnKDHSY`,
|
|
66
82
|
},
|
|
67
83
|
})
|
|
68
84
|
.then((res) => {
|
|
69
|
-
if (!res.ok)
|
|
70
|
-
|
|
85
|
+
if (!res.ok) {
|
|
86
|
+
removeFile(id);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
71
89
|
res.json().then((j) => {
|
|
72
90
|
if (j.status && j.status.status === 200) {
|
|
73
91
|
const fileIdFromApi = j.data[0];
|
|
@@ -85,21 +103,28 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
85
103
|
setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
|
|
86
104
|
}
|
|
87
105
|
else {
|
|
88
|
-
|
|
106
|
+
removeFile(id);
|
|
89
107
|
}
|
|
90
108
|
});
|
|
91
109
|
})
|
|
92
|
-
.catch((err) =>
|
|
110
|
+
.catch((err) => {
|
|
111
|
+
removeFile(id);
|
|
112
|
+
});
|
|
93
113
|
return { id: id, name: file.name, loading: true, error: false, file: file };
|
|
94
114
|
}),
|
|
95
115
|
]);
|
|
96
116
|
}, [files, context]);
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
117
|
+
const removeFile = (id, hideMsg) => {
|
|
118
|
+
setFiles(files.filter((x) => x.id !== id));
|
|
119
|
+
context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== id));
|
|
120
|
+
if (!hideMsg) {
|
|
121
|
+
setErrorMsg('Erro ao enviar arquivo. Tente novamente mais tarde');
|
|
122
|
+
setTimeout(() => {
|
|
123
|
+
setErrorMsg('');
|
|
124
|
+
}, 3000);
|
|
102
125
|
}
|
|
126
|
+
};
|
|
127
|
+
const deleteFile = (e, id) => {
|
|
103
128
|
if (Object.keys(fileIds).includes(id.toString())) {
|
|
104
129
|
fetch(`${apiURL}/${fileIds[id]}`, {
|
|
105
130
|
method: 'DELETE',
|
|
@@ -108,6 +133,8 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
108
133
|
},
|
|
109
134
|
})
|
|
110
135
|
.then((res) => {
|
|
136
|
+
if (!res.ok)
|
|
137
|
+
removeFile(id, true);
|
|
111
138
|
if (res.status === 200) {
|
|
112
139
|
setFiles(files.filter((x) => x.id !== id));
|
|
113
140
|
context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== id));
|
|
@@ -118,13 +145,11 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
118
145
|
};
|
|
119
146
|
(0, react_1.useEffect)(() => {
|
|
120
147
|
const dt = new DataTransfer();
|
|
121
|
-
files
|
|
122
|
-
.filter((x) => !filesError.includes(x.id))
|
|
123
|
-
.forEach((x) => {
|
|
148
|
+
files.forEach((x) => {
|
|
124
149
|
dt.items.add(x.file);
|
|
125
150
|
});
|
|
126
151
|
context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
|
|
127
|
-
}, [files, context,
|
|
152
|
+
}, [files, context, name]);
|
|
128
153
|
(0, react_1.useEffect)(() => {
|
|
129
154
|
return () => {
|
|
130
155
|
context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
|
|
@@ -164,10 +189,13 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
164
189
|
react_1.default.createElement(system_1.Stack, { direction: 'column' }, files.map((x) => (react_1.default.createElement(system_1.Stack, { key: x.name, direction: 'row', justifyContent: 'space-between', padding: 0.5 },
|
|
165
190
|
react_1.default.createElement(material_1.Box, null,
|
|
166
191
|
react_1.default.createElement(system_1.Stack, { direction: 'row', spacing: 2 },
|
|
167
|
-
filesLoaded.includes(x.id) ?
|
|
192
|
+
filesLoaded.includes(x.id) ? react_1.default.createElement(Done_1.default, { sx: { fill: '#06d6a0' } }) : react_1.default.createElement(material_1.CircularProgress, { size: 22, sx: { color: 'black' } }),
|
|
168
193
|
react_1.default.createElement(PictureAsPdf_1.default, { color: 'error' }),
|
|
169
194
|
react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, x.name))),
|
|
170
|
-
react_1.default.createElement(material_1.Box, null,
|
|
171
|
-
|
|
195
|
+
react_1.default.createElement(material_1.Box, null, filesLoaded.includes(x.id) && (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', sx: { textTransform: 'none', backgroundColor: '#d1495b', '&:hover': { backgroundColor: '#c1121f' } }, onClick: (e) => deleteFile(e, x.id), startIcon: react_1.default.createElement(Delete_1.default, null) }, "Remover"))))))))),
|
|
196
|
+
errorMsg && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
197
|
+
react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
|
|
198
|
+
react_1.default.createElement("br", null))),
|
|
199
|
+
(0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) && (react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14 }, "* O campo de arquivo \u00E9 obrigat\u00F3rio")))));
|
|
172
200
|
}
|
|
173
201
|
exports.default = FileUpload;
|
|
@@ -3,7 +3,7 @@ interface ColumnData {
|
|
|
3
3
|
title: string;
|
|
4
4
|
keyName: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic,
|
|
6
|
+
export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, }: {
|
|
7
7
|
columns: ColumnData[];
|
|
8
8
|
tableName: string;
|
|
9
9
|
csvShowAllButton?: boolean;
|
|
@@ -29,10 +29,9 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
|
|
|
29
29
|
dataPath?: string;
|
|
30
30
|
isPublic?: boolean;
|
|
31
31
|
filters?: {
|
|
32
|
-
|
|
33
|
-
options
|
|
34
|
-
|
|
35
|
-
}[];
|
|
32
|
+
type: '';
|
|
33
|
+
options?: object[];
|
|
34
|
+
};
|
|
36
35
|
}): JSX.Element;
|
|
37
36
|
declare const _default: React.MemoExoticComponent<typeof Table>;
|
|
38
37
|
export default _default;
|
|
@@ -40,7 +40,7 @@ const auth_1 = require("../../../context/auth");
|
|
|
40
40
|
function Table({ columns, fetchFunc, emptyMsg = {
|
|
41
41
|
user: 'Nenhum dado encontrado',
|
|
42
42
|
public: 'Nenhum dado encontrado',
|
|
43
|
-
}, dataPath = '', tableName, csv, columnSize, action, isPublic = false,
|
|
43
|
+
}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, }) {
|
|
44
44
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
45
45
|
const [error, setError] = (0, react_1.useState)(null);
|
|
46
46
|
const [data, setData] = (0, react_1.useState)(null);
|
|
@@ -300,37 +300,44 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
300
300
|
return react_1.default.createElement(material_1.LinearProgress, null);
|
|
301
301
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
302
302
|
react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4 },
|
|
303
|
-
react_1.default.createElement(material_1.Stack, {
|
|
303
|
+
react_1.default.createElement(material_1.Stack, { spacing: 2, direction: { xs: 'column', md: 'row' } },
|
|
304
304
|
react_1.default.createElement(TextField_1.default, { InputProps: {
|
|
305
305
|
startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
|
|
306
|
-
}, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
306
|
+
}, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` })),
|
|
307
|
+
react_1.default.createElement(material_1.Stack, { spacing: 0.2 },
|
|
308
|
+
getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
|
|
309
|
+
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 ? '#E2E8F0' : '#F8FAFC', paddingY: 2 }, elevation: 0 },
|
|
310
|
+
react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2 },
|
|
311
|
+
columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: 12 / columnSize },
|
|
312
|
+
react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
|
|
313
|
+
react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
|
|
314
|
+
react_1.default.createElement(material_1.Box, { paddingLeft: 1 },
|
|
315
|
+
react_1.default.createElement(Typography_1.default, { fontSize: 16, sx: { wordWrap: 'break-word', color: '#1E293B' }, fontFamily: 'Inter' }, c.keyName === statusKeyName ? getStatusMsg((0, lodash_get_1.default)(x, c.keyName)) : (0, lodash_get_1.default)(x, c.keyName)))))),
|
|
316
|
+
react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: 12 / columnSize },
|
|
317
|
+
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)))))))),
|
|
318
|
+
react_1.default.createElement(material_1.Stack, { bgcolor: '#F8FAFC', direction: 'row', justifyContent: 'center', paddingY: 1, borderTop: 3, borderColor: '#b4bfcf' },
|
|
319
|
+
react_1.default.createElement(material_1.Stack, { direction: 'column', justifyContent: 'center', alignItems: 'center' },
|
|
320
|
+
react_1.default.createElement(Pagination_1.default, { count: paginationCount, siblingCount: isSmall ? 0 : 1, size: 'large', onChange: onPaginationChange, page: listPage, shape: 'rounded' })))),
|
|
321
|
+
getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { bgcolor: '#E2E8F0', padding: 1, direction: {
|
|
322
|
+
xs: 'column',
|
|
323
|
+
md: 'row',
|
|
324
|
+
}, spacing: {
|
|
325
|
+
xs: 2,
|
|
326
|
+
md: 0,
|
|
327
|
+
}, justifyContent: 'space-between', alignItems: 'center' },
|
|
328
|
+
react_1.default.createElement(material_1.Box, { height: '100%', top: 0, left: 0, marginLeft: 2 },
|
|
329
|
+
react_1.default.createElement(material_1.Stack, { height: '100%', justifyContent: 'center' },
|
|
330
|
+
currentPage * itemsCount + 1,
|
|
331
|
+
"-",
|
|
332
|
+
currentPage * itemsCount + 1 + getMaxItems().length - 1,
|
|
333
|
+
" de ",
|
|
334
|
+
list.length)),
|
|
319
335
|
csv && (react_1.default.createElement(material_1.Stack, { direction: {
|
|
320
336
|
xs: 'column',
|
|
321
337
|
md: 'row',
|
|
322
|
-
}, justifyContent: 'flex-end',
|
|
338
|
+
}, justifyContent: 'flex-end', spacing: 1 },
|
|
323
339
|
csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
|
|
324
|
-
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))
|
|
325
|
-
react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', paddingY: 4 },
|
|
326
|
-
react_1.default.createElement(material_1.Stack, { direction: 'column', justifyContent: 'center', alignItems: 'center' },
|
|
327
|
-
react_1.default.createElement(Typography_1.default, { marginBottom: 2 },
|
|
328
|
-
currentPage * itemsCount + 1,
|
|
329
|
-
"-",
|
|
330
|
-
currentPage * itemsCount + 1 + getMaxItems().length - 1,
|
|
331
|
-
" de ",
|
|
332
|
-
list.length),
|
|
333
|
-
react_1.default.createElement(Pagination_1.default, { count: paginationCount, siblingCount: isSmall ? 0 : 1, size: 'large', onChange: onPaginationChange, page: listPage }))))))));
|
|
340
|
+
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle))))))));
|
|
334
341
|
}
|
|
335
342
|
exports.Table = Table;
|
|
336
343
|
exports.default = react_1.default.memo(Table);
|