Number field revamp

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

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",

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 { FieldTypeNumber } from "../../../../../../../shell/components/FieldTypeNumber";
 
 import styles from "./Field.less";
 import { MemoryRouter } from "react-router";
@@ -859,16 +860,12 @@ export const Field = ({
     case "number":
       return (
         <FieldShell settings={fieldData} errors={errors}>
-          <TextField
-            size="small"
-            variant="outlined"
-            type="number"
-            fullWidth
-            value={value ? value.toString() : "0"}
+          <FieldTypeNumber
+            value={value?.toString() || "0"}
             name={name}
             required={required}
-            onChange={(evt) => onChange(evt.target.value, name)}
-            error={errors && Object.values(errors)?.some((error) => !!error)}
+            onChange={onChange}
+            hasError={errors && Object.values(errors)?.some((error) => !!error)}
           />
         </FieldShell>
       );

src/shell/components/FieldTypeNumber.tsx

@@ -0,0 +1,94 @@
+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 { NumberFormatInput } from "./NumberFormatInput";
+
+type FieldTypeNumberProps = {
+  required: boolean;
+  name: string;
+  value: string;
+  onChange: (value: string, 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") => {
+    const integerFractionalSplit = value.toString().split(".");
+
+    switch (action) {
+      case "increment":
+        integerFractionalSplit[0] = (+integerFractionalSplit[0] + 1).toString();
+        break;
+
+      case "decrement":
+        integerFractionalSplit[0] = (+integerFractionalSplit[0] - 1).toString();
+        break;
+
+      default:
+        break;
+    }
+
+    onChange(integerFractionalSplit.join("."), name);
+  };
+
+  return (
+    <TextField
+      inputRef={numberInputRef}
+      variant="outlined"
+      fullWidth
+      value={value?.toString() || "0"}
+      name={name}
+      required={required}
+      onChange={(evt) => {
+        onChange(evt.target.value?.replace(/^0+/, "") ?? "0", name);
+      }}
+      onKeyDown={(evt) => {
+        if (
+          (evt.key === "Backspace" || evt.key === "Delete") &&
+          value === "0"
+        ) {
+          evt.preventDefault();
+        }
+      }}
+      error={hasError}
+      InputProps={{
+        endAdornment: (
+          <Stack direction="row" gap={1}>
+            <IconButton
+              size="small"
+              onClick={() => modifyNumberValue("decrement")}
+            >
+              <RemoveRoundedIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={() => modifyNumberValue("increment")}
+            >
+              <AddRoundedIcon fontSize="small" />
+            </IconButton>
+          </Stack>
+        ),
+        inputComponent: NumberFormatInput as any,
+        inputProps: {
+          thousandSeparator: true,
+          valueIsNumericString: true,
+        },
+      }}
+    />
+  );
+};

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<InputAttributes>,
+  NumberFormatInputProps
+>((props, ref) => {
+  const { onChange, ...other } = props;
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value || "0",
+          },
+        });
+      }}
+    />
+  );
+});