@etsoo/materialui 1.1.47 → 1.1.48

package/lib/InputField.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from '@mui/material';
-import React from 'react';
+import { TextFieldProps } from "@mui/material";
+import React from "react";
 /**
  * Input field props
  */
@@ -8,6 +8,10 @@ export type InputFieldProps = TextFieldProps & {
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
@@ -23,6 +27,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */
@@ -32,6 +40,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */
@@ -41,6 +53,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */

package/lib/InputField.js

@@ -1,7 +1,7 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { TextField } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
+import { useDelayedExecutor } from "@etsoo/react";
+import { TextField } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Input field
  * @param props Props
@@ -10,23 +10,25 @@ import { MUGlobal } from './MUGlobal';
 export const InputField = React.forwardRef((props, ref) => {
     var _a;
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Shrink
     (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     const isMounted = React.useRef(true);
-    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
-        ? useDelayedExecutor(onChange, changeDelay)
-        : undefined;
+    const createDelayed = () => {
+        if (changeDelay != null && changeDelay >= 1) {
+            const changeHandler = onChangeDelay !== null && onChangeDelay !== void 0 ? onChangeDelay : onChange;
+            if (changeHandler)
+                return useDelayedExecutor(changeHandler, changeDelay);
+        }
+        return undefined;
+    };
+    const delayed = createDelayed();
     const onChangeEx = (event) => {
-        if (onChange == null)
-            return;
-        if (changeDelay == null || changeDelay < 1) {
+        if (onChange && (delayed == null || onChangeDelay != null))
             onChange(event);
-            return;
-        }
         delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
     };
     React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.47",
+  "version": "1.1.48",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,12 +50,12 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.71",
+    "@etsoo/appscript": "^1.3.76",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.50",
+    "@etsoo/react": "^1.6.51",
     "@etsoo/shared": "^1.1.90",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.12",
+    "@mui/material": "^5.11.13",
     "@mui/x-data-grid": "^6.0.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
@@ -71,12 +71,12 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.4.3",
-    "react-router-dom": "^6.8.2",
+    "react-router-dom": "^6.9.0",
     "react-window": "^1.8.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
@@ -84,9 +84,9 @@
     "@babel/runtime-corejs3": "^7.21.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@types/jest": "^29.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^4.9.5"

package/src/InputField.tsx

@@ -1,21 +1,28 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
+import { useDelayedExecutor } from "@etsoo/react";
+import { TextField, TextFieldProps } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Input field props
  */
 export type InputFieldProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
+  /**
+   * Change delay (ms) to avoid repeatly dispatch onChange
+   */
+  changeDelay?: number;
 
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
+  /**
+   * Change delay handler, without it onChange will be applied
+   */
+  onChangeDelay?: React.ChangeEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  >;
+
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 };
 
 /**
@@ -24,62 +31,63 @@ export type InputFieldProps = TextFieldProps & {
  * @returns Component
  */
 export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
-    (props, ref) => {
-        // Destruct
-        const {
-            changeDelay,
-            InputLabelProps = {},
-            InputProps = {},
-            onChange,
-            readOnly,
-            size = MUGlobal.inputFieldSize,
-            variant = MUGlobal.inputFieldVariant,
-            ...rest
-        } = props;
-
-        // Shrink
-        InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
-        // Read only
-        if (readOnly != null) InputProps.readOnly = readOnly;
+  (props, ref) => {
+    // Destruct
+    const {
+      changeDelay,
+      InputLabelProps = {},
+      InputProps = {},
+      onChange,
+      onChangeDelay,
+      readOnly,
+      size = MUGlobal.inputFieldSize,
+      variant = MUGlobal.inputFieldVariant,
+      ...rest
+    } = props;
 
-        const isMounted = React.useRef(true);
-        const delayed =
-            onChange != null && changeDelay != null && changeDelay >= 1
-                ? useDelayedExecutor(onChange, changeDelay)
-                : undefined;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
 
-        const onChangeEx = (
-            event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-        ) => {
-            if (onChange == null) return;
+    // Read only
+    if (readOnly != null) InputProps.readOnly = readOnly;
 
-            if (changeDelay == null || changeDelay < 1) {
-                onChange(event);
-                return;
-            }
+    const isMounted = React.useRef(true);
+    const createDelayed = () => {
+      if (changeDelay != null && changeDelay >= 1) {
+        const changeHandler = onChangeDelay ?? onChange;
+        if (changeHandler)
+          return useDelayedExecutor(changeHandler, changeDelay);
+      }
+      return undefined;
+    };
+    const delayed = createDelayed();
 
-            delayed?.call(undefined, event);
-        };
+    const onChangeEx = (
+      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+      if (onChange && (delayed == null || onChangeDelay != null))
+        onChange(event);
+      delayed?.call(undefined, event);
+    };
 
-        React.useEffect(() => {
-            return () => {
-                isMounted.current = false;
-                delayed?.clear();
-            };
-        }, []);
+    React.useEffect(() => {
+      return () => {
+        isMounted.current = false;
+        delayed?.clear();
+      };
+    }, []);
 
-        // Layout
-        return (
-            <TextField
-                ref={ref}
-                InputLabelProps={InputLabelProps}
-                InputProps={InputProps}
-                onChange={onChangeEx}
-                size={size}
-                variant={variant}
-                {...rest}
-            />
-        );
-    }
+    // Layout
+    return (
+      <TextField
+        ref={ref}
+        InputLabelProps={InputLabelProps}
+        InputProps={InputProps}
+        onChange={onChangeEx}
+        size={size}
+        variant={variant}
+        {...rest}
+      />
+    );
+  }
 );