@acusti/css-value-input 0.14.0 → 0.15.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 +228 -156
- package/dist/CSSValueInput.js.flow +31 -31
- package/package.json +5 -4
- package/src/CSSValueInput.tsx +294 -0
package/dist/CSSValueInput.js
CHANGED
|
@@ -1,166 +1,238 @@
|
|
|
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 classnames from 'classnames';
|
|
4
11
|
import * as React from 'react';
|
|
5
12
|
const { useCallback, useImperativeHandle, useRef } = React;
|
|
6
13
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
7
|
-
const CSSValueInput = React.forwardRef(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
14
|
+
const CSSValueInput = React.forwardRef(
|
|
15
|
+
(
|
|
16
|
+
{
|
|
17
|
+
allowEmpty = true,
|
|
18
|
+
className,
|
|
19
|
+
cssValueType = DEFAULT_CSS_VALUE_TYPE,
|
|
20
|
+
disabled,
|
|
21
|
+
getValueAsNumber = getCSSValueAsNumber,
|
|
22
|
+
icon,
|
|
23
|
+
label,
|
|
24
|
+
max,
|
|
25
|
+
min,
|
|
26
|
+
name,
|
|
27
|
+
onBlur,
|
|
28
|
+
onChange,
|
|
29
|
+
onFocus,
|
|
30
|
+
onKeyDown,
|
|
31
|
+
onKeyUp,
|
|
32
|
+
onSubmitValue,
|
|
33
|
+
placeholder,
|
|
34
|
+
step = 1,
|
|
35
|
+
tabIndex,
|
|
36
|
+
title,
|
|
37
|
+
unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
|
|
38
|
+
validator,
|
|
39
|
+
value,
|
|
40
|
+
},
|
|
41
|
+
ref,
|
|
42
|
+
) => {
|
|
43
|
+
const inputRef = useRef(null);
|
|
44
|
+
useImperativeHandle(ref, () => inputRef.current);
|
|
45
|
+
const submittedValueRef = useRef(value || '');
|
|
46
|
+
const handleSubmitValue = useCallback(() => {
|
|
47
|
+
if (!inputRef.current) return;
|
|
48
|
+
const currentValue = inputRef.current.value;
|
|
49
|
+
// If value hasn’t changed, do not trigger onSubmitValue
|
|
50
|
+
if (currentValue === submittedValueRef.current) return;
|
|
51
|
+
submittedValueRef.current = currentValue;
|
|
52
|
+
onSubmitValue(currentValue);
|
|
53
|
+
}, [onSubmitValue]);
|
|
54
|
+
const handleBlur = useCallback(
|
|
55
|
+
(event) => {
|
|
56
|
+
if (onBlur) onBlur(event);
|
|
57
|
+
if (!inputRef.current) return;
|
|
58
|
+
const currentValue = inputRef.current.value.trim();
|
|
59
|
+
// If allowEmpty and value is empty, skip all the validation and normalization
|
|
60
|
+
if (allowEmpty && !currentValue) {
|
|
61
|
+
handleSubmitValue();
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
65
|
+
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
66
|
+
if (!isCurrentValueFinite) {
|
|
67
|
+
let isValid = false;
|
|
68
|
+
if (validator instanceof RegExp) {
|
|
69
|
+
isValid = validator.test(currentValue);
|
|
70
|
+
} else if (validator) {
|
|
71
|
+
isValid = validator(currentValue);
|
|
72
|
+
}
|
|
73
|
+
if (isValid) {
|
|
74
|
+
handleSubmitValue();
|
|
75
|
+
} else {
|
|
76
|
+
// If current value isn’t valid, revert to last submitted value
|
|
77
|
+
inputRef.current.value = submittedValueRef.current;
|
|
78
|
+
}
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
// Normalize value by applying min/max and integer constraints
|
|
82
|
+
let normalizedValueAsNumber = currentValueAsNumber;
|
|
83
|
+
if (isCurrentValueFinite) {
|
|
84
|
+
if (min != null && currentValueAsNumber < min) {
|
|
85
|
+
normalizedValueAsNumber = min;
|
|
86
|
+
} else if (max != null && currentValueAsNumber > max) {
|
|
87
|
+
normalizedValueAsNumber = max;
|
|
88
|
+
} else if (cssValueType === 'integer') {
|
|
89
|
+
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
93
|
+
const currentUnit = getUnitFromCSSValue({
|
|
94
|
+
cssValueType,
|
|
95
|
+
defaultUnit: unit,
|
|
96
|
+
value: currentValue,
|
|
97
|
+
});
|
|
98
|
+
inputRef.current.value = normalizedValueAsNumber + currentUnit;
|
|
99
|
+
} else {
|
|
100
|
+
inputRef.current.value = getCSSValueWithUnit({
|
|
101
|
+
cssValueType,
|
|
102
|
+
defaultUnit: unit,
|
|
103
|
+
value: currentValue,
|
|
104
|
+
});
|
|
105
|
+
}
|
|
43
106
|
handleSubmitValue();
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
inputRef.current.value = submittedValueRef.current;
|
|
48
|
-
}
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
// Normalize value by applying min/max and integer constraints
|
|
52
|
-
let normalizedValueAsNumber = currentValueAsNumber;
|
|
53
|
-
if (isCurrentValueFinite) {
|
|
54
|
-
if (min != null && currentValueAsNumber < min) {
|
|
55
|
-
normalizedValueAsNumber = min;
|
|
56
|
-
}
|
|
57
|
-
else if (max != null && currentValueAsNumber > max) {
|
|
58
|
-
normalizedValueAsNumber = max;
|
|
59
|
-
}
|
|
60
|
-
else if (cssValueType === 'integer') {
|
|
61
|
-
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
65
|
-
const currentUnit = getUnitFromCSSValue({
|
|
66
|
-
cssValueType,
|
|
67
|
-
defaultUnit: unit,
|
|
68
|
-
value: currentValue,
|
|
69
|
-
});
|
|
70
|
-
inputRef.current.value = normalizedValueAsNumber + currentUnit;
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
inputRef.current.value = getCSSValueWithUnit({
|
|
107
|
+
},
|
|
108
|
+
[
|
|
109
|
+
allowEmpty,
|
|
74
110
|
cssValueType,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
95
|
-
if (typeof currentValue === 'string' &&
|
|
96
|
-
Number.isNaN(currentValueAsNumber)) {
|
|
97
|
-
return currentValue;
|
|
98
|
-
}
|
|
99
|
-
let nextValue = currentValueAsNumber + modifier;
|
|
100
|
-
if (cssValueType === 'integer') {
|
|
101
|
-
nextValue = Math.floor(nextValue);
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
nextValue = roundToPrecision(nextValue, 5);
|
|
105
|
-
}
|
|
106
|
-
if (typeof max === 'number' && Number.isFinite(max)) {
|
|
107
|
-
nextValue = Math.min(max, nextValue);
|
|
108
|
-
}
|
|
109
|
-
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
110
|
-
nextValue = Math.max(min, nextValue);
|
|
111
|
-
}
|
|
112
|
-
const nextUnit = getUnitFromCSSValue({
|
|
113
|
-
cssValueType,
|
|
114
|
-
defaultUnit: unit,
|
|
115
|
-
value: currentValue,
|
|
116
|
-
});
|
|
117
|
-
return `${nextValue}${nextUnit}`;
|
|
118
|
-
}, [cssValueType, getValueAsNumber, max, min, step, unit]);
|
|
119
|
-
const handleKeyDown = useCallback((event) => {
|
|
120
|
-
if (onKeyDown)
|
|
121
|
-
onKeyDown(event);
|
|
122
|
-
const input = event.currentTarget;
|
|
123
|
-
const currentValue = input.value || placeholder || `0${unit}`;
|
|
124
|
-
let nextValue = '';
|
|
125
|
-
switch (event.key) {
|
|
126
|
-
case 'Escape':
|
|
127
|
-
case 'Enter':
|
|
128
|
-
if (event.key === 'Escape') {
|
|
129
|
-
input.value = submittedValueRef.current;
|
|
111
|
+
getValueAsNumber,
|
|
112
|
+
handleSubmitValue,
|
|
113
|
+
max,
|
|
114
|
+
min,
|
|
115
|
+
onBlur,
|
|
116
|
+
unit,
|
|
117
|
+
validator,
|
|
118
|
+
],
|
|
119
|
+
);
|
|
120
|
+
const getNextValue = useCallback(
|
|
121
|
+
({ currentValue, multiplier = 1, signum = 1 }) => {
|
|
122
|
+
const modifier = multiplier * step * signum;
|
|
123
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
124
|
+
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
125
|
+
if (
|
|
126
|
+
typeof currentValue === 'string' &&
|
|
127
|
+
Number.isNaN(currentValueAsNumber)
|
|
128
|
+
) {
|
|
129
|
+
return currentValue;
|
|
130
130
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
131
|
+
let nextValue = currentValueAsNumber + modifier;
|
|
132
|
+
if (cssValueType === 'integer') {
|
|
133
|
+
nextValue = Math.floor(nextValue);
|
|
134
|
+
} else {
|
|
135
|
+
nextValue = roundToPrecision(nextValue, 5);
|
|
136
|
+
}
|
|
137
|
+
if (typeof max === 'number' && Number.isFinite(max)) {
|
|
138
|
+
nextValue = Math.min(max, nextValue);
|
|
139
|
+
}
|
|
140
|
+
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
141
|
+
nextValue = Math.max(min, nextValue);
|
|
142
|
+
}
|
|
143
|
+
const nextUnit = getUnitFromCSSValue({
|
|
144
|
+
cssValueType,
|
|
145
|
+
defaultUnit: unit,
|
|
146
|
+
value: currentValue,
|
|
139
147
|
});
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
});
|
|
148
|
+
return `${nextValue}${nextUnit}`;
|
|
149
|
+
},
|
|
150
|
+
[cssValueType, getValueAsNumber, max, min, step, unit],
|
|
151
|
+
);
|
|
152
|
+
const handleKeyDown = useCallback(
|
|
153
|
+
(event) => {
|
|
154
|
+
if (onKeyDown) onKeyDown(event);
|
|
155
|
+
const input = event.currentTarget;
|
|
156
|
+
const currentValue = input.value || placeholder || `0${unit}`;
|
|
157
|
+
let nextValue = '';
|
|
158
|
+
switch (event.key) {
|
|
159
|
+
case 'Escape':
|
|
160
|
+
case 'Enter':
|
|
161
|
+
if (event.key === 'Escape') {
|
|
162
|
+
input.value = submittedValueRef.current;
|
|
163
|
+
}
|
|
164
|
+
input.blur();
|
|
165
|
+
return;
|
|
166
|
+
case 'ArrowUp':
|
|
167
|
+
case 'ArrowDown':
|
|
168
|
+
nextValue = getNextValue({
|
|
169
|
+
currentValue,
|
|
170
|
+
multiplier: event.shiftKey ? 10 : 1,
|
|
171
|
+
signum: event.key === 'ArrowUp' ? 1 : -1,
|
|
172
|
+
});
|
|
173
|
+
if (nextValue === currentValue) return;
|
|
174
|
+
event.stopPropagation();
|
|
175
|
+
event.preventDefault();
|
|
176
|
+
input.value = nextValue;
|
|
177
|
+
return;
|
|
178
|
+
default:
|
|
179
|
+
// No default key handling
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
[getNextValue, onKeyDown, placeholder, unit],
|
|
183
|
+
);
|
|
184
|
+
const handleKeyUp = useCallback(
|
|
185
|
+
(event) => {
|
|
186
|
+
if (onKeyUp) onKeyUp(event);
|
|
187
|
+
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
188
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
189
|
+
handleSubmitValue();
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
[handleSubmitValue, onKeyUp],
|
|
193
|
+
);
|
|
194
|
+
return React.createElement(
|
|
195
|
+
'label',
|
|
196
|
+
{
|
|
197
|
+
className: classnames(ROOT_CLASS_NAME, className, { disabled }),
|
|
198
|
+
title: title,
|
|
199
|
+
},
|
|
200
|
+
icon &&
|
|
201
|
+
React.createElement(
|
|
202
|
+
'div',
|
|
203
|
+
{ className: `${ROOT_CLASS_NAME}-icon` },
|
|
204
|
+
icon,
|
|
205
|
+
),
|
|
206
|
+
label &&
|
|
207
|
+
React.createElement(
|
|
208
|
+
'div',
|
|
209
|
+
{ className: `${ROOT_CLASS_NAME}-label` },
|
|
210
|
+
React.createElement(
|
|
211
|
+
'p',
|
|
212
|
+
{ className: `${ROOT_CLASS_NAME}-label-text` },
|
|
213
|
+
label,
|
|
214
|
+
),
|
|
215
|
+
),
|
|
216
|
+
React.createElement(
|
|
217
|
+
'div',
|
|
218
|
+
{ className: `${ROOT_CLASS_NAME}-value` },
|
|
219
|
+
React.createElement(InputText, {
|
|
220
|
+
disabled: disabled,
|
|
221
|
+
initialValue: value,
|
|
222
|
+
name: name,
|
|
223
|
+
onBlur: handleBlur,
|
|
224
|
+
onChange: onChange,
|
|
225
|
+
onFocus: onFocus,
|
|
226
|
+
onKeyDown: handleKeyDown,
|
|
227
|
+
onKeyUp: handleKeyUp,
|
|
228
|
+
placeholder: placeholder,
|
|
229
|
+
ref: inputRef,
|
|
230
|
+
selectTextOnFocus: true,
|
|
231
|
+
tabIndex: tabIndex,
|
|
232
|
+
}),
|
|
233
|
+
),
|
|
234
|
+
);
|
|
235
|
+
},
|
|
236
|
+
);
|
|
165
237
|
export default CSSValueInput;
|
|
166
|
-
//# sourceMappingURL=CSSValueInput.js.map
|
|
238
|
+
//# sourceMappingURL=CSSValueInput.js.map
|
|
@@ -5,39 +5,39 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import type { CSSValueType } from
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
|
|
13
|
+
*/
|
|
14
|
+
allowEmpty?: boolean,
|
|
15
|
+
className?: string,
|
|
16
|
+
cssValueType?: CSSValueType,
|
|
17
|
+
disabled?: boolean,
|
|
18
|
+
getValueAsNumber?: (value: string | number) => number,
|
|
19
|
+
icon?: React.Node,
|
|
20
|
+
label?: string,
|
|
21
|
+
max?: number,
|
|
22
|
+
min?: number,
|
|
23
|
+
name?: string,
|
|
24
|
+
onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
|
|
25
|
+
onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
|
|
26
|
+
onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
|
|
27
|
+
onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
28
|
+
onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
29
|
+
onSubmitValue: (value: string) => mixed,
|
|
30
|
+
placeholder?: string,
|
|
31
|
+
step?: number,
|
|
32
|
+
tabIndex?: number,
|
|
33
|
+
title?: string,
|
|
34
|
+
unit?: string,
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Regex or validator function to validate non-numeric values
|
|
38
|
+
*/
|
|
39
|
+
validator?: RegExp | ((value: string) => boolean),
|
|
40
|
+
value?: string,
|
|
41
41
|
|};
|
|
42
42
|
declare var CSSValueInput: React.StatelessFunctionalComponent<Props>;
|
|
43
43
|
declare export default typeof CSSValueInput;
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/css-value-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.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.15.0",
|
|
30
|
+
"@acusti/input-text": "^0.6.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;
|