@acusti/css-value-input 0.24.0 → 0.25.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 +14 -15
- package/dist/CSSValueInput.js.map +1 -1
- package/package.json +2 -2
- package/src/CSSValueInput.tsx +21 -18
package/dist/CSSValueInput.js
CHANGED
|
@@ -8,23 +8,21 @@ 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);
|
|
@@ -38,11 +36,11 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
38
36
|
isValid = validator(currentValue);
|
|
39
37
|
}
|
|
40
38
|
if (isValid) {
|
|
41
|
-
handleSubmitValue();
|
|
39
|
+
handleSubmitValue(event);
|
|
42
40
|
}
|
|
43
41
|
else {
|
|
44
42
|
// If current value isn’t valid, revert to last submitted value
|
|
45
|
-
|
|
43
|
+
input.value = submittedValueRef.current;
|
|
46
44
|
}
|
|
47
45
|
return;
|
|
48
46
|
}
|
|
@@ -65,16 +63,16 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
65
63
|
defaultUnit: unit,
|
|
66
64
|
value: currentValue,
|
|
67
65
|
});
|
|
68
|
-
|
|
66
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
69
67
|
}
|
|
70
68
|
else {
|
|
71
|
-
|
|
69
|
+
input.value = getCSSValueWithUnit({
|
|
72
70
|
cssValueType,
|
|
73
71
|
defaultUnit: unit,
|
|
74
72
|
value: currentValue,
|
|
75
73
|
});
|
|
76
74
|
}
|
|
77
|
-
handleSubmitValue();
|
|
75
|
+
handleSubmitValue(event);
|
|
78
76
|
}, [
|
|
79
77
|
allowEmpty,
|
|
80
78
|
cssValueType,
|
|
@@ -115,9 +113,10 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
115
113
|
return `${nextValue}${nextUnit}`;
|
|
116
114
|
}, [cssValueType, getValueAsNumber, max, min, step, unit]);
|
|
117
115
|
const handleKeyDown = useCallback((event) => {
|
|
116
|
+
const input = event.currentTarget;
|
|
117
|
+
inputRef.current = input;
|
|
118
118
|
if (onKeyDown)
|
|
119
119
|
onKeyDown(event);
|
|
120
|
-
const input = event.currentTarget;
|
|
121
120
|
const currentValue = input.value || placeholder || `0${unit}`;
|
|
122
121
|
let nextValue = '';
|
|
123
122
|
switch (event.key) {
|
|
@@ -150,7 +149,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
150
149
|
onKeyUp(event);
|
|
151
150
|
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
152
151
|
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
153
|
-
handleSubmitValue();
|
|
152
|
+
handleSubmitValue(event);
|
|
154
153
|
}
|
|
155
154
|
}, [handleSubmitValue, onKeyUp]);
|
|
156
155
|
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": "0.25.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",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@acusti/css-values": "^0.19.0",
|
|
44
|
-
"@acusti/input-text": "^1.
|
|
44
|
+
"@acusti/input-text": "^1.2.0",
|
|
45
45
|
"clsx": "^1.2.1"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -80,25 +80,27 @@ 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
|
|
|
@@ -114,10 +116,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
if (isValid) {
|
|
117
|
-
handleSubmitValue();
|
|
119
|
+
handleSubmitValue(event);
|
|
118
120
|
} else {
|
|
119
121
|
// If current value isn’t valid, revert to last submitted value
|
|
120
|
-
|
|
122
|
+
input.value = submittedValueRef.current;
|
|
121
123
|
}
|
|
122
124
|
|
|
123
125
|
return;
|
|
@@ -142,16 +144,16 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
142
144
|
defaultUnit: unit,
|
|
143
145
|
value: currentValue,
|
|
144
146
|
});
|
|
145
|
-
|
|
147
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
146
148
|
} else {
|
|
147
|
-
|
|
149
|
+
input.value = getCSSValueWithUnit({
|
|
148
150
|
cssValueType,
|
|
149
151
|
defaultUnit: unit,
|
|
150
152
|
value: currentValue,
|
|
151
153
|
});
|
|
152
154
|
}
|
|
153
155
|
|
|
154
|
-
handleSubmitValue();
|
|
156
|
+
handleSubmitValue(event);
|
|
155
157
|
},
|
|
156
158
|
[
|
|
157
159
|
allowEmpty,
|
|
@@ -213,9 +215,10 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
213
215
|
|
|
214
216
|
const handleKeyDown = useCallback(
|
|
215
217
|
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
218
|
+
const input = event.currentTarget;
|
|
219
|
+
inputRef.current = input;
|
|
216
220
|
if (onKeyDown) onKeyDown(event);
|
|
217
221
|
|
|
218
|
-
const input = event.currentTarget;
|
|
219
222
|
const currentValue = input.value || placeholder || `0${unit}`;
|
|
220
223
|
let nextValue = '';
|
|
221
224
|
|
|
@@ -254,7 +257,7 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
254
257
|
if (onKeyUp) onKeyUp(event);
|
|
255
258
|
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
256
259
|
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
257
|
-
handleSubmitValue();
|
|
260
|
+
handleSubmitValue(event);
|
|
258
261
|
}
|
|
259
262
|
},
|
|
260
263
|
[handleSubmitValue, onKeyUp],
|