@tecsinapse/react-core 1.13.0 → 1.14.3

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.
Files changed (46) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/components/atoms/Input/InputElement/InputElement.d.ts +5 -3
  3. package/dist/components/atoms/Input/InputElement/InputElement.js +48 -7
  4. package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
  5. package/dist/components/atoms/Input/hooks/useNumberMask.d.ts +8 -0
  6. package/dist/components/atoms/Input/hooks/useNumberMask.js +98 -0
  7. package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -0
  8. package/dist/components/atoms/Input/hooks/useStringMask.d.ts +8 -0
  9. package/dist/components/atoms/Input/hooks/useStringMask.js +109 -0
  10. package/dist/components/atoms/Input/hooks/useStringMask.js.map +1 -0
  11. package/dist/components/atoms/Input/index.d.ts +2 -3
  12. package/dist/components/atoms/Input/index.js +12 -26
  13. package/dist/components/atoms/Input/index.js.map +1 -1
  14. package/dist/index.d.ts +2 -2
  15. package/dist/index.js +8 -29
  16. package/dist/index.js.map +1 -1
  17. package/dist/utils/formatWithMask.d.ts +3 -0
  18. package/dist/utils/formatWithMask.js +31 -0
  19. package/dist/utils/formatWithMask.js.map +1 -0
  20. package/dist/utils/index.d.ts +2 -0
  21. package/dist/utils/index.js +28 -0
  22. package/dist/utils/index.js.map +1 -1
  23. package/dist/utils/masks.d.ts +11 -0
  24. package/dist/utils/masks.js +19 -0
  25. package/dist/utils/masks.js.map +1 -0
  26. package/package.json +2 -2
  27. package/src/components/atoms/Input/InputElement/InputElement.tsx +75 -10
  28. package/src/components/atoms/Input/hooks/useNumberMask.ts +99 -0
  29. package/src/components/atoms/Input/hooks/useStringMask.ts +128 -0
  30. package/src/components/atoms/Input/index.ts +2 -3
  31. package/src/index.ts +3 -6
  32. package/src/utils/formatWithMask.ts +25 -0
  33. package/src/utils/index.ts +4 -2
  34. package/src/utils/masks.ts +15 -0
  35. package/dist/components/atoms/Input/hooks/useCurrencyMask.d.ts +0 -3
  36. package/dist/components/atoms/Input/hooks/useCurrencyMask.js +0 -69
  37. package/dist/components/atoms/Input/hooks/useCurrencyMask.js.map +0 -1
  38. package/dist/components/atoms/Input/hooks/useMask.d.ts +0 -9
  39. package/dist/components/atoms/Input/hooks/useMask.js +0 -61
  40. package/dist/components/atoms/Input/hooks/useMask.js.map +0 -1
  41. package/dist/components/atoms/Input/masks/index.d.ts +0 -10
  42. package/dist/components/atoms/Input/masks/index.js +0 -18
  43. package/dist/components/atoms/Input/masks/index.js.map +0 -1
  44. package/src/components/atoms/Input/hooks/useCurrencyMask.ts +0 -74
  45. package/src/components/atoms/Input/hooks/useMask.ts +0 -92
  46. package/src/components/atoms/Input/masks/index.ts +0 -12
@@ -1,69 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useCurrencyMask = void 0;
7
-
8
- var _currency = _interopRequireDefault(require("currency.js"));
9
-
10
- var _react = require("react");
11
-
12
- var _utils = require("../../../../utils");
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- const DEFAULT_OPTIONS = {
17
- symbol: 'R$ ',
18
- separator: '.',
19
- decimal: ',',
20
- precision: 2
21
- };
22
-
23
- const useCurrencyMask = (options, defaultValue) => {
24
- const getRegex = (0, _react.useCallback)(precision => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g'), [options]);
25
- const applyMask = (0, _react.useCallback)((value = '') => {
26
- const mergedOptions = { ...DEFAULT_OPTIONS,
27
- ...options
28
- };
29
- const {
30
- precision = -1
31
- } = mergedOptions;
32
- const onlyNumbers = String((0, _utils.extractNumbersFromString)(value));
33
- const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
34
- let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
35
-
36
- if (internalNumber > Number.MAX_SAFE_INTEGER) {
37
- internalNumber = Number.MAX_SAFE_INTEGER;
38
- }
39
-
40
- if (internalNumber < Number.MIN_SAFE_INTEGER) {
41
- internalNumber = Number.MIN_SAFE_INTEGER;
42
- }
43
-
44
- return {
45
- raw: internalNumber,
46
- formatted: (0, _currency.default)(internalNumber).format(mergedOptions)
47
- };
48
- }, [options, getRegex]);
49
- const [value, setValue] = (0, _react.useState)({
50
- converter: applyMask,
51
- maskValue: applyMask(defaultValue)
52
- });
53
- const handleChangeValue = (0, _react.useCallback)(formattedValue => {
54
- const {
55
- raw,
56
- formatted
57
- } = applyMask(formattedValue);
58
- setValue(oldValue => ({ ...oldValue,
59
- maskValue: {
60
- raw,
61
- formatted
62
- }
63
- }));
64
- }, [applyMask, setValue]);
65
- return [value, handleChangeValue];
66
- };
67
-
68
- exports.useCurrencyMask = useCurrencyMask;
69
- //# sourceMappingURL=useCurrencyMask.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useCurrencyMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","useCurrencyMask","options","defaultValue","getRegex","RegExp","applyMask","value","mergedOptions","onlyNumbers","String","padZeros","padStart","internalNumber","Number","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","raw","formatted","format","setValue","converter","maskValue","handleChangeValue","formattedValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAKA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAaO,MAAMC,eAAe,GAAG,CAC7BC,OAD6B,EAE7BC,YAF6B,KAGQ;AACrC,QAAMC,QAAQ,GAAG,wBACdJ,SAAD,IAAuB,IAAIK,MAAJ,CAAY,cAAaL,SAAU,YAAnC,EAAgD,GAAhD,CADR,EAEf,CAACE,OAAD,CAFe,CAAjB;AAKA,QAAMI,SAAS,GAAG,wBAChB,CAACC,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMC,aAAa,GAAG,EAAE,GAAGZ,eAAL;AAAsB,SAAGM;AAAzB,KAAtB;AACA,UAAM;AAAEF,MAAAA,SAAS,GAAG,CAAC;AAAf,QAAqBQ,aAA3B;AACA,UAAMC,WAAW,GAAGC,MAAM,CAAC,qCAAyBH,KAAzB,CAAD,CAA1B;AACA,UAAMI,QAAQ,GAAGD,MAAM,CAACD,WAAD,CAAN,CAAoBG,QAApB,CAA6BZ,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACA,QAAIa,cAAc,GAAGC,MAAM,CAACH,QAAQ,CAACI,OAAT,CAAiBX,QAAQ,CAACJ,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAA3B;;AAEA,QAAIa,cAAc,GAAGC,MAAM,CAACE,gBAA5B,EAA8C;AAC5CH,MAAAA,cAAc,GAAGC,MAAM,CAACE,gBAAxB;AACD;;AAED,QAAIH,cAAc,GAAGC,MAAM,CAACG,gBAA5B,EAA8C;AAC5CJ,MAAAA,cAAc,GAAGC,MAAM,CAACG,gBAAxB;AACD;;AAED,WAAO;AACLC,MAAAA,GAAG,EAAEL,cADA;AAELM,MAAAA,SAAS,EAAE,uBAASN,cAAT,EAAyBO,MAAzB,CAAgCZ,aAAhC;AAFN,KAAP;AAID,GApBe,EAqBhB,CAACN,OAAD,EAAUE,QAAV,CArBgB,CAAlB;AAwBA,QAAM,CAACG,KAAD,EAAQc,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEhB,SAD6B;AAExCiB,IAAAA,SAAS,EAAEjB,SAAS,CAACH,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMqB,iBAAiB,GAAG,wBACvBC,cAAD,IAA4B;AAC1B,UAAM;AAAEP,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBb,SAAS,CAACmB,cAAD,CAApC;AACAJ,IAAAA,QAAQ,CAACK,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBH,MAAAA,SAAS,EAAE;AACTL,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACb,SAAD,EAAYe,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACd,KAAD,EAAQiB,iBAAR,CAAP;AACD,CArDM","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils';\nimport { IMask, IMaskValue } from './useMask';\n\ntype CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n symbol: 'R$ ',\n separator: '.',\n decimal: ',',\n precision: 2,\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useCurrencyMask = (\n options?: CurrencyOptions,\n defaultValue?: string\n): [IMask, (value: string) => void] => {\n const getRegex = useCallback(\n (precision: number) => new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g'),\n [options]\n );\n\n const applyMask = useCallback(\n (value = ''): IMaskValue => {\n const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n const { precision = -1 } = mergedOptions;\n const onlyNumbers = String(extractNumbersFromString(value));\n const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n\n if (internalNumber > Number.MAX_SAFE_INTEGER) {\n internalNumber = Number.MAX_SAFE_INTEGER;\n }\n\n if (internalNumber < Number.MIN_SAFE_INTEGER) {\n internalNumber = Number.MIN_SAFE_INTEGER;\n }\n\n return {\n raw: internalNumber,\n formatted: currency(internalNumber).format(mergedOptions),\n };\n },\n [options, getRegex]\n );\n\n const [value, setValue] = useState<IMask>({\n converter: applyMask,\n maskValue: applyMask(defaultValue),\n });\n\n const handleChangeValue = useCallback(\n (formattedValue: string) => {\n const { raw, formatted } = applyMask(formattedValue);\n setValue(oldValue => ({\n ...oldValue,\n maskValue: {\n raw,\n formatted,\n },\n }));\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useCurrencyMask.js"}
@@ -1,9 +0,0 @@
1
- export interface IMaskValue {
2
- formatted?: string;
3
- raw?: any;
4
- }
5
- export interface IMask {
6
- converter?: (raw?: string) => IMaskValue;
7
- maskValue?: IMaskValue;
8
- }
9
- export declare const useMask: (mask: string | ((raw: any) => string), defaultValue?: string | undefined) => [IMask, (text: string) => void];
@@ -1,61 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useMask = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var _utils = require("../../../../utils");
11
-
12
- const mergeMask = (value = '', mask) => {
13
- const chars = '' + value;
14
- let formattedValue = '';
15
-
16
- for (let iMask = 0, iChars = 0; iMask < mask.length && iChars < chars.length; iMask++) {
17
- formattedValue += mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);
18
- }
19
-
20
- return formattedValue;
21
- };
22
-
23
- const getMask = (value = '', mask) => {
24
- if (typeof mask === 'function') {
25
- return mask(value);
26
- }
27
-
28
- return mask;
29
- };
30
-
31
- const useMask = (mask, defaultValue) => {
32
- const applyMask = (0, _react.useCallback)((value = '') => {
33
- const onlyNumbers = value ? (0, _utils.extractDigitsFromString)(value) : value;
34
- const selectedMask = getMask(onlyNumbers, mask);
35
- const formattedValue = mergeMask(onlyNumbers, selectedMask);
36
- return {
37
- raw: onlyNumbers,
38
- formatted: formattedValue
39
- };
40
- }, [mask]);
41
- const [value, setValue] = (0, _react.useState)({
42
- converter: applyMask,
43
- maskValue: applyMask(defaultValue)
44
- });
45
- const handleChangeValue = (0, _react.useCallback)(value => {
46
- const {
47
- raw,
48
- formatted
49
- } = applyMask(value);
50
- setValue(oldValue => ({ ...oldValue,
51
- maskValue: {
52
- raw,
53
- formatted
54
- }
55
- }));
56
- }, [applyMask, setValue]);
57
- return [value, handleChangeValue];
58
- };
59
-
60
- exports.useMask = useMask;
61
- //# sourceMappingURL=useMask.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GAAG,oCAAwBA,KAAxB,CAAH,GAAoCA,KAA7D;AACA,UAAMa,YAAY,GAAGL,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcC,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEF,WADA;AAELG,MAAAA,SAAS,EAAEZ;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQgB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEN,SAD6B;AAExCO,IAAAA,SAAS,EAAEP,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMS,iBAAiB,GAAG,wBACvBnB,KAAD,IAAmB;AACjB,UAAM;AAAEc,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBJ,SAAS,CAACX,KAAD,CAApC;AACAgB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACJ,SAAD,EAAYK,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAAChB,KAAD,EAAQmB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractDigitsFromString } from '../../../../utils';\n\nexport interface IMaskValue {\n formatted?: string;\n raw?: any;\n}\n\nexport interface IMask {\n converter?: (raw?: string) => IMaskValue;\n maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n const chars = '' + value;\n let formattedValue = '';\n\n for (\n let iMask = 0, iChars = 0;\n iMask < mask.length && iChars < chars.length;\n iMask++\n ) {\n formattedValue +=\n mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n }\n return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n if (typeof mask === 'function') {\n return mask(value);\n }\n return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n mask: ((raw: any) => string) | string,\n defaultValue?: string\n): [IMask, (text: string) => void] => {\n const applyMask = useCallback(\n (value = ''): IMaskValue => {\n const onlyNumbers = value ? extractDigitsFromString(value) : value;\n const selectedMask = getMask(onlyNumbers, mask);\n const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n return {\n raw: onlyNumbers,\n formatted: formattedValue,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<IMask>({\n converter: applyMask,\n maskValue: applyMask(defaultValue),\n });\n\n const handleChangeValue = useCallback(\n (value: string) => {\n const { raw, formatted } = applyMask(value);\n setValue(oldValue => ({\n ...oldValue,\n maskValue: {\n raw,\n formatted,\n },\n }));\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}
@@ -1,10 +0,0 @@
1
- export declare const Masks: {
2
- CPF: string;
3
- CNPJ: string;
4
- DATE: string;
5
- MONTH_YEAR: string;
6
- CEP: string;
7
- PHONE: string;
8
- PHONE_EXTENDED: string;
9
- COMBINED_PHONE: (value: string) => string;
10
- };
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.Masks = void 0;
7
- const Masks = {
8
- CPF: '999.999.999-99',
9
- CNPJ: '99.999.999/9999-99',
10
- DATE: '99/99/9999',
11
- MONTH_YEAR: '99/9999',
12
- CEP: '99999-999',
13
- PHONE: '(99) 9999-9999',
14
- PHONE_EXTENDED: '(99) 99999-9999',
15
- COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
16
- };
17
- exports.Masks = Masks;
18
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AATzB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, then you can use it on input components everywhere.\nexport const Masks = {\n CPF: '999.999.999-99',\n CNPJ: '99.999.999/9999-99',\n DATE: '99/99/9999',\n MONTH_YEAR: '99/9999',\n CEP: '99999-999',\n PHONE: '(99) 9999-9999',\n PHONE_EXTENDED: '(99) 99999-9999',\n COMBINED_PHONE: (value: string) =>\n value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}
@@ -1,74 +0,0 @@
1
- import currency from 'currency.js';
2
- import { useCallback, useState } from 'react';
3
- import { extractNumbersFromString } from '../../../../utils';
4
- import { IMask, IMaskValue } from './useMask';
5
-
6
- type CurrencyOptions = currency.Options;
7
-
8
- const DEFAULT_OPTIONS: CurrencyOptions = {
9
- symbol: 'R$ ',
10
- separator: '.',
11
- decimal: ',',
12
- precision: 2,
13
- };
14
-
15
- /**
16
- * TODO:
17
- * @param options
18
- * @param defaultValue
19
- * @returns
20
- */
21
- export const useCurrencyMask = (
22
- options?: CurrencyOptions,
23
- defaultValue?: string
24
- ): [IMask, (value: string) => void] => {
25
- const getRegex = useCallback(
26
- (precision: number) => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g'),
27
- [options]
28
- );
29
-
30
- const applyMask = useCallback(
31
- (value = ''): IMaskValue => {
32
- const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
33
- const { precision = -1 } = mergedOptions;
34
- const onlyNumbers = String(extractNumbersFromString(value));
35
- const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
36
- let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
37
-
38
- if (internalNumber > Number.MAX_SAFE_INTEGER) {
39
- internalNumber = Number.MAX_SAFE_INTEGER;
40
- }
41
-
42
- if (internalNumber < Number.MIN_SAFE_INTEGER) {
43
- internalNumber = Number.MIN_SAFE_INTEGER;
44
- }
45
-
46
- return {
47
- raw: internalNumber,
48
- formatted: currency(internalNumber).format(mergedOptions),
49
- };
50
- },
51
- [options, getRegex]
52
- );
53
-
54
- const [value, setValue] = useState<IMask>({
55
- converter: applyMask,
56
- maskValue: applyMask(defaultValue),
57
- });
58
-
59
- const handleChangeValue = useCallback(
60
- (formattedValue: string) => {
61
- const { raw, formatted } = applyMask(formattedValue);
62
- setValue(oldValue => ({
63
- ...oldValue,
64
- maskValue: {
65
- raw,
66
- formatted,
67
- },
68
- }));
69
- },
70
- [applyMask, setValue]
71
- );
72
-
73
- return [value, handleChangeValue];
74
- };
@@ -1,92 +0,0 @@
1
- import { useCallback, useState } from 'react';
2
- import { extractDigitsFromString } from '../../../../utils';
3
-
4
- export interface IMaskValue {
5
- formatted?: string;
6
- raw?: any;
7
- }
8
-
9
- export interface IMask {
10
- converter?: (raw?: string) => IMaskValue;
11
- maskValue?: IMaskValue;
12
- }
13
-
14
- /**
15
- * TODO:
16
- * @param value
17
- * @param mask
18
- * @returns
19
- */
20
- const mergeMask = (value = '', mask: string) => {
21
- const chars = '' + value;
22
- let formattedValue = '';
23
-
24
- for (
25
- let iMask = 0, iChars = 0;
26
- iMask < mask.length && iChars < chars.length;
27
- iMask++
28
- ) {
29
- formattedValue +=
30
- mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);
31
- }
32
- return formattedValue;
33
- };
34
-
35
- /**
36
- * TODO:
37
- * @param value
38
- * @param mask
39
- * @returns
40
- */
41
- const getMask = (value = '', mask: ((raw: any) => string) | string): string => {
42
- if (typeof mask === 'function') {
43
- return mask(value);
44
- }
45
- return mask;
46
- };
47
-
48
- /**
49
- * TODO:
50
- * @param mask
51
- * @param defaultValue
52
- * @returns
53
- */
54
- export const useMask = (
55
- mask: ((raw: any) => string) | string,
56
- defaultValue?: string
57
- ): [IMask, (text: string) => void] => {
58
- const applyMask = useCallback(
59
- (value = ''): IMaskValue => {
60
- const onlyNumbers = value ? extractDigitsFromString(value) : value;
61
- const selectedMask = getMask(onlyNumbers, mask);
62
- const formattedValue = mergeMask(onlyNumbers, selectedMask);
63
-
64
- return {
65
- raw: onlyNumbers,
66
- formatted: formattedValue,
67
- };
68
- },
69
- [mask]
70
- );
71
-
72
- const [value, setValue] = useState<IMask>({
73
- converter: applyMask,
74
- maskValue: applyMask(defaultValue),
75
- });
76
-
77
- const handleChangeValue = useCallback(
78
- (value: string) => {
79
- const { raw, formatted } = applyMask(value);
80
- setValue(oldValue => ({
81
- ...oldValue,
82
- maskValue: {
83
- raw,
84
- formatted,
85
- },
86
- }));
87
- },
88
- [applyMask, setValue]
89
- );
90
-
91
- return [value, handleChangeValue];
92
- };
@@ -1,12 +0,0 @@
1
- // NOTE: Add here all individually masks, then you can use it on input components everywhere.
2
- export const Masks = {
3
- CPF: '999.999.999-99',
4
- CNPJ: '99.999.999/9999-99',
5
- DATE: '99/99/9999',
6
- MONTH_YEAR: '99/9999',
7
- CEP: '99999-999',
8
- PHONE: '(99) 9999-9999',
9
- PHONE_EXTENDED: '(99) 99999-9999',
10
- COMBINED_PHONE: (value: string) =>
11
- value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
12
- };