karsten-design-system 1.0.77 → 1.0.78
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/stories/components/input.js +30 -2
- package/dist/stories/components/input.js.map +1 -1
- package/dist/types/stories/components/input.d.ts +2 -1
- package/dist/types/utils/masks/index.d.ts +8 -0
- package/dist/utils/masks/index.js +88 -0
- package/dist/utils/masks/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -4,16 +4,44 @@ import { IconField } from 'primereact/iconfield';
|
|
|
4
4
|
import { InputIcon } from 'primereact/inputicon';
|
|
5
5
|
import { InputText } from 'primereact/inputtext';
|
|
6
6
|
import { useState, useId } from 'react';
|
|
7
|
+
import { maskMoneyBRL, maskCEP, maskNumberWithDecimal, maskPhone, maskCellphone, maskOnlyNumbers, maskCNPJ, maskCPF } from '../../utils/masks/index.js';
|
|
7
8
|
|
|
8
9
|
const variants = {
|
|
9
10
|
green: 'text-green',
|
|
10
11
|
gray: 'text-gray',
|
|
11
12
|
};
|
|
12
|
-
function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, ...props }) {
|
|
13
|
+
function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, mask, ...props }) {
|
|
13
14
|
const [isOnFocus, setIsOnFocus] = useState(false);
|
|
14
15
|
const inputId = useId();
|
|
15
16
|
const handleChange = (e) => {
|
|
16
|
-
|
|
17
|
+
let value = e.target.value;
|
|
18
|
+
switch (mask) {
|
|
19
|
+
case 'cpf':
|
|
20
|
+
value = maskCPF(value);
|
|
21
|
+
break;
|
|
22
|
+
case 'cnpj':
|
|
23
|
+
value = maskCNPJ(value);
|
|
24
|
+
break;
|
|
25
|
+
case 'numbers':
|
|
26
|
+
value = maskOnlyNumbers(value);
|
|
27
|
+
break;
|
|
28
|
+
case 'cellphone':
|
|
29
|
+
value = maskCellphone(value);
|
|
30
|
+
break;
|
|
31
|
+
case 'phone':
|
|
32
|
+
value = maskPhone(value);
|
|
33
|
+
break;
|
|
34
|
+
case 'decimal':
|
|
35
|
+
value = maskNumberWithDecimal(value);
|
|
36
|
+
break;
|
|
37
|
+
case 'cep':
|
|
38
|
+
value = maskCEP(value);
|
|
39
|
+
break;
|
|
40
|
+
case 'currency':
|
|
41
|
+
value = maskMoneyBRL(value);
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
onChange(value);
|
|
17
45
|
};
|
|
18
46
|
const hasError = (props.value && error && !disabled) ||
|
|
19
47
|
(!!error && !disabled && props.value?.length === 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -8,10 +8,11 @@ export type InputProps = {
|
|
|
8
8
|
icon?: string;
|
|
9
9
|
iconColor?: keyof typeof variants;
|
|
10
10
|
label?: string;
|
|
11
|
+
mask?: 'cpf' | 'cnpj' | 'numbers' | 'cellphone' | 'cep' | 'decimal' | 'phone' | 'currency';
|
|
11
12
|
} & Omit<InputTextProps, 'onChange'>;
|
|
12
13
|
declare const variants: {
|
|
13
14
|
green: string;
|
|
14
15
|
gray: string;
|
|
15
16
|
};
|
|
16
|
-
export declare function Input({ onChange, placeholder, disabled, error, icon, onClickIcon, iconColor, label, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function Input({ onChange, placeholder, disabled, error, icon, onClickIcon, iconColor, label, mask, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
17
18
|
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const maskCPF: (value: string) => string;
|
|
2
|
+
export declare const maskCNPJ: (value: string) => string;
|
|
3
|
+
export declare const maskOnlyNumbers: (value: string) => string;
|
|
4
|
+
export declare const maskNumberWithDecimal: (value: string) => string;
|
|
5
|
+
export declare const maskCellphone: (value: string) => string;
|
|
6
|
+
export declare const maskPhone: (value: string) => string;
|
|
7
|
+
export declare const maskCEP: (value: string) => string;
|
|
8
|
+
export declare const maskMoneyBRL: (value: string) => string;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
const maskCPF = (value) => {
|
|
2
|
+
value = value.replace(/\D/g, '');
|
|
3
|
+
value = value.slice(0, 11);
|
|
4
|
+
if (value.length <= 3) {
|
|
5
|
+
return value;
|
|
6
|
+
}
|
|
7
|
+
if (value.length <= 6) {
|
|
8
|
+
return value.replace(/(\d{3})(\d{1,})/, '$1.$2');
|
|
9
|
+
}
|
|
10
|
+
if (value.length <= 9) {
|
|
11
|
+
return value.replace(/(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3');
|
|
12
|
+
}
|
|
13
|
+
return value.replace(/(\d{3})(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3-$4');
|
|
14
|
+
};
|
|
15
|
+
const maskCNPJ = (value) => {
|
|
16
|
+
value = value.replace(/\D/g, '');
|
|
17
|
+
value = value.slice(0, 14);
|
|
18
|
+
if (value.length <= 2) {
|
|
19
|
+
return value;
|
|
20
|
+
}
|
|
21
|
+
if (value.length <= 5) {
|
|
22
|
+
return value.replace(/(\d{2})(\d{1,})/, '$1.$2');
|
|
23
|
+
}
|
|
24
|
+
if (value.length <= 8) {
|
|
25
|
+
return value.replace(/(\d{2})(\d{3})(\d{1,})/, '$1.$2.$3');
|
|
26
|
+
}
|
|
27
|
+
if (value.length <= 12) {
|
|
28
|
+
return value.replace(/(\d{2})(\d{3})(\d{3})(\d{1,})/, '$1.$2.$3/$4');
|
|
29
|
+
}
|
|
30
|
+
return value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{1,})/, '$1.$2.$3/$4-$5');
|
|
31
|
+
};
|
|
32
|
+
// export const maskNumber = (value: string) => {
|
|
33
|
+
// value = value.replace(/\D/g, '');
|
|
34
|
+
// value = value.slice(0, 12);
|
|
35
|
+
// return value.replace(/(\d)(\d{2})$/, '$1,$2');
|
|
36
|
+
// };
|
|
37
|
+
const maskOnlyNumbers = (value) => {
|
|
38
|
+
value = value.replace(/\D/g, '');
|
|
39
|
+
value = value.slice(0, 15);
|
|
40
|
+
return value;
|
|
41
|
+
};
|
|
42
|
+
const maskNumberWithDecimal = (value) => {
|
|
43
|
+
const regex = /^[0-9]+([.,][0-9]+)?$/;
|
|
44
|
+
value = value.slice(0, 20);
|
|
45
|
+
if (!regex.test(value)) {
|
|
46
|
+
return value.replace(/[^0-9.,]/g, '').replace(/([.,]).*\1/g, '$1');
|
|
47
|
+
}
|
|
48
|
+
return value;
|
|
49
|
+
};
|
|
50
|
+
const maskCellphone = (value) => {
|
|
51
|
+
value = value.replace(/\D/g, '');
|
|
52
|
+
value = value.slice(0, 11);
|
|
53
|
+
if (value.length <= 2) {
|
|
54
|
+
return value.replace(/(\d{2})/, '($1');
|
|
55
|
+
}
|
|
56
|
+
if (value.length <= 6) {
|
|
57
|
+
return value.replace(/(\d{2})(\d{4})/, '($1) $2');
|
|
58
|
+
}
|
|
59
|
+
return value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
|
|
60
|
+
};
|
|
61
|
+
const maskPhone = (value) => {
|
|
62
|
+
value = value.replace(/\D/g, '');
|
|
63
|
+
value = value.slice(0, 10);
|
|
64
|
+
if (value.length <= 2) {
|
|
65
|
+
return value.replace(/(\d{2})/, '($1');
|
|
66
|
+
}
|
|
67
|
+
if (value.length <= 6) {
|
|
68
|
+
return value.replace(/(\d{2})(\d{4})/, '($1) $2');
|
|
69
|
+
}
|
|
70
|
+
return value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
|
|
71
|
+
};
|
|
72
|
+
const maskCEP = (value) => {
|
|
73
|
+
value = value.replace(/\D/g, '');
|
|
74
|
+
value = value.slice(0, 8);
|
|
75
|
+
return value.replace(/(\d{5})(\d{1,})/, '$1-$2');
|
|
76
|
+
};
|
|
77
|
+
const maskMoneyBRL = (value) => {
|
|
78
|
+
value = value.replace(/\D/g, '');
|
|
79
|
+
value = value.slice(0, 13);
|
|
80
|
+
const numericValue = parseFloat(value) / 100;
|
|
81
|
+
return numericValue.toLocaleString('pt-BR', {
|
|
82
|
+
style: 'currency',
|
|
83
|
+
currency: 'BRL',
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export { maskCEP, maskCNPJ, maskCPF, maskCellphone, maskMoneyBRL, maskNumberWithDecimal, maskOnlyNumbers, maskPhone };
|
|
88
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/utils/masks/index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAa,MAAA,OAAO,GAAG,CAAC,KAAa,KAAI;IACvC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1B,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AACrB,QAAA,OAAO,KAAK;;AAEd,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;;AAElD,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,wBAAwB,EAAE,UAAU,CAAC;;IAE5D,OAAO,KAAK,CAAC,OAAO,CAAC,+BAA+B,EAAE,aAAa,CAAC;AACtE;AAEa,MAAA,QAAQ,GAAG,CAAC,KAAa,KAAI;IACxC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1B,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;AACrB,QAAA,OAAO,KAAK;;AAEd,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;;AAElD,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,wBAAwB,EAAE,UAAU,CAAC;;AAE5D,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,CAAC,+BAA+B,EAAE,aAAa,CAAC;;IAEtE,OAAO,KAAK,CAAC,OAAO,CAAC,sCAAsC,EAAE,gBAAgB,CAAC;AAChF;AAEA;AACA;AAEA;AAEA;AACA;AAEa,MAAA,eAAe,GAAG,CAAC,KAAa,KAAI;IAC/C,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1B,IAAA,OAAO,KAAK;AACd;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;IACrD,MAAM,KAAK,GAAG,uBAAuB;IAErC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;IAE1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACtB,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC;;AAEpE,IAAA,OAAO,KAAK;AACd;AAEa,MAAA,aAAa,GAAG,CAAC,KAAa,KAAI;IAC7C,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1B,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC;;AAExC,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC;;IAEnD,OAAO,KAAK,CAAC,OAAO,CAAC,uBAAuB,EAAE,YAAY,CAAC;AAC7D;AAEa,MAAA,SAAS,GAAG,CAAC,KAAa,KAAI;IACzC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1B,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC;;AAExC,IAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC;;IAEnD,OAAO,KAAK,CAAC,OAAO,CAAC,uBAAuB,EAAE,YAAY,CAAC;AAC7D;AAEa,MAAA,OAAO,GAAG,CAAC,KAAa,KAAI;IACvC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAEzB,OAAO,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;AAClD;AAEa,MAAA,YAAY,GAAG,CAAC,KAAa,KAAI;IAC5C,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAEhC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;IAE1B,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG;AAE5C,IAAA,OAAO,YAAY,CAAC,cAAc,CAAC,OAAO,EAAE;AAC1C,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA,CAAC;AACJ;;;;"}
|