@ssplib/react-components 0.0.35 → 0.0.37

package/components/form/input/Input.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-export declare function Input({ type, numberMask, xs, sm, md, ...props }: {
-    type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg';
+export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
+    type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password';
     name: string;
     title?: string;
     required?: boolean;
     numberMask?: string;
     customPlaceholder?: string;
+    inputMinLength?: number;
+    inputMaxLength?: number;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/input/Input.js

@@ -44,7 +44,7 @@ const react_1 = __importStar(require("react"));
 const MaskInput_1 = __importDefault(require("./MaskInput"));
 const form_1 = require("../../../context/form");
 function Input(_a) {
-    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "md"]);
+    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
     const chooseInput = (0, react_1.useCallback)(() => {
         const inputConfig = {
@@ -70,14 +70,14 @@ function Input(_a) {
                         return 'O CPF precisa ter no mínimo 11 dígitos';
                 }
                 //
-                else if (type === 'input') {
-                    if (v.length > 255)
-                        return 'Limite máximo de 255 caracteres';
-                    if (v.length < 3 && props.required)
-                        return 'Limite mínimo de 3 caracteres';
+                else if (type === 'input' || type === 'password') {
+                    if (v.length > inputMaxLength)
+                        return `Limite máximo de ${inputMaxLength} caracteres`;
+                    if (v.length < inputMinLength && props.required)
+                        return `Limite mínimo de ${inputMinLength} caracteres`;
                 }
                 //
-                else if (type === 'email' && props.required) {
+                else if (type === 'email') {
                     if (v.length > 50)
                         return 'Limite máximo de 50 caracteres';
                     if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) && props.required)
@@ -100,6 +100,8 @@ function Input(_a) {
             case 'input':
             case 'email':
                 return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig));
+            case 'password':
+                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { type: 'password' }));
             case 'number':
                 return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
                         mask: numberMask,

package/components/form/input/MultInput.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export default function MultInput({ name, required, title, customPlaceholder, xs, sm, md, ...props }: {
+export default function MultInput({ name, required, title, customPlaceholder, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
     name: string;
     title?: string;
     customPlaceholder?: string;
     required?: boolean;
+    inputMinLength?: number;
+    inputMaxLength?: number;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/input/MultInput.js

@@ -44,7 +44,7 @@ const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
 function MultInput(_a) {
     var _b;
-    var { name, required = false, title, customPlaceholder, xs = 12, sm, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "xs", "sm", "md"]);
+    var { name, required = false, title, customPlaceholder, xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
     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)),
@@ -52,6 +52,10 @@ function MultInput(_a) {
             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: (0, lodash_get_1.default)(context.errors, name) ? true : false, helperText: (_b = (0, lodash_get_1.default)(context.errors, name)) === null || _b === void 0 ? void 0 : _b.message, placeholder: customPlaceholder ? customPlaceholder : title }))));
 }

package/components/form/table/Table.js

@@ -254,10 +254,10 @@ function Table({ columns, fetchFunc, emptyMsg = {
                             react_1.default.createElement(Typography_1.default, { fontSize: 16, sx: { wordWrap: 'break-word', color: '#1E293B' }, fontFamily: 'Inter' }, c.keyName === 'stEventoExterno' ? getStatusMsg((0, lodash_get_1.default)(x, c.keyName)) : (0, lodash_get_1.default)(x, c.keyName)))))),
                     react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: 12 / columnSize },
                         react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))))))))),
-            getMaxItems().length > 0 && csv && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 2 },
-                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 } } }, "Salvar .CSV")),
-                react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', paddingBottom: 4 },
+            getMaxItems().length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                csv && (react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 2 },
+                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 } } }, "Salvar .CSV"))),
+                react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'center', paddingY: 4 },
                     react_1.default.createElement(Pagination_1.default, { count: paginationCount, siblingCount: isSmall ? 0 : 1, size: 'large', onChange: onPaginationChange, page: listPage })))))));
 }
 exports.Table = Table;

package/components/navbar/NavBar.d.ts

@@ -6,8 +6,8 @@ export default function NavBar({ links, title, img, pos, next, el, menuItems, }:
     }[];
     title: string;
     img: string;
-    next?: boolean;
     menuItems: JSX.Element | JSX.Element[];
+    next?: boolean;
     el?: JSX.Element;
     pos?: 'fixed' | 'inherit';
 }): JSX.Element;

package/components/navbar/NavBar.js

@@ -41,7 +41,7 @@ function NavBar({ links, title, img, pos = 'fixed', next = true, el, menuItems,
     let router = undefined;
     if (next)
         router = (0, router_1.useRouter)();
-    const { user, login, logout, userLoaded } = (0, react_1.useContext)(auth_1.AuthContext);
+    const { user, login, logout, type } = (0, react_1.useContext)(auth_1.AuthContext);
     const [anchor, setAnchor] = (0, react_1.useState)(null);
     const [avatarAnchor, setAvatarAnchor] = (0, react_1.useState)(null);
     const menuOpen = Boolean(anchor);
@@ -115,8 +115,9 @@ function NavBar({ links, title, img, pos = 'fixed', next = true, el, menuItems,
                                 react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 0.4, alignItems: 'center', onClick: (e) => setAvatarAnchor(e.currentTarget), sx: { userSelect: 'none' } },
                                     react_1.default.createElement(material_1.Typography, null, "Ol\u00E1,"),
                                     react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, user.name),
-                                    react_1.default.createElement(KeyboardArrowDown_1.default, null)))) : (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
-                                react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar com o gov.br"))))))),
+                                    react_1.default.createElement(KeyboardArrowDown_1.default, null)))) : type === 'govbr' ? (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
+                                react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar com o gov.br"))) : (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
+                                react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Login"))))))),
             loading && react_1.default.createElement(LinearProgress_1.default, null)),
         react_1.default.createElement(material_1.Box, { paddingBottom: 9 })));
 }

package/components/providers/FormProvider.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
 import { FieldValues } from 'react-hook-form';
+import type { FilesID } from '../../types/form';
 export default function FormProvider({ children, onSubmit, formMethod, submiting, }: {
     children: ReactElement | ReactElement[];
-    onSubmit: (data: FieldValues) => void;
+    onSubmit: (data: FieldValues, filesUid?: FilesID) => void;
     formMethod?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'UPDATE';
     submiting?: boolean;
 }): JSX.Element;

package/components/providers/FormProvider.js

@@ -28,7 +28,7 @@ const react_hook_form_1 = require("react-hook-form");
 const form_1 = require("../../context/form");
 function FormProvider({ children, onSubmit, formMethod = 'GET', submiting = false, }) {
     const { register, handleSubmit, formState: { errors }, reset, watch, trigger, setValue, unregister, getValues, } = (0, react_hook_form_1.useForm)();
-    const [filesUid, setFilesUid] = (0, react_1.useState)([]);
+    const [filesId, setFilesUid] = (0, react_1.useState)([]);
     return (react_1.default.createElement(form_1.FormContext.Provider, { value: {
             formRegister: register,
             formWatch: watch,
@@ -42,6 +42,6 @@ function FormProvider({ children, onSubmit, formMethod = 'GET', submiting = fals
             errors: errors,
             submiting: submiting,
         } },
-        react_1.default.createElement("form", { method: formMethod, onSubmit: handleSubmit(onSubmit) }, children)));
+        react_1.default.createElement("form", { method: formMethod, onSubmit: handleSubmit((d) => onSubmit(d, filesId)) }, children)));
 }
 exports.default = FormProvider;

package/components/providers/OAuthProvider.js

@@ -131,6 +131,6 @@ function OAuthProvider({ children, AUTH_URL, oidcConfig, redirectURL, validateTo
         localStorage.removeItem(userImgName);
         router.replace(redirectURL).finally(() => setUserLoaded(true));
     }
-    return react_1.default.createElement(auth_1.AuthContext.Provider, { value: { user, isAuth, userLoaded, login, logout, saveUserData } }, children);
+    return react_1.default.createElement(auth_1.AuthContext.Provider, { value: { user, isAuth, userLoaded, login, logout, saveUserData, type: 'govbr' } }, children);
 }
 exports.OAuthProvider = OAuthProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.35",
+    "version": "0.0.37",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",

package/types/auth.d.ts

@@ -62,6 +62,7 @@ export interface AuthSspToken {
 }
 export interface AuthReturnData {
     isAuth: boolean;
+    type: 'govbr' | 'ad';
     user: User | null | undefined;
     userLoaded: boolean;
     login: () => void;

package/types/form.d.ts

@@ -0,0 +1,63 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { FieldErrors, FieldValues, UseFormGetValues, UseFormRegister, UseFormReset, UseFormSetValue, UseFormTrigger, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+export declare enum FieldType {
+    INPUT = 0,
+    MULT_INPUT = 1,
+    PHONE = 2,
+    CPF_CNPJ = 3,
+    CPF = 4,
+    CNPJ = 5,
+    RG = 6,
+    EMAIL = 7,
+    ACTIVE = 8,
+    CHECKBOX = 9,
+    CHECKBOX_WARNING = 10,
+    OTHER_CHECKBOX = 11,
+    LABEL = 12,
+    CUSTOM = 13,
+    FILE = 14,
+    MULT_FILE = 15,
+    DATE = 16,
+    TIME = 17,
+    NUMBER = 18,
+    AUTO_COMPLETE = 19
+}
+export declare enum ColumnDirection {
+    ROW = "row",
+    COLUMN = "column"
+}
+export interface FormField {
+    type?: FieldType;
+    name?: string;
+    title?: string;
+    required?: boolean;
+    customPlaceholder?: string;
+    size?: number;
+    customForm?: React.ReactElement;
+    customData?: any;
+}
+export interface FormData {
+    title: string;
+    required: boolean;
+    formFields: FormField[];
+    name?: string;
+}
+export interface FormContextType {
+    formRegister: UseFormRegister<FieldValues>;
+    formWatch: UseFormWatch<FieldValues>;
+    formReset: UseFormReset<FieldValues>;
+    formSetValue: UseFormSetValue<FieldValues>;
+    formTrigger: UseFormTrigger<FieldValues>;
+    formUnregister: UseFormUnregister<FieldValues>;
+    formGetValues: UseFormGetValues<FieldValues>;
+    setFilesUid: Dispatch<SetStateAction<{
+        CO_SEQ_ARQUIVO: number;
+        CO_TIPO_ARQUIVO: number;
+    }[]>>;
+    errors: FieldErrors<FieldValues>;
+    submiting: boolean;
+}
+export type FilesID = {
+    CO_SEQ_ARQUIVO: number;
+    CO_TIPO_ARQUIVO: number;
+}[];

package/types/form.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnDirection = exports.FieldType = void 0;
+var FieldType;
+(function (FieldType) {
+    FieldType[FieldType["INPUT"] = 0] = "INPUT";
+    FieldType[FieldType["MULT_INPUT"] = 1] = "MULT_INPUT";
+    FieldType[FieldType["PHONE"] = 2] = "PHONE";
+    FieldType[FieldType["CPF_CNPJ"] = 3] = "CPF_CNPJ";
+    FieldType[FieldType["CPF"] = 4] = "CPF";
+    FieldType[FieldType["CNPJ"] = 5] = "CNPJ";
+    FieldType[FieldType["RG"] = 6] = "RG";
+    FieldType[FieldType["EMAIL"] = 7] = "EMAIL";
+    FieldType[FieldType["ACTIVE"] = 8] = "ACTIVE";
+    FieldType[FieldType["CHECKBOX"] = 9] = "CHECKBOX";
+    FieldType[FieldType["CHECKBOX_WARNING"] = 10] = "CHECKBOX_WARNING";
+    FieldType[FieldType["OTHER_CHECKBOX"] = 11] = "OTHER_CHECKBOX";
+    FieldType[FieldType["LABEL"] = 12] = "LABEL";
+    FieldType[FieldType["CUSTOM"] = 13] = "CUSTOM";
+    FieldType[FieldType["FILE"] = 14] = "FILE";
+    FieldType[FieldType["MULT_FILE"] = 15] = "MULT_FILE";
+    FieldType[FieldType["DATE"] = 16] = "DATE";
+    FieldType[FieldType["TIME"] = 17] = "TIME";
+    FieldType[FieldType["NUMBER"] = 18] = "NUMBER";
+    FieldType[FieldType["AUTO_COMPLETE"] = 19] = "AUTO_COMPLETE";
+})(FieldType = exports.FieldType || (exports.FieldType = {}));
+var ColumnDirection;
+(function (ColumnDirection) {
+    ColumnDirection["ROW"] = "row";
+    ColumnDirection["COLUMN"] = "column";
+})(ColumnDirection = exports.ColumnDirection || (exports.ColumnDirection = {}));