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