@ssplib/react-components 0.0.250 → 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.
- package/components/detalhes/Category.js +14 -0
- package/components/detalhes/Field.js +42 -0
- package/components/detalhes/FieldLabel.js +28 -0
- package/components/detalhes/File.js +62 -0
- package/components/form/checkbox/CheckBox.js +18 -0
- package/{src/components → components}/form/checkbox/CheckBoxAdditional.js +37 -11
- package/components/form/checkbox/CheckBoxWarning.js +43 -0
- package/components/form/checkbox/RequiredCheckBoxValidator.js +85 -0
- package/components/form/date/DatePicker.js +100 -0
- package/components/form/date/TimePicker.js +82 -0
- package/components/form/file/DropFileUpload.js +236 -0
- package/components/form/file/FileUpload.js +200 -0
- package/components/form/input/ActiveInput.js +33 -0
- package/components/form/input/AutoComplete.js +69 -0
- package/components/form/input/FetchAutoComplete.js +132 -0
- package/components/form/input/FixedAutoComplete.js +76 -0
- package/{src/components → components}/form/input/Input.js +52 -22
- package/components/form/input/MaskInput.js +78 -0
- package/components/form/input/MultInput.js +67 -0
- package/components/form/input/OtherCheckBox.js +56 -0
- package/components/form/stepper/Stepper.js +135 -0
- package/components/form/stepper/StepperBlock.js +97 -0
- package/components/form/switch/Switch.js +54 -0
- package/components/form/switch/ToggleVisibility.js +61 -0
- package/{src/components → components}/form/table/Table.js +230 -200
- package/components/icons/icons.js +24 -0
- package/components/modal/Modal.js +105 -0
- package/components/navbar/NavBar.js +156 -0
- package/components/navbar/TabNavBar.js +164 -0
- package/components/providers/FormProvider.js +49 -0
- package/components/providers/KeycloakAuthProvider.js +99 -0
- package/{src/components → components}/providers/OAuthProvider.js +49 -19
- package/components/providers/SspComponentsProvider.js +18 -0
- package/{src/components → components}/utils/Bt.js +13 -7
- package/components/utils/CustomMenu.js +39 -0
- package/context/auth.js +5 -0
- package/context/form.js +5 -0
- package/index.js +80 -0
- package/package.json +2 -2
- package/types/auth.js +2 -0
- package/{src/types → types}/form.js +7 -4
- package/src/components/detalhes/Category.js +0 -7
- package/src/components/detalhes/Field.js +0 -35
- package/src/components/detalhes/FieldLabel.js +0 -21
- package/src/components/detalhes/File.js +0 -35
- package/src/components/form/checkbox/CheckBox.js +0 -12
- package/src/components/form/checkbox/CheckBoxWarning.js +0 -14
- package/src/components/form/checkbox/RequiredCheckBoxValidator.js +0 -56
- package/src/components/form/date/DatePicker.js +0 -71
- package/src/components/form/date/TimePicker.js +0 -53
- package/src/components/form/file/DropFileUpload.js +0 -207
- package/src/components/form/file/FileUpload.js +0 -171
- package/src/components/form/input/ActiveInput.js +0 -27
- package/src/components/form/input/AutoComplete.js +0 -40
- package/src/components/form/input/FetchAutoComplete.js +0 -103
- package/src/components/form/input/FixedAutoComplete.js +0 -46
- package/src/components/form/input/MaskInput.js +0 -52
- package/src/components/form/input/MultInput.js +0 -38
- package/src/components/form/input/OtherCheckBox.js +0 -27
- package/src/components/form/stepper/Stepper.js +0 -105
- package/src/components/form/stepper/StepperBlock.js +0 -67
- package/src/components/form/switch/Switch.js +0 -27
- package/src/components/form/switch/ToggleVisibility.js +0 -33
- package/src/components/icons/icons.js +0 -16
- package/src/components/modal/Modal.js +0 -75
- package/src/components/navbar/NavBar.js +0 -127
- package/src/components/navbar/TabNavBar.js +0 -135
- package/src/components/providers/FormProvider.js +0 -23
- package/src/components/providers/KeycloakAuthProvider.js +0 -69
- package/src/components/providers/SspComponentsProvider.js +0 -11
- package/src/components/utils/CustomMenu.js +0 -33
- package/src/context/auth.js +0 -2
- package/src/context/form.js +0 -2
- package/src/index.js +0 -41
- package/src/types/auth.js +0 -1
- /package/{src/components → components}/detalhes/Category.d.ts +0 -0
- /package/{src/components → components}/detalhes/Field.d.ts +0 -0
- /package/{src/components → components}/detalhes/FieldLabel.d.ts +0 -0
- /package/{src/components → components}/detalhes/File.d.ts +0 -0
- /package/{src/components → components}/form/checkbox/CheckBox.d.ts +0 -0
- /package/{src/components → components}/form/checkbox/CheckBoxAdditional.d.ts +0 -0
- /package/{src/components → components}/form/checkbox/CheckBoxWarning.d.ts +0 -0
- /package/{src/components → components}/form/checkbox/RequiredCheckBoxValidator.d.ts +0 -0
- /package/{src/components → components}/form/date/DatePicker.d.ts +0 -0
- /package/{src/components → components}/form/date/TimePicker.d.ts +0 -0
- /package/{src/components → components}/form/file/DropFileUpload.d.ts +0 -0
- /package/{src/components → components}/form/file/FileUpload.d.ts +0 -0
- /package/{src/components → components}/form/input/ActiveInput.d.ts +0 -0
- /package/{src/components → components}/form/input/AutoComplete.d.ts +0 -0
- /package/{src/components → components}/form/input/FetchAutoComplete.d.ts +0 -0
- /package/{src/components → components}/form/input/FixedAutoComplete.d.ts +0 -0
- /package/{src/components → components}/form/input/Input.d.ts +0 -0
- /package/{src/components → components}/form/input/MaskInput.d.ts +0 -0
- /package/{src/components → components}/form/input/MultInput.d.ts +0 -0
- /package/{src/components → components}/form/input/OtherCheckBox.d.ts +0 -0
- /package/{src/components → components}/form/stepper/Stepper.d.ts +0 -0
- /package/{src/components → components}/form/stepper/StepperBlock.d.ts +0 -0
- /package/{src/components → components}/form/switch/Switch.d.ts +0 -0
- /package/{src/components → components}/form/switch/ToggleVisibility.d.ts +0 -0
- /package/{src/components → components}/form/table/Table.d.ts +0 -0
- /package/{src/components → components}/icons/icons.d.ts +0 -0
- /package/{src/components → components}/modal/Modal.d.ts +0 -0
- /package/{src/components → components}/navbar/NavBar.d.ts +0 -0
- /package/{src/components → components}/navbar/TabNavBar.d.ts +0 -0
- /package/{src/components → components}/providers/FormProvider.d.ts +0 -0
- /package/{src/components → components}/providers/KeycloakAuthProvider.d.ts +0 -0
- /package/{src/components → components}/providers/OAuthProvider.d.ts +0 -0
- /package/{src/components → components}/providers/SspComponentsProvider.d.ts +0 -0
- /package/{src/components → components}/utils/Bt.d.ts +0 -0
- /package/{src/components → components}/utils/CustomMenu.d.ts +0 -0
- /package/{src/context → context}/auth.d.ts +0 -0
- /package/{src/context → context}/form.d.ts +0 -0
- /package/{src/index.d.ts → index.d.ts} +0 -0
- /package/{src/types → types}/auth.d.ts +0 -0
- /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
|
-
}
|