@acusti/css-value-input 1.0.0-rc.9 → 1.0.1
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/README.md +1 -1
- package/dist/CSSValueInput.d.ts +6 -4
- package/dist/CSSValueInput.js +229 -152
- package/dist/CSSValueInput.js.flow +43 -43
- package/dist/CSSValueInput.js.map +1 -1
- package/dist/CSSValueInput.test.js +60 -20
- package/dist/CSSValueInput.test.js.map +1 -1
- package/package.json +14 -14
- package/src/CSSValueInput.test.tsx +2 -9
- package/src/CSSValueInput.tsx +21 -15
package/README.md
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@acusti/css-value-input)
|
|
4
4
|
[](https://npms.io/search?q=%40acusti%2Fcss-value-input)
|
|
5
|
-
[](https://bundlephobia.com/package/@acusti/css-value-input)
|
|
6
5
|
[](https://www.npmjs.com/package/@acusti/css-value-input)
|
|
6
|
+
[](https://bundlejs.com/?q=%40acusti%2Fcss-value-input)
|
|
7
7
|
|
|
8
8
|
`CSSValueInput` is a React component that renders a text input that can
|
|
9
9
|
take and update a CSS value of a particular type with a default unit. The
|
package/dist/CSSValueInput.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type CSSValueType } from '@acusti/css-values';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export type Props = {
|
|
4
4
|
/**
|
|
@@ -13,7 +13,7 @@ export type Props = {
|
|
|
13
13
|
* Function that receives a value and converts it to its numerical equivalent
|
|
14
14
|
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
15
15
|
*/
|
|
16
|
-
getValueAsNumber?: (value:
|
|
16
|
+
getValueAsNumber?: (value: number | string) => number;
|
|
17
17
|
icon?: React.ReactNode;
|
|
18
18
|
label?: string;
|
|
19
19
|
max?: number;
|
|
@@ -36,8 +36,10 @@ export type Props = {
|
|
|
36
36
|
title?: string;
|
|
37
37
|
unit?: string;
|
|
38
38
|
/** Regex or validator function to validate non-numeric values */
|
|
39
|
-
validator?:
|
|
39
|
+
validator?: ((value: string) => boolean) | RegExp;
|
|
40
40
|
value?: string;
|
|
41
41
|
};
|
|
42
|
-
declare const _default: React.ForwardRefExoticComponent<
|
|
42
|
+
declare const _default: React.ForwardRefExoticComponent<
|
|
43
|
+
Props & React.RefAttributes<HTMLInputElement>
|
|
44
|
+
>;
|
|
43
45
|
export default _default;
|
package/dist/CSSValueInput.js
CHANGED
|
@@ -1,178 +1,255 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
DEFAULT_CSS_VALUE_TYPE,
|
|
3
|
+
DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
|
|
4
|
+
getCSSValueAsNumber,
|
|
5
|
+
getCSSValueWithUnit,
|
|
6
|
+
getUnitFromCSSValue,
|
|
7
|
+
roundToPrecision,
|
|
8
|
+
} from '@acusti/css-values';
|
|
2
9
|
import InputText from '@acusti/input-text';
|
|
3
10
|
import clsx from 'clsx';
|
|
4
11
|
import * as React from 'react';
|
|
5
12
|
const { useCallback, useEffect, useImperativeHandle, useRef } = React;
|
|
6
13
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
7
|
-
export default React.forwardRef(function CSSValueInput(
|
|
14
|
+
export default React.forwardRef(function CSSValueInput(
|
|
15
|
+
{
|
|
16
|
+
allowEmpty = true,
|
|
17
|
+
className,
|
|
18
|
+
cssValueType = DEFAULT_CSS_VALUE_TYPE,
|
|
19
|
+
disabled,
|
|
20
|
+
getValueAsNumber = getCSSValueAsNumber,
|
|
21
|
+
icon,
|
|
22
|
+
label,
|
|
23
|
+
max,
|
|
24
|
+
min,
|
|
25
|
+
name,
|
|
26
|
+
onBlur,
|
|
27
|
+
onChange,
|
|
28
|
+
onFocus,
|
|
29
|
+
onKeyDown,
|
|
30
|
+
onKeyUp,
|
|
31
|
+
onSubmitValue,
|
|
32
|
+
placeholder,
|
|
33
|
+
step = 1,
|
|
34
|
+
tabIndex,
|
|
35
|
+
title,
|
|
36
|
+
unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
|
|
37
|
+
validator,
|
|
38
|
+
value,
|
|
39
|
+
},
|
|
40
|
+
ref,
|
|
41
|
+
) {
|
|
8
42
|
const inputRef = useRef(null);
|
|
9
43
|
useImperativeHandle(ref, () => inputRef.current);
|
|
10
44
|
// props.value should be a string; if it’s a number, convert it here
|
|
11
45
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
12
|
-
value = `${value}`;
|
|
46
|
+
value = `${value}`;
|
|
13
47
|
}
|
|
14
48
|
const submittedValueRef = useRef(value !== null && value !== void 0 ? value : '');
|
|
15
49
|
useEffect(() => {
|
|
16
50
|
submittedValueRef.current = value !== null && value !== void 0 ? value : '';
|
|
17
51
|
}, [value]);
|
|
18
|
-
const handleSubmitValue = useCallback(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
// Inherit unit from last submitted value unless default is unitless;
|
|
38
|
-
// ensures that submitting a new value with no unit doesn’t add a unit
|
|
39
|
-
const defaultUnit = unit
|
|
40
|
-
? getUnitFromCSSValue({
|
|
41
|
-
cssValueType,
|
|
42
|
-
defaultUnit: unit,
|
|
43
|
-
value: submittedValueRef.current,
|
|
44
|
-
})
|
|
45
|
-
: '';
|
|
46
|
-
if (!isCurrentValueFinite) {
|
|
47
|
-
let isValid = false;
|
|
48
|
-
if (validator instanceof RegExp) {
|
|
49
|
-
isValid = validator.test(currentValue);
|
|
52
|
+
const handleSubmitValue = useCallback(
|
|
53
|
+
(event) => {
|
|
54
|
+
const currentValue = event.currentTarget.value;
|
|
55
|
+
// Store last submittedValue (used to reset value on invalid input)
|
|
56
|
+
submittedValueRef.current = currentValue;
|
|
57
|
+
onSubmitValue(currentValue);
|
|
58
|
+
},
|
|
59
|
+
[onSubmitValue],
|
|
60
|
+
);
|
|
61
|
+
const handleBlur = useCallback(
|
|
62
|
+
(event) => {
|
|
63
|
+
const input = event.currentTarget;
|
|
64
|
+
inputRef.current = input;
|
|
65
|
+
if (onBlur) onBlur(event);
|
|
66
|
+
const currentValue = input.value.trim();
|
|
67
|
+
// If allowEmpty and value is empty, skip all validation + normalization
|
|
68
|
+
if (allowEmpty && !currentValue) {
|
|
69
|
+
handleSubmitValue(event);
|
|
70
|
+
return;
|
|
50
71
|
}
|
|
51
|
-
|
|
52
|
-
|
|
72
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
73
|
+
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
74
|
+
// Inherit unit from last submitted value unless default is unitless;
|
|
75
|
+
// ensures that submitting a new value with no unit doesn’t add a unit
|
|
76
|
+
const defaultUnit = unit
|
|
77
|
+
? getUnitFromCSSValue({
|
|
78
|
+
cssValueType,
|
|
79
|
+
defaultUnit: unit,
|
|
80
|
+
value: submittedValueRef.current,
|
|
81
|
+
})
|
|
82
|
+
: '';
|
|
83
|
+
if (!isCurrentValueFinite) {
|
|
84
|
+
let isValid = false;
|
|
85
|
+
if (validator instanceof RegExp) {
|
|
86
|
+
isValid = validator.test(currentValue);
|
|
87
|
+
} else if (validator) {
|
|
88
|
+
isValid = validator(currentValue);
|
|
89
|
+
}
|
|
90
|
+
if (isValid) {
|
|
91
|
+
handleSubmitValue(event);
|
|
92
|
+
} else {
|
|
93
|
+
// If current value isn’t valid, revert to last submitted value
|
|
94
|
+
input.value = submittedValueRef.current;
|
|
95
|
+
}
|
|
96
|
+
return;
|
|
53
97
|
}
|
|
54
|
-
|
|
55
|
-
|
|
98
|
+
// Normalize value by applying min/max and integer constraints
|
|
99
|
+
let normalizedValueAsNumber = currentValueAsNumber;
|
|
100
|
+
if (isCurrentValueFinite) {
|
|
101
|
+
if (min != null && currentValueAsNumber < min) {
|
|
102
|
+
normalizedValueAsNumber = min;
|
|
103
|
+
} else if (max != null && currentValueAsNumber > max) {
|
|
104
|
+
normalizedValueAsNumber = max;
|
|
105
|
+
} else if (cssValueType === 'integer') {
|
|
106
|
+
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
107
|
+
}
|
|
56
108
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
109
|
+
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
110
|
+
const currentUnit = getUnitFromCSSValue({
|
|
111
|
+
cssValueType,
|
|
112
|
+
defaultUnit,
|
|
113
|
+
value: currentValue,
|
|
114
|
+
});
|
|
115
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
116
|
+
} else {
|
|
117
|
+
input.value = getCSSValueWithUnit({
|
|
118
|
+
cssValueType,
|
|
119
|
+
defaultUnit,
|
|
120
|
+
value: currentValue,
|
|
121
|
+
});
|
|
60
122
|
}
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
123
|
+
handleSubmitValue(event);
|
|
124
|
+
},
|
|
125
|
+
[
|
|
126
|
+
allowEmpty,
|
|
127
|
+
cssValueType,
|
|
128
|
+
getValueAsNumber,
|
|
129
|
+
handleSubmitValue,
|
|
130
|
+
max,
|
|
131
|
+
min,
|
|
132
|
+
onBlur,
|
|
133
|
+
unit,
|
|
134
|
+
validator,
|
|
135
|
+
],
|
|
136
|
+
);
|
|
137
|
+
const getNextValue = useCallback(
|
|
138
|
+
({ currentValue, multiplier = 1, signum = 1 }) => {
|
|
139
|
+
const modifier = multiplier * step * signum;
|
|
140
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
141
|
+
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
142
|
+
if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
|
|
143
|
+
return currentValue;
|
|
68
144
|
}
|
|
69
|
-
|
|
70
|
-
|
|
145
|
+
let nextValue = currentValueAsNumber + modifier;
|
|
146
|
+
if (cssValueType === 'integer') {
|
|
147
|
+
nextValue = Math.floor(nextValue);
|
|
148
|
+
} else {
|
|
149
|
+
nextValue = roundToPrecision(nextValue, 5);
|
|
71
150
|
}
|
|
72
|
-
|
|
73
|
-
|
|
151
|
+
if (typeof max === 'number' && Number.isFinite(max)) {
|
|
152
|
+
nextValue = Math.min(max, nextValue);
|
|
74
153
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
defaultUnit,
|
|
80
|
-
value: currentValue,
|
|
81
|
-
});
|
|
82
|
-
input.value = normalizedValueAsNumber + currentUnit;
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
input.value = getCSSValueWithUnit({
|
|
154
|
+
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
155
|
+
nextValue = Math.max(min, nextValue);
|
|
156
|
+
}
|
|
157
|
+
const nextUnit = getUnitFromCSSValue({
|
|
86
158
|
cssValueType,
|
|
87
|
-
defaultUnit,
|
|
159
|
+
defaultUnit: unit,
|
|
88
160
|
value: currentValue,
|
|
89
161
|
});
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
nextValue = Math.min(max, nextValue);
|
|
119
|
-
}
|
|
120
|
-
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
121
|
-
nextValue = Math.max(min, nextValue);
|
|
122
|
-
}
|
|
123
|
-
const nextUnit = getUnitFromCSSValue({
|
|
124
|
-
cssValueType,
|
|
125
|
-
defaultUnit: unit,
|
|
126
|
-
value: currentValue,
|
|
127
|
-
});
|
|
128
|
-
return `${nextValue}${nextUnit}`;
|
|
129
|
-
}, [cssValueType, getValueAsNumber, max, min, step, unit]);
|
|
130
|
-
const handleKeyDown = useCallback((event) => {
|
|
131
|
-
var _a, _b;
|
|
132
|
-
const input = event.currentTarget;
|
|
133
|
-
inputRef.current = input;
|
|
134
|
-
if (onKeyDown)
|
|
135
|
-
onKeyDown(event);
|
|
136
|
-
const currentValue = (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : `0${unit}`;
|
|
137
|
-
let nextValue = '';
|
|
138
|
-
switch (event.key) {
|
|
139
|
-
case 'Escape':
|
|
140
|
-
case 'Enter':
|
|
141
|
-
if (event.key === 'Escape') {
|
|
142
|
-
input.value = submittedValueRef.current;
|
|
143
|
-
}
|
|
144
|
-
input.blur();
|
|
145
|
-
return;
|
|
146
|
-
case 'ArrowUp':
|
|
147
|
-
case 'ArrowDown':
|
|
148
|
-
nextValue = getNextValue({
|
|
149
|
-
currentValue,
|
|
150
|
-
multiplier: event.shiftKey ? 10 : 1,
|
|
151
|
-
signum: event.key === 'ArrowUp' ? 1 : -1,
|
|
152
|
-
});
|
|
153
|
-
if (nextValue === currentValue)
|
|
162
|
+
return `${nextValue}${nextUnit}`;
|
|
163
|
+
},
|
|
164
|
+
[cssValueType, getValueAsNumber, max, min, step, unit],
|
|
165
|
+
);
|
|
166
|
+
const handleKeyDown = useCallback(
|
|
167
|
+
(event) => {
|
|
168
|
+
var _a, _b;
|
|
169
|
+
const input = event.currentTarget;
|
|
170
|
+
inputRef.current = input;
|
|
171
|
+
if (onKeyDown) onKeyDown(event);
|
|
172
|
+
const currentValue =
|
|
173
|
+
(_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !==
|
|
174
|
+
null && _b !== void 0
|
|
175
|
+
? _b
|
|
176
|
+
: `0${unit}`;
|
|
177
|
+
let nextValue = '';
|
|
178
|
+
switch (event.key) {
|
|
179
|
+
case 'ArrowDown':
|
|
180
|
+
case 'ArrowUp':
|
|
181
|
+
nextValue = getNextValue({
|
|
182
|
+
currentValue,
|
|
183
|
+
multiplier: event.shiftKey ? 10 : 1,
|
|
184
|
+
signum: event.key === 'ArrowUp' ? 1 : -1,
|
|
185
|
+
});
|
|
186
|
+
if (nextValue === currentValue) return;
|
|
187
|
+
event.stopPropagation();
|
|
188
|
+
event.preventDefault();
|
|
189
|
+
input.value = nextValue;
|
|
154
190
|
return;
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
191
|
+
case 'Enter':
|
|
192
|
+
case 'Escape':
|
|
193
|
+
if (event.key === 'Escape') {
|
|
194
|
+
input.value = submittedValueRef.current;
|
|
195
|
+
}
|
|
196
|
+
input.blur();
|
|
197
|
+
return;
|
|
198
|
+
default:
|
|
199
|
+
// No default key handling
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
[getNextValue, onKeyDown, placeholder, unit],
|
|
203
|
+
);
|
|
204
|
+
const handleKeyUp = useCallback(
|
|
205
|
+
(event) => {
|
|
206
|
+
if (onKeyUp) onKeyUp(event);
|
|
207
|
+
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
208
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
209
|
+
handleSubmitValue(event);
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
[handleSubmitValue, onKeyUp],
|
|
213
|
+
);
|
|
214
|
+
return React.createElement(
|
|
215
|
+
'label',
|
|
216
|
+
{
|
|
217
|
+
'aria-label': label ? undefined : title,
|
|
218
|
+
className: clsx(ROOT_CLASS_NAME, className, { disabled }),
|
|
219
|
+
title: title,
|
|
220
|
+
},
|
|
221
|
+
icon == null
|
|
222
|
+
? null
|
|
223
|
+
: React.createElement('div', { className: `${ROOT_CLASS_NAME}-icon` }, icon),
|
|
224
|
+
label
|
|
225
|
+
? React.createElement(
|
|
226
|
+
'div',
|
|
227
|
+
{ className: `${ROOT_CLASS_NAME}-label` },
|
|
228
|
+
React.createElement(
|
|
229
|
+
'p',
|
|
230
|
+
{ className: `${ROOT_CLASS_NAME}-label-text` },
|
|
231
|
+
label,
|
|
232
|
+
),
|
|
233
|
+
)
|
|
234
|
+
: null,
|
|
235
|
+
React.createElement(
|
|
236
|
+
'div',
|
|
237
|
+
{ className: `${ROOT_CLASS_NAME}-value` },
|
|
238
|
+
React.createElement(InputText, {
|
|
239
|
+
disabled: disabled,
|
|
240
|
+
initialValue: value,
|
|
241
|
+
name: name,
|
|
242
|
+
onBlur: handleBlur,
|
|
243
|
+
onChange: onChange,
|
|
244
|
+
onFocus: onFocus,
|
|
245
|
+
onKeyDown: handleKeyDown,
|
|
246
|
+
onKeyUp: handleKeyUp,
|
|
247
|
+
placeholder: placeholder,
|
|
248
|
+
ref: inputRef,
|
|
249
|
+
selectTextOnFocus: true,
|
|
250
|
+
tabIndex: tabIndex,
|
|
251
|
+
}),
|
|
252
|
+
),
|
|
253
|
+
);
|
|
177
254
|
});
|
|
178
|
-
//# sourceMappingURL=CSSValueInput.js.map
|
|
255
|
+
//# sourceMappingURL=CSSValueInput.js.map
|
|
@@ -5,54 +5,54 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import type
|
|
9
|
-
import * as React from
|
|
8
|
+
import { type, CSSValueType } from '@acusti/css-values';
|
|
9
|
+
import * as React from 'react';
|
|
10
10
|
export type Props = {|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
13
|
+
* the value). Defaults to true.
|
|
14
|
+
*/
|
|
15
|
+
allowEmpty?: boolean,
|
|
16
|
+
className?: string,
|
|
17
|
+
cssValueType?: CSSValueType,
|
|
18
|
+
disabled?: boolean,
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Function that receives a value and converts it to its numerical equivalent
|
|
22
|
+
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
23
|
+
*/
|
|
24
|
+
getValueAsNumber?: (value: number | string) => number,
|
|
25
|
+
icon?: React.Node,
|
|
26
|
+
label?: string,
|
|
27
|
+
max?: number,
|
|
28
|
+
min?: number,
|
|
29
|
+
name?: string,
|
|
30
|
+
onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
|
|
31
|
+
onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
|
|
32
|
+
onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
|
|
33
|
+
onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
34
|
+
onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Custom event handler triggered when the user presses enter/return
|
|
38
|
+
* or blurs the input after making a change. Hitting esc will restore
|
|
39
|
+
* the previous submitted value or original value.
|
|
40
|
+
*/
|
|
41
|
+
onSubmitValue: (value: string) => mixed,
|
|
42
|
+
placeholder?: string,
|
|
43
|
+
step?: number,
|
|
44
|
+
tabIndex?: number,
|
|
45
|
+
title?: string,
|
|
46
|
+
unit?: string,
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
/**
|
|
49
|
+
* Regex or validator function to validate non-numeric values
|
|
50
|
+
*/
|
|
51
|
+
validator?: ((value: string) => boolean) | RegExp,
|
|
52
|
+
value?: string,
|
|
53
53
|
|};
|
|
54
54
|
declare var _default: React.StatelessFunctionalComponent<{|
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
...Props,
|
|
56
|
+
...{| ref?: HTMLInputElement |},
|
|
57
57
|
|}>;
|
|
58
58
|
declare export default typeof _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,sBAAsB,EACtB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAEtE,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,eAAe,KAAK,CAAC,UAAU,CAA0B,SAAS,aAAa,CAC3E,EACI,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,YAAY,GAAG,sBAAsB,EACrC,QAAQ,EACR,gBAAgB,GAAG,mBAAmB,EACtC,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,IAAI,GAAG,CAAC,EACR,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,8BAA8B,CAAC,YAAY,CAAC,EACnD,SAAS,EACT,KAAK,GACD,EACR,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACxC,mBAAmB,CAAqB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrE,oEAAoE;IACpE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACpD,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;IACvB,CAAC;IACD,MAAM,iBAAiB,GAAG,MAAM,CAAS,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,iBAAiB,CAAC,OAAO,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,KAA6C,EAAE,EAAE;QAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QAC/C,mEAAmE;QACnE,iBAAiB,CAAC,OAAO,GAAG,YAAY,CAAC;QACzC,aAAa,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,KAAyC,EAAE,EAAE;QAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;QAClC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAExC,wEAAwE;QACxE,IAAI,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC;YAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO;QACX,CAAC;QAED,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QACnE,qEAAqE;QACrE,sEAAsE;QACtE,MAAM,WAAW,GAAG,IAAI;YACpB,CAAC,CAAC,mBAAmB,CAAC;gBAChB,YAAY;gBACZ,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,iBAAiB,CAAC,OAAO;aACnC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAET,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACxB,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,IAAI,SAAS,YAAY,MAAM,EAAE,CAAC;gBAC9B,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC3C,CAAC;iBAAM,IAAI,SAAS,EAAE,CAAC;gBACnB,OAAO,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;YACtC,CAAC;YAED,IAAI,OAAO,EAAE,CAAC;gBACV,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACJ,+DAA+D;gBAC/D,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC;YAC5C,CAAC;YAED,OAAO;QACX,CAAC;QAED,8DAA8D;QAC9D,IAAI,uBAAuB,GAAG,oBAAoB,CAAC;QAEnD,IAAI,oBAAoB,EAAE,CAAC;YACvB,IAAI,GAAG,IAAI,IAAI,IAAI,oBAAoB,GAAG,GAAG,EAAE,CAAC;gBAC5C,uBAAuB,GAAG,GAAG,CAAC;YAClC,CAAC;iBAAM,IAAI,GAAG,IAAI,IAAI,IAAI,oBAAoB,GAAG,GAAG,EAAE,CAAC;gBACnD,uBAAuB,GAAG,GAAG,CAAC;YAClC,CAAC;iBAAM,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBACpC,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;YAC/D,CAAC;QACL,CAAC;QAED,IAAI,uBAAuB,KAAK,oBAAoB,EAAE,CAAC;YACnD,MAAM,WAAW,GAAG,mBAAmB,CAAC;gBACpC,YAAY;gBACZ,WAAW;gBACX,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;YACH,KAAK,CAAC,KAAK,GAAG,uBAAuB,GAAG,WAAW,CAAC;QACxD,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,KAAK,GAAG,mBAAmB,CAAC;gBAC9B,YAAY;gBACZ,WAAW;gBACX,KAAK,EAAE,YAAY;aACtB,CAAC,CAAC;QACP,CAAC;QAED,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EACD;QACI,UAAU;QACV,YAAY;QACZ,gBAAgB;QAChB,iBAAiB;QACjB,GAAG;QACH,GAAG;QACH,MAAM;QACN,IAAI;QACJ,SAAS;KACZ,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,EACG,YAAY,EACZ,UAAU,GAAG,CAAC,EACd,MAAM,GAAG,CAAC,GAKb,EAAE,EAAE;QACD,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;QAC5C,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAC5D,qEAAqE;QACrE,IAAI,OAAO,YAAY,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,oBAAoB,CAAC,EAAE,CAAC;YACzE,OAAO,YAAY,CAAC;QACxB,CAAC;QAED,IAAI,SAAS,GAAG,oBAAoB,GAAG,QAAQ,CAAC;QAChD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC7B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACJ,SAAS,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAClD,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAClD,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,MAAM,QAAQ,GAAG,mBAAmB,CAAC;YACjC,YAAY;YACZ,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,YAAY;SACtB,CAAC,CAAC;QACH,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;IACrC,CAAC,EACD,CAAC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CACzD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAA4C,EAAE,EAAE;;QAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC;QAClC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,IAAI,SAAS;YAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhC,MAAM,YAAY,GAAG,MAAA,MAAA,KAAK,CAAC,KAAK,mCAAI,WAAW,mCAAI,IAAI,IAAI,EAAE,CAAC;QAC9D,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAChB,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACV,SAAS,GAAG,YAAY,CAAC;oBACrB,YAAY;oBACZ,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACnC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC3C,CAAC,CAAC;gBAEH,IAAI,SAAS,KAAK,YAAY;oBAAE,OAAO;gBAEvC,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;gBACxB,OAAO;YACX,KAAK,OAAO,CAAC;YACb,KAAK,QAAQ;gBACT,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;oBACzB,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC;gBAC5C,CAAC;gBACD,KAAK,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,QAAQ;YACR,0BAA0B;QAC9B,CAAC;IACL,CAAC,EACD,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,CAC/C,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAA4C,EAAE,EAAE;QAC7C,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,oEAAoE;QACpE,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACvD,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,EACD,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAC/B,CAAC;IAEF,OAAO,CACH,6CACgB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACrC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EACzD,KAAK,EAAE,KAAK;QAEX,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAE,GAAG,eAAe,OAAO,IAAG,IAAI,CAAO,CAC1D;QACA,KAAK,CAAC,CAAC,CAAC,CACL,6BAAK,SAAS,EAAE,GAAG,eAAe,QAAQ;YACtC,2BAAG,SAAS,EAAE,GAAG,eAAe,aAAa,IAAG,KAAK,CAAK,CACxD,CACT,CAAC,CAAC,CAAC,IAAI;QACR,6BAAK,SAAS,EAAE,GAAG,eAAe,QAAQ;YACtC,oBAAC,SAAS,IACN,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,iBAAiB,QACjB,QAAQ,EAAE,QAAQ,GACpB,CACA,CACF,CACX,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
// @vitest-environment happy-dom
|
|
2
2
|
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import { userEvent } from '@testing-library/user-event';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
import CSSValueInput from './CSSValueInput.js';
|
|
7
|
-
const noop = () => {
|
|
7
|
+
const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
|
|
8
8
|
afterEach(cleanup);
|
|
9
9
|
describe('CSSValueInput.tsx', () => {
|
|
10
10
|
it('renders a text input with the given props.value', () => {
|
|
11
|
-
render(
|
|
12
|
-
|
|
11
|
+
render(
|
|
12
|
+
React.createElement(CSSValueInput, { onSubmitValue: noop, value: '24px' }),
|
|
13
|
+
);
|
|
13
14
|
const input = screen.getByRole('textbox');
|
|
14
15
|
expect(input.value).toBe('24px');
|
|
15
16
|
});
|
|
16
17
|
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
17
18
|
const user = userEvent.setup();
|
|
18
|
-
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value:
|
|
19
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
19
|
+
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: '75%' }));
|
|
20
20
|
const input = screen.getByRole('textbox');
|
|
21
21
|
expect(input.value).toBe('75%');
|
|
22
22
|
await user.type(input, '{ArrowUp}');
|
|
@@ -34,8 +34,13 @@ describe('CSSValueInput.tsx', () => {
|
|
|
34
34
|
});
|
|
35
35
|
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
36
36
|
const user = userEvent.setup();
|
|
37
|
-
render(
|
|
38
|
-
|
|
37
|
+
render(
|
|
38
|
+
React.createElement(CSSValueInput, {
|
|
39
|
+
onSubmitValue: noop,
|
|
40
|
+
step: 0.1,
|
|
41
|
+
value: '2rem',
|
|
42
|
+
}),
|
|
43
|
+
);
|
|
39
44
|
const input = screen.getByRole('textbox');
|
|
40
45
|
expect(input.value).toBe('2rem');
|
|
41
46
|
await user.type(input, '{ArrowUp}');
|
|
@@ -53,8 +58,14 @@ describe('CSSValueInput.tsx', () => {
|
|
|
53
58
|
});
|
|
54
59
|
it('uses props.unit as default unit when unit is missing', async () => {
|
|
55
60
|
const user = userEvent.setup();
|
|
56
|
-
render(
|
|
57
|
-
|
|
61
|
+
render(
|
|
62
|
+
React.createElement(CSSValueInput, {
|
|
63
|
+
allowEmpty: true,
|
|
64
|
+
onSubmitValue: noop,
|
|
65
|
+
unit: 'px',
|
|
66
|
+
value: '',
|
|
67
|
+
}),
|
|
68
|
+
);
|
|
58
69
|
const input = screen.getByRole('textbox');
|
|
59
70
|
expect(input.value).toBe('');
|
|
60
71
|
await user.type(input, '14{Enter}');
|
|
@@ -62,8 +73,14 @@ describe('CSSValueInput.tsx', () => {
|
|
|
62
73
|
});
|
|
63
74
|
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
64
75
|
const user = userEvent.setup();
|
|
65
|
-
render(
|
|
66
|
-
|
|
76
|
+
render(
|
|
77
|
+
React.createElement(CSSValueInput, {
|
|
78
|
+
allowEmpty: true,
|
|
79
|
+
onSubmitValue: noop,
|
|
80
|
+
unit: 'px',
|
|
81
|
+
value: '',
|
|
82
|
+
}),
|
|
83
|
+
);
|
|
67
84
|
const input = screen.getByRole('textbox');
|
|
68
85
|
expect(input.value).toBe('');
|
|
69
86
|
await user.type(input, '25vw{Enter}');
|
|
@@ -73,8 +90,14 @@ describe('CSSValueInput.tsx', () => {
|
|
|
73
90
|
});
|
|
74
91
|
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
75
92
|
const user = userEvent.setup();
|
|
76
|
-
render(
|
|
77
|
-
|
|
93
|
+
render(
|
|
94
|
+
React.createElement(CSSValueInput, {
|
|
95
|
+
allowEmpty: true,
|
|
96
|
+
onSubmitValue: noop,
|
|
97
|
+
unit: '',
|
|
98
|
+
value: '100',
|
|
99
|
+
}),
|
|
100
|
+
);
|
|
78
101
|
const input = screen.getByRole('textbox');
|
|
79
102
|
expect(input.value).toBe('100');
|
|
80
103
|
await user.type(input, '1{Enter}');
|
|
@@ -88,17 +111,34 @@ describe('CSSValueInput.tsx', () => {
|
|
|
88
111
|
});
|
|
89
112
|
it('updates default unit as props.unit and props.value changes', async () => {
|
|
90
113
|
const user = userEvent.setup();
|
|
91
|
-
const { rerender } = render(
|
|
92
|
-
|
|
114
|
+
const { rerender } = render(
|
|
115
|
+
React.createElement(CSSValueInput, {
|
|
116
|
+
onSubmitValue: noop,
|
|
117
|
+
unit: 'px',
|
|
118
|
+
value: '12px',
|
|
119
|
+
}),
|
|
120
|
+
);
|
|
93
121
|
const input = screen.getByRole('textbox');
|
|
94
|
-
rerender(
|
|
122
|
+
rerender(
|
|
123
|
+
React.createElement(CSSValueInput, {
|
|
124
|
+
onSubmitValue: noop,
|
|
125
|
+
unit: '',
|
|
126
|
+
value: '4',
|
|
127
|
+
}),
|
|
128
|
+
);
|
|
95
129
|
expect(input.value).toBe('4');
|
|
96
130
|
await user.type(input, '25{Enter}');
|
|
97
131
|
expect(input.value).toBe('25');
|
|
98
|
-
rerender(
|
|
132
|
+
rerender(
|
|
133
|
+
React.createElement(CSSValueInput, {
|
|
134
|
+
onSubmitValue: noop,
|
|
135
|
+
unit: 'rad',
|
|
136
|
+
value: '3rad',
|
|
137
|
+
}),
|
|
138
|
+
);
|
|
99
139
|
expect(input.value).toBe('3rad');
|
|
100
140
|
await user.type(input, '-4.1{Enter}');
|
|
101
141
|
expect(input.value).toBe('-4.1rad');
|
|
102
142
|
});
|
|
103
143
|
});
|
|
104
|
-
//# sourceMappingURL=CSSValueInput.test.js.map
|
|
144
|
+
//# sourceMappingURL=CSSValueInput.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,SAAS,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/css-value-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/CSSValueInput.js",
|
|
@@ -39,23 +39,23 @@
|
|
|
39
39
|
},
|
|
40
40
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@testing-library/dom": "^
|
|
43
|
-
"@testing-library/react": "^
|
|
44
|
-
"@testing-library/user-event": "^14.
|
|
45
|
-
"@types/react": "^
|
|
46
|
-
"happy-dom": "^
|
|
47
|
-
"react": "^
|
|
48
|
-
"react-dom": "^
|
|
49
|
-
"typescript": "
|
|
50
|
-
"vitest": "^
|
|
42
|
+
"@testing-library/dom": "^10.4.0",
|
|
43
|
+
"@testing-library/react": "^16.1.0",
|
|
44
|
+
"@testing-library/user-event": "^14.5.2",
|
|
45
|
+
"@types/react": "^19.0.2",
|
|
46
|
+
"happy-dom": "^15.11.7",
|
|
47
|
+
"react": "^19.0.0",
|
|
48
|
+
"react-dom": "^19.0.0",
|
|
49
|
+
"typescript": "5.7.3",
|
|
50
|
+
"vitest": "^2.1.8"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@acusti/css-values": "^1.0.
|
|
54
|
-
"@acusti/input-text": "^1.
|
|
53
|
+
"@acusti/css-values": "^1.0.4",
|
|
54
|
+
"@acusti/input-text": "^1.9.1",
|
|
55
55
|
"clsx": "^2"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"react": "^16.8 || ^17 || ^18",
|
|
59
|
-
"react-dom": "^16.8 || ^17 || ^18"
|
|
58
|
+
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
59
|
+
"react-dom": "^16.8 || ^17 || ^18 || ^19"
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @vitest-environment happy-dom
|
|
2
2
|
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import { userEvent } from '@testing-library/user-event';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
|
|
7
7
|
import CSSValueInput from './CSSValueInput.js';
|
|
@@ -13,7 +13,6 @@ afterEach(cleanup);
|
|
|
13
13
|
describe('CSSValueInput.tsx', () => {
|
|
14
14
|
it('renders a text input with the given props.value', () => {
|
|
15
15
|
render(<CSSValueInput onSubmitValue={noop} value="24px" />);
|
|
16
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
17
16
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
18
17
|
expect(input.value).toBe('24px');
|
|
19
18
|
});
|
|
@@ -21,7 +20,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
21
20
|
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
22
21
|
const user = userEvent.setup();
|
|
23
22
|
render(<CSSValueInput onSubmitValue={noop} value="75%" />);
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
25
23
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
26
24
|
expect(input.value).toBe('75%');
|
|
27
25
|
await user.type(input, '{ArrowUp}');
|
|
@@ -41,7 +39,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
41
39
|
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
42
40
|
const user = userEvent.setup();
|
|
43
41
|
render(<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />);
|
|
44
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
45
42
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
46
43
|
expect(input.value).toBe('2rem');
|
|
47
44
|
await user.type(input, '{ArrowUp}');
|
|
@@ -61,7 +58,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
61
58
|
it('uses props.unit as default unit when unit is missing', async () => {
|
|
62
59
|
const user = userEvent.setup();
|
|
63
60
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
64
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
65
61
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
66
62
|
expect(input.value).toBe('');
|
|
67
63
|
await user.type(input, '14{Enter}');
|
|
@@ -71,7 +67,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
71
67
|
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
72
68
|
const user = userEvent.setup();
|
|
73
69
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
74
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
75
70
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
76
71
|
expect(input.value).toBe('');
|
|
77
72
|
await user.type(input, '25vw{Enter}');
|
|
@@ -83,7 +78,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
83
78
|
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
84
79
|
const user = userEvent.setup();
|
|
85
80
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />);
|
|
86
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
87
81
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
88
82
|
expect(input.value).toBe('100');
|
|
89
83
|
await user.type(input, '1{Enter}');
|
|
@@ -101,7 +95,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
101
95
|
const { rerender } = render(
|
|
102
96
|
<CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
|
|
103
97
|
);
|
|
104
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
105
98
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
106
99
|
rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
|
|
107
100
|
expect(input.value).toBe('4');
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
type CSSValueType,
|
|
2
3
|
DEFAULT_CSS_VALUE_TYPE,
|
|
3
4
|
DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
|
|
4
5
|
getCSSValueAsNumber,
|
|
@@ -6,7 +7,6 @@ import {
|
|
|
6
7
|
getUnitFromCSSValue,
|
|
7
8
|
roundToPrecision,
|
|
8
9
|
} from '@acusti/css-values';
|
|
9
|
-
import type { CSSValueType } from '@acusti/css-values';
|
|
10
10
|
import InputText from '@acusti/input-text';
|
|
11
11
|
import clsx from 'clsx';
|
|
12
12
|
import * as React from 'react';
|
|
@@ -24,7 +24,7 @@ export type Props = {
|
|
|
24
24
|
* Function that receives a value and converts it to its numerical equivalent
|
|
25
25
|
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
26
26
|
*/
|
|
27
|
-
getValueAsNumber?: (value:
|
|
27
|
+
getValueAsNumber?: (value: number | string) => number;
|
|
28
28
|
icon?: React.ReactNode;
|
|
29
29
|
label?: string;
|
|
30
30
|
max?: number;
|
|
@@ -47,7 +47,7 @@ export type Props = {
|
|
|
47
47
|
title?: string;
|
|
48
48
|
unit?: string;
|
|
49
49
|
/** Regex or validator function to validate non-numeric values */
|
|
50
|
-
validator?:
|
|
50
|
+
validator?: ((value: string) => boolean) | RegExp;
|
|
51
51
|
value?: string;
|
|
52
52
|
};
|
|
53
53
|
|
|
@@ -89,7 +89,7 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
89
89
|
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
90
90
|
// props.value should be a string; if it’s a number, convert it here
|
|
91
91
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
92
|
-
value = `${value}`;
|
|
92
|
+
value = `${value}`;
|
|
93
93
|
}
|
|
94
94
|
const submittedValueRef = useRef<string>(value ?? '');
|
|
95
95
|
|
|
@@ -200,7 +200,7 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
200
200
|
multiplier = 1,
|
|
201
201
|
signum = 1,
|
|
202
202
|
}: {
|
|
203
|
-
currentValue:
|
|
203
|
+
currentValue: number | string;
|
|
204
204
|
multiplier?: number;
|
|
205
205
|
signum?: number;
|
|
206
206
|
}) => {
|
|
@@ -246,15 +246,8 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
246
246
|
let nextValue = '';
|
|
247
247
|
|
|
248
248
|
switch (event.key) {
|
|
249
|
-
case 'Escape':
|
|
250
|
-
case 'Enter':
|
|
251
|
-
if (event.key === 'Escape') {
|
|
252
|
-
input.value = submittedValueRef.current;
|
|
253
|
-
}
|
|
254
|
-
input.blur();
|
|
255
|
-
return;
|
|
256
|
-
case 'ArrowUp':
|
|
257
249
|
case 'ArrowDown':
|
|
250
|
+
case 'ArrowUp':
|
|
258
251
|
nextValue = getNextValue({
|
|
259
252
|
currentValue,
|
|
260
253
|
multiplier: event.shiftKey ? 10 : 1,
|
|
@@ -268,6 +261,13 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
268
261
|
|
|
269
262
|
input.value = nextValue;
|
|
270
263
|
return;
|
|
264
|
+
case 'Enter':
|
|
265
|
+
case 'Escape':
|
|
266
|
+
if (event.key === 'Escape') {
|
|
267
|
+
input.value = submittedValueRef.current;
|
|
268
|
+
}
|
|
269
|
+
input.blur();
|
|
270
|
+
return;
|
|
271
271
|
default:
|
|
272
272
|
// No default key handling
|
|
273
273
|
}
|
|
@@ -287,8 +287,14 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
287
287
|
);
|
|
288
288
|
|
|
289
289
|
return (
|
|
290
|
-
<label
|
|
291
|
-
{
|
|
290
|
+
<label
|
|
291
|
+
aria-label={label ? undefined : title}
|
|
292
|
+
className={clsx(ROOT_CLASS_NAME, className, { disabled })}
|
|
293
|
+
title={title}
|
|
294
|
+
>
|
|
295
|
+
{icon == null ? null : (
|
|
296
|
+
<div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>
|
|
297
|
+
)}
|
|
292
298
|
{label ? (
|
|
293
299
|
<div className={`${ROOT_CLASS_NAME}-label`}>
|
|
294
300
|
<p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
|