@etsoo/materialui 1.1.83 → 1.1.85

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 +32 -20
  3. package/package.json +1 -1
  4. package/src/IntInputField.tsx +43 -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 | boolean | null | void;
44
46
  };
45
47
  /**
46
48
  * Integer input field
package/lib/IntInputField.js CHANGED
@@ -8,16 +8,26 @@ 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
+ if (newValue === false)
18
+ return;
19
+ if (newValue === null) {
20
+ setLocalValue(undefined);
21
+ return;
22
+ }
23
+ if (newValue === true || newValue === undefined)
24
+ setLocalValue(value);
25
+ else
26
+ setLocalValue(newValue);
27
+ }
18
28
  };
19
29
  React.useEffect(() => {
20
- setValue(value, true);
30
+ setValue(value, undefined, true);
21
31
  }, [value]);
22
32
  React.useEffect(() => {
23
33
  if (defaultValue == null)
@@ -26,10 +36,10 @@ export const IntInputField = React.forwardRef((props, ref) => {
26
36
  ? defaultValue
27
37
  : parseFloat(`${defaultValue}`);
28
38
  if (!isNaN(value))
29
- setValue(value, true);
39
+ setValue(value, defaultValue, true);
30
40
  }, [defaultValue]);
31
41
  // Layout
32
- const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? "" : localValue, inputProps: {
42
+ const layout = (React.createElement(InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
33
43
  min,
34
44
  step,
35
45
  max,
@@ -48,18 +58,20 @@ export const IntInputField = React.forwardRef((props, ref) => {
48
58
  WebkitAppearance: "none",
49
59
  margin: 0
50
60
  }
51
- }, onChange: (event) => {
52
- const value = parseFloat(event.target.value);
61
+ }, onChangeDelay: (event) => {
62
+ const source = event.target.value;
63
+ const value = parseFloat(source);
53
64
  if (isNaN(value))
54
- setValue(undefined);
65
+ setValue(undefined, source);
55
66
  else if (value > max)
56
- setValue(max);
67
+ setValue(max, source);
57
68
  else if (value < min)
58
- setValue(min);
69
+ setValue(value === 0 ? undefined : min, source);
70
+ // 0 is a special case
59
71
  else
60
- setValue(value);
61
- if (onChange)
62
- onChange(event);
72
+ setValue(value, source);
73
+ if (onChangeDelay)
74
+ onChangeDelay(event);
63
75
  }, ...rest }));
64
76
  if (buttons)
65
77
  return (React.createElement(Box, { sx: { display: "flex", alignItems: "flex-end", gap: 0.5 } },
@@ -67,21 +79,21 @@ export const IntInputField = React.forwardRef((props, ref) => {
67
79
  if (localValue == null)
68
80
  return;
69
81
  if (localValue <= min)
70
- setValue(undefined);
82
+ setValue(undefined, "SUB");
71
83
  else
72
- setValue(localValue - step);
84
+ setValue(localValue - step, "SUB");
73
85
  } },
74
86
  React.createElement(RemoveIcon, null)),
75
87
  layout,
76
88
  React.createElement(IconButton, { size: "small", onClick: () => {
77
89
  if (localValue == null) {
78
- setValue(min);
90
+ setValue(min, "ADD");
79
91
  return;
80
92
  }
81
93
  if (localValue >= max)
82
94
  return;
83
95
  else
84
- setValue(localValue + step);
96
+ setValue(localValue + step, "ADD");
85
97
  } },
86
98
  React.createElement(AddIcon, { color: localValue == null ? undefined : "primary" }))));
87
99
  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.85",
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 | boolean | null | void;
59
65
  };
60
66
 
61
67
  /**
@@ -76,21 +82,36 @@ 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
+ if (newValue === false) return;
102
+
103
+ if (newValue === null) {
104
+ setLocalValue(undefined);
105
+ return;
106
+ }
107
+
108
+ if (newValue === true || newValue === undefined) setLocalValue(value);
109
+ else setLocalValue(newValue);
110
+ }
90
111
  };
91
112
 
92
113
  React.useEffect(() => {
93
- setValue(value, true);
114
+ setValue(value, undefined, true);
94
115
  }, [value]);
95
116
 
96
117
  React.useEffect(() => {
@@ -99,7 +120,7 @@ export const IntInputField = React.forwardRef<
99
120
  typeof defaultValue === "number"
100
121
  ? defaultValue
101
122
  : parseFloat(`${defaultValue}`);
102
- if (!isNaN(value)) setValue(value, true);
123
+ if (!isNaN(value)) setValue(value, defaultValue, true);
103
124
  }, [defaultValue]);
104
125
 
105
126
  // Layout
@@ -107,7 +128,7 @@ export const IntInputField = React.forwardRef<
107
128
  <InputField
108
129
  ref={ref}
109
130
  type="number"
110
- value={localValue == null ? "" : localValue}
131
+ value={localValue == null ? (required ? min : "") : localValue}
111
132
  inputProps={{
112
133
  min,
113
134
  step,
@@ -135,13 +156,16 @@ export const IntInputField = React.forwardRef<
135
156
  margin: 0
136
157
  }
137
158
  }}
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);
159
+ onChangeDelay={(event) => {
160
+ const source = event.target.value;
161
+ const value = parseFloat(source);
162
+ if (isNaN(value)) setValue(undefined, source);
163
+ else if (value > max) setValue(max, source);
164
+ else if (value < min) setValue(value === 0 ? undefined : min, source);
165
+ // 0 is a special case
166
+ else setValue(value, source);
167
+
168
+ if (onChangeDelay) onChangeDelay(event);
145
169
  }}
146
170
  {...rest}
147
171
  />
@@ -154,8 +178,8 @@ export const IntInputField = React.forwardRef<
154
178
  size="small"
155
179
  onClick={() => {
156
180
  if (localValue == null) return;
157
- if (localValue <= min) setValue(undefined);
158
- else setValue(localValue - step);
181
+ if (localValue <= min) setValue(undefined, "SUB");
182
+ else setValue(localValue - step, "SUB");
159
183
  }}
160
184
  >
161
185
  <RemoveIcon />
@@ -165,11 +189,11 @@ export const IntInputField = React.forwardRef<
165
189
  size="small"
166
190
  onClick={() => {
167
191
  if (localValue == null) {
168
- setValue(min);
192
+ setValue(min, "ADD");
169
193
  return;
170
194
  }
171
195
  if (localValue >= max) return;
172
- else setValue(localValue + step);
196
+ else setValue(localValue + step, "ADD");
173
197
  }}
174
198
  >
175
199
  <AddIcon color={localValue == null ? undefined : "primary"} />