@acusti/css-value-input 1.0.0-rc.0 → 1.0.0-rc.1
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
CHANGED
|
@@ -2,12 +2,15 @@ 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
10
|
const submittedValueRef = useRef(value || '');
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
submittedValueRef.current = value || '';
|
|
13
|
+
}, [value]);
|
|
11
14
|
const handleSubmitValue = useCallback((event) => {
|
|
12
15
|
const currentValue = event.currentTarget.value;
|
|
13
16
|
// Store last submittedValue (used to reset value on invalid input)
|
|
@@ -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
|
@@ -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,7 +42,7 @@ 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
|
|
|
@@ -77,9 +77,12 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
|
|
|
77
77
|
) => {
|
|
78
78
|
const inputRef = useRef<InputRef>(null);
|
|
79
79
|
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
80
|
-
|
|
81
80
|
const submittedValueRef = useRef<string>(value || '');
|
|
82
81
|
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
submittedValueRef.current = value || '';
|
|
84
|
+
}, [value]);
|
|
85
|
+
|
|
83
86
|
const handleSubmitValue = useCallback(
|
|
84
87
|
(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
85
88
|
const currentValue = event.currentTarget.value;
|