@tecsinapse/react-core 1.14.0 → 1.14.4
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/CHANGELOG.md +42 -0
- package/dist/components/atoms/Input/InputElement/InputElement.js +34 -8
- package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useNumberMask.d.ts +1 -1
- package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useStringMask.d.ts +2 -2
- package/dist/components/atoms/Input/hooks/useStringMask.js +2 -2
- package/dist/components/atoms/Input/hooks/useStringMask.js.map +1 -1
- package/dist/utils/masks.d.ts +1 -0
- package/dist/utils/masks.js +2 -1
- package/dist/utils/masks.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Input/InputElement/InputElement.tsx +53 -15
- package/src/components/atoms/Input/hooks/useNumberMask.ts +2 -2
- package/src/components/atoms/Input/hooks/useStringMask.ts +8 -6
- package/src/utils/masks.ts +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,48 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.14.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.3...@tecsinapse/react-core@1.14.4) (2022-02-16)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* mask update with useEffect ([c023198](https://github.com/tecsinapse/design-system/commit/c023198925a386acca327f676f4c7172cf2e57d8))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.14.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.2...@tecsinapse/react-core@1.14.3) (2022-02-16)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @tecsinapse/react-core
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [1.14.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.1...@tecsinapse/react-core@1.14.2) (2022-02-15)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* Input initializan for string and no mask. ([78353ef](https://github.com/tecsinapse/design-system/commit/78353ef7b4d24216a1b99eab800f8d448ff21a34))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## [1.14.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.14.0...@tecsinapse/react-core@1.14.1) (2022-02-15)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Bug Fixes
|
|
40
|
+
|
|
41
|
+
* Input initialization. ([a48c2d6](https://github.com/tecsinapse/design-system/commit/a48c2d6d8d1ee8d1282fa5082af40c6a1bce3e4b))
|
|
42
|
+
* Input initialization. ([b0be51f](https://github.com/tecsinapse/design-system/commit/b0be51f7699a3936b7d3d193437a2636bad7abc7))
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
6
48
|
# [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.13.0...@tecsinapse/react-core@1.14.0) (2022-02-14)
|
|
7
49
|
|
|
8
50
|
|
|
@@ -31,24 +31,50 @@ const InputElement = _react2.default.forwardRef(({
|
|
|
31
31
|
...rest
|
|
32
32
|
}, ref) => {
|
|
33
33
|
const theme = (0, _react.useTheme)();
|
|
34
|
+
const [valueReinitialized, setValueReinitialized] = (0, _react2.useState)(false);
|
|
34
35
|
|
|
35
36
|
const _placeholderColor = placeholderTextColor || theme.font.color.dark;
|
|
36
37
|
|
|
37
|
-
const
|
|
38
|
+
const getInputHook = () => {
|
|
39
|
+
if (mask !== undefined) {
|
|
40
|
+
if (Array.isArray(mask) || typeof mask === 'function') {
|
|
41
|
+
return (0, _useStringMask.useStringMask)(mask, value ?? '');
|
|
42
|
+
} else {
|
|
43
|
+
return (0, _useNumberMask.useNumberMask)(mask, value ?? 0);
|
|
44
|
+
}
|
|
45
|
+
} else {
|
|
46
|
+
return [undefined, undefined];
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const [maskValue, setMaskValue] = getInputHook();
|
|
51
|
+
|
|
52
|
+
const _value = maskValue !== undefined ? (maskValue === null || maskValue === void 0 ? void 0 : maskValue.formatted) ?? '' : (value === null || value === void 0 ? void 0 : value.toString()) ?? '';
|
|
53
|
+
|
|
38
54
|
(0, _react2.useEffect)(() => {
|
|
39
55
|
if (onChange) {
|
|
40
|
-
|
|
56
|
+
onChange(maskValue === null || maskValue === void 0 ? void 0 : maskValue.raw);
|
|
41
57
|
}
|
|
42
58
|
}, [maskValue]);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
59
|
+
const onChangeValue = (0, _react2.useCallback)(value => {
|
|
60
|
+
if (maskValue !== undefined && setMaskValue !== undefined) {
|
|
61
|
+
setMaskValue(value);
|
|
62
|
+
} else onChange && onChange(value);
|
|
63
|
+
}, [value]);
|
|
64
|
+
(0, _react2.useEffect)(() => {
|
|
65
|
+
if (!valueReinitialized) {
|
|
66
|
+
if (maskValue !== undefined && setMaskValue !== undefined && value !== undefined && typeof maskValue === 'object') {
|
|
67
|
+
if (maskValue.raw !== value.toString()) {
|
|
68
|
+
setValueReinitialized(true);
|
|
69
|
+
setMaskValue(value);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}, [value, maskValue, valueReinitialized]);
|
|
48
74
|
return _react2.default.createElement(_styled.StyledInputElement, _extends({}, rest, {
|
|
49
75
|
ref: ref,
|
|
50
76
|
onChangeText: onChangeValue,
|
|
51
|
-
value:
|
|
77
|
+
value: _value,
|
|
52
78
|
placeholder: placeholder,
|
|
53
79
|
placeholderTextColor: _placeholderColor,
|
|
54
80
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","mask","rest","ref","theme","_placeholderColor","font","color","dark","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","mask","rest","ref","theme","valueReinitialized","setValueReinitialized","_placeholderColor","font","color","dark","getInputHook","undefined","Array","isArray","maskValue","setMaskValue","_value","formatted","toString","raw","onChangeValue","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;AAuBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWkB;AAChB,QAAMC,KAAK,GAAG,sBAAd;AAGA,QAAM,CAACC,kBAAD,EAAqBC,qBAArB,IAA8C,sBAClD,KADkD,CAApD;;AAIA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAII,KAAK,CAACI,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,QAAMC,YAAY,GAAG,MAAM;AACzB,QAAIV,IAAI,KAAKW,SAAb,EAAwB;AACtB,UAAIC,KAAK,CAACC,OAAN,CAAcb,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAA3C,EAAuD;AACrD,eAAO,kCAAcA,IAAd,EAAoBH,KAAK,IAAI,EAA7B,CAAP;AACD,OAFD,MAEO;AACL,eAAO,kCAAcG,IAAd,EAAoBH,KAAK,IAAI,CAA7B,CAAP;AACD;AACF,KAND,MAMO;AACL,aAAO,CAACc,SAAD,EAAYA,SAAZ,CAAP;AACD;AACF,GAVD;;AAYA,QAAM,CAACG,SAAD,EAAYC,YAAZ,IAA4BL,YAAY,EAA9C;;AAEA,QAAMM,MAAM,GACVF,SAAS,KAAKH,SAAd,GACI,CAAAG,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEG,SAAX,KAAwB,EAD5B,GAEI,CAAApB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEqB,QAAP,OAAqB,EAH3B;;AAKA,yBAAU,MAAM;AACd,QAAIvB,QAAJ,EAAc;AACZA,MAAAA,QAAQ,CAACmB,SAAD,aAACA,SAAD,uBAACA,SAAS,CAAEK,GAAZ,CAAR;AACD;AACF,GAJD,EAIG,CAACL,SAAD,CAJH;AAMA,QAAMM,aAAa,GAAG,yBACnBvB,KAAD,IAA4B;AAC1B,QAAIiB,SAAS,KAAKH,SAAd,IAA2BI,YAAY,KAAKJ,SAAhD,EAA2D;AACzDI,MAAAA,YAAY,CAAClB,KAAD,CAAZ;AACD,KAFD,MAEOF,QAAQ,IAAIA,QAAQ,CAACE,KAAD,CAApB;AACR,GALmB,EAMpB,CAACA,KAAD,CANoB,CAAtB;AASA,yBAAU,MAAM;AACd,QAAI,CAACO,kBAAL,EAAyB;AAEvB,UACEU,SAAS,KAAKH,SAAd,IACAI,YAAY,KAAKJ,SADjB,IAEAd,KAAK,KAAKc,SAFV,IAGA,OAAOG,SAAP,KAAqB,QAJvB,EAKE;AAEA,YAAIA,SAAS,CAACK,GAAV,KAAkBtB,KAAK,CAACqB,QAAN,EAAtB,EAAwC;AACtCb,UAAAA,qBAAqB,CAAC,IAAD,CAArB;AACAU,UAAAA,YAAY,CAAClB,KAAD,CAAZ;AACD;AACF;AACF;AACF,GAhBD,EAgBG,CAACA,KAAD,EAAQiB,SAAR,EAAmBV,kBAAnB,CAhBH;AAkBA,SACE,8BAAC,0BAAD,eACMH,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEkB,aAHhB;AAIE,IAAA,KAAK,EAAEJ,MAJT;AAKE,IAAA,WAAW,EAAEpB,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CAtFyC,CAA5C;;AAyFAN,YAAY,CAAC6B,WAAb,GAA2B,cAA3B;eAEe7B,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\nimport { MaskType, useStringMask } from '../hooks/useStringMask';\nimport { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';\n\nexport interface InputElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n value: string | number;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: any) => void;\n /**\n To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])\n A MaskType can be a string, RegExp, or Array<RegExp>.\n In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.\n For example a phone mask can be represented as ['(99) \\\\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.\n To use mask for numbers you have to pass a CurrencyOptions object\n A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.\n **/\n mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;\n onFocus?: () => void;\n onBlur?: () => void;\n ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n mask,\n ...rest\n },\n ref: React.Ref<any>\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n\n /** Check if value was reinitialized, without this state we can't total \"erase\" a value that was already reinitialized **/\n const [valueReinitialized, setValueReinitialized] = useState<boolean>(\n false\n );\n\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n const getInputHook = () => {\n if (mask !== undefined) {\n if (Array.isArray(mask) || typeof mask === 'function') {\n return useStringMask(mask, value ?? '');\n } else {\n return useNumberMask(mask, value ?? 0);\n }\n } else {\n return [undefined, undefined];\n }\n };\n\n const [maskValue, setMaskValue] = getInputHook();\n\n const _value =\n maskValue !== undefined\n ? maskValue?.formatted ?? ''\n : value?.toString() ?? '';\n\n useEffect(() => {\n if (onChange) {\n onChange(maskValue?.raw);\n }\n }, [maskValue]);\n\n const onChangeValue = useCallback(\n (value: string | number) => {\n if (maskValue !== undefined && setMaskValue !== undefined) {\n setMaskValue(value);\n } else onChange && onChange(value);\n },\n [value]\n );\n\n useEffect(() => {\n if (!valueReinitialized) {\n /** Used to reinitialize maskValue with a value that was loaded after Input was rendered **/\n if (\n maskValue !== undefined &&\n setMaskValue !== undefined &&\n value !== undefined &&\n typeof maskValue === 'object'\n ) {\n /** Case there is a mask **/\n if (maskValue.raw !== value.toString()) {\n setValueReinitialized(true);\n setMaskValue(value);\n }\n }\n }\n }, [value, maskValue, valueReinitialized]);\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChangeValue}\n value={_value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}
|
|
@@ -5,4 +5,4 @@ export declare const getInternalNumberAndMask: (value: string | number, options?
|
|
|
5
5
|
internalNumber: number;
|
|
6
6
|
mergedOptions: CurrencyOptions;
|
|
7
7
|
};
|
|
8
|
-
export declare const useNumberMask: (options?: currency.Options | undefined, defaultValue?: string | number | undefined) => [MaskValue, (value: string) => void];
|
|
8
|
+
export declare const useNumberMask: (options?: currency.Options | undefined, defaultValue?: string | number | undefined) => [MaskValue, (value: string | number) => void];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","getRegex","RegExp","getInternalNumberAndMask","value","options","mergedOptions","internalNumber","stringValue","String","decimalIndex","indexOf","currentPrecision","length","zeros","i","Number","onlyNumbers","padZeros","padStart","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","useNumberMask","defaultValue","applyMask","raw","formatted","format","setValue","handleChangeValue","formattedValue"],"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;;AAOA,MAAMC,QAAQ,GAAID,SAAD,IACf,IAAIE,MAAJ,CAAY,cAAaF,SAAU,YAAnC,EAAgD,GAAhD,CADF;;AAGO,MAAMG,wBAAwB,GAAG,CACtCC,KADsC,EAEtCC,OAFsC,KAGyB;AAC/D,QAAMC,aAAa,GAAG,EAAE,GAAGV,eAAL;AAAsB,OAAGS;AAAzB,GAAtB;AACA,QAAM;AAAEL,IAAAA,SAAS,GAAG,CAAC;AAAf,MAAqBM,aAA3B;AAEA,MAAIC,cAAJ;;AAEA,MAAI,OAAOH,KAAP,KAAiB,QAArB,EAA+B;AAC7B,QAAIJ,SAAJ,EAAe;AACb,UAAIQ,WAAW,GAAGC,MAAM,CAACL,KAAD,CAAxB;AACA,YAAMM,YAAY,GAAGF,WAAW,CAACG,OAAZ,CAAoB,GAApB,CAArB;AACA,YAAMC,gBAAgB,GAAGF,YAAY,GAAGV,SAAxC;;AACA,UAAIU,YAAY,KAAK,CAAC,CAAlB,IAAuBE,gBAAgB,IAAIJ,WAAW,CAACK,MAA3D,EAAmE;AACjE,cAAMC,KAAK,GAAGN,WAAW,CAACK,MAAZ,GAAqB,CAArB,GAAyBD,gBAAvC;;AACA,aAAK,IAAIG,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,KAApB,EAA2BC,CAAC,EAA5B,EAAgCP,WAAW,GAAGA,WAAW,GAAI,GAA7B;AACjC;;AACDD,MAAAA,cAAc,GAAGS,MAAM,CAACR,WAAD,CAAvB;AACD,KATD,MASO;AACLD,MAAAA,cAAc,GAAGH,KAAjB;AACD;AACF,GAbD,MAaO;AACL,UAAMa,WAAW,GAAGR,MAAM,CAAC,qCAAyBL,KAAzB,CAAD,CAA1B;AACA,UAAMc,QAAQ,GAAGT,MAAM,CAACQ,WAAD,CAAN,CAAoBE,QAApB,CAA6BnB,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACAO,IAAAA,cAAc,GAAGS,MAAM,CAACE,QAAQ,CAACE,OAAT,CAAiBnB,QAAQ,CAACD,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAAvB;AACD;;AAED,MAAIO,cAAc,GAAGS,MAAM,CAACK,gBAA5B,EAA8C;AAC5Cd,IAAAA,cAAc,GAAGS,MAAM,CAACK,gBAAxB;AACD;;AAED,MAAId,cAAc,GAAGS,MAAM,CAACM,gBAA5B,EAA8C;AAC5Cf,IAAAA,cAAc,GAAGS,MAAM,CAACM,gBAAxB;AACD;;AAED,SAAO;AACLf,IAAAA,cADK;AAELD,IAAAA;AAFK,GAAP;AAID,CAxCM;;;;AAgDA,MAAMiB,aAAa,GAAG,CAC3BlB,OAD2B,EAE3BmB,YAF2B,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","getRegex","RegExp","getInternalNumberAndMask","value","options","mergedOptions","internalNumber","stringValue","String","decimalIndex","indexOf","currentPrecision","length","zeros","i","Number","onlyNumbers","padZeros","padStart","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","useNumberMask","defaultValue","applyMask","raw","formatted","format","setValue","handleChangeValue","formattedValue"],"mappings":"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","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils';\nimport { MaskValue } from './useStringMask';\n\nexport type CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n symbol: 'R$ ',\n separator: '.',\n decimal: ',',\n precision: 2,\n};\n\nconst getRegex = (precision: number) =>\n new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g');\n\nexport const getInternalNumberAndMask = (\n value: string | number,\n options?: CurrencyOptions\n): { internalNumber: number; mergedOptions: CurrencyOptions } => {\n const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n const { precision = -1 } = mergedOptions;\n\n let internalNumber;\n\n if (typeof value === 'number') {\n if (precision) {\n let stringValue = String(value);\n const decimalIndex = stringValue.indexOf('.');\n const currentPrecision = decimalIndex + precision;\n if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {\n const zeros = stringValue.length + 1 - currentPrecision;\n for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;\n }\n internalNumber = Number(stringValue);\n } else {\n internalNumber = value;\n }\n } else {\n const onlyNumbers = String(extractNumbersFromString(value));\n const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n }\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 internalNumber,\n mergedOptions,\n };\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useNumberMask = (\n options?: CurrencyOptions,\n defaultValue?: string | number\n): [MaskValue, (value: string | number) => void] => {\n const applyMask = useCallback(\n (value: string | number = 0): MaskValue => {\n const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n value,\n options\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<MaskValue>(applyMask(defaultValue));\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue);\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useNumberMask.js"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export interface MaskValue {
|
|
2
2
|
formatted?: string;
|
|
3
|
-
raw?:
|
|
3
|
+
raw?: string | number;
|
|
4
4
|
}
|
|
5
5
|
export declare type MaskType = string | RegExp | Array<RegExp>;
|
|
6
6
|
export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
|
|
7
7
|
export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
|
|
8
|
-
export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | undefined) => [MaskValue, (text: string) => void];
|
|
8
|
+
export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | number | undefined) => [MaskValue, (text: string | number) => void];
|
|
@@ -91,12 +91,12 @@ const useStringMask = (mask, defaultValue) => {
|
|
|
91
91
|
formatted
|
|
92
92
|
};
|
|
93
93
|
}, [mask]);
|
|
94
|
-
const [value, setValue] = (0, _react.useState)(applyMask(defaultValue));
|
|
94
|
+
const [value, setValue] = (0, _react.useState)(applyMask(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
|
|
95
95
|
const handleChangeValue = (0, _react.useCallback)(formattedValue => {
|
|
96
96
|
const {
|
|
97
97
|
raw,
|
|
98
98
|
formatted
|
|
99
|
-
} = applyMask(formattedValue);
|
|
99
|
+
} = applyMask(formattedValue.toString());
|
|
100
100
|
setValue({
|
|
101
101
|
raw,
|
|
102
102
|
formatted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"names":["mergeMask","value","mask","formatted","raw","iMask","iChars","length","maskChar","valueChar","rawValueChar","maskCharRegex","Array","isArray","matchRegex","RegExp","test","getMask","newValue","maskArray","regexArray","forEach","exp","push","i","useStringMask","defaultValue","applyMask","selectedMask","setValue","handleChangeValue","formattedValue"],"mappings":";;;;;;;AAAA;;AAeO,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA6C;AACpE,MAAIC,SAAS,GAAG,EAAhB;AACA,MAAIC,GAAG,GAAG,EAAV;AACA,MAAIC,KAAK,GAAG,CAAZ;AACA,MAAIC,MAAM,GAAG,CAAb;;AAEA,SAAO,EAAED,KAAK,KAAKH,IAAI,CAACK,MAAf,IAAyBD,MAAM,KAAKL,KAAK,CAACM,MAA5C,CAAP,EAA4D;AAC1D,UAAMC,QAAQ,GAAGN,IAAI,CAACG,KAAD,CAArB;AACA,UAAMI,SAAS,GAAGR,KAAK,CAACK,MAAD,CAAvB;;AAEA,QAAIE,QAAQ,KAAKC,SAAjB,EAA4B;AAC1BN,MAAAA,SAAS,IAAIK,QAAb;AACAF,MAAAA,MAAM;AACND,MAAAA,KAAK;AACL;AACD;;AAED,UAAMK,YAAY,GAAGT,KAAK,CAACK,MAAD,CAA1B;;AAEA,QAAI,OAAOE,QAAP,KAAoB,QAAxB,EAAkC;AAChCF,MAAAA,MAAM;AAEN,YAAMK,aAAa,GAAGC,KAAK,CAACC,OAAN,CAAcL,QAAd,IAA0BA,QAAQ,CAAC,CAAD,CAAlC,GAAwCA,QAA9D;AACA,YAAMM,UAAU,GAAGC,MAAM,CAACJ,aAAD,CAAN,CAAsBK,IAAtB,CAA2BP,SAA3B,CAAnB;;AAEA,UAAIK,UAAJ,EAAgB;AACdX,QAAAA,SAAS,IAAIM,SAAb;AACAL,QAAAA,GAAG,IAAIM,YAAP;AACAL,QAAAA,KAAK;AACN;AACF,KAXD,MAWO;AACLF,MAAAA,SAAS,IAAIK,QAAb;AACAH,MAAAA,KAAK;AACN;AACF;;AAED,SAAO;AAAED,IAAAA,GAAF;AAAOD,IAAAA;AAAP,GAAP;AACD,CArCM;;;;AAuCA,MAAMc,OAAO,GAAG,CACrBf,IADqB,EAErBgB,QAFqB,KAGN;AACf,MAAIC,SAAJ;AACA,QAAMC,UAAsB,GAAG,EAA/B;;AAEA,MAAI,OAAOlB,IAAP,KAAgB,UAApB,EAAgC;AAC9BiB,IAAAA,SAAS,GAAGjB,IAAI,CAACgB,QAAD,CAAhB;AACD,GAFD,MAEO;AACLC,IAAAA,SAAS,GAAGjB,IAAZ;AACD;;AAEDiB,EAAAA,SAAS,CAACE,OAAV,CAAkBC,GAAG,IAAI;AACvB,QAAI,OAAOA,GAAP,KAAe,QAAnB,EAA6B;AAC3B,UAAIV,KAAK,CAACC,OAAN,CAAcS,GAAd,CAAJ,EAAwBF,UAAU,CAACG,IAAX,CAAgBD,GAAhB,EAAxB,KACKF,UAAU,CAACG,IAAX,CAAgBD,GAAhB;AACN,KAHD,MAGO;AACL,WAAK,IAAIE,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,GAAG,CAACf,MAAxB,EAAgCiB,CAAC,EAAjC,EAAqC;AACnC,YAAIF,GAAG,CAACE,CAAD,CAAH,KAAW,IAAf,EAAqB;AACnBJ,UAAAA,UAAU,CAACG,IAAX,CAAgBD,GAAG,CAACE,CAAC,GAAG,CAAL,CAAnB;AACAA,UAAAA,CAAC;AACF,SAHD,MAGO;AACL,cAAIF,GAAG,CAACE,CAAD,CAAH,KAAW,GAAf,EAAoBJ,UAAU,CAACG,IAAX,CAAgB,IAAhB,EAApB,KACK,IAAID,GAAG,CAACE,CAAD,CAAH,KAAW,GAAf,EAAoBJ,UAAU,CAACG,IAAX,CAAgB,UAAhB,EAApB,KACAH,UAAU,CAACG,IAAX,CAAgBD,GAAG,CAACE,CAAD,CAAnB;AACN;AACF;AACF;AACF,GAhBD;AAkBA,SAAOJ,UAAP;AACD,CAhCM;;;;AAwCA,MAAMK,aAAa,GAAG,CAC3BvB,IAD2B,EAE3BwB,YAF2B,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"names":["mergeMask","value","mask","formatted","raw","iMask","iChars","length","maskChar","valueChar","rawValueChar","maskCharRegex","Array","isArray","matchRegex","RegExp","test","getMask","newValue","maskArray","regexArray","forEach","exp","push","i","useStringMask","defaultValue","applyMask","selectedMask","setValue","toString","handleChangeValue","formattedValue"],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport interface MaskValue {\n formatted?: string;\n raw?: string | number;\n}\n\nexport type MaskType = string | RegExp | Array<RegExp>;\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nexport const mergeMask = (value = '', mask: MaskType[]): MaskValue => {\n let formatted = '';\n let raw = '';\n let iMask = 0;\n let iChars = 0;\n\n while (!(iMask === mask.length || iChars === value.length)) {\n const maskChar = mask[iMask];\n const valueChar = value[iChars];\n\n if (maskChar === valueChar) {\n formatted += maskChar;\n iChars++;\n iMask++;\n continue;\n }\n\n const rawValueChar = value[iChars];\n\n if (typeof maskChar === 'object') {\n iChars++;\n\n const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;\n const matchRegex = RegExp(maskCharRegex).test(valueChar);\n\n if (matchRegex) {\n formatted += valueChar;\n raw += rawValueChar;\n iMask++;\n }\n } else {\n formatted += maskChar;\n iMask++;\n }\n }\n\n return { raw, formatted };\n};\n\nexport const getMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n newValue: string\n): MaskType[] => {\n let maskArray: MaskType[];\n const regexArray: MaskType[] = [];\n\n if (typeof mask === 'function') {\n maskArray = mask(newValue);\n } else {\n maskArray = mask;\n }\n\n maskArray.forEach(exp => {\n if (typeof exp !== 'string') {\n if (Array.isArray(exp)) regexArray.push(exp);\n else regexArray.push(exp);\n } else {\n for (let i = 0; i < exp.length; i++) {\n if (exp[i] === '\\\\') {\n regexArray.push(exp[i + 1]);\n i++;\n } else {\n if (exp[i] === '9') regexArray.push(/\\d/);\n else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);\n else regexArray.push(exp[i]);\n }\n }\n }\n });\n\n return regexArray;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useStringMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n defaultValue?: string | number\n): [MaskValue, (text: string | number) => void] => {\n const applyMask = useCallback(\n (value = ''): MaskValue => {\n const selectedMask = getMask(mask, value);\n const { formatted, raw } = mergeMask(value, selectedMask);\n\n return {\n raw,\n formatted,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<MaskValue>(\n applyMask(defaultValue?.toString())\n );\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue.toString());\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useStringMask.js"}
|
package/dist/utils/masks.d.ts
CHANGED
package/dist/utils/masks.js
CHANGED
|
@@ -12,7 +12,8 @@ const Masks = {
|
|
|
12
12
|
CEP: ['99999-999'],
|
|
13
13
|
PHONE: ['(99) 9999-9999'],
|
|
14
14
|
PHONE_EXTENDED: ['(99) 99999-9999'],
|
|
15
|
-
COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED
|
|
15
|
+
COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
|
|
16
|
+
COMBINED_CPF_CNPJ: value => (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.CPF : Masks.CNPJ
|
|
16
17
|
};
|
|
17
18
|
exports.Masks = Masks;
|
|
18
19
|
//# sourceMappingURL=masks.js.map
|
package/dist/utils/masks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/masks.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,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAEd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;
|
|
1
|
+
{"version":3,"sources":["../../src/utils/masks.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length","COMBINED_CPF_CNPJ"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAEd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO,cAVzB;AAWnBI,EAAAA,iBAAiB,EAAGF,KAAD,IACjB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACC,GAA5B,GAAkCD,KAAK,CAACE;AAZvB,CAAd","sourcesContent":["// NOTE: Add here all individually utils, 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 in formatted mode\n value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n COMBINED_CPF_CNPJ: (value: string) =>\n value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"file":"masks.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.14.
|
|
4
|
+
"version": "1.14.4",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"react-native": ">=0.64.0",
|
|
32
32
|
"react-native-vector-icons": ">=8.1.0"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "ede80484c896c8aa18635fc17b885e74b50b0774"
|
|
35
35
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useTheme } from '@emotion/react';
|
|
2
2
|
import { ThemeProp } from '@tecsinapse/react-core';
|
|
3
|
-
import React, { FC, useEffect, useState } from 'react';
|
|
3
|
+
import React, { FC, useCallback, useEffect, useState } from 'react';
|
|
4
4
|
import { StyleProp, TextInputProps, TextStyle } from 'react-native';
|
|
5
5
|
import { StyledInputElement } from '../styled';
|
|
6
6
|
import { MaskType, useStringMask } from '../hooks/useStringMask';
|
|
@@ -41,34 +41,72 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
|
|
|
41
41
|
ref: React.Ref<any>
|
|
42
42
|
): JSX.Element => {
|
|
43
43
|
const theme = useTheme() as ThemeProp;
|
|
44
|
+
|
|
45
|
+
/** Check if value was reinitialized, without this state we can't total "erase" a value that was already reinitialized **/
|
|
46
|
+
const [valueReinitialized, setValueReinitialized] = useState<boolean>(
|
|
47
|
+
false
|
|
48
|
+
);
|
|
49
|
+
|
|
44
50
|
const _placeholderColor = placeholderTextColor || theme.font.color.dark;
|
|
45
51
|
|
|
46
|
-
const
|
|
47
|
-
mask
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
const getInputHook = () => {
|
|
53
|
+
if (mask !== undefined) {
|
|
54
|
+
if (Array.isArray(mask) || typeof mask === 'function') {
|
|
55
|
+
return useStringMask(mask, value ?? '');
|
|
56
|
+
} else {
|
|
57
|
+
return useNumberMask(mask, value ?? 0);
|
|
58
|
+
}
|
|
59
|
+
} else {
|
|
60
|
+
return [undefined, undefined];
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const [maskValue, setMaskValue] = getInputHook();
|
|
65
|
+
|
|
66
|
+
const _value =
|
|
67
|
+
maskValue !== undefined
|
|
68
|
+
? maskValue?.formatted ?? ''
|
|
69
|
+
: value?.toString() ?? '';
|
|
52
70
|
|
|
53
71
|
useEffect(() => {
|
|
54
72
|
if (onChange) {
|
|
55
|
-
|
|
56
|
-
else onChange(maskValue?.raw);
|
|
73
|
+
onChange(maskValue?.raw);
|
|
57
74
|
}
|
|
58
75
|
}, [maskValue]);
|
|
59
76
|
|
|
60
|
-
const onChangeValue = (
|
|
61
|
-
|
|
62
|
-
|
|
77
|
+
const onChangeValue = useCallback(
|
|
78
|
+
(value: string | number) => {
|
|
79
|
+
if (maskValue !== undefined && setMaskValue !== undefined) {
|
|
80
|
+
setMaskValue(value);
|
|
81
|
+
} else onChange && onChange(value);
|
|
82
|
+
},
|
|
83
|
+
[value]
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
if (!valueReinitialized) {
|
|
88
|
+
/** Used to reinitialize maskValue with a value that was loaded after Input was rendered **/
|
|
89
|
+
if (
|
|
90
|
+
maskValue !== undefined &&
|
|
91
|
+
setMaskValue !== undefined &&
|
|
92
|
+
value !== undefined &&
|
|
93
|
+
typeof maskValue === 'object'
|
|
94
|
+
) {
|
|
95
|
+
/** Case there is a mask **/
|
|
96
|
+
if (maskValue.raw !== value.toString()) {
|
|
97
|
+
setValueReinitialized(true);
|
|
98
|
+
setMaskValue(value);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}, [value, maskValue, valueReinitialized]);
|
|
63
103
|
|
|
64
104
|
return (
|
|
65
105
|
<StyledInputElement
|
|
66
106
|
{...rest}
|
|
67
107
|
ref={ref}
|
|
68
108
|
onChangeText={onChangeValue}
|
|
69
|
-
value={
|
|
70
|
-
typeof maskValue === 'string' ? maskValue : maskValue?.formatted ?? ''
|
|
71
|
-
}
|
|
109
|
+
value={_value}
|
|
72
110
|
placeholder={placeholder}
|
|
73
111
|
placeholderTextColor={_placeholderColor}
|
|
74
112
|
disabled={disabled}
|
|
@@ -66,7 +66,7 @@ export const getInternalNumberAndMask = (
|
|
|
66
66
|
export const useNumberMask = (
|
|
67
67
|
options?: CurrencyOptions,
|
|
68
68
|
defaultValue?: string | number
|
|
69
|
-
): [MaskValue, (value: string) => void] => {
|
|
69
|
+
): [MaskValue, (value: string | number) => void] => {
|
|
70
70
|
const applyMask = useCallback(
|
|
71
71
|
(value: string | number = 0): MaskValue => {
|
|
72
72
|
const { internalNumber, mergedOptions } = getInternalNumberAndMask(
|
|
@@ -85,7 +85,7 @@ export const useNumberMask = (
|
|
|
85
85
|
const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));
|
|
86
86
|
|
|
87
87
|
const handleChangeValue = useCallback(
|
|
88
|
-
(formattedValue: string) => {
|
|
88
|
+
(formattedValue: string | number) => {
|
|
89
89
|
const { raw, formatted } = applyMask(formattedValue);
|
|
90
90
|
setValue({
|
|
91
91
|
raw,
|
|
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
|
|
|
2
2
|
|
|
3
3
|
export interface MaskValue {
|
|
4
4
|
formatted?: string;
|
|
5
|
-
raw?:
|
|
5
|
+
raw?: string | number;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export type MaskType = string | RegExp | Array<RegExp>;
|
|
@@ -94,8 +94,8 @@ export const getMask = (
|
|
|
94
94
|
*/
|
|
95
95
|
export const useStringMask = (
|
|
96
96
|
mask: MaskType[] | ((value: string) => MaskType[]),
|
|
97
|
-
defaultValue?: string
|
|
98
|
-
): [MaskValue, (text: string) => void] => {
|
|
97
|
+
defaultValue?: string | number
|
|
98
|
+
): [MaskValue, (text: string | number) => void] => {
|
|
99
99
|
const applyMask = useCallback(
|
|
100
100
|
(value = ''): MaskValue => {
|
|
101
101
|
const selectedMask = getMask(mask, value);
|
|
@@ -109,11 +109,13 @@ export const useStringMask = (
|
|
|
109
109
|
[mask]
|
|
110
110
|
);
|
|
111
111
|
|
|
112
|
-
const [value, setValue] = useState<MaskValue>(
|
|
112
|
+
const [value, setValue] = useState<MaskValue>(
|
|
113
|
+
applyMask(defaultValue?.toString())
|
|
114
|
+
);
|
|
113
115
|
|
|
114
116
|
const handleChangeValue = useCallback(
|
|
115
|
-
(formattedValue: string) => {
|
|
116
|
-
const { raw, formatted } = applyMask(formattedValue);
|
|
117
|
+
(formattedValue: string | number) => {
|
|
118
|
+
const { raw, formatted } = applyMask(formattedValue.toString());
|
|
117
119
|
setValue({
|
|
118
120
|
raw,
|
|
119
121
|
formatted,
|
package/src/utils/masks.ts
CHANGED