@pipelinesolucoes/form 1.2.0-beta.3 → 1.2.0-beta.30
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 +259 -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
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useTheme } from '@mui/material/styles';
|
|
4
|
+
import { TextFieldStyled } from '../style/TextFieldStyle';
|
|
5
|
+
import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbheigth, fbpadding, } from '../constant';
|
|
6
|
+
const onlyNumbers = (raw) => (raw !== null && raw !== void 0 ? raw : '').replace(/[^\d]/g, '');
|
|
7
|
+
const normalizeTwoDigitYearToFourDigits = (yy) => {
|
|
8
|
+
const safeYY = (yy !== null && yy !== void 0 ? yy : '').slice(0, 2);
|
|
9
|
+
const n = Number(safeYY);
|
|
10
|
+
if (!safeYY || safeYY.length !== 2 || !Number.isFinite(n))
|
|
11
|
+
return safeYY;
|
|
12
|
+
const now = new Date();
|
|
13
|
+
const currentYear = now.getFullYear();
|
|
14
|
+
const currentYY = currentYear % 100;
|
|
15
|
+
const currentCentury = Math.floor(currentYear / 100);
|
|
16
|
+
// Ex.: em 2026 -> 00..26 => 20xx; 27..99 => 19xx
|
|
17
|
+
const century = n <= currentYY ? currentCentury : currentCentury - 1;
|
|
18
|
+
return `${century}${safeYY}`;
|
|
19
|
+
};
|
|
20
|
+
const formatBirthDate = (raw) => {
|
|
21
|
+
const digits = onlyNumbers(raw).slice(0, 8);
|
|
22
|
+
if (digits.length <= 2)
|
|
23
|
+
return digits;
|
|
24
|
+
if (digits.length <= 4)
|
|
25
|
+
return `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
26
|
+
const dd = digits.slice(0, 2);
|
|
27
|
+
const mm = digits.slice(2, 4);
|
|
28
|
+
const yearRaw = digits.slice(4); // 1..4 chars
|
|
29
|
+
// ✅ Garantir ano com 4 algarismos quando o usuário digitar 2 dígitos (ddmmyy)
|
|
30
|
+
if (yearRaw.length === 2) {
|
|
31
|
+
const yearNormalized = normalizeTwoDigitYearToFourDigits(yearRaw);
|
|
32
|
+
return `${dd}/${mm}/${yearNormalized}`;
|
|
33
|
+
}
|
|
34
|
+
return `${dd}/${mm}/${yearRaw}`;
|
|
35
|
+
};
|
|
36
|
+
const isValidBirthDate = (formatted) => {
|
|
37
|
+
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(formatted))
|
|
38
|
+
return false;
|
|
39
|
+
const [ddStr, mmStr, yyyyStr] = formatted.split('/');
|
|
40
|
+
const dd = Number(ddStr);
|
|
41
|
+
const mm = Number(mmStr);
|
|
42
|
+
const yyyy = Number(yyyyStr);
|
|
43
|
+
if (!Number.isFinite(dd) || !Number.isFinite(mm) || !Number.isFinite(yyyy))
|
|
44
|
+
return false;
|
|
45
|
+
if (yyyy < 1900 || yyyy > 3000)
|
|
46
|
+
return false;
|
|
47
|
+
if (mm < 1 || mm > 12)
|
|
48
|
+
return false;
|
|
49
|
+
if (dd < 1 || dd > 31)
|
|
50
|
+
return false;
|
|
51
|
+
const date = new Date(yyyy, mm - 1, dd);
|
|
52
|
+
if (Number.isNaN(date.getTime()))
|
|
53
|
+
return false;
|
|
54
|
+
// garante que não "normalizou" (ex.: 31/02 vira 02/03)
|
|
55
|
+
return (date.getFullYear() === yyyy &&
|
|
56
|
+
date.getMonth() === mm - 1 &&
|
|
57
|
+
date.getDate() === dd);
|
|
58
|
+
};
|
|
59
|
+
const calculateAgeFromFormatted = (formatted) => {
|
|
60
|
+
if (!isValidBirthDate(formatted))
|
|
61
|
+
return null;
|
|
62
|
+
const [ddStr, mmStr, yyyyStr] = formatted.split('/');
|
|
63
|
+
const dd = Number(ddStr);
|
|
64
|
+
const mm = Number(mmStr);
|
|
65
|
+
const yyyy = Number(yyyyStr);
|
|
66
|
+
const birth = new Date(yyyy, mm - 1, dd);
|
|
67
|
+
const today = new Date();
|
|
68
|
+
// Não permitir data no futuro
|
|
69
|
+
const todayAtMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
70
|
+
if (birth.getTime() > todayAtMidnight.getTime())
|
|
71
|
+
return null;
|
|
72
|
+
let age = today.getFullYear() - birth.getFullYear();
|
|
73
|
+
const monthDiff = today.getMonth() - birth.getMonth();
|
|
74
|
+
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
|
75
|
+
age--;
|
|
76
|
+
}
|
|
77
|
+
return age >= 0 ? age : null;
|
|
78
|
+
};
|
|
79
|
+
const computeError = (value, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate, }) => {
|
|
80
|
+
const v = value !== null && value !== void 0 ? value : '';
|
|
81
|
+
if (required && v.trim().length === 0)
|
|
82
|
+
return requiredMessage || 'Campo obrigatório';
|
|
83
|
+
if (typeof minLength === 'number' && v.length < minLength) {
|
|
84
|
+
return `Mínimo de ${minLength} caracteres`;
|
|
85
|
+
}
|
|
86
|
+
if (typeof maxLength === 'number' && v.length > maxLength) {
|
|
87
|
+
return `Máximo de ${maxLength} caracteres`;
|
|
88
|
+
}
|
|
89
|
+
if (pattern) {
|
|
90
|
+
const re = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
|
|
91
|
+
if (!re.test(v))
|
|
92
|
+
return patternMessage || 'Formato inválido';
|
|
93
|
+
}
|
|
94
|
+
if (validate) {
|
|
95
|
+
const customMsg = validate(v);
|
|
96
|
+
if (typeof customMsg === 'string' && customMsg)
|
|
97
|
+
return customMsg;
|
|
98
|
+
}
|
|
99
|
+
return null;
|
|
100
|
+
};
|
|
101
|
+
/**
|
|
102
|
+
* Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
|
|
103
|
+
* validações comuns (required, min/maxLength, pattern) + validação customizada,
|
|
104
|
+
* e cálculo automático de idade exibido na label.
|
|
105
|
+
*
|
|
106
|
+
* Regras:
|
|
107
|
+
* - O usuário digita apenas números.
|
|
108
|
+
* - Ao digitar, o valor é formatado automaticamente como `dd/mm/yyyy`.
|
|
109
|
+
* - Se o usuário digitar ano com 2 dígitos (`ddmmyy`), o componente normaliza para 4 dígitos.
|
|
110
|
+
* - Quando a data estiver completa e for válida, a idade é calculada e exibida na label.
|
|
111
|
+
* - Erros sempre têm prioridade no helperText (a label não exibe idade quando há erro).
|
|
112
|
+
*
|
|
113
|
+
* Tokens de estilo (ordem de prioridade):
|
|
114
|
+
* - props do componente
|
|
115
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
116
|
+
* - fallback interno (constantes `fb*`)
|
|
117
|
+
*
|
|
118
|
+
* @param {string} [id] Identificador do campo.
|
|
119
|
+
* @param {string} [label] Rótulo exibido acima do campo.
|
|
120
|
+
* @param {string} [placeholder='dd/mm/aaaa'] Placeholder do input.
|
|
121
|
+
* @param {string} [value] Valor do campo (controlado).
|
|
122
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
123
|
+
*
|
|
124
|
+
* @param {number} [minLength] Número mínimo de caracteres para validação (após máscara).
|
|
125
|
+
* @param {number} [maxLength] Número máximo de caracteres para validação (após máscara).
|
|
126
|
+
*
|
|
127
|
+
* @param {boolean} [required=false] Define se é obrigatório.
|
|
128
|
+
* @param {string} [requiredMessage='Campo obrigatório'] Mensagem de obrigatório.
|
|
129
|
+
* @param {RegExp | string} [pattern] Pattern para validação do valor formatado.
|
|
130
|
+
* @param {string} [patternMessage='Formato inválido'] Mensagem do pattern.
|
|
131
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento de exibir o erro.
|
|
132
|
+
* @param {(value: string) => string | null | undefined} [validate] Validação customizada do valor formatado.
|
|
133
|
+
*
|
|
134
|
+
* @param {(age: number | null) => void} [onAgeChange] Callback com a idade calculada (ou null se inválido/incompleto).
|
|
135
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] Callback disparado ao alterar (já com valor formatado).
|
|
136
|
+
* @param {(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
137
|
+
*
|
|
138
|
+
* @example
|
|
139
|
+
* ```tsx
|
|
140
|
+
* const Example = () => {
|
|
141
|
+
* const [birthDate, setBirthDate] = React.useState('');
|
|
142
|
+
*
|
|
143
|
+
* return (
|
|
144
|
+
* <TextFieldBirthDateWithAge
|
|
145
|
+
* label="Data de nascimento"
|
|
146
|
+
* value={birthDate}
|
|
147
|
+
* required
|
|
148
|
+
* showErrorOn="blur"
|
|
149
|
+
* onChange={(e) => setBirthDate(e.target.value)}
|
|
150
|
+
* onAgeChange={(age) => console.log('idade', age)}
|
|
151
|
+
* />
|
|
152
|
+
* );
|
|
153
|
+
* };
|
|
154
|
+
* ```
|
|
155
|
+
*/
|
|
156
|
+
const TextFieldBirthDateWithAge = ({ id, label, placeholder = 'dd/mm/aaaa', value = '', textVariant, background, backgroundFocused, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, padding, height, disabled = false, minLength, maxLength, required = false, requiredMessage = 'Campo obrigatório', pattern, patternMessage = 'Formato inválido', validate, showErrorOn = 'blur', onChange, onBlur, onAgeChange, }) => {
|
|
157
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
158
|
+
const [touched, setTouched] = React.useState(false);
|
|
159
|
+
const formattedValue = React.useMemo(() => formatBirthDate(value), [value]);
|
|
160
|
+
const computedAge = React.useMemo(() => {
|
|
161
|
+
if (formattedValue.length !== 10)
|
|
162
|
+
return null;
|
|
163
|
+
return calculateAgeFromFormatted(formattedValue);
|
|
164
|
+
}, [formattedValue]);
|
|
165
|
+
React.useEffect(() => {
|
|
166
|
+
onAgeChange === null || onAgeChange === void 0 ? void 0 : onAgeChange(computedAge);
|
|
167
|
+
}, [computedAge, onAgeChange]);
|
|
168
|
+
const errorMessage = React.useMemo(() => {
|
|
169
|
+
const v = formattedValue;
|
|
170
|
+
const baseError = showErrorOn === 'change'
|
|
171
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
172
|
+
: showErrorOn === 'blur' && touched
|
|
173
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
174
|
+
: null;
|
|
175
|
+
if (baseError)
|
|
176
|
+
return baseError;
|
|
177
|
+
if (v.length === 10 && !isValidBirthDate(v))
|
|
178
|
+
return 'Data inválida';
|
|
179
|
+
if (v.length === 10 && isValidBirthDate(v) && computedAge === null)
|
|
180
|
+
return 'Data inválida';
|
|
181
|
+
return null;
|
|
182
|
+
}, [
|
|
183
|
+
formattedValue,
|
|
184
|
+
required,
|
|
185
|
+
requiredMessage,
|
|
186
|
+
minLength,
|
|
187
|
+
maxLength,
|
|
188
|
+
pattern,
|
|
189
|
+
patternMessage,
|
|
190
|
+
validate,
|
|
191
|
+
showErrorOn,
|
|
192
|
+
touched,
|
|
193
|
+
computedAge,
|
|
194
|
+
]);
|
|
195
|
+
const computedLabel = computedAge !== null && !errorMessage
|
|
196
|
+
? `${label !== null && label !== void 0 ? label : ''} (${computedAge} anos)`.trim()
|
|
197
|
+
: label;
|
|
198
|
+
const handleBlur = (event) => {
|
|
199
|
+
if (!touched)
|
|
200
|
+
setTouched(true);
|
|
201
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
202
|
+
};
|
|
203
|
+
const handleChange = (event) => {
|
|
204
|
+
if (!onChange)
|
|
205
|
+
return;
|
|
206
|
+
const next = formatBirthDate(event.target.value);
|
|
207
|
+
const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: next }), currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: next }) });
|
|
208
|
+
onChange(syntheticEvent);
|
|
209
|
+
};
|
|
210
|
+
const handleKeyDown = (event) => {
|
|
211
|
+
const allowed = [
|
|
212
|
+
'Backspace',
|
|
213
|
+
'Delete',
|
|
214
|
+
'Tab',
|
|
215
|
+
'Enter',
|
|
216
|
+
'Escape',
|
|
217
|
+
'ArrowLeft',
|
|
218
|
+
'ArrowRight',
|
|
219
|
+
'ArrowUp',
|
|
220
|
+
'ArrowDown',
|
|
221
|
+
'Home',
|
|
222
|
+
'End',
|
|
223
|
+
];
|
|
224
|
+
if (allowed.includes(event.key))
|
|
225
|
+
return;
|
|
226
|
+
if (event.ctrlKey || event.metaKey)
|
|
227
|
+
return;
|
|
228
|
+
if (!/^\d$/.test(event.key)) {
|
|
229
|
+
event.preventDefault();
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
const theme = useTheme();
|
|
233
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
234
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
235
|
+
const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
|
|
236
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
|
|
237
|
+
const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
|
|
238
|
+
const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
|
|
239
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
|
|
240
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
|
|
241
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
|
|
242
|
+
const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
|
|
243
|
+
const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
|
|
244
|
+
const hg = (_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth;
|
|
245
|
+
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;
|
|
246
|
+
const helperText = errorMessage ? errorMessage : '\u00A0';
|
|
247
|
+
return (_jsx(TextFieldStyled, { id: id, label: computedLabel, placeholder: placeholder, value: formattedValue, typo: typo, onChange: handleChange, onBlur: handleBlur, background: bg, backgroundFocused: bgFocused, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, disabled: disabled, required: required, fullWidth: true, height: hg, error: Boolean(errorMessage), helperText: helperText, onKeyDown: handleKeyDown, slotProps: {
|
|
248
|
+
input: {
|
|
249
|
+
inputProps: {
|
|
250
|
+
inputMode: 'numeric',
|
|
251
|
+
pattern: '[0-9]*',
|
|
252
|
+
maxLength: 10,
|
|
253
|
+
},
|
|
254
|
+
},
|
|
255
|
+
} }));
|
|
256
|
+
};
|
|
257
|
+
TextFieldBirthDateWithAge.displayName = 'TextFieldBirthDateWithAge';
|
|
258
|
+
export default TextFieldBirthDateWithAge;
|
|
259
|
+
//# sourceMappingURL=TextFieldBirthDateWithAge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldBirthDateWithAge.js","sourceRoot":"","sources":["../../src/components/TextFieldBirthDateWithAge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
+
interface TextFieldCPFValidateProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding'> {
|
|
5
|
+
id?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
value?: string;
|
|
9
|
+
textVariant?: TypographyVariant;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
minLength?: number;
|
|
12
|
+
maxLength?: number;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
requiredMessage?: string;
|
|
15
|
+
pattern?: RegExp | string;
|
|
16
|
+
patternMessage?: string;
|
|
17
|
+
showErrorOn?: 'change' | 'blur';
|
|
18
|
+
validate?: (value: string) => string | null | undefined;
|
|
19
|
+
invalidCpfMessage?: string;
|
|
20
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
21
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Campo de CPF com entrada somente numérica, máscara `000.000.000-00`,
|
|
25
|
+
* validações comuns (required, min/maxLength, pattern) + validação customizada.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* <TextFieldCPFValidate
|
|
30
|
+
* label="CPF"
|
|
31
|
+
* value={cpf}
|
|
32
|
+
* onChange={(e) => setCpf(e.target.value)} // recebe SEMPRE o valor formatado
|
|
33
|
+
* />
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
declare const TextFieldCPFValidate: React.FC<TextFieldCPFValidateProps>;
|
|
37
|
+
export default TextFieldCPFValidate;
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useTheme } from '@mui/material/styles';
|
|
4
|
+
import { TextFieldStyled } from '../style/TextFieldStyle';
|
|
5
|
+
import { fbbackground, fbbackgroundDisabled, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbcolorDisabled, fbcolorFocused, fbheigth, fbpadding, } from '../constant';
|
|
6
|
+
import { formatCpf } from '../utils/formatCpf';
|
|
7
|
+
import { validateCpf } from '../utils/validateCpf';
|
|
8
|
+
const onlyNumbers = (raw) => (raw !== null && raw !== void 0 ? raw : '').replace(/[^\d]/g, '');
|
|
9
|
+
const isValidCpfFormatted = (formatted) => {
|
|
10
|
+
// aceita com máscara completa
|
|
11
|
+
if (!/^\d{3}\.\d{3}\.\d{3}-\d{2}$/.test(formatted))
|
|
12
|
+
return false;
|
|
13
|
+
const digits = onlyNumbers(formatted);
|
|
14
|
+
return validateCpf(digits);
|
|
15
|
+
};
|
|
16
|
+
const computeError = (value, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate, }) => {
|
|
17
|
+
const v = value !== null && value !== void 0 ? value : '';
|
|
18
|
+
if (required && v.trim().length === 0)
|
|
19
|
+
return requiredMessage || 'Campo obrigatório';
|
|
20
|
+
if (typeof minLength === 'number' && v.length < minLength)
|
|
21
|
+
return `Mínimo de ${minLength} caracteres`;
|
|
22
|
+
if (typeof maxLength === 'number' && v.length > maxLength)
|
|
23
|
+
return `Máximo de ${maxLength} caracteres`;
|
|
24
|
+
if (pattern) {
|
|
25
|
+
const re = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
|
|
26
|
+
if (!re.test(v))
|
|
27
|
+
return patternMessage || 'Formato inválido';
|
|
28
|
+
}
|
|
29
|
+
if (validate) {
|
|
30
|
+
const customMsg = validate(v);
|
|
31
|
+
if (typeof customMsg === 'string' && customMsg)
|
|
32
|
+
return customMsg;
|
|
33
|
+
}
|
|
34
|
+
return null;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Campo de CPF com entrada somente numérica, máscara `000.000.000-00`,
|
|
38
|
+
* validações comuns (required, min/maxLength, pattern) + validação customizada.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* <TextFieldCPFValidate
|
|
43
|
+
* label="CPF"
|
|
44
|
+
* value={cpf}
|
|
45
|
+
* onChange={(e) => setCpf(e.target.value)} // recebe SEMPRE o valor formatado
|
|
46
|
+
* />
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
const TextFieldCPFValidate = ({ id, label = 'CPF', placeholder = '000.000.000-00', value = '', textVariant, background, backgroundFocused, backgroundDisabled, color, colorFocused, colorDisabled, borderRadius, boxShadow, borderColor, padding, height, disabled = false, minLength, maxLength, required = false, requiredMessage = 'Campo obrigatório', pattern, patternMessage = 'Formato inválido', validate, showErrorOn = 'blur', invalidCpfMessage = 'CPF inválido', onChange, onBlur, }) => {
|
|
50
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
51
|
+
const [touched, setTouched] = React.useState(false);
|
|
52
|
+
const formattedValue = React.useMemo(() => formatCpf(value), [value]);
|
|
53
|
+
const cpfValid = React.useMemo(() => {
|
|
54
|
+
// só valida quando estiver completo (14 com máscara)
|
|
55
|
+
if (formattedValue.length !== 14)
|
|
56
|
+
return null; // incompleto
|
|
57
|
+
return isValidCpfFormatted(formattedValue);
|
|
58
|
+
}, [formattedValue]);
|
|
59
|
+
const errorMessage = React.useMemo(() => {
|
|
60
|
+
const v = formattedValue;
|
|
61
|
+
const baseError = showErrorOn === 'change'
|
|
62
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
63
|
+
: showErrorOn === 'blur' && touched
|
|
64
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
65
|
+
: null;
|
|
66
|
+
if (baseError)
|
|
67
|
+
return baseError;
|
|
68
|
+
// valida CPF apenas quando completo
|
|
69
|
+
if (v.length === 14 && cpfValid === false)
|
|
70
|
+
return invalidCpfMessage;
|
|
71
|
+
return null;
|
|
72
|
+
}, [
|
|
73
|
+
formattedValue,
|
|
74
|
+
required,
|
|
75
|
+
requiredMessage,
|
|
76
|
+
minLength,
|
|
77
|
+
maxLength,
|
|
78
|
+
pattern,
|
|
79
|
+
patternMessage,
|
|
80
|
+
validate,
|
|
81
|
+
showErrorOn,
|
|
82
|
+
touched,
|
|
83
|
+
cpfValid,
|
|
84
|
+
invalidCpfMessage,
|
|
85
|
+
]);
|
|
86
|
+
const handleBlur = (event) => {
|
|
87
|
+
if (!touched)
|
|
88
|
+
setTouched(true);
|
|
89
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
90
|
+
};
|
|
91
|
+
const handleChange = (event) => {
|
|
92
|
+
if (!onChange)
|
|
93
|
+
return;
|
|
94
|
+
const next = formatCpf(event.target.value);
|
|
95
|
+
const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: next }), currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: next }) });
|
|
96
|
+
onChange(syntheticEvent);
|
|
97
|
+
};
|
|
98
|
+
const handleKeyDown = (event) => {
|
|
99
|
+
const allowed = [
|
|
100
|
+
'Backspace',
|
|
101
|
+
'Delete',
|
|
102
|
+
'Tab',
|
|
103
|
+
'Enter',
|
|
104
|
+
'Escape',
|
|
105
|
+
'ArrowLeft',
|
|
106
|
+
'ArrowRight',
|
|
107
|
+
'ArrowUp',
|
|
108
|
+
'ArrowDown',
|
|
109
|
+
'Home',
|
|
110
|
+
'End',
|
|
111
|
+
];
|
|
112
|
+
if (allowed.includes(event.key))
|
|
113
|
+
return;
|
|
114
|
+
if (event.ctrlKey || event.metaKey)
|
|
115
|
+
return;
|
|
116
|
+
if (!/^\d$/.test(event.key)) {
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
const theme = useTheme();
|
|
121
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
122
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
123
|
+
const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
|
|
124
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
|
|
125
|
+
const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
|
|
126
|
+
const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
|
|
127
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
|
|
128
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
|
|
129
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
|
|
130
|
+
const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
|
|
131
|
+
const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
|
|
132
|
+
const hg = (_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth;
|
|
133
|
+
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;
|
|
134
|
+
const helperText = errorMessage ? errorMessage : '\u00A0';
|
|
135
|
+
return (_jsx(TextFieldStyled, { id: id, label: label, placeholder: placeholder, value: formattedValue, typo: typo, onChange: handleChange, onBlur: handleBlur, background: bg, backgroundFocused: bgFocused, backgroundDisabled: bgDisabled, colorText: txt, colorFocused: bdFocused, colorDisabled: txtDisabled, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, disabled: disabled, required: required, fullWidth: true, height: hg, error: Boolean(errorMessage), helperText: helperText, onKeyDown: handleKeyDown, slotProps: {
|
|
136
|
+
input: {
|
|
137
|
+
inputProps: {
|
|
138
|
+
inputMode: 'numeric',
|
|
139
|
+
pattern: '[0-9]*',
|
|
140
|
+
maxLength: 14, // 000.000.000-00
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
} }));
|
|
144
|
+
};
|
|
145
|
+
TextFieldCPFValidate.displayName = 'TextFieldCPFValidate';
|
|
146
|
+
export default TextFieldCPFValidate;
|
|
147
|
+
//# sourceMappingURL=TextFieldCPFValidate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextFieldCPFValidate.js","sourceRoot":"","sources":["../../src/components/TextFieldCPFValidate.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,QAAQ,EACR,SAAS,GACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmCnD,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAGvE,MAAM,mBAAmB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAChD,8BAA8B;IAC9B,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,SAAS,CAAC;QAAE,OAAO,KAAK,CAAC;IACjE,MAAM,MAAM,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAa,EACb,EACE,QAAQ,EACR,eAAe,EACf,SAAS,EACT,SAAS,EACT,OAAO,EACP,cAAc,EACd,QAAQ,GAIT,EACc,EAAE;IACjB,MAAM,CAAC,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC;IACtB,IAAI,QAAQ,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,eAAe,IAAI,mBAAmB,CAAC;IAErF,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,GAAG,SAAS;QAAE,OAAO,aAAa,SAAS,aAAa,CAAC;IACtG,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,GAAG,SAAS;QAAE,OAAO,aAAa,SAAS,aAAa,CAAC;IAEtG,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,EAAE,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACvE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;YAAE,OAAO,cAAc,IAAI,kBAAkB,CAAC;IAC/D,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC9B,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS;YAAE,OAAO,SAAS,CAAC;IACnE,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,oBAAoB,GAAwC,CAAC,EACjE,EAAE,EACF,KAAK,GAAG,KAAK,EACb,WAAW,GAAG,gBAAgB,EAC9B,KAAK,GAAG,EAAE,EACV,WAAW,EAEX,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,YAAY,EACZ,aAAa,EAEb,YAAY,EACZ,SAAS,EACT,WAAW,EAEX,OAAO,EACP,MAAM,EAEN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,EAET,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,mBAAmB,EACrC,OAAO,EACP,cAAc,GAAG,kBAAkB,EACnC,QAAQ,EACR,WAAW,GAAG,MAAM,EAEpB,iBAAiB,GAAG,cAAc,EAElC,QAAQ,EACR,MAAM,GACP,EAAE,EAAE;;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEtE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,qDAAqD;QACrD,IAAI,cAAc,CAAC,MAAM,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC,CAAC,aAAa;QAC5D,OAAO,mBAAmB,CAAC,cAAc,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,CAAC,GAAG,cAAc,CAAC;QAEzB,MAAM,SAAS,GACb,WAAW,KAAK,QAAQ;YACtB,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;YACzG,CAAC,CAAC,WAAW,KAAK,MAAM,IAAI,OAAO;gBACjC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;gBACzG,CAAC,CAAC,IAAI,CAAC;QAEb,IAAI,SAAS;YAAE,OAAO,SAAS,CAAC;QAEhC,oCAAoC;QACpC,IAAI,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,QAAQ,KAAK,KAAK;YAAE,OAAO,iBAAiB,CAAC;QAEpE,OAAO,IAAI,CAAC;IACd,CAAC,EAAE;QACD,cAAc;QACd,QAAQ;QACR,eAAe;QACf,SAAS;QACT,SAAS;QACT,OAAO;QACP,cAAc;QACd,QAAQ;QACR,WAAW;QACX,OAAO;QACP,QAAQ;QACR,iBAAiB;KAClB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,KAA+D,EAAE,EAAE;QACrF,IAAI,CAAC,OAAO;YAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QAC/B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;QACxF,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE3C,MAAM,cAAc,GAAG,gCAClB,KAAK,KACR,MAAM,kCAAO,KAAK,CAAC,MAAM,KAAE,KAAK,EAAE,IAAI,KACtC,aAAa,kCAAO,KAAK,CAAC,aAAa,KAAE,KAAK,EAAE,IAAI,MACQ,CAAC;QAE/D,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA4C,EAAE,EAAE;QACrE,MAAM,OAAO,GAAG;YACd,WAAW;YACX,QAAQ;YACR,KAAK;YACL,OAAO;YACP,QAAQ;YACR,WAAW;YACX,YAAY;YACZ,SAAS;YACT,WAAW;YACX,MAAM;YACN,KAAK;SACN,CAAC;QAEF,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;YAAE,OAAO;QACxC,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;YAAE,OAAO;QAE3C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,0CAAE,KAAK,CAAC;IAEnD,MAAM,EAAE,GAAG,MAAA,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,YAAY,CAAC;IAC3D,MAAM,SAAS,GAAG,MAAA,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,mCAAI,EAAE,CAAC;IACtE,MAAM,UAAU,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,kBAAkB,mCAAI,oBAAoB,CAAC;IAC3F,MAAM,GAAG,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,OAAO,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAA,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,mCAAI,eAAe,CAAC;IAC7E,MAAM,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,cAAc,CAAC;IACjE,MAAM,EAAE,GAAG,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,mCAAI,WAAW,CAAC;IACxD,MAAM,EAAE,GAAG,MAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,mCAAI,aAAa,CAAC;IAC9D,MAAM,SAAS,GAAG,MAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,cAAc,CAAC;IACxE,MAAM,GAAG,GAAG,MAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,mCAAI,SAAS,CAAC;IACnD,MAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,QAAQ,CAAC;IAE/C,MAAM,IAAI,GACR,MAAA,MAAA,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,mCAC9C,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCACjB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;IAEzB,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE1D,OAAO,CACL,KAAC,eAAe,IACd,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,EAAE,EACd,iBAAiB,EAAE,SAAS,EAC5B,kBAAkB,EAAE,UAAU,EAC9B,SAAS,EAAE,GAAG,EACd,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,WAAW,EAC1B,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,EAAE,EACb,WAAW,EAAE,EAAE,EACf,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,QACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAC5B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE;YACT,KAAK,EAAE;gBACL,UAAU,EAAE;oBACV,SAAS,EAAE,SAAS;oBACpB,OAAO,EAAE,QAAQ;oBACjB,SAAS,EAAE,EAAE,EAAE,iBAAiB;iBACjC;aACF;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;AAE1D,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
+
interface TextFieldNumberValidateProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding'> {
|
|
5
|
+
id?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
value?: string;
|
|
9
|
+
textVariant?: TypographyVariant;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
minLength?: number;
|
|
12
|
+
maxLength?: number;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
requiredMessage?: string;
|
|
15
|
+
pattern?: RegExp | string;
|
|
16
|
+
patternMessage?: string;
|
|
17
|
+
showErrorOn?: 'change' | 'blur';
|
|
18
|
+
validate?: (value: string) => string | null | undefined;
|
|
19
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
20
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Campo de texto numérico com suporte a validações comuns e customizadas, construído
|
|
24
|
+
* sobre o TextField do Material UI e estilizado via Design System da Pipeline.
|
|
25
|
+
*
|
|
26
|
+
* Diferença principal:
|
|
27
|
+
* - Este componente **aceita apenas números (0–9)**, removendo automaticamente qualquer caractere não numérico.
|
|
28
|
+
*
|
|
29
|
+
* Funcionalidades principais:
|
|
30
|
+
* - Suporte a modo controlado (`value`)
|
|
31
|
+
* - Validações nativas (obrigatório, tamanho mínimo, regex)
|
|
32
|
+
* - Validação customizada via função
|
|
33
|
+
* - Controle de momento de exibição do erro (`change` ou `blur`)
|
|
34
|
+
* - Suporte a campo multilinha (mantido por compatibilidade)
|
|
35
|
+
* - Customização visual via props e tokens de theme
|
|
36
|
+
*
|
|
37
|
+
* Tokens de estilo (ordem de prioridade):
|
|
38
|
+
* - `prop` do componente
|
|
39
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
40
|
+
* - Fallback interno (constantes `fb*`)
|
|
41
|
+
*
|
|
42
|
+
* Tipografia:
|
|
43
|
+
* - Suporte à tipografia do Material UI via `textVariant`
|
|
44
|
+
* - Fallback para `theme.pipelinesolucoes.forms.field.typography`
|
|
45
|
+
* - Fallback final para `theme.typography.body1`
|
|
46
|
+
*
|
|
47
|
+
* @param {string} [id] Identificador do campo, repassado ao input do Material UI.
|
|
48
|
+
* @param {string} [label] Texto do rótulo exibido acima do campo.
|
|
49
|
+
* @param {string} [placeholder] Texto exibido quando o campo está vazio.
|
|
50
|
+
* @param {string} [value] Valor atual do campo (modo controlado). Somente dígitos serão mantidos.
|
|
51
|
+
*
|
|
52
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
53
|
+
*
|
|
54
|
+
* @param {number} [minLength] Número mínimo de caracteres permitidos.
|
|
55
|
+
* @param {number} [maxLength] Número máximo de caracteres permitidos.
|
|
56
|
+
*
|
|
57
|
+
* @param {boolean} [multiline=false] Define se o campo aceita múltiplas linhas (mantido por compatibilidade).
|
|
58
|
+
* @param {number} [rows=3] Quantidade de linhas visíveis quando `multiline` está ativo.
|
|
59
|
+
*
|
|
60
|
+
* ### Estilo / Aparência
|
|
61
|
+
* @param {import('@mui/material/styles').TypographyVariant} [textVariant] Variante tipográfica do Material UI aplicada ao texto e placeholder.
|
|
62
|
+
* @param {string} [background] Cor de fundo do campo.
|
|
63
|
+
* @param {string} [backgroundDisabled] Cor de fundo do campo quando desabilitado.
|
|
64
|
+
* @param {string} [backgroundFocused] Cor de fundo do campo quando focado.
|
|
65
|
+
* @param {string} [color] Cor do texto do campo (texto digitado e label).
|
|
66
|
+
* @param {string} [colorFocused] Cor aplicada ao estado focado (usada como cor de borda no focus).
|
|
67
|
+
* @param {string} [colorDisabled] Cor do texto do campo quando desabilitado.
|
|
68
|
+
* @param {string} [borderRadius] Raio da borda do campo.
|
|
69
|
+
* @param {string} [boxShadow] Sombra do campo.
|
|
70
|
+
* @param {string} [borderColor] Cor da borda do campo (estado padrão/hover).
|
|
71
|
+
* @param {string} [padding] Espaçamento interno do input (aplicado no texto e textarea).
|
|
72
|
+
*
|
|
73
|
+
* ---
|
|
74
|
+
* ### Validação
|
|
75
|
+
* @param {boolean} [required=false] Indica se o campo é obrigatório.
|
|
76
|
+
* @param {string} [requiredMessage] Mensagem exibida quando o campo obrigatório está vazio.
|
|
77
|
+
* @param {RegExp | string} [pattern] Expressão regular utilizada para validação do valor (aplicada após sanitização numérica).
|
|
78
|
+
* @param {string} [patternMessage] Mensagem exibida quando o valor não atende ao pattern.
|
|
79
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Define quando o erro será exibido.
|
|
80
|
+
* @param {(value: string) => string | null | undefined} [validate] Função de validação customizada (recebe o valor sanitizado).
|
|
81
|
+
*
|
|
82
|
+
* ---
|
|
83
|
+
* ### Eventos
|
|
84
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] Callback disparado ao alterar o valor (com `event.target.value` já sanitizado).
|
|
85
|
+
* @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* const Example = () => {
|
|
90
|
+
* const [age, setAge] = React.useState('');
|
|
91
|
+
*
|
|
92
|
+
* return (
|
|
93
|
+
* <TextFieldNumberValidate
|
|
94
|
+
* label="Idade"
|
|
95
|
+
* placeholder="Somente números"
|
|
96
|
+
* value={age}
|
|
97
|
+
* onChange={(e) => setAge(e.target.value)}
|
|
98
|
+
* required
|
|
99
|
+
* minLength={1}
|
|
100
|
+
* maxLength={3}
|
|
101
|
+
* showErrorOn="blur"
|
|
102
|
+
* borderRadius="6px"
|
|
103
|
+
* textVariant="subtitle2"
|
|
104
|
+
* />
|
|
105
|
+
* );
|
|
106
|
+
* };
|
|
107
|
+
* ```
|
|
108
|
+
*/
|
|
109
|
+
declare const TextFieldNumberValidate: React.FC<TextFieldNumberValidateProps>;
|
|
110
|
+
export default TextFieldNumberValidate;
|