@etsoo/materialui 1.1.85 → 1.1.87

package/lib/IntInputField.d.ts

@@ -3,7 +3,7 @@ import { InputFieldProps } from "./InputField";
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "value"> & {
+export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "value" | "defaultValue"> & {
     /**
      * Minimum value
      */

package/lib/IntInputField.js

@@ -2,13 +2,14 @@ import { Box, IconButton, InputAdornment } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import React from "react";
+import { NumberUtils } from "@etsoo/shared";
 import { InputField } from "./InputField";
 /**
  * Integer input field
  */
 export const IntInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChangeDelay, onValueChange, required, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = React.useState();
     const setValue = (value, source, init = false) => {
@@ -29,15 +30,6 @@ export const IntInputField = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         setValue(value, undefined, true);
     }, [value]);
-    React.useEffect(() => {
-        if (defaultValue == null)
-            return;
-        const value = typeof defaultValue === "number"
-            ? defaultValue
-            : parseFloat(`${defaultValue}`);
-        if (!isNaN(value))
-            setValue(value, defaultValue, true);
-    }, [defaultValue]);
     // Layout
     const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
             min,
@@ -58,7 +50,12 @@ export const IntInputField = React.forwardRef((props, ref) => {
                 WebkitAppearance: "none",
                 margin: 0
             }
-        }, onChangeDelay: (event) => {
+        }, onChange: (event) => {
+            const source = event.target.value;
+            setLocalValue(source);
+            if (onChange)
+                onChange(event);
+        }, changeDelay: changeDelay, onChangeDelay: (event) => {
             const source = event.target.value;
             const value = parseFloat(source);
             if (isNaN(value))
@@ -78,10 +75,13 @@ export const IntInputField = React.forwardRef((props, ref) => {
             React.createElement(IconButton, { size: "small", onClick: () => {
                     if (localValue == null)
                         return;
-                    if (localValue <= min)
+                    const value = NumberUtils.parse(localValue);
+                    if (isNaN(value))
+                        return;
+                    if (value <= min)
                         setValue(undefined, "SUB");
                     else
-                        setValue(localValue - step, "SUB");
+                        setValue(value - step, "SUB");
                 } },
                 React.createElement(RemoveIcon, null)),
             layout,
@@ -90,10 +90,13 @@ export const IntInputField = React.forwardRef((props, ref) => {
                         setValue(min, "ADD");
                         return;
                     }
-                    if (localValue >= max)
+                    const value = NumberUtils.parse(localValue);
+                    if (isNaN(value))
+                        return;
+                    if (value >= max)
                         return;
                     else
-                        setValue(localValue + step, "ADD");
+                        setValue(value + step, "ADD");
                 } },
                 React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
     else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.85",
+  "version": "1.1.87",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.86",
+    "@etsoo/appscript": "^1.3.87",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.57",
+    "@etsoo/react": "^1.6.58",
     "@etsoo/shared": "^1.1.95",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
@@ -76,11 +76,11 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.3",
-    "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/preset-typescript": "^7.21.4",
     "@babel/runtime-corejs3": "^7.21.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

package/src/IntInputField.tsx

@@ -2,6 +2,7 @@ import { Box, IconButton, InputAdornment } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import React from "react";
+import { NumberUtils } from "@etsoo/shared";
 import { InputField, InputFieldProps } from "./InputField";
 
 /**
@@ -9,7 +10,7 @@ import { InputField, InputFieldProps } from "./InputField";
  */
 export type IntInputFieldProps = Omit<
   InputFieldProps,
-  "type" | "inputProps" | "value"
+  "type" | "inputProps" | "value" | "defaultValue"
 > & {
   /**
    * Minimum value
@@ -81,15 +82,16 @@ export const IntInputField = React.forwardRef<
     endSymbol,
     symbol,
     value,
-    defaultValue,
+    changeDelay = 600,
     onChangeDelay,
+    onChange,
     onValueChange,
     required,
     ...rest
   } = props;
 
   // State
-  const [localValue, setLocalValue] = React.useState<number>();
+  const [localValue, setLocalValue] = React.useState<number | string>();
 
   const setValue = (
     value: number | undefined,
@@ -114,15 +116,6 @@ export const IntInputField = React.forwardRef<
     setValue(value, undefined, true);
   }, [value]);
 
-  React.useEffect(() => {
-    if (defaultValue == null) return;
-    const value =
-      typeof defaultValue === "number"
-        ? defaultValue
-        : parseFloat(`${defaultValue}`);
-    if (!isNaN(value)) setValue(value, defaultValue, true);
-  }, [defaultValue]);
-
   // Layout
   const layout = (
     <InputField
@@ -156,6 +149,13 @@ export const IntInputField = React.forwardRef<
           margin: 0
         }
       }}
+      onChange={(event) => {
+        const source = event.target.value;
+        setLocalValue(source);
+
+        if (onChange) onChange(event);
+      }}
+      changeDelay={changeDelay}
       onChangeDelay={(event) => {
         const source = event.target.value;
         const value = parseFloat(source);
@@ -178,8 +178,12 @@ export const IntInputField = React.forwardRef<
           size="small"
           onClick={() => {
             if (localValue == null) return;
-            if (localValue <= min) setValue(undefined, "SUB");
-            else setValue(localValue - step, "SUB");
+
+            const value = NumberUtils.parse(localValue);
+            if (isNaN(value)) return;
+
+            if (value <= min) setValue(undefined, "SUB");
+            else setValue(value - step, "SUB");
           }}
         >
           <RemoveIcon />
@@ -192,8 +196,12 @@ export const IntInputField = React.forwardRef<
               setValue(min, "ADD");
               return;
             }
-            if (localValue >= max) return;
-            else setValue(localValue + step, "ADD");
+
+            const value = NumberUtils.parse(localValue);
+            if (isNaN(value)) return;
+
+            if (value >= max) return;
+            else setValue(value + step, "ADD");
           }}
         >
           <AddIcon color={localValue == null ? undefined : "primary"} />