@ssplib/react-components 0.0.248 → 0.0.249

package/src/components/form/file/FileUpload.js

@@ -0,0 +1,171 @@
+import CameraAltIcon from '@mui/icons-material/CameraAlt';
+import Delete from '@mui/icons-material/Delete';
+import DoneIcon from '@mui/icons-material/Done';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import PictureAsPdf from '@mui/icons-material/PictureAsPdf';
+import { Box, Button, CircularProgress, Grid, InputLabel, Paper, TableContainer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Stack } from '@mui/system';
+import get from 'lodash.get';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../../../context/auth';
+import { FormContext } from '../../../context/form';
+function bytesToMegabytes(bytes) {
+    const megabytes = bytes / (1024 * 1024);
+    return megabytes;
+}
+export default function FileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, route = '', sizeLimit = 4, xs = 12, sm, md, }) {
+    const context = useContext(FormContext);
+    const { user } = useContext(AuthContext);
+    const theme = useTheme();
+    const isSmall = useMediaQuery(theme.breakpoints.only('xs'));
+    const [files, setFiles] = useState([]);
+    const [filesLoaded, setFilesLoaded] = useState([]);
+    const [fileIds, setFilesIds] = useState({});
+    // const [filesError, setFilesError] = useState<number[]>([])
+    const [errorMsg, setErrorMsg] = useState('');
+    const onFile = 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 = get(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));
+        }
+    };
+    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]);
+    useEffect(() => {
+        return () => {
+            context.setFilesUid((files) => files.filter((x) => x.CO_TIPO_ARQUIVO !== parseInt(tipoArquivo)));
+        };
+    }, []);
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }, { sx: { width: '100%' } }),
+        React.createElement(InputLabel, { required: required, sx: { marginBottom: 2, textTransform: 'capitalize' } }, title),
+        React.createElement(Box, { sx: { backgroundColor: '#e2eafc', padding: 1, borderRadius: 1, marginTop: 1 } },
+            React.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.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.createElement(Box, { sx: {
+                    display: {
+                        sx: 'block',
+                        md: 'flex',
+                    },
+                } },
+                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 },
+                    React.createElement(Button, { variant: 'contained', disableElevation: true, startIcon: React.createElement(InsertDriveFileIcon, null), component: 'span', sx: { textTransform: 'none' }, fullWidth: true }, "Escolher Documento")))),
+                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' },
+                    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'))))),
+            React.createElement(Typography, { fontWeight: 600, paddingY: 1, color: 'black' },
+                "Voc\u00EA selecionou ",
+                files.length,
+                " arquivo",
+                files.length > 1 && 's'),
+            files.length > 0 && (React.createElement(TableContainer, { component: Paper },
+                React.createElement(Stack, { direction: 'column' }, files.map((x) => (React.createElement(Stack, { key: x.name, direction: 'row', justifyContent: 'space-between', padding: 0.5 },
+                    React.createElement(Box, null,
+                        React.createElement(Stack, { direction: 'row', spacing: 2 },
+                            filesLoaded.includes(x.id) ? React.createElement(DoneIcon, { sx: { fill: '#06d6a0' } }) : React.createElement(CircularProgress, { size: 22, sx: { color: 'black' } }),
+                            React.createElement(PictureAsPdf, { color: 'error' }),
+                            React.createElement(Typography, { fontWeight: 600 }, x.name))),
+                    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"))))))))),
+            errorMsg && (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: 'caption', color: '#e53935', fontWeight: 600, fontSize: 14, paddingTop: 2 }, errorMsg),
+                React.createElement("br", null))),
+            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")))));
+}

package/src/components/form/input/ActiveInput.js

@@ -0,0 +1,27 @@
+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;
+};
+import { Grid, Stack } from '@mui/material';
+import InputLabel from '@mui/material/InputLabel';
+import React from 'react';
+import Switch from '../switch/Switch';
+import { SwitchWatch } from '../switch/ToggleVisibility';
+import { Input } from './Input';
+export default 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.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && (React.createElement(InputLabel, { required: required, sx: { textTransform: 'capitalize' } }, title)),
+        React.createElement(Stack, { direction: 'row' },
+            React.createElement(Switch, { name: switchName, defaultChecked: defaultChecked }),
+            React.createElement(SwitchWatch, { switchId: switchName, unregisterNameList: unregisterNameList },
+                React.createElement(Input, { name: 'ddd', type: 'input' })))));
+}

package/src/components/form/input/AutoComplete.js

@@ -0,0 +1,40 @@
+import { Autocomplete, Grid, TextField } from '@mui/material';
+import InputLabel from '@mui/material/InputLabel';
+import get from 'lodash.get';
+import React, { useCallback, useContext, useState } from 'react';
+import { useQuery } from 'react-query';
+import { AuthContext } from '../../../context/auth';
+import { FormContext } from '../../../context/form';
+export default function AutoComplete({ name, required = false, title, customPlaceholder, url, xs = 12, sm, md, dataPath = '', }) {
+    const context = useContext(FormContext);
+    const { user } = useContext(AuthContext);
+    const [options, setOptions] = useState([]);
+    const { isLoading, data, error } = 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 = useCallback((dt) => {
+        if (Array.isArray(dt))
+            return dt;
+        if (typeof dt === 'object')
+            return get(dt, dataPath);
+    }, []);
+    const onSelect = 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.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && React.createElement(InputLabel, { required: required }, title),
+        React.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.createElement(Autocomplete, { options: options, isOptionEqualToValue: (option, value) => option.id === value.id, onChange: onSelect, renderInput: (params) => {
+                var _a;
+                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 })));
+            } })));
+}

package/src/components/form/input/FetchAutoComplete.js

@@ -0,0 +1,103 @@
+import { Autocomplete, Grid, InputLabel, TextField } from '@mui/material';
+import get from 'lodash.get';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../../../context/auth';
+import { FormContext } from '../../../context/form';
+let useDefault = true;
+export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, watchValue, md, }) {
+    const context = useContext(FormContext);
+    const [loading, setLoading] = useState(true);
+    const [list, setList] = useState([]);
+    const [loadingText, setLoadingText] = useState('Carregando...');
+    const [dValue, setDValue] = useState(null);
+    const [value, setValue] = useState(null);
+    const { user } = useContext(AuthContext);
+    useEffect(() => {
+        if (defaultValue) {
+            fetch(url, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
+                },
+            }).then((res) => {
+                if (res.ok) {
+                    console.log('llll');
+                    res.json().then((j) => {
+                        let value = get(j, route, j).filter((x) => x.id === defaultValue);
+                        if (value.length > 0) {
+                            setList(get(j, route, j));
+                            setLoading(false);
+                            context.formSetValue(name, defaultValue);
+                            setDValue(value[0]);
+                        }
+                        else {
+                            setLoadingText('Erro ao carregar dados. Valor inválido');
+                        }
+                    });
+                }
+                else {
+                    setLoadingText('Erro ao carregar dados');
+                }
+            });
+        }
+    }, []);
+    useEffect(() => {
+        if (watchValue && useDefault) {
+            setValue(watchValue);
+            context.formSetValue(name, watchValue.id);
+            onChange(watchValue.id);
+        }
+    }, [watchValue]);
+    function onFocus() {
+        if ((defaultValue || !shouldRefetch) && list.length > 0)
+            return;
+        setLoading(true);
+        setList([]);
+        customLoadingText && setLoadingText(customLoadingText);
+        fetch(url, {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
+            },
+        }).then((res) => {
+            if (res.ok) {
+                res.json().then((j) => {
+                    setList(get(j, route, j));
+                    setLoading(false);
+                });
+            }
+            else {
+                setLoadingText('Erro ao carregar dados');
+            }
+        });
+    }
+    function handleAutoCompleteChange(value) {
+        useDefault = false;
+        if (value) {
+            setValue(value);
+            context.formSetValue(name, value.id);
+            onChange(value.id);
+            return;
+        }
+        setValue(null);
+        context.formSetValue(name, '');
+        onChange(undefined);
+    }
+    if (defaultValue && list.length <= 0 && !dValue)
+        return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+            React.createElement(TextField, { size: 'small', fullWidth: true, placeholder: loadingText, disabled: true })));
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && React.createElement(InputLabel, { required: required }, title),
+        React.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.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) => {
+                var _a;
+                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 })));
+            }, sx: {
+                bgcolor: 'white',
+            }, size: 'small', fullWidth: true })));
+}

package/src/components/form/input/FixedAutoComplete.js

@@ -0,0 +1,46 @@
+import { Autocomplete, Grid, InputLabel, TextField } from '@mui/material';
+import get from 'lodash.get';
+import React, { useContext, useEffect, useState } from 'react';
+import { FormContext } from '../../../context/form';
+let useDefault = true;
+export function FixedAutoComplete({ name, title, required = false, list, defaultValue, onChange = () => { }, xs = 12, sm, watchValue, md, }) {
+    const context = useContext(FormContext);
+    const [value, setValue] = useState(null);
+    useEffect(() => {
+        if (defaultValue)
+            context === null || context === void 0 ? void 0 : context.formSetValue(name, defaultValue.id);
+    }, []);
+    useEffect(() => {
+        if (watchValue && useDefault) {
+            setValue(watchValue);
+            context.formSetValue(name, watchValue.id);
+            onChange(watchValue.id);
+        }
+    }, [watchValue]);
+    function handleAutoCompleteChange(value) {
+        useDefault = false;
+        if (value) {
+            setValue(value);
+            context.formSetValue(name, value.id);
+            onChange(value.id);
+            return;
+        }
+        setValue(null);
+        context.formSetValue(name, '');
+        onChange(undefined);
+    }
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && React.createElement(InputLabel, { required: required }, title),
+        React.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.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) => {
+                var _a;
+                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 })));
+            }, size: 'small', sx: {
+                bgcolor: 'white',
+            }, fullWidth: true })));
+}

package/{components → src/components}/form/input/Input.js

@@ -1,27 +1,3 @@
-"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 __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)
@@ -33,20 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const material_1 = require("@mui/material");
-const lodash_get_1 = __importDefault(require("lodash.get"));
-const react_1 = __importStar(require("react"));
-const MaskInput_1 = __importDefault(require("./MaskInput"));
-const form_1 = require("../../../context/form");
-function Input(_a) {
+import { Grid, InputLabel, TextField } from '@mui/material';
+import get from 'lodash.get';
+import React, { useContext, useEffect } from 'react';
+import MaskInput from './MaskInput';
+import { FormContext } from '../../../context/form';
+export function Input(_a) {
     var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md, watchValue = '' } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md", "watchValue"]);
-    const context = (0, react_1.useContext)(form_1.FormContext);
-    (0, react_1.useEffect)(() => {
+    const context = useContext(FormContext);
+    useEffect(() => {
         context.formSetValue(props.name, watchValue);
     }, [watchValue]);
     const chooseInput = () => {
@@ -56,7 +27,7 @@ function Input(_a) {
             placeholder: props.customPlaceholder ? props.customPlaceholder : props.title,
         };
         const name = props.name;
-        const errorData = (0, lodash_get_1.default)(context === null || context === void 0 ? void 0 : context.errors, props.name);
+        const errorData = get(context === null || context === void 0 ? void 0 : context.errors, props.name);
         const helperText = errorData === null || errorData === void 0 ? void 0 : errorData.message;
         const error = errorData ? true : false;
         const formConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, context === null || context === void 0 ? void 0 : context.formRegister(name, {
@@ -114,30 +85,30 @@ function Input(_a) {
         switch (type) {
             case 'input':
             case 'email':
-                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { defaultValue: defaultValue }));
+                return React.createElement(TextField, Object.assign({}, formConfig, { defaultValue: defaultValue }));
             case 'password':
-                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { type: 'password' }));
+                return React.createElement(TextField, Object.assign({}, formConfig, { type: 'password' }));
             case 'number':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: numberMask,
                     }, watchValue: watchValue }));
             case 'cep':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00000-000',
                     }, watchValue: watchValue }));
             case 'phone':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '(00) [#]0000-0000',
                         definitions: {
                             '#': /^9$/,
                         },
                     }, watchValue: watchValue }));
             case 'sei':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00000-00000000/0000-00',
                     }, watchValue: watchValue }));
             case 'cpf_cnpj':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '000.000.000-00[0]',
                     }, onMask: (value, setMask) => {
                         if (value.length > 14)
@@ -146,22 +117,21 @@ function Input(_a) {
                             setMask('000.000.000-00[0]');
                     }, watchValue: watchValue }));
             case 'cpf':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '000.000.000-00',
                     }, watchValue: watchValue }));
             case 'cnpj':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00.000.000/0000-00',
                     }, watchValue: watchValue }));
             case 'rg':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                return (React.createElement(MaskInput, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00000[000000]',
                     }, watchValue: watchValue }));
         }
     };
-    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
-        props.title && (react_1.default.createElement(material_1.InputLabel, { htmlFor: 'campo', required: props.required }, props.title)),
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        props.title && (React.createElement(InputLabel, { htmlFor: 'campo', required: props.required }, props.title)),
         chooseInput()));
 }
-exports.Input = Input;
-exports.default = react_1.default.memo(Input);
+export default React.memo(Input);

package/src/components/form/input/MaskInput.js

@@ -0,0 +1,52 @@
+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;
+};
+import { TextField } from '@mui/material';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { IMaskInput } from 'react-imask';
+import { FormContext } from '../../../context/form';
+const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) {
+    const { onChange, maskProps, onMask, maskValue, setMaskValue, watchValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue", "watchValue"]);
+    const [mask, setMask] = useState(maskProps.mask);
+    delete prop.value;
+    const myRef = useRef(null);
+    const [myValue, setMyValue] = useState('');
+    const context = useContext(FormContext);
+    useEffect(() => {
+        if (watchValue) {
+            setMyValue(watchValue);
+        }
+    }, [watchValue]);
+    useEffect(() => {
+        context.formSetValue(prop.name, myRef.current.element.value);
+    }, [myValue]);
+    delete prop.watchValue;
+    return (React.createElement(IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, value: myValue, ref: myRef, inputRef: ref, onChange: (e) => { }, onAccept: (value, mask) => {
+            setMyValue(value);
+            mask.updateValue();
+            if (!onMask)
+                return;
+            onMask(value, setMask);
+        } })));
+});
+export default function MaskInput(props) {
+    const context = useContext(FormContext);
+    const [maskValue, setMaskValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, Object.assign({}, props.formConfig, { onInput: (e) => {
+                const name = props.formConfig.name;
+                const value = e.target.value;
+                context.formSetValue(name, value);
+            }, InputProps: {
+                inputComponent: TextMaskCustom,
+                inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue, watchValue: props.watchValue },
+            }, disabled: props.disabled, fullWidth: true }))));
+}

package/src/components/form/input/MultInput.js

@@ -0,0 +1,38 @@
+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;
+};
+import { Grid, TextField } from '@mui/material';
+import InputLabel from '@mui/material/InputLabel';
+import get from 'lodash.get';
+import React, { useContext, useEffect } from 'react';
+import { FormContext } from '../../../context/form';
+export default function MultInput(_a) {
+    var _b;
+    var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, watchValue = '', inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "watchValue", "inputMinLength", "inputMaxLength", "md"]);
+    const context = useContext(FormContext);
+    useEffect(() => {
+        context.formSetValue(name, watchValue);
+    }, [watchValue]);
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && (React.createElement(InputLabel, { required: required, sx: { textTransform: 'capitalize' } }, title)),
+        React.createElement(TextField, Object.assign({ multiline: true, fullWidth: true, minRows: 3, defaultValue: defaultValue }, context.formRegister(name, {
+            validate: (v, f) => {
+                if (required && v.length <= 0)
+                    return 'Este campo é obrigatório';
+                if (v.length > inputMaxLength)
+                    return `Limite máximo de ${inputMaxLength} caracteres`;
+                if (v.length < inputMinLength && required)
+                    return `Limite mínimo de ${inputMinLength} caracteres`;
+            },
+        }), { error: get(context.errors, name) ? true : false, helperText: (_b = get(context.errors, name)) === null || _b === void 0 ? void 0 : _b.message, sx: {
+                bgcolor: 'white',
+            }, placeholder: customPlaceholder ? customPlaceholder : title }))));
+}

package/src/components/form/input/OtherCheckBox.js

@@ -0,0 +1,27 @@
+import { Box, Checkbox, Grid, Stack, TextField } from '@mui/material';
+import get from 'lodash.get';
+import React, { useContext, useEffect } from 'react';
+import { FormContext } from '../../../context/form';
+export default function SSPOtherCheckBox({ name, required = false, xs = 12, sm, md }) {
+    var _a;
+    const context = useContext(FormContext);
+    const checkName = `switch-${name}`;
+    useEffect(() => {
+        const checkValue = context.formWatch(checkName);
+        if (!checkValue)
+            context.formSetValue(name, undefined);
+    }, [context]);
+    return (React.createElement(Grid, Object.assign({ item: true }, { xs, sm, md }),
+        React.createElement(Stack, { direction: 'row' },
+            React.createElement(Box, null,
+                React.createElement(Checkbox, Object.assign({ size: 'small' }, context.formRegister(checkName), { sx: { paddingLeft: 0, margin: 0 } }))),
+            context.formWatch(checkName) ? (React.createElement(TextField, Object.assign({ size: 'small' }, context.formRegister(name, {
+                validate: (v, f) => {
+                    const value = context.formWatch(checkName);
+                    if (value === true) {
+                        if (!v || (v.length <= 0 && required))
+                            return 'Este campo não pode ser vazio';
+                    }
+                },
+            }), { required: true, error: get(context.errors, name) ? true : false, helperText: (_a = get(context.errors, name)) === null || _a === void 0 ? void 0 : _a.message, placeholder: 'Outro' }))) : (React.createElement(TextField, { size: 'small', disabled: true, placeholder: 'Outro' })))));
+}