@rolster/react-components 18.15.30 → 18.15.32
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 +28 -27
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +28 -27
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +31 -9
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +2 -2
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.d.ts +1 -11
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js +7 -7
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteController.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.d.ts +31 -9
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +3 -3
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.d.ts +1 -11
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js +9 -8
- package/dist/esm/components/organisms/FieldSelect/FieldSelectController.js.map +1 -1
- package/dist/esm/controllers/ListController.d.ts +3 -13
- package/dist/esm/controllers/ListController.js +8 -8
- package/dist/esm/controllers/ListController.js.map +1 -1
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import './FieldAutocomplete.css';
|
|
|
6
6
|
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
formControl?: ReactControl<HTMLElement, T
|
|
9
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
10
10
|
hiddenIcon?: boolean;
|
|
11
11
|
msgErrorDisabled?: boolean;
|
|
12
12
|
onSearch?: (pattern: string) => void;
|
|
@@ -19,16 +19,38 @@ interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>> ext
|
|
|
19
19
|
interface FieldAutocompleteTemplateProps<T = any, E extends Element<T> = Element<T>> extends FieldAutocompleteProps<T, E> {
|
|
20
20
|
render: (element: E) => ReactNode;
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
value:
|
|
22
|
+
interface FormUndefinedTemplateProps<T = any> extends FieldAutocompleteTemplateProps<T, AutocompleteElement<T>> {
|
|
23
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
24
|
+
value: undefined;
|
|
25
|
+
}
|
|
26
|
+
interface FormControlTemplateProps<T = any> extends FieldAutocompleteTemplateProps<T, AutocompleteElement<T>> {
|
|
27
|
+
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
28
|
+
value: NonNullable<T>;
|
|
29
|
+
}
|
|
30
|
+
interface FormVoidTemplateProps<T = any> extends Omit<FieldAutocompleteTemplateProps<T, AutocompleteElement<T>>, 'value'> {
|
|
31
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
25
32
|
}
|
|
26
|
-
|
|
33
|
+
type SuggestionsTemplateProps<T = any> = Omit<FieldAutocompleteTemplateProps<T, AutocompleteElement<T>>, 'formControl' | 'value'>;
|
|
34
|
+
export declare function RlsFieldAutocompleteTemplate<T = any>(props: FormUndefinedTemplateProps<T>): JSX.Element;
|
|
35
|
+
export declare function RlsFieldAutocompleteTemplate<T = any>(props: FormControlTemplateProps<T>): JSX.Element;
|
|
36
|
+
export declare function RlsFieldAutocompleteTemplate<T = any>(props: FormVoidTemplateProps<T>): JSX.Element;
|
|
37
|
+
export declare function RlsFieldAutocompleteTemplate<T = any>(props: SuggestionsTemplateProps<T>): JSX.Element;
|
|
38
|
+
export declare function RlsFieldAutocompleteTemplate<T = any, E extends Element<T> = Element<T>>(props: FieldAutocompleteTemplateProps<T, E>): JSX.Element;
|
|
39
|
+
interface FormUndefinedProps<T = any> extends FieldAutocompleteProps<T, AutocompleteElement<T>> {
|
|
40
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
27
41
|
value: undefined;
|
|
28
42
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
43
|
+
interface FormControlProps<T = any> extends FieldAutocompleteProps<T, AutocompleteElement<T>> {
|
|
44
|
+
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
45
|
+
value: NonNullable<T>;
|
|
46
|
+
}
|
|
47
|
+
interface FormVoidProps<T = any> extends Omit<FieldAutocompleteProps<T, AutocompleteElement<T>>, 'value'> {
|
|
48
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
49
|
+
}
|
|
50
|
+
type SuggestionsProps<T = any> = Omit<FieldAutocompleteProps<T, AutocompleteElement<T>>, 'formControl' | 'value'>;
|
|
51
|
+
export declare function RlsFieldAutocomplete<T = any>(props: FormUndefinedProps<T>): JSX.Element;
|
|
52
|
+
export declare function RlsFieldAutocomplete<T = any>(props: FormControlProps<T>): JSX.Element;
|
|
53
|
+
export declare function RlsFieldAutocomplete<T = any>(props: FormVoidProps<T>): JSX.Element;
|
|
54
|
+
export declare function RlsFieldAutocomplete<T = any>(props: SuggestionsProps<T>): JSX.Element;
|
|
33
55
|
export declare function RlsFieldAutocomplete<T = any>(props: FieldAutocompleteProps<T, AutocompleteElement<T>>): JSX.Element;
|
|
34
56
|
export {};
|
|
@@ -17,9 +17,9 @@ export function RlsFieldAutocompleteTemplate(props) {
|
|
|
17
17
|
selected: !!controller.value
|
|
18
18
|
}, 'rls-field-list rls-field-autocomplete');
|
|
19
19
|
return (_jsxs("div", { ref: controller.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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (_jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: _jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
|
|
20
|
-
visible: controller.
|
|
20
|
+
visible: controller.modalIsVisible,
|
|
21
21
|
higher: controller.higher,
|
|
22
|
-
hide: !controller.
|
|
22
|
+
hide: !controller.modalIsVisible
|
|
23
23
|
}), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: ({ target: { value } }) => {
|
|
24
24
|
autocomplete.setPattern(value);
|
|
25
25
|
}, disabled: disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
|
|
@@ -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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"}
|
|
@@ -19,20 +19,10 @@ export interface FieldAutocompleteControl<T = any, E extends Element<T> = Elemen
|
|
|
19
19
|
interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>> {
|
|
20
20
|
suggestions: E[];
|
|
21
21
|
disabled?: boolean;
|
|
22
|
-
formControl?: ReactControl<HTMLElement, T
|
|
22
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
23
23
|
onSelect?: (value: NonNullable<T>) => void;
|
|
24
24
|
onValue?: (value: T) => void;
|
|
25
25
|
value?: T;
|
|
26
26
|
}
|
|
27
|
-
interface FieldValueProps<T = any, E extends Element<T> = Element<T>> extends FieldAutocompleteProps<T, E> {
|
|
28
|
-
value: NonUndefined<T>;
|
|
29
|
-
}
|
|
30
|
-
interface FieldUndefinedProps<T = any, E extends Element<T> = Element<T>> extends FieldAutocompleteProps<T | undefined, E> {
|
|
31
|
-
value: undefined;
|
|
32
|
-
}
|
|
33
|
-
type FieldVoidProps<T = any, E extends Element<T> = Element<T>> = Omit<FieldUndefinedProps<T | undefined, E>, 'value'>;
|
|
34
|
-
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T>>(props: FieldVoidProps<T, E>): FieldAutocompleteControl<T | undefined, E>;
|
|
35
|
-
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T>>(props: FieldUndefinedProps<T, E>): FieldAutocompleteControl<T | undefined, E>;
|
|
36
|
-
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T>>(props: FieldValueProps<T, E>): FieldAutocompleteControl<T, E>;
|
|
37
27
|
export declare function useFieldAutocomplete<T = any, E extends Element<T> = Element<T>>(props: FieldAutocompleteProps<T, E>): FieldAutocompleteControl<T, E>;
|
|
38
28
|
export {};
|
|
@@ -5,8 +5,8 @@ const DURATION_ANIMATION = 240;
|
|
|
5
5
|
const MAX_ELEMENTS = 6;
|
|
6
6
|
export function useFieldAutocomplete(props) {
|
|
7
7
|
const controller = useListController(props);
|
|
8
|
-
const [pattern, setPattern] = useState('');
|
|
9
8
|
const [coincidences, setCoincidences] = useState([]);
|
|
9
|
+
const [pattern, setPattern] = useState('');
|
|
10
10
|
const currentStore = useRef({
|
|
11
11
|
coincidences: [],
|
|
12
12
|
pattern: '',
|
|
@@ -21,7 +21,7 @@ export function useFieldAutocomplete(props) {
|
|
|
21
21
|
}, [pattern]);
|
|
22
22
|
function onClickControl() {
|
|
23
23
|
if (!disabled) {
|
|
24
|
-
controller.setState({
|
|
24
|
+
controller.setState({ modalIsVisible: true });
|
|
25
25
|
setTimeout(() => {
|
|
26
26
|
controller.inputRef?.current?.focus();
|
|
27
27
|
}, DURATION_ANIMATION);
|
|
@@ -37,7 +37,7 @@ export function useFieldAutocomplete(props) {
|
|
|
37
37
|
switch (event.code) {
|
|
38
38
|
case 'Escape':
|
|
39
39
|
case 'Tab':
|
|
40
|
-
controller.setState({
|
|
40
|
+
controller.setState({ modalIsVisible: false });
|
|
41
41
|
break;
|
|
42
42
|
default:
|
|
43
43
|
controller.navigationInput(event);
|
|
@@ -45,12 +45,12 @@ export function useFieldAutocomplete(props) {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
function onClickAction() {
|
|
48
|
-
controller.setState({
|
|
48
|
+
controller.setState({ modalIsVisible: false, value: '' });
|
|
49
49
|
controller.setFormValue(props.value);
|
|
50
50
|
props.onValue && props.onValue(props.value);
|
|
51
51
|
}
|
|
52
52
|
function onClickBackdrop() {
|
|
53
|
-
controller.setState({
|
|
53
|
+
controller.setState({ modalIsVisible: false });
|
|
54
54
|
}
|
|
55
55
|
function onClickElement(element) {
|
|
56
56
|
return () => {
|
|
@@ -66,11 +66,11 @@ export function useFieldAutocomplete(props) {
|
|
|
66
66
|
}
|
|
67
67
|
function onChange({ description, value }) {
|
|
68
68
|
if (props.onSelect) {
|
|
69
|
-
controller.setState({
|
|
69
|
+
controller.setState({ modalIsVisible: false });
|
|
70
70
|
value && props.onSelect(value);
|
|
71
71
|
}
|
|
72
72
|
else {
|
|
73
|
-
controller.setState({
|
|
73
|
+
controller.setState({ modalIsVisible: false, value: description });
|
|
74
74
|
controller.setFormValue(value);
|
|
75
75
|
}
|
|
76
76
|
props.onValue && props.onValue(value);
|
|
@@ -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,EAAkB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,YAAY,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldAutocompleteController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocompleteController.ts"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ import './FieldSelect.css';
|
|
|
6
6
|
interface FieldSelectProps<T = any, E extends Element<T> = Element<T>> extends RlsComponent {
|
|
7
7
|
suggestions: E[];
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
formControl?: ReactControl<HTMLElement, T
|
|
9
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
10
10
|
msgErrorDisabled?: boolean;
|
|
11
11
|
onSelect?: (value: NonNullable<T>) => void;
|
|
12
12
|
onValue?: (value: T) => void;
|
|
@@ -16,16 +16,38 @@ interface FieldSelectProps<T = any, E extends Element<T> = Element<T>> extends R
|
|
|
16
16
|
interface FieldSelectTemplateProps<T = any, E extends Element<T> = Element<T>> extends FieldSelectProps<T, E> {
|
|
17
17
|
render: (element: E) => ReactNode;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
value:
|
|
19
|
+
interface FormUndefinedTemplateProps<T = any> extends FieldSelectTemplateProps<T, ListElement<T>> {
|
|
20
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
21
|
+
value: undefined;
|
|
22
|
+
}
|
|
23
|
+
interface FormControlTemplateProps<T = any> extends FieldSelectTemplateProps<T, ListElement<T>> {
|
|
24
|
+
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
25
|
+
value: NonNullable<T>;
|
|
26
|
+
}
|
|
27
|
+
interface FormVoidTemplateProps<T = any> extends Omit<FieldSelectTemplateProps<T, ListElement<T>>, 'value'> {
|
|
28
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
22
29
|
}
|
|
23
|
-
|
|
30
|
+
type SuggestionsTemplateProps<T = any> = Omit<FieldSelectTemplateProps<T, ListElement<T>>, 'formControl' | 'value'>;
|
|
31
|
+
export declare function RlsFieldSelectTemplate<T = any>(props: FormUndefinedTemplateProps<T>): JSX.Element;
|
|
32
|
+
export declare function RlsFieldSelectTemplate<T = any>(props: FormControlTemplateProps<T>): JSX.Element;
|
|
33
|
+
export declare function RlsFieldSelectTemplate<T = any>(props: FormVoidTemplateProps<T>): JSX.Element;
|
|
34
|
+
export declare function RlsFieldSelectTemplate<T = any>(props: SuggestionsTemplateProps<T>): JSX.Element;
|
|
35
|
+
export declare function RlsFieldSelectTemplate<T = any, E extends ListElement<T> = ListElement<T>>(props: FieldSelectTemplateProps<T, E>): JSX.Element;
|
|
36
|
+
interface FormUndefinedProps<T = any> extends FieldSelectProps<T, ListElement<T>> {
|
|
37
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
24
38
|
value: undefined;
|
|
25
39
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
40
|
+
interface FormControlProps<T = any> extends FieldSelectProps<T, ListElement<T>> {
|
|
41
|
+
formControl: ReactControl<HTMLElement, NonNullable<T>>;
|
|
42
|
+
value: NonNullable<T>;
|
|
43
|
+
}
|
|
44
|
+
interface FormVoidProps<T = any> extends Omit<FieldSelectProps<T, ListElement<T>>, 'value'> {
|
|
45
|
+
formControl: ReactControl<HTMLElement, T | undefined>;
|
|
46
|
+
}
|
|
47
|
+
type SuggestionsProps<T = any> = Omit<FieldSelectProps<T, ListElement<T>>, 'formControl' | 'value'>;
|
|
48
|
+
export declare function RlsFieldSelect<T = any>(props: FormUndefinedProps<T>): JSX.Element;
|
|
49
|
+
export declare function RlsFieldSelect<T = any>(props: FormControlProps<T>): JSX.Element;
|
|
50
|
+
export declare function RlsFieldSelect<T = any>(props: FormVoidProps<T>): JSX.Element;
|
|
51
|
+
export declare function RlsFieldSelect<T = any>(props: SuggestionsProps<T>): JSX.Element;
|
|
30
52
|
export declare function RlsFieldSelect<T = any>(props: FieldSelectProps<T, ListElement<T>>): JSX.Element;
|
|
31
53
|
export {};
|
|
@@ -16,11 +16,11 @@ export function RlsFieldSelectTemplate(props) {
|
|
|
16
16
|
error: formControl?.wrong
|
|
17
17
|
}, 'rls-field-list rls-field-select');
|
|
18
18
|
return (_jsxs("div", { ref: controller.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: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-field-list__action', {
|
|
19
|
-
visible: controller.
|
|
19
|
+
visible: controller.modalIsVisible
|
|
20
20
|
}), disabled: disabled, onClick: select.onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
|
|
21
|
-
visible: controller.
|
|
21
|
+
visible: controller.modalIsVisible,
|
|
22
22
|
higher: controller.higher,
|
|
23
|
-
hide: !controller.
|
|
23
|
+
hide: !controller.modalIsVisible
|
|
24
24
|
}), 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 })] })] }));
|
|
25
25
|
}
|
|
26
26
|
export function RlsFieldSelect(props) {
|
|
@@ -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":"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"}
|
|
@@ -16,20 +16,10 @@ export interface FieldSelectControl<T = any, E extends Element<T> = Element<T>>
|
|
|
16
16
|
interface FieldSelectProps<T = any, E extends Element<T> = Element<T>> {
|
|
17
17
|
suggestions: E[];
|
|
18
18
|
disabled?: boolean;
|
|
19
|
-
formControl?: ReactControl<HTMLElement, T
|
|
19
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
20
20
|
onSelect?: (value: NonNullable<T>) => void;
|
|
21
21
|
onValue?: (value: T) => void;
|
|
22
22
|
value?: T;
|
|
23
23
|
}
|
|
24
|
-
interface FieldValueProps<T = any, E extends Element<T> = Element<T>> extends FieldSelectProps<T, E> {
|
|
25
|
-
value: NonUndefined<T>;
|
|
26
|
-
}
|
|
27
|
-
interface FieldUndefinedProps<T = any, E extends Element<T> = Element<T>> extends FieldSelectProps<T | undefined, E> {
|
|
28
|
-
value: undefined;
|
|
29
|
-
}
|
|
30
|
-
type FieldVoidProps<T = any, E extends Element<T> = Element<T>> = Omit<FieldValueProps<T | undefined, E>, 'value'>;
|
|
31
|
-
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T>>(props: FieldVoidProps<T, E>): FieldSelectControl<T | undefined, E>;
|
|
32
|
-
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T>>(props: FieldUndefinedProps<T, E>): FieldSelectControl<T | undefined, E>;
|
|
33
|
-
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T>>(props: FieldValueProps<T, E>): FieldSelectControl<T, E>;
|
|
34
24
|
export declare function useFieldSelect<T = any, E extends Element<T> = Element<T>>(props: FieldSelectProps<T, E>): FieldSelectControl<T, E>;
|
|
35
25
|
export {};
|
|
@@ -8,17 +8,17 @@ export function useFieldSelect(props) {
|
|
|
8
8
|
controller.setState({ focused: false });
|
|
9
9
|
}
|
|
10
10
|
function onClickInput() {
|
|
11
|
-
controller.setState({
|
|
11
|
+
controller.setState({ modalIsVisible: true });
|
|
12
12
|
}
|
|
13
13
|
function onKeydownInput(event) {
|
|
14
14
|
switch (event.code) {
|
|
15
15
|
case 'Space':
|
|
16
16
|
case 'Enter':
|
|
17
|
-
controller.setState({
|
|
17
|
+
controller.setState({ modalIsVisible: true });
|
|
18
18
|
break;
|
|
19
19
|
case 'Escape':
|
|
20
20
|
case 'Tab':
|
|
21
|
-
controller.setState({
|
|
21
|
+
controller.setState({ modalIsVisible: false });
|
|
22
22
|
break;
|
|
23
23
|
default:
|
|
24
24
|
controller.navigationInput(event);
|
|
@@ -26,11 +26,12 @@ export function useFieldSelect(props) {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
function onClickAction() {
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
const modalIsVisible = !controller.modalIsVisible;
|
|
30
|
+
controller.setState({ modalIsVisible });
|
|
31
|
+
modalIsVisible && controller.inputRef?.current?.focus();
|
|
31
32
|
}
|
|
32
33
|
function onClickBackdrop() {
|
|
33
|
-
controller.setState({
|
|
34
|
+
controller.setState({ modalIsVisible: false });
|
|
34
35
|
}
|
|
35
36
|
function onClickElement(element) {
|
|
36
37
|
return () => {
|
|
@@ -47,12 +48,12 @@ export function useFieldSelect(props) {
|
|
|
47
48
|
function onChange({ description, value }) {
|
|
48
49
|
controller.inputRef?.current?.focus();
|
|
49
50
|
if (props.onSelect) {
|
|
50
|
-
controller.setState({
|
|
51
|
+
controller.setState({ modalIsVisible: false });
|
|
51
52
|
value && props.onSelect(value);
|
|
52
53
|
}
|
|
53
54
|
else {
|
|
54
55
|
controller.setFormValue(value);
|
|
55
|
-
controller.setState({
|
|
56
|
+
controller.setState({ modalIsVisible: false, value: description });
|
|
56
57
|
}
|
|
57
58
|
props.onValue && props.onValue(value);
|
|
58
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldSelectController.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelectController.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA4BzE,MAAM,UAAU,cAAc,CAC5B,KAA6B;IAE7B,MAAM,UAAU,GAAG,iBAAiB,CAAI,KAAK,CAAC,CAAC;IAE/C,SAAS,YAAY;QACnB,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,WAAW;QAClB,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,SAAS,YAAY;QACnB,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,SAAS,cAAc,CAAC,KAAoB;QAC1C,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,OAAO,CAAC;YACb,KAAK,OAAO;gBACV,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC9C,MAAM;YAER,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC/C,MAAM;YAER;gBACE,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;gBAClC,MAAM;QACV,CAAC;IACH,CAAC;IAED,SAAS,aAAa;QACpB,MAAM,cAAc,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC;QAElD,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;QACxC,cAAc,IAAI,UAAU,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC1D,CAAC;IAED,SAAS,eAAe;QACtB,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC;IAED,SAAS,cAAc,CAAC,OAAmB;QACzC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,gBAAgB,CAAC,OAAmB;QAC3C,OAAO,CAAC,KAAK,EAAE,EAAE;YACf,KAAK,CAAC,IAAI,KAAK,OAAO;gBACpB,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;gBACnB,CAAC,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAc;QAClD,UAAU,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAEtC,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;YAC/C,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC/B,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QACrE,CAAC;QAED,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,OAAO;QACL,UAAU;QACV,WAAW;QACX,aAAa;QACb,eAAe;QACf,YAAY;QACZ,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { KeyboardEvent, RefObject } from 'react';
|
|
|
4
4
|
interface ListControllerState {
|
|
5
5
|
focused: boolean;
|
|
6
6
|
higher: boolean;
|
|
7
|
-
|
|
7
|
+
modalIsVisible: boolean;
|
|
8
8
|
value: string;
|
|
9
9
|
}
|
|
10
10
|
export interface ListController<T = any> extends ListControllerState {
|
|
@@ -13,23 +13,13 @@ 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(value
|
|
16
|
+
setFormValue(value?: T): void;
|
|
17
17
|
setState: (state: Partial<ListControllerState>) => void;
|
|
18
18
|
}
|
|
19
19
|
interface ListControllerProps<T = any> {
|
|
20
20
|
suggestions: AbstractListElement<T>[];
|
|
21
|
-
formControl?: ReactControl<HTMLElement, T
|
|
21
|
+
formControl?: ReactControl<HTMLElement, T | undefined> | ReactControl<HTMLElement, NonNullable<T>>;
|
|
22
22
|
value?: T;
|
|
23
23
|
}
|
|
24
|
-
interface ValueControllerProps<T = any> extends ListControllerProps<T> {
|
|
25
|
-
value: NonUndefined<T>;
|
|
26
|
-
}
|
|
27
|
-
interface UndefinedControllerProps<T = any> extends ListControllerProps<T | undefined> {
|
|
28
|
-
value: undefined;
|
|
29
|
-
}
|
|
30
|
-
type VoidControllerProps<T = any> = Omit<UndefinedControllerProps<T | undefined>, 'value'>;
|
|
31
|
-
export declare function useListController<T = any>(props: VoidControllerProps<T>): ListController<T | undefined>;
|
|
32
|
-
export declare function useListController<T = any>(props: UndefinedControllerProps<T>): ListController<T | undefined>;
|
|
33
|
-
export declare function useListController<T = any>(props: ValueControllerProps<T>): ListController<T>;
|
|
34
24
|
export declare function useListController<T = any>(props: ListControllerProps<T>): ListController<T>;
|
|
35
25
|
export {};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { ListCollection, navigationListFromElement, navigationListFromInput
|
|
1
|
+
import { ListCollection, locationListCanTop, navigationListFromElement, navigationListFromInput } from '@rolster/components';
|
|
2
2
|
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
export function useListController(props) {
|
|
4
4
|
const { suggestions, formControl, value } = props;
|
|
5
|
+
const listIsOpen = useRef(false);
|
|
5
6
|
const contentRef = useRef(null);
|
|
6
7
|
const listRef = useRef(null);
|
|
7
8
|
const inputRef = useRef(null);
|
|
8
|
-
const listIsOpen = useRef(false);
|
|
9
9
|
const [state, setState] = useState({
|
|
10
10
|
focused: false,
|
|
11
11
|
higher: false,
|
|
12
12
|
value: '',
|
|
13
|
-
|
|
13
|
+
modalIsVisible: false
|
|
14
14
|
});
|
|
15
15
|
const collection = useRef(new ListCollection([]));
|
|
16
16
|
const position = useRef(0);
|
|
@@ -18,7 +18,7 @@ export function useListController(props) {
|
|
|
18
18
|
useEffect(() => {
|
|
19
19
|
function onCloseSuggestions({ target }) {
|
|
20
20
|
!contentRef?.current?.contains(target) &&
|
|
21
|
-
setState((state) => ({ ...state,
|
|
21
|
+
setState((state) => ({ ...state, modalIsVisible: false }));
|
|
22
22
|
}
|
|
23
23
|
document.addEventListener('click', onCloseSuggestions);
|
|
24
24
|
return () => {
|
|
@@ -26,17 +26,17 @@ export function useListController(props) {
|
|
|
26
26
|
};
|
|
27
27
|
}, []);
|
|
28
28
|
useEffect(() => {
|
|
29
|
-
if (!listIsOpen.current && state.
|
|
29
|
+
if (!listIsOpen.current && state.modalIsVisible) {
|
|
30
30
|
listIsOpen.current = true;
|
|
31
31
|
}
|
|
32
|
-
if (listIsOpen.current && !state.
|
|
32
|
+
if (listIsOpen.current && !state.modalIsVisible) {
|
|
33
33
|
formControl?.touch();
|
|
34
34
|
}
|
|
35
35
|
setState((state) => ({
|
|
36
36
|
...state,
|
|
37
37
|
higher: locationListCanTop(contentRef.current, listRef.current)
|
|
38
38
|
}));
|
|
39
|
-
}, [state.
|
|
39
|
+
}, [state.modalIsVisible]);
|
|
40
40
|
useEffect(() => {
|
|
41
41
|
collection.current = new ListCollection(suggestions);
|
|
42
42
|
refresh(collection.current, formControl?.value);
|
|
@@ -76,7 +76,7 @@ export function useListController(props) {
|
|
|
76
76
|
formControl?.setValue(value);
|
|
77
77
|
}
|
|
78
78
|
function navigationInput(event) {
|
|
79
|
-
if (state.
|
|
79
|
+
if (state.modalIsVisible) {
|
|
80
80
|
const newPosition = navigationListFromInput({
|
|
81
81
|
content: contentRef.current,
|
|
82
82
|
event: event,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListController.js","sourceRoot":"","sources":["../../../src/controllers/ListController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,yBAAyB,EACzB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ListController.js","sourceRoot":"","sources":["../../../src/controllers/ListController.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
|