@rolster/react-components 18.18.2 → 18.19.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.js +90 -101
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +90 -101
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +4 -3
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +7 -8
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.d.ts +5 -5
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js +8 -8
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.d.ts +4 -3
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +6 -11
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.d.ts +5 -5
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js +8 -8
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js.map +1 -1
- package/dist/esm/controllers/ListController.d.ts +4 -3
- package/dist/esm/controllers/ListController.js +58 -50
- package/dist/esm/controllers/ListController.js.map +1 -1
- package/dist/esm/definitions.d.ts +10 -0
- package/dist/esm/definitions.js +2 -0
- package/dist/esm/definitions.js.map +1 -0
- package/package.json +5 -7
|
@@ -3,7 +3,7 @@ import { ReactControl } from '@rolster/react-forms';
|
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { RlsComponent } from '../../definitions';
|
|
5
5
|
import './FieldAutocomplete.css';
|
|
6
|
-
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T
|
|
6
|
+
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>, K = string> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
automatic?: boolean;
|
|
9
9
|
disabled?: boolean;
|
|
@@ -13,13 +13,14 @@ interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>> ext
|
|
|
13
13
|
onSelect?: (value: NonNullable<T>) => void;
|
|
14
14
|
onValue?: ((value?: T) => void) | ((value: T) => void);
|
|
15
15
|
placeholder?: string;
|
|
16
|
+
reference?: (value: T) => K;
|
|
16
17
|
searching?: boolean;
|
|
17
18
|
value?: T;
|
|
18
19
|
}
|
|
19
|
-
interface FieldAutocompleteTemplateProps<T = any, E extends Element<T> = Element<T
|
|
20
|
+
interface FieldAutocompleteTemplateProps<T = any, E extends Element<T> = Element<T>, K = string> extends FieldAutocompleteProps<T, E, K> {
|
|
20
21
|
render: (element: E) => ReactNode;
|
|
21
22
|
}
|
|
22
|
-
export declare function RlsFieldAutocompleteTemplate<T = any, E extends Element<T> = Element<T
|
|
23
|
+
export declare function RlsFieldAutocompleteTemplate<T = any, E extends Element<T> = Element<T>, K = string>(props: FieldAutocompleteTemplateProps<T, E, K>): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
interface FormControlDefinedProps<T = any> extends FieldAutocompleteProps<T, AutocompleteElement<T>> {
|
|
24
25
|
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
25
26
|
value: NonNullable<T>;
|
|
@@ -7,20 +7,19 @@ import { useFieldAutocomplete } from './FieldAutocompleteController';
|
|
|
7
7
|
import './FieldAutocomplete.css';
|
|
8
8
|
export function RlsFieldAutocompleteTemplate(props) {
|
|
9
9
|
const autocomplete = useFieldAutocomplete(props);
|
|
10
|
-
const { controller } = autocomplete;
|
|
11
10
|
const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
|
|
12
11
|
const _disabled = formControl?.disabled || props.disabled;
|
|
13
12
|
const className = renderClassStatus('rls-field-box', {
|
|
14
|
-
focused:
|
|
13
|
+
focused: autocomplete.focused && !_disabled,
|
|
15
14
|
error: formControl?.wrong,
|
|
16
15
|
disabled: _disabled,
|
|
17
|
-
selected: !!
|
|
16
|
+
selected: !!autocomplete.value
|
|
18
17
|
}, 'rls-field-list rls-field-autocomplete');
|
|
19
|
-
return (_jsxs("div", { id: props.identifier, ref:
|
|
20
|
-
visible:
|
|
21
|
-
higher:
|
|
22
|
-
hide: !
|
|
23
|
-
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref:
|
|
18
|
+
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: renderClassStatus('rls-field-list__suggestions', {
|
|
19
|
+
visible: autocomplete.modalIsVisible,
|
|
20
|
+
higher: autocomplete.higher,
|
|
21
|
+
hide: !autocomplete.modalIsVisible
|
|
22
|
+
}), 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: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: (event) => {
|
|
24
23
|
autocomplete.setPattern(event.target.value);
|
|
25
24
|
}, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (_jsx("button", { disabled: _disabled || searching, onClick: () => {
|
|
26
25
|
onSearch(autocomplete.pattern);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { AbstractAutocompleteElement as Element } from '@rolster/components';
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
export interface FieldAutocompleteControl<T = any, E extends Element<T> = Element<T>> {
|
|
4
|
+
import { ListControllerState } from '../../../definitions';
|
|
5
|
+
export interface FieldAutocompleteControl<T = any, E extends Element<T> = Element<T>> extends ListControllerState {
|
|
6
6
|
coincidences: E[];
|
|
7
|
-
controller: ListController<T>;
|
|
8
7
|
onBlurInput: () => void;
|
|
9
8
|
onClickAction: () => void;
|
|
10
9
|
onClickBackdrop: () => void;
|
|
@@ -16,14 +15,15 @@ export interface FieldAutocompleteControl<T = any, E extends Element<T> = Elemen
|
|
|
16
15
|
pattern: string;
|
|
17
16
|
setPattern: (value: string) => void;
|
|
18
17
|
}
|
|
19
|
-
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T
|
|
18
|
+
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>, K = string> {
|
|
20
19
|
suggestions: E[];
|
|
21
20
|
automatic?: boolean;
|
|
22
21
|
disabled?: boolean;
|
|
23
22
|
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
24
23
|
onSelect?: (value: NonNullable<T>) => void;
|
|
25
24
|
onValue?: (value: T) => void;
|
|
25
|
+
reference?: (value: T) => K;
|
|
26
26
|
value?: T;
|
|
27
27
|
}
|
|
28
|
-
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T
|
|
28
|
+
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T>, K = string>(props: FieldAutocompleteProps<T, E, K>): FieldAutocompleteControl<T, E>;
|
|
29
29
|
export {};
|
|
@@ -43,8 +43,8 @@ export function useFieldAutocomplete(props) {
|
|
|
43
43
|
}
|
|
44
44
|
function onClickAction() {
|
|
45
45
|
if (controller.value) {
|
|
46
|
-
controller.setState({ modalIsVisible: false
|
|
47
|
-
controller.setFormValue(
|
|
46
|
+
controller.setState({ modalIsVisible: false });
|
|
47
|
+
controller.setFormValue(undefined);
|
|
48
48
|
props.onValue && props.onValue(props.value);
|
|
49
49
|
}
|
|
50
50
|
else {
|
|
@@ -66,17 +66,17 @@ export function useFieldAutocomplete(props) {
|
|
|
66
66
|
: controller.navigationElement(event);
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
|
-
function onChange(
|
|
69
|
+
function onChange(element) {
|
|
70
70
|
const { onSelect, onValue } = props;
|
|
71
71
|
if (onSelect) {
|
|
72
72
|
controller.setState({ modalIsVisible: false });
|
|
73
|
-
value && onSelect(value);
|
|
73
|
+
element.value && onSelect(element.value);
|
|
74
74
|
}
|
|
75
75
|
else {
|
|
76
|
-
controller.setState({ modalIsVisible: false
|
|
77
|
-
controller.setFormValue(
|
|
76
|
+
controller.setState({ modalIsVisible: false });
|
|
77
|
+
controller.setFormValue(element);
|
|
78
78
|
}
|
|
79
|
-
onValue && onValue(value);
|
|
79
|
+
onValue && onValue(element.value);
|
|
80
80
|
}
|
|
81
81
|
function refreshCoincidences(pattern, reboot = false) {
|
|
82
82
|
const { collection, store } = createAutocompleteStore({
|
|
@@ -89,8 +89,8 @@ export function useFieldAutocomplete(props) {
|
|
|
89
89
|
setCoincidences(collection.slice(0, MAX_ELEMENTS));
|
|
90
90
|
}
|
|
91
91
|
return {
|
|
92
|
+
...controller,
|
|
92
93
|
coincidences,
|
|
93
|
-
controller,
|
|
94
94
|
onBlurInput,
|
|
95
95
|
onClickAction,
|
|
96
96
|
onClickBackdrop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldAutocompleteController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocompleteController.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAIL,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldAutocompleteController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocompleteController.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { ReactControl } from '@rolster/react-forms';
|
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { RlsComponent } from '../../definitions';
|
|
5
5
|
import './FieldSelect.css';
|
|
6
|
-
interface FieldSelectProps<T = any, E extends Element<T> = Element<T
|
|
6
|
+
interface FieldSelectProps<T = any, E extends Element<T> = Element<T>, K = string> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
automatic?: boolean;
|
|
9
9
|
disabled?: boolean;
|
|
@@ -12,13 +12,14 @@ interface FieldSelectProps<T = any, E extends Element<T> = Element<T>> extends R
|
|
|
12
12
|
onSelect?: (value: NonNullable<T>) => void;
|
|
13
13
|
onValue?: ((value?: T) => void) | ((value: T) => void);
|
|
14
14
|
placeholder?: string;
|
|
15
|
+
reference?: (value: T) => K;
|
|
15
16
|
unremovable?: boolean;
|
|
16
17
|
value?: T;
|
|
17
18
|
}
|
|
18
|
-
interface FieldSelectTemplateProps<T = any, E extends Element<T> = Element<T
|
|
19
|
+
interface FieldSelectTemplateProps<T = any, E extends Element<T> = Element<T>, K = string> extends FieldSelectProps<T, E, K> {
|
|
19
20
|
render: (element: E) => ReactNode;
|
|
20
21
|
}
|
|
21
|
-
export declare function RlsFieldSelectTemplate<T = any, E extends ListElement<T> = ListElement<T
|
|
22
|
+
export declare function RlsFieldSelectTemplate<T = any, E extends ListElement<T> = ListElement<T>, K = string>(props: FieldSelectTemplateProps<T, E, K>): import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
interface FormControlDefinedProps<T = any> extends FieldSelectProps<T, ListElement<T>> {
|
|
23
24
|
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
24
25
|
value: NonNullable<T>;
|
|
@@ -7,23 +7,18 @@ import { useFieldSelect } from './FieldSelectController';
|
|
|
7
7
|
import './FieldSelect.css';
|
|
8
8
|
export function RlsFieldSelectTemplate(props) {
|
|
9
9
|
const select = useFieldSelect(props);
|
|
10
|
-
const { controller } = select;
|
|
11
10
|
const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
|
|
12
11
|
const _disabled = formControl?.disabled || props.disabled;
|
|
13
12
|
const className = renderClassStatus('rls-field-box', {
|
|
14
|
-
focused:
|
|
13
|
+
focused: select.focused && !_disabled,
|
|
15
14
|
error: formControl?.wrong,
|
|
16
15
|
disabled: _disabled
|
|
17
16
|
}, 'rls-field-list rls-field-select');
|
|
18
|
-
return (_jsxs("div", { id: props.identifier, ref:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
visible: controller.modalIsVisible,
|
|
24
|
-
higher: controller.higher,
|
|
25
|
-
hide: !controller.modalIsVisible
|
|
26
|
-
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__empty__description", children: [_jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
|
|
17
|
+
return (_jsxs("div", { id: props.identifier, ref: select.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", { ref: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-field-list__action'), disabled: _disabled, onClick: select.onClickAction, children: _jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
|
|
18
|
+
visible: select.modalIsVisible,
|
|
19
|
+
higher: select.higher,
|
|
20
|
+
hide: !select.modalIsVisible
|
|
21
|
+
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: select.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__empty__description", children: [_jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
|
|
27
22
|
}
|
|
28
23
|
export function RlsFieldSelect(props) {
|
|
29
24
|
return (_jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: _jsx("span", { children: element.title }) })) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,mBAAmB,CAAC;AA8B3B,MAAM,UAAU,sBAAsB,CAIpC,KAAwC;IACxC,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,MAAM,EACN,WAAW,EACX,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,WAAW,EAAE,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,iBAAiB,CACjC,eAAe,EACf;QACE,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC,SAAS;QACrC,KAAK,EAAE,WAAW,EAAE,KAAK;QACzB,QAAQ,EAAE,SAAS;KACpB,EACD,iCAAiC,CAClC,CAAC;IAEF,OAAO,CACL,eACE,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,GAAG,EAAE,MAAM,CAAC,UAAU,EACtB,SAAS,EAAE,SAAS,eACT,QAAQ,aAElB,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,GAAG,EAAE,MAAM,CAAC,QAAQ,EACpB,SAAS,EAAC,yBAAyB,EACnC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,YAAY,EAC5B,MAAM,EAAE,MAAM,CAAC,WAAW,EAC1B,OAAO,EAAE,MAAM,CAAC,YAAY,EAC5B,SAAS,EAAE,MAAM,CAAC,cAAc,GAChC,EACF,iBACE,SAAS,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,EACtD,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,MAAM,CAAC,aAAa,YAE7B,KAAC,OAAO,IACN,KAAK,EACH,CAAC,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,GAE7D,GACK,IACL,GACF,EAEL,CAAC,gBAAgB,IAAI,CACpB,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,EAED,eACE,SAAS,EAAE,iBAAiB,CAAC,6BAA6B,EAAE;oBAC1D,OAAO,EAAE,MAAM,CAAC,cAAc;oBAC9B,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,IAAI,EAAE,CAAC,MAAM,CAAC,cAAc;iBAC7B,CAAC,aAEF,cAAK,SAAS,EAAC,mCAAmC,YAChD,cAAI,GAAG,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,EAAC,oBAAoB,aACpD,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,aAEE,SAAS,EAAC,yBAAyB,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,EACvC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAE1C,MAAM,CAAC,OAAO,CAAC,IANX,KAAK,CAOP,CACN,CAAC,EAED,CAAC,WAAW,CAAC,MAAM,IAAI,CACtB,aAAI,SAAS,EAAC,uBAAuB,YACnC,eAAK,SAAS,EAAC,oCAAoC,aACjD,gBAAO,SAAS,EAAC,yBAAyB,YACvC,SAAS,CAAC,gBAAgB,CAAC,GACtB,EACR,YAAG,SAAS,EAAC,qBAAqB,YAC/B,SAAS,CAAC,sBAAsB,CAAC,GAChC,IACA,GACH,CACN,IACE,GACD,EAEN,cACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,MAAM,CAAC,eAAe,GAC1B,IACH,IACF,CACP,CAAC;AACJ,CAAC;AA0CD,MAAM,UAAU,cAAc,CAC5B,KAA0C;IAE1C,OAAO,CACL,KAAC,sBAAsB,OACjB,KAAK,EACT,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACnB,KAAC,SAAS,IACR,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAE1B,yBAAO,OAAO,CAAC,KAAK,GAAQ,GAClB,CACb,GACD,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { AbstractListElement as Element } from '@rolster/components';
|
|
2
2
|
import { ReactControl } from '@rolster/react-forms';
|
|
3
3
|
import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
export interface FieldSelectControl<T = any, E extends Element<T> = Element<T>> {
|
|
6
|
-
controller: ListController<T>;
|
|
4
|
+
import { ListControllerState } from '../../../definitions';
|
|
5
|
+
export interface FieldSelectControl<T = any, E extends Element<T> = Element<T>> extends ListControllerState {
|
|
7
6
|
onBlurInput: () => void;
|
|
8
7
|
onClickAction: () => void;
|
|
9
8
|
onClickBackdrop: () => void;
|
|
@@ -13,15 +12,16 @@ export interface FieldSelectControl<T = any, E extends Element<T> = Element<T>>
|
|
|
13
12
|
onKeydownElement: (element: E) => KeyboardEventHandler;
|
|
14
13
|
onKeydownInput: (event: KeyboardEvent) => void;
|
|
15
14
|
}
|
|
16
|
-
interface FieldSelectProps<T = any, E extends Element<T> = Element<T
|
|
15
|
+
interface FieldSelectProps<T = any, E extends Element<T> = Element<T>, K = string> {
|
|
17
16
|
suggestions: E[];
|
|
18
17
|
automatic?: boolean;
|
|
19
18
|
disabled?: boolean;
|
|
20
19
|
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
21
20
|
onSelect?: (value: NonNullable<T>) => void;
|
|
22
21
|
onValue?: (value: T) => void;
|
|
22
|
+
reference?: (value: T) => K;
|
|
23
23
|
unremovable?: boolean;
|
|
24
24
|
value?: T;
|
|
25
25
|
}
|
|
26
|
-
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T
|
|
26
|
+
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T>, K = string>(props: FieldSelectProps<T, E, K>): FieldSelectControl<T, E>;
|
|
27
27
|
export {};
|
|
@@ -28,8 +28,8 @@ export function useFieldSelect(props) {
|
|
|
28
28
|
function onClickAction() {
|
|
29
29
|
const removable = !props.unremovable && !!controller.value;
|
|
30
30
|
if (removable) {
|
|
31
|
-
controller.setState({ modalIsVisible: false
|
|
32
|
-
controller.setFormValue(
|
|
31
|
+
controller.setState({ modalIsVisible: false });
|
|
32
|
+
controller.setFormValue(undefined);
|
|
33
33
|
props.onValue && props.onValue(props.value);
|
|
34
34
|
}
|
|
35
35
|
else {
|
|
@@ -53,21 +53,21 @@ export function useFieldSelect(props) {
|
|
|
53
53
|
: controller.navigationElement(event);
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
|
-
function onChange(
|
|
56
|
+
function onChange(element) {
|
|
57
57
|
const { onSelect, onValue } = props;
|
|
58
58
|
controller.inputRef?.current?.focus();
|
|
59
59
|
if (onSelect) {
|
|
60
60
|
controller.setState({ modalIsVisible: false });
|
|
61
|
-
value && onSelect(value);
|
|
61
|
+
element.value && onSelect(element.value);
|
|
62
62
|
}
|
|
63
63
|
else {
|
|
64
|
-
controller.setFormValue(
|
|
65
|
-
controller.setState({ modalIsVisible: false
|
|
64
|
+
controller.setFormValue(element);
|
|
65
|
+
controller.setState({ modalIsVisible: false });
|
|
66
66
|
}
|
|
67
|
-
onValue && onValue(value);
|
|
67
|
+
onValue && onValue(element.value);
|
|
68
68
|
}
|
|
69
69
|
return {
|
|
70
|
-
controller,
|
|
70
|
+
...controller,
|
|
71
71
|
onBlurInput,
|
|
72
72
|
onClickAction,
|
|
73
73
|
onClickBackdrop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"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"}
|
|
@@ -13,14 +13,15 @@ export interface ListController<T = any> extends ListControllerState {
|
|
|
13
13
|
listRef: RefObject<HTMLUListElement>;
|
|
14
14
|
navigationElement: (event: KeyboardEvent) => void;
|
|
15
15
|
navigationInput: (event: KeyboardEvent) => void;
|
|
16
|
-
setFormValue(
|
|
16
|
+
setFormValue(element?: AbstractListElement<T>): void;
|
|
17
17
|
setState: (state: Partial<ListControllerState>) => void;
|
|
18
18
|
}
|
|
19
|
-
interface ListControllerProps<T = any> {
|
|
19
|
+
interface ListControllerProps<T = any, K = string> {
|
|
20
20
|
suggestions: AbstractListElement<T>[];
|
|
21
21
|
automatic?: boolean;
|
|
22
22
|
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
23
|
+
reference?: (value: T) => K;
|
|
23
24
|
value?: T;
|
|
24
25
|
}
|
|
25
|
-
export declare function useListController<T = any>(props: ListControllerProps<T>): ListController<T>;
|
|
26
|
+
export declare function useListController<T = any, K = string>(props: ListControllerProps<T, K>): ListController<T>;
|
|
26
27
|
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ListCollection, locationListCanTop, navigationListFromElement, navigationListFromInput } from '@rolster/components';
|
|
2
2
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
export function useListController(props) {
|
|
4
|
-
const { suggestions, automatic, formControl,
|
|
4
|
+
const { suggestions, automatic, formControl, reference } = props;
|
|
5
5
|
const listIsOpen = useRef(false);
|
|
6
6
|
const contentRef = useRef(null);
|
|
7
7
|
const listRef = useRef(null);
|
|
8
8
|
const inputRef = useRef(null);
|
|
9
|
-
const [state,
|
|
9
|
+
const [state, refreshState] = useState({
|
|
10
10
|
focused: false,
|
|
11
11
|
higher: false,
|
|
12
12
|
value: '',
|
|
@@ -14,11 +14,12 @@ export function useListController(props) {
|
|
|
14
14
|
});
|
|
15
15
|
const collection = useRef(new ListCollection([]));
|
|
16
16
|
const position = useRef(0);
|
|
17
|
-
const
|
|
17
|
+
const valueProtected = useRef();
|
|
18
|
+
const changeValueInternal = useRef(false);
|
|
18
19
|
useEffect(() => {
|
|
19
20
|
function onCloseSuggestions({ target }) {
|
|
20
21
|
!contentRef?.current?.contains(target) &&
|
|
21
|
-
|
|
22
|
+
refreshState((state) => ({ ...state, modalIsVisible: false }));
|
|
22
23
|
}
|
|
23
24
|
document.addEventListener('click', onCloseSuggestions);
|
|
24
25
|
return () => {
|
|
@@ -32,67 +33,74 @@ export function useListController(props) {
|
|
|
32
33
|
if (listIsOpen.current && !state.modalIsVisible) {
|
|
33
34
|
formControl?.touch();
|
|
34
35
|
}
|
|
35
|
-
|
|
36
|
+
refreshState((state) => ({
|
|
36
37
|
...state,
|
|
37
38
|
higher: locationListCanTop(contentRef.current, listRef.current)
|
|
38
39
|
}));
|
|
39
40
|
}, [state.modalIsVisible]);
|
|
40
41
|
useEffect(() => {
|
|
41
|
-
collection.current = new ListCollection(suggestions);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
refreshState({ value: '' });
|
|
51
|
-
return undefined;
|
|
52
|
-
}
|
|
53
|
-
const element = collection.find(state);
|
|
54
|
-
if (element) {
|
|
55
|
-
_protected.current = undefined;
|
|
56
|
-
return refreshState({ value: element.description });
|
|
42
|
+
collection.current = new ListCollection(suggestions, reference);
|
|
43
|
+
if (formControl?.value) {
|
|
44
|
+
const element = collection.current.find(formControl.value);
|
|
45
|
+
if (!element) {
|
|
46
|
+
valueProtected.current = formControl.value;
|
|
47
|
+
automatic
|
|
48
|
+
? setFormValue(collection.current.value[0], true)
|
|
49
|
+
: setFormValue(undefined);
|
|
50
|
+
}
|
|
57
51
|
}
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
setFormValue(
|
|
61
|
-
refreshState({ value: '' });
|
|
52
|
+
else if (valueProtected.current) {
|
|
53
|
+
const element = collection.current.find(valueProtected.current);
|
|
54
|
+
element && setFormValue(element);
|
|
62
55
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
if (automatic && collection.value[0]) {
|
|
66
|
-
formControl?.setInitialValue(collection.value[0].value);
|
|
67
|
-
return true;
|
|
56
|
+
else {
|
|
57
|
+
automatic && setFormValue(collection.current.value[0], true);
|
|
68
58
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
59
|
+
}, [suggestions]);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (!changeValueInternal.current) {
|
|
62
|
+
if (formControl?.value) {
|
|
63
|
+
const element = collection.current.find(formControl.value);
|
|
64
|
+
if (!element) {
|
|
65
|
+
valueProtected.current = formControl.value;
|
|
66
|
+
automatic
|
|
67
|
+
? setFormValue(collection.current.value[0], true)
|
|
68
|
+
: setFormValue(undefined);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
setFormValue(element);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
automatic && setFormValue(collection.current.value[0], true);
|
|
75
76
|
}
|
|
76
77
|
}
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
const setFormValue = useCallback((
|
|
83
|
-
|
|
78
|
+
changeValueInternal.current = false;
|
|
79
|
+
}, [formControl?.value]);
|
|
80
|
+
const setState = useCallback((state) => {
|
|
81
|
+
refreshState((_state) => ({ ..._state, ...state }));
|
|
82
|
+
}, []);
|
|
83
|
+
const setFormValue = useCallback((element, initialValue = false) => {
|
|
84
|
+
refreshState((_state) => ({
|
|
85
|
+
..._state,
|
|
86
|
+
value: element?.description ?? ''
|
|
87
|
+
}));
|
|
88
|
+
changeValueInternal.current = true;
|
|
89
|
+
initialValue
|
|
90
|
+
? formControl?.setInitialValue(element?.value)
|
|
91
|
+
: formControl?.setValue(element?.value);
|
|
84
92
|
}, [formControl]);
|
|
85
|
-
|
|
93
|
+
const navigationInput = useCallback((event) => {
|
|
86
94
|
if (state.modalIsVisible) {
|
|
87
|
-
const
|
|
95
|
+
const _position = navigationListFromInput({
|
|
88
96
|
content: contentRef.current,
|
|
89
97
|
event: event,
|
|
90
98
|
list: listRef.current
|
|
91
99
|
});
|
|
92
|
-
position.current =
|
|
100
|
+
position.current = _position ?? 0;
|
|
93
101
|
}
|
|
94
|
-
}
|
|
95
|
-
|
|
102
|
+
}, [state.modalIsVisible]);
|
|
103
|
+
const navigationElement = useCallback((event) => {
|
|
96
104
|
position.current = navigationListFromElement({
|
|
97
105
|
content: contentRef.current,
|
|
98
106
|
event: event,
|
|
@@ -100,7 +108,7 @@ export function useListController(props) {
|
|
|
100
108
|
list: listRef.current,
|
|
101
109
|
position: position.current
|
|
102
110
|
});
|
|
103
|
-
}
|
|
111
|
+
}, [state.modalIsVisible]);
|
|
104
112
|
return {
|
|
105
113
|
...state,
|
|
106
114
|
contentRef,
|
|
@@ -109,7 +117,7 @@ export function useListController(props) {
|
|
|
109
117
|
navigationElement,
|
|
110
118
|
navigationInput,
|
|
111
119
|
setFormValue,
|
|
112
|
-
setState
|
|
120
|
+
setState
|
|
113
121
|
};
|
|
114
122
|
}
|
|
115
123
|
//# sourceMappingURL=ListController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListController.js","sourceRoot":"","sources":["../../../src/controllers/ListController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,kBAAkB,EAClB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAGL,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListController.js","sourceRoot":"","sources":["../../../src/controllers/ListController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,kBAAkB,EAClB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAGL,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AA6Bf,MAAM,UAAU,iBAAiB,CAC/B,KAAgC;IAEhC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAsB;QAC1D,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,EAAE;QACT,cAAc,EAAE,KAAK;KACtB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,cAAc,CAAO,EAAE,CAAC,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,cAAc,GAAG,MAAM,EAAK,CAAC;IACnC,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,kBAAkB,CAAC,EAAE,MAAM,EAAc;YAChD,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAa,CAAC;gBAC3C,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YAChD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,CAAC;QAED,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAChD,WAAW,EAAE,KAAK,EAAE,CAAC;QACvB,CAAC;QAED,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACvB,GAAG,KAAK;YACR,MAAM,EAAE,kBAAkB,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;SAChE,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAEhE,IAAI,WAAW,EAAE,KAAK,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAE3D,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC;gBAE3C,SAAS;oBACP,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;oBACjD,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;aAAM,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAClC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAEhE,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,SAAS,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;YACjC,IAAI,WAAW,EAAE,KAAK,EAAE,CAAC;gBACvB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBAE3D,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC;oBAE3C,SAAS;wBACP,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;wBACjD,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBAC9B,CAAC;qBAAM,CAAC;oBACN,YAAY,CAAC,OAAO,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,SAAS,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC;QAED,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;IACtC,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAmC,EAAE,EAAE;QACnE,YAAY,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAkC,EAAE,YAAY,GAAG,KAAK,EAAE,EAAE;QAC3D,YAAY,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACxB,GAAG,MAAM;YACT,KAAK,EAAE,OAAO,EAAE,WAAW,IAAI,EAAE;SAClC,CAAC,CAAC,CAAC;QAEJ,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;QAEnC,YAAY;YACV,CAAC,CAAC,WAAW,EAAE,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC;YAC9C,CAAC,CAAC,WAAW,EAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,uBAAuB,CAAC;gBACxC,OAAO,EAAE,UAAU,CAAC,OAAO;gBAC3B,KAAK,EAAE,KAAY;gBACnB,IAAI,EAAE,OAAO,CAAC,OAAO;aACtB,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EACD,CAAC,KAAK,CAAC,cAAc,CAAC,CACvB,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAoB,EAAE,EAAE;QACvB,QAAQ,CAAC,OAAO,GAAG,yBAAyB,CAAC;YAC3C,OAAO,EAAE,UAAU,CAAC,OAAO;YAC3B,KAAK,EAAE,KAAY;YACnB,KAAK,EAAE,QAAQ,CAAC,OAAO;YACvB,IAAI,EAAE,OAAO,CAAC,OAAO;YACrB,QAAQ,EAAE,QAAQ,CAAC,OAAO;SAC3B,CAAC,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,cAAc,CAAC,CACvB,CAAC;IAEF,OAAO;QACL,GAAG,KAAK;QACR,UAAU;QACV,QAAQ;QACR,OAAO;QACP,iBAAiB;QACjB,eAAe;QACf,YAAY;QACZ,QAAQ;KACT,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface ListControllerState {
|
|
3
|
+
contentRef: RefObject<HTMLDivElement>;
|
|
4
|
+
focused: boolean;
|
|
5
|
+
higher: boolean;
|
|
6
|
+
inputRef: RefObject<HTMLInputElement>;
|
|
7
|
+
listRef: RefObject<HTMLUListElement>;
|
|
8
|
+
modalIsVisible: boolean;
|
|
9
|
+
value: string;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":""}
|