@draftbit/core 43.4.6-f4bf57.2 → 43.4.8-8cb99c.0
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 +44 -34
- package/lib/commonjs/components/NumberInput.js.map +1 -1
- package/lib/commonjs/components/Portal/PortalManager.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
- package/lib/module/components/Elevation.js +4 -15
- package/lib/module/components/Elevation.js.map +1 -1
- package/lib/module/components/NumberInput.js +46 -36
- package/lib/module/components/NumberInput.js.map +1 -1
- package/lib/typescript/src/components/NumberInput.d.ts +2 -2
- package/package.json +2 -2
- package/src/components/NumberInput.js +40 -29
- package/src/components/NumberInput.tsx +59 -42
|
@@ -20,53 +20,63 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
20
20
|
const NumberInput = _ref => {
|
|
21
21
|
let {
|
|
22
22
|
onChangeText,
|
|
23
|
-
value
|
|
24
|
-
defaultValue
|
|
23
|
+
value,
|
|
24
|
+
defaultValue,
|
|
25
25
|
...props
|
|
26
26
|
} = _ref;
|
|
27
|
-
const [isDecimal, setIsDecimal] = (0, _react.useState)(value && !Number.isInteger(value));
|
|
28
|
-
const formatValueToString = (0, _react.useCallback)(valueToStringify => {
|
|
29
|
-
if (valueToStringify != null) {
|
|
30
|
-
if ((0, _lodash.isString)(valueToStringify) && /^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToStringify)) {
|
|
31
|
-
console.log("is string", value);
|
|
32
|
-
return valueToStringify;
|
|
33
|
-
} else if ((0, _lodash.isNumber)(valueToStringify)) {
|
|
34
|
-
return valueToStringify.toString();
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
27
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
28
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
29
|
+
if (valueToFormat != null) {
|
|
30
|
+
if ((0, _lodash.isString)(valueToFormat) && valueToFormat !== "") {
|
|
31
|
+
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
32
|
+
return valueToFormat.slice(1);
|
|
33
|
+
} else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
|
|
34
|
+
return valueToFormat;
|
|
35
|
+
} else if (currentStringNumberValue) {
|
|
36
|
+
return currentStringNumberValue;
|
|
37
|
+
}
|
|
38
|
+
} else if ((0, _lodash.isNumber)(valueToFormat) && !(0, _lodash.isNaN)(valueToFormat)) {
|
|
39
|
+
return valueToFormat.toString();
|
|
40
|
+
}
|
|
51
41
|
}
|
|
52
42
|
|
|
53
|
-
return
|
|
43
|
+
return "0";
|
|
54
44
|
};
|
|
55
45
|
|
|
46
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = (0, _react.useState)(formatValueToStringNumber(value));
|
|
47
|
+
|
|
56
48
|
const handleChangeText = newValue => {
|
|
57
|
-
const
|
|
58
|
-
const number =
|
|
59
|
-
|
|
49
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
50
|
+
const number = parseFloat(newStringNumberValue);
|
|
51
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
60
52
|
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
|
|
61
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 ) */
|
|
62
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
|
|
73
|
+
|
|
74
|
+
}, [value]);
|
|
63
75
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
64
|
-
keyboardType: "numeric"
|
|
65
|
-
|
|
66
|
-
value: makeFinalValue(value),
|
|
67
|
-
defaultValue: makeFinalValue(defaultValue),
|
|
76
|
+
keyboardType: "numeric",
|
|
77
|
+
value: currentStringNumberValue,
|
|
68
78
|
onChangeText: handleChangeText
|
|
69
|
-
}));
|
|
79
|
+
}, props));
|
|
70
80
|
};
|
|
71
81
|
|
|
72
82
|
var _default = NumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["NumberInput.tsx"],"names":["NumberInput","onChangeText","value","defaultValue","props","
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PortalManager.
|
|
1
|
+
{"version":3,"sources":["PortalManager.tsx"],"names":["PortalManager","React","PureComponent","portals","key","children","setState","state","map","item","filter","render","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AASA;AACA;AACA;AACe,MAAMA,aAAN,SAA4BC,KAAK,CAACC,aAAlC,CAA2D;AAAA;AAAA;;AAAA,mCACzD;AACbC,MAAAA,OAAO,EAAE;AADI,KADyD;;AAAA,mCAKhE,CAACC,GAAD,EAAcC,QAAd,KAA4C;AAClD,WAAKC,QAAL,CAAeC,KAAD,KAAY;AACxBJ,QAAAA,OAAO,EAAE,CAAC,GAAGI,KAAK,CAACJ,OAAV,EAAmB;AAAEC,UAAAA,GAAF;AAAOC,UAAAA;AAAP,SAAnB;AADe,OAAZ,CAAd;AAGD,KATuE;;AAAA,oCAW/D,CAACD,GAAD,EAAcC,QAAd,KACP,KAAKC,QAAL,CAAeC,KAAD,KAAY;AACxBJ,MAAAA,OAAO,EAAEI,KAAK,CAACJ,OAAN,CAAcK,GAAd,CAAmBC,IAAD,IAAU;AACnC,YAAIA,IAAI,CAACL,GAAL,KAAaA,GAAjB,EAAsB;AACpB,iBAAO,EAAE,GAAGK,IAAL;AAAWJ,YAAAA;AAAX,WAAP;AACD;;AACD,eAAOI,IAAP;AACD,OALQ;AADe,KAAZ,CAAd,CAZsE;;AAAA,qCAqB7DL,GAAD,IACR,KAAKE,QAAL,CAAeC,KAAD,KAAY;AACxBJ,MAAAA,OAAO,EAAEI,KAAK,CAACJ,OAAN,CAAcO,MAAd,CAAsBD,IAAD,IAAUA,IAAI,CAACL,GAAL,KAAaA,GAA5C;AADe,KAAZ,CAAd,CAtBsE;AAAA;;AA0BxEO,EAAAA,MAAM,GAAG;AACP,WAAO,KAAKJ,KAAL,CAAWJ,OAAX,CAAmBK,GAAnB,CAAuB;AAAA,UAAC;AAAEJ,QAAAA,GAAF;AAAOC,QAAAA;AAAP,OAAD;AAAA,0BAC5B,oBAAC,iBAAD;AACE,QAAA,GAAG,EAAED,GADP;AAEE,QAAA,WAAW,EACT;AAAM;AAHV;AAKE,QAAA,aAAa,EAAC,UALhB;AAME,QAAA,KAAK,EAAEQ,wBAAWC;AANpB,SAQGR,QARH,CAD4B;AAAA,KAAvB,CAAP;AAYD;;AAvCuE","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\n\ntype State = {\n portals: Array<{\n key: number;\n children: React.ReactNode;\n }>;\n};\n\n/**\n * Portal host is the component which actually renders all Portals.\n */\nexport default class PortalManager extends React.PureComponent<{}, State> {\n state: State = {\n portals: [],\n };\n\n mount = (key: number, children: React.ReactNode) => {\n this.setState((state) => ({\n portals: [...state.portals, { key, children }],\n }));\n };\n\n update = (key: number, children: React.ReactNode) =>\n this.setState((state) => ({\n portals: state.portals.map((item) => {\n if (item.key === key) {\n return { ...item, children };\n }\n return item;\n }),\n }));\n\n unmount = (key: number) =>\n this.setState((state) => ({\n portals: state.portals.filter((item) => item.key !== key),\n }));\n\n render() {\n return this.state.portals.map(({ key, children }) => (\n <View\n key={key}\n collapsable={\n false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */\n }\n pointerEvents=\"box-none\"\n style={StyleSheet.absoluteFill}\n >\n {children}\n </View>\n ));\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RowHeadlineImageIcon.
|
|
1
|
+
{"version":3,"sources":["RowHeadlineImageIcon.ts"],"names":["SEED_DATA_PROPS","title","label","description","icon","defaultValue","IMAGE_PROP","MULTILINE_PROP","editable","SUBTITLE_PROP","SEED_DATA","name","tag","category","COMPONENT_TYPES","row","layout","props","image","subtitle","multilineSubtitle"],"mappings":"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","sourcesContent":["import {\n COMPONENT_TYPES,\n createIconProp,\n createTextProp,\n createImageProp,\n createStaticBoolProp,\n} from \"@draftbit/types\";\n\nconst SEED_DATA_PROPS = {\n title: createTextProp({\n label: \"Title\",\n description: \"Headline text to display\",\n }),\n icon: createIconProp({\n defaultValue: null,\n }),\n};\n\nconst IMAGE_PROP = createImageProp();\nconst MULTILINE_PROP = createStaticBoolProp({\n defaultValue: true,\n editable: false,\n});\nconst SUBTITLE_PROP = createTextProp({\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n defaultValue: \"San Diego\",\n});\n\nexport const SEED_DATA = [\n {\n name: \"Row Single Line Headline Icon\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned headline text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n },\n },\n {\n name: \"Row Single Line Headline Icon Image\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned image and headline text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n image: IMAGE_PROP,\n },\n },\n {\n name: \"Row Double Line Headline Icon\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned headline text and subtitle text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n subtitle: SUBTITLE_PROP,\n },\n },\n {\n name: \"Row Double Line Headline Image Icon\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned headline text and subtitle text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n image: IMAGE_PROP,\n subtitle: SUBTITLE_PROP,\n },\n },\n {\n name: \"Row Multiline Headline Icon\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned headline text and multiline subtitle text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n multilineSubtitle: MULTILINE_PROP,\n subtitle: createTextProp({\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n defaultValue:\n \"San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate\",\n }),\n },\n },\n {\n name: \"Row Multiline Headline Image Icon\",\n tag: \"RowHeadlineImageIcon\",\n description:\n \"A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n layout: {},\n props: {\n ...SEED_DATA_PROPS,\n image: IMAGE_PROP,\n multilineSubtitle: MULTILINE_PROP,\n subtitle: createTextProp({\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n defaultValue:\n \"San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate\",\n }),\n },\n },\n];\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { Animated, StyleSheet, View } from "react-native";
|
|
3
5
|
import shadow from "../styles/shadow";
|
|
4
6
|
import { withTheme } from "../theming";
|
|
5
|
-
/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
|
|
6
7
|
|
|
8
|
+
/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
|
|
7
9
|
const Elevation = _ref => {
|
|
8
10
|
let {
|
|
9
11
|
style,
|
|
@@ -19,24 +21,11 @@ const Elevation = _ref => {
|
|
|
19
21
|
colors
|
|
20
22
|
} = theme;
|
|
21
23
|
const borderRadius = radius;
|
|
22
|
-
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
24
|
+
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
23
25
|
style: [{
|
|
24
26
|
borderRadius,
|
|
25
27
|
backgroundColor: colors.surface
|
|
26
28
|
}, elevation ? shadow(elevation) : null, style]
|
|
27
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
28
|
-
style: {
|
|
29
|
-
overflow: "hidden",
|
|
30
|
-
borderRadius
|
|
31
|
-
}
|
|
32
|
-
}, children));
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export default withTheme(Elevation);
|
|
36
|
-
//# sourceMappingURL=Elevation.js.map style: [{
|
|
37
|
-
borderRadius,
|
|
38
|
-
backgroundColor: colors.surface
|
|
39
|
-
}, elevation ? shadow(elevation) : null, style]
|
|
40
29
|
}), /*#__PURE__*/React.createElement(View, {
|
|
41
30
|
style: {
|
|
42
31
|
overflow: "hidden",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Elevation.
|
|
1
|
+
{"version":3,"sources":["Elevation.tsx"],"names":["React","Animated","StyleSheet","View","shadow","withTheme","Elevation","style","theme","children","rest","elevation","borderRadius","radius","flatten","colors","backgroundColor","surface","overflow"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,UAFF,EAMEC,IANF,QAOO,cAPP;AAQA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,SAAT,QAA0B,YAA1B;;AAQA;AACA,MAAMC,SAA0B,GAAG,QAAyC;AAAA,MAAxC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA,QAAhB;AAA0B,OAAGC;AAA7B,GAAwC;AAC1E,QAAM;AAAEC,IAAAA,SAAS,GAAG,CAAd;AAAiBC,IAAAA,YAAY,EAAEC;AAA/B,MACJX,UAAU,CAACY,OAAX,CAAmBP,KAAnB,KAA6B,EAD/B;AAEA,QAAM;AAAEQ,IAAAA;AAAF,MAAaP,KAAnB;AACA,QAAMI,YAAY,GAAGC,MAArB;AAEA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMH,IADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEE,MAAAA,YADF;AAEEI,MAAAA,eAAe,EAAED,MAAM,CAACE;AAF1B,KADK,EAKLN,SAAS,GAAGP,MAAM,CAACO,SAAD,CAAT,GAAuB,IAL3B,EAMLJ,KANK;AAFT,mBAWE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE;AAAEW,MAAAA,QAAQ,EAAE,QAAZ;AAAsBN,MAAAA;AAAtB;AAAb,KAAoDH,QAApD,CAXF,CADF;AAeD,CArBD;;AAuBA,eAAeJ,SAAS,CAACC,SAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport {\n Animated,\n StyleSheet,\n ViewProps,\n StyleProp,\n ViewStyle,\n View,\n} from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & ViewProps;\n\n/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */\nconst Elevation: React.FC<Props> = ({ style, theme, children, ...rest }) => {\n const { elevation = 4, borderRadius: radius } =\n StyleSheet.flatten(style) || {};\n const { colors } = theme;\n const borderRadius = radius;\n\n return (\n <Animated.View\n {...rest}\n style={[\n {\n borderRadius,\n backgroundColor: colors.surface,\n },\n elevation ? shadow(elevation) : null,\n style,\n ]}\n >\n <View style={{ overflow: \"hidden\", borderRadius }}>{children}</View>\n </Animated.View>\n );\n};\n\nexport default withTheme(Elevation);\n"]}
|
|
@@ -1,59 +1,69 @@
|
|
|
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
|
-
import { isString, isNumber } from "lodash";
|
|
5
|
+
import { isString, isNumber, isNaN } from "lodash";
|
|
6
6
|
|
|
7
7
|
const NumberInput = _ref => {
|
|
8
8
|
let {
|
|
9
9
|
onChangeText,
|
|
10
|
-
value
|
|
11
|
-
defaultValue
|
|
10
|
+
value,
|
|
11
|
+
defaultValue,
|
|
12
12
|
...props
|
|
13
13
|
} = _ref;
|
|
14
|
-
const [isDecimal, setIsDecimal] = useState(value && !Number.isInteger(value));
|
|
15
|
-
const formatValueToString = useCallback(valueToStringify => {
|
|
16
|
-
if (valueToStringify != null) {
|
|
17
|
-
if (isString(valueToStringify) && /^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToStringify)) {
|
|
18
|
-
console.log("is string", value);
|
|
19
|
-
return valueToStringify;
|
|
20
|
-
} else if (isNumber(valueToStringify)) {
|
|
21
|
-
return valueToStringify.toString();
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
14
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
15
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
16
|
+
if (valueToFormat != null) {
|
|
17
|
+
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
18
|
+
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
19
|
+
return valueToFormat.slice(1);
|
|
20
|
+
} else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
|
|
21
|
+
return valueToFormat;
|
|
22
|
+
} else if (currentStringNumberValue) {
|
|
23
|
+
return currentStringNumberValue;
|
|
24
|
+
}
|
|
25
|
+
} else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
|
|
26
|
+
return valueToFormat.toString();
|
|
27
|
+
}
|
|
38
28
|
}
|
|
39
29
|
|
|
40
|
-
return
|
|
30
|
+
return "0";
|
|
41
31
|
};
|
|
42
32
|
|
|
33
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber(value));
|
|
34
|
+
|
|
43
35
|
const handleChangeText = newValue => {
|
|
44
|
-
const
|
|
45
|
-
const number =
|
|
46
|
-
|
|
36
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
37
|
+
const number = parseFloat(newStringNumberValue);
|
|
38
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
47
39
|
onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
|
|
48
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 ) */
|
|
49
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
|
|
60
|
+
|
|
61
|
+
}, [value]);
|
|
50
62
|
return /*#__PURE__*/React.createElement(TextInput, _extends({
|
|
51
|
-
keyboardType: "numeric"
|
|
52
|
-
|
|
53
|
-
value: makeFinalValue(value),
|
|
54
|
-
defaultValue: makeFinalValue(defaultValue),
|
|
63
|
+
keyboardType: "numeric",
|
|
64
|
+
value: currentStringNumberValue,
|
|
55
65
|
onChangeText: handleChangeText
|
|
56
|
-
}));
|
|
66
|
+
}, props));
|
|
57
67
|
};
|
|
58
68
|
|
|
59
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"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
interface Props {
|
|
3
3
|
value?: number | string;
|
|
4
4
|
defaultValue?: number | string;
|
|
5
5
|
onChangeText?: (value?: number) => void;
|
|
6
6
|
}
|
|
7
|
-
declare const NumberInput:
|
|
7
|
+
declare const NumberInput: FC<Props>;
|
|
8
8
|
export default NumberInput;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.8-8cb99c.0+8cb99c8f",
|
|
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": "8cb99c8fe6dc34284cdf3b57ef50f918a8c9770f"
|
|
84
84
|
}
|
|
@@ -1,39 +1,50 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
|
-
import { isString, isNumber } from "lodash";
|
|
4
|
-
const NumberInput = ({ onChangeText, value
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
import { isString, isNumber, isNaN } from "lodash";
|
|
4
|
+
const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
|
|
5
|
+
const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
|
|
6
|
+
if (valueToFormat != null) {
|
|
7
|
+
if (isString(valueToFormat) && valueToFormat !== "") {
|
|
8
|
+
if (/^0[1-9]$/.test(valueToFormat)) {
|
|
9
|
+
return valueToFormat.slice(1);
|
|
10
|
+
}
|
|
11
|
+
else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
|
|
12
|
+
return valueToFormat;
|
|
13
|
+
}
|
|
14
|
+
else if (currentStringNumberValue) {
|
|
15
|
+
return currentStringNumberValue;
|
|
16
|
+
}
|
|
12
17
|
}
|
|
13
|
-
else if (isNumber(
|
|
14
|
-
return
|
|
18
|
+
else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
|
|
19
|
+
return valueToFormat.toString();
|
|
15
20
|
}
|
|
16
21
|
}
|
|
17
|
-
return "";
|
|
18
|
-
}, [value]);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (value) {
|
|
21
|
-
setIsDecimal(formatValueToString(value).includes("."));
|
|
22
|
-
}
|
|
23
|
-
}, [value, formatValueToString]);
|
|
24
|
-
const makeFinalValue = (valueToMakeFinal) => {
|
|
25
|
-
let stringValue = formatValueToString(valueToMakeFinal);
|
|
26
|
-
if (isDecimal && !stringValue.includes(".")) {
|
|
27
|
-
stringValue = `${stringValue}.`;
|
|
28
|
-
}
|
|
29
|
-
return stringValue;
|
|
22
|
+
return "0";
|
|
30
23
|
};
|
|
24
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber(value));
|
|
31
25
|
const handleChangeText = (newValue) => {
|
|
32
|
-
const
|
|
33
|
-
const number =
|
|
34
|
-
|
|
26
|
+
const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
|
|
27
|
+
const number = parseFloat(newStringNumberValue);
|
|
28
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
35
29
|
onChangeText?.(number);
|
|
36
30
|
};
|
|
37
|
-
|
|
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 }));
|
|
38
49
|
};
|
|
39
50
|
export default NumberInput;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { FC, useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
|
-
import { isString, isNumber } from "lodash";
|
|
3
|
+
import { isString, isNumber, isNaN } from "lodash";
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
6
|
value?: number | string;
|
|
@@ -8,64 +8,81 @@ interface Props {
|
|
|
8
8
|
onChangeText?: (value?: number) => void;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
const NumberInput:
|
|
11
|
+
const NumberInput: FC<Props> = ({
|
|
12
12
|
onChangeText,
|
|
13
|
-
value
|
|
14
|
-
defaultValue
|
|
13
|
+
value,
|
|
14
|
+
defaultValue,
|
|
15
15
|
...props
|
|
16
16
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return valueToStringify.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
|
}
|
|
32
|
-
|
|
33
|
-
return "";
|
|
34
|
-
},
|
|
35
|
-
[value]
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (value) {
|
|
40
|
-
setIsDecimal(formatValueToString(value).includes("."));
|
|
41
33
|
}
|
|
42
|
-
}, [value, formatValueToString]);
|
|
43
34
|
|
|
44
|
-
|
|
45
|
-
let stringValue = formatValueToString(valueToMakeFinal);
|
|
46
|
-
|
|
47
|
-
if (isDecimal && !stringValue.includes(".")) {
|
|
48
|
-
stringValue = `${stringValue}.`;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return stringValue;
|
|
35
|
+
return "0";
|
|
52
36
|
};
|
|
53
37
|
|
|
38
|
+
const [currentStringNumberValue, setCurrentStringNumberValue] = useState(
|
|
39
|
+
formatValueToStringNumber(value)
|
|
40
|
+
);
|
|
41
|
+
|
|
54
42
|
const handleChangeText = (newValue: string) => {
|
|
55
|
-
const
|
|
56
|
-
|
|
43
|
+
const newStringNumberValue = formatValueToStringNumber(
|
|
44
|
+
newValue,
|
|
45
|
+
currentStringNumberValue
|
|
46
|
+
);
|
|
47
|
+
const number = parseFloat(newStringNumberValue);
|
|
57
48
|
|
|
58
|
-
|
|
49
|
+
setCurrentStringNumberValue(newStringNumberValue);
|
|
59
50
|
onChangeText?.(number);
|
|
60
51
|
};
|
|
61
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
|
+
|
|
62
80
|
return (
|
|
63
81
|
<TextInput
|
|
64
82
|
keyboardType="numeric"
|
|
65
|
-
{
|
|
66
|
-
value={makeFinalValue(value)}
|
|
67
|
-
defaultValue={makeFinalValue(defaultValue)}
|
|
83
|
+
value={currentStringNumberValue}
|
|
68
84
|
onChangeText={handleChangeText}
|
|
85
|
+
{...props}
|
|
69
86
|
/>
|
|
70
87
|
);
|
|
71
88
|
};
|