@acusti/css-value-input 1.0.0-rc.0 → 1.0.0-rc.2
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.d.ts
CHANGED
|
@@ -27,5 +27,5 @@ export type Props = {
|
|
|
27
27
|
validator?: RegExp | ((value: string) => boolean);
|
|
28
28
|
value?: string;
|
|
29
29
|
};
|
|
30
|
-
declare const CSSValueInput: React.
|
|
30
|
+
declare const CSSValueInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
|
|
31
31
|
export default CSSValueInput;
|
package/dist/CSSValueInput.js
CHANGED
|
@@ -2,12 +2,19 @@ import { DEFAULT_CSS_VALUE_TYPE, DEFAULT_UNIT_BY_CSS_VALUE_TYPE, getCSSValueAsNu
|
|
|
2
2
|
import InputText from '@acusti/input-text';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
const { useCallback, useImperativeHandle, useRef } = React;
|
|
5
|
+
const { useCallback, useEffect, useImperativeHandle, useRef } = React;
|
|
6
6
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
7
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
8
|
const inputRef = useRef(null);
|
|
9
9
|
useImperativeHandle(ref, () => inputRef.current);
|
|
10
|
+
// props.value should be a string; if it’s a number, convert it here
|
|
11
|
+
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
12
|
+
value = `${value}`;
|
|
13
|
+
}
|
|
10
14
|
const submittedValueRef = useRef(value || '');
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
submittedValueRef.current = value || '';
|
|
17
|
+
}, [value]);
|
|
11
18
|
const handleSubmitValue = useCallback((event) => {
|
|
12
19
|
const currentValue = event.currentTarget.value;
|
|
13
20
|
// Store last submittedValue (used to reset value on invalid input)
|
|
@@ -39,5 +39,8 @@ export type Props = {|
|
|
|
39
39
|
validator?: RegExp | ((value: string) => boolean),
|
|
40
40
|
value?: string,
|
|
41
41
|
|};
|
|
42
|
-
declare var CSSValueInput: React.
|
|
42
|
+
declare var CSSValueInput: React.ForwardRefExoticComponent<{|
|
|
43
|
+
...Props,
|
|
44
|
+
...React.RefAttributes<HTMLInputElement>,
|
|
45
|
+
|}>;
|
|
43
46
|
declare export default typeof CSSValueInput;
|
|
@@ -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;
|
|
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": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.2",
|
|
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",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@acusti/css-values": "^1.0.0",
|
|
50
50
|
"@acusti/input-text": "^1.2.0",
|
|
51
|
-
"clsx": "^
|
|
51
|
+
"clsx": "^2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"react": "^16.8 || ^17 || ^18",
|
|
@@ -79,4 +79,37 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
79
79
|
await user.type(input, '50{Enter}');
|
|
80
80
|
expect(input.value).toBe('50vw');
|
|
81
81
|
});
|
|
82
|
+
|
|
83
|
+
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
84
|
+
const user = userEvent.setup();
|
|
85
|
+
const { getByRole } = render(
|
|
86
|
+
<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />,
|
|
87
|
+
);
|
|
88
|
+
const input = getByRole('textbox');
|
|
89
|
+
expect(input.value).toBe('100');
|
|
90
|
+
await user.type(input, '1{Enter}');
|
|
91
|
+
expect(input.value).toBe('1');
|
|
92
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
93
|
+
expect(input.value).toBe('11');
|
|
94
|
+
await user.clear(input);
|
|
95
|
+
expect(input.value).toBe('');
|
|
96
|
+
await user.type(input, '200{Enter}');
|
|
97
|
+
expect(input.value).toBe('200');
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
it('updates default unit as props.unit and props.value changes', async () => {
|
|
101
|
+
const user = userEvent.setup();
|
|
102
|
+
const { getByRole, rerender } = render(
|
|
103
|
+
<CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
|
|
104
|
+
);
|
|
105
|
+
const input = getByRole('textbox');
|
|
106
|
+
rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
|
|
107
|
+
expect(input.value).toBe('4');
|
|
108
|
+
await user.type(input, '25{Enter}');
|
|
109
|
+
expect(input.value).toBe('25');
|
|
110
|
+
rerender(<CSSValueInput onSubmitValue={noop} unit="rad" value="3rad" />);
|
|
111
|
+
expect(input.value).toBe('3rad');
|
|
112
|
+
await user.type(input, '-4.1{Enter}');
|
|
113
|
+
expect(input.value).toBe('-4.1rad');
|
|
114
|
+
});
|
|
82
115
|
});
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -42,11 +42,11 @@ export type Props = {
|
|
|
42
42
|
|
|
43
43
|
type InputRef = HTMLInputElement | null;
|
|
44
44
|
|
|
45
|
-
const { useCallback, useImperativeHandle, useRef } = React;
|
|
45
|
+
const { useCallback, useEffect, useImperativeHandle, useRef } = React;
|
|
46
46
|
|
|
47
47
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
48
48
|
|
|
49
|
-
const CSSValueInput
|
|
49
|
+
const CSSValueInput = React.forwardRef<HTMLInputElement, Props>(
|
|
50
50
|
(
|
|
51
51
|
{
|
|
52
52
|
allowEmpty = true,
|
|
@@ -72,14 +72,21 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
72
72
|
unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
|
|
73
73
|
validator,
|
|
74
74
|
value,
|
|
75
|
-
},
|
|
75
|
+
}: Props,
|
|
76
76
|
ref,
|
|
77
77
|
) => {
|
|
78
78
|
const inputRef = useRef<InputRef>(null);
|
|
79
79
|
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
80
|
-
|
|
80
|
+
// props.value should be a string; if it’s a number, convert it here
|
|
81
|
+
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
82
|
+
value = `${value}`;
|
|
83
|
+
}
|
|
81
84
|
const submittedValueRef = useRef<string>(value || '');
|
|
82
85
|
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
submittedValueRef.current = value || '';
|
|
88
|
+
}, [value]);
|
|
89
|
+
|
|
83
90
|
const handleSubmitValue = useCallback(
|
|
84
91
|
(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
85
92
|
const currentValue = event.currentTarget.value;
|