@ssplib/react-components 0.0.250 → 0.0.252

package/components/form/file/DropFileUpload.js

@@ -0,0 +1,236 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const auth_1 = require("../../../context/auth");
+const form_1 = require("../../../context/form");
+const react_dropzone_1 = require("react-dropzone");
+const axios_1 = __importDefault(require("axios"));
+const icons_1 = require("../../icons/icons");
+function bytesToMegabytes(bytes) {
+    const megabytes = bytes / (1024 * 1024);
+    return megabytes;
+}
+function bytesToKBorMB(bytes) {
+    const KB = 1024;
+    const MB = 1024 * KB;
+    if (bytes < MB) {
+        const KBValue = bytes / KB;
+        return `${KBValue.toFixed(1)}KB`;
+    }
+    else {
+        const MBValue = bytes / MB;
+        return `${MBValue.toFixed(1)}MB`;
+    }
+}
+function LinearProgressWithLabel(props) {
+    return (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement(material_1.Box, { sx: { width: '100%', mr: 1 } },
+            react_1.default.createElement(material_1.LinearProgress, Object.assign({ variant: 'determinate' }, props))),
+        react_1.default.createElement(material_1.Box, { sx: { minWidth: 3 } },
+            react_1.default.createElement(material_1.Typography, { variant: 'body2', color: 'text.secondary' }, `${Math.round(props.value)}%`))));
+}
+function DropFileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, sizeLimit = 4, xs = 12, sm, md, route = '', tstToken = '', }) {
+    const { getRootProps, getInputProps } = (0, react_dropzone_1.useDropzone)({
+        multiple,
+        onDrop: (dropFiles) => {
+            const fileList = [];
+            setProgress(-1);
+            dropFiles
+                .filter((file) => {
+                if (bytesToMegabytes(file.size) > sizeLimit) {
+                    setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
+                    setTimeout(() => {
+                        setErrorMsg('');
+                    }, 3000);
+                    return false;
+                }
+                return true;
+            })
+                .forEach((file, index) => {
+                let id = Date.now() + index;
+                // fetch API
+                const fd = new FormData();
+                fd.append('files', file);
+                fd.append('tipoArquivo', tipoArquivo);
+                axios_1.default
+                    .post(apiURL, fd, {
+                    onUploadProgress: (progressEvent) => {
+                        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                        setProgress(percentCompleted);
+                        if (percentCompleted >= 100) {
+                            setFiles((f) => [...f, { id: id, name: file.name, loading: true, error: false, file: file, size: file.size }]);
+                        }
+                    },
+                    headers: { Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}` },
+                })
+                    .then((res) => {
+                    if (res.status > 200) {
+                        const fileIdFromApi = (0, lodash_get_1.default)(res.data, route, res.data)[0];
+                        const fileId = fileIdFromApi['coSeqArquivo'];
+                        context.setFilesUid((fId) => [
+                            ...fId,
+                            {
+                                CO_SEQ_ARQUIVO: fileId,
+                                CO_TIPO_ARQUIVO: parseInt(tipoArquivo),
+                            },
+                        ]);
+                        setFilesLoaded((fl) => [...fl, id]);
+                        const f = {};
+                        f[id] = fileId;
+                        setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
+                    }
+                    else {
+                        setProgress(-1);
+                        removeFile(id);
+                    }
+                })
+                    .catch((err) => {
+                    console.log(err);
+                    setProgress(-1);
+                    removeFile(id);
+                });
+            });
+        },
+    });
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    const [progress, setProgress] = (0, react_1.useState)(-1);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [filesLoaded, setFilesLoaded] = (0, react_1.useState)([]);
+    const [fileIds, setFilesIds] = (0, react_1.useState)({});
+    // const [filesError, setFilesError] = useState<number[]>([])
+    const [errorMsg, setErrorMsg] = (0, react_1.useState)('');
+    const removeFile = (id, hideMsg, fileId) => {
+        setFiles(files.filter((x) => x.id !== id));
+        if (fileId)
+            context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== fileId));
+        if (!hideMsg) {
+            setErrorMsg('Erro ao enviar arquivo. Verifique o formato e tente mais tarde.');
+            setTimeout(() => {
+                setErrorMsg('');
+            }, 3000);
+        }
+    };
+    const deleteFile = (e, id) => {
+        if (Object.keys(fileIds).includes(id.toString())) {
+            fetch(`${apiURL}/${fileIds[id]}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${tstToken === '' ? (user ? user.token : '') : tstToken}`,
+                },
+            })
+                .then((res) => {
+                if (!res.ok)
+                    removeFile(id, true, fileIds[id]);
+                if (res.status === 200) {
+                    removeFile(id, true, fileIds[id]);
+                }
+            })
+                .catch((err) => console.log(err));
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const dt = new DataTransfer();
+        files.forEach((x) => {
+            dt.items.add(x.file);
+        });
+        context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
+    }, [files, context, name]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
+        };
+    }, []);
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
+        react_1.default.createElement(material_1.Box, { bgcolor: 'white', p: 2, borderRadius: '8px', color: '#1E293B' },
+            react_1.default.createElement(material_1.InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
+            react_1.default.createElement(system_1.Stack, Object.assign({}, getRootProps({ className: 'dropzone' }), { bgcolor: '#EFEFEF', justifyContent: 'center', alignItems: 'center', textAlign: 'center', borderRadius: '6px', py: 8, border: 'solid 1.5px #989898', sx: {
+                    borderStyle: 'dashed',
+                    cursor: 'pointer',
+                } }),
+                react_1.default.createElement("input", Object.assign({}, getInputProps(), context.formRegister(name, {
+                    validate: (v, f) => {
+                        if ((v.length && filesLoaded.length) <= 0 && required)
+                            return 'O campo de arquivo é obrigatório';
+                    },
+                }))),
+                react_1.default.createElement(system_1.Stack, { spacing: 2, alignItems: 'center' },
+                    react_1.default.createElement(material_1.Box, null,
+                        react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 18 }, "Arraste seus arquivos at\u00E9 aqui"),
+                        react_1.default.createElement(material_1.Typography, null, "ou selecione arquivos que est\u00E3o no seu computador")),
+                    react_1.default.createElement(material_1.Button, { variant: 'contained', sx: {
+                            backgroundColor: '#64748B',
+                            pointerEvents: 'none',
+                            borderRadius: '8px',
+                            width: 'fit-content',
+                        } }, "Selecionar"),
+                    react_1.default.createElement(material_1.Typography, { fontWeight: 300 },
+                        "Tamanho m\u00E1ximo por arquivo ",
+                        sizeLimit,
+                        "MB"))),
+            react_1.default.createElement(material_1.Typography, { pt: 2, fontSize: 16, fontWeight: 600 },
+                "Voc\u00EA selecionou ",
+                files.length,
+                " arquivo",
+                files.length > 1 ? 's' : '',
+                "."),
+            react_1.default.createElement(system_1.Stack, { width: '100%', marginTop: 1, spacing: 1 },
+                files.map((x) => (react_1.default.createElement(system_1.Stack, { direction: 'row', justifyContent: 'space-between', border: 'solid 1px #E2E8F0', borderRadius: 2, p: 1 },
+                    react_1.default.createElement(system_1.Stack, { direction: 'row' },
+                        react_1.default.createElement(system_1.Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', minWidth: 30, pr: 1.5 },
+                            react_1.default.createElement(icons_1.PDFIcon, { sx: {
+                                    filter: 'invert(42%) sepia(86%) saturate(2412%) hue-rotate(326deg) brightness(86%) contrast(102%)',
+                                    transform: 'scale(1.5)',
+                                    width: 30,
+                                } })),
+                        react_1.default.createElement(system_1.Stack, null,
+                            react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, x.name),
+                            react_1.default.createElement(material_1.Typography, { fontSize: 14 }, bytesToKBorMB(x.size)))),
+                    react_1.default.createElement(material_1.Button, { size: 'small', startIcon: react_1.default.createElement(icons_1.TrashIcon, null), variant: 'contained', onClick: (e) => deleteFile(e, x.id), sx: {
+                            height: 40,
+                            backgroundColor: '#DE3F50',
+                            borderRadius: '8px',
+                        } }, "Remover")))),
+                progress > 0 && progress < 100 && (react_1.default.createElement(LinearProgressWithLabel, { value: progress, sx: {
+                        backgroundColor: '#103D6A',
+                        '.MuiLinearProgress-bar': {
+                            backgroundColor: '#BDDDFA',
+                        },
+                    } }))),
+            errorMsg && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
+                react_1.default.createElement("br", null))),
+            (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")))));
+}
+exports.default = DropFileUpload;

package/components/form/file/FileUpload.js

@@ -0,0 +1,200 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const CameraAlt_1 = __importDefault(require("@mui/icons-material/CameraAlt"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const Done_1 = __importDefault(require("@mui/icons-material/Done"));
+const InsertDriveFile_1 = __importDefault(require("@mui/icons-material/InsertDriveFile"));
+const PictureAsPdf_1 = __importDefault(require("@mui/icons-material/PictureAsPdf"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const auth_1 = require("../../../context/auth");
+const form_1 = require("../../../context/form");
+function bytesToMegabytes(bytes) {
+    const megabytes = bytes / (1024 * 1024);
+    return megabytes;
+}
+function FileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, route = '', sizeLimit = 4, xs = 12, sm, md, }) {
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [filesLoaded, setFilesLoaded] = (0, react_1.useState)([]);
+    const [fileIds, setFilesIds] = (0, react_1.useState)({});
+    // const [filesError, setFilesError] = useState<number[]>([])
+    const [errorMsg, setErrorMsg] = (0, react_1.useState)('');
+    const onFile = (0, react_1.useCallback)((e) => {
+        const newFiles = e.target.files;
+        const filesTo = Object.keys(newFiles).map((key) => newFiles[key]);
+        setFiles([
+            ...files,
+            ...filesTo
+                .filter((file) => {
+                if (bytesToMegabytes(file.size) > sizeLimit) {
+                    setErrorMsg(`Por favor, escolha um arquivo com tamanho inferior a ${sizeLimit} MB`);
+                    setTimeout(() => {
+                        setErrorMsg('');
+                    }, 3000);
+                    return false;
+                }
+                return true;
+            })
+                .map((file, index) => {
+                let id = Date.now() + index;
+                // fetch API
+                const fd = new FormData();
+                fd.append('files', file);
+                fd.append('tipoArquivo', tipoArquivo);
+                fetch(apiURL, {
+                    method: 'POST',
+                    body: fd,
+                    headers: {
+                        Authorization: `Bearer ${user ? user.token : ''}`,
+                    },
+                })
+                    .then((res) => {
+                    if (!res.ok) {
+                        removeFile(id);
+                        return;
+                    }
+                    res.json().then((j) => {
+                        if (j.status && j.status.status === 200) {
+                            const fileIdFromApi = (0, lodash_get_1.default)(j, route, j)[0];
+                            const fileId = fileIdFromApi['coSeqArquivo'];
+                            context.setFilesUid((fId) => [
+                                ...fId,
+                                {
+                                    CO_SEQ_ARQUIVO: fileId,
+                                    CO_TIPO_ARQUIVO: parseInt(tipoArquivo),
+                                },
+                            ]);
+                            setFilesLoaded((fl) => [...fl, id]);
+                            const f = {};
+                            f[id] = fileId;
+                            setFilesIds((ids) => (Object.assign(Object.assign({}, ids), f)));
+                        }
+                        else {
+                            removeFile(id);
+                        }
+                    });
+                })
+                    .catch((err) => {
+                    removeFile(id);
+                });
+                return { id: id, name: file.name, loading: true, error: false, file: file };
+            }),
+        ]);
+    }, [files, context]);
+    const removeFile = (id, hideMsg, fileId) => {
+        setFiles(files.filter((x) => x.id !== id));
+        if (fileId)
+            context.setFilesUid((fId) => fId.filter((idd) => idd.CO_SEQ_ARQUIVO !== fileId));
+        if (!hideMsg) {
+            setErrorMsg('Erro ao enviar arquivo. Tente novamente mais tarde');
+            setTimeout(() => {
+                setErrorMsg('');
+            }, 3000);
+        }
+    };
+    const deleteFile = (e, id) => {
+        if (Object.keys(fileIds).includes(id.toString())) {
+            fetch(`${apiURL}/${fileIds[id]}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
+                },
+            })
+                .then((res) => {
+                if (!res.ok)
+                    removeFile(id, true, fileIds[id]);
+                if (res.status === 200) {
+                    removeFile(id, true, fileIds[id]);
+                }
+            })
+                .catch((err) => console.log(err));
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const dt = new DataTransfer();
+        files.forEach((x) => {
+            dt.items.add(x.file);
+        });
+        context === null || context === void 0 ? void 0 : context.formSetValue(name, dt.files);
+    }, [files, context, name]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
+        };
+    }, []);
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
+        react_1.default.createElement(material_1.InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
+        react_1.default.createElement(material_1.Box, { sx: { backgroundColor: '#e2eafc', padding: 1, borderRadius: 1, marginTop: 1 } },
+            react_1.default.createElement("input", Object.assign({ id: name, type: 'file', multiple: multiple }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
+                validate: (v, f) => {
+                    if ((v.length && filesLoaded.length) <= 0 && required)
+                        return 'O campo de arquivo é obrigatório';
+                },
+            }), { onChange: onFile, accept: '.pdf', style: { display: 'none' } })),
+            react_1.default.createElement("input", Object.assign({ id: name + 'foto', type: 'file', capture: 'environment', multiple: multiple }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
+                validate: (v, f) => {
+                    if ((v.length && filesLoaded.length) <= 0 && required)
+                        return 'O campo de arquivo é obrigatório';
+                },
+            }), { onChange: onFile, accept: '.jpg, .png, .jpeg', style: { display: 'none' } })),
+            react_1.default.createElement(material_1.Box, { sx: {
+                    display: {
+                        sx: 'block',
+                        md: 'flex',
+                    },
+                } },
+                react_1.default.createElement(material_1.Box, { sx: { width: '100%', marginRight: { xs: 0, md: 1 }, marginBottom: { xs: 1, md: 0 } } }, !multiple && files.length >= 1 ? (react_1.default.createElement(material_1.Button, { disabled: true, variant: 'contained', disableElevation: true, startIcon: react_1.default.createElement(InsertDriveFile_1.default, null), component: 'span', sx: { textTransform: 'none' }, fullWidth: true }, "Escolher Documento")) : (react_1.default.createElement("label", { htmlFor: name },
+                    react_1.default.createElement(material_1.Button, { variant: 'contained', disableElevation: true, startIcon: react_1.default.createElement(InsertDriveFile_1.default, null), component: 'span', sx: { textTransform: 'none' }, fullWidth: true }, "Escolher Documento")))),
+                react_1.default.createElement(material_1.Box, { sx: { width: '100%' } }, !multiple && files.length >= 1 ? (react_1.default.createElement(material_1.Button, { disabled: true, variant: 'contained', disableElevation: true, startIcon: react_1.default.createElement(CameraAlt_1.default, null), component: 'span', sx: { textTransform: 'none', backgroundColor: '#0096c7' }, fullWidth: true }, isSmall ? 'Tirar Foto' : 'Escolher Imagem')) : (react_1.default.createElement("label", { htmlFor: name + 'foto' },
+                    react_1.default.createElement(material_1.Button, { variant: 'contained', disableElevation: true, startIcon: react_1.default.createElement(CameraAlt_1.default, null), component: 'span', sx: { textTransform: 'none', backgroundColor: '#0096c7' }, fullWidth: true }, isSmall ? 'Tirar Foto' : 'Escolher Imagem'))))),
+            react_1.default.createElement(material_1.Typography, { fontWeight: 600, paddingY: 1, color: 'black' },
+                "Voc\u00EA selecionou ",
+                files.length,
+                " arquivo",
+                files.length > 1 && 's'),
+            files.length > 0 && (react_1.default.createElement(material_1.TableContainer, { component: material_1.Paper },
+                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 },
+                    react_1.default.createElement(material_1.Box, null,
+                        react_1.default.createElement(system_1.Stack, { direction: 'row', spacing: 2 },
+                            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' } }),
+                            react_1.default.createElement(PictureAsPdf_1.default, { color: 'error' }),
+                            react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, x.name))),
+                    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"))))))))),
+            errorMsg && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
+                react_1.default.createElement("br", null))),
+            (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")))));
+}
+exports.default = FileUpload;

package/components/form/input/ActiveInput.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const react_1 = __importDefault(require("react"));
+const Switch_1 = __importDefault(require("../switch/Switch"));
+const ToggleVisibility_1 = require("../switch/ToggleVisibility");
+const Input_1 = require("./Input");
+function FileUpload(_a) {
+    var { name, required = false, title, defaultChecked = false, xs = 12, unregisterNameList, sm, md } = _a, props = __rest(_a, ["name", "required", "title", "defaultChecked", "xs", "unregisterNameList", "sm", "md"]);
+    const switchName = `${name}-switch`;
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && (react_1.default.createElement(InputLabel_1.default, { required: required, sx: { textTransform: 'capitalize' } }, title)),
+        react_1.default.createElement(material_1.Stack, { direction: 'row' },
+            react_1.default.createElement(Switch_1.default, { name: switchName, defaultChecked: defaultChecked }),
+            react_1.default.createElement(ToggleVisibility_1.SwitchWatch, { switchId: switchName, unregisterNameList: unregisterNameList },
+                react_1.default.createElement(Input_1.Input, { name: 'ddd', type: 'input' })))));
+}
+exports.default = FileUpload;

package/components/form/input/AutoComplete.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const react_query_1 = require("react-query");
+const auth_1 = require("../../../context/auth");
+const form_1 = require("../../../context/form");
+function AutoComplete({ name, required = false, title, customPlaceholder, url, xs = 12, sm, md, dataPath = '', }) {
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const { isLoading, data, error } = (0, react_query_1.useQuery)(`autocomplete-${name}`, () => fetch(url, {
+        headers: {
+            Authorization: `Bearer ${user ? user.token : ''}`,
+        },
+    }).then((x) => x.json().then((list) => setOptions(getData(list)))));
+    // transformar isso em um component ou utils
+    const getData = (0, react_1.useCallback)((dt) => {
+        if (Array.isArray(dt))
+            return dt;
+        if (typeof dt === 'object')
+            return (0, lodash_get_1.default)(dt, dataPath);
+    }, []);
+    const onSelect = (0, react_1.useCallback)((e, value) => {
+        context === null || context === void 0 ? void 0 : context.formSetValue(name, value ? value.id : '');
+        context === null || context === void 0 ? void 0 : context.formTrigger(name);
+    }, [context, name]);
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && react_1.default.createElement(InputLabel_1.default, { required: required }, title),
+        react_1.default.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
+            validate: (v, f) => {
+                if (v.length <= 0 && required)
+                    return 'Este campo é obrigatório';
+            },
+        }), { hidden: true })),
+        react_1.default.createElement(material_1.Autocomplete, { options: options, isOptionEqualToValue: (option, value) => option.id === value.id, onChange: onSelect, renderInput: (params) => {
+                var _a;
+                return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { placeholder: customPlaceholder, size: 'small', error: (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
+            } })));
+}
+exports.default = AutoComplete;