@etsoo/materialui 1.6.61 → 1.6.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/cjs/NumberInputField.d.ts +4 -0
  2. package/lib/cjs/NumberInputField.js +27 -3
  3. package/lib/mjs/NumberInputField.d.ts +4 -0
  4. package/lib/mjs/NumberInputField.js +27 -3
  5. package/package.json +6 -6
  6. package/src/NumberInputField.tsx +38 -3
package/lib/cjs/NumberInputField.d.ts CHANGED
@@ -33,6 +33,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
33
33
  * Step value
34
34
  */
35
35
  step?: number;
36
+ /**
37
+ * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
38
+ */
39
+ numberChangeDelay?: number;
36
40
  /**
37
41
  * Number value change handler
38
42
  * @param value New value
package/lib/cjs/NumberInputField.js CHANGED
@@ -17,18 +17,42 @@ const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment")
17
17
  function NumberInputField(props) {
18
18
  const { currency, inputStyle, min = 0, step = 1, symbol = currency
19
19
  ? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
20
- : undefined, endSymbol, max = 9999999, onChange, onNumberChange, slotProps = {}, ...rest } = props;
20
+ : undefined, endSymbol, max = 9999999, onChange, numberChangeDelay = 600, onNumberChange, slotProps = {}, ...rest } = props;
21
+ const timeoutRef = react_1.default.useRef(0);
22
+ function doNumberChange(value) {
23
+ if (numberChangeDelay <= 0) {
24
+ onNumberChange(value);
25
+ }
26
+ else {
27
+ if (timeoutRef.current == null)
28
+ return;
29
+ clearTimeout();
30
+ timeoutRef.current = globalThis.setTimeout(() => onNumberChange(value), numberChangeDelay);
31
+ }
32
+ }
33
+ function clearTimeout() {
34
+ const timeout = timeoutRef.current;
35
+ if (timeout == null)
36
+ return;
37
+ if (timeout > 0) {
38
+ globalThis.clearTimeout(timeout);
39
+ }
40
+ timeoutRef.current = undefined;
41
+ }
42
+ react_1.default.useEffect(() => {
43
+ return clearTimeout;
44
+ }, []);
21
45
  return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", onChange: (event) => {
22
46
  onChange?.(event);
23
47
  if (onNumberChange) {
24
48
  const input = event.target;
25
49
  if (input.checkValidity()) {
26
50
  const qty = shared_1.NumberUtils.parse(input.value);
27
- onNumberChange(qty);
51
+ doNumberChange(qty);
28
52
  }
29
53
  else {
30
54
  input.reportValidity();
31
- onNumberChange(undefined);
55
+ doNumberChange(undefined);
32
56
  }
33
57
  }
34
58
  }, slotProps: Object.assign(slotProps, {
package/lib/mjs/NumberInputField.d.ts CHANGED
@@ -33,6 +33,10 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
33
33
  * Step value
34
34
  */
35
35
  step?: number;
36
+ /**
37
+ * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
38
+ */
39
+ numberChangeDelay?: number;
36
40
  /**
37
41
  * Number value change handler
38
42
  * @param value New value
package/lib/mjs/NumberInputField.js CHANGED
@@ -11,18 +11,42 @@ import InputAdornment from "@mui/material/InputAdornment";
11
11
  export function NumberInputField(props) {
12
12
  const { currency, inputStyle, min = 0, step = 1, symbol = currency
13
13
  ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
14
- : undefined, endSymbol, max = 9999999, onChange, onNumberChange, slotProps = {}, ...rest } = props;
14
+ : undefined, endSymbol, max = 9999999, onChange, numberChangeDelay = 600, onNumberChange, slotProps = {}, ...rest } = props;
15
+ const timeoutRef = React.useRef(0);
16
+ function doNumberChange(value) {
17
+ if (numberChangeDelay <= 0) {
18
+ onNumberChange(value);
19
+ }
20
+ else {
21
+ if (timeoutRef.current == null)
22
+ return;
23
+ clearTimeout();
24
+ timeoutRef.current = globalThis.setTimeout(() => onNumberChange(value), numberChangeDelay);
25
+ }
26
+ }
27
+ function clearTimeout() {
28
+ const timeout = timeoutRef.current;
29
+ if (timeout == null)
30
+ return;
31
+ if (timeout > 0) {
32
+ globalThis.clearTimeout(timeout);
33
+ }
34
+ timeoutRef.current = undefined;
35
+ }
36
+ React.useEffect(() => {
37
+ return clearTimeout;
38
+ }, []);
15
39
  return (_jsx(InputField, { type: "number", onChange: (event) => {
16
40
  onChange?.(event);
17
41
  if (onNumberChange) {
18
42
  const input = event.target;
19
43
  if (input.checkValidity()) {
20
44
  const qty = NumberUtils.parse(input.value);
21
- onNumberChange(qty);
45
+ doNumberChange(qty);
22
46
  }
23
47
  else {
24
48
  input.reportValidity();
25
- onNumberChange(undefined);
49
+ doNumberChange(undefined);
26
50
  }
27
51
  }
28
52
  }, slotProps: Object.assign(slotProps, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.6.61",
3
+ "version": "1.6.63",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -36,13 +36,13 @@
36
36
  },
37
37
  "homepage": "https://github.com/ETSOO/ReactMU#readme",
38
38
  "dependencies": {
39
- "@base-ui/react": "^1.4.1",
39
+ "@base-ui/react": "^1.5.0",
40
40
  "@dnd-kit/react": "^0.4.0",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.1",
43
- "@etsoo/appscript": "^1.6.64",
43
+ "@etsoo/appscript": "^1.6.65",
44
44
  "@etsoo/notificationbase": "^1.1.71",
45
- "@etsoo/react": "^1.8.89",
45
+ "@etsoo/react": "^1.8.90",
46
46
  "@etsoo/shared": "^1.2.84",
47
47
  "@mui/icons-material": "^9.0.1",
48
48
  "@mui/material": "^9.0.1",
@@ -75,13 +75,13 @@
75
75
  "@testing-library/react": "^16.3.2",
76
76
  "@types/pica": "^9.0.5",
77
77
  "@types/pulltorefreshjs": "^0.1.7",
78
- "@types/react": "^19.2.14",
78
+ "@types/react": "^19.2.15",
79
79
  "@types/react-avatar-editor": "^13.0.4",
80
80
  "@types/react-dom": "^19.2.3",
81
81
  "@types/react-input-mask": "^3.0.6",
82
82
  "@vitejs/plugin-react": "^6.0.2",
83
83
  "jsdom": "^29.1.1",
84
84
  "typescript": "^6.0.3",
85
- "vitest": "^4.1.6"
85
+ "vitest": "^4.1.7"
86
86
  }
87
87
  }
package/src/NumberInputField.tsx CHANGED
@@ -3,7 +3,6 @@ import { InputField, InputFieldProps } from "./InputField";
3
3
  import { Currency } from "@etsoo/appscript";
4
4
  import { NumberUtils } from "@etsoo/shared";
5
5
  import InputAdornment from "@mui/material/InputAdornment";
6
- import { MUGlobal } from "./MUGlobal";
7
6
 
8
7
  /**
9
8
  * Number input field properties
@@ -47,6 +46,11 @@ export type NumberInputFieldProps = Omit<
47
46
  */
48
47
  step?: number;
49
48
 
49
+ /**
50
+ * Number value change delay in milliseconds, default is 600ms, set to 0 to disable delay
51
+ */
52
+ numberChangeDelay?: number;
53
+
50
54
  /**
51
55
  * Number value change handler
52
56
  * @param value New value
@@ -71,11 +75,42 @@ export function NumberInputField(props: NumberInputFieldProps) {
71
75
  endSymbol,
72
76
  max = 9999999,
73
77
  onChange,
78
+ numberChangeDelay = 600,
74
79
  onNumberChange,
75
80
  slotProps = {},
76
81
  ...rest
77
82
  } = props;
78
83
 
84
+ const timeoutRef = React.useRef<number | undefined>(0);
85
+
86
+ function doNumberChange(value: number | undefined) {
87
+ if (numberChangeDelay <= 0) {
88
+ onNumberChange!(value);
89
+ } else {
90
+ if (timeoutRef.current == null) return;
91
+
92
+ clearTimeout();
93
+
94
+ timeoutRef.current = globalThis.setTimeout(
95
+ () => onNumberChange!(value),
96
+ numberChangeDelay
97
+ );
98
+ }
99
+ }
100
+
101
+ function clearTimeout() {
102
+ const timeout = timeoutRef.current;
103
+ if (timeout == null) return;
104
+ if (timeout > 0) {
105
+ globalThis.clearTimeout(timeout);
106
+ }
107
+ timeoutRef.current = undefined;
108
+ }
109
+
110
+ React.useEffect(() => {
111
+ return clearTimeout;
112
+ }, []);
113
+
79
114
  return (
80
115
  <InputField
81
116
  type="number"
@@ -86,10 +121,10 @@ export function NumberInputField(props: NumberInputFieldProps) {
86
121
  const input = event.target;
87
122
  if (input.checkValidity()) {
88
123
  const qty = NumberUtils.parse(input.value);
89
- onNumberChange(qty);
124
+ doNumberChange(qty);
90
125
  } else {
91
126
  input.reportValidity();
92
- onNumberChange(undefined);
127
+ doNumberChange(undefined);
93
128
  }
94
129
  }
95
130
  }}