@draftbit/core 43.4.7-6cf59b.0 → 43.4.8
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/lib/commonjs/components/NumberInput.js +30 -10
- package/lib/commonjs/components/NumberInput.js.map +1 -1
- package/lib/module/components/NumberInput.js +31 -11
- package/lib/module/components/NumberInput.js.map +1 -1
- package/package.json +2 -2
- package/src/components/NumberInput.js +24 -7
- package/src/components/NumberInput.tsx +50 -24
|
@@ -24,7 +24,8 @@ const NumberInput = _ref => {
|
|
|
24
24
|
defaultValue,
|
|
25
25
|
...props
|
|
26
26
|
} = _ref;
|
|
27
|
-
|
|
27
|
+
|
|
28
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
28
29
|
if (valueToFormat != null) {
|
|
29
30
|
if ((0, _lodash.isString)(valueToFormat) && valueToFormat !== "") {
|
|
30
31
|
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
@@ -40,23 +41,42 @@ const NumberInput = _ref => {
|
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
return "0";
|
|
43
|
-
}
|
|
44
|
-
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = (0, _react.useState)(formatValueToStringNumber(value));
|
|
45
47
|
|
|
46
48
|
const handleChangeText = newValue => {
|
|
47
|
-
const newStringNumberValue = formatValueToStringNumber(newValue,
|
|
49
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
48
50
|
const number = parseFloat(newStringNumberValue);
|
|
49
|
-
|
|
51
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
50
52
|
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
|
|
51
53
|
};
|
|
54
|
+
/* set currentStringNumberValue directly to defaultValue if it exists on load
|
|
55
|
+
( no need to use TextInput's defaultValue because its value is always controlled & set ) */
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
(0, _react.useEffect)(() => {
|
|
59
|
+
const defaultStringNumberValue = formatValueToStringNumber(defaultValue, currentStringNumberValue);
|
|
60
|
+
|
|
61
|
+
if (currentStringNumberValue !== defaultStringNumberValue) {
|
|
62
|
+
setCurrentStringNumberValue(defaultStringNumberValue);
|
|
63
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
|
+
|
|
65
|
+
}, []); // set new value if different from current value
|
|
66
|
+
|
|
67
|
+
(0, _react.useEffect)(() => {
|
|
68
|
+
const nextStringNumberValue = formatValueToStringNumber(value, currentStringNumberValue);
|
|
69
|
+
|
|
70
|
+
if (currentStringNumberValue !== nextStringNumberValue) {
|
|
71
|
+
handleChangeText(nextStringNumberValue);
|
|
72
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
52
73
|
|
|
74
|
+
}, [value]);
|
|
53
75
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
54
|
-
keyboardType: "numeric"
|
|
55
|
-
|
|
56
|
-
value: stringNumberValue,
|
|
57
|
-
defaultValue: formatValueToStringNumber(defaultValue),
|
|
76
|
+
keyboardType: "numeric",
|
|
77
|
+
value: currentStringNumberValue,
|
|
58
78
|
onChangeText: handleChangeText
|
|
59
|
-
}));
|
|
79
|
+
}, props));
|
|
60
80
|
};
|
|
61
81
|
|
|
62
82
|
var _default = NumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["NumberInput.tsx"],"names":["NumberInput","onChangeText","value","defaultValue","props","formatValueToStringNumber","valueToFormat","currentStringNumberValue","test","slice","toString","
|
|
1
|
+
{"version":3,"sources":["NumberInput.tsx"],"names":["NumberInput","onChangeText","value","defaultValue","props","formatValueToStringNumber","valueToFormat","currentStringNumberValue","test","slice","toString","setCurrentStringNumberValue","handleChangeText","newValue","newStringNumberValue","number","parseFloat","defaultStringNumberValue","nextStringNumberValue"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAQA,MAAMA,WAAsB,GAAG,QAKzB;AAAA,MAL0B;AAC9BC,IAAAA,YAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,YAH8B;AAI9B,OAAGC;AAJ2B,GAK1B;;AACJ,QAAMC,yBAAyB,GAAG,CAChCC,aADgC,EAEhCC,wBAFgC,KAG7B;AACH,QAAID,aAAa,IAAI,IAArB,EAA2B;AACzB,UAAI,sBAASA,aAAT,KAA2BA,aAAa,KAAK,EAAjD,EAAqD;AACnD,YAAI,WAAWE,IAAX,CAAgBF,aAAhB,CAAJ,EAAoC;AAClC,iBAAOA,aAAa,CAACG,KAAd,CAAoB,CAApB,CAAP;AACD,SAFD,MAEO,IAAI,oCAAoCD,IAApC,CAAyCF,aAAzC,CAAJ,EAA6D;AAClE,iBAAOA,aAAP;AACD,SAFM,MAEA,IAAIC,wBAAJ,EAA8B;AACnC,iBAAOA,wBAAP;AACD;AACF,OARD,MAQO,IAAI,sBAASD,aAAT,KAA2B,CAAC,mBAAMA,aAAN,CAAhC,EAAsD;AAC3D,eAAOA,aAAa,CAACI,QAAd,EAAP;AACD;AACF;;AAED,WAAO,GAAP;AACD,GAnBD;;AAqBA,QAAM,CAACH,wBAAD,EAA2BI,2BAA3B,IAA0D,qBAC9DN,yBAAyB,CAACH,KAAD,CADqC,CAAhE;;AAIA,QAAMU,gBAAgB,GAAIC,QAAD,IAAsB;AAC7C,UAAMC,oBAAoB,GAAGT,yBAAyB,CACpDQ,QADoD,EAEpDN,wBAFoD,CAAtD;AAIA,UAAMQ,MAAM,GAAGC,UAAU,CAACF,oBAAD,CAAzB;AAEAH,IAAAA,2BAA2B,CAACG,oBAAD,CAA3B;AACAb,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGc,MAAH,CAAZ;AACD,GATD;AAWA;AACF;;;AACE,wBAAU,MAAM;AACd,UAAME,wBAAwB,GAAGZ,yBAAyB,CACxDF,YADwD,EAExDI,wBAFwD,CAA1D;;AAKA,QAAIA,wBAAwB,KAAKU,wBAAjC,EAA2D;AACzDN,MAAAA,2BAA2B,CAACM,wBAAD,CAA3B;AACD,KARa,CASd;;AACD,GAVD,EAUG,EAVH,EAvCI,CAmDJ;;AACA,wBAAU,MAAM;AACd,UAAMC,qBAAqB,GAAGb,yBAAyB,CACrDH,KADqD,EAErDK,wBAFqD,CAAvD;;AAKA,QAAIA,wBAAwB,KAAKW,qBAAjC,EAAwD;AACtDN,MAAAA,gBAAgB,CAACM,qBAAD,CAAhB;AACD,KARa,CASd;;AACD,GAVD,EAUG,CAAChB,KAAD,CAVH;AAYA,sBACE,6BAAC,sBAAD;AACE,IAAA,YAAY,EAAC,SADf;AAEE,IAAA,KAAK,EAAEK,wBAFT;AAGE,IAAA,YAAY,EAAEK;AAHhB,KAIMR,KAJN,EADF;AAQD,CA7ED;;eA+EeJ,W","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { TextInput } from \"react-native\";\nimport { isString, isNumber, isNaN } from \"lodash\";\n\ninterface Props {\n value?: number | string;\n defaultValue?: number | string;\n onChangeText?: (value?: number) => void;\n}\n\nconst NumberInput: FC<Props> = ({\n onChangeText,\n value,\n defaultValue,\n ...props\n}) => {\n const formatValueToStringNumber = (\n valueToFormat?: number | string,\n currentStringNumberValue?: string\n ) => {\n if (valueToFormat != null) {\n if (isString(valueToFormat) && valueToFormat !== \"\") {\n if (/^0[1-9]$/.test(valueToFormat)) {\n return valueToFormat.slice(1);\n } else if (/^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$/.test(valueToFormat)) {\n return valueToFormat;\n } else if (currentStringNumberValue) {\n return currentStringNumberValue;\n }\n } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {\n return valueToFormat.toString();\n }\n }\n\n return \"0\";\n };\n\n const [currentStringNumberValue, setCurrentStringNumberValue] = useState(\n formatValueToStringNumber(value)\n );\n\n const handleChangeText = (newValue: string) => {\n const newStringNumberValue = formatValueToStringNumber(\n newValue,\n currentStringNumberValue\n );\n const number = parseFloat(newStringNumberValue);\n\n setCurrentStringNumberValue(newStringNumberValue);\n onChangeText?.(number);\n };\n\n /* set currentStringNumberValue directly to defaultValue if it exists on load\n ( no need to use TextInput's defaultValue because its value is always controlled & set ) */\n useEffect(() => {\n const defaultStringNumberValue = formatValueToStringNumber(\n defaultValue,\n currentStringNumberValue\n );\n\n if (currentStringNumberValue !== defaultStringNumberValue) {\n setCurrentStringNumberValue(defaultStringNumberValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // set new value if different from current value\n useEffect(() => {\n const nextStringNumberValue = formatValueToStringNumber(\n value,\n currentStringNumberValue\n );\n\n if (currentStringNumberValue !== nextStringNumberValue) {\n handleChangeText(nextStringNumberValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n return (\n <TextInput\n keyboardType=\"numeric\"\n value={currentStringNumberValue}\n onChangeText={handleChangeText}\n {...props}\n />\n );\n};\n\nexport default NumberInput;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useEffect, useState } from "react";
|
|
4
4
|
import { TextInput } from "react-native";
|
|
5
5
|
import { isString, isNumber, isNaN } from "lodash";
|
|
6
6
|
|
|
@@ -11,7 +11,8 @@ const NumberInput = _ref => {
|
|
|
11
11
|
defaultValue,
|
|
12
12
|
...props
|
|
13
13
|
} = _ref;
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
15
16
|
if (valueToFormat != null) {
|
|
16
17
|
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
17
18
|
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
@@ -27,23 +28,42 @@ const NumberInput = _ref => {
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
return "0";
|
|
30
|
-
}
|
|
31
|
-
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber(value));
|
|
32
34
|
|
|
33
35
|
const handleChangeText = newValue => {
|
|
34
|
-
const newStringNumberValue = formatValueToStringNumber(newValue,
|
|
36
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
35
37
|
const number = parseFloat(newStringNumberValue);
|
|
36
|
-
|
|
38
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
37
39
|
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
|
|
38
40
|
};
|
|
41
|
+
/* set currentStringNumberValue directly to defaultValue if it exists on load
|
|
42
|
+
( no need to use TextInput's defaultValue because its value is always controlled & set ) */
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const defaultStringNumberValue = formatValueToStringNumber(defaultValue, currentStringNumberValue);
|
|
47
|
+
|
|
48
|
+
if (currentStringNumberValue !== defaultStringNumberValue) {
|
|
49
|
+
setCurrentStringNumberValue(defaultStringNumberValue);
|
|
50
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
+
|
|
52
|
+
}, []); // set new value if different from current value
|
|
53
|
+
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
const nextStringNumberValue = formatValueToStringNumber(value, currentStringNumberValue);
|
|
56
|
+
|
|
57
|
+
if (currentStringNumberValue !== nextStringNumberValue) {
|
|
58
|
+
handleChangeText(nextStringNumberValue);
|
|
59
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
60
|
|
|
61
|
+
}, [value]);
|
|
40
62
|
return /*#__PURE__*/React.createElement(TextInput, _extends({
|
|
41
|
-
keyboardType: "numeric"
|
|
42
|
-
|
|
43
|
-
value: stringNumberValue,
|
|
44
|
-
defaultValue: formatValueToStringNumber(defaultValue),
|
|
63
|
+
keyboardType: "numeric",
|
|
64
|
+
value: currentStringNumberValue,
|
|
45
65
|
onChangeText: handleChangeText
|
|
46
|
-
}));
|
|
66
|
+
}, props));
|
|
47
67
|
};
|
|
48
68
|
|
|
49
69
|
export default NumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["NumberInput.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["NumberInput.tsx"],"names":["React","useEffect","useState","TextInput","isString","isNumber","isNaN","NumberInput","onChangeText","value","defaultValue","props","formatValueToStringNumber","valueToFormat","currentStringNumberValue","test","slice","toString","setCurrentStringNumberValue","handleChangeText","newValue","newStringNumberValue","number","parseFloat","defaultStringNumberValue","nextStringNumberValue"],"mappings":";;AAAA,OAAOA,KAAP,IAAoBC,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,KAA7B,QAA0C,QAA1C;;AAQA,MAAMC,WAAsB,GAAG,QAKzB;AAAA,MAL0B;AAC9BC,IAAAA,YAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,YAH8B;AAI9B,OAAGC;AAJ2B,GAK1B;;AACJ,QAAMC,yBAAyB,GAAG,CAChCC,aADgC,EAEhCC,wBAFgC,KAG7B;AACH,QAAID,aAAa,IAAI,IAArB,EAA2B;AACzB,UAAIT,QAAQ,CAACS,aAAD,CAAR,IAA2BA,aAAa,KAAK,EAAjD,EAAqD;AACnD,YAAI,WAAWE,IAAX,CAAgBF,aAAhB,CAAJ,EAAoC;AAClC,iBAAOA,aAAa,CAACG,KAAd,CAAoB,CAApB,CAAP;AACD,SAFD,MAEO,IAAI,oCAAoCD,IAApC,CAAyCF,aAAzC,CAAJ,EAA6D;AAClE,iBAAOA,aAAP;AACD,SAFM,MAEA,IAAIC,wBAAJ,EAA8B;AACnC,iBAAOA,wBAAP;AACD;AACF,OARD,MAQO,IAAIT,QAAQ,CAACQ,aAAD,CAAR,IAA2B,CAACP,KAAK,CAACO,aAAD,CAArC,EAAsD;AAC3D,eAAOA,aAAa,CAACI,QAAd,EAAP;AACD;AACF;;AAED,WAAO,GAAP;AACD,GAnBD;;AAqBA,QAAM,CAACH,wBAAD,EAA2BI,2BAA3B,IAA0DhB,QAAQ,CACtEU,yBAAyB,CAACH,KAAD,CAD6C,CAAxE;;AAIA,QAAMU,gBAAgB,GAAIC,QAAD,IAAsB;AAC7C,UAAMC,oBAAoB,GAAGT,yBAAyB,CACpDQ,QADoD,EAEpDN,wBAFoD,CAAtD;AAIA,UAAMQ,MAAM,GAAGC,UAAU,CAACF,oBAAD,CAAzB;AAEAH,IAAAA,2BAA2B,CAACG,oBAAD,CAA3B;AACAb,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGc,MAAH,CAAZ;AACD,GATD;AAWA;AACF;;;AACErB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMuB,wBAAwB,GAAGZ,yBAAyB,CACxDF,YADwD,EAExDI,wBAFwD,CAA1D;;AAKA,QAAIA,wBAAwB,KAAKU,wBAAjC,EAA2D;AACzDN,MAAAA,2BAA2B,CAACM,wBAAD,CAA3B;AACD,KARa,CASd;;AACD,GAVQ,EAUN,EAVM,CAAT,CAvCI,CAmDJ;;AACAvB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMwB,qBAAqB,GAAGb,yBAAyB,CACrDH,KADqD,EAErDK,wBAFqD,CAAvD;;AAKA,QAAIA,wBAAwB,KAAKW,qBAAjC,EAAwD;AACtDN,MAAAA,gBAAgB,CAACM,qBAAD,CAAhB;AACD,KARa,CASd;;AACD,GAVQ,EAUN,CAAChB,KAAD,CAVM,CAAT;AAYA,sBACE,oBAAC,SAAD;AACE,IAAA,YAAY,EAAC,SADf;AAEE,IAAA,KAAK,EAAEK,wBAFT;AAGE,IAAA,YAAY,EAAEK;AAHhB,KAIMR,KAJN,EADF;AAQD,CA7ED;;AA+EA,eAAeJ,WAAf","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { TextInput } from \"react-native\";\nimport { isString, isNumber, isNaN } from \"lodash\";\n\ninterface Props {\n value?: number | string;\n defaultValue?: number | string;\n onChangeText?: (value?: number) => void;\n}\n\nconst NumberInput: FC<Props> = ({\n onChangeText,\n value,\n defaultValue,\n ...props\n}) => {\n const formatValueToStringNumber = (\n valueToFormat?: number | string,\n currentStringNumberValue?: string\n ) => {\n if (valueToFormat != null) {\n if (isString(valueToFormat) && valueToFormat !== \"\") {\n if (/^0[1-9]$/.test(valueToFormat)) {\n return valueToFormat.slice(1);\n } else if (/^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$/.test(valueToFormat)) {\n return valueToFormat;\n } else if (currentStringNumberValue) {\n return currentStringNumberValue;\n }\n } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {\n return valueToFormat.toString();\n }\n }\n\n return \"0\";\n };\n\n const [currentStringNumberValue, setCurrentStringNumberValue] = useState(\n formatValueToStringNumber(value)\n );\n\n const handleChangeText = (newValue: string) => {\n const newStringNumberValue = formatValueToStringNumber(\n newValue,\n currentStringNumberValue\n );\n const number = parseFloat(newStringNumberValue);\n\n setCurrentStringNumberValue(newStringNumberValue);\n onChangeText?.(number);\n };\n\n /* set currentStringNumberValue directly to defaultValue if it exists on load\n ( no need to use TextInput's defaultValue because its value is always controlled & set ) */\n useEffect(() => {\n const defaultStringNumberValue = formatValueToStringNumber(\n defaultValue,\n currentStringNumberValue\n );\n\n if (currentStringNumberValue !== defaultStringNumberValue) {\n setCurrentStringNumberValue(defaultStringNumberValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // set new value if different from current value\n useEffect(() => {\n const nextStringNumberValue = formatValueToStringNumber(\n value,\n currentStringNumberValue\n );\n\n if (currentStringNumberValue !== nextStringNumberValue) {\n handleChangeText(nextStringNumberValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n return (\n <TextInput\n keyboardType=\"numeric\"\n value={currentStringNumberValue}\n onChangeText={handleChangeText}\n {...props}\n />\n );\n};\n\nexport default NumberInput;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.8",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "afb91aec7223adbde7640b85877af6e7ea4f361f"
|
|
84
84
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
3
|
import { isString, isNumber, isNaN } from "lodash";
|
|
4
4
|
const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
|
|
5
|
-
const formatValueToStringNumber =
|
|
5
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
6
6
|
if (valueToFormat != null) {
|
|
7
7
|
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
8
8
|
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
@@ -20,14 +20,31 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
return "0";
|
|
23
|
-
}
|
|
24
|
-
const [
|
|
23
|
+
};
|
|
24
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber(value));
|
|
25
25
|
const handleChangeText = (newValue) => {
|
|
26
|
-
const newStringNumberValue = formatValueToStringNumber(newValue,
|
|
26
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
27
27
|
const number = parseFloat(newStringNumberValue);
|
|
28
|
-
|
|
28
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
29
29
|
onChangeText?.(number);
|
|
30
30
|
};
|
|
31
|
-
|
|
31
|
+
/* set currentStringNumberValue directly to defaultValue if it exists on load
|
|
32
|
+
( no need to use TextInput's defaultValue because its value is always controlled & set ) */
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
const defaultStringNumberValue = formatValueToStringNumber(defaultValue, currentStringNumberValue);
|
|
35
|
+
if (currentStringNumberValue !== defaultStringNumberValue) {
|
|
36
|
+
setCurrentStringNumberValue(defaultStringNumberValue);
|
|
37
|
+
}
|
|
38
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
+
}, []);
|
|
40
|
+
// set new value if different from current value
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const nextStringNumberValue = formatValueToStringNumber(value, currentStringNumberValue);
|
|
43
|
+
if (currentStringNumberValue !== nextStringNumberValue) {
|
|
44
|
+
handleChangeText(nextStringNumberValue);
|
|
45
|
+
}
|
|
46
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
47
|
+
}, [value]);
|
|
48
|
+
return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
|
|
32
49
|
};
|
|
33
50
|
export default NumberInput;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC,
|
|
1
|
+
import React, { FC, useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
3
|
import { isString, isNumber, isNaN } from "lodash";
|
|
4
4
|
|
|
@@ -14,49 +14,75 @@ const NumberInput: FC<Props> = ({
|
|
|
14
14
|
defaultValue,
|
|
15
15
|
...props
|
|
16
16
|
}) => {
|
|
17
|
-
const formatValueToStringNumber =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return valueToFormat.toString();
|
|
17
|
+
const formatValueToStringNumber = (
|
|
18
|
+
valueToFormat?: number | string,
|
|
19
|
+
currentStringNumberValue?: string
|
|
20
|
+
) => {
|
|
21
|
+
if (valueToFormat != null) {
|
|
22
|
+
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
23
|
+
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
24
|
+
return valueToFormat.slice(1);
|
|
25
|
+
} else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
|
|
26
|
+
return valueToFormat;
|
|
27
|
+
} else if (currentStringNumberValue) {
|
|
28
|
+
return currentStringNumberValue;
|
|
30
29
|
}
|
|
30
|
+
} else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
|
|
31
|
+
return valueToFormat.toString();
|
|
31
32
|
}
|
|
33
|
+
}
|
|
32
34
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
[]
|
|
36
|
-
);
|
|
35
|
+
return "0";
|
|
36
|
+
};
|
|
37
37
|
|
|
38
|
-
const [
|
|
38
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(
|
|
39
39
|
formatValueToStringNumber(value)
|
|
40
40
|
);
|
|
41
41
|
|
|
42
42
|
const handleChangeText = (newValue: string) => {
|
|
43
43
|
const newStringNumberValue = formatValueToStringNumber(
|
|
44
44
|
newValue,
|
|
45
|
-
|
|
45
|
+
currentStringNumberValue
|
|
46
46
|
);
|
|
47
47
|
const number = parseFloat(newStringNumberValue);
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
50
50
|
onChangeText?.(number);
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
+
/* set currentStringNumberValue directly to defaultValue if it exists on load
|
|
54
|
+
( no need to use TextInput's defaultValue because its value is always controlled & set ) */
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
const defaultStringNumberValue = formatValueToStringNumber(
|
|
57
|
+
defaultValue,
|
|
58
|
+
currentStringNumberValue
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
if (currentStringNumberValue !== defaultStringNumberValue) {
|
|
62
|
+
setCurrentStringNumberValue(defaultStringNumberValue);
|
|
63
|
+
}
|
|
64
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
67
|
+
// set new value if different from current value
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
const nextStringNumberValue = formatValueToStringNumber(
|
|
70
|
+
value,
|
|
71
|
+
currentStringNumberValue
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
if (currentStringNumberValue !== nextStringNumberValue) {
|
|
75
|
+
handleChangeText(nextStringNumberValue);
|
|
76
|
+
}
|
|
77
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
+
}, [value]);
|
|
79
|
+
|
|
53
80
|
return (
|
|
54
81
|
<TextInput
|
|
55
82
|
keyboardType="numeric"
|
|
56
|
-
{
|
|
57
|
-
value={stringNumberValue}
|
|
58
|
-
defaultValue={formatValueToStringNumber(defaultValue)}
|
|
83
|
+
value={currentStringNumberValue}
|
|
59
84
|
onChangeText={handleChangeText}
|
|
85
|
+
{...props}
|
|
60
86
|
/>
|
|
61
87
|
);
|
|
62
88
|
};
|