@pipelinesolucoes/form 1.2.0-beta.1 → 1.2.0-beta.12
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/dist/components/NotificationSnackbar.d.ts +1 -2
- package/dist/components/NotificationSnackbar.js +1 -1
- package/dist/components/NotificationSnackbar.js.map +1 -1
- package/dist/components/SelectField.d.ts +73 -0
- package/dist/components/SelectField.js +141 -0
- package/dist/components/SelectField.js.map +1 -0
- package/dist/components/TextFieldPassword.d.ts +144 -76
- package/dist/components/TextFieldPassword.js +163 -102
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +88 -43
- package/dist/components/TextFieldValidate.js +100 -93
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/components/login/ClickResult.d.ts +11 -0
- package/dist/components/login/ClickResult.js +2 -0
- package/dist/components/login/ClickResult.js.map +1 -0
- package/dist/components/login/FormLogin.d.ts +113 -124
- package/dist/components/login/FormLogin.js +137 -124
- package/dist/components/login/FormLogin.js.map +1 -1
- package/dist/components/login/FormPasswordRecovery.d.ts +97 -110
- package/dist/components/login/FormPasswordRecovery.js +132 -105
- package/dist/components/login/FormPasswordRecovery.js.map +1 -1
- package/dist/components/login/FormSignUp.d.ts +114 -127
- package/dist/components/login/FormSignUp.js +138 -134
- package/dist/components/login/FormSignUp.js.map +1 -1
- package/dist/components/login/GoogleButton.d.ts +1 -4
- package/dist/components/login/GoogleButton.js.map +1 -1
- package/dist/components/login/StyleLogin.d.ts +14 -0
- package/dist/components/login/StyleLogin.js +57 -0
- package/dist/components/login/StyleLogin.js.map +1 -0
- package/dist/components/{FormStyled.d.ts → recaptcha/FormStyled.d.ts} +0 -7
- package/dist/components/{FormStyled.js → recaptcha/FormStyled.js} +0 -13
- package/dist/components/recaptcha/FormStyled.js.map +1 -0
- package/dist/components/recaptcha/RecaptchaForm.js +1 -1
- package/dist/components/recaptcha/RecaptchaForm.js.map +1 -1
- package/dist/constant.d.ts +9 -0
- package/dist/constant.js +10 -0
- package/dist/constant.js.map +1 -0
- package/dist/index.d.ts +1 -4
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/style/ButtonFormStyled.js +22 -0
- package/dist/style/ButtonFormStyled.js.map +1 -0
- package/dist/style/LinkFormStyled.d.ts +7 -0
- package/dist/style/LinkFormStyled.js +15 -0
- package/dist/style/LinkFormStyled.js.map +1 -0
- package/dist/style/TextFieldStyle.d.ts +16 -0
- package/dist/style/TextFieldStyle.js +57 -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 +4 -0
- package/package.json +5 -3
- package/dist/components/ButtonFormStyled.js +0 -22
- package/dist/components/ButtonFormStyled.js.map +0 -1
- package/dist/components/FormStyled.js.map +0 -1
- package/dist/types/BorderProps.d.ts +0 -6
- package/dist/types/BorderProps.js +0 -2
- package/dist/types/BorderProps.js.map +0 -1
- package/dist/types/ColorProps.d.ts +0 -9
- package/dist/types/ColorProps.js +0 -2
- package/dist/types/ColorProps.js.map +0 -1
- package/dist/types/LayoutProps.d.ts +0 -7
- package/dist/types/LayoutProps.js +0 -2
- package/dist/types/LayoutProps.js.map +0 -1
- package/dist/types/TextProps.d.ts +0 -5
- package/dist/types/TextProps.js +0 -2
- package/dist/types/TextProps.js.map +0 -1
- /package/dist/{components → style}/ButtonFormStyled.d.ts +0 -0
|
@@ -1,112 +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;
|
|
24
|
-
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
25
|
-
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : 'transparent';
|
|
26
|
-
const bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : bg;
|
|
27
|
-
const txt = (_e = colorText !== null && colorText !== void 0 ? colorText : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : theme.palette.text.primary;
|
|
28
|
-
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : theme.palette.text.disabled;
|
|
29
|
-
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : '8px';
|
|
30
|
-
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : 'none';
|
|
31
|
-
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : theme.palette.divider;
|
|
32
|
-
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : theme.palette.primary.main;
|
|
33
|
-
const pad = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding;
|
|
34
|
-
return {
|
|
35
|
-
background: bg,
|
|
36
|
-
borderRadius: br,
|
|
37
|
-
boxShadow: sh,
|
|
38
|
-
paddingRight: '16px',
|
|
39
|
-
'& .MuiInputBase-root': {
|
|
40
|
-
color: txt,
|
|
41
|
-
},
|
|
42
|
-
'& .MuiOutlinedInput-root': Object.assign(Object.assign({ borderRadius: br, boxShadow: sh }, (pad ? { padding: pad } : {})), { '& .MuiOutlinedInput-notchedOutline': {
|
|
43
|
-
borderColor: bd,
|
|
44
|
-
}, '&:hover .MuiOutlinedInput-notchedOutline': {
|
|
45
|
-
borderColor: bd,
|
|
46
|
-
}, '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
47
|
-
borderColor: bdFocused,
|
|
48
|
-
}, '&.Mui-disabled': {
|
|
49
|
-
background: bgDisabled,
|
|
50
|
-
color: txtDisabled,
|
|
51
|
-
'& .MuiOutlinedInput-notchedOutline': {
|
|
52
|
-
borderColor: bd,
|
|
53
|
-
},
|
|
54
|
-
}, '& input.Mui-disabled': {
|
|
55
|
-
WebkitTextFillColor: txtDisabled,
|
|
56
|
-
} }),
|
|
57
|
-
'& .MuiInputLabel-root': {
|
|
58
|
-
color: txt,
|
|
59
|
-
},
|
|
60
|
-
'& .MuiInputLabel-root.Mui-focused': {
|
|
61
|
-
color: bdFocused,
|
|
62
|
-
},
|
|
63
|
-
'& .MuiInputLabel-root.Mui-disabled': {
|
|
64
|
-
color: txtDisabled,
|
|
65
|
-
},
|
|
66
|
-
};
|
|
67
|
-
});
|
|
8
|
+
import { useTheme } from '@mui/material/styles';
|
|
9
|
+
import { TextFieldStyled } from '../style/TextFieldStyle';
|
|
10
|
+
import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbpadding } from '@/constant';
|
|
68
11
|
/**
|
|
69
12
|
* Componente de campo de senha baseado no TextField do Material UI, com botão para alternar
|
|
70
|
-
* entre mostrar
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
* -
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
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
|
+
* ---
|
|
88
143
|
*
|
|
89
144
|
* @example
|
|
90
145
|
* ```tsx
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
* label="Senha"
|
|
100
|
-
* value={password}
|
|
101
|
-
* onPasswordChange={(p) => setPassword(p)}
|
|
102
|
-
* onValidationChange={(r) => console.log(r)}
|
|
103
|
-
* validateOn="both"
|
|
104
|
-
* />
|
|
105
|
-
* );
|
|
106
|
-
* };
|
|
146
|
+
* <TextFieldPassword
|
|
147
|
+
* label="Senha"
|
|
148
|
+
* background="#fff"
|
|
149
|
+
* borderRadius="10px"
|
|
150
|
+
* textVariant="body2"
|
|
151
|
+
* showErrorOn="both"
|
|
152
|
+
* onPasswordChange={(password) => console.log(password)}
|
|
153
|
+
* />
|
|
107
154
|
* ```
|
|
108
155
|
*/
|
|
109
|
-
const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, onValidationChange, required = true,
|
|
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, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, padding, textVariant, onChange, onBlur, }) => {
|
|
157
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
110
158
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
111
159
|
const [touched, setTouched] = React.useState(false);
|
|
112
160
|
// fallback interno caso o usuário não use `value`
|
|
@@ -121,15 +169,15 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
121
169
|
if (required && trimmed.length === 0) {
|
|
122
170
|
return { isValid: false, status: 'required', message: requiredMessage, value: nextValue };
|
|
123
171
|
}
|
|
124
|
-
if (trimmed.length > 0 &&
|
|
125
|
-
return { isValid: false, status: 'invalid', message:
|
|
172
|
+
if (trimmed.length > 0 && pattern && !pattern.test(trimmed)) {
|
|
173
|
+
return { isValid: false, status: 'invalid', message: patternMessage, value: nextValue };
|
|
126
174
|
}
|
|
127
175
|
// se não é required e está vazio, consideramos "idle" (sem erro)
|
|
128
176
|
if (!required && trimmed.length === 0) {
|
|
129
177
|
return { isValid: true, status: 'idle', message: '', value: nextValue };
|
|
130
178
|
}
|
|
131
179
|
return { isValid: true, status: 'valid', message: '', value: nextValue };
|
|
132
|
-
}, [
|
|
180
|
+
}, [patternMessage, pattern, required, requiredMessage]);
|
|
133
181
|
const emitValidation = React.useCallback((nextValue) => {
|
|
134
182
|
const result = computeValidation(nextValue);
|
|
135
183
|
if (onValidationChange)
|
|
@@ -137,8 +185,8 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
137
185
|
return result;
|
|
138
186
|
}, [computeValidation, onValidationChange]);
|
|
139
187
|
const [validation, setValidation] = React.useState(() => computeValidation(currentValue));
|
|
140
|
-
const shouldValidateOnChange =
|
|
141
|
-
const shouldValidateOnBlur =
|
|
188
|
+
const shouldValidateOnChange = showErrorOn === 'change' || showErrorOn === 'both';
|
|
189
|
+
const shouldValidateOnBlur = showErrorOn === 'blur' || showErrorOn === 'both';
|
|
142
190
|
const handleChange = (event) => {
|
|
143
191
|
const nextValue = event.target.value;
|
|
144
192
|
// atualiza interno caso não seja controlado
|
|
@@ -167,9 +215,22 @@ const TextFieldPassword = ({ id, label, placeholder, value, onPasswordChange, on
|
|
|
167
215
|
};
|
|
168
216
|
const shouldShowError = touched && !validation.isValid && validation.status !== 'idle';
|
|
169
217
|
const helperText = shouldShowError ? validation.message : ' ';
|
|
170
|
-
|
|
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 bgDisabled = (_d = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _d !== void 0 ? _d : fbbackgroundDisabled;
|
|
223
|
+
const txt = (_e = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _e !== void 0 ? _e : fbcolor;
|
|
224
|
+
const txtDisabled = (_f = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _f !== void 0 ? _f : fbcolorDisabled;
|
|
225
|
+
const br = (_g = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _g !== void 0 ? _g : fbborderRadius;
|
|
226
|
+
const sh = (_h = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _h !== void 0 ? _h : fbboxShadow;
|
|
227
|
+
const bd = (_j = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _j !== void 0 ? _j : fbborderColor;
|
|
228
|
+
const bdFocused = (_k = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _k !== void 0 ? _k : fbcolorFocused;
|
|
229
|
+
const pad = (_l = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _l !== void 0 ? _l : fbpadding;
|
|
230
|
+
const typo = (_o = (_m = (textVariant && theme.typography[textVariant])) !== null && _m !== void 0 ? _m : field === null || field === void 0 ? void 0 : field.typography) !== null && _o !== void 0 ? _o : theme.typography.body1;
|
|
231
|
+
return (_jsx(TextFieldStyled, { type: showPassword ? 'text' : 'password', id: id, typo: typo, label: label, placeholder: placeholder, value: currentValue, background: bg, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, disabled: disabled, required: required, fullWidth: true, error: shouldShowError, helperText: helperText, slotProps: {
|
|
171
232
|
input: {
|
|
172
|
-
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, {}) }) })),
|
|
233
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setShowPassword((prev) => !prev), edge: "end", "aria-label": showPassword ? 'Ocultar senha' : 'Mostrar senha', sx: { margin: '0 16px 0 0' }, children: showPassword ? _jsx(VisibilityOffIcon, {}) : _jsx(VisibilityIcon, {}) }) })),
|
|
173
234
|
},
|
|
174
235
|
}, onChange: handleChange, onBlur: handleBlur }));
|
|
175
236
|
};
|
|
@@ -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,78 +1,122 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { ColorProps } from '
|
|
4
|
-
import { LayoutProps } from '../types/LayoutProps';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
5
4
|
interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
6
5
|
id?: string;
|
|
7
6
|
label?: string;
|
|
8
7
|
placeholder?: string;
|
|
9
8
|
value?: string;
|
|
10
|
-
|
|
11
|
-
backgroundDisabled?: string;
|
|
12
|
-
color?: string;
|
|
13
|
-
colorFocused?: string;
|
|
14
|
-
colorDisabled?: string;
|
|
15
|
-
borderRadius?: string;
|
|
16
|
-
boxShadow?: string;
|
|
17
|
-
borderColor?: string;
|
|
18
|
-
padding?: string;
|
|
9
|
+
textVariant?: TypographyVariant;
|
|
19
10
|
disabled?: boolean;
|
|
20
|
-
multiline?: boolean;
|
|
21
|
-
rows?: number;
|
|
22
11
|
required?: boolean;
|
|
23
12
|
requiredMessage?: string;
|
|
24
13
|
pattern?: RegExp | string;
|
|
25
14
|
patternMessage?: string;
|
|
26
|
-
validate?: (value: string) => string | null | undefined;
|
|
27
15
|
showErrorOn?: 'change' | 'blur';
|
|
28
16
|
minLength?: number;
|
|
29
17
|
maxLength?: number;
|
|
18
|
+
multiline?: boolean;
|
|
19
|
+
rows?: number;
|
|
20
|
+
validate?: (value: string) => string | null | undefined;
|
|
30
21
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
22
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
23
|
}
|
|
33
24
|
/**
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
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
|
|
37
35
|
*
|
|
38
|
-
*
|
|
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`
|
|
45
|
+
*
|
|
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).
|
|
39
50
|
*
|
|
40
|
-
* @param {string} [id] Id do campo (replicado no input do MUI).
|
|
41
|
-
* @param {string} [label] Rótulo exibido acima do campo.
|
|
42
|
-
* @param {string} [placeholder] Placeholder exibido quando o campo está vazio.
|
|
43
|
-
* @param {string} [value=''] Valor atual do campo (modo controlado).
|
|
44
51
|
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
45
52
|
*
|
|
46
|
-
* @param {
|
|
47
|
-
* @param {
|
|
48
|
-
*
|
|
49
|
-
* @param {
|
|
50
|
-
* @param {
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
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
|
|
61
|
+
*
|
|
62
|
+
* @param {import('@mui/material/styles').TypographyVariant} [textVariant] Variante tipográfica do Material UI aplicada ao texto e placeholder.
|
|
55
63
|
*
|
|
56
|
-
* @param {
|
|
57
|
-
*
|
|
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
|
|
58
102
|
*
|
|
59
103
|
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
60
|
-
* @param {string} [requiredMessage
|
|
61
|
-
* @param {
|
|
62
|
-
* @param {
|
|
63
|
-
* @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.
|
|
64
108
|
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada.
|
|
65
|
-
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento em que o erro deve ser exibido.
|
|
66
109
|
*
|
|
67
|
-
*
|
|
110
|
+
* ---
|
|
111
|
+
* ### Eventos
|
|
112
|
+
*
|
|
68
113
|
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor.
|
|
69
114
|
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
70
115
|
*
|
|
116
|
+
* ---
|
|
117
|
+
*
|
|
71
118
|
* @example
|
|
72
119
|
* ```tsx
|
|
73
|
-
* import React from 'react';
|
|
74
|
-
* import TextFieldValidate from '@/components/TextFieldValidate';
|
|
75
|
-
*
|
|
76
120
|
* const Example = () => {
|
|
77
121
|
* const [email, setEmail] = React.useState('');
|
|
78
122
|
*
|
|
@@ -88,6 +132,7 @@ interface TextFieldValidateProps extends BorderProps, ColorProps, LayoutProps {
|
|
|
88
132
|
* showErrorOn="blur"
|
|
89
133
|
* maxLength={120}
|
|
90
134
|
* borderRadius="6px"
|
|
135
|
+
* textVariant="subtitle2"
|
|
91
136
|
* />
|
|
92
137
|
* );
|
|
93
138
|
* };
|