@rolster/react-components 18.21.33 → 18.21.34
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.js +21 -10
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +22 -11
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Amount/Amount.d.ts +1 -1
- package/dist/esm/components/atoms/Input/Input.d.ts +2 -1
- package/dist/esm/components/atoms/Input/Input.js +14 -6
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputMoney/InputMoney.d.ts +1 -1
- package/dist/esm/components/molecules/FieldMoney/FieldMoney.d.ts +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +9 -5
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.d.ts +1 -0
- package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js +37 -0
- package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js.map +1 -0
- package/package.json +2 -2
|
@@ -3,7 +3,8 @@ import { RlsComponent } from '../../definitions';
|
|
|
3
3
|
import { InputProps as RolsterInputProps } from '../../types';
|
|
4
4
|
import './Input.css';
|
|
5
5
|
interface InputProps extends RolsterInputProps<any>, RlsComponent {
|
|
6
|
+
decimals?: number;
|
|
6
7
|
type?: HTMLInputTypeAttribute;
|
|
7
8
|
}
|
|
8
|
-
export declare function RlsInput({ children, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function RlsInput({ children, decimals, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export {};
|
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { floorDecimals } from '@rolster/commons';
|
|
3
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
4
|
import { renderClassStatus } from '../../../helpers';
|
|
4
5
|
import './Input.css';
|
|
5
|
-
export function RlsInput({ children, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
|
|
6
|
+
export function RlsInput({ children, decimals, disabled, formControl, identifier, onEnter, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
|
|
6
7
|
const valueInitial = formControl?.value ?? value ? String(value) : '';
|
|
7
8
|
const [valueInput, setValueInput] = useState(valueInitial);
|
|
8
9
|
const [focused, setFocused] = useState(false);
|
|
10
|
+
const isChangeInternal = useRef(false);
|
|
9
11
|
useEffect(() => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
if (!isChangeInternal.current) {
|
|
13
|
+
const control = formControl?.value ? String(formControl.value) : '';
|
|
14
|
+
valueInput !== control && setValueInput(control);
|
|
15
|
+
}
|
|
16
|
+
isChangeInternal.current = false;
|
|
12
17
|
}, [formControl?.value]);
|
|
13
18
|
const _onChange = useCallback((event) => {
|
|
14
19
|
const valueInput = event.target.value;
|
|
15
|
-
const value = type === 'number'
|
|
20
|
+
const value = type === 'number'
|
|
21
|
+
? floorDecimals(+valueInput, decimals || 0)
|
|
22
|
+
: valueInput;
|
|
23
|
+
isChangeInternal.current = true;
|
|
16
24
|
onValue && onValue(value);
|
|
17
25
|
setValueInput(valueInput);
|
|
18
26
|
formControl?.setValue(value);
|
|
19
|
-
}, [formControl, onValue]);
|
|
27
|
+
}, [formControl, onValue, type, decimals]);
|
|
20
28
|
const _onKeyDown = useCallback((event) => {
|
|
21
29
|
onKeyDown && onKeyDown(event);
|
|
22
30
|
event.key === 'Enter' && onEnter && onEnter();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { InputProps } from '../../types';
|
|
2
2
|
import './InputMoney.css';
|
|
3
3
|
interface InputMoneyProps extends InputProps<number> {
|
|
4
|
-
decimals?:
|
|
4
|
+
decimals?: number;
|
|
5
5
|
symbol?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare function RlsInputMoney(props: InputMoneyProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FieldBoxProps } from '../../types';
|
|
2
2
|
import './FieldMoney.css';
|
|
3
3
|
interface FieldMoneyProps extends FieldBoxProps<number> {
|
|
4
|
-
decimals?:
|
|
4
|
+
decimals?: number;
|
|
5
5
|
symbol?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare function RlsFieldMoney(props: FieldMoneyProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -25,17 +25,17 @@ export function RlsFieldAutocompleteTemplate(props) {
|
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
27
|
}, []);
|
|
28
|
-
const
|
|
28
|
+
const disabled = useMemo(() => {
|
|
29
29
|
return formControl?.disabled || props.disabled;
|
|
30
30
|
}, [formControl?.disabled, props.disabled]);
|
|
31
31
|
const className = useMemo(() => {
|
|
32
32
|
return renderClassStatus('rls-field-box', {
|
|
33
|
-
focused: autocomplete.focused && !
|
|
33
|
+
focused: autocomplete.focused && !disabled,
|
|
34
34
|
error: formControl?.wrong,
|
|
35
|
-
disabled
|
|
35
|
+
disabled,
|
|
36
36
|
selected: !!autocomplete.value
|
|
37
37
|
}, 'rls-field-list rls-field-autocomplete');
|
|
38
|
-
}, [formControl?.wrong, autocomplete.value, autocomplete.focused,
|
|
38
|
+
}, [formControl?.wrong, autocomplete.value, autocomplete.focused, disabled]);
|
|
39
39
|
const classNameList = useMemo(() => {
|
|
40
40
|
return renderClassStatus('rls-field-list__suggestions', {
|
|
41
41
|
higher: autocomplete.higher,
|
|
@@ -48,7 +48,11 @@ export function RlsFieldAutocompleteTemplate(props) {
|
|
|
48
48
|
const onClickPattern = useCallback(() => {
|
|
49
49
|
onSearch && onSearch(autocomplete.pattern);
|
|
50
50
|
}, [onSearch, autocomplete.pattern]);
|
|
51
|
-
|
|
51
|
+
const onKeyDownPattern = useCallback((event) => {
|
|
52
|
+
event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
|
|
53
|
+
autocomplete.onKeydownInput(event);
|
|
54
|
+
}, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
|
|
55
|
+
return (_jsxs("div", { id: props.identifier, ref: autocomplete.contentRef, className: className, "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), _jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: _jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsxs("div", { className: classNameList, children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__empty__description", children: [_jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), _jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
|
|
52
56
|
}
|
|
53
57
|
export function RlsFieldAutocomplete(props) {
|
|
54
58
|
const render = useCallback((element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })), []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function RlsVirtualScroll({ items, itemHeight, containerHeight }: any): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect } from 'react';
|
|
3
|
+
export function RlsVirtualScroll({ items, itemHeight, containerHeight }) {
|
|
4
|
+
const [visibleItems, setVisibleItems] = useState([]);
|
|
5
|
+
const containerRef = useRef(null);
|
|
6
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const calculateVisibleItems = () => {
|
|
9
|
+
if (!containerRef.current)
|
|
10
|
+
return;
|
|
11
|
+
const startIndex = Math.floor(scrollTop / itemHeight);
|
|
12
|
+
const endIndex = Math.min(items.length - 1, Math.floor((scrollTop + containerHeight) / itemHeight));
|
|
13
|
+
setVisibleItems(items.slice(startIndex, endIndex + 1));
|
|
14
|
+
};
|
|
15
|
+
calculateVisibleItems();
|
|
16
|
+
}, [scrollTop, items, itemHeight, containerHeight]);
|
|
17
|
+
const handleScroll = (e) => {
|
|
18
|
+
setScrollTop(e.currentTarget.scrollTop);
|
|
19
|
+
};
|
|
20
|
+
return (_jsx("div", { ref: containerRef, style: {
|
|
21
|
+
height: `${containerHeight}px`,
|
|
22
|
+
overflowY: 'auto',
|
|
23
|
+
position: 'relative'
|
|
24
|
+
}, onScroll: handleScroll, children: _jsx("div", { style: {
|
|
25
|
+
height: `${items.length * itemHeight}px`,
|
|
26
|
+
position: 'relative'
|
|
27
|
+
}, children: visibleItems.map((item, index) => {
|
|
28
|
+
const actualIndex = Math.floor(scrollTop / itemHeight) + index;
|
|
29
|
+
return (_jsx("div", { style: {
|
|
30
|
+
position: 'absolute',
|
|
31
|
+
top: `${actualIndex * itemHeight}px`,
|
|
32
|
+
height: `${itemHeight}px`,
|
|
33
|
+
width: '100%'
|
|
34
|
+
}, children: item }, actualIndex));
|
|
35
|
+
}) }) }));
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=VirtualScroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VirtualScroll.js","sourceRoot":"","sources":["../../../../../src/components/organisms/VirtualScroll/VirtualScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAE7D,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAO;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAElC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;YACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,KAAK,CAAC,MAAM,GAAG,CAAC,EAChB,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,eAAe,CAAC,GAAG,UAAU,CAAC,CACvD,CAAC;YAEF,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,CAAC,CAAU,EAAE,EAAE;QAClC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,eAAe,IAAI;YAC9B,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;SACrB,EACD,QAAQ,EAAE,YAAY,YAEtB,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,IAAI;gBACxC,QAAQ,EAAE,UAAU;aACrB,YAEA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,KAAK,CAAC;gBAC/D,OAAO,CACL,cAEE,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,GAAG,WAAW,GAAG,UAAU,IAAI;wBACpC,MAAM,EAAE,GAAG,UAAU,IAAI;wBACzB,KAAK,EAAE,MAAM;qBACd,YAEA,IAAI,IARA,WAAW,CASZ,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "18.21.
|
|
3
|
+
"version": "18.21.34",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"prepublishOnly": "npm run build"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@rolster/commons": "^2.3.
|
|
33
|
+
"@rolster/commons": "^2.3.18",
|
|
34
34
|
"@rolster/components": "^0.5.3",
|
|
35
35
|
"@rolster/dates": "^2.1.0",
|
|
36
36
|
"@rolster/forms": "^2.10.0",
|