@ssplib/react-components 0.0.91 → 0.0.93

package/components/form/checkbox/CheckBox.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-export default function CheckBox({ name, title, xs, sm, md }: {
+export default function CheckBox({ name, title, defaultValue, xs, sm, md }: {
     name: string;
     title: string | JSX.Element;
+    defaultValue?: boolean;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/checkbox/CheckBox.js

@@ -7,9 +7,9 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const form_1 = require("../../../context/form");
 const react_2 = __importDefault(require("react"));
-function CheckBox({ name, title, xs = 12, sm, md }) {
+function CheckBox({ name, title, defaultValue = false, xs = 12, sm, md }) {
     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)))));
+        react_2.default.createElement(material_1.FormControlLabel, Object.assign({ control: react_2.default.createElement(material_1.Checkbox, { size: 'small', defaultChecked: defaultValue }), label: title }, context === null || context === void 0 ? void 0 : context.formRegister(name)))));
 }
 exports.default = CheckBox;

package/components/form/checkbox/CheckBoxWarning.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-export default function CheckBoxWarning({ name, title, customWarning, xs, sm, md }: {
+export default function CheckBoxWarning({ name, title, customWarning, defaultValue, xs, sm, md, }: {
     name: string;
     title: string;
     customWarning?: ReactElement;
+    defaultValue?: boolean;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/checkbox/CheckBoxWarning.js

@@ -30,10 +30,10 @@ const material_1 = require("@mui/material");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
-function CheckBoxWarning({ name, title, customWarning, xs = 12, sm, md }) {
+function CheckBoxWarning({ name, title, customWarning, defaultValue = false, xs = 12, sm, 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 }),
-        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, Object.assign({ size: 'small' }, context.formRegister(name))), label: title }),
+        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, Object.assign({ size: 'small' }, context.formRegister(name), { defaultChecked: defaultValue })), 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,
             react_1.default.createElement("b", null, "Aten\u00E7\u00E3o"),
             " Eventos da natureza ",

package/components/form/date/DatePicker.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export default function DatePicker({ name, required, title, xs, sm, md, minDt, maxDt, ...props }: {
+export default function DatePicker({ name, required, title, xs, sm, md, minDt, defaultValue, maxDt, ...props }: {
     minDt?: string;
     maxDt?: string;
     name: string;
     title?: string;
     required?: boolean;
+    defaultValue?: string;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/date/DatePicker.js

@@ -49,19 +49,25 @@ const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
 function DatePicker(_a) {
     var _b;
-    var { name, required = false, title, xs = 12, sm, md, minDt, maxDt } = _a, props = __rest(_a, ["name", "required", "title", "xs", "sm", "md", "minDt", "maxDt"]);
+    var { name, required = false, title, xs = 12, sm, md, minDt, defaultValue = '', maxDt } = _a, props = __rest(_a, ["name", "required", "title", "xs", "sm", "md", "minDt", "defaultValue", "maxDt"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
-    const [value, setValue] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)((0, dayjs_1.default)(defaultValue, 'DD/MM/YYYY'));
     const handleChange = (newValue) => {
+        console.log('mudou');
         setValue(newValue);
-        context === null || context === void 0 ? void 0 : context.formSetValue(name, newValue === null || newValue === void 0 ? void 0 : newValue.format('DD/MM/YYYY'));
     };
+    (0, react_1.useEffect)(() => {
+        if (!value)
+            return;
+        context.formSetValue(name, value.format('DD/MM/YYYY'));
+    }, [value]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
             title && react_1.default.createElement(material_1.InputLabel, null, title),
             react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
                 react_1.default.createElement(x_date_pickers_2.DatePicker, { minDate: (0, dayjs_1.default)(minDt, 'DD/MM/YYYY'), maxDate: (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY'), format: 'DD/MM/YYYY', value: value, onChange: handleChange, disableHighlightToday: true, sx: {
                         outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',
+                        width: '100%',
                         div: {
                             input: {
                                 paddingX: 2,

package/components/form/date/TimePicker.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-export default function TimePicker({ name, required, title, xs, sm, md }: {
+export default function TimePicker({ name, required, title, defaultValue, xs, sm, md, }: {
     name: string;
     title?: string;
     required?: boolean;
+    defaultValue?: string;
     xs?: number;
     sm?: number;
     md?: number;

package/components/form/date/TimePicker.js

@@ -29,24 +29,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+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 = require("../../../context/form");
 const lodash_hasin_1 = __importDefault(require("lodash.hasin"));
-function TimePicker({ name, required = false, title, xs = 12, sm, md }) {
+function TimePicker({ name, required = false, title, defaultValue = '', xs = 12, sm, md, }) {
     var _a;
     const context = (0, react_1.useContext)(form_1.FormContext);
-    const [value, setValue] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)((0, dayjs_1.default)(defaultValue, 'HH:mm'));
     const handleChange = (newValue) => {
         setValue(newValue);
         context === null || context === void 0 ? void 0 : context.formSetValue(name, newValue === null || newValue === void 0 ? void 0 : newValue.format('HH:mm'));
     };
+    (0, react_1.useEffect)(() => {
+        if (!value)
+            return;
+        context.formSetValue(name, value.format('HH:mm'));
+    }, []);
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
         react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
             react_1.default.createElement(x_date_pickers_1.TimePicker, { value: value, ampm: false, onChange: handleChange, sx: {
                     outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',
+                    width: '100%',
                     div: {
                         input: {
                             paddingX: 2,

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, xs, sm, md, }: {
+export default function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, xs, sm, md, }: {
     name: string;
     url: string;
     title: string;
-    customLoadingText: string;
+    customLoadingText?: string;
+    defaultValue?: number;
     required?: boolean;
     shouldRefetch?: boolean;
     xs?: number;

package/components/form/input/FetchAutoComplete.js

@@ -31,18 +31,39 @@ const react_1 = __importStar(require("react"));
 const form_1 = require("../../../context/form");
 const auth_1 = require("../../../context/auth");
 const lodash_get_1 = __importDefault(require("lodash.get"));
-function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, xs = 12, sm, md, }) {
+function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, xs = 12, sm, md, }) {
     const context = (0, react_1.useContext)(form_1.FormContext);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [list, setList] = (0, react_1.useState)([]);
     const [loadingText, setLoadingText] = (0, react_1.useState)('Carregando...');
     const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    (0, react_1.useEffect)(() => {
+        if (defaultValue) {
+            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(j.body.data);
+                        setLoading(false);
+                        context === null || context === void 0 ? void 0 : context.formSetValue(name, j.body.data[defaultValue].id);
+                    });
+                }
+                else {
+                    setLoadingText('Erro ao carregar dados');
+                }
+            });
+        }
+    }, []);
     function onFocus() {
-        if (!shouldRefetch && list.length > 0)
+        if (!defaultValue && !shouldRefetch && list.length > 0)
             return;
         setLoading(true);
         setList([]);
-        setLoadingText(customLoadingText);
+        customLoadingText && setLoadingText(customLoadingText);
         fetch(url, {
             method: 'GET',
             headers: {
@@ -60,6 +81,9 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
             }
         });
     }
+    if (defaultValue && list.length <= 0)
+        return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+            react_1.default.createElement(material_1.TextField, { size: 'small', fullWidth: true, placeholder: loadingText, disabled: true })));
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
         title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
         react_1.default.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.formRegister(name, {
@@ -68,7 +92,7 @@ function FetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch
                     return 'Este campo é obrigatório';
             },
         }), { hidden: true })),
-        react_1.default.createElement(material_1.Autocomplete, { loading: loading, loadingText: loadingText, options: list, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => context === null || context === void 0 ? void 0 : context.formSetValue(name, v ? v.id : ''), renderInput: (params) => {
+        react_1.default.createElement(material_1.Autocomplete, { loading: loading, loadingText: loadingText, options: list, defaultValue: defaultValue ? list[defaultValue] : undefined, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => context === null || context === void 0 ? void 0 : context.formSetValue(name, v ? v.id : ''), renderInput: (params) => {
                 var _a;
                 return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, onFocus: onFocus, required: true, 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 })));
             }, size: 'small', fullWidth: true })));

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

@@ -1,11 +1,12 @@
 import React from 'react';
-export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
+export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, ...props }: {
     type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password' | 'cep';
     name: string;
     title?: string;
     required?: boolean;
     numberMask?: string;
     customPlaceholder?: string;
+    defaultValue?: string;
     inputMinLength?: number;
     inputMaxLength?: number;
     xs?: 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, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
+    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, defaultValue = '', md } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md"]);
     const context = (0, react_1.useContext)(form_1.FormContext);
     const chooseInput = (0, react_1.useCallback)(() => {
         const inputConfig = {
@@ -104,26 +104,26 @@ function Input(_a) {
         switch (type) {
             case 'input':
             case 'email':
-                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig));
+                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { defaultValue: defaultValue }));
             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: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: numberMask,
                     } }));
             case 'cep':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00000-000',
                     } }));
             case 'phone':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '(00) [#]0000-0000',
                         definitions: {
                             '#': /^9$/,
                         },
                     } }));
             case 'cpf_cnpj':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '000.000.000-00[0]',
                     }, onMask: (value, setMask) => {
                         if (value.length > 14)
@@ -132,15 +132,15 @@ function Input(_a) {
                             setMask('000.000.000-00[0]');
                     } }));
             case 'cpf':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '000.000.000-00',
                     } }));
             case 'cnpj':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00.000.000/0000-00',
                     } }));
             case 'rg':
-                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
                         mask: '00000[000000]',
                     } }));
         }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export default function MaskInput(props: {
     formConfig: object;
+    defaultValue?: string;
     maskProps: {
         mask: string | RegExp;
         definitions?: {

package/components/form/input/MaskInput.js

@@ -60,7 +60,7 @@ function MaskInput(props) {
             const name = props.formConfig.name;
             const value = e.target.value;
             context.formSetValue(name, value);
-        }, onFocus: (e) => setMaskValue(e.target.value), onChange: onChangeInput, InputProps: {
+        }, defaultValue: props.defaultValue, onFocus: (e) => setMaskValue(e.target.value), onChange: onChangeInput, InputProps: {
             inputComponent: TextMaskCustom,
             inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
         }, disabled: props.disabled, fullWidth: true })));

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

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

package/components/form/input/MultInput.js

@@ -44,11 +44,11 @@ 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, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "xs", "sm", "inputMinLength", "inputMaxLength", "md"]);
+    var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "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)),
-        react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, rows: 3 }, context.formRegister(name, {
+        react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, rows: 3, defaultValue: defaultValue }, context.formRegister(name, {
             validate: (v, f) => {
                 if (required && v.length <= 0)
                     return 'Este campo é obrigatório';

package/components/form/switch/ToggleVisibility.js

@@ -47,7 +47,7 @@ function ToggleVisibility(_a) {
                 props.unregisterNameList.forEach((x) => context.formUnregister(x));
             }
         };
-    }, []);
+    }, [props.unregisterNameList]);
     return react_1.default.createElement(react_1.default.Fragment, null);
 }
 exports.ToggleVisibility = ToggleVisibility;

package/package.json

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