@etsoo/materialui 1.1.84 → 1.1.86

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
      */
@@ -42,7 +42,7 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
      * @param source Source value
      * @param init Initial action
      */
-    onValueChange?: (value: number | undefined, source: unknown, init: boolean) => number | undefined;
+    onValueChange?: (value: number | undefined, source: unknown, init: boolean) => number | boolean | null | void;
 };
 /**
  * Integer input field

package/lib/IntInputField.js

@@ -2,33 +2,34 @@ 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) => {
         if (onValueChange) {
             const newValue = onValueChange(value, source, init);
-            setLocalValue(newValue);
+            if (newValue === false)
+                return;
+            if (newValue === null) {
+                setLocalValue(undefined);
+                return;
+            }
+            if (newValue === true || newValue === undefined)
+                setLocalValue(value);
+            else
+                setLocalValue(newValue);
         }
     };
     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,
@@ -49,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))
@@ -69,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,
@@ -81,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.84",
+  "version": "1.1.86",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

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
@@ -61,7 +62,7 @@ export type IntInputFieldProps = Omit<
     value: number | undefined,
     source: unknown,
     init: boolean
-  ) => number | undefined;
+  ) => number | boolean | null | void;
 };
 
 /**
@@ -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,
@@ -98,7 +100,15 @@ export const IntInputField = React.forwardRef<
   ) => {
     if (onValueChange) {
       const newValue = onValueChange(value, source, init);
-      setLocalValue(newValue);
+      if (newValue === false) return;
+
+      if (newValue === null) {
+        setLocalValue(undefined);
+        return;
+      }
+
+      if (newValue === true || newValue === undefined) setLocalValue(value);
+      else setLocalValue(newValue);
     }
   };
 
@@ -106,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
@@ -148,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);
@@ -170,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 />
@@ -184,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"} />