@rolster/react-components 19.8.22 → 19.9.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/cjs/index.cjs +105 -22
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/es/index.mjs +105 -22
- package/dist/es/index.mjs.map +1 -1
- package/dist/esm/components/atoms/AreaText/AreaText.js +39 -8
- package/dist/esm/components/atoms/AreaText/AreaText.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +66 -14
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/package.json +3 -3
- package/readme.md +11 -0
|
@@ -3,6 +3,17 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import { renderClassStatus } from '../../../helpers/css';
|
|
4
4
|
const AREA_TEXT_MAX_ROWS = 8;
|
|
5
5
|
const AREA_TEXT_MIN_ROWS = 3;
|
|
6
|
+
function writeAreaValue(element, valueArea) {
|
|
7
|
+
const rawArea = element.value;
|
|
8
|
+
if (rawArea === valueArea) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const selection = element.selectionStart;
|
|
12
|
+
const offset = valueArea.length - rawArea.length;
|
|
13
|
+
const caret = Math.max(0, Math.min(selection + offset, valueArea.length));
|
|
14
|
+
element.value = valueArea;
|
|
15
|
+
element.setSelectionRange(caret, caret);
|
|
16
|
+
}
|
|
6
17
|
function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
|
|
7
18
|
const valueInitial = String(formControl?.value ?? value ?? '');
|
|
8
19
|
const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
|
|
@@ -11,7 +22,9 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
11
22
|
const [focused, setFocused] = useState(false);
|
|
12
23
|
const elementRef = useRef(null);
|
|
13
24
|
const areaRef = formControl?.elementRef ?? elementRef;
|
|
14
|
-
const
|
|
25
|
+
const composing = useRef(false);
|
|
26
|
+
const valueSent = useRef(formControl?.value);
|
|
27
|
+
const valueSource = useRef(formControl ? formControl.value : value);
|
|
15
28
|
const heightIsManual = useRef(false);
|
|
16
29
|
const heightApplied = useRef(0);
|
|
17
30
|
const refreshHeight = useCallback(() => {
|
|
@@ -37,13 +50,16 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
37
50
|
heightApplied.current = height;
|
|
38
51
|
}, [areaRef, rowsMax, rowsMin]);
|
|
39
52
|
useEffect(() => {
|
|
40
|
-
|
|
41
|
-
|
|
53
|
+
const source = formControl ? formControl.value : value;
|
|
54
|
+
const isEcho = Object.is(source, valueSent.current);
|
|
55
|
+
const isSame = Object.is(source, valueSource.current);
|
|
56
|
+
valueSource.current = source;
|
|
57
|
+
if (!isEcho && !isSame) {
|
|
58
|
+
const nextValue = String(source ?? '');
|
|
42
59
|
if (valueArea !== nextValue) {
|
|
43
60
|
setValueArea(nextValue);
|
|
44
61
|
}
|
|
45
62
|
}
|
|
46
|
-
changeIsInternal.current = false;
|
|
47
63
|
}, [formControl?.value, value, valueArea]);
|
|
48
64
|
useEffect(() => {
|
|
49
65
|
refreshHeight();
|
|
@@ -67,13 +83,28 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
67
83
|
observer.observe(element);
|
|
68
84
|
return () => observer.disconnect();
|
|
69
85
|
}, [areaRef, resize]);
|
|
70
|
-
const
|
|
71
|
-
const
|
|
72
|
-
|
|
86
|
+
const applyArea = useCallback((element) => {
|
|
87
|
+
const rawArea = element.value;
|
|
88
|
+
const formatter = formControl?.formatter;
|
|
89
|
+
const nextValue = formatter && formControl?.formatOn !== 'blur' && !composing.current
|
|
90
|
+
? (formatter(rawArea) ?? '')
|
|
91
|
+
: rawArea;
|
|
92
|
+
writeAreaValue(element, nextValue);
|
|
93
|
+
valueSent.current = nextValue;
|
|
73
94
|
onValue?.(nextValue);
|
|
74
95
|
setValueArea(nextValue);
|
|
75
96
|
formControl?.setValue(nextValue);
|
|
76
97
|
}, [formControl, onValue]);
|
|
98
|
+
const onChangeArea = useCallback((event) => {
|
|
99
|
+
applyArea(event.target);
|
|
100
|
+
}, [applyArea]);
|
|
101
|
+
const onCompositionStart = useCallback(() => {
|
|
102
|
+
composing.current = true;
|
|
103
|
+
}, []);
|
|
104
|
+
const onCompositionEnd = useCallback((event) => {
|
|
105
|
+
composing.current = false;
|
|
106
|
+
applyArea(event.currentTarget);
|
|
107
|
+
}, [applyArea]);
|
|
77
108
|
const onKeyDownArea = useCallback((event) => {
|
|
78
109
|
onKeyDown?.(event);
|
|
79
110
|
if (event.key === 'Enter') {
|
|
@@ -100,7 +131,7 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
100
131
|
readonly: readOnly,
|
|
101
132
|
resizable: resize !== 'none' && !disabledArea && !readOnly
|
|
102
133
|
});
|
|
103
|
-
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
|
|
134
|
+
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
|
|
104
135
|
}
|
|
105
136
|
export const RlsAreaText = memo(RlsAreaTextComponent);
|
|
106
137
|
//# sourceMappingURL=AreaText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,30 +1,82 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
+
function valueToInput(value) {
|
|
5
|
+
return value ? String(value) : '';
|
|
6
|
+
}
|
|
7
|
+
function selectionStartOf(element) {
|
|
8
|
+
try {
|
|
9
|
+
// Lanza o retorna null en inputs sin selección (number, email, etc.)
|
|
10
|
+
return element.selectionStart;
|
|
11
|
+
}
|
|
12
|
+
catch {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Escribe el valor formateado directamente en el DOM y conserva la posición
|
|
18
|
+
* del cursor, corrigiéndola por la diferencia de longitud. Es necesario
|
|
19
|
+
* porque, cuando el formateador rechaza un carácter, el estado del control
|
|
20
|
+
* no cambia y React no vuelve a escribir el input.
|
|
21
|
+
*/
|
|
22
|
+
function writeInputValue(element, valueInput) {
|
|
23
|
+
const rawInput = element.value;
|
|
24
|
+
if (rawInput === valueInput) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const selection = selectionStartOf(element);
|
|
28
|
+
element.value = valueInput;
|
|
29
|
+
if (selection !== null) {
|
|
30
|
+
const offset = valueInput.length - rawInput.length;
|
|
31
|
+
const caret = Math.max(0, Math.min(selection + offset, valueInput.length));
|
|
32
|
+
element.setSelectionRange(caret, caret);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
4
35
|
function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
|
|
5
|
-
const
|
|
6
|
-
const [valueInput, setValueInput] = useState(valueInitial);
|
|
36
|
+
const [valueInput, setValueInput] = useState(() => valueToInput(formControl?.value ?? value));
|
|
7
37
|
const [focused, setFocused] = useState(false);
|
|
8
|
-
const
|
|
38
|
+
const composing = useRef(false);
|
|
39
|
+
const valueSent = useRef(formControl?.value);
|
|
9
40
|
useEffect(() => {
|
|
10
|
-
if (
|
|
11
|
-
const valueControl =
|
|
41
|
+
if (formControl && !Object.is(formControl.value, valueSent.current)) {
|
|
42
|
+
const valueControl = valueToInput(formControl.value);
|
|
12
43
|
if (valueInput !== valueControl) {
|
|
13
44
|
setValueInput(valueControl);
|
|
14
45
|
}
|
|
15
46
|
}
|
|
16
|
-
changeIsInternal.current = false;
|
|
17
47
|
}, [formControl?.value]);
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
? parseFloat((+
|
|
22
|
-
:
|
|
23
|
-
|
|
48
|
+
const applyInput = useCallback((element) => {
|
|
49
|
+
const rawInput = element.value;
|
|
50
|
+
const parsed = type === 'number'
|
|
51
|
+
? parseFloat((+rawInput).toFixed(decimals))
|
|
52
|
+
: rawInput;
|
|
53
|
+
const formatter = formControl?.formatter;
|
|
54
|
+
const value = formatter && formControl?.formatOn !== 'blur' && !composing.current
|
|
55
|
+
? formatter(parsed)
|
|
56
|
+
: parsed;
|
|
57
|
+
const textInput = Object.is(value, parsed)
|
|
58
|
+
? rawInput
|
|
59
|
+
: type === 'number'
|
|
60
|
+
? Number.isNaN(value)
|
|
61
|
+
? ''
|
|
62
|
+
: String(value)
|
|
63
|
+
: valueToInput(value);
|
|
64
|
+
writeInputValue(element, textInput);
|
|
65
|
+
valueSent.current = value;
|
|
24
66
|
onValue?.(value);
|
|
25
|
-
setValueInput(
|
|
67
|
+
setValueInput(textInput);
|
|
26
68
|
formControl?.setValue(value);
|
|
27
69
|
}, [formControl, onValue, type, decimals]);
|
|
70
|
+
const onChangeInput = useCallback((event) => {
|
|
71
|
+
applyInput(event.target);
|
|
72
|
+
}, [applyInput]);
|
|
73
|
+
const onCompositionStart = useCallback(() => {
|
|
74
|
+
composing.current = true;
|
|
75
|
+
}, []);
|
|
76
|
+
const onCompositionEnd = useCallback((event) => {
|
|
77
|
+
composing.current = false;
|
|
78
|
+
applyInput(event.currentTarget);
|
|
79
|
+
}, [applyInput]);
|
|
28
80
|
const onKeyDownInput = useCallback((event) => {
|
|
29
81
|
onKeyDown?.(event);
|
|
30
82
|
if (event.key === 'Enter') {
|
|
@@ -48,7 +100,7 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
|
|
|
48
100
|
disabled: formControl?.disabled || disabled,
|
|
49
101
|
focused: formControl?.focused ?? focused
|
|
50
102
|
});
|
|
51
|
-
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
|
|
103
|
+
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
|
|
52
104
|
}
|
|
53
105
|
export const RlsInput = memo(RlsInputComponent);
|
|
54
106
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.9.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
"@rolster/dates": "^4.1.7",
|
|
44
44
|
"@rolster/i18n": "^3.1.4",
|
|
45
45
|
"@rolster/react": "^19.0.1",
|
|
46
|
-
"@rolster/react-forms": "^19.
|
|
46
|
+
"@rolster/react-forms": "^19.6.0",
|
|
47
47
|
"@rolster/strings": "^3.1.2",
|
|
48
48
|
"react-dom": "^19.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@eslint/js": "^10.0.1",
|
|
52
52
|
"@rolster/rollup": "^2.2.0",
|
|
53
|
-
"@rolster/styles-foundations": "^3.5.
|
|
53
|
+
"@rolster/styles-foundations": "^3.5.24",
|
|
54
54
|
"@rolster/types": "^1.1.1",
|
|
55
55
|
"@types/react": "^19.0.0",
|
|
56
56
|
"@types/react-dom": "^19.0.0",
|
package/readme.md
CHANGED
|
@@ -82,6 +82,17 @@ createRoot(document.getElementById('root')!).render(
|
|
|
82
82
|
|
|
83
83
|
Field components are driven by `@rolster/react-forms`: the `formControl` prop takes a `ReactControl` created with `useInputControl` or `useFormControl`, and the field renders the error of the control through `RlsMessageFormError`. Those messages are translated with `@rolster/i18n` and can be extended with `setErrorsI18n`.
|
|
84
84
|
|
|
85
|
+
`RlsInput`, `RlsAreaText` and the fields built over them honour the `formatter` and `formatOn` options of the control. While the user types (or pastes) they apply the formatter before writing the value, keep the caret in place when the text length changes, revert characters the formatter rejects even when the control value does not change, and wait for the end of an IME composition before formatting. With `formatOn: 'blur'` the raw text is kept until the field loses focus and the control formats it.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
const name = useInputControl({
|
|
89
|
+
value: '',
|
|
90
|
+
formatter: (value: string) => value.toUpperCase()
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
<RlsFieldText formControl={name}>Nombre completo</RlsFieldText>;
|
|
94
|
+
```
|
|
95
|
+
|
|
85
96
|
Components that display a list of options (`RlsFieldSelect`, `RlsFieldList`, `RlsFieldAutocomplete` and the `RlsChooser*` family) receive their `suggestions` as elements of `@rolster/components`, usually instances of `RolsterListElement` or `RolsterAutocompleteElement`, or of a subclass that overrides `title`, `description` and `compareTo`.
|
|
86
97
|
|
|
87
98
|
## Features
|