@pipelinesolucoes/form 1.2.0-beta.3 → 1.2.0-beta.31
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/README.md +16 -2
- package/dist/components/ChipList.d.ts +9 -0
- package/dist/components/ChipList.js +60 -0
- package/dist/components/ChipList.js.map +1 -0
- package/dist/components/SelectField.d.ts +73 -0
- package/dist/components/SelectField.js +142 -0
- package/dist/components/SelectField.js.map +1 -0
- package/dist/components/TextFieldBirthDateWithAge.d.ts +83 -0
- package/dist/components/TextFieldBirthDateWithAge.js +277 -0
- package/dist/components/TextFieldBirthDateWithAge.js.map +1 -0
- package/dist/components/TextFieldCPFValidate.d.ts +37 -0
- package/dist/components/TextFieldCPFValidate.js +147 -0
- package/dist/components/TextFieldCPFValidate.js.map +1 -0
- package/dist/components/TextFieldNumberValidate.d.ts +110 -0
- package/dist/components/TextFieldNumberValidate.js +196 -0
- package/dist/components/TextFieldNumberValidate.js.map +1 -0
- package/dist/components/TextFieldPassword.d.ts +141 -53
- package/dist/components/TextFieldPassword.js +161 -98
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +89 -43
- package/dist/components/TextFieldValidate.js +103 -94
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/FormLogin.d.ts +129 -6
- package/dist/components/login/FormLogin.js +155 -29
- package/dist/components/login/FormLogin.js.map +1 -1
- package/dist/components/login/FormPasswordRecovery.d.ts +97 -89
- package/dist/components/login/FormPasswordRecovery.js +131 -124
- package/dist/components/login/FormPasswordRecovery.js.map +1 -1
- package/dist/components/login/FormSignUp.d.ts +130 -11
- package/dist/components/login/FormSignUp.js +154 -29
- package/dist/components/login/FormSignUp.js.map +1 -1
- package/dist/components/login/StyleLogin.d.ts +7 -0
- package/dist/components/login/StyleLogin.js +16 -1
- package/dist/components/login/StyleLogin.js.map +1 -1
- package/dist/components/recaptcha/RecaptchaForm.d.ts +8 -14
- package/dist/components/recaptcha/RecaptchaForm.js +30 -25
- package/dist/components/recaptcha/RecaptchaForm.js.map +1 -1
- package/dist/constant.d.ts +11 -0
- package/dist/constant.js +12 -0
- package/dist/constant.js.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -1
- package/dist/{components/style → style}/ButtonFormStyled.d.ts +1 -1
- package/dist/{components/style → style}/ButtonFormStyled.js +6 -5
- package/dist/style/ButtonFormStyled.js.map +1 -0
- package/dist/{components/style → style}/LinkFormStyled.d.ts +1 -1
- package/dist/{components/style → style}/LinkFormStyled.js +5 -4
- package/dist/style/LinkFormStyled.js.map +1 -0
- package/dist/style/TextFieldStyle.d.ts +19 -0
- package/dist/style/TextFieldStyle.js +61 -0
- package/dist/style/TextFieldStyle.js.map +1 -0
- package/dist/theme.js +46 -18
- package/dist/theme.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/FieldProps.d.ts +1 -0
- package/dist/utils/formatCEP.d.ts +20 -0
- package/dist/utils/formatCEP.js +35 -0
- package/dist/utils/formatCEP.js.map +1 -0
- package/dist/utils/formatCpf.d.ts +14 -0
- package/dist/utils/formatCpf.js +35 -0
- package/dist/utils/formatCpf.js.map +1 -0
- package/dist/utils/validateCpf.d.ts +40 -0
- package/dist/utils/validateCpf.js +67 -0
- package/dist/utils/validateCpf.js.map +1 -0
- package/dist/utils/validateEmail.js +1 -1
- package/dist/utils/validateEmail.js.map +1 -1
- package/package.json +4 -2
- package/dist/components/recaptcha/FormStyled.d.ts +0 -30
- package/dist/components/recaptcha/FormStyled.js +0 -67
- package/dist/components/recaptcha/FormStyled.js.map +0 -1
- package/dist/components/style/ButtonFormStyled.js.map +0 -1
- package/dist/components/style/LinkFormStyled.js.map +0 -1
|
@@ -1,113 +1,160 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import TextField from '@mui/material/TextField';
|
|
5
4
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
6
5
|
import IconButton from '@mui/material/IconButton';
|
|
7
6
|
import VisibilityIcon from '@mui/icons-material/Visibility';
|
|
8
7
|
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
'background',
|
|
13
|
-
'borderRadius',
|
|
14
|
-
'boxShadow',
|
|
15
|
-
'borderColor',
|
|
16
|
-
'colorFocused',
|
|
17
|
-
'backgroundDisabled',
|
|
18
|
-
'colorDisabled',
|
|
19
|
-
'padding',
|
|
20
|
-
'colorText',
|
|
21
|
-
].includes(prop),
|
|
22
|
-
})(({ theme, background, backgroundDisabled, colorText, borderRadius, boxShadow, borderColor, colorFocused, colorDisabled, padding, }) => {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
24
|
-
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
25
|
-
// props -> tokens -> fallback
|
|
26
|
-
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : '#fff';
|
|
27
|
-
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : "#E5E7EB";
|
|
28
|
-
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : '#000';
|
|
29
|
-
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : "#9CA3AF";
|
|
30
|
-
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : "0";
|
|
31
|
-
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : "none";
|
|
32
|
-
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : '#ccc';
|
|
33
|
-
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : '#1976d2';
|
|
34
|
-
const pad = (_l = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _l !== void 0 ? _l : '4px 8px'; // pode deixar undefined se quiser respeitar o default do MUI
|
|
35
|
-
return {
|
|
36
|
-
background: bg,
|
|
37
|
-
borderRadius: br,
|
|
38
|
-
boxShadow: sh,
|
|
39
|
-
paddingRight: '16px',
|
|
40
|
-
'& .MuiInputBase-root': {
|
|
41
|
-
color: txt,
|
|
42
|
-
},
|
|
43
|
-
'& .MuiOutlinedInput-root': Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { '& .MuiOutlinedInput-notchedOutline': {
|
|
44
|
-
borderColor: bd,
|
|
45
|
-
}, '&:hover .MuiOutlinedInput-notchedOutline': {
|
|
46
|
-
borderColor: bd,
|
|
47
|
-
}, '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
48
|
-
borderColor: bdFocused,
|
|
49
|
-
}, '&.Mui-disabled': {
|
|
50
|
-
background: bgDisabled,
|
|
51
|
-
color: txtDisabled,
|
|
52
|
-
'& .MuiOutlinedInput-notchedOutline': {
|
|
53
|
-
borderColor: bd,
|
|
54
|
-
},
|
|
55
|
-
}, '& input.Mui-disabled': {
|
|
56
|
-
WebkitTextFillColor: txtDisabled,
|
|
57
|
-
} }),
|
|
58
|
-
'& .MuiInputLabel-root': {
|
|
59
|
-
color: txt,
|
|
60
|
-
},
|
|
61
|
-
'& .MuiInputLabel-root.Mui-focused': {
|
|
62
|
-
color: bdFocused,
|
|
63
|
-
},
|
|
64
|
-
'& .MuiInputLabel-root.Mui-disabled': {
|
|
65
|
-
color: txtDisabled,
|
|
66
|
-
},
|
|
67
|
-
};
|
|
68
|
-
});
|
|
8
|
+
import { useTheme } from '@mui/material/styles';
|
|
9
|
+
import { TextFieldStyled } from '../style/TextFieldStyle';
|
|
10
|
+
import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbheigth, fbmargin, fbpadding } from '../constant';
|
|
69
11
|
/**
|
|
70
12
|
* Componente de campo de senha baseado no TextField do Material UI, com botão para alternar
|
|
71
|
-
* entre mostrar
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
* -
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
13
|
+
* entre mostrar e ocultar a senha.
|
|
14
|
+
*
|
|
15
|
+
* O componente oferece:
|
|
16
|
+
* - Retorno apenas do valor da senha digitada via `onPasswordChange`
|
|
17
|
+
* - Validação automática de obrigatoriedade e formato (Regex)
|
|
18
|
+
* - Exibição controlada de mensagens de erro
|
|
19
|
+
* - Evento de validação completo via `onValidationChange`
|
|
20
|
+
* - Estilização via props com fallback para tokens do theme da Pipeline
|
|
21
|
+
*
|
|
22
|
+
* ---
|
|
23
|
+
*
|
|
24
|
+
* ### Tokens de estilo (ordem de prioridade)
|
|
25
|
+
*
|
|
26
|
+
* Para propriedades visuais, o componente resolve os valores nesta ordem:
|
|
27
|
+
* 1. **Props do componente**
|
|
28
|
+
* 2. **Theme da Pipeline** (`theme.pipelinesolucoes.forms.field`)
|
|
29
|
+
* 3. **Fallback interno** (valores padrão do componente)
|
|
30
|
+
*
|
|
31
|
+
* ---
|
|
32
|
+
*
|
|
33
|
+
* ### Tipografia
|
|
34
|
+
*
|
|
35
|
+
* A tipografia do texto digitado e do placeholder pode ser definida de duas formas:
|
|
36
|
+
*
|
|
37
|
+
* 1. **Material UI**
|
|
38
|
+
* Ao informar `textVariant`, o componente utiliza `theme.typography[textVariant]`.
|
|
39
|
+
*
|
|
40
|
+
* 2. **Theme da Pipeline**
|
|
41
|
+
* Quando `textVariant` não é informado, utiliza `theme.pipelinesolucoes.forms.field.typography`.
|
|
42
|
+
*
|
|
43
|
+
* **Ordem de prioridade (tipografia):**
|
|
44
|
+
* 1. `textVariant` (prop do componente)
|
|
45
|
+
* 2. `theme.typography[textVariant]` (Material UI)
|
|
46
|
+
* 3. `theme.pipelinesolucoes.forms.field.typography` (Pipeline)
|
|
47
|
+
* 4. Fallback interno (`theme.typography.body1`)
|
|
48
|
+
*
|
|
49
|
+
* ---
|
|
50
|
+
*
|
|
51
|
+
* @param {string} [id]
|
|
52
|
+
* ID do input.
|
|
53
|
+
*
|
|
54
|
+
* @param {string} [label]
|
|
55
|
+
* Label exibido no campo.
|
|
56
|
+
*
|
|
57
|
+
* @param {string} [placeholder]
|
|
58
|
+
* Texto de placeholder do input.
|
|
59
|
+
*
|
|
60
|
+
* @param {string} [value]
|
|
61
|
+
* Valor controlado do campo.
|
|
62
|
+
*
|
|
63
|
+
* @param {import('@mui/material/styles').TypographyVariant} [textVariant]
|
|
64
|
+
* Variante de tipografia do Material UI aplicada ao texto digitado e ao placeholder.
|
|
65
|
+
* Quando omitida, utiliza a tipografia do theme da Pipeline (`theme.pipelinesolucoes.forms.field.typography`).
|
|
66
|
+
*
|
|
67
|
+
* ---
|
|
68
|
+
* ### Estilo / Aparência
|
|
69
|
+
*
|
|
70
|
+
* @param {string} [background]
|
|
71
|
+
* Cor de fundo do campo.
|
|
72
|
+
* Ordem: `background` → `theme.pipelinesolucoes.forms.field.background` → `#fff`.
|
|
73
|
+
*
|
|
74
|
+
* @param {string} [backgroundDisabled]
|
|
75
|
+
* Cor de fundo do campo quando desabilitado.
|
|
76
|
+
* Ordem: `backgroundDisabled` → `theme.pipelinesolucoes.forms.field.backgroundDisabled` → `#E5E7EB`.
|
|
77
|
+
*
|
|
78
|
+
* @param {string} [color]
|
|
79
|
+
* Cor do texto do campo (texto digitado e label).
|
|
80
|
+
* Ordem: `color` → `theme.pipelinesolucoes.forms.field.color` → `#000`.
|
|
81
|
+
*
|
|
82
|
+
* @param {string} [colorFocused]
|
|
83
|
+
* Cor aplicada ao estado focado (usada como cor de borda no focus).
|
|
84
|
+
* Ordem: `colorFocused` → `theme.pipelinesolucoes.forms.field.colorFocused` → `#1976d2`.
|
|
85
|
+
*
|
|
86
|
+
* @param {string} [colorDisabled]
|
|
87
|
+
* Cor do texto do campo quando desabilitado.
|
|
88
|
+
* Ordem: `colorDisabled` → `theme.pipelinesolucoes.forms.field.colorDisabled` → `#9CA3AF`.
|
|
89
|
+
*
|
|
90
|
+
* @param {string} [borderRadius]
|
|
91
|
+
* Raio da borda do campo.
|
|
92
|
+
* Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.field.borderRadius` → `"0"`.
|
|
93
|
+
*
|
|
94
|
+
* @param {string} [boxShadow]
|
|
95
|
+
* Sombra do campo.
|
|
96
|
+
* Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.field.boxShadow` → `"none"`.
|
|
97
|
+
*
|
|
98
|
+
* @param {string} [borderColor]
|
|
99
|
+
* Cor da borda do campo (estado padrão/hover).
|
|
100
|
+
* Ordem: `borderColor` → `theme.pipelinesolucoes.forms.field.borderColor` → `#ccc`.
|
|
101
|
+
*
|
|
102
|
+
* @param {string} [padding]
|
|
103
|
+
* Espaçamento interno do input (aplicado no texto e textarea).
|
|
104
|
+
* Ordem: `padding` → `theme.pipelinesolucoes.forms.field.padding` → `"4px 8px"`.
|
|
105
|
+
*
|
|
106
|
+
* ---
|
|
107
|
+
* ### Validação
|
|
108
|
+
*
|
|
109
|
+
* @param {boolean} [required=true]
|
|
110
|
+
* Define se o campo é obrigatório.
|
|
111
|
+
*
|
|
112
|
+
* @param {RegExp} [pattern=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/]
|
|
113
|
+
* Expressão regular usada para validar o formato da senha.
|
|
114
|
+
*
|
|
115
|
+
* @param {string} [requiredMessage='Senha obrigatória']
|
|
116
|
+
* Mensagem exibida quando o campo obrigatório está vazio.
|
|
117
|
+
*
|
|
118
|
+
* @param {string} [patternMessage]
|
|
119
|
+
* Mensagem exibida quando a senha não atende ao formato definido.
|
|
120
|
+
*
|
|
121
|
+
* @param {'blur' | 'change' | 'both'} [showErrorOn='blur']
|
|
122
|
+
* Define quando a validação e exibição de erros deve ocorrer.
|
|
123
|
+
*
|
|
124
|
+
* @param {boolean} [disabled=false]
|
|
125
|
+
* Desabilita o campo.
|
|
126
|
+
*
|
|
127
|
+
* ---
|
|
128
|
+
* ### Eventos
|
|
129
|
+
*
|
|
130
|
+
* @param {(password: string) => void} [onPasswordChange]
|
|
131
|
+
* Callback que retorna apenas o valor da senha digitada.
|
|
132
|
+
*
|
|
133
|
+
* @param {(result: PasswordValidationResult) => void} [onValidationChange]
|
|
134
|
+
* Callback disparado sempre que a validação é executada, contendo o resultado completo.
|
|
135
|
+
*
|
|
136
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
|
|
137
|
+
* Evento `onChange` nativo do input (opcional).
|
|
138
|
+
*
|
|
139
|
+
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur]
|
|
140
|
+
* Evento `onBlur` nativo do input (opcional).
|
|
141
|
+
*
|
|
142
|
+
* ---
|
|
89
143
|
*
|
|
90
144
|
* @example
|
|
91
145
|
* ```tsx
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
* label="Senha"
|
|
101
|
-
* value={password}
|
|
102
|
-
* onPasswordChange={(p) => setPassword(p)}
|
|
103
|
-
* onValidationChange={(r) => console.log(r)}
|
|
104
|
-
* validateOn="both"
|
|
105
|
-
* />
|
|
106
|
-
* );
|
|
107
|
-
* };
|
|
146
|
+
* <TextFieldPassword
|
|
147
|
+
* label="Senha"
|
|
148
|
+
* background="#fff"
|
|
149
|
+
* borderRadius="10px"
|
|
150
|
+
* textVariant="body2"
|
|
151
|
+
* showErrorOn="both"
|
|
152
|
+
* onPasswordChange={(password) => console.log(password)}
|
|
153
|
+
* />
|
|
108
154
|
* ```
|
|
109
155
|
*/
|
|
110
|
-
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, required = true, pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/, requiredMessage = 'Senha obrigatória', patternMessage = '
|
|
156
|
+
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, disabled = false, required = true, pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/, requiredMessage = 'Senha obrigatória', patternMessage = 'A senha deve ter no mínimo 8 caracteres, com ao menos uma letra maiúscula, uma letra minúscula, um número e um caractere especial.', showErrorOn = 'blur', background, backgroundFocused, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, textVariant, padding, height, margin, onChange, onBlur, }) => {
|
|
157
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
111
158
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
112
159
|
const [touched, setTouched] = React.useState(false);
|
|
113
160
|
// fallback interno caso o usuário não use `value`
|
|
@@ -168,9 +215,25 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
168
215
|
};
|
|
169
216
|
const shouldShowError = touched && !validation.isValid && validation.status !== 'idle';
|
|
170
217
|
const helperText = shouldShowError ? validation.message : ' ';
|
|
171
|
-
|
|
218
|
+
const theme = useTheme();
|
|
219
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
220
|
+
// props -> tokens -> fallback
|
|
221
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
222
|
+
const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
|
|
223
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
|
|
224
|
+
const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
|
|
225
|
+
const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
|
|
226
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
|
|
227
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
|
|
228
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
|
|
229
|
+
const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
|
|
230
|
+
const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
|
|
231
|
+
const mg = (_o = margin !== null && margin !== void 0 ? margin : field === null || field === void 0 ? void 0 : field.margin) !== null && _o !== void 0 ? _o : fbmargin;
|
|
232
|
+
const typo = (_q = (_p = (textVariant && theme.typography[textVariant])) !== null && _p !== void 0 ? _p : field === null || field === void 0 ? void 0 : field.typography) !== null && _q !== void 0 ? _q : theme.typography.body1;
|
|
233
|
+
const hg = (_r = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _r !== void 0 ? _r : fbheigth;
|
|
234
|
+
return (_jsx(TextFieldStyled, { type: showPassword ? 'text' : 'password', id: id, typo: typo, label: label, placeholder: placeholder, value: currentValue, background: bg, backgroundFocused: bgFocused, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, height: hg, marginField: mg, disabled: disabled, required: required, fullWidth: true, error: shouldShowError, helperText: helperText, slotProps: {
|
|
172
235
|
input: {
|
|
173
|
-
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((prev) => !prev), edge: "end", "aria-label": showPassword ? 'Ocultar senha' : 'Mostrar senha', children: showPassword ? _jsx(VisibilityOffIcon, {}) : _jsx(VisibilityIcon, {}) }) })),
|
|
236
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((prev) => !prev), edge: "end", "aria-label": showPassword ? 'Ocultar senha' : 'Mostrar senha', sx: { margin: '0 4px 0 0' }, children: showPassword ? _jsx(VisibilityOffIcon, {}) : _jsx(VisibilityIcon, {}) }) })),
|
|
174
237
|
},
|
|
175
238
|
}, onChange: handleChange, onBlur: handleBlur }));
|
|
176
239
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldPassword.js","sourceRoot":"","sources":["../../src/components/TextFieldPassword.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"TextFieldPassword.js","sourceRoot":"","sources":["../../src/components/TextFieldPassword.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,77 +1,122 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
2
3
|
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
3
|
-
interface TextFieldValidateProps extends
|
|
4
|
+
interface TextFieldValidateProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding' | 'margin'> {
|
|
4
5
|
id?: string;
|
|
5
6
|
label?: string;
|
|
6
7
|
placeholder?: string;
|
|
7
8
|
value?: string;
|
|
8
|
-
|
|
9
|
-
backgroundDisabled?: string;
|
|
10
|
-
color?: string;
|
|
11
|
-
colorFocused?: string;
|
|
12
|
-
colorDisabled?: string;
|
|
13
|
-
borderRadius?: string;
|
|
14
|
-
boxShadow?: string;
|
|
15
|
-
borderColor?: string;
|
|
16
|
-
padding?: string;
|
|
17
|
-
margin?: string;
|
|
9
|
+
textVariant?: TypographyVariant;
|
|
18
10
|
disabled?: boolean;
|
|
11
|
+
minLength?: number;
|
|
12
|
+
maxLength?: number;
|
|
13
|
+
multiline?: boolean;
|
|
14
|
+
rows?: number;
|
|
19
15
|
required?: boolean;
|
|
20
16
|
requiredMessage?: string;
|
|
21
17
|
pattern?: RegExp | string;
|
|
22
18
|
patternMessage?: string;
|
|
23
19
|
showErrorOn?: 'change' | 'blur';
|
|
24
|
-
minLength?: number;
|
|
25
|
-
maxLength?: number;
|
|
26
|
-
multiline?: boolean;
|
|
27
|
-
rows?: number;
|
|
28
20
|
validate?: (value: string) => string | null | undefined;
|
|
29
21
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
30
22
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
31
23
|
}
|
|
32
24
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
25
|
+
* Campo de texto com suporte a validações comuns e customizadas, construído
|
|
26
|
+
* sobre o TextField do Material UI e estilizado via Design System da Pipeline.
|
|
27
|
+
*
|
|
28
|
+
* Funcionalidades principais:
|
|
29
|
+
* - Suporte a modo controlado (`value`)
|
|
30
|
+
* - Validações nativas (obrigatório, tamanho mínimo, regex)
|
|
31
|
+
* - Validação customizada via função
|
|
32
|
+
* - Controle de momento de exibição do erro (`change` ou `blur`)
|
|
33
|
+
* - Suporte a campo multilinha
|
|
34
|
+
* - Customização visual via props e tokens de theme
|
|
35
|
+
*
|
|
36
|
+
* Tokens de estilo (ordem de prioridade):
|
|
37
|
+
* - `prop` do componente
|
|
38
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
39
|
+
* - Fallback interno (constantes `fb*`)
|
|
40
|
+
*
|
|
41
|
+
* Tipografia:
|
|
42
|
+
* - Suporte à tipografia do Material UI via `textVariant`
|
|
43
|
+
* - Fallback para `theme.pipelinesolucoes.forms.field.typography`
|
|
44
|
+
* - Fallback final para `theme.typography.body1`
|
|
36
45
|
*
|
|
37
|
-
*
|
|
46
|
+
* @param {string} [id] Identificador do campo, repassado ao input do Material UI.
|
|
47
|
+
* @param {string} [label] Texto do rótulo exibido acima do campo.
|
|
48
|
+
* @param {string} [placeholder] Texto exibido quando o campo está vazio.
|
|
49
|
+
* @param {string} [value] Valor atual do campo (modo controlado).
|
|
38
50
|
*
|
|
39
|
-
* @param {string} [id] Id do campo (replicado no input do MUI).
|
|
40
|
-
* @param {string} [label] Rótulo exibido acima do campo.
|
|
41
|
-
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
42
|
-
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
43
51
|
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
44
52
|
*
|
|
45
|
-
* @param {
|
|
46
|
-
* @param {
|
|
47
|
-
*
|
|
48
|
-
* @param {
|
|
49
|
-
* @param {
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* @param {string} [padding='4px 8px'] Espaçamento interno do input.
|
|
53
|
+
* @param {number} [minLength] Número mínimo de caracteres permitidos.
|
|
54
|
+
* @param {number} [maxLength] Número máximo de caracteres permitidos.
|
|
55
|
+
*
|
|
56
|
+
* @param {boolean} [multiline=false] Define se o campo aceita múltiplas linhas.
|
|
57
|
+
* @param {number} [rows=3] Quantidade de linhas visíveis quando `multiline` está ativo.
|
|
58
|
+
*
|
|
59
|
+
*
|
|
60
|
+
* ### Estilo / Aparência
|
|
54
61
|
*
|
|
55
|
-
* @param {
|
|
56
|
-
*
|
|
62
|
+
* @param {import('@mui/material/styles').TypographyVariant} [textVariant] Variante tipográfica do Material UI aplicada ao texto e placeholder.
|
|
63
|
+
*
|
|
64
|
+
* @param {string} [background]
|
|
65
|
+
* Cor de fundo do campo.
|
|
66
|
+
* Ordem: `background` → `theme.pipelinesolucoes.forms.field.background` → `#fff`.
|
|
67
|
+
*
|
|
68
|
+
* @param {string} [backgroundDisabled]
|
|
69
|
+
* Cor de fundo do campo quando desabilitado.
|
|
70
|
+
* Ordem: `backgroundDisabled` → `theme.pipelinesolucoes.forms.field.backgroundDisabled` → `#E5E7EB`.
|
|
71
|
+
*
|
|
72
|
+
* @param {string} [color]
|
|
73
|
+
* Cor do texto do campo (texto digitado e label).
|
|
74
|
+
* Ordem: `color` → `theme.pipelinesolucoes.forms.field.color` → `#000`.
|
|
75
|
+
*
|
|
76
|
+
* @param {string} [colorFocused]
|
|
77
|
+
* Cor aplicada ao estado focado (usada como cor de borda no focus).
|
|
78
|
+
* Ordem: `colorFocused` → `theme.pipelinesolucoes.forms.field.colorFocused` → `#1976d2`.
|
|
79
|
+
*
|
|
80
|
+
* @param {string} [colorDisabled]
|
|
81
|
+
* Cor do texto do campo quando desabilitado.
|
|
82
|
+
* Ordem: `colorDisabled` → `theme.pipelinesolucoes.forms.field.colorDisabled` → `#9CA3AF`.
|
|
83
|
+
*
|
|
84
|
+
* @param {string} [borderRadius]
|
|
85
|
+
* Raio da borda do campo.
|
|
86
|
+
* Ordem: `borderRadius` → `theme.pipelinesolucoes.forms.field.borderRadius` → `"0"`.
|
|
87
|
+
*
|
|
88
|
+
* @param {string} [boxShadow]
|
|
89
|
+
* Sombra do campo.
|
|
90
|
+
* Ordem: `boxShadow` → `theme.pipelinesolucoes.forms.field.boxShadow` → `"none"`.
|
|
91
|
+
*
|
|
92
|
+
* @param {string} [borderColor]
|
|
93
|
+
* Cor da borda do campo (estado padrão/hover).
|
|
94
|
+
* Ordem: `borderColor` → `theme.pipelinesolucoes.forms.field.borderColor` → `#ccc`.
|
|
95
|
+
*
|
|
96
|
+
* @param {string} [padding]
|
|
97
|
+
* Espaçamento interno do input (aplicado no texto e textarea).
|
|
98
|
+
* Ordem: `padding` → `theme.pipelinesolucoes.forms.field.padding` → `"4px 8px"`.
|
|
99
|
+
*
|
|
100
|
+
* ---
|
|
101
|
+
* ### Validação
|
|
57
102
|
*
|
|
58
103
|
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
59
|
-
* @param {string} [requiredMessage
|
|
60
|
-
* @param {
|
|
61
|
-
* @param {
|
|
62
|
-
* @param {
|
|
104
|
+
* @param {string} [requiredMessage] Mensagem exibida quando o campo obrigatório está vazio.
|
|
105
|
+
* @param {RegExp | string} [pattern] Expressão regular utilizada para validação do valor.
|
|
106
|
+
* @param {string} [patternMessage] Mensagem exibida quando o valor não atende ao pattern.
|
|
107
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Define quando o erro será exibido.
|
|
63
108
|
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada.
|
|
64
|
-
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento em que o erro deve ser exibido.
|
|
65
109
|
*
|
|
66
|
-
*
|
|
110
|
+
* ---
|
|
111
|
+
* ### Eventos
|
|
112
|
+
*
|
|
67
113
|
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor.
|
|
68
114
|
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
69
115
|
*
|
|
116
|
+
* ---
|
|
117
|
+
*
|
|
70
118
|
* @example
|
|
71
119
|
* ```tsx
|
|
72
|
-
* import React from 'react';
|
|
73
|
-
* import TextFieldValidate from '@/components/TextFieldValidate';
|
|
74
|
-
*
|
|
75
120
|
* const Example = () => {
|
|
76
121
|
* const [email, setEmail] = React.useState('');
|
|
77
122
|
*
|
|
@@ -87,6 +132,7 @@ interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
87
132
|
* showErrorOn="blur"
|
|
88
133
|
* maxLength={120}
|
|
89
134
|
* borderRadius="6px"
|
|
135
|
+
* textVariant="subtitle2"
|
|
90
136
|
* />
|
|
91
137
|
* );
|
|
92
138
|
* };
|