@rolster/react-components 19.7.13 → 19.8.16
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/LICENSE +21 -21
- package/dist/cjs/index.cjs +791 -542
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/es/index.mjs +788 -545
- package/dist/es/index.mjs.map +1 -1
- package/dist/esm/components/atoms/Label/Label.js.map +1 -1
- package/dist/esm/components/molecules/Content/Content.js.map +1 -1
- package/dist/esm/components/molecules/FieldListSuggestions/FieldListSuggestions.d.ts +4 -1
- package/dist/esm/components/molecules/FieldListSuggestions/FieldListSuggestions.js +7 -2
- package/dist/esm/components/molecules/FieldListSuggestions/FieldListSuggestions.js.map +1 -1
- package/dist/esm/components/molecules/FieldListSuggestions/SuggestionsPortalController.d.ts +8 -0
- package/dist/esm/components/molecules/FieldListSuggestions/SuggestionsPortalController.js +84 -0
- package/dist/esm/components/molecules/FieldListSuggestions/SuggestionsPortalController.js.map +1 -0
- package/dist/esm/components/organisms/ChooserAutocomplete/ChooserAutocomplete.d.ts +36 -0
- package/dist/esm/components/organisms/ChooserAutocomplete/ChooserAutocomplete.js +87 -0
- package/dist/esm/components/organisms/ChooserAutocomplete/ChooserAutocomplete.js.map +1 -0
- package/dist/esm/components/organisms/ChooserList/ChooserList.d.ts +27 -0
- package/dist/esm/components/organisms/ChooserList/ChooserList.js +44 -0
- package/dist/esm/components/organisms/ChooserList/ChooserList.js.map +1 -0
- package/dist/esm/components/organisms/ChooserSelect/ChooserSelect.d.ts +31 -0
- package/dist/esm/components/organisms/ChooserSelect/ChooserSelect.js +38 -0
- package/dist/esm/components/organisms/ChooserSelect/ChooserSelect.js.map +1 -0
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/FieldList/FieldList.js +1 -1
- package/dist/esm/components/organisms/FieldList/FieldList.js.map +1 -1
- package/dist/esm/components/organisms/FieldList/FieldListController.d.ts +1 -0
- package/dist/esm/components/organisms/FieldList/FieldListController.js +4 -1
- package/dist/esm/components/organisms/FieldList/FieldListController.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
- package/dist/esm/components/organisms/ImageEditor/ImageEditor.js.map +1 -1
- package/dist/esm/controllers/DropdownController.js.map +1 -1
- package/dist/esm/controllers/ListController.d.ts +1 -0
- package/dist/esm/controllers/ListController.js +31 -25
- package/dist/esm/controllers/ListController.js.map +1 -1
- package/dist/esm/controllers/RelocationOnComponentController.d.ts +4 -4
- package/dist/esm/controllers/RelocationOnComponentController.js +34 -32
- package/dist/esm/controllers/RelocationOnComponentController.js.map +1 -1
- package/dist/esm/controllers/ResizeController.js +5 -7
- package/dist/esm/controllers/ResizeController.js.map +1 -1
- package/dist/esm/definitions.d.ts +1 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAgB;IAC7D,OAAO,CACL,eAAM,SAAS,EAAC,WAAW,eAAY,QAAQ,YAC5C,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Content/Content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,mBAAmB,CAAC,
|
|
1
|
+
{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Content/Content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAgB;IAC3E,OAAO,CACL,cACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,wBAAwB,eACvB,QAAQ,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC"}
|
|
@@ -28,10 +28,13 @@ interface FieldListSuggestionsProps<E = any> extends PropsWithRlsTheme {
|
|
|
28
28
|
action?: FieldListAction;
|
|
29
29
|
disabled?: boolean;
|
|
30
30
|
higher?: boolean;
|
|
31
|
+
onHiddenAnchor?: () => void;
|
|
32
|
+
refAnchor?: RefObject<HTMLElement | null>;
|
|
31
33
|
refList?: RefObject<HTMLUListElement | null>;
|
|
34
|
+
refSuggestions?: RefObject<HTMLDivElement | null>;
|
|
32
35
|
renderEmpty?: () => ReactNode;
|
|
33
36
|
searchControl?: FieldListSearchControl;
|
|
34
37
|
}
|
|
35
|
-
declare function RlsFieldListSuggestionsComponent<E = any>({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }: FieldListSuggestionsProps<E>): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
declare function RlsFieldListSuggestionsComponent<E = any>({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }: FieldListSuggestionsProps<E>): import("react/jsx-runtime").JSX.Element;
|
|
36
39
|
export declare const RlsFieldListSuggestions: typeof RlsFieldListSuggestionsComponent;
|
|
37
40
|
export {};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { i18nSubscribe } from '@rolster/i18n';
|
|
3
3
|
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
4
5
|
import { renderClassStatus } from '../../../helpers/css';
|
|
5
6
|
import { reactI18n } from '../../../i18n';
|
|
6
7
|
import { RlsIcon } from '../../atoms/Icon/Icon';
|
|
7
8
|
import { RlsProgressBar } from '../../atoms/ProgressBar/ProgressBar';
|
|
9
|
+
import { useSuggestionsPortalController } from './SuggestionsPortalController';
|
|
8
10
|
function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
|
|
9
11
|
const onClick = useMemo(() => {
|
|
10
12
|
return onClickElement(element);
|
|
@@ -14,7 +16,8 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
|
|
|
14
16
|
}, [element, onKeydownElement]);
|
|
15
17
|
return (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
|
|
16
18
|
}
|
|
17
|
-
function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
|
|
19
|
+
function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onHiddenAnchor, onKeydownElement, refAnchor, refList, refSuggestions, rlsTheme }) {
|
|
20
|
+
const portal = useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor);
|
|
18
21
|
const [labels, setLabels] = useState({
|
|
19
22
|
listEmptyDescription: reactI18n('listEmptyDescription'),
|
|
20
23
|
listEmptyTitle: reactI18n('listEmptyTitle')
|
|
@@ -30,6 +33,7 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
|
|
|
30
33
|
const className = renderClassStatus('rls-field-list__suggestions', {
|
|
31
34
|
disabled,
|
|
32
35
|
higher,
|
|
36
|
+
portal: portal.active,
|
|
33
37
|
visible
|
|
34
38
|
});
|
|
35
39
|
const onChangePattern = useCallback((event) => {
|
|
@@ -42,7 +46,8 @@ function RlsFieldListSuggestionsComponent({ elements, action, disabled, higher,
|
|
|
42
46
|
}
|
|
43
47
|
}, [action?.onClick, action?.keepOpen, onClickBackdrop]);
|
|
44
48
|
const searching = searchControl?.searching ?? false;
|
|
45
|
-
|
|
49
|
+
const suggestions = (_jsxs("div", { ref: refSuggestions, className: className, style: portal.active ? portal.style : undefined, "rls-theme": rlsTheme ?? portal.theme, children: [_jsxs("div", { className: "rls-field-list__suggestions__body", children: [_jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (_jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: _jsx(RlsIcon, { value: "search" }) }))] })), searching && _jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (_jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (_jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (_jsxs("div", { className: "rls-field-list__empty__description", children: [_jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), _jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (_jsx("div", { className: "rls-field-list__action", children: _jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && _jsx(RlsIcon, { value: action.icon }), _jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), _jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
|
|
50
|
+
return portal.active ? createPortal(suggestions, document.body) : suggestions;
|
|
46
51
|
}
|
|
47
52
|
export const RlsFieldListSuggestions = memo(RlsFieldListSuggestionsComponent);
|
|
48
53
|
//# sourceMappingURL=FieldListSuggestions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldListSuggestions.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldListSuggestions/FieldListSuggestions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAIL,IAAI,EAIJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldListSuggestions.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldListSuggestions/FieldListSuggestions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSProperties, RefObject } from 'react';
|
|
2
|
+
import { RlsTheme } from '../../../types';
|
|
3
|
+
export interface SuggestionsPortalController {
|
|
4
|
+
active: boolean;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
theme?: RlsTheme;
|
|
7
|
+
}
|
|
8
|
+
export declare function useSuggestionsPortalController(visible: boolean, refAnchor?: RefObject<HTMLElement | null>, onHiddenAnchor?: () => void): SuggestionsPortalController;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { useEffect, useEffectEvent, useState } from 'react';
|
|
2
|
+
function getScrollableAncestors(element) {
|
|
3
|
+
const ancestors = [];
|
|
4
|
+
let parent = element.parentElement;
|
|
5
|
+
while (parent && parent !== document.body) {
|
|
6
|
+
const { overflow, overflowX, overflowY } = getComputedStyle(parent);
|
|
7
|
+
if (/auto|scroll|hidden/.test(`${overflow}${overflowX}${overflowY}`)) {
|
|
8
|
+
ancestors.push(parent);
|
|
9
|
+
}
|
|
10
|
+
parent = parent.parentElement;
|
|
11
|
+
}
|
|
12
|
+
return ancestors;
|
|
13
|
+
}
|
|
14
|
+
function anchorIsVisible(rect, scrollables) {
|
|
15
|
+
if (!rect.width || !rect.height) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
let top = 0;
|
|
19
|
+
let left = 0;
|
|
20
|
+
let bottom = window.innerHeight;
|
|
21
|
+
let right = window.innerWidth;
|
|
22
|
+
for (const scrollable of scrollables) {
|
|
23
|
+
const scrollableRect = scrollable.getBoundingClientRect();
|
|
24
|
+
top = Math.max(top, scrollableRect.top);
|
|
25
|
+
left = Math.max(left, scrollableRect.left);
|
|
26
|
+
bottom = Math.min(bottom, scrollableRect.bottom);
|
|
27
|
+
right = Math.min(right, scrollableRect.right);
|
|
28
|
+
}
|
|
29
|
+
return (rect.bottom > top &&
|
|
30
|
+
rect.top < bottom &&
|
|
31
|
+
rect.right > left &&
|
|
32
|
+
rect.left < right);
|
|
33
|
+
}
|
|
34
|
+
export function useSuggestionsPortalController(visible, refAnchor, onHiddenAnchor) {
|
|
35
|
+
const [mounted, setMounted] = useState(false);
|
|
36
|
+
const [style, setStyle] = useState();
|
|
37
|
+
const [theme, setTheme] = useState();
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
setMounted(true);
|
|
40
|
+
}, []);
|
|
41
|
+
const onAnchorHidden = useEffectEvent(() => {
|
|
42
|
+
onHiddenAnchor?.();
|
|
43
|
+
});
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const anchor = refAnchor?.current;
|
|
46
|
+
if (!mounted || !visible || !anchor) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
setTheme((anchor.closest('[rls-theme]')?.getAttribute('rls-theme') ??
|
|
50
|
+
undefined));
|
|
51
|
+
const scrollables = getScrollableAncestors(anchor);
|
|
52
|
+
let frame = 0;
|
|
53
|
+
function reposition() {
|
|
54
|
+
if (!anchor) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const rect = anchor.getBoundingClientRect();
|
|
58
|
+
if (!anchorIsVisible(rect, scrollables)) {
|
|
59
|
+
onAnchorHidden();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setStyle({
|
|
63
|
+
'--pvt-portal-top': `${rect.bottom}px`,
|
|
64
|
+
'--pvt-portal-bottom': `${window.innerHeight - rect.top}px`,
|
|
65
|
+
'--pvt-portal-left': `${rect.left}px`,
|
|
66
|
+
'--pvt-portal-width': `${rect.width}px`
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function requestReposition() {
|
|
70
|
+
cancelAnimationFrame(frame);
|
|
71
|
+
frame = requestAnimationFrame(reposition);
|
|
72
|
+
}
|
|
73
|
+
reposition();
|
|
74
|
+
window.addEventListener('scroll', requestReposition, true);
|
|
75
|
+
window.addEventListener('resize', requestReposition);
|
|
76
|
+
return () => {
|
|
77
|
+
cancelAnimationFrame(frame);
|
|
78
|
+
window.removeEventListener('scroll', requestReposition, true);
|
|
79
|
+
window.removeEventListener('resize', requestReposition);
|
|
80
|
+
};
|
|
81
|
+
}, [mounted, visible, refAnchor]);
|
|
82
|
+
return { active: mounted && !!refAnchor, style, theme };
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=SuggestionsPortalController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SuggestionsPortalController.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldListSuggestions/SuggestionsPortalController.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { AbstractAutocompleteElement as Element, AutocompleteElement } from '@rolster/components';
|
|
2
|
+
import { ReactControl } from '@rolster/react-forms';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { PropsWithClassName, PropsWithRlsTheme } from '../../definitions';
|
|
5
|
+
import { FieldListAction } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
6
|
+
export interface ChooserAutocompleteState<T = any> {
|
|
7
|
+
description: string;
|
|
8
|
+
listIsVisible: boolean;
|
|
9
|
+
pattern: string;
|
|
10
|
+
value?: T;
|
|
11
|
+
}
|
|
12
|
+
interface ChooserAutocompleteProps<T = any, E extends Element<T> = Element<T>, K = string> extends PropsWithRlsTheme, PropsWithClassName {
|
|
13
|
+
suggestions: E[];
|
|
14
|
+
action?: FieldListAction;
|
|
15
|
+
automatic?: boolean;
|
|
16
|
+
children?: ReactNode | ((state: ChooserAutocompleteState<T>) => ReactNode);
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
19
|
+
identifier?: string;
|
|
20
|
+
keepOpen?: boolean;
|
|
21
|
+
onInput?: (value: string) => void;
|
|
22
|
+
onSearch?: (pattern: string) => void;
|
|
23
|
+
onSelect?: (value: NonNullable<T>) => void;
|
|
24
|
+
onValue?: ((value?: T) => void) | ((value: T) => void);
|
|
25
|
+
reference?: (value: T) => K;
|
|
26
|
+
searching?: boolean;
|
|
27
|
+
value?: T;
|
|
28
|
+
}
|
|
29
|
+
interface ChooserAutocompleteTemplateProps<T = any, E extends Element<T> = Element<T>, K = string> extends ChooserAutocompleteProps<T, E, K> {
|
|
30
|
+
render: (element: E) => ReactNode;
|
|
31
|
+
}
|
|
32
|
+
declare function RlsChooserAutocompleteTemplateComponent<T = any, E extends Element<T> = Element<T>, K = string>(props: ChooserAutocompleteTemplateProps<T, E, K>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const RlsChooserAutocompleteTemplate: typeof RlsChooserAutocompleteTemplateComponent;
|
|
34
|
+
declare function RlsChooserAutocompleteComponent<T = any>(props: ChooserAutocompleteProps<T, AutocompleteElement<T>>): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export declare const RlsChooserAutocomplete: typeof RlsChooserAutocompleteComponent;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { i18nSubscribe } from '@rolster/i18n';
|
|
3
|
+
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { renderClassStatus } from '../../../helpers/css';
|
|
5
|
+
import { reactI18n } from '../../../i18n';
|
|
6
|
+
import { RlsBallot } from '../../molecules/Ballot/Ballot';
|
|
7
|
+
import { RlsFieldListSuggestions } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
8
|
+
import { useFieldAutocomplete } from '../FieldAutocomplete/FieldAutocompleteController';
|
|
9
|
+
function RlsChooserAutocompleteTemplateComponent(props) {
|
|
10
|
+
const autocomplete = useFieldAutocomplete(props);
|
|
11
|
+
const { render, action, children, formControl, onSearch, rlsTheme, searching } = props;
|
|
12
|
+
const [listInputPlaceholder, setListInputPlaceholder] = useState(reactI18n('listInputPlaceholder'));
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
return i18nSubscribe(() => {
|
|
15
|
+
setListInputPlaceholder(reactI18n('listInputPlaceholder'));
|
|
16
|
+
});
|
|
17
|
+
}, []);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
props.onInput?.(autocomplete.pattern);
|
|
20
|
+
}, [autocomplete.pattern, props.onInput]);
|
|
21
|
+
const disabled = useMemo(() => {
|
|
22
|
+
return formControl?.disabled || props.disabled;
|
|
23
|
+
}, [formControl?.disabled, props.disabled]);
|
|
24
|
+
const className = renderClassStatus('rls-chooser', {
|
|
25
|
+
focused: autocomplete.focused && !disabled,
|
|
26
|
+
visible: autocomplete.listIsVisible,
|
|
27
|
+
disabled
|
|
28
|
+
}, `rls-chooser-autocomplete ${props.className ?? ''}`);
|
|
29
|
+
const onClickPattern = useCallback(() => {
|
|
30
|
+
onSearch?.(autocomplete.pattern);
|
|
31
|
+
}, [onSearch, autocomplete.pattern]);
|
|
32
|
+
const onKeyDownPattern = useCallback((event) => {
|
|
33
|
+
if (event.key === 'Enter') {
|
|
34
|
+
onSearch?.(autocomplete.pattern);
|
|
35
|
+
}
|
|
36
|
+
autocomplete.onKeydownInput(event);
|
|
37
|
+
}, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
|
|
38
|
+
const onKeydownTrigger = useCallback((event) => {
|
|
39
|
+
switch (event.code) {
|
|
40
|
+
case 'Space':
|
|
41
|
+
case 'Enter':
|
|
42
|
+
event.preventDefault();
|
|
43
|
+
autocomplete.onClickControl();
|
|
44
|
+
break;
|
|
45
|
+
case 'Escape':
|
|
46
|
+
autocomplete.onClickBackdrop();
|
|
47
|
+
break;
|
|
48
|
+
}
|
|
49
|
+
}, [autocomplete.onClickControl, autocomplete.onClickBackdrop]);
|
|
50
|
+
const searchControl = useMemo(() => ({
|
|
51
|
+
pattern: autocomplete.pattern,
|
|
52
|
+
placeholder: listInputPlaceholder,
|
|
53
|
+
searching,
|
|
54
|
+
refInput: autocomplete.refInput,
|
|
55
|
+
onChange: autocomplete.setPattern,
|
|
56
|
+
onFocus: autocomplete.onFocusInput,
|
|
57
|
+
onBlur: autocomplete.onBlurInput,
|
|
58
|
+
onKeyDown: onKeyDownPattern,
|
|
59
|
+
onSearch: onSearch ? onClickPattern : undefined
|
|
60
|
+
}), [
|
|
61
|
+
autocomplete.pattern,
|
|
62
|
+
autocomplete.refInput,
|
|
63
|
+
autocomplete.setPattern,
|
|
64
|
+
autocomplete.onFocusInput,
|
|
65
|
+
autocomplete.onBlurInput,
|
|
66
|
+
listInputPlaceholder,
|
|
67
|
+
searching,
|
|
68
|
+
onKeyDownPattern,
|
|
69
|
+
onClickPattern,
|
|
70
|
+
onSearch
|
|
71
|
+
]);
|
|
72
|
+
return (_jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": autocomplete.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : autocomplete.onClickControl, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
|
|
73
|
+
? children({
|
|
74
|
+
description: autocomplete.value,
|
|
75
|
+
listIsVisible: autocomplete.listIsVisible,
|
|
76
|
+
pattern: autocomplete.pattern,
|
|
77
|
+
value: formControl?.value ?? props.value
|
|
78
|
+
})
|
|
79
|
+
: children }), _jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
|
|
80
|
+
}
|
|
81
|
+
export const RlsChooserAutocompleteTemplate = memo(RlsChooserAutocompleteTemplateComponent);
|
|
82
|
+
function RlsChooserAutocompleteComponent(props) {
|
|
83
|
+
const render = useCallback((element) => (_jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })), []);
|
|
84
|
+
return _jsx(RlsChooserAutocompleteTemplate, { ...props, render: render });
|
|
85
|
+
}
|
|
86
|
+
export const RlsChooserAutocomplete = memo(RlsChooserAutocompleteComponent);
|
|
87
|
+
//# sourceMappingURL=ChooserAutocomplete.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChooserAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/ChooserAutocomplete/ChooserAutocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { AbstractListElement as Element, ListElement } from '@rolster/components';
|
|
2
|
+
import { ReactControl } from '@rolster/react-forms';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { PropsWithClassName, PropsWithRlsTheme } from '../../definitions';
|
|
5
|
+
import { FieldListAction } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
6
|
+
export interface ChooserListState<T = any, E extends Element<T> = Element<T>> {
|
|
7
|
+
listIsVisible: boolean;
|
|
8
|
+
selected: E[];
|
|
9
|
+
}
|
|
10
|
+
interface ChooserListProps<T = any, E extends Element<T> = Element<T>> extends PropsWithRlsTheme, PropsWithClassName {
|
|
11
|
+
suggestions: E[];
|
|
12
|
+
action?: FieldListAction;
|
|
13
|
+
children?: ReactNode | ((state: ChooserListState<T, E>) => ReactNode);
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
formControl?: ReactControl<HTMLElement, T[]> | ReactControl<HTMLElement, NonNullable<T>[]> | ReactControl<HTMLElement, T[] | undefined>;
|
|
16
|
+
identifier?: string;
|
|
17
|
+
onValue?: (value: T[]) => void;
|
|
18
|
+
value?: T[];
|
|
19
|
+
}
|
|
20
|
+
interface ChooserListTemplateProps<T = any, E extends Element<T> = Element<T>> extends ChooserListProps<T, E> {
|
|
21
|
+
render: (element: E) => ReactNode;
|
|
22
|
+
}
|
|
23
|
+
declare function RlsChooserListTemplateComponent<T = any, E extends Element<T> = Element<T>>(props: ChooserListTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare const RlsChooserListTemplate: typeof RlsChooserListTemplateComponent;
|
|
25
|
+
declare function RlsChooserListComponent<T = any>(props: ChooserListProps<T, ListElement<T>>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const RlsChooserList: typeof RlsChooserListComponent;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useCallback, useMemo } from 'react';
|
|
3
|
+
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
+
import { RlsCheckBox } from '../../atoms/CheckBox/CheckBox';
|
|
5
|
+
import { RlsBallot } from '../../molecules/Ballot/Ballot';
|
|
6
|
+
import { RlsFieldListSuggestions } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
7
|
+
import { useFieldList } from '../FieldList/FieldListController';
|
|
8
|
+
function RlsChooserListTemplateComponent(props) {
|
|
9
|
+
const fieldList = useFieldList(props);
|
|
10
|
+
const { render, suggestions, action, children, formControl, rlsTheme } = props;
|
|
11
|
+
const disabled = useMemo(() => {
|
|
12
|
+
return formControl?.disabled || props.disabled;
|
|
13
|
+
}, [formControl?.disabled, props.disabled]);
|
|
14
|
+
const className = renderClassStatus('rls-chooser', {
|
|
15
|
+
visible: fieldList.listIsVisible,
|
|
16
|
+
disabled
|
|
17
|
+
}, `rls-chooser-list ${props.className ?? ''}`);
|
|
18
|
+
const onKeydownTrigger = useCallback((event) => {
|
|
19
|
+
switch (event.code) {
|
|
20
|
+
case 'Space':
|
|
21
|
+
case 'Enter':
|
|
22
|
+
event.preventDefault();
|
|
23
|
+
fieldList.onClickAction();
|
|
24
|
+
break;
|
|
25
|
+
case 'Escape':
|
|
26
|
+
fieldList.onClickBackdrop();
|
|
27
|
+
break;
|
|
28
|
+
}
|
|
29
|
+
}, [fieldList.onClickAction, fieldList.onClickBackdrop]);
|
|
30
|
+
const renderWithCheckbox = useCallback((element) => (_jsxs("div", { className: "rls-field-list__multi__element", children: [_jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
|
|
31
|
+
return (_jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": fieldList.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : fieldList.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, children: typeof children === 'function'
|
|
32
|
+
? children({
|
|
33
|
+
listIsVisible: fieldList.listIsVisible,
|
|
34
|
+
selected: fieldList.selected
|
|
35
|
+
})
|
|
36
|
+
: children }), _jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
|
|
37
|
+
}
|
|
38
|
+
export const RlsChooserListTemplate = memo(RlsChooserListTemplateComponent);
|
|
39
|
+
function RlsChooserListComponent(props) {
|
|
40
|
+
const render = useCallback((element) => (_jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })), []);
|
|
41
|
+
return _jsx(RlsChooserListTemplate, { ...props, render: render });
|
|
42
|
+
}
|
|
43
|
+
export const RlsChooserList = memo(RlsChooserListComponent);
|
|
44
|
+
//# sourceMappingURL=ChooserList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChooserList.js","sourceRoot":"","sources":["../../../../../src/components/organisms/ChooserList/ChooserList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { AbstractListElement as Element, ListElement } from '@rolster/components';
|
|
2
|
+
import { ReactControl } from '@rolster/react-forms';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { PropsWithClassName, PropsWithRlsTheme } from '../../definitions';
|
|
5
|
+
import { FieldListAction } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
6
|
+
export interface ChooserSelectState<T = any> {
|
|
7
|
+
description: string;
|
|
8
|
+
listIsVisible: boolean;
|
|
9
|
+
value?: T;
|
|
10
|
+
}
|
|
11
|
+
interface ChooserSelectProps<T = any, E extends Element<T> = Element<T>, K = string> extends PropsWithRlsTheme, PropsWithClassName {
|
|
12
|
+
suggestions: E[];
|
|
13
|
+
action?: FieldListAction;
|
|
14
|
+
automatic?: boolean;
|
|
15
|
+
children?: ReactNode | ((state: ChooserSelectState<T>) => ReactNode);
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
18
|
+
identifier?: string;
|
|
19
|
+
onSelect?: (value: NonNullable<T>) => void;
|
|
20
|
+
onValue?: ((value?: T) => void) | ((value: T) => void);
|
|
21
|
+
reference?: (value: T) => K;
|
|
22
|
+
value?: T;
|
|
23
|
+
}
|
|
24
|
+
interface ChooserSelectTemplateProps<T = any, E extends Element<T> = Element<T>, K = string> extends ChooserSelectProps<T, E, K> {
|
|
25
|
+
render: (element: E) => ReactNode;
|
|
26
|
+
}
|
|
27
|
+
declare function RlsChooserSelectTemplateComponent<T = any, E extends ListElement<T> = ListElement<T>, K = string>(props: ChooserSelectTemplateProps<T, E, K>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare const RlsChooserSelectTemplate: typeof RlsChooserSelectTemplateComponent;
|
|
29
|
+
declare function RlsChooserSelectComponent<T = any>(props: ChooserSelectProps<T, ListElement<T>>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const RlsChooserSelect: typeof RlsChooserSelectComponent;
|
|
31
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useCallback, useMemo } from 'react';
|
|
3
|
+
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
+
import { RlsBallot } from '../../molecules/Ballot/Ballot';
|
|
5
|
+
import { RlsFieldListSuggestions } from '../../molecules/FieldListSuggestions/FieldListSuggestions';
|
|
6
|
+
import { useFieldSelect } from '../FieldSelect/FieldSelectController';
|
|
7
|
+
function RlsChooserSelectTemplateComponent(props) {
|
|
8
|
+
const select = useFieldSelect({ ...props, unremovable: true });
|
|
9
|
+
const { render, suggestions, action, children, formControl, rlsTheme } = props;
|
|
10
|
+
const disabled = useMemo(() => {
|
|
11
|
+
return formControl?.disabled || props.disabled;
|
|
12
|
+
}, [formControl?.disabled, props.disabled]);
|
|
13
|
+
const className = renderClassStatus('rls-chooser', {
|
|
14
|
+
focused: select.focused && !disabled,
|
|
15
|
+
visible: select.listIsVisible,
|
|
16
|
+
disabled
|
|
17
|
+
}, `rls-chooser-select ${props.className ?? ''}`);
|
|
18
|
+
const onKeydownTrigger = useCallback((event) => {
|
|
19
|
+
if (event.code === 'Space') {
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
}
|
|
22
|
+
select.onKeydownInput(event);
|
|
23
|
+
}, [select.onKeydownInput]);
|
|
24
|
+
return (_jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-chooser__trigger", role: "combobox", "aria-expanded": select.listIsVisible, "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: disabled ? undefined : select.onClickAction, onKeyDown: disabled ? undefined : onKeydownTrigger, onFocus: select.onFocusInput, onBlur: select.onBlurInput, children: typeof children === 'function'
|
|
25
|
+
? children({
|
|
26
|
+
description: select.value,
|
|
27
|
+
listIsVisible: select.listIsVisible,
|
|
28
|
+
value: formControl?.value ?? props.value
|
|
29
|
+
})
|
|
30
|
+
: children }), _jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refAnchor: select.refContent, refList: select.refList, refSuggestions: select.refSuggestions, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop, onHiddenAnchor: select.onClickBackdrop })] }));
|
|
31
|
+
}
|
|
32
|
+
export const RlsChooserSelectTemplate = memo(RlsChooserSelectTemplateComponent);
|
|
33
|
+
function RlsChooserSelectComponent(props) {
|
|
34
|
+
const render = useCallback((element) => (_jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })), []);
|
|
35
|
+
return _jsx(RlsChooserSelectTemplate, { ...props, render: render });
|
|
36
|
+
}
|
|
37
|
+
export const RlsChooserSelect = memo(RlsChooserSelectComponent);
|
|
38
|
+
//# sourceMappingURL=ChooserSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChooserSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/ChooserSelect/ChooserSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -61,7 +61,7 @@ function RlsFieldAutocompleteTemplateComponent(props) {
|
|
|
61
61
|
onClickPattern,
|
|
62
62
|
onSearch
|
|
63
63
|
]);
|
|
64
|
-
return (_jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { 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 }), !props.readOnly && !disabled && (_jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
|
|
64
|
+
return (_jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { 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 }), !props.readOnly && !disabled && (_jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refAnchor: autocomplete.refContent, refList: autocomplete.refList, refSuggestions: autocomplete.refSuggestions, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop, onHiddenAnchor: autocomplete.onClickBackdrop })] }));
|
|
65
65
|
}
|
|
66
66
|
export const RlsFieldAutocompleteTemplate = memo(RlsFieldAutocompleteTemplateComponent);
|
|
67
67
|
function RlsFieldAutocompleteComponent(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
|
|
|
19
19
|
readonly: props.readOnly
|
|
20
20
|
}, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
|
|
21
21
|
const renderWithCheckbox = useCallback((element) => (_jsxs("div", { className: "rls-field-list__multi__element", children: [_jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
|
|
22
|
-
return (_jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (_jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (_jsxs("div", { className: "rls-field-list__multi__chip", children: [_jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (_jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: _jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (_jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
|
|
22
|
+
return (_jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (_jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (_jsxs("div", { className: "rls-field-list__multi__chip", children: [_jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (_jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: _jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (_jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refAnchor: fieldList.refContent, refList: fieldList.refList, refSuggestions: fieldList.refSuggestions, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop, onHiddenAnchor: fieldList.onClickBackdrop })] }));
|
|
23
23
|
}
|
|
24
24
|
function RlsFieldListTemplateComponent(props) {
|
|
25
25
|
const fieldList = useFieldList(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldList.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldList/FieldList.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"FieldList.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldList/FieldList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ export interface FieldListControl<T = any, E extends Element<T> = Element<T>> {
|
|
|
13
13
|
onRemoveElement: (element: E) => (event: MouseEvent) => void;
|
|
14
14
|
refContent: React.RefObject<HTMLDivElement | null>;
|
|
15
15
|
refList: React.RefObject<HTMLUListElement | null>;
|
|
16
|
+
refSuggestions: React.RefObject<HTMLDivElement | null>;
|
|
16
17
|
selected: E[];
|
|
17
18
|
}
|
|
18
19
|
interface FieldListControllerProps<T = any, E extends Element<T> = Element<T>> {
|
|
@@ -29,6 +29,7 @@ export function useFieldList(props) {
|
|
|
29
29
|
const { suggestions, disabled } = props;
|
|
30
30
|
const refContent = useRef(null);
|
|
31
31
|
const refList = useRef(null);
|
|
32
|
+
const refSuggestions = useRef(null);
|
|
32
33
|
const formControl = props.formControl;
|
|
33
34
|
const [state, setState] = useState({
|
|
34
35
|
higher: false,
|
|
@@ -37,7 +38,8 @@ export function useFieldList(props) {
|
|
|
37
38
|
const [selected, setSelected] = useState([]);
|
|
38
39
|
useEffect(() => {
|
|
39
40
|
function onCloseSuggestions({ target }) {
|
|
40
|
-
if (!refContent?.current?.contains(target)
|
|
41
|
+
if (!refContent?.current?.contains(target) &&
|
|
42
|
+
!refSuggestions?.current?.contains(target)) {
|
|
41
43
|
setState((state) => ({ ...state, listIsVisible: false }));
|
|
42
44
|
}
|
|
43
45
|
}
|
|
@@ -123,6 +125,7 @@ export function useFieldList(props) {
|
|
|
123
125
|
selected,
|
|
124
126
|
refContent,
|
|
125
127
|
refList,
|
|
128
|
+
refSuggestions,
|
|
126
129
|
isSelected,
|
|
127
130
|
onClickAction,
|
|
128
131
|
onClickBackdrop,
|