@etsoo/materialui 1.1.82 → 1.1.84

package/lib/IntInputField.d.ts

@@ -1,10 +1,21 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
 import { InputFieldProps } from "./InputField";
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "value"> & InputBaseProps["inputProps"] & {
+export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "value"> & {
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step value
+     */
+    step?: number;
     /**
      * Display minus and plus buttons
      */
@@ -21,35 +32,19 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
      * Value
      */
     value?: number;
+    /**
+     * Input field style
+     */
+    inputStyle?: React.CSSProperties;
     /**
      * On value change callback
      * @param value Value
+     * @param source Source value
+     * @param init Initial action
      */
-    onValueChange?: (value: number | undefined, init: boolean) => void;
+    onValueChange?: (value: number | undefined, source: unknown, init: boolean) => number | undefined;
 };
 /**
  * Integer input field
  */
-export declare const IntInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "value" | "inputProps"> & import("@mui/material").InputBaseComponentProps & {
-    /**
-     * Display minus and plus buttons
-     */
-    buttons?: boolean | undefined;
-    /**
-     * End symbol
-     */
-    endSymbol?: string | undefined;
-    /**
-     * Start (Currency) symbol
-     */
-    symbol?: string | undefined;
-    /**
-     * Value
-     */
-    value?: number | undefined;
-    /**
-     * On value change callback
-     * @param value Value
-     */
-    onValueChange?: ((value: number | undefined, init: boolean) => void) | undefined;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const IntInputField: React.ForwardRefExoticComponent<Omit<IntInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/IntInputField.js

@@ -8,32 +8,33 @@ import { InputField } from "./InputField";
  */
 export const IntInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, style = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChange, onValueChange, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChangeDelay, onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = React.useState();
-    const setValue = (value, init = false) => {
-        setLocalValue(value);
-        if (onValueChange)
-            onValueChange(value, init);
+    const setValue = (value, source, init = false) => {
+        if (onValueChange) {
+            const newValue = onValueChange(value, source, init);
+            setLocalValue(newValue);
+        }
     };
     React.useEffect(() => {
-        setValue(value, true);
+        setValue(value, undefined, true);
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue == null || typeof defaultValue === "object")
+        if (defaultValue == null)
             return;
         const value = typeof defaultValue === "number"
             ? defaultValue
-            : parseFloat(defaultValue);
+            : parseFloat(`${defaultValue}`);
         if (!isNaN(value))
-            setValue(value, true);
+            setValue(value, defaultValue, true);
     }, [defaultValue]);
     // Layout
-    const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? "" : localValue, inputProps: {
+    const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
             min,
             step,
             max,
-            style,
+            style: inputStyle,
             inputMode: "numeric"
         }, InputProps: {
             startAdornment: symbol ? (React.createElement(React.Fragment, null,
@@ -48,18 +49,20 @@ export const IntInputField = React.forwardRef((props, ref) => {
                 WebkitAppearance: "none",
                 margin: 0
             }
-        }, onChange: (event) => {
-            const value = parseFloat(event.target.value);
+        }, onChangeDelay: (event) => {
+            const source = event.target.value;
+            const value = parseFloat(source);
             if (isNaN(value))
-                setValue(undefined);
+                setValue(undefined, source);
             else if (value > max)
-                setValue(max);
+                setValue(max, source);
             else if (value < min)
-                setValue(min);
+                setValue(value === 0 ? undefined : min, source);
+            // 0 is a special case
             else
-                setValue(value);
-            if (onChange)
-                onChange(event);
+                setValue(value, source);
+            if (onChangeDelay)
+                onChangeDelay(event);
         }, ...rest }));
     if (buttons)
         return (React.createElement(Box, { sx: { display: "flex", alignItems: "flex-end", gap: 0.5 } },
@@ -67,21 +70,21 @@ export const IntInputField = React.forwardRef((props, ref) => {
                     if (localValue == null)
                         return;
                     if (localValue <= min)
-                        setValue(undefined);
+                        setValue(undefined, "SUB");
                     else
-                        setValue(localValue - step);
+                        setValue(localValue - step, "SUB");
                 } },
                 React.createElement(RemoveIcon, null)),
             layout,
             React.createElement(IconButton, { size: "small", onClick: () => {
                     if (localValue == null) {
-                        setValue(min);
+                        setValue(min, "ADD");
                         return;
                     }
                     if (localValue >= max)
                         return;
                     else
-                        setValue(localValue + step);
+                        setValue(localValue + step, "ADD");
                 } },
                 React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
     else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.82",
+  "version": "1.1.84",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/IntInputField.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, InputAdornment, InputBaseProps } from "@mui/material";
+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";
@@ -10,34 +10,59 @@ import { InputField, InputFieldProps } from "./InputField";
 export type IntInputFieldProps = Omit<
   InputFieldProps,
   "type" | "inputProps" | "value"
-> &
-  InputBaseProps["inputProps"] & {
-    /**
-     * Display minus and plus buttons
-     */
-    buttons?: boolean;
-
-    /**
-     * End symbol
-     */
-    endSymbol?: string;
-
-    /**
-     * Start (Currency) symbol
-     */
-    symbol?: string;
-
-    /**
-     * Value
-     */
-    value?: number;
-
-    /**
-     * On value change callback
-     * @param value Value
-     */
-    onValueChange?: (value: number | undefined, init: boolean) => void;
-  };
+> & {
+  /**
+   * Minimum value
+   */
+  min?: number;
+
+  /**
+   * Maximum value
+   */
+  max?: number;
+
+  /**
+   * Step value
+   */
+  step?: number;
+
+  /**
+   * Display minus and plus buttons
+   */
+  buttons?: boolean;
+
+  /**
+   * End symbol
+   */
+  endSymbol?: string;
+
+  /**
+   * Start (Currency) symbol
+   */
+  symbol?: string;
+
+  /**
+   * Value
+   */
+  value?: number;
+
+  /**
+   * Input field style
+   */
+  inputStyle?: React.CSSProperties;
+
+  /**
+   * On value change callback
+   * @param value Value
+   * @param source Source value
+   * @param init Initial action
+   */
+  onValueChange?: (
+    value: number | undefined,
+    source: unknown,
+    init: boolean
+  ) => number | undefined;
+};
 
 /**
  * Integer input field
@@ -51,36 +76,43 @@ export const IntInputField = React.forwardRef<
     min = 0,
     step = 1,
     max = 9999999,
-    style = { textAlign: "right" },
+    inputStyle = { textAlign: "right" },
     buttons,
     endSymbol,
     symbol,
     value,
     defaultValue,
-    onChange,
+    onChangeDelay,
     onValueChange,
+    required,
     ...rest
   } = props;
 
   // State
   const [localValue, setLocalValue] = React.useState<number>();
 
-  const setValue = (value: number | undefined, init: boolean = false) => {
-    setLocalValue(value);
-    if (onValueChange) onValueChange(value, init);
+  const setValue = (
+    value: number | undefined,
+    source: unknown,
+    init: boolean = false
+  ) => {
+    if (onValueChange) {
+      const newValue = onValueChange(value, source, init);
+      setLocalValue(newValue);
+    }
   };
 
   React.useEffect(() => {
-    setValue(value, true);
+    setValue(value, undefined, true);
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue == null || typeof defaultValue === "object") return;
+    if (defaultValue == null) return;
     const value =
       typeof defaultValue === "number"
         ? defaultValue
-        : parseFloat(defaultValue);
-    if (!isNaN(value)) setValue(value, true);
+        : parseFloat(`${defaultValue}`);
+    if (!isNaN(value)) setValue(value, defaultValue, true);
   }, [defaultValue]);
 
   // Layout
@@ -88,12 +120,12 @@ export const IntInputField = React.forwardRef<
     <InputField
       ref={ref}
       type="number"
-      value={localValue == null ? "" : localValue}
+      value={localValue == null ? (required ? min : "") : localValue}
       inputProps={{
         min,
         step,
         max,
-        style,
+        style: inputStyle,
         inputMode: "numeric"
       }}
       InputProps={{
@@ -116,13 +148,16 @@ export const IntInputField = React.forwardRef<
           margin: 0
         }
       }}
-      onChange={(event) => {
-        const value = parseFloat(event.target.value);
-        if (isNaN(value)) setValue(undefined);
-        else if (value > max) setValue(max);
-        else if (value < min) setValue(min);
-        else setValue(value);
-        if (onChange) onChange(event);
+      onChangeDelay={(event) => {
+        const source = event.target.value;
+        const value = parseFloat(source);
+        if (isNaN(value)) setValue(undefined, source);
+        else if (value > max) setValue(max, source);
+        else if (value < min) setValue(value === 0 ? undefined : min, source);
+        // 0 is a special case
+        else setValue(value, source);
+
+        if (onChangeDelay) onChangeDelay(event);
       }}
       {...rest}
     />
@@ -135,8 +170,8 @@ export const IntInputField = React.forwardRef<
           size="small"
           onClick={() => {
             if (localValue == null) return;
-            if (localValue <= min) setValue(undefined);
-            else setValue(localValue - step);
+            if (localValue <= min) setValue(undefined, "SUB");
+            else setValue(localValue - step, "SUB");
           }}
         >
           <RemoveIcon />
@@ -146,11 +181,11 @@ export const IntInputField = React.forwardRef<
           size="small"
           onClick={() => {
             if (localValue == null) {
-              setValue(min);
+              setValue(min, "ADD");
               return;
             }
             if (localValue >= max) return;
-            else setValue(localValue + step);
+            else setValue(localValue + step, "ADD");
           }}
         >
           <AddIcon color={localValue == null ? undefined : "primary"} />