@ssplib/react-components 0.0.65 → 0.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/form/date/DatePicker.js +1 -3
- package/components/form/input/Input.d.ts +1 -1
- package/components/form/input/Input.js +9 -0
- package/components/form/stepper/Stepper.d.ts +2 -1
- package/components/form/stepper/Stepper.js +15 -1
- package/components/form/switch/ToggleVisibility.d.ts +10 -0
- package/components/form/switch/ToggleVisibility.js +48 -0
- package/index.d.ts +2 -1
- package/index.js +4 -1
- package/package.json +1 -1
|
@@ -83,8 +83,6 @@ function DatePicker(_a) {
|
|
|
83
83
|
},
|
|
84
84
|
shouldUnregister: true,
|
|
85
85
|
}), { fullWidth: true }))) }),
|
|
86
|
-
react_1.default.createElement(material_1.Typography, { sx: { color: '#a51c30', fontSize:
|
|
87
|
-
(_b = (0, lodash_get_1.default)(context.errors, name)) === null || _b === void 0 ? void 0 : _b.message,
|
|
88
|
-
"dsadsadsa")))));
|
|
86
|
+
react_1.default.createElement(material_1.Typography, { sx: { color: '#a51c30', fontSize: 14, paddingLeft: 1 } }, (_b = (0, lodash_get_1.default)(context.errors, name)) === null || _b === void 0 ? void 0 : _b.message)))));
|
|
89
87
|
}
|
|
90
88
|
exports.default = DatePicker;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, md, ...props }: {
|
|
3
|
-
type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password';
|
|
3
|
+
type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password' | 'cep';
|
|
4
4
|
name: string;
|
|
5
5
|
title?: string;
|
|
6
6
|
required?: boolean;
|
|
@@ -70,6 +70,11 @@ function Input(_a) {
|
|
|
70
70
|
return 'O CPF precisa ter no mínimo 11 dígitos';
|
|
71
71
|
}
|
|
72
72
|
//
|
|
73
|
+
else if (type === 'cep') {
|
|
74
|
+
if (v.length < 9 && props.required)
|
|
75
|
+
return 'O CPF precisa ter no mínimo 8 dígitos';
|
|
76
|
+
}
|
|
77
|
+
//
|
|
73
78
|
else if (type === 'input' || type === 'password') {
|
|
74
79
|
if (v.length > inputMaxLength)
|
|
75
80
|
return `Limite máximo de ${inputMaxLength} caracteres`;
|
|
@@ -106,6 +111,10 @@ function Input(_a) {
|
|
|
106
111
|
return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
|
|
107
112
|
mask: numberMask,
|
|
108
113
|
} }));
|
|
114
|
+
case 'cep':
|
|
115
|
+
return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
|
|
116
|
+
mask: '00000-000',
|
|
117
|
+
} }));
|
|
109
118
|
case 'phone':
|
|
110
119
|
return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, maskProps: {
|
|
111
120
|
mask: '(00) [#]0000-0000',
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { ReactElement } from 'react';
|
|
2
2
|
import { FieldValues } from 'react-hook-form';
|
|
3
|
-
export declare function Stepper(props: {
|
|
3
|
+
export declare function Stepper({ debugLog, ...props }: {
|
|
4
4
|
children: ReactElement | ReactElement[];
|
|
5
5
|
debugData?: (data: FieldValues) => void;
|
|
6
|
+
debugLog?: boolean;
|
|
6
7
|
}): JSX.Element;
|
|
7
8
|
declare const _default: React.MemoExoticComponent<typeof Stepper>;
|
|
8
9
|
export default _default;
|
|
@@ -31,6 +31,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
31
31
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
32
32
|
});
|
|
33
33
|
};
|
|
34
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
35
|
+
var t = {};
|
|
36
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
37
|
+
t[p] = s[p];
|
|
38
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
39
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
40
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
41
|
+
t[p[i]] = s[p[i]];
|
|
42
|
+
}
|
|
43
|
+
return t;
|
|
44
|
+
};
|
|
34
45
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
46
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
47
|
};
|
|
@@ -53,7 +64,8 @@ const getKeys = (values, id) => {
|
|
|
53
64
|
keys = [...keys, ...Object.keys(values.files).map((x) => `files.${x}`)];
|
|
54
65
|
return keys;
|
|
55
66
|
};
|
|
56
|
-
function Stepper(
|
|
67
|
+
function Stepper(_a) {
|
|
68
|
+
var { debugLog = false } = _a, props = __rest(_a, ["debugLog"]);
|
|
57
69
|
const length = Array.isArray(props.children) ? props.children.length : 1;
|
|
58
70
|
const context = (0, react_1.useContext)(form_1.FormContext);
|
|
59
71
|
const theme = (0, material_1.useTheme)();
|
|
@@ -65,6 +77,8 @@ function Stepper(props) {
|
|
|
65
77
|
});
|
|
66
78
|
const maxSteps = length;
|
|
67
79
|
const handleNext = () => __awaiter(this, void 0, void 0, function* () {
|
|
80
|
+
if (debugLog)
|
|
81
|
+
console.log(context.formGetValues());
|
|
68
82
|
const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
|
|
69
83
|
if (!result) {
|
|
70
84
|
setCanPass(true);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function ToggleVisibility(props: {
|
|
3
|
+
switchId: string;
|
|
4
|
+
unregisterNameList: string[];
|
|
5
|
+
}): JSX.Element;
|
|
6
|
+
export declare function SwitchWatch(props: {
|
|
7
|
+
children: JSX.Element | JSX.Element[];
|
|
8
|
+
switchId: string;
|
|
9
|
+
unregisterNameList: string[];
|
|
10
|
+
}): JSX.Element;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.SwitchWatch = exports.ToggleVisibility = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const form_1 = require("../../../context/form");
|
|
29
|
+
// Coloque esse componente dentro de um bloco que é retirado com o valor do input
|
|
30
|
+
function ToggleVisibility(props) {
|
|
31
|
+
const context = (0, react_1.useContext)(form_1.FormContext);
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
return () => {
|
|
34
|
+
if (context.formWatch(props.switchId)) {
|
|
35
|
+
props.unregisterNameList.forEach((x) => context.formUnregister(x));
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
40
|
+
}
|
|
41
|
+
exports.ToggleVisibility = ToggleVisibility;
|
|
42
|
+
function SwitchWatch(props) {
|
|
43
|
+
const context = (0, react_1.useContext)(form_1.FormContext);
|
|
44
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, !(context === null || context === void 0 ? void 0 : context.formWatch(props.switchId)) && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
45
|
+
react_1.default.createElement(ToggleVisibility, { switchId: props.switchId, unregisterNameList: props.unregisterNameList }),
|
|
46
|
+
props.children))));
|
|
47
|
+
}
|
|
48
|
+
exports.SwitchWatch = SwitchWatch;
|
package/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ import OtherCheckBox from './components/form/input/OtherCheckBox';
|
|
|
13
13
|
import Stepper from './components/form/stepper/Stepper';
|
|
14
14
|
import StepperBlock from './components/form/stepper/StepperBlock';
|
|
15
15
|
import Switch from './components/form/switch/Switch';
|
|
16
|
+
import { SwitchWatch, ToggleVisibility } from './components/form/switch/ToggleVisibility';
|
|
16
17
|
import Table from './components/form/table/Table';
|
|
17
18
|
import NavBar from './components/navbar/NavBar';
|
|
18
19
|
import FormProvider from './components/providers/FormProvider';
|
|
@@ -25,4 +26,4 @@ import { Category } from './components/detalhes/Category';
|
|
|
25
26
|
import { Field } from './components/detalhes/Field';
|
|
26
27
|
import { FieldLabel } from './components/detalhes/FieldLabel';
|
|
27
28
|
import { File } from './components/detalhes/File';
|
|
28
|
-
export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, LoginProvider, Category, Field, FieldLabel, File, Login as LoginPage };
|
|
29
|
+
export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, LoginProvider, Category, Field, FieldLabel, File, Login as LoginPage };
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.LoginPage = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.LoginProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
|
|
6
|
+
exports.LoginPage = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.LoginProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
|
|
7
7
|
const CheckBox_1 = __importDefault(require("./components/form/checkbox/CheckBox"));
|
|
8
8
|
exports.CheckBox = CheckBox_1.default;
|
|
9
9
|
const CheckBoxWarning_1 = __importDefault(require("./components/form/checkbox/CheckBoxWarning"));
|
|
@@ -34,6 +34,9 @@ const StepperBlock_1 = __importDefault(require("./components/form/stepper/Steppe
|
|
|
34
34
|
exports.StepperBlock = StepperBlock_1.default;
|
|
35
35
|
const Switch_1 = __importDefault(require("./components/form/switch/Switch"));
|
|
36
36
|
exports.Switch = Switch_1.default;
|
|
37
|
+
const ToggleVisibility_1 = require("./components/form/switch/ToggleVisibility");
|
|
38
|
+
Object.defineProperty(exports, "SwitchWatch", { enumerable: true, get: function () { return ToggleVisibility_1.SwitchWatch; } });
|
|
39
|
+
Object.defineProperty(exports, "ToggleVisibility", { enumerable: true, get: function () { return ToggleVisibility_1.ToggleVisibility; } });
|
|
37
40
|
const Table_1 = __importDefault(require("./components/form/table/Table"));
|
|
38
41
|
exports.Table = Table_1.default;
|
|
39
42
|
const NavBar_1 = __importDefault(require("./components/navbar/NavBar"));
|