@acusti/css-value-input 0.22.0 → 0.23.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.
Files changed (3) hide show
  1. package/dist/CSSValueInput.js +224 -154
  2. package/dist/CSSValueInput.js.flow +31 -31
  3. package/package.json +2 -2
package/dist/CSSValueInput.js CHANGED
@@ -1,164 +1,234 @@
1
- import { DEFAULT_CSS_VALUE_TYPE, DEFAULT_UNIT_BY_CSS_VALUE_TYPE, getCSSValueAsNumber, getCSSValueWithUnit, getUnitFromCSSValue, roundToPrecision, } from '@acusti/css-values';
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 clsx from 'clsx';
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(({ 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) {
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
+ // 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
+ }
41
105
  handleSubmitValue();
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({
64
- cssValueType,
65
- defaultUnit: unit,
66
- value: currentValue,
67
- });
68
- inputRef.current.value = normalizedValueAsNumber + currentUnit;
69
- }
70
- else {
71
- inputRef.current.value = getCSSValueWithUnit({
106
+ },
107
+ [
108
+ allowEmpty,
72
109
  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;
110
+ getValueAsNumber,
111
+ handleSubmitValue,
112
+ max,
113
+ min,
114
+ onBlur,
115
+ unit,
116
+ validator,
117
+ ],
118
+ );
119
+ const getNextValue = useCallback(
120
+ ({ currentValue, multiplier = 1, signum = 1 }) => {
121
+ const modifier = multiplier * step * signum;
122
+ const currentValueAsNumber = getValueAsNumber(currentValue);
123
+ // If currentValue isn’t numeric, don’t try to increment/decrement it
124
+ if (
125
+ typeof currentValue === 'string' &&
126
+ Number.isNaN(currentValueAsNumber)
127
+ ) {
128
+ return currentValue;
128
129
  }
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,
130
+ let nextValue = currentValueAsNumber + modifier;
131
+ if (cssValueType === 'integer') {
132
+ nextValue = Math.floor(nextValue);
133
+ } else {
134
+ nextValue = roundToPrecision(nextValue, 5);
135
+ }
136
+ if (typeof max === 'number' && Number.isFinite(max)) {
137
+ nextValue = Math.min(max, nextValue);
138
+ }
139
+ if (typeof min === 'number' && Number.isFinite(min)) {
140
+ nextValue = Math.max(min, nextValue);
141
+ }
142
+ const nextUnit = getUnitFromCSSValue({
143
+ cssValueType,
144
+ defaultUnit: unit,
145
+ value: currentValue,
137
146
  });
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: clsx(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
- });
147
+ return `${nextValue}${nextUnit}`;
148
+ },
149
+ [cssValueType, getValueAsNumber, max, min, step, unit],
150
+ );
151
+ const handleKeyDown = useCallback(
152
+ (event) => {
153
+ if (onKeyDown) onKeyDown(event);
154
+ const input = event.currentTarget;
155
+ const currentValue = input.value || placeholder || `0${unit}`;
156
+ let nextValue = '';
157
+ switch (event.key) {
158
+ case 'Escape':
159
+ case 'Enter':
160
+ if (event.key === 'Escape') {
161
+ input.value = submittedValueRef.current;
162
+ }
163
+ input.blur();
164
+ return;
165
+ case 'ArrowUp':
166
+ case 'ArrowDown':
167
+ nextValue = getNextValue({
168
+ currentValue,
169
+ multiplier: event.shiftKey ? 10 : 1,
170
+ signum: event.key === 'ArrowUp' ? 1 : -1,
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
+ { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
196
+ icon &&
197
+ React.createElement(
198
+ 'div',
199
+ { className: `${ROOT_CLASS_NAME}-icon` },
200
+ icon,
201
+ ),
202
+ label &&
203
+ React.createElement(
204
+ 'div',
205
+ { className: `${ROOT_CLASS_NAME}-label` },
206
+ React.createElement(
207
+ 'p',
208
+ { className: `${ROOT_CLASS_NAME}-label-text` },
209
+ label,
210
+ ),
211
+ ),
212
+ React.createElement(
213
+ 'div',
214
+ { className: `${ROOT_CLASS_NAME}-value` },
215
+ React.createElement(InputText, {
216
+ disabled: disabled,
217
+ initialValue: value,
218
+ name: name,
219
+ onBlur: handleBlur,
220
+ onChange: onChange,
221
+ onFocus: onFocus,
222
+ onKeyDown: handleKeyDown,
223
+ onKeyUp: handleKeyUp,
224
+ placeholder: placeholder,
225
+ ref: inputRef,
226
+ selectTextOnFocus: true,
227
+ tabIndex: tabIndex,
228
+ }),
229
+ ),
230
+ );
231
+ },
232
+ );
163
233
  export default CSSValueInput;
164
- //# sourceMappingURL=CSSValueInput.js.map
234
+ //# sourceMappingURL=CSSValueInput.js.map
package/dist/CSSValueInput.js.flow CHANGED
@@ -5,39 +5,39 @@
5
5
  * @flow
6
6
  */
7
7
 
8
- import * as React from "react";
9
- import type { CSSValueType } from "@acusti/css-values";
8
+ import * as React from 'react';
9
+ import type { CSSValueType } from '@acusti/css-values';
10
10
  export type Props = {|
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,
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
- * Regex or validator function to validate non-numeric values
38
- */
39
- validator?: RegExp | ((value: string) => boolean),
40
- value?: string,
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.22.0",
3
+ "version": "0.23.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.0.0",
44
+ "@acusti/input-text": "^1.0.1",
45
45
  "clsx": "^1.2.1"
46
46
  },
47
47
  "peerDependencies": {