@acusti/css-value-input 0.24.0 → 1.0.0-rc.0
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/CSSValueInput.js +21 -17
- package/dist/CSSValueInput.js.map +1 -1
- package/package.json +10 -4
- package/src/CSSValueInput.test.tsx +82 -0
- package/src/CSSValueInput.tsx +28 -20
package/dist/CSSValueInput.js
CHANGED
|
@@ -8,27 +8,30 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
8
8
|
const inputRef = useRef(null);
|
|
9
9
|
useImperativeHandle(ref, () => inputRef.current);
|
|
10
10
|
const submittedValueRef = useRef(value || '');
|
|
11
|
-
const handleSubmitValue = useCallback(() => {
|
|
12
|
-
|
|
13
|
-
return;
|
|
14
|
-
const currentValue = inputRef.current.value;
|
|
11
|
+
const handleSubmitValue = useCallback((event) => {
|
|
12
|
+
const currentValue = event.currentTarget.value;
|
|
15
13
|
// Store last submittedValue (used to reset value on invalid input)
|
|
16
14
|
submittedValueRef.current = currentValue;
|
|
17
15
|
onSubmitValue(currentValue);
|
|
18
16
|
}, [onSubmitValue]);
|
|
19
17
|
const handleBlur = useCallback((event) => {
|
|
18
|
+
const input = event.currentTarget;
|
|
19
|
+
inputRef.current = input;
|
|
20
20
|
if (onBlur)
|
|
21
21
|
onBlur(event);
|
|
22
|
-
|
|
23
|
-
return;
|
|
24
|
-
const currentValue = inputRef.current.value.trim();
|
|
22
|
+
const currentValue = input.value.trim();
|
|
25
23
|
// If allowEmpty and value is empty, skip all validation + normalization
|
|
26
24
|
if (allowEmpty && !currentValue) {
|
|
27
|
-
handleSubmitValue();
|
|
25
|
+
handleSubmitValue(event);
|
|
28
26
|
return;
|
|
29
27
|
}
|
|
30
28
|
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
31
29
|
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
30
|
+
const defaultUnit = getUnitFromCSSValue({
|
|
31
|
+
cssValueType,
|
|
32
|
+
defaultUnit: unit,
|
|
33
|
+
value: submittedValueRef.current,
|
|
34
|
+
});
|
|
32
35
|
if (!isCurrentValueFinite) {
|
|
33
36
|
let isValid = false;
|
|
34
37
|
if (validator instanceof RegExp) {
|
|
@@ -38,11 +41,11 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
38
41
|
isValid = validator(currentValue);
|
|
39
42
|
}
|
|
40
43
|
if (isValid) {
|
|
41
|
-
handleSubmitValue();
|
|
44
|
+
handleSubmitValue(event);
|
|
42
45
|
}
|
|
43
46
|
else {
|
|
44
47
|
// If current value isn’t valid, revert to last submitted value
|
|
45
|
-
|
|
48
|
+
input.value = submittedValueRef.current;
|
|
46
49
|
}
|
|
47
50
|
return;
|
|
48
51
|
}
|
|
@@ -62,19 +65,19 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
62
65
|
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
63
66
|
const currentUnit = getUnitFromCSSValue({
|
|
64
67
|
cssValueType,
|
|
65
|
-
defaultUnit
|
|
68
|
+
defaultUnit,
|
|
66
69
|
value: currentValue,
|
|
67
70
|
});
|
|
68
|
-
|
|
71
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
69
72
|
}
|
|
70
73
|
else {
|
|
71
|
-
|
|
74
|
+
input.value = getCSSValueWithUnit({
|
|
72
75
|
cssValueType,
|
|
73
|
-
defaultUnit
|
|
76
|
+
defaultUnit,
|
|
74
77
|
value: currentValue,
|
|
75
78
|
});
|
|
76
79
|
}
|
|
77
|
-
handleSubmitValue();
|
|
80
|
+
handleSubmitValue(event);
|
|
78
81
|
}, [
|
|
79
82
|
allowEmpty,
|
|
80
83
|
cssValueType,
|
|
@@ -115,9 +118,10 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
115
118
|
return `${nextValue}${nextUnit}`;
|
|
116
119
|
}, [cssValueType, getValueAsNumber, max, min, step, unit]);
|
|
117
120
|
const handleKeyDown = useCallback((event) => {
|
|
121
|
+
const input = event.currentTarget;
|
|
122
|
+
inputRef.current = input;
|
|
118
123
|
if (onKeyDown)
|
|
119
124
|
onKeyDown(event);
|
|
120
|
-
const input = event.currentTarget;
|
|
121
125
|
const currentValue = input.value || placeholder || `0${unit}`;
|
|
122
126
|
let nextValue = '';
|
|
123
127
|
switch (event.key) {
|
|
@@ -150,7 +154,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
150
154
|
onKeyUp(event);
|
|
151
155
|
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
152
156
|
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
153
|
-
handleSubmitValue();
|
|
157
|
+
handleSubmitValue(event);
|
|
154
158
|
}
|
|
155
159
|
}, [handleSubmitValue, onKeyUp]);
|
|
156
160
|
return (React.createElement("label", { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,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;AAkC/B,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAE3D,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,MAAM,aAAa,GAAoB,KAAK,CAAC,UAAU,CACnD,CACI,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,GACR,EACD,GAAG,EACL,EAAE;IACA,MAAM,QAAQ,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACxC,mBAAmB,CAAqB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAErE,MAAM,iBAAiB,GAAG,MAAM,CAAS,KAAK,IAAI,EAAE,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.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": "0.
|
|
3
|
+
"version": "1.0.0-rc.0",
|
|
4
4
|
"description": "React component that renders a text input that can take and update a CSS value of a particular type with a default unit",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -36,12 +36,18 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
|
|
38
38
|
"devDependencies": {
|
|
39
|
+
"@testing-library/dom": "^9.3.1",
|
|
40
|
+
"@testing-library/react": "^14.0.0",
|
|
41
|
+
"@testing-library/user-event": "^14.4.3",
|
|
39
42
|
"@types/react": "^18.0.25",
|
|
40
|
-
"
|
|
43
|
+
"jsdom": "^22.1.0",
|
|
44
|
+
"react": "^18",
|
|
45
|
+
"react-dom": "^18",
|
|
46
|
+
"typescript": "^5.1.6"
|
|
41
47
|
},
|
|
42
48
|
"dependencies": {
|
|
43
|
-
"@acusti/css-values": "^0.
|
|
44
|
-
"@acusti/input-text": "^1.
|
|
49
|
+
"@acusti/css-values": "^1.0.0",
|
|
50
|
+
"@acusti/input-text": "^1.2.0",
|
|
45
51
|
"clsx": "^1.2.1"
|
|
46
52
|
},
|
|
47
53
|
"peerDependencies": {
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// @vitest-environment jsdom
|
|
2
|
+
import { cleanup, render } from '@testing-library/react';
|
|
3
|
+
import userEvent from '@testing-library/user-event';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
|
+
|
|
7
|
+
import CSSValueInput from './CSSValueInput.js';
|
|
8
|
+
|
|
9
|
+
const noop = () => {};
|
|
10
|
+
|
|
11
|
+
afterEach(cleanup);
|
|
12
|
+
|
|
13
|
+
describe('CSSValueInput.tsx', async () => {
|
|
14
|
+
it('renders a text input with the given props.value', async () => {
|
|
15
|
+
const { getByRole } = render(<CSSValueInput onSubmitValue={noop} value="24px" />);
|
|
16
|
+
expect(getByRole('textbox').value).toBe('24px');
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
20
|
+
const user = userEvent.setup();
|
|
21
|
+
const { getByRole } = render(<CSSValueInput onSubmitValue={noop} value="75%" />);
|
|
22
|
+
const input = getByRole('textbox');
|
|
23
|
+
expect(input.value).toBe('75%');
|
|
24
|
+
await user.type(input, '{ArrowUp}');
|
|
25
|
+
expect(input.value).toBe('76%');
|
|
26
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
27
|
+
expect(input.value).toBe('86%');
|
|
28
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
29
|
+
expect(input.value).toBe('96%');
|
|
30
|
+
await user.type(input, '{ArrowUp}');
|
|
31
|
+
expect(input.value).toBe('97%');
|
|
32
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
33
|
+
expect(input.value).toBe('87%');
|
|
34
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
35
|
+
expect(input.value).toBe('77%');
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
39
|
+
const user = userEvent.setup();
|
|
40
|
+
const { getByRole } = render(
|
|
41
|
+
<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />,
|
|
42
|
+
);
|
|
43
|
+
const input = getByRole('textbox');
|
|
44
|
+
expect(input.value).toBe('2rem');
|
|
45
|
+
await user.type(input, '{ArrowUp}');
|
|
46
|
+
expect(input.value).toBe('2.1rem');
|
|
47
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
48
|
+
expect(input.value).toBe('3.1rem');
|
|
49
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
50
|
+
expect(input.value).toBe('4.1rem');
|
|
51
|
+
await user.type(input, '{ArrowUp}');
|
|
52
|
+
expect(input.value).toBe('4.2rem');
|
|
53
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
54
|
+
expect(input.value).toBe('3.2rem');
|
|
55
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
56
|
+
expect(input.value).toBe('2.2rem');
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('uses props.unit as default unit when unit is missing', async () => {
|
|
60
|
+
const user = userEvent.setup();
|
|
61
|
+
const { getByRole } = render(
|
|
62
|
+
<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />,
|
|
63
|
+
);
|
|
64
|
+
const input = getByRole('textbox');
|
|
65
|
+
expect(input.value).toBe('');
|
|
66
|
+
await user.type(input, '14{Enter}');
|
|
67
|
+
expect(input.value).toBe('14px');
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
71
|
+
const user = userEvent.setup();
|
|
72
|
+
const { getByRole } = render(
|
|
73
|
+
<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />,
|
|
74
|
+
);
|
|
75
|
+
const input = getByRole('textbox');
|
|
76
|
+
expect(input.value).toBe('');
|
|
77
|
+
await user.type(input, '25vw{Enter}');
|
|
78
|
+
expect(input.value).toBe('25vw');
|
|
79
|
+
await user.type(input, '50{Enter}');
|
|
80
|
+
expect(input.value).toBe('50vw');
|
|
81
|
+
});
|
|
82
|
+
});
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -80,30 +80,37 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
80
80
|
|
|
81
81
|
const submittedValueRef = useRef<string>(value || '');
|
|
82
82
|
|
|
83
|
-
const handleSubmitValue = useCallback(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
83
|
+
const handleSubmitValue = useCallback(
|
|
84
|
+
(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
85
|
+
const currentValue = event.currentTarget.value;
|
|
86
|
+
// Store last submittedValue (used to reset value on invalid input)
|
|
87
|
+
submittedValueRef.current = currentValue;
|
|
88
|
+
onSubmitValue(currentValue);
|
|
89
|
+
},
|
|
90
|
+
[onSubmitValue],
|
|
91
|
+
);
|
|
91
92
|
|
|
92
93
|
const handleBlur = useCallback(
|
|
93
94
|
(event: React.FocusEvent<HTMLInputElement>) => {
|
|
95
|
+
const input = event.currentTarget;
|
|
96
|
+
inputRef.current = input;
|
|
94
97
|
if (onBlur) onBlur(event);
|
|
95
|
-
if (!inputRef.current) return;
|
|
96
98
|
|
|
97
|
-
const currentValue =
|
|
99
|
+
const currentValue = input.value.trim();
|
|
98
100
|
|
|
99
101
|
// If allowEmpty and value is empty, skip all validation + normalization
|
|
100
102
|
if (allowEmpty && !currentValue) {
|
|
101
|
-
handleSubmitValue();
|
|
103
|
+
handleSubmitValue(event);
|
|
102
104
|
return;
|
|
103
105
|
}
|
|
104
106
|
|
|
105
107
|
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
106
108
|
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
109
|
+
const defaultUnit = getUnitFromCSSValue({
|
|
110
|
+
cssValueType,
|
|
111
|
+
defaultUnit: unit,
|
|
112
|
+
value: submittedValueRef.current,
|
|
113
|
+
});
|
|
107
114
|
|
|
108
115
|
if (!isCurrentValueFinite) {
|
|
109
116
|
let isValid = false;
|
|
@@ -114,10 +121,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
114
121
|
}
|
|
115
122
|
|
|
116
123
|
if (isValid) {
|
|
117
|
-
handleSubmitValue();
|
|
124
|
+
handleSubmitValue(event);
|
|
118
125
|
} else {
|
|
119
126
|
// If current value isn’t valid, revert to last submitted value
|
|
120
|
-
|
|
127
|
+
input.value = submittedValueRef.current;
|
|
121
128
|
}
|
|
122
129
|
|
|
123
130
|
return;
|
|
@@ -139,19 +146,19 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
139
146
|
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
140
147
|
const currentUnit = getUnitFromCSSValue({
|
|
141
148
|
cssValueType,
|
|
142
|
-
defaultUnit
|
|
149
|
+
defaultUnit,
|
|
143
150
|
value: currentValue,
|
|
144
151
|
});
|
|
145
|
-
|
|
152
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
146
153
|
} else {
|
|
147
|
-
|
|
154
|
+
input.value = getCSSValueWithUnit({
|
|
148
155
|
cssValueType,
|
|
149
|
-
defaultUnit
|
|
156
|
+
defaultUnit,
|
|
150
157
|
value: currentValue,
|
|
151
158
|
});
|
|
152
159
|
}
|
|
153
160
|
|
|
154
|
-
handleSubmitValue();
|
|
161
|
+
handleSubmitValue(event);
|
|
155
162
|
},
|
|
156
163
|
[
|
|
157
164
|
allowEmpty,
|
|
@@ -213,9 +220,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
213
220
|
|
|
214
221
|
const handleKeyDown = useCallback(
|
|
215
222
|
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
223
|
+
const input = event.currentTarget;
|
|
224
|
+
inputRef.current = input;
|
|
216
225
|
if (onKeyDown) onKeyDown(event);
|
|
217
226
|
|
|
218
|
-
const input = event.currentTarget;
|
|
219
227
|
const currentValue = input.value || placeholder || `0${unit}`;
|
|
220
228
|
let nextValue = '';
|
|
221
229
|
|
|
@@ -254,7 +262,7 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
254
262
|
if (onKeyUp) onKeyUp(event);
|
|
255
263
|
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
256
264
|
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
257
|
-
handleSubmitValue();
|
|
265
|
+
handleSubmitValue(event);
|
|
258
266
|
}
|
|
259
267
|
},
|
|
260
268
|
[handleSubmitValue, onKeyUp],
|