@acusti/css-value-input 0.14.2 → 0.17.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/README.md +1 -1
- package/dist/CSSValueInput.js +2 -4
- package/dist/CSSValueInput.js.map +1 -1
- package/package.json +5 -4
- package/src/CSSValueInput.tsx +294 -0
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @acusti/css-value-input
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@acusti/css-value-input)
|
|
4
|
-
[](https://libraries.io/npm/@acusti%2Fcss-value-input/sourcerank)
|
|
5
5
|
[](https://bundlephobia.com/package/@acusti/css-value-input)
|
|
6
6
|
[](https://www.npmjs.com/package/@acusti/css-value-input)
|
|
7
7
|
|
package/dist/CSSValueInput.js
CHANGED
|
@@ -12,9 +12,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
12
12
|
if (!inputRef.current)
|
|
13
13
|
return;
|
|
14
14
|
const currentValue = inputRef.current.value;
|
|
15
|
-
//
|
|
16
|
-
if (currentValue === submittedValueRef.current)
|
|
17
|
-
return;
|
|
15
|
+
// Store last submittedValue (used to reset value on invalid input)
|
|
18
16
|
submittedValueRef.current = currentValue;
|
|
19
17
|
onSubmitValue(currentValue);
|
|
20
18
|
}, [onSubmitValue]);
|
|
@@ -24,7 +22,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
24
22
|
if (!inputRef.current)
|
|
25
23
|
return;
|
|
26
24
|
const currentValue = inputRef.current.value.trim();
|
|
27
|
-
// If allowEmpty and value is empty, skip all
|
|
25
|
+
// If allowEmpty and value is empty, skip all validation + normalization
|
|
28
26
|
if (allowEmpty && !currentValue) {
|
|
29
27
|
handleSubmitValue();
|
|
30
28
|
return;
|
|
@@ -1 +1 @@
|
|
|
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,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgC/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,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC;QAC5C,
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/css-value-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/CSSValueInput.js",
|
|
7
7
|
"main": "./dist/CSSValueInput.js",
|
|
8
8
|
"types": "./dist/CSSValueInput.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"src"
|
|
11
12
|
],
|
|
12
13
|
"repository": {
|
|
13
14
|
"type": "git",
|
|
@@ -25,8 +26,8 @@
|
|
|
25
26
|
"typescript": "^4.4.3"
|
|
26
27
|
},
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@acusti/css-values": "^0.
|
|
29
|
-
"@acusti/input-text": "^0.
|
|
29
|
+
"@acusti/css-values": "^0.17.0",
|
|
30
|
+
"@acusti/input-text": "^0.8.0"
|
|
30
31
|
},
|
|
31
32
|
"peerDependencies": {
|
|
32
33
|
"classnames": "^2",
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CSSValueType,
|
|
3
|
+
DEFAULT_CSS_VALUE_TYPE,
|
|
4
|
+
DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
|
|
5
|
+
getCSSValueAsNumber,
|
|
6
|
+
getCSSValueWithUnit,
|
|
7
|
+
getUnitFromCSSValue,
|
|
8
|
+
roundToPrecision,
|
|
9
|
+
} from '@acusti/css-values';
|
|
10
|
+
import InputText from '@acusti/input-text';
|
|
11
|
+
import classnames from 'classnames';
|
|
12
|
+
import * as React from 'react';
|
|
13
|
+
|
|
14
|
+
export type Props = {
|
|
15
|
+
/** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
|
|
16
|
+
allowEmpty?: boolean;
|
|
17
|
+
className?: string;
|
|
18
|
+
cssValueType?: CSSValueType;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
getValueAsNumber?: (value: string | number) => number;
|
|
21
|
+
icon?: React.ReactNode;
|
|
22
|
+
label?: string;
|
|
23
|
+
max?: number;
|
|
24
|
+
min?: number;
|
|
25
|
+
name?: string;
|
|
26
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
27
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
|
|
28
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
29
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
30
|
+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
31
|
+
onSubmitValue: (value: string) => unknown;
|
|
32
|
+
placeholder?: string;
|
|
33
|
+
step?: number;
|
|
34
|
+
tabIndex?: number;
|
|
35
|
+
title?: string;
|
|
36
|
+
unit?: string;
|
|
37
|
+
/** Regex or validator function to validate non-numeric values */
|
|
38
|
+
validator?: RegExp | ((value: string) => boolean);
|
|
39
|
+
value?: string;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
type InputRef = HTMLInputElement | null;
|
|
43
|
+
|
|
44
|
+
const { useCallback, useImperativeHandle, useRef } = React;
|
|
45
|
+
|
|
46
|
+
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
47
|
+
|
|
48
|
+
const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
|
|
49
|
+
(
|
|
50
|
+
{
|
|
51
|
+
allowEmpty = true,
|
|
52
|
+
className,
|
|
53
|
+
cssValueType = DEFAULT_CSS_VALUE_TYPE,
|
|
54
|
+
disabled,
|
|
55
|
+
getValueAsNumber = getCSSValueAsNumber,
|
|
56
|
+
icon,
|
|
57
|
+
label,
|
|
58
|
+
max,
|
|
59
|
+
min,
|
|
60
|
+
name,
|
|
61
|
+
onBlur,
|
|
62
|
+
onChange,
|
|
63
|
+
onFocus,
|
|
64
|
+
onKeyDown,
|
|
65
|
+
onKeyUp,
|
|
66
|
+
onSubmitValue,
|
|
67
|
+
placeholder,
|
|
68
|
+
step = 1,
|
|
69
|
+
tabIndex,
|
|
70
|
+
title,
|
|
71
|
+
unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
|
|
72
|
+
validator,
|
|
73
|
+
value,
|
|
74
|
+
},
|
|
75
|
+
ref,
|
|
76
|
+
) => {
|
|
77
|
+
const inputRef = useRef<InputRef>(null);
|
|
78
|
+
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
79
|
+
|
|
80
|
+
const submittedValueRef = useRef<string>(value || '');
|
|
81
|
+
|
|
82
|
+
const handleSubmitValue = useCallback(() => {
|
|
83
|
+
if (!inputRef.current) return;
|
|
84
|
+
|
|
85
|
+
const currentValue = inputRef.current.value;
|
|
86
|
+
// Store last submittedValue (used to reset value on invalid input)
|
|
87
|
+
submittedValueRef.current = currentValue;
|
|
88
|
+
onSubmitValue(currentValue);
|
|
89
|
+
}, [onSubmitValue]);
|
|
90
|
+
|
|
91
|
+
const handleBlur = useCallback(
|
|
92
|
+
(event: React.FocusEvent<HTMLInputElement>) => {
|
|
93
|
+
if (onBlur) onBlur(event);
|
|
94
|
+
if (!inputRef.current) return;
|
|
95
|
+
|
|
96
|
+
const currentValue = inputRef.current.value.trim();
|
|
97
|
+
|
|
98
|
+
// If allowEmpty and value is empty, skip all validation + normalization
|
|
99
|
+
if (allowEmpty && !currentValue) {
|
|
100
|
+
handleSubmitValue();
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
105
|
+
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
106
|
+
|
|
107
|
+
if (!isCurrentValueFinite) {
|
|
108
|
+
let isValid = false;
|
|
109
|
+
if (validator instanceof RegExp) {
|
|
110
|
+
isValid = validator.test(currentValue);
|
|
111
|
+
} else if (validator) {
|
|
112
|
+
isValid = validator(currentValue);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (isValid) {
|
|
116
|
+
handleSubmitValue();
|
|
117
|
+
} else {
|
|
118
|
+
// If current value isn’t valid, revert to last submitted value
|
|
119
|
+
inputRef.current.value = submittedValueRef.current;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Normalize value by applying min/max and integer constraints
|
|
126
|
+
let normalizedValueAsNumber = currentValueAsNumber;
|
|
127
|
+
|
|
128
|
+
if (isCurrentValueFinite) {
|
|
129
|
+
if (min != null && currentValueAsNumber < min) {
|
|
130
|
+
normalizedValueAsNumber = min;
|
|
131
|
+
} else if (max != null && currentValueAsNumber > max) {
|
|
132
|
+
normalizedValueAsNumber = max;
|
|
133
|
+
} else if (cssValueType === 'integer') {
|
|
134
|
+
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
139
|
+
const currentUnit = getUnitFromCSSValue({
|
|
140
|
+
cssValueType,
|
|
141
|
+
defaultUnit: unit,
|
|
142
|
+
value: currentValue,
|
|
143
|
+
});
|
|
144
|
+
inputRef.current.value = normalizedValueAsNumber + currentUnit;
|
|
145
|
+
} else {
|
|
146
|
+
inputRef.current.value = getCSSValueWithUnit({
|
|
147
|
+
cssValueType,
|
|
148
|
+
defaultUnit: unit,
|
|
149
|
+
value: currentValue,
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
handleSubmitValue();
|
|
154
|
+
},
|
|
155
|
+
[
|
|
156
|
+
allowEmpty,
|
|
157
|
+
cssValueType,
|
|
158
|
+
getValueAsNumber,
|
|
159
|
+
handleSubmitValue,
|
|
160
|
+
max,
|
|
161
|
+
min,
|
|
162
|
+
onBlur,
|
|
163
|
+
unit,
|
|
164
|
+
validator,
|
|
165
|
+
],
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
const getNextValue = useCallback(
|
|
169
|
+
({
|
|
170
|
+
currentValue,
|
|
171
|
+
multiplier = 1,
|
|
172
|
+
signum = 1,
|
|
173
|
+
}: {
|
|
174
|
+
currentValue: string | number;
|
|
175
|
+
multiplier?: number;
|
|
176
|
+
signum?: number;
|
|
177
|
+
}) => {
|
|
178
|
+
const modifier = multiplier * step * signum;
|
|
179
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
180
|
+
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
181
|
+
if (
|
|
182
|
+
typeof currentValue === 'string' &&
|
|
183
|
+
Number.isNaN(currentValueAsNumber)
|
|
184
|
+
) {
|
|
185
|
+
return currentValue;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
let nextValue = currentValueAsNumber + modifier;
|
|
189
|
+
if (cssValueType === 'integer') {
|
|
190
|
+
nextValue = Math.floor(nextValue);
|
|
191
|
+
} else {
|
|
192
|
+
nextValue = roundToPrecision(nextValue, 5);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
if (typeof max === 'number' && Number.isFinite(max)) {
|
|
196
|
+
nextValue = Math.min(max, nextValue);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
200
|
+
nextValue = Math.max(min, nextValue);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
const nextUnit = getUnitFromCSSValue({
|
|
204
|
+
cssValueType,
|
|
205
|
+
defaultUnit: unit,
|
|
206
|
+
value: currentValue,
|
|
207
|
+
});
|
|
208
|
+
return `${nextValue}${nextUnit}`;
|
|
209
|
+
},
|
|
210
|
+
[cssValueType, getValueAsNumber, max, min, step, unit],
|
|
211
|
+
);
|
|
212
|
+
|
|
213
|
+
const handleKeyDown = useCallback(
|
|
214
|
+
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
215
|
+
if (onKeyDown) onKeyDown(event);
|
|
216
|
+
|
|
217
|
+
const input = event.currentTarget;
|
|
218
|
+
const currentValue = input.value || placeholder || `0${unit}`;
|
|
219
|
+
let nextValue = '';
|
|
220
|
+
|
|
221
|
+
switch (event.key) {
|
|
222
|
+
case 'Escape':
|
|
223
|
+
case 'Enter':
|
|
224
|
+
if (event.key === 'Escape') {
|
|
225
|
+
input.value = submittedValueRef.current;
|
|
226
|
+
}
|
|
227
|
+
input.blur();
|
|
228
|
+
return;
|
|
229
|
+
case 'ArrowUp':
|
|
230
|
+
case 'ArrowDown':
|
|
231
|
+
nextValue = getNextValue({
|
|
232
|
+
currentValue,
|
|
233
|
+
multiplier: event.shiftKey ? 10 : 1,
|
|
234
|
+
signum: event.key === 'ArrowUp' ? 1 : -1,
|
|
235
|
+
});
|
|
236
|
+
|
|
237
|
+
if (nextValue === currentValue) return;
|
|
238
|
+
|
|
239
|
+
event.stopPropagation();
|
|
240
|
+
event.preventDefault();
|
|
241
|
+
|
|
242
|
+
input.value = nextValue;
|
|
243
|
+
return;
|
|
244
|
+
default:
|
|
245
|
+
// No default key handling
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
[getNextValue, onKeyDown, placeholder, unit],
|
|
249
|
+
);
|
|
250
|
+
|
|
251
|
+
const handleKeyUp = useCallback(
|
|
252
|
+
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
253
|
+
if (onKeyUp) onKeyUp(event);
|
|
254
|
+
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
255
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
256
|
+
handleSubmitValue();
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
[handleSubmitValue, onKeyUp],
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
return (
|
|
263
|
+
<label
|
|
264
|
+
className={classnames(ROOT_CLASS_NAME, className, { disabled })}
|
|
265
|
+
title={title}
|
|
266
|
+
>
|
|
267
|
+
{icon && <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>}
|
|
268
|
+
{label && (
|
|
269
|
+
<div className={`${ROOT_CLASS_NAME}-label`}>
|
|
270
|
+
<p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
|
|
271
|
+
</div>
|
|
272
|
+
)}
|
|
273
|
+
<div className={`${ROOT_CLASS_NAME}-value`}>
|
|
274
|
+
<InputText
|
|
275
|
+
disabled={disabled}
|
|
276
|
+
initialValue={value}
|
|
277
|
+
name={name}
|
|
278
|
+
onBlur={handleBlur}
|
|
279
|
+
onChange={onChange}
|
|
280
|
+
onFocus={onFocus}
|
|
281
|
+
onKeyDown={handleKeyDown}
|
|
282
|
+
onKeyUp={handleKeyUp}
|
|
283
|
+
placeholder={placeholder}
|
|
284
|
+
ref={inputRef}
|
|
285
|
+
selectTextOnFocus
|
|
286
|
+
tabIndex={tabIndex}
|
|
287
|
+
/>
|
|
288
|
+
</div>
|
|
289
|
+
</label>
|
|
290
|
+
);
|
|
291
|
+
},
|
|
292
|
+
);
|
|
293
|
+
|
|
294
|
+
export default CSSValueInput;
|