@dmsi/wedgekit-react 0.0.506 → 0.0.507
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.
|
@@ -941,7 +941,9 @@ var Stepper = (_a) => {
|
|
|
941
941
|
onDecrease,
|
|
942
942
|
onIncrease,
|
|
943
943
|
id,
|
|
944
|
-
testid
|
|
944
|
+
testid,
|
|
945
|
+
min,
|
|
946
|
+
max
|
|
945
947
|
} = _b, props = __objRest(_b, [
|
|
946
948
|
"error",
|
|
947
949
|
"disabled",
|
|
@@ -950,13 +952,21 @@ var Stepper = (_a) => {
|
|
|
950
952
|
"onDecrease",
|
|
951
953
|
"onIncrease",
|
|
952
954
|
"id",
|
|
953
|
-
"testid"
|
|
955
|
+
"testid",
|
|
956
|
+
"min",
|
|
957
|
+
"max"
|
|
954
958
|
]);
|
|
955
959
|
function handleIncrease() {
|
|
960
|
+
if (max != null && value >= max) {
|
|
961
|
+
return;
|
|
962
|
+
}
|
|
956
963
|
setValue((prevVal) => prevVal + 1);
|
|
957
964
|
onIncrease == null ? void 0 : onIncrease();
|
|
958
965
|
}
|
|
959
966
|
function handleDecrease() {
|
|
967
|
+
if (min != null && value <= min) {
|
|
968
|
+
return;
|
|
969
|
+
}
|
|
960
970
|
setValue((prevVal) => prevVal - 1);
|
|
961
971
|
onDecrease == null ? void 0 : onDecrease();
|
|
962
972
|
}
|
|
@@ -986,7 +996,7 @@ var Stepper = (_a) => {
|
|
|
986
996
|
}
|
|
987
997
|
),
|
|
988
998
|
onClick: handleDecrease,
|
|
989
|
-
disabled: disabled || value
|
|
999
|
+
disabled: disabled || value <= 0 || min != null && value <= min
|
|
990
1000
|
}
|
|
991
1001
|
),
|
|
992
1002
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -997,7 +1007,15 @@ var Stepper = (_a) => {
|
|
|
997
1007
|
type: "number",
|
|
998
1008
|
align: "center",
|
|
999
1009
|
value,
|
|
1000
|
-
onChange: (e) =>
|
|
1010
|
+
onChange: (e) => {
|
|
1011
|
+
const nextValue = +e.target.value;
|
|
1012
|
+
const lessThanMinimum = min != null && nextValue < min;
|
|
1013
|
+
const greaterThanMaximum = max != null && nextValue > max;
|
|
1014
|
+
if (lessThanMinimum || greaterThanMaximum) {
|
|
1015
|
+
return;
|
|
1016
|
+
}
|
|
1017
|
+
setValue(nextValue);
|
|
1018
|
+
},
|
|
1001
1019
|
error,
|
|
1002
1020
|
disabled,
|
|
1003
1021
|
className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
|
|
@@ -1022,7 +1040,7 @@ var Stepper = (_a) => {
|
|
|
1022
1040
|
}
|
|
1023
1041
|
),
|
|
1024
1042
|
onClick: handleIncrease,
|
|
1025
|
-
disabled
|
|
1043
|
+
disabled: disabled || max != null && value >= max
|
|
1026
1044
|
}
|
|
1027
1045
|
)
|
|
1028
1046
|
]
|
|
@@ -32,7 +32,9 @@ var Stepper = (_a) => {
|
|
|
32
32
|
onDecrease,
|
|
33
33
|
onIncrease,
|
|
34
34
|
id,
|
|
35
|
-
testid
|
|
35
|
+
testid,
|
|
36
|
+
min,
|
|
37
|
+
max
|
|
36
38
|
} = _b, props = __objRest(_b, [
|
|
37
39
|
"error",
|
|
38
40
|
"disabled",
|
|
@@ -41,13 +43,21 @@ var Stepper = (_a) => {
|
|
|
41
43
|
"onDecrease",
|
|
42
44
|
"onIncrease",
|
|
43
45
|
"id",
|
|
44
|
-
"testid"
|
|
46
|
+
"testid",
|
|
47
|
+
"min",
|
|
48
|
+
"max"
|
|
45
49
|
]);
|
|
46
50
|
function handleIncrease() {
|
|
51
|
+
if (max != null && value >= max) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
47
54
|
setValue((prevVal) => prevVal + 1);
|
|
48
55
|
onIncrease == null ? void 0 : onIncrease();
|
|
49
56
|
}
|
|
50
57
|
function handleDecrease() {
|
|
58
|
+
if (min != null && value <= min) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
51
61
|
setValue((prevVal) => prevVal - 1);
|
|
52
62
|
onDecrease == null ? void 0 : onDecrease();
|
|
53
63
|
}
|
|
@@ -77,7 +87,7 @@ var Stepper = (_a) => {
|
|
|
77
87
|
}
|
|
78
88
|
),
|
|
79
89
|
onClick: handleDecrease,
|
|
80
|
-
disabled: disabled || value
|
|
90
|
+
disabled: disabled || value <= 0 || min != null && value <= min
|
|
81
91
|
}
|
|
82
92
|
),
|
|
83
93
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
|
|
@@ -88,7 +98,15 @@ var Stepper = (_a) => {
|
|
|
88
98
|
type: "number",
|
|
89
99
|
align: "center",
|
|
90
100
|
value,
|
|
91
|
-
onChange: (e) =>
|
|
101
|
+
onChange: (e) => {
|
|
102
|
+
const nextValue = +e.target.value;
|
|
103
|
+
const lessThanMinimum = min != null && nextValue < min;
|
|
104
|
+
const greaterThanMaximum = max != null && nextValue > max;
|
|
105
|
+
if (lessThanMinimum || greaterThanMaximum) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
setValue(nextValue);
|
|
109
|
+
},
|
|
92
110
|
error,
|
|
93
111
|
disabled,
|
|
94
112
|
className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
|
|
@@ -113,7 +131,7 @@ var Stepper = (_a) => {
|
|
|
113
131
|
}
|
|
114
132
|
),
|
|
115
133
|
onClick: handleIncrease,
|
|
116
|
-
disabled
|
|
134
|
+
disabled: disabled || max != null && value >= max
|
|
117
135
|
}
|
|
118
136
|
)
|
|
119
137
|
]
|
package/package.json
CHANGED
|
@@ -14,6 +14,8 @@ type StepperProps = {
|
|
|
14
14
|
setValue: React.Dispatch<React.SetStateAction<number>>;
|
|
15
15
|
onIncrease?: () => void;
|
|
16
16
|
onDecrease?: () => void;
|
|
17
|
+
min?: number;
|
|
18
|
+
max?: number;
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
export const Stepper = ({
|
|
@@ -25,15 +27,27 @@ export const Stepper = ({
|
|
|
25
27
|
onIncrease,
|
|
26
28
|
id,
|
|
27
29
|
testid,
|
|
30
|
+
min,
|
|
31
|
+
max,
|
|
28
32
|
...props
|
|
29
33
|
}: StepperProps) => {
|
|
30
34
|
function handleIncrease() {
|
|
35
|
+
if (max != null && value >= max) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
|
|
31
39
|
setValue((prevVal) => prevVal + 1);
|
|
40
|
+
|
|
32
41
|
onIncrease?.();
|
|
33
42
|
}
|
|
34
43
|
|
|
35
44
|
function handleDecrease() {
|
|
45
|
+
if (min != null && value <= min) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
|
|
36
49
|
setValue((prevVal) => prevVal - 1);
|
|
50
|
+
|
|
37
51
|
onDecrease?.();
|
|
38
52
|
}
|
|
39
53
|
|
|
@@ -60,7 +74,7 @@ export const Stepper = ({
|
|
|
60
74
|
</span>
|
|
61
75
|
}
|
|
62
76
|
onClick={handleDecrease}
|
|
63
|
-
disabled={disabled || value
|
|
77
|
+
disabled={disabled || value <= 0 || (min != null && value <= min)}
|
|
64
78
|
/>
|
|
65
79
|
|
|
66
80
|
<div className="flex-1">
|
|
@@ -71,7 +85,17 @@ export const Stepper = ({
|
|
|
71
85
|
type="number"
|
|
72
86
|
align="center"
|
|
73
87
|
value={value}
|
|
74
|
-
onChange={(e) =>
|
|
88
|
+
onChange={(e) => {
|
|
89
|
+
const nextValue = +e.target.value;
|
|
90
|
+
const lessThanMinimum = min != null && nextValue < min;
|
|
91
|
+
const greaterThanMaximum = max != null && nextValue > max;
|
|
92
|
+
|
|
93
|
+
if (lessThanMinimum || greaterThanMaximum) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
setValue(nextValue);
|
|
98
|
+
}}
|
|
75
99
|
error={error}
|
|
76
100
|
disabled={disabled}
|
|
77
101
|
className="!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
|
|
@@ -95,7 +119,7 @@ export const Stepper = ({
|
|
|
95
119
|
</span>
|
|
96
120
|
}
|
|
97
121
|
onClick={handleIncrease}
|
|
98
|
-
disabled={disabled}
|
|
122
|
+
disabled={disabled || (max != null && value >= max)}
|
|
99
123
|
/>
|
|
100
124
|
</div>
|
|
101
125
|
);
|