@pipelinesolucoes/form 1.2.0-beta.22 → 1.2.0-beta.25
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 +5 -1
- package/dist/components/SelectField.d.ts +1 -1
- package/dist/components/SelectField.js.map +1 -1
- package/dist/components/TextFieldBirthDateWithAge.d.ts +84 -0
- package/dist/components/TextFieldBirthDateWithAge.js +242 -0
- package/dist/components/TextFieldBirthDateWithAge.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 +1 -11
- package/dist/components/TextFieldPassword.js +8 -7
- package/dist/components/TextFieldPassword.js.map +1 -1
- package/dist/components/TextFieldValidate.d.ts +5 -6
- package/dist/components/TextFieldValidate.js +6 -5
- package/dist/components/TextFieldValidate.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/style/TextFieldStyle.d.ts +1 -0
- package/dist/style/TextFieldStyle.js +4 -3
- package/dist/style/TextFieldStyle.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/validateEmail.js +1 -1
- package/dist/utils/validateEmail.js.map +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -31,7 +31,11 @@ A biblioteca inclui os seguintes componentes:
|
|
|
31
31
|
|
|
32
32
|
- **TextFieldValidate**
|
|
33
33
|
Componente de campo de texto com validação, baseado no TextField do Material UI.
|
|
34
|
-
Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada.
|
|
34
|
+
Permite personalização visual via `styled` e suporte a validações comuns (obrigatório, tamanho mínimo, regex) e validação customizada.
|
|
35
|
+
|
|
36
|
+
- **TextFieldNumberValidate**
|
|
37
|
+
Campo de texto numérico com suporte a validações comuns e customizadas, construído sobre o TextField do Material UI e
|
|
38
|
+
estilizado via Design System da Pipeline.
|
|
35
39
|
|
|
36
40
|
- **NotificationSnackbar**
|
|
37
41
|
Componente que exibe uma notificação no topo da tela utilizando o Snackbar e Alert do Material UI.
|
|
@@ -5,7 +5,7 @@ export interface SelectFieldOption {
|
|
|
5
5
|
value: string | number;
|
|
6
6
|
label: string;
|
|
7
7
|
}
|
|
8
|
-
interface SelectFieldProps extends
|
|
8
|
+
interface SelectFieldProps extends Omit<ColorProps, 'backgroundHover' | 'colorHover'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding' | 'width' | 'margin'> {
|
|
9
9
|
id?: string;
|
|
10
10
|
label?: string;
|
|
11
11
|
placeholder?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAqB,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACzH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAqB,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACzH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA4BrI,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IAClC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC3E,CAAC,CAAkC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAE1D,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAC;AAEJ,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,EAAE;IAC5C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,QAAQ;QACR,SAAS;QACT,YAAY;QACZ,cAAc;QACd,WAAW;QACX,aAAa;QACb,WAAW;KACZ,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAQC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IACxF,KAAK,EAAE,MAAM;IAEb,0BAA0B,EAAE;QAC1B,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,YAAY;QACtC,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,cAAc;QAC5C,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,WAAW;QAEnC,YAAY,EAAE;YACZ,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,aAAa;SAC1C;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,aAAa;SAC1C;QACD,wBAAwB,EAAE;YACxB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,cAAc;SAC3C;QAED,qBAAqB,EAAE;YACrB,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,SAAS;YAC7B,KAAK,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO;YAC3B,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB;KACF;IAED,uBAAuB,EAAE;QACvB,KAAK,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO;KAC5B;IACD,mCAAmC,EAAE;QACnC,KAAK,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO;KAC5B;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,GAA+B,CAAC,EAC/C,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EAEL,UAAU,EACV,kBAAkB,EAClB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EAEX,KAAK,GAAC,MAAM,EACZ,MAAM,EACN,OAAO,EACP,MAAM,GAAC,GAAG,EAEV,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,OAAO,EAEjB,UAAU,EACV,eAAe,EACf,OAAO,EACP,QAAQ,GAGT,EAAE,EAAE;;IAGH,MAAM,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/C,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,CAAC;IAEjE,MAAM,YAAY,GAAG,CAAC,KAAgC,EAAE,MAAuB,EAAE,EAAE;QACjF,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACjE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAC1C,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,MAAM,CAAC;IACrD,MAAM,GAAG,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,MAAM,CAAC;IAE5C,MAAM,UAAU,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,kBAAkB,mCAAI,SAAS,CAAC;IAChF,MAAM,WAAW,GAAG,MAAA,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,mCAAI,SAAS,CAAC;IACvE,MAAM,SAAS,GAAG,MAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,SAAS,CAAC;IAEnE,MAAM,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,GAAG,CAAC;IACtD,MAAM,EAAE,GAAG,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,mCAAI,MAAM,CAAC;IACnD,MAAM,EAAE,GAAG,MAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,mCAAI,MAAM,CAAC;IAEvD,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,GAAG,CAAC;IAC1C,MAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,QAAQ,CAAC;IAE/C,OAAO,CACL,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,YAErC,MAAC,iBAAiB,IAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,EAAE,EACd,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,EAAE,EACb,WAAW,EAAE,EAAE,EACf,SAAS,EAAE,GAAG,EACd,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,GAAG,aAGX,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,iBAAiB,YAC7D,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAC7C,KAAK,GACK,GACF,CACd,EAED,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EACjE,QAAQ,EAAE,YAAY,EACtB,YAAY,QACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE;wBACT,UAAU,EAAE;4BACV,EAAE,EAAE;gCACF,eAAe,EAAE,EAAE;6BACpB;yBACF;qBACF,EACD,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE;;wBACxB,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,QAAQ,KAAK,SAAS,CAAC,IAAI,WAAW,EAAE,CAAC;4BAC/D,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,eAAe,YAChD,WAAW,GACD,CACd,CAAC;wBACJ,CAAC;wBAED,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,CAAC;wBAErE,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,EAAE,GAAc,CAAC;oBAC1E,CAAC,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,QAAQ,IAAoB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,YACtD,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAC7C,MAAM,CAAC,KAAK,GACF,IAHA,MAAM,CAAC,KAAK,CAIhB,CACZ,CAAC,GACK,EAER,UAAU,IAAI,CACb,KAAC,cAAc,IAAC,KAAK,EAAE,CAAC,eAAe,YACrC,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,YACzD,UAAU,GACA,GACE,CAClB,IAEiB,GACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
+
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
+
interface TextFieldBirthDateWithAgeProps 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 | HTMLTextAreaElement>) => void;
|
|
20
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Callback disparado sempre que a idade puder ser calculada.
|
|
23
|
+
* Retorna `null` quando a data é inválida ou incompleta.
|
|
24
|
+
*/
|
|
25
|
+
onAgeChange?: (age: number | null) => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
|
|
29
|
+
* validações comuns (required, min/maxLength, pattern) + validação customizada,
|
|
30
|
+
* e cálculo automático de idade exibido no helperText.
|
|
31
|
+
*
|
|
32
|
+
* Regras:
|
|
33
|
+
* - O usuário digita apenas números.
|
|
34
|
+
* - Ao digitar, o valor é formatado automaticamente como `dd/mm/yyyy`.
|
|
35
|
+
* - Quando a data estiver completa e for válida, a idade é calculada e exibida.
|
|
36
|
+
* - Erros sempre têm prioridade no helperText.
|
|
37
|
+
*
|
|
38
|
+
* Tokens de estilo (ordem de prioridade):
|
|
39
|
+
* - props do componente
|
|
40
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
41
|
+
* - fallback interno (constantes `fb*`)
|
|
42
|
+
*
|
|
43
|
+
* @param {string} [id] Identificador do campo.
|
|
44
|
+
* @param {string} [label] Rótulo exibido acima do campo.
|
|
45
|
+
* @param {string} [placeholder='dd/mm/aaaa'] Placeholder do input.
|
|
46
|
+
* @param {string} [value] Valor do campo (controlado).
|
|
47
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
48
|
+
*
|
|
49
|
+
* @param {number} [minLength] Número mínimo de caracteres para validação (após máscara).
|
|
50
|
+
* @param {number} [maxLength] Número máximo de caracteres para validação (após máscara).
|
|
51
|
+
*
|
|
52
|
+
* @param {boolean} [required=false] Define se é obrigatório.
|
|
53
|
+
* @param {string} [requiredMessage='Campo obrigatório'] Mensagem de obrigatório.
|
|
54
|
+
* @param {RegExp | string} [pattern] Pattern para validação do valor formatado.
|
|
55
|
+
* @param {string} [patternMessage='Formato inválido'] Mensagem do pattern.
|
|
56
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento de exibir o erro.
|
|
57
|
+
* @param {(value: string) => string | null | undefined} [validate] Validação customizada do valor formatado.
|
|
58
|
+
*
|
|
59
|
+
* @param {(age: number | null) => void} [onAgeChange] Callback com a idade calculada (ou null se inválido/incompleto).
|
|
60
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] Callback disparado ao alterar (já com valor formatado).
|
|
61
|
+
* @param {(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```tsx
|
|
65
|
+
* const Example = () => {
|
|
66
|
+
* const [birthDate, setBirthDate] = React.useState('');
|
|
67
|
+
* const [age, setAge] = React.useState<number | null>(null);
|
|
68
|
+
*
|
|
69
|
+
* return (
|
|
70
|
+
* <TextFieldBirthDateWithAge
|
|
71
|
+
* label="Data de nascimento"
|
|
72
|
+
* value={birthDate}
|
|
73
|
+
* required
|
|
74
|
+
* showErrorOn="blur"
|
|
75
|
+
* onChange={(e) => setBirthDate(e.target.value)}
|
|
76
|
+
* onAgeChange={(nextAge) => setAge(nextAge)}
|
|
77
|
+
* validate={(v) => (v.length === 10 && !/^\d{2}\/\d{2}\/\d{4}$/.test(v) ? 'Data inválida' : null)}
|
|
78
|
+
* />
|
|
79
|
+
* );
|
|
80
|
+
* };
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
declare const TextFieldBirthDateWithAge: React.FC<TextFieldBirthDateWithAgeProps>;
|
|
84
|
+
export default TextFieldBirthDateWithAge;
|
|
@@ -0,0 +1,242 @@
|
|
|
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 formatBirthDate = (raw) => {
|
|
8
|
+
const digits = onlyNumbers(raw).slice(0, 8);
|
|
9
|
+
if (digits.length <= 2)
|
|
10
|
+
return digits;
|
|
11
|
+
if (digits.length <= 4)
|
|
12
|
+
return `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
13
|
+
return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
|
|
14
|
+
};
|
|
15
|
+
const isValidBirthDate = (formatted) => {
|
|
16
|
+
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(formatted))
|
|
17
|
+
return false;
|
|
18
|
+
const [ddStr, mmStr, yyyyStr] = formatted.split('/');
|
|
19
|
+
const dd = Number(ddStr);
|
|
20
|
+
const mm = Number(mmStr);
|
|
21
|
+
const yyyy = Number(yyyyStr);
|
|
22
|
+
if (!Number.isFinite(dd) || !Number.isFinite(mm) || !Number.isFinite(yyyy))
|
|
23
|
+
return false;
|
|
24
|
+
if (yyyy < 1900 || yyyy > 3000)
|
|
25
|
+
return false;
|
|
26
|
+
if (mm < 1 || mm > 12)
|
|
27
|
+
return false;
|
|
28
|
+
if (dd < 1 || dd > 31)
|
|
29
|
+
return false;
|
|
30
|
+
const date = new Date(yyyy, mm - 1, dd);
|
|
31
|
+
if (Number.isNaN(date.getTime()))
|
|
32
|
+
return false;
|
|
33
|
+
// garante que não "normalizou" (ex.: 31/02 vira 02/03)
|
|
34
|
+
return (date.getFullYear() === yyyy &&
|
|
35
|
+
date.getMonth() === mm - 1 &&
|
|
36
|
+
date.getDate() === dd);
|
|
37
|
+
};
|
|
38
|
+
const calculateAgeFromFormatted = (formatted) => {
|
|
39
|
+
if (!isValidBirthDate(formatted))
|
|
40
|
+
return null;
|
|
41
|
+
const [ddStr, mmStr, yyyyStr] = formatted.split('/');
|
|
42
|
+
const dd = Number(ddStr);
|
|
43
|
+
const mm = Number(mmStr);
|
|
44
|
+
const yyyy = Number(yyyyStr);
|
|
45
|
+
const birth = new Date(yyyy, mm - 1, dd);
|
|
46
|
+
const today = new Date();
|
|
47
|
+
// Não permitir data no futuro
|
|
48
|
+
const todayAtMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
49
|
+
if (birth.getTime() > todayAtMidnight.getTime())
|
|
50
|
+
return null;
|
|
51
|
+
let age = today.getFullYear() - birth.getFullYear();
|
|
52
|
+
const monthDiff = today.getMonth() - birth.getMonth();
|
|
53
|
+
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
|
54
|
+
age--;
|
|
55
|
+
}
|
|
56
|
+
return age >= 0 ? age : null;
|
|
57
|
+
};
|
|
58
|
+
const computeError = (value, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate, }) => {
|
|
59
|
+
const v = value !== null && value !== void 0 ? value : '';
|
|
60
|
+
if (required && v.trim().length === 0)
|
|
61
|
+
return requiredMessage || 'Campo obrigatório';
|
|
62
|
+
if (typeof minLength === 'number' && v.length < minLength) {
|
|
63
|
+
return `Mínimo de ${minLength} caracteres`;
|
|
64
|
+
}
|
|
65
|
+
if (typeof maxLength === 'number' && v.length > maxLength) {
|
|
66
|
+
return `Máximo de ${maxLength} caracteres`;
|
|
67
|
+
}
|
|
68
|
+
if (pattern) {
|
|
69
|
+
const re = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
|
|
70
|
+
if (!re.test(v))
|
|
71
|
+
return patternMessage || 'Formato inválido';
|
|
72
|
+
}
|
|
73
|
+
if (validate) {
|
|
74
|
+
const customMsg = validate(v);
|
|
75
|
+
if (typeof customMsg === 'string' && customMsg)
|
|
76
|
+
return customMsg;
|
|
77
|
+
}
|
|
78
|
+
return null;
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* Campo de data de nascimento com entrada somente numérica, máscara `dd/mm/yyyy`,
|
|
82
|
+
* validações comuns (required, min/maxLength, pattern) + validação customizada,
|
|
83
|
+
* e cálculo automático de idade exibido no helperText.
|
|
84
|
+
*
|
|
85
|
+
* Regras:
|
|
86
|
+
* - O usuário digita apenas números.
|
|
87
|
+
* - Ao digitar, o valor é formatado automaticamente como `dd/mm/yyyy`.
|
|
88
|
+
* - Quando a data estiver completa e for válida, a idade é calculada e exibida.
|
|
89
|
+
* - Erros sempre têm prioridade no helperText.
|
|
90
|
+
*
|
|
91
|
+
* Tokens de estilo (ordem de prioridade):
|
|
92
|
+
* - props do componente
|
|
93
|
+
* - `theme.pipelinesolucoes.forms.field`
|
|
94
|
+
* - fallback interno (constantes `fb*`)
|
|
95
|
+
*
|
|
96
|
+
* @param {string} [id] Identificador do campo.
|
|
97
|
+
* @param {string} [label] Rótulo exibido acima do campo.
|
|
98
|
+
* @param {string} [placeholder='dd/mm/aaaa'] Placeholder do input.
|
|
99
|
+
* @param {string} [value] Valor do campo (controlado).
|
|
100
|
+
* @param {boolean} [disabled=false] Define se o campo está desabilitado.
|
|
101
|
+
*
|
|
102
|
+
* @param {number} [minLength] Número mínimo de caracteres para validação (após máscara).
|
|
103
|
+
* @param {number} [maxLength] Número máximo de caracteres para validação (após máscara).
|
|
104
|
+
*
|
|
105
|
+
* @param {boolean} [required=false] Define se é obrigatório.
|
|
106
|
+
* @param {string} [requiredMessage='Campo obrigatório'] Mensagem de obrigatório.
|
|
107
|
+
* @param {RegExp | string} [pattern] Pattern para validação do valor formatado.
|
|
108
|
+
* @param {string} [patternMessage='Formato inválido'] Mensagem do pattern.
|
|
109
|
+
* @param {'change' | 'blur'} [showErrorOn='blur'] Momento de exibir o erro.
|
|
110
|
+
* @param {(value: string) => string | null | undefined} [validate] Validação customizada do valor formatado.
|
|
111
|
+
*
|
|
112
|
+
* @param {(age: number | null) => void} [onAgeChange] Callback com a idade calculada (ou null se inválido/incompleto).
|
|
113
|
+
* @param {(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] Callback disparado ao alterar (já com valor formatado).
|
|
114
|
+
* @param {(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onBlur] Callback disparado ao perder o foco.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* ```tsx
|
|
118
|
+
* const Example = () => {
|
|
119
|
+
* const [birthDate, setBirthDate] = React.useState('');
|
|
120
|
+
* const [age, setAge] = React.useState<number | null>(null);
|
|
121
|
+
*
|
|
122
|
+
* return (
|
|
123
|
+
* <TextFieldBirthDateWithAge
|
|
124
|
+
* label="Data de nascimento"
|
|
125
|
+
* value={birthDate}
|
|
126
|
+
* required
|
|
127
|
+
* showErrorOn="blur"
|
|
128
|
+
* onChange={(e) => setBirthDate(e.target.value)}
|
|
129
|
+
* onAgeChange={(nextAge) => setAge(nextAge)}
|
|
130
|
+
* validate={(v) => (v.length === 10 && !/^\d{2}\/\d{2}\/\d{4}$/.test(v) ? 'Data inválida' : null)}
|
|
131
|
+
* />
|
|
132
|
+
* );
|
|
133
|
+
* };
|
|
134
|
+
* ```
|
|
135
|
+
*/
|
|
136
|
+
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, }) => {
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
138
|
+
const [touched, setTouched] = React.useState(false);
|
|
139
|
+
const formattedValue = React.useMemo(() => formatBirthDate(value), [value]);
|
|
140
|
+
const computedAge = React.useMemo(() => {
|
|
141
|
+
// só calcula quando completo
|
|
142
|
+
if (formattedValue.length !== 10)
|
|
143
|
+
return null;
|
|
144
|
+
return calculateAgeFromFormatted(formattedValue);
|
|
145
|
+
}, [formattedValue]);
|
|
146
|
+
React.useEffect(() => {
|
|
147
|
+
onAgeChange === null || onAgeChange === void 0 ? void 0 : onAgeChange(computedAge);
|
|
148
|
+
}, [computedAge, onAgeChange]);
|
|
149
|
+
const errorMessage = React.useMemo(() => {
|
|
150
|
+
const v = formattedValue;
|
|
151
|
+
const baseError = showErrorOn === 'change'
|
|
152
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
153
|
+
: showErrorOn === 'blur' && touched
|
|
154
|
+
? computeError(v, { required, requiredMessage, minLength, maxLength, pattern, patternMessage, validate })
|
|
155
|
+
: null;
|
|
156
|
+
if (baseError)
|
|
157
|
+
return baseError;
|
|
158
|
+
// Validação adicional: data completa mas inválida (ex.: 31/02/2020 ou data futura)
|
|
159
|
+
if (v.length === 10 && !isValidBirthDate(v))
|
|
160
|
+
return 'Data inválida';
|
|
161
|
+
if (v.length === 10 && isValidBirthDate(v) && computedAge === null)
|
|
162
|
+
return 'Data inválida';
|
|
163
|
+
return null;
|
|
164
|
+
}, [
|
|
165
|
+
formattedValue,
|
|
166
|
+
required,
|
|
167
|
+
requiredMessage,
|
|
168
|
+
minLength,
|
|
169
|
+
maxLength,
|
|
170
|
+
pattern,
|
|
171
|
+
patternMessage,
|
|
172
|
+
validate,
|
|
173
|
+
showErrorOn,
|
|
174
|
+
touched,
|
|
175
|
+
computedAge,
|
|
176
|
+
]);
|
|
177
|
+
const handleBlur = (event) => {
|
|
178
|
+
if (!touched)
|
|
179
|
+
setTouched(true);
|
|
180
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
181
|
+
};
|
|
182
|
+
const handleChange = (event) => {
|
|
183
|
+
if (!onChange)
|
|
184
|
+
return;
|
|
185
|
+
const next = formatBirthDate(event.target.value);
|
|
186
|
+
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 }) });
|
|
187
|
+
onChange(syntheticEvent);
|
|
188
|
+
};
|
|
189
|
+
const handleKeyDown = (event) => {
|
|
190
|
+
const allowed = [
|
|
191
|
+
'Backspace',
|
|
192
|
+
'Delete',
|
|
193
|
+
'Tab',
|
|
194
|
+
'Enter',
|
|
195
|
+
'Escape',
|
|
196
|
+
'ArrowLeft',
|
|
197
|
+
'ArrowRight',
|
|
198
|
+
'ArrowUp',
|
|
199
|
+
'ArrowDown',
|
|
200
|
+
'Home',
|
|
201
|
+
'End',
|
|
202
|
+
];
|
|
203
|
+
if (allowed.includes(event.key))
|
|
204
|
+
return;
|
|
205
|
+
if (event.ctrlKey || event.metaKey)
|
|
206
|
+
return;
|
|
207
|
+
if (!/^\d$/.test(event.key)) {
|
|
208
|
+
event.preventDefault();
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
const theme = useTheme();
|
|
212
|
+
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
213
|
+
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
214
|
+
const bgFocused = (_d = backgroundFocused !== null && backgroundFocused !== void 0 ? backgroundFocused : field === null || field === void 0 ? void 0 : field.backgroundFocused) !== null && _d !== void 0 ? _d : bg;
|
|
215
|
+
const bgDisabled = (_e = backgroundDisabled !== null && backgroundDisabled !== void 0 ? backgroundDisabled : field === null || field === void 0 ? void 0 : field.backgroundDisabled) !== null && _e !== void 0 ? _e : fbbackgroundDisabled;
|
|
216
|
+
const txt = (_f = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _f !== void 0 ? _f : fbcolor;
|
|
217
|
+
const txtDisabled = (_g = colorDisabled !== null && colorDisabled !== void 0 ? colorDisabled : field === null || field === void 0 ? void 0 : field.colorDisabled) !== null && _g !== void 0 ? _g : fbcolorDisabled;
|
|
218
|
+
const br = (_h = borderRadius !== null && borderRadius !== void 0 ? borderRadius : field === null || field === void 0 ? void 0 : field.borderRadius) !== null && _h !== void 0 ? _h : fbborderRadius;
|
|
219
|
+
const sh = (_j = boxShadow !== null && boxShadow !== void 0 ? boxShadow : field === null || field === void 0 ? void 0 : field.boxShadow) !== null && _j !== void 0 ? _j : fbboxShadow;
|
|
220
|
+
const bd = (_k = borderColor !== null && borderColor !== void 0 ? borderColor : field === null || field === void 0 ? void 0 : field.borderColor) !== null && _k !== void 0 ? _k : fbborderColor;
|
|
221
|
+
const bdFocused = (_l = colorFocused !== null && colorFocused !== void 0 ? colorFocused : field === null || field === void 0 ? void 0 : field.colorFocused) !== null && _l !== void 0 ? _l : fbcolorFocused;
|
|
222
|
+
const pad = (_m = padding !== null && padding !== void 0 ? padding : field === null || field === void 0 ? void 0 : field.padding) !== null && _m !== void 0 ? _m : fbpadding;
|
|
223
|
+
const hg = (_o = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _o !== void 0 ? _o : fbheigth;
|
|
224
|
+
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;
|
|
225
|
+
const helperText = errorMessage
|
|
226
|
+
? errorMessage
|
|
227
|
+
: computedAge !== null
|
|
228
|
+
? `Idade: ${computedAge} anos`
|
|
229
|
+
: ' ';
|
|
230
|
+
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: {
|
|
231
|
+
input: {
|
|
232
|
+
inputProps: {
|
|
233
|
+
inputMode: 'numeric',
|
|
234
|
+
pattern: '[0-9]*',
|
|
235
|
+
maxLength: 10,
|
|
236
|
+
},
|
|
237
|
+
},
|
|
238
|
+
} }));
|
|
239
|
+
};
|
|
240
|
+
TextFieldBirthDateWithAge.displayName = 'TextFieldBirthDateWithAge';
|
|
241
|
+
export default TextFieldBirthDateWithAge;
|
|
242
|
+
//# 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,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;
|