@etsoo/materialui 1.1.81 → 1.1.83

package/lib/IntInputField.d.ts

@@ -1,11 +1,48 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
 import { InputFieldProps } from "./InputField";
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & 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
+     */
+    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
+     */
+    onValueChange?: (value: number | undefined, init: boolean) => void;
+};
 /**
  * Integer input field
  */
-export declare const IntInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "inputProps"> & import("@mui/material").InputBaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const IntInputField: React.ForwardRefExoticComponent<Omit<IntInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/IntInputField.js

@@ -1,3 +1,6 @@
+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 { InputField } from "./InputField";
 /**
@@ -5,7 +8,82 @@ import { InputField } from "./InputField";
  */
 export const IntInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChange, onValueChange, ...rest } = props;
+    // State
+    const [localValue, setLocalValue] = React.useState();
+    const setValue = (value, init = false) => {
+        setLocalValue(value);
+        if (onValueChange)
+            onValueChange(value, init);
+    };
+    React.useEffect(() => {
+        setValue(value, true);
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        const value = typeof defaultValue === "number"
+            ? defaultValue
+            : parseFloat(`${defaultValue}`);
+        if (!isNaN(value))
+            setValue(value, true);
+    }, [defaultValue]);
     // Layout
-    return (React.createElement(InputField, { ref: ref, type: "number", inputProps: { min, step, max, inputMode: "numeric" }, ...rest }));
+    const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? "" : localValue, inputProps: {
+            min,
+            step,
+            max,
+            style: inputStyle,
+            inputMode: "numeric"
+        }, InputProps: {
+            startAdornment: symbol ? (React.createElement(React.Fragment, null,
+                React.createElement(InputAdornment, { position: "start" }, symbol))) : undefined,
+            endAdornment: endSymbol ? (React.createElement(InputAdornment, { position: "end" }, endSymbol)) : undefined
+        }, sx: {
+            "& input[type=number]::-webkit-inner-spin-button": {
+                WebkitAppearance: "none",
+                margin: 0
+            },
+            "& input[type=number]::-webkit-outer-spin-button": {
+                WebkitAppearance: "none",
+                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);
+        }, ...rest }));
+    if (buttons)
+        return (React.createElement(Box, { sx: { display: "flex", alignItems: "flex-end", gap: 0.5 } },
+            React.createElement(IconButton, { size: "small", onClick: () => {
+                    if (localValue == null)
+                        return;
+                    if (localValue <= min)
+                        setValue(undefined);
+                    else
+                        setValue(localValue - step);
+                } },
+                React.createElement(RemoveIcon, null)),
+            layout,
+            React.createElement(IconButton, { size: "small", onClick: () => {
+                    if (localValue == null) {
+                        setValue(min);
+                        return;
+                    }
+                    if (localValue >= max)
+                        return;
+                    else
+                        setValue(localValue + step);
+                } },
+                React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
+    else
+        return layout;
 });

package/lib/MoneyInputField.d.ts

@@ -1,11 +1,10 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
-import { InputFieldProps } from "./InputField";
+import { IntInputFieldProps } from "./IntInputField";
 /**
  * Money input field props
  */
-export type MoneyInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & InputBaseProps["inputProps"];
+export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
  * Money input field
  */
-export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<Omit<InputFieldProps, "type" | "inputProps"> & import("@mui/material").InputBaseComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<MoneyInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/MoneyInputField.js

@@ -1,11 +1,11 @@
 import React from "react";
-import { InputField } from "./InputField";
+import { IntInputField } from "./IntInputField";
 /**
  * Money input field
  */
 export const MoneyInputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { min = 0, step = 0.01, max = 9999999, ...rest } = props;
+    const { step = 0.01, ...rest } = props;
     // Layout
-    return (React.createElement(InputField, { ref: ref, type: "number", inputProps: { min, step, max, inputMode: "numeric" }, ...rest }));
+    return React.createElement(IntInputField, { ref: ref, step: step, ...rest });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.81",
+  "version": "1.1.83",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
     "@etsoo/appscript": "^1.3.86",
     "@etsoo/notificationbase": "^1.1.24",
     "@etsoo/react": "^1.6.57",
-    "@etsoo/shared": "^1.1.94",
+    "@etsoo/shared": "^1.1.95",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
-    "@mui/x-data-grid": "^6.0.3",
+    "@mui/x-data-grid": "^6.0.4",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.31",
@@ -89,6 +89,6 @@
     "@typescript-eslint/parser": "^5.57.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.3"
   }
 }

package/src/IntInputField.tsx

@@ -1,12 +1,62 @@
-import { 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";
 import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Integer input field props
  */
-export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> &
-  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
+   */
+  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
+   */
+  onValueChange?: (value: number | undefined, init: boolean) => void;
+};
 
 /**
  * Integer input field
@@ -16,15 +66,115 @@ export const IntInputField = React.forwardRef<
   IntInputFieldProps
 >((props, ref) => {
   // Destruct
-  const { min = 0, step = 1, max = 9999999, ...rest } = props;
+  const {
+    min = 0,
+    step = 1,
+    max = 9999999,
+    inputStyle = { textAlign: "right" },
+    buttons,
+    endSymbol,
+    symbol,
+    value,
+    defaultValue,
+    onChange,
+    onValueChange,
+    ...rest
+  } = props;
+
+  // State
+  const [localValue, setLocalValue] = React.useState<number>();
+
+  const setValue = (value: number | undefined, init: boolean = false) => {
+    setLocalValue(value);
+    if (onValueChange) onValueChange(value, init);
+  };
+
+  React.useEffect(() => {
+    setValue(value, true);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (defaultValue == null) return;
+    const value =
+      typeof defaultValue === "number"
+        ? defaultValue
+        : parseFloat(`${defaultValue}`);
+    if (!isNaN(value)) setValue(value, true);
+  }, [defaultValue]);
 
   // Layout
-  return (
+  const layout = (
     <InputField
       ref={ref}
       type="number"
-      inputProps={{ min, step, max, inputMode: "numeric" }}
+      value={localValue == null ? "" : localValue}
+      inputProps={{
+        min,
+        step,
+        max,
+        style: inputStyle,
+        inputMode: "numeric"
+      }}
+      InputProps={{
+        startAdornment: symbol ? (
+          <React.Fragment>
+            <InputAdornment position="start">{symbol}</InputAdornment>
+          </React.Fragment>
+        ) : undefined,
+        endAdornment: endSymbol ? (
+          <InputAdornment position="end">{endSymbol}</InputAdornment>
+        ) : undefined
+      }}
+      sx={{
+        "& input[type=number]::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        "& input[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          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);
+      }}
       {...rest}
     />
   );
+
+  if (buttons)
+    return (
+      <Box sx={{ display: "flex", alignItems: "flex-end", gap: 0.5 }}>
+        <IconButton
+          size="small"
+          onClick={() => {
+            if (localValue == null) return;
+            if (localValue <= min) setValue(undefined);
+            else setValue(localValue - step);
+          }}
+        >
+          <RemoveIcon />
+        </IconButton>
+        {layout}
+        <IconButton
+          size="small"
+          onClick={() => {
+            if (localValue == null) {
+              setValue(min);
+              return;
+            }
+            if (localValue >= max) return;
+            else setValue(localValue + step);
+          }}
+        >
+          <AddIcon color={localValue == null ? undefined : "primary"} />
+        </IconButton>
+      </Box>
+    );
+  else return layout;
 });

package/src/MoneyInputField.tsx

@@ -1,15 +1,10 @@
-import { InputBaseProps } from "@mui/material";
 import React from "react";
-import { InputField, InputFieldProps } from "./InputField";
+import { IntInputField, IntInputFieldProps } from "./IntInputField";
 
 /**
  * Money input field props
  */
-export type MoneyInputFieldProps = Omit<
-  InputFieldProps,
-  "type" | "inputProps"
-> &
-  InputBaseProps["inputProps"];
+export type MoneyInputFieldProps = IntInputFieldProps & {};
 
 /**
  * Money input field
@@ -19,15 +14,8 @@ export const MoneyInputField = React.forwardRef<
   MoneyInputFieldProps
 >((props, ref) => {
   // Destruct
-  const { min = 0, step = 0.01, max = 9999999, ...rest } = props;
+  const { step = 0.01, ...rest } = props;
 
   // Layout
-  return (
-    <InputField
-      ref={ref}
-      type="number"
-      inputProps={{ min, step, max, inputMode: "numeric" }}
-      {...rest}
-    />
-  );
+  return <IntInputField ref={ref} step={step} {...rest} />;
 });