@etsoo/materialui 1.1.83 → 1.1.84

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 (4) hide show
  1. package/lib/IntInputField.d.ts +3 -1
  2. package/lib/IntInputField.js +23 -20
  3. package/package.json +1 -1
  4. package/src/IntInputField.tsx +35 -19
package/lib/IntInputField.d.ts CHANGED
@@ -39,8 +39,10 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
39
39
  /**
40
40
  * On value change callback
41
41
  * @param value Value
42
+ * @param source Source value
43
+ * @param init Initial action
42
44
  */
43
- onValueChange?: (value: number | undefined, init: boolean) => void;
45
+ onValueChange?: (value: number | undefined, source: unknown, init: boolean) => number | undefined;
44
46
  };
45
47
  /**
46
48
  * Integer input field
package/lib/IntInputField.js CHANGED
@@ -8,16 +8,17 @@ import { InputField } from "./InputField";
8
8
  */
9
9
  export const IntInputField = React.forwardRef((props, ref) => {
10
10
  // Destruct
11
- const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChange, onValueChange, ...rest } = props;
11
+ const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, buttons, endSymbol, symbol, value, defaultValue, onChangeDelay, onValueChange, required, ...rest } = props;
12
12
  // State
13
13
  const [localValue, setLocalValue] = React.useState();
14
- const setValue = (value, init = false) => {
15
- setLocalValue(value);
16
- if (onValueChange)
17
- onValueChange(value, init);
14
+ const setValue = (value, source, init = false) => {
15
+ if (onValueChange) {
16
+ const newValue = onValueChange(value, source, init);
17
+ setLocalValue(newValue);
18
+ }
18
19
  };
19
20
  React.useEffect(() => {
20
- setValue(value, true);
21
+ setValue(value, undefined, true);
21
22
  }, [value]);
22
23
  React.useEffect(() => {
23
24
  if (defaultValue == null)
@@ -26,10 +27,10 @@ export const IntInputField = React.forwardRef((props, ref) => {
26
27
  ? defaultValue
27
28
  : parseFloat(`${defaultValue}`);
28
29
  if (!isNaN(value))
29
- setValue(value, true);
30
+ setValue(value, defaultValue, true);
30
31
  }, [defaultValue]);
31
32
  // Layout
32
- const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? "" : localValue, inputProps: {
33
+ const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
33
34
  min,
34
35
  step,
35
36
  max,
@@ -48,18 +49,20 @@ export const IntInputField = React.forwardRef((props, ref) => {
48
49
  WebkitAppearance: "none",
49
50
  margin: 0
50
51
  }
51
- }, onChange: (event) => {
52
- const value = parseFloat(event.target.value);
52
+ }, onChangeDelay: (event) => {
53
+ const source = event.target.value;
54
+ const value = parseFloat(source);
53
55
  if (isNaN(value))
54
- setValue(undefined);
56
+ setValue(undefined, source);
55
57
  else if (value > max)
56
- setValue(max);
58
+ setValue(max, source);
57
59
  else if (value < min)
58
- setValue(min);
60
+ setValue(value === 0 ? undefined : min, source);
61
+ // 0 is a special case
59
62
  else
60
- setValue(value);
61
- if (onChange)
62
- onChange(event);
63
+ setValue(value, source);
64
+ if (onChangeDelay)
65
+ onChangeDelay(event);
63
66
  }, ...rest }));
64
67
  if (buttons)
65
68
  return (React.createElement(Box, { sx: { display: "flex", alignItems: "flex-end", gap: 0.5 } },
@@ -67,21 +70,21 @@ export const IntInputField = React.forwardRef((props, ref) => {
67
70
  if (localValue == null)
68
71
  return;
69
72
  if (localValue <= min)
70
- setValue(undefined);
73
+ setValue(undefined, "SUB");
71
74
  else
72
- setValue(localValue - step);
75
+ setValue(localValue - step, "SUB");
73
76
  } },
74
77
  React.createElement(RemoveIcon, null)),
75
78
  layout,
76
79
  React.createElement(IconButton, { size: "small", onClick: () => {
77
80
  if (localValue == null) {
78
- setValue(min);
81
+ setValue(min, "ADD");
79
82
  return;
80
83
  }
81
84
  if (localValue >= max)
82
85
  return;
83
86
  else
84
- setValue(localValue + step);
87
+ setValue(localValue + step, "ADD");
85
88
  } },
86
89
  React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
87
90
  else
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.83",
3
+ "version": "1.1.84",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/IntInputField.tsx CHANGED
@@ -54,8 +54,14 @@ export type IntInputFieldProps = Omit<
54
54
  /**
55
55
  * On value change callback
56
56
  * @param value Value
57
+ * @param source Source value
58
+ * @param init Initial action
57
59
  */
58
- onValueChange?: (value: number | undefined, init: boolean) => void;
60
+ onValueChange?: (
61
+ value: number | undefined,
62
+ source: unknown,
63
+ init: boolean
64
+ ) => number | undefined;
59
65
  };
60
66
 
61
67
  /**
@@ -76,21 +82,28 @@ export const IntInputField = React.forwardRef<
76
82
  symbol,
77
83
  value,
78
84
  defaultValue,
79
- onChange,
85
+ onChangeDelay,
80
86
  onValueChange,
87
+ required,
81
88
  ...rest
82
89
  } = props;
83
90
 
84
91
  // State
85
92
  const [localValue, setLocalValue] = React.useState<number>();
86
93
 
87
- const setValue = (value: number | undefined, init: boolean = false) => {
88
- setLocalValue(value);
89
- if (onValueChange) onValueChange(value, init);
94
+ const setValue = (
95
+ value: number | undefined,
96
+ source: unknown,
97
+ init: boolean = false
98
+ ) => {
99
+ if (onValueChange) {
100
+ const newValue = onValueChange(value, source, init);
101
+ setLocalValue(newValue);
102
+ }
90
103
  };
91
104
 
92
105
  React.useEffect(() => {
93
- setValue(value, true);
106
+ setValue(value, undefined, true);
94
107
  }, [value]);
95
108
 
96
109
  React.useEffect(() => {
@@ -99,7 +112,7 @@ export const IntInputField = React.forwardRef<
99
112
  typeof defaultValue === "number"
100
113
  ? defaultValue
101
114
  : parseFloat(`${defaultValue}`);
102
- if (!isNaN(value)) setValue(value, true);
115
+ if (!isNaN(value)) setValue(value, defaultValue, true);
103
116
  }, [defaultValue]);
104
117
 
105
118
  // Layout
@@ -107,7 +120,7 @@ export const IntInputField = React.forwardRef<
107
120
  <InputField
108
121
  ref={ref}
109
122
  type="number"
110
- value={localValue == null ? "" : localValue}
123
+ value={localValue == null ? (required ? min : "") : localValue}
111
124
  inputProps={{
112
125
  min,
113
126
  step,
@@ -135,13 +148,16 @@ export const IntInputField = React.forwardRef<
135
148
  margin: 0
136
149
  }
137
150
  }}
138
- onChange={(event) => {
139
- const value = parseFloat(event.target.value);
140
- if (isNaN(value)) setValue(undefined);
141
- else if (value > max) setValue(max);
142
- else if (value < min) setValue(min);
143
- else setValue(value);
144
- if (onChange) onChange(event);
151
+ onChangeDelay={(event) => {
152
+ const source = event.target.value;
153
+ const value = parseFloat(source);
154
+ if (isNaN(value)) setValue(undefined, source);
155
+ else if (value > max) setValue(max, source);
156
+ else if (value < min) setValue(value === 0 ? undefined : min, source);
157
+ // 0 is a special case
158
+ else setValue(value, source);
159
+
160
+ if (onChangeDelay) onChangeDelay(event);
145
161
  }}
146
162
  {...rest}
147
163
  />
@@ -154,8 +170,8 @@ export const IntInputField = React.forwardRef<
154
170
  size="small"
155
171
  onClick={() => {
156
172
  if (localValue == null) return;
157
- if (localValue <= min) setValue(undefined);
158
- else setValue(localValue - step);
173
+ if (localValue <= min) setValue(undefined, "SUB");
174
+ else setValue(localValue - step, "SUB");
159
175
  }}
160
176
  >
161
177
  <RemoveIcon />
@@ -165,11 +181,11 @@ export const IntInputField = React.forwardRef<
165
181
  size="small"
166
182
  onClick={() => {
167
183
  if (localValue == null) {
168
- setValue(min);
184
+ setValue(min, "ADD");
169
185
  return;
170
186
  }
171
187
  if (localValue >= max) return;
172
- else setValue(localValue + step);
188
+ else setValue(localValue + step, "ADD");
173
189
  }}
174
190
  >
175
191
  <AddIcon color={localValue == null ? undefined : "primary"} />