@ssplib/react-components 0.0.30 → 0.0.32

package/README.md

@@ -10,4 +10,4 @@
 
 ## Rode esse comando para fazer o setup
 
-`npm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-date-pickers @ssplib/react-components`
+`npm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-date-pickers @mui/lab @ssplib/react-components`

package/components/form/checkbox/CheckBox.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 const react_2 = __importDefault(require("react"));
 function CheckBox({ name, title, xs = 12, sm, md }) {
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     return (react_2.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         react_2.default.createElement(material_1.FormControlLabel, Object.assign({ control: react_2.default.createElement(material_1.Checkbox, { size: 'small' }), label: title }, context === null || context === void 0 ? void 0 : context.formRegister(name)))));
 }

package/components/form/checkbox/CheckBoxWarning.js

@@ -29,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function CheckBoxWarning({ name, title, customWarning, xs = 12, sm, md }) {
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, Object.assign({ size: 'small' }, context.formRegister(name))), label: title }),
         context.formWatch(name) && (react_1.default.createElement(material_1.Card, { sx: { bgcolor: '#FFFBF5', color: '#F59E0B', padding: 1, paddingLeft: 2 } }, customWarning ? (customWarning) : (react_1.default.createElement(Typography_1.default, null,

package/components/form/date/DatePicker.js

@@ -45,10 +45,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const pt_br_1 = __importDefault(require("dayjs/locale/pt-br"));
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function DatePicker(_a) {
     var { name, required = false, title, xs = 12, sm, md, minDt, maxDt } = _a, props = __rest(_a, ["name", "required", "title", "xs", "sm", "md", "minDt", "maxDt"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const [value, setValue] = (0, react_1.useState)(null);
     const handleChange = (newValue) => {
         setValue(newValue);

package/components/form/date/TimePicker.js

@@ -32,9 +32,9 @@ const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
 const pt_br_1 = __importDefault(require("dayjs/locale/pt-br"));
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function TimePicker({ name, required = false, title, xs = 12, sm, md }) {
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const [value, setValue] = (0, react_1.useState)(null);
     const handleChange = (newValue) => {
         setValue(newValue);

package/components/form/file/FileUpload.js

@@ -37,9 +37,9 @@ 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 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function FileUpload({ name, tipoArquivo, title, required = false, multiple = false, apiURL, xs = 12, sm, md, }) {
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const { user } = (0, react_1.useContext)(auth_1.AuthContext);
     const [files, setFiles] = (0, react_1.useState)([]);
     const [filesLoaded, setFilesLoaded] = (0, react_1.useState)([]);

package/components/form/input/ActiveInput.js

@@ -41,13 +41,13 @@ 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 form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 const Switch_1 = __importDefault(require("../switch/Switch"));
 const MaskInput_1 = __importDefault(require("./MaskInput"));
 function FileUpload(_a) {
     var _b;
     var { name, required = false, title, customPlaceholder, defaultChecked = false, xs = 12, sm, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultChecked", "xs", "sm", "md"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const switchName = `${name}-switch`;
     let oldValue = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {

package/components/form/input/AutoComplete.js

@@ -32,9 +32,9 @@ 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 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function AutoComplete({ name, required = false, title, customPlaceholder, url, xs = 12, sm, md, }) {
-    const context = (0, react_1.useContext)(form_1.default);
+    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, {

package/components/form/input/Input.js

@@ -42,10 +42,10 @@ 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 = __importDefault(require("../../../context/form"));
+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"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const chooseInput = (0, react_1.useCallback)(() => {
         const inputConfig = {
             fullWidth: true,

package/components/form/input/MultInput.js

@@ -41,11 +41,11 @@ 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 form_1 = __importDefault(require("../../../context/form"));
+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"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    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)),
         react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, rows: 3 }, context.formRegister(name, {

package/components/form/input/OtherCheckBox.js

@@ -29,10 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function SSPOtherCheckBox({ name, required = false, xs = 12, sm, md }) {
     var _a;
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const checkName = `switch-${name}`;
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         react_1.default.createElement(material_1.Stack, { direction: 'row' },

package/components/form/stepper/Stepper.d.ts

@@ -1,6 +1,8 @@
 import React, { ReactElement } from 'react';
+import { FieldValues } from 'react-hook-form';
 export declare function Stepper(props: {
     children: ReactElement | ReactElement[];
+    debugData?: (data: FieldValues) => void;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Stepper>;
 export default _default;

package/components/form/stepper/Stepper.js

@@ -42,7 +42,7 @@ const Save_1 = __importDefault(require("@mui/icons-material/Save"));
 const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 const getKeys = (values, id) => {
     if (!values || Object.keys(values).length <= 0)
         return [];
@@ -55,7 +55,7 @@ const getKeys = (values, id) => {
 };
 function Stepper(props) {
     const length = Array.isArray(props.children) ? props.children.length : 1;
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const theme = (0, material_1.useTheme)();
     const [activeStep, setActiveStep] = (0, react_1.useState)(0);
     const [canPass, setCanPass] = (0, react_1.useState)(false);
@@ -68,6 +68,7 @@ function Stepper(props) {
         const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
         if (!result) {
             setCanPass(true);
+            console.log('teste: ', context.formGetValues());
             return;
         }
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -77,6 +78,7 @@ function Stepper(props) {
         if (!result) {
             e.preventDefault();
             setCanPass(true);
+            console.log('teste: ', context.formGetValues());
             return;
         }
     });

package/components/form/stepper/StepperBlock.js

@@ -43,7 +43,7 @@ const material_1 = require("@mui/material");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importStar(require("react"));
 const Switch_1 = __importDefault(require("../switch/Switch"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function childrenTree(component, prefix, idx) {
     if (!component.props)
         return component;
@@ -67,7 +67,7 @@ function childrenTree(component, prefix, idx) {
 }
 function StepperBlock(_a) {
     var { optional = false, title, prefix = 0 } = _a, props = __rest(_a, ["optional", "title", "prefix"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     const switchName = `switch-${prefix}`;
     const fields = Array.isArray(props.children) ? props.children : [props.children];
     const cloneChildren = fields.map((x, index) => {

package/components/form/switch/Switch.js

@@ -33,19 +33,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.Switch = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
-const form_1 = __importDefault(require("../../../context/form"));
+const form_1 = require("../../../context/form");
 function Switch(_a) {
     var { defaultChecked = false } = _a, props = __rest(_a, ["defaultChecked"]);
-    const context = (0, react_1.useContext)(form_1.default);
+    const context = (0, react_1.useContext)(form_1.FormContext);
     (0, react_1.useEffect)(() => {
-        console.log(context);
         context === null || context === void 0 ? void 0 : context.formSetValue(props.name, defaultChecked);
     }, []);
     return (react_1.default.createElement(material_1.Stack, { sx: { alignItems: 'center', justifyContent: 'center' } },

package/components/form/table/Table.d.ts

@@ -3,7 +3,7 @@ interface ColumnData {
     title: string;
     keyName: string;
 }
-export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, }: {
+export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, filters, }: {
     columns: ColumnData[];
     tableName: string;
     action: (prop: any) => JSX.Element;
@@ -17,6 +17,12 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
         public: string;
     };
     dataPath?: string;
+    isPublic?: boolean;
+    filters?: {
+        key: string;
+        options: string[];
+        name: string;
+    }[];
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

package/components/form/table/Table.js

@@ -41,13 +41,13 @@ const auth_1 = require("../../../context/auth");
 function Table({ columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
-}, dataPath = '', tableName, csv, columnSize, action, }) {
+}, dataPath = '', tableName, csv, columnSize, action, isPublic = false, filters, }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
     const { user, userLoaded } = (0, react_1.useContext)(auth_1.AuthContext);
     (0, react_1.useEffect)(() => {
-        if (userLoaded)
+        if (userLoaded || isPublic)
             fetchFunc().then((res) => res.json().then((j) => {
                 if (j.statusCode === 204)
                     setData({ body: { data: [] } });
@@ -87,7 +87,6 @@ function Table({ columns, fetchFunc, emptyMsg = {
             return (0, lodash_get_1.default)(dt, dataPath);
     }, []);
     (0, react_1.useEffect)(() => {
-        console.log('é array', getData(data));
         if (isLoading || error || !getData(data))
             return;
         setList(getData(data));
@@ -107,8 +106,8 @@ function Table({ columns, fetchFunc, emptyMsg = {
             return;
         }
         const listData = getData(data);
-        setList([]);
-        setListPage(1);
+        // setList([])
+        // setListPage(1)
         const newList = [];
         listData.forEach((x) => {
             const dataStr = [];
@@ -207,6 +206,23 @@ function Table({ columns, fetchFunc, emptyMsg = {
                 return (react_1.default.createElement(Typography_1.default, { color: '#EF4444', fontWeight: 600, fontFamily: 'Inter' }, "REPROVADO"));
         }
     }, []);
+    const onFilterSelect = (0, react_1.useCallback)((key, newValue) => {
+        if (!newValue) {
+            setList(getData(data));
+            setPagCount(getCount(getData(data)));
+            return;
+        }
+        const listData = getData(data);
+        const newList = [];
+        listData.forEach((l) => {
+            if ((0, lodash_get_1.default)(l, key).toString() === newValue)
+                newList.push(l);
+        });
+        setList(newList);
+        setPagCount(getCount(newList));
+        console.log('minha lista:', listData);
+        console.log('selecionei:', newValue, 'minha chave:', key);
+    }, [data]);
     if (error)
         return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
             react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' }, error.status === 403 && 'Acesso negado')));
@@ -216,14 +232,15 @@ function Table({ columns, fetchFunc, emptyMsg = {
                 "Carregando ",
                 tableName),
             react_1.default.createElement(material_1.CircularProgress, null)));
-    if (!userLoaded)
+    if (!userLoaded && !isPublic)
         return react_1.default.createElement(material_1.LinearProgress, null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4 },
-            react_1.default.createElement(material_1.Box, { paddingBottom: 2 },
+            react_1.default.createElement(material_1.Stack, { paddingBottom: 2, spacing: 2, direction: { xs: 'column', md: 'row' } },
                 react_1.default.createElement(TextField_1.default, { InputProps: {
                         startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
-                    }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}`, sx: { paddingX: { xs: 2, md: 0 } } })),
+                    }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }), filters === null || filters === void 0 ? void 0 :
+                filters.map((f) => (react_1.default.createElement(material_1.Autocomplete, { options: f.options.map((name) => name), onChange: (e, newValue) => onFilterSelect(f.key, newValue), renderInput: (args) => react_1.default.createElement(TextField_1.default, Object.assign({}, args, { label: f.name, size: 'small' })) })))),
             react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, borderRadius: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
                 react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public),
                 user && (react_1.default.createElement(material_1.Box, { sx: { '& a': { textDecoration: 'none' }, marginTop: 2 } },

package/components/providers/FormProvider.d.ts

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

package/components/providers/FormProvider.js

@@ -22,18 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const form_1 = __importDefault(require("../../context/form"));
-function FormProvider({ children, onSubmit, formMethod = 'GET', }) {
+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 [submiting, setSubmiting] = (0, react_1.useState)(false);
     const [filesUid, setFilesUid] = (0, react_1.useState)([]);
-    return (react_1.default.createElement(form_1.default.Provider, { value: {
+    return (react_1.default.createElement(form_1.FormContext.Provider, { value: {
             formRegister: register,
             formWatch: watch,
             formReset: reset,

package/context/form.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FieldErrors, FieldValues, UseFormRegister, UseFormReset, UseFormSetValue, UseFormTrigger, UseFormWatch } from 'react-hook-form';
 import { UseFormGetValues, UseFormHandleSubmit, UseFormUnregister } from 'react-hook-form/dist/types';
-declare const _default: import("react").Context<{
+export declare const FormContext: import("react").Context<{
     formRegister: UseFormRegister<FieldValues>;
     formWatch: UseFormWatch<FieldValues>;
     formReset: UseFormReset<FieldValues>;
@@ -17,4 +17,3 @@ declare const _default: import("react").Context<{
     errors: FieldErrors<FieldValues>;
     submiting: boolean;
 } | null>;
-export default _default;

package/context/form.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContext = void 0;
 const react_1 = require("react");
-exports.default = (0, react_1.createContext)(null);
+exports.FormContext = (0, react_1.createContext)(null);

package/index.d.ts

@@ -17,5 +17,5 @@ import NavBar from './components/navbar/NavBar';
 import FormProvider from './components/providers/FormProvider';
 import { OAuthProvider, cookieName as AUTH_COOKIE_NAME } from './components/providers/OAuthProvider';
 import { AuthContext } from './context/auth';
-import FormContext from './context/form';
+import { FormContext } from './context/form';
 export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext };

package/index.js

@@ -43,5 +43,5 @@ Object.defineProperty(exports, "OAuthProvider", { enumerable: true, get: functio
 Object.defineProperty(exports, "AUTH_COOKIE_NAME", { enumerable: true, get: function () { return OAuthProvider_1.cookieName; } });
 const auth_1 = require("./context/auth");
 Object.defineProperty(exports, "AuthContext", { enumerable: true, get: function () { return auth_1.AuthContext; } });
-const form_1 = __importDefault(require("./context/form"));
-exports.FormContext = form_1.default;
+const form_1 = require("./context/form");
+Object.defineProperty(exports, "FormContext", { enumerable: true, get: function () { return form_1.FormContext; } });

package/package.json

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