From cda7c621cd6a6c0c987c19d5b4e34d768d01d91b Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Tue, 13 Feb 2024 13:47:01 +0800 Subject: [PATCH 01/10] task: use react-number-format --- package-lock.json | 21 ++++++++++++ package.json | 1 + .../src/app/components/Editor/Field/Field.tsx | 10 +++++- .../components/NumberFormatInput/index.tsx | 32 +++++++++++++++++++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/shell/components/NumberFormatInput/index.tsx diff --git a/package-lock.json b/package-lock.json index b141d9885e..de66fa7ff3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,6 +59,7 @@ "react-flatpickr": "^3.10.7", "react-measure": "^2.5.2", "react-monaco-editor": "^0.47.0", + "react-number-format": "^5.3.1", "react-redux": "^7.2.4", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", @@ -11883,6 +11884,18 @@ "react": "^17.x" } }, + "node_modules/react-number-format": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.1.tgz", + "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-redux": { "version": "7.2.8", "license": "MIT", @@ -23299,6 +23312,14 @@ "prop-types": "^15.8.1" } }, + "react-number-format": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.1.tgz", + "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-redux": { "version": "7.2.8", "requires": { diff --git a/package.json b/package.json index a2d4ebae5c..3ac3415d71 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "react-flatpickr": "^3.10.7", "react-measure": "^2.5.2", "react-monaco-editor": "^0.47.0", + "react-number-format": "^5.3.1", "react-redux": "^7.2.4", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index 35e4aee580..9a99c444d4 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -52,6 +52,7 @@ import { import { FieldTypeDate } from "../../../../../../../shell/components/FieldTypeDate"; import { FieldTypeDateTime } from "../../../../../../../shell/components/FieldTypeDateTime"; import { FieldTypeSort } from "../../../../../../../shell/components/FieldTypeSort"; +import { NumberFormatInput } from "../../../../../../../shell/components/NumberFormatInput"; import styles from "./Field.less"; import { MemoryRouter } from "react-router"; @@ -67,6 +68,7 @@ import { import { ResolvedOption } from "./ResolvedOption"; import { LinkOption } from "./LinkOption"; import { FieldTypeMedia } from "../../FieldTypeMedia"; +import { NumericFormat } from "react-number-format"; const AIFieldShell = withAI(FieldShell); @@ -838,13 +840,19 @@ export const Field = ({ onChange(evt.target.value, name)} error={errors && Object.values(errors)?.some((error) => !!error)} + InputProps={{ + inputComponent: NumberFormatInput as any, + inputProps: { + thousandSeparator: true, + valueIsNumericString: true, + }, + }} /> ); diff --git a/src/shell/components/NumberFormatInput/index.tsx b/src/shell/components/NumberFormatInput/index.tsx new file mode 100644 index 0000000000..40be8f375e --- /dev/null +++ b/src/shell/components/NumberFormatInput/index.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from "react"; +import { + NumericFormatProps, + InputAttributes, + NumericFormat, +} from "react-number-format"; + +type NumberFormatInputProps = { + onChange: (event: { target: { name: string; value: string } }) => void; + name: string; +}; +export const NumberFormatInput = forwardRef< + NumericFormatProps, + NumberFormatInputProps +>((props, ref) => { + const { onChange, ...other } = props; + + return ( + { + onChange({ + target: { + name: props.name, + value: values.value, + }, + }); + }} + /> + ); +}); From 45cf9d4eff5c00e9f428b5b255380578c993cce7 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 10:28:10 +0800 Subject: [PATCH 02/10] task: add decrement and increment buttons --- .../src/app/components/Editor/Field/Field.tsx | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index f0f639cbd6..6332ba5f78 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -21,9 +21,12 @@ import { TextField, Dialog, IconButton, + Stack, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; +import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; +import AddRoundedIcon from "@mui/icons-material/AddRounded"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -859,18 +862,52 @@ export const Field = ({ ); case "number": + const modifyNumberValue = (action: "increment" | "decrement") => { + const numberValue = value.toString().split("."); + + switch (action) { + case "increment": + numberValue[0] = (+numberValue[0] + 1).toString(); + onChange(+numberValue.join("."), name); + break; + + case "decrement": + numberValue[0] = (+numberValue[0] - 1).toString(); + onChange(+numberValue.join("."), name); + break; + + default: + break; + } + }; + return ( onChange(evt.target.value, name)} + onChange={(evt) => onChange(+evt.target.value, name)} error={errors && Object.values(errors)?.some((error) => !!error)} InputProps={{ + endAdornment: ( + + modifyNumberValue("decrement")} + > + + + modifyNumberValue("increment")} + > + + + + ), inputComponent: NumberFormatInput as any, inputProps: { thousandSeparator: true, From da20b569e940dfea3f22bc23a4c5543778141d89 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 13:46:58 +0800 Subject: [PATCH 03/10] task: simplify increment/decrement functions --- .../src/app/components/Editor/Field/Field.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index 6332ba5f78..2ac0f87498 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -863,17 +863,13 @@ export const Field = ({ case "number": const modifyNumberValue = (action: "increment" | "decrement") => { - const numberValue = value.toString().split("."); - switch (action) { case "increment": - numberValue[0] = (+numberValue[0] + 1).toString(); - onChange(+numberValue.join("."), name); + onChange(+(+value + 1).toFixed(10), name); break; case "decrement": - numberValue[0] = (+numberValue[0] - 1).toString(); - onChange(+numberValue.join("."), name); + onChange(+(+value - 1).toFixed(10), name); break; default: @@ -889,7 +885,7 @@ export const Field = ({ value={value ? value.toString() : "0"} name={name} required={required} - onChange={(evt) => onChange(+evt.target.value, name)} + onChange={(evt) => onChange(evt.target.value, name)} error={errors && Object.values(errors)?.some((error) => !!error)} InputProps={{ endAdornment: ( From 428790f1efe08fafea7edea05e157d69542c54b4 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 15:59:04 +0800 Subject: [PATCH 04/10] task: default to 0 --- src/shell/components/NumberFormatInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/NumberFormatInput/index.tsx b/src/shell/components/NumberFormatInput/index.tsx index 40be8f375e..d62a5441e0 100644 --- a/src/shell/components/NumberFormatInput/index.tsx +++ b/src/shell/components/NumberFormatInput/index.tsx @@ -23,7 +23,7 @@ export const NumberFormatInput = forwardRef< onChange({ target: { name: props.name, - value: values.value, + value: values.value || "0", }, }); }} From 5038ee17e72cf9a035395857feabedd76f6ecbe5 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 15:59:22 +0800 Subject: [PATCH 05/10] task: preserve cursor location when value defaults to 0 --- .../src/app/components/Editor/Field/Field.tsx | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index 2ac0f87498..23be0a87f3 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -1,4 +1,11 @@ -import { useMemo, useCallback, useState, useEffect, ChangeEvent } from "react"; +import { + useMemo, + useCallback, + useState, + useEffect, + ChangeEvent, + useRef, +} from "react"; import ReactDOM from "react-dom"; import { useDispatch, useSelector } from "react-redux"; import moment from "moment-timezone"; @@ -72,8 +79,10 @@ import { ResolvedOption } from "./ResolvedOption"; import { LinkOption } from "./LinkOption"; import { FieldTypeMedia } from "../../FieldTypeMedia"; import { NumericFormat } from "react-number-format"; +import { withCursorPosition } from "../../../../../../../shell/components/withCursorPosition"; const AIFieldShell = withAI(FieldShell); +const TextFieldWithCursorPosition = withCursorPosition(TextField); const sortHTML = (a: any, b: any) => { const nameA = String(a.html) && String(a.html).toUpperCase(); // ignore upper and lowercase @@ -877,15 +886,34 @@ export const Field = ({ } }; + const numberInputRef = useRef(null); + + useEffect(() => { + if (value === 0) { + numberInputRef.current?.setSelectionRange(1, 1); + } + }, [value]); + return ( onChange(evt.target.value, name)} + onChange={(evt) => { + onChange(isNaN(+evt.target.value) ? 0 : +evt.target.value, name); + }} + onKeyDown={(evt) => { + if ( + (evt.key === "Backspace" || evt.key === "Delete") && + value === 0 + ) { + evt.preventDefault(); + } + }} error={errors && Object.values(errors)?.some((error) => !!error)} InputProps={{ endAdornment: ( From 4776588640091eab63f53af21e079b55edfe32ec Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 16:16:30 +0800 Subject: [PATCH 06/10] task: created separate FieldTypeNumber component --- .../src/app/components/Editor/Field/Field.tsx | 68 ++------------ src/shell/components/FieldTypeNumber.tsx | 88 +++++++++++++++++++ 2 files changed, 93 insertions(+), 63 deletions(-) create mode 100644 src/shell/components/FieldTypeNumber.tsx diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index 23be0a87f3..201aab9a39 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -63,6 +63,7 @@ import { FieldTypeDate } from "../../../../../../../shell/components/FieldTypeDa import { FieldTypeDateTime } from "../../../../../../../shell/components/FieldTypeDateTime"; import { FieldTypeSort } from "../../../../../../../shell/components/FieldTypeSort"; import { NumberFormatInput } from "../../../../../../../shell/components/NumberFormatInput"; +import { FieldTypeNumber } from "../../../../../../../shell/components/FieldTypeNumber"; import styles from "./Field.less"; import { MemoryRouter } from "react-router"; @@ -871,73 +872,14 @@ export const Field = ({ ); case "number": - const modifyNumberValue = (action: "increment" | "decrement") => { - switch (action) { - case "increment": - onChange(+(+value + 1).toFixed(10), name); - break; - - case "decrement": - onChange(+(+value - 1).toFixed(10), name); - break; - - default: - break; - } - }; - - const numberInputRef = useRef(null); - - useEffect(() => { - if (value === 0) { - numberInputRef.current?.setSelectionRange(1, 1); - } - }, [value]); - return ( - { - onChange(isNaN(+evt.target.value) ? 0 : +evt.target.value, name); - }} - onKeyDown={(evt) => { - if ( - (evt.key === "Backspace" || evt.key === "Delete") && - value === 0 - ) { - evt.preventDefault(); - } - }} - error={errors && Object.values(errors)?.some((error) => !!error)} - InputProps={{ - endAdornment: ( - - modifyNumberValue("decrement")} - > - - - modifyNumberValue("increment")} - > - - - - ), - inputComponent: NumberFormatInput as any, - inputProps: { - thousandSeparator: true, - valueIsNumericString: true, - }, - }} + onChange={onChange} + hasError={errors && Object.values(errors)?.some((error) => !!error)} /> ); diff --git a/src/shell/components/FieldTypeNumber.tsx b/src/shell/components/FieldTypeNumber.tsx new file mode 100644 index 0000000000..26bc718369 --- /dev/null +++ b/src/shell/components/FieldTypeNumber.tsx @@ -0,0 +1,88 @@ +import { useEffect, useRef } from "react"; +import { IconButton, Stack, TextField } from "@mui/material"; +import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; +import AddRoundedIcon from "@mui/icons-material/AddRounded"; + +import { Error } from "../../apps/content-editor/src/app/components/Editor/Field/FieldShell"; +import { NumberFormatInput } from "./NumberFormatInput"; + +type FieldTypeNumberProps = { + required: boolean; + name: string; + value: number; + onChange: (value: number, name: string) => void; + hasError: boolean; +}; +export const FieldTypeNumber = ({ + required, + value, + onChange, + name, + hasError, +}: FieldTypeNumberProps) => { + const numberInputRef = useRef(null); + + useEffect(() => { + if (value === 0) { + numberInputRef.current?.setSelectionRange(1, 1); + } + }, [value]); + + const modifyNumberValue = (action: "increment" | "decrement") => { + switch (action) { + case "increment": + onChange(+(+value + 1).toFixed(10), name); + break; + + case "decrement": + onChange(+(+value - 1).toFixed(10), name); + break; + + default: + break; + } + }; + + return ( + { + onChange(isNaN(+evt.target.value) ? 0 : +evt.target.value, name); + }} + onKeyDown={(evt) => { + if ((evt.key === "Backspace" || evt.key === "Delete") && value === 0) { + evt.preventDefault(); + } + }} + error={hasError} + InputProps={{ + endAdornment: ( + + modifyNumberValue("decrement")} + > + + + modifyNumberValue("increment")} + > + + + + ), + inputComponent: NumberFormatInput as any, + inputProps: { + thousandSeparator: true, + valueIsNumericString: true, + }, + }} + /> + ); +}; From bd7cf8802a2d7ec3b0a92d53104d60de40dd5a03 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 22 Feb 2024 16:18:54 +0800 Subject: [PATCH 07/10] chore: cleanup --- .../src/app/components/Editor/Field/Field.tsx | 16 +--------------- src/shell/components/FieldTypeNumber.tsx | 1 - 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index 201aab9a39..addeee8bdf 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -1,11 +1,4 @@ -import { - useMemo, - useCallback, - useState, - useEffect, - ChangeEvent, - useRef, -} from "react"; +import { useMemo, useCallback, useState, useEffect, ChangeEvent } from "react"; import ReactDOM from "react-dom"; import { useDispatch, useSelector } from "react-redux"; import moment from "moment-timezone"; @@ -28,12 +21,9 @@ import { TextField, Dialog, IconButton, - Stack, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; -import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; -import AddRoundedIcon from "@mui/icons-material/AddRounded"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { @@ -62,7 +52,6 @@ import { import { FieldTypeDate } from "../../../../../../../shell/components/FieldTypeDate"; import { FieldTypeDateTime } from "../../../../../../../shell/components/FieldTypeDateTime"; import { FieldTypeSort } from "../../../../../../../shell/components/FieldTypeSort"; -import { NumberFormatInput } from "../../../../../../../shell/components/NumberFormatInput"; import { FieldTypeNumber } from "../../../../../../../shell/components/FieldTypeNumber"; import styles from "./Field.less"; @@ -79,11 +68,8 @@ import { import { ResolvedOption } from "./ResolvedOption"; import { LinkOption } from "./LinkOption"; import { FieldTypeMedia } from "../../FieldTypeMedia"; -import { NumericFormat } from "react-number-format"; -import { withCursorPosition } from "../../../../../../../shell/components/withCursorPosition"; const AIFieldShell = withAI(FieldShell); -const TextFieldWithCursorPosition = withCursorPosition(TextField); const sortHTML = (a: any, b: any) => { const nameA = String(a.html) && String(a.html).toUpperCase(); // ignore upper and lowercase diff --git a/src/shell/components/FieldTypeNumber.tsx b/src/shell/components/FieldTypeNumber.tsx index 26bc718369..363a5de632 100644 --- a/src/shell/components/FieldTypeNumber.tsx +++ b/src/shell/components/FieldTypeNumber.tsx @@ -3,7 +3,6 @@ import { IconButton, Stack, TextField } from "@mui/material"; import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; import AddRoundedIcon from "@mui/icons-material/AddRounded"; -import { Error } from "../../apps/content-editor/src/app/components/Editor/Field/FieldShell"; import { NumberFormatInput } from "./NumberFormatInput"; type FieldTypeNumberProps = { From bb797ce8b378611095551e5f610d1fb040acab21 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Mon, 26 Feb 2024 07:11:45 +0800 Subject: [PATCH 08/10] task: update test --- cypress/e2e/content/content.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/content/content.spec.js b/cypress/e2e/content/content.spec.js index fd65ed1871..b050031265 100644 --- a/cypress/e2e/content/content.spec.js +++ b/cypress/e2e/content/content.spec.js @@ -188,7 +188,7 @@ describe("Content Specs", () => { it("Number Field", () => { // NOTE: the timestamp is too large for the 'small int' column in the DB // limit is 4294967295 - cy.get("#12-9b96ec-tll2gn input[type=number]") + cy.get("#12-9b96ec-tll2gn input[type=text]") .focus() /* input type='number 'cannot be empty so rather than whitespace, it'd have a value of 0 From 54a639359a7aa66334a4a2dd1d1926c17bf9599c Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Tue, 27 Feb 2024 13:22:23 +0800 Subject: [PATCH 09/10] task: change increment/decrement logic --- .../src/app/components/Editor/Field/Field.tsx | 2 +- src/shell/components/FieldTypeNumber.tsx | 21 ++++++++++++------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index addeee8bdf..d37c9a41ff 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -861,7 +861,7 @@ export const Field = ({ return ( void; + value: string; + onChange: (value: string, name: string) => void; hasError: boolean; }; export const FieldTypeNumber = ({ @@ -22,24 +22,28 @@ export const FieldTypeNumber = ({ const numberInputRef = useRef(null); useEffect(() => { - if (value === 0) { + if (value === "0") { numberInputRef.current?.setSelectionRange(1, 1); } }, [value]); const modifyNumberValue = (action: "increment" | "decrement") => { + const integerFractionalSplit = value.toString().split("."); + switch (action) { case "increment": - onChange(+(+value + 1).toFixed(10), name); + integerFractionalSplit[0] = (+integerFractionalSplit[0] + 1).toString(); break; case "decrement": - onChange(+(+value - 1).toFixed(10), name); + integerFractionalSplit[0] = (+integerFractionalSplit[0] - 1).toString(); break; default: break; } + + onChange(integerFractionalSplit.join("."), name); }; return ( @@ -51,10 +55,13 @@ export const FieldTypeNumber = ({ name={name} required={required} onChange={(evt) => { - onChange(isNaN(+evt.target.value) ? 0 : +evt.target.value, name); + onChange(evt.target.value?.replace(/^0+/, "") ?? "0", name); }} onKeyDown={(evt) => { - if ((evt.key === "Backspace" || evt.key === "Delete") && value === 0) { + if ( + (evt.key === "Backspace" || evt.key === "Delete") && + value === "0" + ) { evt.preventDefault(); } }} From 5045420f4af939c1b1e8317c719d4bf48f40f654 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Fri, 15 Mar 2024 10:50:53 +0800 Subject: [PATCH 10/10] task: treat number values as numbers instead of strings --- .../src/app/components/Editor/Field/Field.tsx | 2 +- src/shell/components/FieldTypeNumber.tsx | 19 +++++++++---------- .../components/NumberFormatInput/index.tsx | 4 ++-- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx index d37c9a41ff..addeee8bdf 100644 --- a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx +++ b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx @@ -861,7 +861,7 @@ export const Field = ({ return ( void; + value: number; + onChange: (value: number, name: string) => void; hasError: boolean; }; export const FieldTypeNumber = ({ @@ -22,12 +22,14 @@ export const FieldTypeNumber = ({ const numberInputRef = useRef(null); useEffect(() => { - if (value === "0") { + if (value === 0) { numberInputRef.current?.setSelectionRange(1, 1); } }, [value]); const modifyNumberValue = (action: "increment" | "decrement") => { + if (value.toString().includes("e")) return; + const integerFractionalSplit = value.toString().split("."); switch (action) { @@ -43,7 +45,7 @@ export const FieldTypeNumber = ({ break; } - onChange(integerFractionalSplit.join("."), name); + onChange(+integerFractionalSplit.join("."), name); }; return ( @@ -51,17 +53,14 @@ export const FieldTypeNumber = ({ inputRef={numberInputRef} variant="outlined" fullWidth - value={value?.toString() || "0"} + value={value || 0} name={name} required={required} onChange={(evt) => { - onChange(evt.target.value?.replace(/^0+/, "") ?? "0", name); + onChange(+evt.target.value?.toString()?.replace(/^0+/, "") ?? 0, name); }} onKeyDown={(evt) => { - if ( - (evt.key === "Backspace" || evt.key === "Delete") && - value === "0" - ) { + if ((evt.key === "Backspace" || evt.key === "Delete") && value === 0) { evt.preventDefault(); } }} diff --git a/src/shell/components/NumberFormatInput/index.tsx b/src/shell/components/NumberFormatInput/index.tsx index d62a5441e0..6efa07b581 100644 --- a/src/shell/components/NumberFormatInput/index.tsx +++ b/src/shell/components/NumberFormatInput/index.tsx @@ -6,7 +6,7 @@ import { } from "react-number-format"; type NumberFormatInputProps = { - onChange: (event: { target: { name: string; value: string } }) => void; + onChange: (event: { target: { name: string; value: number } }) => void; name: string; }; export const NumberFormatInput = forwardRef< @@ -23,7 +23,7 @@ export const NumberFormatInput = forwardRef< onChange({ target: { name: props.name, - value: values.value || "0", + value: values.floatValue || 0, }, }); }}