@dmsi/wedgekit-react 0.0.1022 → 0.0.1024
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.
- package/dist/components/Stepper.cjs +32 -10
- package/dist/components/Stepper.js +33 -11
- package/package.json +1 -1
|
@@ -1267,7 +1267,8 @@ var Stepper = (_a) => {
|
|
|
1267
1267
|
testid,
|
|
1268
1268
|
min,
|
|
1269
1269
|
max,
|
|
1270
|
-
step = 1
|
|
1270
|
+
step = 1,
|
|
1271
|
+
allowDecimals = false
|
|
1271
1272
|
} = _b, props = __objRest(_b, [
|
|
1272
1273
|
"error",
|
|
1273
1274
|
"disabled",
|
|
@@ -1281,15 +1282,18 @@ var Stepper = (_a) => {
|
|
|
1281
1282
|
"testid",
|
|
1282
1283
|
"min",
|
|
1283
1284
|
"max",
|
|
1284
|
-
"step"
|
|
1285
|
+
"step",
|
|
1286
|
+
"allowDecimals"
|
|
1285
1287
|
]);
|
|
1286
|
-
const
|
|
1288
|
+
const userInputRef = (0, import_react8.useRef)(false);
|
|
1287
1289
|
const [displayValue, setDisplayValue] = (0, import_react8.useState)(String(value));
|
|
1288
1290
|
(0, import_react8.useEffect)(() => {
|
|
1289
|
-
if (
|
|
1290
|
-
|
|
1291
|
+
if (userInputRef.current) {
|
|
1292
|
+
userInputRef.current = false;
|
|
1293
|
+
return;
|
|
1291
1294
|
}
|
|
1292
|
-
|
|
1295
|
+
setDisplayValue(String(value));
|
|
1296
|
+
}, [value]);
|
|
1293
1297
|
function handleIncrease() {
|
|
1294
1298
|
if (max != null && value >= max) {
|
|
1295
1299
|
return;
|
|
@@ -1346,18 +1350,36 @@ var Stepper = (_a) => {
|
|
|
1346
1350
|
id: id ? `${id}-input` : void 0,
|
|
1347
1351
|
testid: testid ? `${testid}-input` : void 0,
|
|
1348
1352
|
type: "text",
|
|
1349
|
-
inputMode: "numeric",
|
|
1350
|
-
pattern: "[0-9]*",
|
|
1353
|
+
inputMode: allowDecimals ? "decimal" : "numeric",
|
|
1354
|
+
pattern: allowDecimals ? "[0-9]*\\.?[0-9]*" : "[0-9]*",
|
|
1351
1355
|
align: "center",
|
|
1352
1356
|
value: displayValue,
|
|
1353
|
-
onFocus: () => setIsEditing(true),
|
|
1354
1357
|
onChange: (e) => {
|
|
1355
1358
|
const rawValue = e.target.value;
|
|
1356
1359
|
if (rawValue === "") {
|
|
1357
1360
|
setDisplayValue("");
|
|
1361
|
+
userInputRef.current = true;
|
|
1358
1362
|
setValue(0);
|
|
1359
1363
|
return;
|
|
1360
1364
|
}
|
|
1365
|
+
if (allowDecimals) {
|
|
1366
|
+
if (!/^\d*\.?\d*$/.test(rawValue)) {
|
|
1367
|
+
return;
|
|
1368
|
+
}
|
|
1369
|
+
const cleanedValue2 = rawValue === "." ? "0." : rawValue.replace(/^0+(\d)/, "$1");
|
|
1370
|
+
const nextValue2 = parseFloat(cleanedValue2) || 0;
|
|
1371
|
+
const isIntermediate = rawValue.includes(".") && (rawValue.endsWith(".") || /0$/.test(rawValue));
|
|
1372
|
+
const greaterThanMaximum2 = max != null && nextValue2 > max;
|
|
1373
|
+
if (greaterThanMaximum2) {
|
|
1374
|
+
return;
|
|
1375
|
+
}
|
|
1376
|
+
setDisplayValue(
|
|
1377
|
+
isIntermediate ? cleanedValue2 : String(nextValue2)
|
|
1378
|
+
);
|
|
1379
|
+
userInputRef.current = true;
|
|
1380
|
+
setValue(nextValue2);
|
|
1381
|
+
return;
|
|
1382
|
+
}
|
|
1361
1383
|
if (!/^\d*$/.test(rawValue)) {
|
|
1362
1384
|
return;
|
|
1363
1385
|
}
|
|
@@ -1368,10 +1390,10 @@ var Stepper = (_a) => {
|
|
|
1368
1390
|
return;
|
|
1369
1391
|
}
|
|
1370
1392
|
setDisplayValue(cleanedValue);
|
|
1393
|
+
userInputRef.current = true;
|
|
1371
1394
|
setValue(nextValue);
|
|
1372
1395
|
},
|
|
1373
1396
|
onBlur: () => {
|
|
1374
|
-
setIsEditing(false);
|
|
1375
1397
|
setDisplayValue(String(value));
|
|
1376
1398
|
onBlur == null ? void 0 : onBlur();
|
|
1377
1399
|
},
|
|
@@ -29,7 +29,7 @@ import {
|
|
|
29
29
|
} from "../chunk-ORMEWXMH.js";
|
|
30
30
|
|
|
31
31
|
// src/components/Stepper.tsx
|
|
32
|
-
import { useState, useEffect } from "react";
|
|
32
|
+
import { useState, useEffect, useRef } from "react";
|
|
33
33
|
import clsx from "clsx";
|
|
34
34
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
35
35
|
var Stepper = (_a) => {
|
|
@@ -46,7 +46,8 @@ var Stepper = (_a) => {
|
|
|
46
46
|
testid,
|
|
47
47
|
min,
|
|
48
48
|
max,
|
|
49
|
-
step = 1
|
|
49
|
+
step = 1,
|
|
50
|
+
allowDecimals = false
|
|
50
51
|
} = _b, props = __objRest(_b, [
|
|
51
52
|
"error",
|
|
52
53
|
"disabled",
|
|
@@ -60,15 +61,18 @@ var Stepper = (_a) => {
|
|
|
60
61
|
"testid",
|
|
61
62
|
"min",
|
|
62
63
|
"max",
|
|
63
|
-
"step"
|
|
64
|
+
"step",
|
|
65
|
+
"allowDecimals"
|
|
64
66
|
]);
|
|
65
|
-
const
|
|
67
|
+
const userInputRef = useRef(false);
|
|
66
68
|
const [displayValue, setDisplayValue] = useState(String(value));
|
|
67
69
|
useEffect(() => {
|
|
68
|
-
if (
|
|
69
|
-
|
|
70
|
+
if (userInputRef.current) {
|
|
71
|
+
userInputRef.current = false;
|
|
72
|
+
return;
|
|
70
73
|
}
|
|
71
|
-
|
|
74
|
+
setDisplayValue(String(value));
|
|
75
|
+
}, [value]);
|
|
72
76
|
function handleIncrease() {
|
|
73
77
|
if (max != null && value >= max) {
|
|
74
78
|
return;
|
|
@@ -125,18 +129,36 @@ var Stepper = (_a) => {
|
|
|
125
129
|
id: id ? `${id}-input` : void 0,
|
|
126
130
|
testid: testid ? `${testid}-input` : void 0,
|
|
127
131
|
type: "text",
|
|
128
|
-
inputMode: "numeric",
|
|
129
|
-
pattern: "[0-9]*",
|
|
132
|
+
inputMode: allowDecimals ? "decimal" : "numeric",
|
|
133
|
+
pattern: allowDecimals ? "[0-9]*\\.?[0-9]*" : "[0-9]*",
|
|
130
134
|
align: "center",
|
|
131
135
|
value: displayValue,
|
|
132
|
-
onFocus: () => setIsEditing(true),
|
|
133
136
|
onChange: (e) => {
|
|
134
137
|
const rawValue = e.target.value;
|
|
135
138
|
if (rawValue === "") {
|
|
136
139
|
setDisplayValue("");
|
|
140
|
+
userInputRef.current = true;
|
|
137
141
|
setValue(0);
|
|
138
142
|
return;
|
|
139
143
|
}
|
|
144
|
+
if (allowDecimals) {
|
|
145
|
+
if (!/^\d*\.?\d*$/.test(rawValue)) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
const cleanedValue2 = rawValue === "." ? "0." : rawValue.replace(/^0+(\d)/, "$1");
|
|
149
|
+
const nextValue2 = parseFloat(cleanedValue2) || 0;
|
|
150
|
+
const isIntermediate = rawValue.includes(".") && (rawValue.endsWith(".") || /0$/.test(rawValue));
|
|
151
|
+
const greaterThanMaximum2 = max != null && nextValue2 > max;
|
|
152
|
+
if (greaterThanMaximum2) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
setDisplayValue(
|
|
156
|
+
isIntermediate ? cleanedValue2 : String(nextValue2)
|
|
157
|
+
);
|
|
158
|
+
userInputRef.current = true;
|
|
159
|
+
setValue(nextValue2);
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
140
162
|
if (!/^\d*$/.test(rawValue)) {
|
|
141
163
|
return;
|
|
142
164
|
}
|
|
@@ -147,10 +169,10 @@ var Stepper = (_a) => {
|
|
|
147
169
|
return;
|
|
148
170
|
}
|
|
149
171
|
setDisplayValue(cleanedValue);
|
|
172
|
+
userInputRef.current = true;
|
|
150
173
|
setValue(nextValue);
|
|
151
174
|
},
|
|
152
175
|
onBlur: () => {
|
|
153
|
-
setIsEditing(false);
|
|
154
176
|
setDisplayValue(String(value));
|
|
155
177
|
onBlur == null ? void 0 : onBlur();
|
|
156
178
|
},
|