@acusti/css-value-input 1.0.0-rc.5 → 1.0.0-rc.6
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 +3 -3
- package/dist/CSSValueInput.js +10 -11
- package/dist/CSSValueInput.js.flow +3 -3
- package/dist/CSSValueInput.js.map +1 -1
- package/dist/CSSValueInput.test.d.ts +1 -0
- package/dist/CSSValueInput.test.js +104 -0
- package/dist/CSSValueInput.test.js.flow +6 -0
- package/dist/CSSValueInput.test.js.map +1 -0
- package/package.json +7 -6
- package/src/CSSValueInput.test.tsx +28 -28
- package/src/CSSValueInput.tsx +241 -252
package/dist/CSSValueInput.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import type { CSSValueType } from '@acusti/css-values';
|
|
2
|
+
import * as React from 'react';
|
|
3
3
|
export type Props = {
|
|
4
4
|
/** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
|
|
5
5
|
allowEmpty?: boolean;
|
|
@@ -27,5 +27,5 @@ export type Props = {
|
|
|
27
27
|
validator?: RegExp | ((value: string) => boolean);
|
|
28
28
|
value?: string;
|
|
29
29
|
};
|
|
30
|
-
declare const
|
|
31
|
-
export default
|
|
30
|
+
declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
|
|
31
|
+
export default _default;
|
package/dist/CSSValueInput.js
CHANGED
|
@@ -4,16 +4,16 @@ import clsx from 'clsx';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
const { useCallback, useEffect, useImperativeHandle, useRef } = React;
|
|
6
6
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
7
|
-
|
|
7
|
+
export default React.forwardRef(function CSSValueInput({ 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
|
// props.value should be a string; if it’s a number, convert it here
|
|
11
11
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
12
|
-
value = `${value}`;
|
|
12
|
+
value = `${value}`; // eslint-disable-line @typescript-eslint/restrict-template-expressions
|
|
13
13
|
}
|
|
14
|
-
const submittedValueRef = useRef(value
|
|
14
|
+
const submittedValueRef = useRef(value !== null && value !== void 0 ? value : '');
|
|
15
15
|
useEffect(() => {
|
|
16
|
-
submittedValueRef.current = value
|
|
16
|
+
submittedValueRef.current = value !== null && value !== void 0 ? value : '';
|
|
17
17
|
}, [value]);
|
|
18
18
|
const handleSubmitValue = useCallback((event) => {
|
|
19
19
|
const currentValue = event.currentTarget.value;
|
|
@@ -104,8 +104,7 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
104
104
|
const modifier = multiplier * step * signum;
|
|
105
105
|
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
106
106
|
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
107
|
-
if (typeof currentValue === 'string' &&
|
|
108
|
-
Number.isNaN(currentValueAsNumber)) {
|
|
107
|
+
if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
|
|
109
108
|
return currentValue;
|
|
110
109
|
}
|
|
111
110
|
let nextValue = currentValueAsNumber + modifier;
|
|
@@ -129,11 +128,12 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
129
128
|
return `${nextValue}${nextUnit}`;
|
|
130
129
|
}, [cssValueType, getValueAsNumber, max, min, step, unit]);
|
|
131
130
|
const handleKeyDown = useCallback((event) => {
|
|
131
|
+
var _a, _b;
|
|
132
132
|
const input = event.currentTarget;
|
|
133
133
|
inputRef.current = input;
|
|
134
134
|
if (onKeyDown)
|
|
135
135
|
onKeyDown(event);
|
|
136
|
-
const currentValue = input.value
|
|
136
|
+
const currentValue = (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : `0${unit}`;
|
|
137
137
|
let nextValue = '';
|
|
138
138
|
switch (event.key) {
|
|
139
139
|
case 'Escape':
|
|
@@ -169,11 +169,10 @@ const CSSValueInput = React.forwardRef(({ allowEmpty = true, className, cssValue
|
|
|
169
169
|
}
|
|
170
170
|
}, [handleSubmitValue, onKeyUp]);
|
|
171
171
|
return (React.createElement("label", { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
|
|
172
|
-
icon
|
|
173
|
-
label
|
|
174
|
-
React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))),
|
|
172
|
+
icon ? React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon) : null,
|
|
173
|
+
label ? (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
|
|
174
|
+
React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))) : null,
|
|
175
175
|
React.createElement("div", { className: `${ROOT_CLASS_NAME}-value` },
|
|
176
176
|
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 }))));
|
|
177
177
|
});
|
|
178
|
-
export default CSSValueInput;
|
|
179
178
|
//# sourceMappingURL=CSSValueInput.js.map
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import * as React from "react";
|
|
9
8
|
import type { CSSValueType } from "@acusti/css-values";
|
|
9
|
+
import * as React from "react";
|
|
10
10
|
export type Props = {|
|
|
11
11
|
/**
|
|
12
12
|
* Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
|
|
@@ -39,8 +39,8 @@ export type Props = {|
|
|
|
39
39
|
validator?: RegExp | ((value: string) => boolean),
|
|
40
40
|
value?: string,
|
|
41
41
|
|};
|
|
42
|
-
declare var
|
|
42
|
+
declare var _default: React.StatelessFunctionalComponent<{|
|
|
43
43
|
...Props,
|
|
44
44
|
...{| ref?: HTMLInputElement |},
|
|
45
45
|
|}>;
|
|
46
|
-
declare export default typeof
|
|
46
|
+
declare export default typeof _default;
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
// @vitest-environment happy-dom
|
|
2
|
+
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
|
+
import userEvent from '@testing-library/user-event';
|
|
4
|
+
import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
5
|
+
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
|
+
import CSSValueInput from './CSSValueInput.js';
|
|
7
|
+
const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
|
|
8
|
+
afterEach(cleanup);
|
|
9
|
+
describe('CSSValueInput.tsx', () => {
|
|
10
|
+
it('renders a text input with the given props.value', () => {
|
|
11
|
+
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "24px" }));
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
13
|
+
const input = screen.getByRole('textbox');
|
|
14
|
+
expect(input.value).toBe('24px');
|
|
15
|
+
});
|
|
16
|
+
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
17
|
+
const user = userEvent.setup();
|
|
18
|
+
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
20
|
+
const input = screen.getByRole('textbox');
|
|
21
|
+
expect(input.value).toBe('75%');
|
|
22
|
+
await user.type(input, '{ArrowUp}');
|
|
23
|
+
expect(input.value).toBe('76%');
|
|
24
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
25
|
+
expect(input.value).toBe('86%');
|
|
26
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
27
|
+
expect(input.value).toBe('96%');
|
|
28
|
+
await user.type(input, '{ArrowUp}');
|
|
29
|
+
expect(input.value).toBe('97%');
|
|
30
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
31
|
+
expect(input.value).toBe('87%');
|
|
32
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
33
|
+
expect(input.value).toBe('77%');
|
|
34
|
+
});
|
|
35
|
+
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
36
|
+
const user = userEvent.setup();
|
|
37
|
+
render(React.createElement(CSSValueInput, { onSubmitValue: noop, step: 0.1, value: "2rem" }));
|
|
38
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
39
|
+
const input = screen.getByRole('textbox');
|
|
40
|
+
expect(input.value).toBe('2rem');
|
|
41
|
+
await user.type(input, '{ArrowUp}');
|
|
42
|
+
expect(input.value).toBe('2.1rem');
|
|
43
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
44
|
+
expect(input.value).toBe('3.1rem');
|
|
45
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
46
|
+
expect(input.value).toBe('4.1rem');
|
|
47
|
+
await user.type(input, '{ArrowUp}');
|
|
48
|
+
expect(input.value).toBe('4.2rem');
|
|
49
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
50
|
+
expect(input.value).toBe('3.2rem');
|
|
51
|
+
await user.type(input, '{Shift>}{ArrowDown}{/Shift}');
|
|
52
|
+
expect(input.value).toBe('2.2rem');
|
|
53
|
+
});
|
|
54
|
+
it('uses props.unit as default unit when unit is missing', async () => {
|
|
55
|
+
const user = userEvent.setup();
|
|
56
|
+
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
|
|
57
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
58
|
+
const input = screen.getByRole('textbox');
|
|
59
|
+
expect(input.value).toBe('');
|
|
60
|
+
await user.type(input, '14{Enter}');
|
|
61
|
+
expect(input.value).toBe('14px');
|
|
62
|
+
});
|
|
63
|
+
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
64
|
+
const user = userEvent.setup();
|
|
65
|
+
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
|
|
66
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
67
|
+
const input = screen.getByRole('textbox');
|
|
68
|
+
expect(input.value).toBe('');
|
|
69
|
+
await user.type(input, '25vw{Enter}');
|
|
70
|
+
expect(input.value).toBe('25vw');
|
|
71
|
+
await user.type(input, '50{Enter}');
|
|
72
|
+
expect(input.value).toBe('50vw');
|
|
73
|
+
});
|
|
74
|
+
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
75
|
+
const user = userEvent.setup();
|
|
76
|
+
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "", value: "100" }));
|
|
77
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
78
|
+
const input = screen.getByRole('textbox');
|
|
79
|
+
expect(input.value).toBe('100');
|
|
80
|
+
await user.type(input, '1{Enter}');
|
|
81
|
+
expect(input.value).toBe('1');
|
|
82
|
+
await user.type(input, '{Shift>}{ArrowUp}{/Shift}');
|
|
83
|
+
expect(input.value).toBe('11');
|
|
84
|
+
await user.clear(input);
|
|
85
|
+
expect(input.value).toBe('');
|
|
86
|
+
await user.type(input, '200{Enter}');
|
|
87
|
+
expect(input.value).toBe('200');
|
|
88
|
+
});
|
|
89
|
+
it('updates default unit as props.unit and props.value changes', async () => {
|
|
90
|
+
const user = userEvent.setup();
|
|
91
|
+
const { rerender } = render(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "px", value: "12px" }));
|
|
92
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
93
|
+
const input = screen.getByRole('textbox');
|
|
94
|
+
rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "", value: "4" }));
|
|
95
|
+
expect(input.value).toBe('4');
|
|
96
|
+
await user.type(input, '25{Enter}');
|
|
97
|
+
expect(input.value).toBe('25');
|
|
98
|
+
rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "rad", value: "3rad" }));
|
|
99
|
+
expect(input.value).toBe('3rad');
|
|
100
|
+
await user.type(input, '-4.1{Enter}');
|
|
101
|
+
expect(input.value).toBe('-4.1rad');
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
//# sourceMappingURL=CSSValueInput.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.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.6",
|
|
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",
|
|
@@ -39,15 +39,16 @@
|
|
|
39
39
|
"@testing-library/dom": "^9.3.1",
|
|
40
40
|
"@testing-library/react": "^14.0.0",
|
|
41
41
|
"@testing-library/user-event": "^14.4.3",
|
|
42
|
-
"@types/react": "^18.
|
|
43
|
-
"
|
|
42
|
+
"@types/react": "^18.2.45",
|
|
43
|
+
"happy-dom": "^12.10.3",
|
|
44
44
|
"react": "^18",
|
|
45
45
|
"react-dom": "^18",
|
|
46
|
-
"typescript": "^5.
|
|
46
|
+
"typescript": "^5.3.3",
|
|
47
|
+
"vitest": "^1.1.0"
|
|
47
48
|
},
|
|
48
49
|
"dependencies": {
|
|
49
|
-
"@acusti/css-values": "^1.0.
|
|
50
|
-
"@acusti/input-text": "^1.
|
|
50
|
+
"@acusti/css-values": "^1.0.1",
|
|
51
|
+
"@acusti/input-text": "^1.3.0",
|
|
51
52
|
"clsx": "^2"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
@@ -1,25 +1,28 @@
|
|
|
1
|
-
// @vitest-environment
|
|
2
|
-
import { cleanup, render } from '@testing-library/react';
|
|
1
|
+
// @vitest-environment happy-dom
|
|
2
|
+
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
3
|
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
|
|
7
7
|
import CSSValueInput from './CSSValueInput.js';
|
|
8
8
|
|
|
9
|
-
const noop = () => {};
|
|
9
|
+
const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
|
|
10
10
|
|
|
11
11
|
afterEach(cleanup);
|
|
12
12
|
|
|
13
|
-
describe('CSSValueInput.tsx',
|
|
14
|
-
it('renders a text input with the given props.value',
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
describe('CSSValueInput.tsx', () => {
|
|
14
|
+
it('renders a text input with the given props.value', () => {
|
|
15
|
+
render(<CSSValueInput onSubmitValue={noop} value="24px" />);
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
17
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
18
|
+
expect(input.value).toBe('24px');
|
|
17
19
|
});
|
|
18
20
|
|
|
19
21
|
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
20
22
|
const user = userEvent.setup();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
render(<CSSValueInput onSubmitValue={noop} value="75%" />);
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
25
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
23
26
|
expect(input.value).toBe('75%');
|
|
24
27
|
await user.type(input, '{ArrowUp}');
|
|
25
28
|
expect(input.value).toBe('76%');
|
|
@@ -37,10 +40,9 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
37
40
|
|
|
38
41
|
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
39
42
|
const user = userEvent.setup();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
);
|
|
43
|
-
const input = getByRole('textbox');
|
|
43
|
+
render(<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />);
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
45
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
44
46
|
expect(input.value).toBe('2rem');
|
|
45
47
|
await user.type(input, '{ArrowUp}');
|
|
46
48
|
expect(input.value).toBe('2.1rem');
|
|
@@ -58,10 +60,9 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
58
60
|
|
|
59
61
|
it('uses props.unit as default unit when unit is missing', async () => {
|
|
60
62
|
const user = userEvent.setup();
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
);
|
|
64
|
-
const input = getByRole('textbox');
|
|
63
|
+
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
64
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
65
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
65
66
|
expect(input.value).toBe('');
|
|
66
67
|
await user.type(input, '14{Enter}');
|
|
67
68
|
expect(input.value).toBe('14px');
|
|
@@ -69,10 +70,9 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
69
70
|
|
|
70
71
|
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
71
72
|
const user = userEvent.setup();
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
);
|
|
75
|
-
const input = getByRole('textbox');
|
|
73
|
+
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
74
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
75
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
76
76
|
expect(input.value).toBe('');
|
|
77
77
|
await user.type(input, '25vw{Enter}');
|
|
78
78
|
expect(input.value).toBe('25vw');
|
|
@@ -82,10 +82,9 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
82
82
|
|
|
83
83
|
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
84
84
|
const user = userEvent.setup();
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
);
|
|
88
|
-
const input = getByRole('textbox');
|
|
85
|
+
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />);
|
|
86
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
87
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
89
88
|
expect(input.value).toBe('100');
|
|
90
89
|
await user.type(input, '1{Enter}');
|
|
91
90
|
expect(input.value).toBe('1');
|
|
@@ -99,10 +98,11 @@ describe('CSSValueInput.tsx', async () => {
|
|
|
99
98
|
|
|
100
99
|
it('updates default unit as props.unit and props.value changes', async () => {
|
|
101
100
|
const user = userEvent.setup();
|
|
102
|
-
const {
|
|
101
|
+
const { rerender } = render(
|
|
103
102
|
<CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
|
|
104
103
|
);
|
|
105
|
-
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
105
|
+
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
106
106
|
rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
|
|
107
107
|
expect(input.value).toBe('4');
|
|
108
108
|
await user.type(input, '25{Enter}');
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -6,12 +6,11 @@ import {
|
|
|
6
6
|
getUnitFromCSSValue,
|
|
7
7
|
roundToPrecision,
|
|
8
8
|
} from '@acusti/css-values';
|
|
9
|
+
import type { CSSValueType } from '@acusti/css-values';
|
|
9
10
|
import InputText from '@acusti/input-text';
|
|
10
11
|
import clsx from 'clsx';
|
|
11
12
|
import * as React from 'react';
|
|
12
13
|
|
|
13
|
-
import type { CSSValueType } from '@acusti/css-values';
|
|
14
|
-
|
|
15
14
|
export type Props = {
|
|
16
15
|
/** Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true */
|
|
17
16
|
allowEmpty?: boolean;
|
|
@@ -46,269 +45,259 @@ const { useCallback, useEffect, useImperativeHandle, useRef } = React;
|
|
|
46
45
|
|
|
47
46
|
const ROOT_CLASS_NAME = 'cssvalueinput';
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
if (allowEmpty && !currentValue) {
|
|
110
|
-
handleSubmitValue(event);
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
115
|
-
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
116
|
-
// Inherit unit from last submitted value unless default is unitless;
|
|
117
|
-
// ensures that submitting a new value with no unit doesn’t add a unit
|
|
118
|
-
const defaultUnit = unit
|
|
119
|
-
? getUnitFromCSSValue({
|
|
120
|
-
cssValueType,
|
|
121
|
-
defaultUnit: unit,
|
|
122
|
-
value: submittedValueRef.current,
|
|
123
|
-
})
|
|
124
|
-
: '';
|
|
125
|
-
|
|
126
|
-
if (!isCurrentValueFinite) {
|
|
127
|
-
let isValid = false;
|
|
128
|
-
if (validator instanceof RegExp) {
|
|
129
|
-
isValid = validator.test(currentValue);
|
|
130
|
-
} else if (validator) {
|
|
131
|
-
isValid = validator(currentValue);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
if (isValid) {
|
|
135
|
-
handleSubmitValue(event);
|
|
136
|
-
} else {
|
|
137
|
-
// If current value isn’t valid, revert to last submitted value
|
|
138
|
-
input.value = submittedValueRef.current;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// Normalize value by applying min/max and integer constraints
|
|
145
|
-
let normalizedValueAsNumber = currentValueAsNumber;
|
|
146
|
-
|
|
147
|
-
if (isCurrentValueFinite) {
|
|
148
|
-
if (min != null && currentValueAsNumber < min) {
|
|
149
|
-
normalizedValueAsNumber = min;
|
|
150
|
-
} else if (max != null && currentValueAsNumber > max) {
|
|
151
|
-
normalizedValueAsNumber = max;
|
|
152
|
-
} else if (cssValueType === 'integer') {
|
|
153
|
-
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
158
|
-
const currentUnit = getUnitFromCSSValue({
|
|
159
|
-
cssValueType,
|
|
160
|
-
defaultUnit,
|
|
161
|
-
value: currentValue,
|
|
162
|
-
});
|
|
163
|
-
input.value = normalizedValueAsNumber + currentUnit;
|
|
164
|
-
} else {
|
|
165
|
-
input.value = getCSSValueWithUnit({
|
|
166
|
-
cssValueType,
|
|
167
|
-
defaultUnit,
|
|
168
|
-
value: currentValue,
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
|
|
48
|
+
export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
49
|
+
{
|
|
50
|
+
allowEmpty = true,
|
|
51
|
+
className,
|
|
52
|
+
cssValueType = DEFAULT_CSS_VALUE_TYPE,
|
|
53
|
+
disabled,
|
|
54
|
+
getValueAsNumber = getCSSValueAsNumber,
|
|
55
|
+
icon,
|
|
56
|
+
label,
|
|
57
|
+
max,
|
|
58
|
+
min,
|
|
59
|
+
name,
|
|
60
|
+
onBlur,
|
|
61
|
+
onChange,
|
|
62
|
+
onFocus,
|
|
63
|
+
onKeyDown,
|
|
64
|
+
onKeyUp,
|
|
65
|
+
onSubmitValue,
|
|
66
|
+
placeholder,
|
|
67
|
+
step = 1,
|
|
68
|
+
tabIndex,
|
|
69
|
+
title,
|
|
70
|
+
unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
|
|
71
|
+
validator,
|
|
72
|
+
value,
|
|
73
|
+
}: Props,
|
|
74
|
+
ref,
|
|
75
|
+
) {
|
|
76
|
+
const inputRef = useRef<InputRef>(null);
|
|
77
|
+
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
78
|
+
// props.value should be a string; if it’s a number, convert it here
|
|
79
|
+
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
80
|
+
value = `${value}`; // eslint-disable-line @typescript-eslint/restrict-template-expressions
|
|
81
|
+
}
|
|
82
|
+
const submittedValueRef = useRef<string>(value ?? '');
|
|
83
|
+
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
submittedValueRef.current = value ?? '';
|
|
86
|
+
}, [value]);
|
|
87
|
+
|
|
88
|
+
const handleSubmitValue = useCallback(
|
|
89
|
+
(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
90
|
+
const currentValue = event.currentTarget.value;
|
|
91
|
+
// Store last submittedValue (used to reset value on invalid input)
|
|
92
|
+
submittedValueRef.current = currentValue;
|
|
93
|
+
onSubmitValue(currentValue);
|
|
94
|
+
},
|
|
95
|
+
[onSubmitValue],
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
const handleBlur = useCallback(
|
|
99
|
+
(event: React.FocusEvent<HTMLInputElement>) => {
|
|
100
|
+
const input = event.currentTarget;
|
|
101
|
+
inputRef.current = input;
|
|
102
|
+
if (onBlur) onBlur(event);
|
|
103
|
+
|
|
104
|
+
const currentValue = input.value.trim();
|
|
105
|
+
|
|
106
|
+
// If allowEmpty and value is empty, skip all validation + normalization
|
|
107
|
+
if (allowEmpty && !currentValue) {
|
|
172
108
|
handleSubmitValue(event);
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
({
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
multiplier?: number;
|
|
195
|
-
signum?: number;
|
|
196
|
-
}) => {
|
|
197
|
-
const modifier = multiplier * step * signum;
|
|
198
|
-
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
199
|
-
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
200
|
-
if (
|
|
201
|
-
typeof currentValue === 'string' &&
|
|
202
|
-
Number.isNaN(currentValueAsNumber)
|
|
203
|
-
) {
|
|
204
|
-
return currentValue;
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
113
|
+
const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
|
|
114
|
+
// Inherit unit from last submitted value unless default is unitless;
|
|
115
|
+
// ensures that submitting a new value with no unit doesn’t add a unit
|
|
116
|
+
const defaultUnit = unit
|
|
117
|
+
? getUnitFromCSSValue({
|
|
118
|
+
cssValueType,
|
|
119
|
+
defaultUnit: unit,
|
|
120
|
+
value: submittedValueRef.current,
|
|
121
|
+
})
|
|
122
|
+
: '';
|
|
123
|
+
|
|
124
|
+
if (!isCurrentValueFinite) {
|
|
125
|
+
let isValid = false;
|
|
126
|
+
if (validator instanceof RegExp) {
|
|
127
|
+
isValid = validator.test(currentValue);
|
|
128
|
+
} else if (validator) {
|
|
129
|
+
isValid = validator(currentValue);
|
|
205
130
|
}
|
|
206
131
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
nextValue = Math.floor(nextValue);
|
|
132
|
+
if (isValid) {
|
|
133
|
+
handleSubmitValue(event);
|
|
210
134
|
} else {
|
|
211
|
-
|
|
135
|
+
// If current value isn’t valid, revert to last submitted value
|
|
136
|
+
input.value = submittedValueRef.current;
|
|
212
137
|
}
|
|
213
138
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// Normalize value by applying min/max and integer constraints
|
|
143
|
+
let normalizedValueAsNumber = currentValueAsNumber;
|
|
217
144
|
|
|
218
|
-
|
|
219
|
-
|
|
145
|
+
if (isCurrentValueFinite) {
|
|
146
|
+
if (min != null && currentValueAsNumber < min) {
|
|
147
|
+
normalizedValueAsNumber = min;
|
|
148
|
+
} else if (max != null && currentValueAsNumber > max) {
|
|
149
|
+
normalizedValueAsNumber = max;
|
|
150
|
+
} else if (cssValueType === 'integer') {
|
|
151
|
+
normalizedValueAsNumber = Math.floor(currentValueAsNumber);
|
|
220
152
|
}
|
|
153
|
+
}
|
|
221
154
|
|
|
222
|
-
|
|
155
|
+
if (normalizedValueAsNumber !== currentValueAsNumber) {
|
|
156
|
+
const currentUnit = getUnitFromCSSValue({
|
|
223
157
|
cssValueType,
|
|
224
|
-
defaultUnit
|
|
158
|
+
defaultUnit,
|
|
225
159
|
value: currentValue,
|
|
226
160
|
});
|
|
227
|
-
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
161
|
+
input.value = normalizedValueAsNumber + currentUnit;
|
|
162
|
+
} else {
|
|
163
|
+
input.value = getCSSValueWithUnit({
|
|
164
|
+
cssValueType,
|
|
165
|
+
defaultUnit,
|
|
166
|
+
value: currentValue,
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
handleSubmitValue(event);
|
|
171
|
+
},
|
|
172
|
+
[
|
|
173
|
+
allowEmpty,
|
|
174
|
+
cssValueType,
|
|
175
|
+
getValueAsNumber,
|
|
176
|
+
handleSubmitValue,
|
|
177
|
+
max,
|
|
178
|
+
min,
|
|
179
|
+
onBlur,
|
|
180
|
+
unit,
|
|
181
|
+
validator,
|
|
182
|
+
],
|
|
183
|
+
);
|
|
184
|
+
|
|
185
|
+
const getNextValue = useCallback(
|
|
186
|
+
({
|
|
187
|
+
currentValue,
|
|
188
|
+
multiplier = 1,
|
|
189
|
+
signum = 1,
|
|
190
|
+
}: {
|
|
191
|
+
currentValue: string | number;
|
|
192
|
+
multiplier?: number;
|
|
193
|
+
signum?: number;
|
|
194
|
+
}) => {
|
|
195
|
+
const modifier = multiplier * step * signum;
|
|
196
|
+
const currentValueAsNumber = getValueAsNumber(currentValue);
|
|
197
|
+
// If currentValue isn’t numeric, don’t try to increment/decrement it
|
|
198
|
+
if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
|
|
199
|
+
return currentValue;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
let nextValue = currentValueAsNumber + modifier;
|
|
203
|
+
if (cssValueType === 'integer') {
|
|
204
|
+
nextValue = Math.floor(nextValue);
|
|
205
|
+
} else {
|
|
206
|
+
nextValue = roundToPrecision(nextValue, 5);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
if (typeof max === 'number' && Number.isFinite(max)) {
|
|
210
|
+
nextValue = Math.min(max, nextValue);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
if (typeof min === 'number' && Number.isFinite(min)) {
|
|
214
|
+
nextValue = Math.max(min, nextValue);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
const nextUnit = getUnitFromCSSValue({
|
|
218
|
+
cssValueType,
|
|
219
|
+
defaultUnit: unit,
|
|
220
|
+
value: currentValue,
|
|
221
|
+
});
|
|
222
|
+
return `${nextValue}${nextUnit}`;
|
|
223
|
+
},
|
|
224
|
+
[cssValueType, getValueAsNumber, max, min, step, unit],
|
|
225
|
+
);
|
|
226
|
+
|
|
227
|
+
const handleKeyDown = useCallback(
|
|
228
|
+
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
229
|
+
const input = event.currentTarget;
|
|
230
|
+
inputRef.current = input;
|
|
231
|
+
if (onKeyDown) onKeyDown(event);
|
|
232
|
+
|
|
233
|
+
const currentValue = input.value ?? placeholder ?? `0${unit}`;
|
|
234
|
+
let nextValue = '';
|
|
235
|
+
|
|
236
|
+
switch (event.key) {
|
|
237
|
+
case 'Escape':
|
|
238
|
+
case 'Enter':
|
|
239
|
+
if (event.key === 'Escape') {
|
|
240
|
+
input.value = submittedValueRef.current;
|
|
241
|
+
}
|
|
242
|
+
input.blur();
|
|
243
|
+
return;
|
|
244
|
+
case 'ArrowUp':
|
|
245
|
+
case 'ArrowDown':
|
|
246
|
+
nextValue = getNextValue({
|
|
247
|
+
currentValue,
|
|
248
|
+
multiplier: event.shiftKey ? 10 : 1,
|
|
249
|
+
signum: event.key === 'ArrowUp' ? 1 : -1,
|
|
250
|
+
});
|
|
261
251
|
|
|
262
|
-
|
|
263
|
-
return;
|
|
264
|
-
default:
|
|
265
|
-
// No default key handling
|
|
266
|
-
}
|
|
267
|
-
},
|
|
268
|
-
[getNextValue, onKeyDown, placeholder, unit],
|
|
269
|
-
);
|
|
252
|
+
if (nextValue === currentValue) return;
|
|
270
253
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
if (onKeyUp) onKeyUp(event);
|
|
274
|
-
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
275
|
-
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
276
|
-
handleSubmitValue(event);
|
|
277
|
-
}
|
|
278
|
-
},
|
|
279
|
-
[handleSubmitValue, onKeyUp],
|
|
280
|
-
);
|
|
254
|
+
event.stopPropagation();
|
|
255
|
+
event.preventDefault();
|
|
281
256
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
257
|
+
input.value = nextValue;
|
|
258
|
+
return;
|
|
259
|
+
default:
|
|
260
|
+
// No default key handling
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
[getNextValue, onKeyDown, placeholder, unit],
|
|
264
|
+
);
|
|
265
|
+
|
|
266
|
+
const handleKeyUp = useCallback(
|
|
267
|
+
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
268
|
+
if (onKeyUp) onKeyUp(event);
|
|
269
|
+
// If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
|
|
270
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
271
|
+
handleSubmitValue(event);
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
[handleSubmitValue, onKeyUp],
|
|
275
|
+
);
|
|
276
|
+
|
|
277
|
+
return (
|
|
278
|
+
<label className={clsx(ROOT_CLASS_NAME, className, { disabled })} title={title}>
|
|
279
|
+
{icon ? <div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div> : null}
|
|
280
|
+
{label ? (
|
|
281
|
+
<div className={`${ROOT_CLASS_NAME}-label`}>
|
|
282
|
+
<p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
|
|
308
283
|
</div>
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
284
|
+
) : null}
|
|
285
|
+
<div className={`${ROOT_CLASS_NAME}-value`}>
|
|
286
|
+
<InputText
|
|
287
|
+
disabled={disabled}
|
|
288
|
+
initialValue={value}
|
|
289
|
+
name={name}
|
|
290
|
+
onBlur={handleBlur}
|
|
291
|
+
onChange={onChange}
|
|
292
|
+
onFocus={onFocus}
|
|
293
|
+
onKeyDown={handleKeyDown}
|
|
294
|
+
onKeyUp={handleKeyUp}
|
|
295
|
+
placeholder={placeholder}
|
|
296
|
+
ref={inputRef}
|
|
297
|
+
selectTextOnFocus
|
|
298
|
+
tabIndex={tabIndex}
|
|
299
|
+
/>
|
|
300
|
+
</div>
|
|
301
|
+
</label>
|
|
302
|
+
);
|
|
303
|
+
});
|