@alfalab/core-components-input-autocomplete 9.3.26 → 9.4.1
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/Component-3885b0d7.d.ts +1 -1
- package/Component-425c8522.d.ts +53 -0
- package/Component-5e1b8383.d.ts +5 -0
- package/Component-aed0af6e.d.ts +11 -0
- package/Component-b4e70cb0.d.ts +22 -0
- package/Component-bdb4c6b9.d.ts +8 -0
- package/Component-ebda875c.d.ts +101 -0
- package/Component-f12ee135.d.ts +71 -0
- package/Component.desktop.d.ts +1 -1
- package/Component.mobile-e81c389f.d.ts +38 -0
- package/Component.mobile.d.ts +1 -1
- package/Component.mobile.js +7 -8
- package/Component.modal.mobile.d.ts +123 -0
- package/Component.modal.mobile.js +77 -0
- package/Component.responsive.d.ts +2 -2
- package/Component.responsive.js +1 -0
- package/Context-bdb4c6b9.d.ts +4 -0
- package/ResponsiveContext-baf4875b.d.ts +5 -0
- package/autocomplete-field/Component.d.ts +1 -1
- package/autocomplete-field/Component.js +1 -1
- package/autocomplete-field/index.css +2 -2
- package/autocomplete-mobile-field/Component.d.ts +1 -1
- package/autocomplete-mobile-field/Component.js +1 -1
- package/autocomplete-mobile-field/index.css +8 -8
- package/consts-f777ba1a.d.ts +2 -0
- package/cssm/Component-3885b0d7.d.ts +1 -1
- package/cssm/Component-425c8522.d.ts +53 -0
- package/cssm/Component-5e1b8383.d.ts +5 -0
- package/cssm/Component-aed0af6e.d.ts +11 -0
- package/cssm/Component-b4e70cb0.d.ts +22 -0
- package/cssm/Component-bdb4c6b9.d.ts +8 -0
- package/cssm/Component-ebda875c.d.ts +101 -0
- package/cssm/Component-f12ee135.d.ts +71 -0
- package/cssm/Component.desktop.d.ts +1 -1
- package/cssm/Component.mobile-e81c389f.d.ts +38 -0
- package/cssm/Component.mobile.d.ts +1 -1
- package/cssm/Component.mobile.js +5 -4
- package/cssm/Component.modal.mobile.d.ts +123 -0
- package/cssm/Component.modal.mobile.js +79 -0
- package/cssm/Component.responsive.d.ts +2 -2
- package/cssm/Context-bdb4c6b9.d.ts +4 -0
- package/cssm/ResponsiveContext-baf4875b.d.ts +5 -0
- package/cssm/autocomplete-field/Component.d.ts +1 -1
- package/cssm/autocomplete-mobile-field/Component.d.ts +1 -1
- package/cssm/consts-f777ba1a.d.ts +2 -0
- package/cssm/hook-b4e70cb0.d.ts +73 -0
- package/cssm/index-136acbb1.d.ts +28 -0
- package/cssm/index-3e68f8db.d.ts +5 -0
- package/cssm/index-425c8522.d.ts +6 -0
- package/cssm/index-bdb4c6b9.d.ts +172 -0
- package/cssm/index-e81c389f.d.ts +3 -0
- package/cssm/index-ebda875c.d.ts +66 -48
- package/cssm/index-f12ee135.d.ts +7 -217
- package/cssm/mobile.d.ts +1 -0
- package/cssm/mobile.js +3 -0
- package/cssm/mobile.module.css +1 -1
- package/cssm/typings-5e1b8383.d.ts +550 -0
- package/cssm/typings-bdb4c6b9.d.ts +52 -0
- package/cssm/utils-5e1b8383.d.ts +38 -0
- package/esm/Component-3885b0d7.d.ts +1 -1
- package/esm/Component-425c8522.d.ts +53 -0
- package/esm/Component-5e1b8383.d.ts +5 -0
- package/esm/Component-aed0af6e.d.ts +11 -0
- package/esm/Component-b4e70cb0.d.ts +22 -0
- package/esm/Component-bdb4c6b9.d.ts +12 -0
- package/esm/Component-ebda875c.d.ts +101 -0
- package/esm/Component-f12ee135.d.ts +71 -0
- package/esm/Component.desktop.d.ts +1 -1
- package/esm/Component.mobile-b2c0420d.d.ts +35 -0
- package/esm/Component.mobile.d.ts +1 -1
- package/esm/Component.mobile.js +6 -7
- package/esm/Component.modal.mobile.d.ts +123 -0
- package/esm/Component.modal.mobile.js +66 -0
- package/esm/Component.responsive.d.ts +2 -2
- package/esm/Component.responsive.js +1 -0
- package/esm/Context-bdb4c6b9.d.ts +4 -0
- package/esm/ResponsiveContext-baf4875b.d.ts +5 -0
- package/esm/autocomplete-field/Component.d.ts +1 -1
- package/esm/autocomplete-field/Component.js +1 -1
- package/esm/autocomplete-field/index.css +2 -2
- package/esm/autocomplete-mobile-field/Component.d.ts +1 -1
- package/esm/autocomplete-mobile-field/Component.js +1 -1
- package/esm/autocomplete-mobile-field/index.css +8 -8
- package/esm/consts-f777ba1a.d.ts +2 -0
- package/esm/hook-b4e70cb0.d.ts +73 -0
- package/esm/index-136acbb1.d.ts +28 -0
- package/esm/index-3e68f8db.d.ts +5 -0
- package/esm/index-425c8522.d.ts +6 -0
- package/esm/index-bdb4c6b9.d.ts +172 -0
- package/esm/index-e81c389f.d.ts +3 -0
- package/esm/index-ebda875c.d.ts +66 -48
- package/esm/index-f12ee135.d.ts +7 -217
- package/esm/index.js +1 -0
- package/esm/mobile.css +4 -4
- package/esm/mobile.d.ts +1 -0
- package/esm/mobile.js +3 -0
- package/esm/mobile.module-bad1a093.js +4 -0
- package/esm/responsive.js +1 -0
- package/esm/typings-5e1b8383.d.ts +550 -0
- package/esm/typings-bdb4c6b9.d.ts +52 -0
- package/esm/utils-5e1b8383.d.ts +38 -0
- package/hook-b4e70cb0.d.ts +73 -0
- package/index-136acbb1.d.ts +28 -0
- package/index-3e68f8db.d.ts +5 -0
- package/index-425c8522.d.ts +6 -0
- package/index-bdb4c6b9.d.ts +172 -0
- package/index-e81c389f.d.ts +3 -0
- package/index-ebda875c.d.ts +66 -48
- package/index-f12ee135.d.ts +7 -217
- package/index.js +1 -0
- package/mobile.css +4 -4
- package/mobile.d.ts +1 -0
- package/mobile.js +4 -0
- package/mobile.module-22ee5ba9.js +6 -0
- package/modern/Component-3885b0d7.d.ts +1 -1
- package/modern/Component-425c8522.d.ts +53 -0
- package/modern/Component-5e1b8383.d.ts +5 -0
- package/modern/Component-aed0af6e.d.ts +11 -0
- package/modern/Component-b4e70cb0.d.ts +22 -0
- package/modern/Component-bdb4c6b9.d.ts +8 -0
- package/modern/Component-ebda875c.d.ts +101 -0
- package/modern/Component-f12ee135.d.ts +71 -0
- package/modern/Component.desktop.d.ts +1 -1
- package/modern/Component.mobile-e81c389f.d.ts +38 -0
- package/modern/Component.mobile.d.ts +1 -1
- package/modern/Component.mobile.js +6 -8
- package/modern/Component.modal.mobile.d.ts +123 -0
- package/modern/Component.modal.mobile.js +73 -0
- package/modern/Component.responsive.d.ts +2 -2
- package/modern/Component.responsive.js +1 -0
- package/modern/Context-bdb4c6b9.d.ts +4 -0
- package/modern/ResponsiveContext-baf4875b.d.ts +5 -0
- package/modern/autocomplete-field/Component.d.ts +1 -1
- package/modern/autocomplete-field/Component.js +1 -1
- package/modern/autocomplete-field/index.css +2 -2
- package/modern/autocomplete-mobile-field/Component.d.ts +1 -1
- package/modern/autocomplete-mobile-field/Component.js +1 -1
- package/modern/autocomplete-mobile-field/index.css +8 -8
- package/modern/consts-f777ba1a.d.ts +2 -0
- package/modern/hook-b4e70cb0.d.ts +73 -0
- package/modern/index-136acbb1.d.ts +28 -0
- package/modern/index-3e68f8db.d.ts +5 -0
- package/modern/index-425c8522.d.ts +6 -0
- package/modern/index-bdb4c6b9.d.ts +172 -0
- package/modern/index-e81c389f.d.ts +3 -0
- package/modern/index-ebda875c.d.ts +66 -48
- package/modern/index-f12ee135.d.ts +7 -217
- package/modern/index.js +1 -0
- package/modern/mobile.css +4 -4
- package/modern/mobile.d.ts +1 -0
- package/modern/mobile.js +3 -0
- package/modern/mobile.module-32ab5262.js +4 -0
- package/modern/responsive.js +1 -0
- package/modern/typings-5e1b8383.d.ts +550 -0
- package/modern/typings-bdb4c6b9.d.ts +52 -0
- package/modern/utils-5e1b8383.d.ts +38 -0
- package/package.json +5 -5
- package/responsive.js +1 -0
- package/typings-5e1b8383.d.ts +550 -0
- package/typings-bdb4c6b9.d.ts +52 -0
- package/utils-5e1b8383.d.ts +38 -0
|
@@ -6,12 +6,10 @@ import { Button } from '@alfalab/core-components-button/modern';
|
|
|
6
6
|
import { Input } from '@alfalab/core-components-input/modern';
|
|
7
7
|
import { SelectMobile } from '@alfalab/core-components-select/modern';
|
|
8
8
|
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
9
|
+
import { s as styles } from './mobile.module-32ab5262.js';
|
|
9
10
|
import '@alfalab/core-components-form-control/modern';
|
|
10
11
|
import '@alfalab/hooks';
|
|
11
12
|
|
|
12
|
-
const styles = {"bottomSheetInput":"input-autocomplete__bottomSheetInput_8stne","footer":"input-autocomplete__footer_8stne"};
|
|
13
|
-
require('./mobile.css')
|
|
14
|
-
|
|
15
13
|
const SELECTED = [];
|
|
16
14
|
const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetProps = {}, bottomSheetHeaderAddonsProps = {}, value = '', filter = '', name, Arrow = null, label, placeholder, size = 's', open: openProp, onFilter, onChange, onOpen, onCancel, onClearFilter, continueButtonProps, cancelButtonProps, selected, multiple, ...restProps }, ref) => {
|
|
17
15
|
const [open, setOpen] = useState(false);
|
|
@@ -42,7 +40,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
42
40
|
onChange(payload);
|
|
43
41
|
if (multiple) {
|
|
44
42
|
// После выбора опции возвращаем фокус в поле ввода.
|
|
45
|
-
|
|
43
|
+
bottomSheetInputRef.current?.focus();
|
|
46
44
|
}
|
|
47
45
|
};
|
|
48
46
|
const handleCancel = () => {
|
|
@@ -64,10 +62,10 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
64
62
|
const Component = Input$1 || Input;
|
|
65
63
|
return {
|
|
66
64
|
actionButton: (React.createElement("div", { className: styles.footer },
|
|
67
|
-
React.createElement(Button, { block: true, view: '
|
|
68
|
-
React.createElement(Button, { block: true, view: '
|
|
65
|
+
React.createElement(Button, { block: true, view: 'secondary', size: 's', onClick: handleCancel, ...cancelButtonProps }, "\u041E\u0442\u043C\u0435\u043D\u0430"),
|
|
66
|
+
React.createElement(Button, { block: true, view: 'primary', size: 's', onClick: handleApply, ...continueButtonProps }, "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"))),
|
|
69
67
|
title: label || placeholder,
|
|
70
|
-
bottomAddons: (React.createElement(Component, { block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus, ...bottomSheetHeaderAddonsProps, className: cn(styles.
|
|
68
|
+
bottomAddons: (React.createElement(Component, { block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, onFocus: handleInputFocus, ...bottomSheetHeaderAddonsProps, className: cn(styles.bottomAddonInput, bottomSheetHeaderAddonsProps.className), ref: mergeRefs([
|
|
71
69
|
bottomSheetInputRef,
|
|
72
70
|
bottomSheetHeaderAddonsProps.ref,
|
|
73
71
|
]) })),
|
|
@@ -79,7 +77,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input: Input$1, bottomSheetP
|
|
|
79
77
|
},
|
|
80
78
|
};
|
|
81
79
|
};
|
|
82
|
-
return (React.createElement(SelectMobile, { ref: mergeRefs([targetRef, ref]), selected: selected || SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: handleChange, Arrow: Arrow, Field: AutocompleteMobileField, fieldProps: { value }, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, bottomSheetProps: getBottomSheetProps(), optionsListProps: { showFooter: false }, ...restProps }));
|
|
80
|
+
return (React.createElement(SelectMobile, { ref: mergeRefs([targetRef, ref]), selected: selected || SELECTED, open: Boolean(open || openProp), onOpen: handleOpen, onChange: handleChange, Arrow: Arrow, Field: AutocompleteMobileField, fieldProps: { value }, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, useWithApplyHook: false, bottomSheetProps: getBottomSheetProps(), optionsListProps: { showFooter: false }, ...restProps }));
|
|
83
81
|
});
|
|
84
82
|
|
|
85
83
|
export { InputAutocompleteMobile };
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { ButtonProps } from "@alfalab/core-components-button";
|
|
5
|
+
import { BaseSelectChangePayload } from "./index-3e68f8db";
|
|
6
|
+
import { ModalMobile } from "./Component.mobile-e81c389f";
|
|
7
|
+
import { UseSelectWithApplyProps } from "./hook-b4e70cb0";
|
|
8
|
+
import { BaseSelectProps } from "./typings-5e1b8383";
|
|
9
|
+
type SelectModalMobileProps = Omit<BaseSelectProps, "Checkmark" | "onScroll"> & {
|
|
10
|
+
/**
|
|
11
|
+
* Показывать кнопку очистки
|
|
12
|
+
*/
|
|
13
|
+
showClear?: UseSelectWithApplyProps["showClear"];
|
|
14
|
+
/**
|
|
15
|
+
* Показывать пункт "Выбрать все"
|
|
16
|
+
*/
|
|
17
|
+
showSelectAll?: UseSelectWithApplyProps["showSelectAll"];
|
|
18
|
+
/**
|
|
19
|
+
* Дополнительные пропсы шапки модалки
|
|
20
|
+
*/
|
|
21
|
+
modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
|
|
22
|
+
/**
|
|
23
|
+
* Дополнительные пропсы модалки
|
|
24
|
+
*/
|
|
25
|
+
modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
|
|
26
|
+
/**
|
|
27
|
+
* Дополнительные пропсы футера модалки
|
|
28
|
+
*/
|
|
29
|
+
modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
|
|
30
|
+
/*
|
|
31
|
+
* Показывать пункт "Выбрать все" в заголовке списка
|
|
32
|
+
*/
|
|
33
|
+
showHeaderWithSelectAll?: UseSelectWithApplyProps["showHeaderWithSelectAll"];
|
|
34
|
+
/**
|
|
35
|
+
* Использовать ли хук useSelectWithApply
|
|
36
|
+
*/
|
|
37
|
+
useWithApplyHook?: boolean;
|
|
38
|
+
};
|
|
39
|
+
type InputAutocompleteModalMobileProps = Omit<SelectModalMobileProps, 'OptionsList' | 'Checkmark' | 'onScroll' | 'nativeSelect' | 'autocomplete' | 'valueRenderer'> & {
|
|
40
|
+
/**
|
|
41
|
+
* Обработчик выбора
|
|
42
|
+
*/
|
|
43
|
+
onChange: (payload: string | BaseSelectChangePayload) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Обработчик ввода фильтра.
|
|
46
|
+
*/
|
|
47
|
+
onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
48
|
+
/**
|
|
49
|
+
* Значение поля ввода
|
|
50
|
+
*/
|
|
51
|
+
value?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Значение фильтра.
|
|
54
|
+
*/
|
|
55
|
+
filter?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Обработчик нажатия на кнопку "Отмена".
|
|
58
|
+
*/
|
|
59
|
+
onCancel?: () => void;
|
|
60
|
+
/**
|
|
61
|
+
* Обработчик нажатия на крестик в инпуте фильтра.
|
|
62
|
+
*/
|
|
63
|
+
onClearFilter?: () => void;
|
|
64
|
+
/**
|
|
65
|
+
* Дополнительные пропсы на слот под заголовком
|
|
66
|
+
*/
|
|
67
|
+
bottomAddonProps?: Record<string, unknown>;
|
|
68
|
+
/**
|
|
69
|
+
* Дополнительные пропсы на кнопку "продолжить"
|
|
70
|
+
*/
|
|
71
|
+
continueButtonProps?: ButtonProps;
|
|
72
|
+
/**
|
|
73
|
+
* Дополнительные пропсы на кнопку "отмена"
|
|
74
|
+
*/
|
|
75
|
+
cancelButtonProps?: ButtonProps;
|
|
76
|
+
/**
|
|
77
|
+
* Кастомный инпут
|
|
78
|
+
*/
|
|
79
|
+
Input?: ElementType;
|
|
80
|
+
};
|
|
81
|
+
declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<Omit<SelectModalMobileProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
|
|
82
|
+
/**
|
|
83
|
+
* Обработчик выбора
|
|
84
|
+
*/
|
|
85
|
+
onChange: (payload: string | BaseSelectChangePayload) => void;
|
|
86
|
+
/**
|
|
87
|
+
* Обработчик ввода фильтра.
|
|
88
|
+
*/
|
|
89
|
+
onFilter: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
90
|
+
/**
|
|
91
|
+
* Значение поля ввода
|
|
92
|
+
*/
|
|
93
|
+
value?: string | undefined;
|
|
94
|
+
/**
|
|
95
|
+
* Значение фильтра.
|
|
96
|
+
*/
|
|
97
|
+
filter?: string | undefined;
|
|
98
|
+
/**
|
|
99
|
+
* Обработчик нажатия на кнопку "Отмена".
|
|
100
|
+
*/
|
|
101
|
+
onCancel?: (() => void) | undefined;
|
|
102
|
+
/**
|
|
103
|
+
* Обработчик нажатия на крестик в инпуте фильтра.
|
|
104
|
+
*/
|
|
105
|
+
onClearFilter?: (() => void) | undefined;
|
|
106
|
+
/**
|
|
107
|
+
* Дополнительные пропсы на слот под заголовком
|
|
108
|
+
*/
|
|
109
|
+
bottomAddonProps?: Record<string, unknown> | undefined;
|
|
110
|
+
/**
|
|
111
|
+
* Дополнительные пропсы на кнопку "продолжить"
|
|
112
|
+
*/
|
|
113
|
+
continueButtonProps?: ButtonProps | undefined;
|
|
114
|
+
/**
|
|
115
|
+
* Дополнительные пропсы на кнопку "отмена"
|
|
116
|
+
*/
|
|
117
|
+
cancelButtonProps?: ButtonProps | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* Кастомный инпут
|
|
120
|
+
*/
|
|
121
|
+
Input?: React.ElementType<any> | undefined;
|
|
122
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
123
|
+
export { InputAutocompleteModalMobileProps, InputAutocompleteModalMobile };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
|
+
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import throttle from 'lodash.throttle';
|
|
5
|
+
import { Button } from '@alfalab/core-components-button/modern';
|
|
6
|
+
import { Input } from '@alfalab/core-components-input/modern';
|
|
7
|
+
import { SelectModalMobile } from '@alfalab/core-components-select/modern/mobile';
|
|
8
|
+
import { AutocompleteMobileField } from './autocomplete-mobile-field/Component.js';
|
|
9
|
+
import { s as styles } from './mobile.module-32ab5262.js';
|
|
10
|
+
import '@alfalab/core-components-form-control/modern';
|
|
11
|
+
import '@alfalab/hooks';
|
|
12
|
+
|
|
13
|
+
const InputAutocompleteModalMobile = React.forwardRef(({ open: openProp, onOpen, name, size = 's', Input: Input$1 = Input, Arrow = null, onClearFilter, filter = '', onFilter, placeholder, bottomAddonProps, multiple, onChange, onCancel, value, cancelButtonProps, continueButtonProps, ...restProps }, ref) => {
|
|
14
|
+
const [open, setOpen] = React.useState(false);
|
|
15
|
+
const targetRef = useRef(null);
|
|
16
|
+
const modalScrollableRef = useRef(null);
|
|
17
|
+
const bottomAddonRef = useRef(null);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const modalContentNode = modalScrollableRef.current;
|
|
20
|
+
const handleListTouchMove = throttle(() => {
|
|
21
|
+
const input = bottomAddonRef.current;
|
|
22
|
+
if (input && document.activeElement === input) {
|
|
23
|
+
input.blur();
|
|
24
|
+
}
|
|
25
|
+
}, 300);
|
|
26
|
+
modalContentNode?.addEventListener('touchmove', handleListTouchMove);
|
|
27
|
+
return () => modalContentNode?.removeEventListener('touchmove', handleListTouchMove);
|
|
28
|
+
}, [open]);
|
|
29
|
+
const setOpenModalSelect = (isOpen) => {
|
|
30
|
+
if (openProp === undefined) {
|
|
31
|
+
setOpen(isOpen);
|
|
32
|
+
}
|
|
33
|
+
onOpen?.({ open: isOpen, name });
|
|
34
|
+
};
|
|
35
|
+
const handleOpen = (payload) => {
|
|
36
|
+
setOpenModalSelect(Boolean(payload.open));
|
|
37
|
+
};
|
|
38
|
+
const handleApply = () => {
|
|
39
|
+
setOpenModalSelect(false);
|
|
40
|
+
onChange(filter);
|
|
41
|
+
};
|
|
42
|
+
const handleCancel = () => {
|
|
43
|
+
setOpenModalSelect(false);
|
|
44
|
+
onCancel?.();
|
|
45
|
+
};
|
|
46
|
+
const handleChange = (payload) => {
|
|
47
|
+
onChange(payload);
|
|
48
|
+
if (multiple) {
|
|
49
|
+
// После выбора опции возвращаем фокус в поле ввода.
|
|
50
|
+
bottomAddonRef.current?.focus();
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const renderBottomAddon = () => (React.createElement(Input$1, { block: true, clear: !!onClearFilter, onClear: onClearFilter, value: filter, onInput: onFilter, placeholder: placeholder, ...bottomAddonProps, className: cn(styles.bottomAddonInput, bottomAddonProps?.className), ref: mergeRefs([
|
|
54
|
+
bottomAddonRef,
|
|
55
|
+
bottomAddonProps?.ref,
|
|
56
|
+
]) }));
|
|
57
|
+
const renderFooter = () => (React.createElement(React.Fragment, null,
|
|
58
|
+
React.createElement(Button, { block: true, view: 'primary', size: 's', onClick: handleApply, ...continueButtonProps }, "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C"),
|
|
59
|
+
React.createElement(Button, { block: true, view: 'secondary', size: 's', onClick: handleCancel, ...cancelButtonProps }, "\u041E\u0442\u043C\u0435\u043D\u0430")));
|
|
60
|
+
return (React.createElement(SelectModalMobile, { ...restProps, ref: mergeRefs([ref, targetRef]), name: name, Field: AutocompleteMobileField, Arrow: Arrow, onOpen: handleOpen, onChange: handleChange, multiple: multiple, open: openProp ?? open, size: size, fieldProps: { value }, placeholder: placeholder, useWithApplyHook: false, modalProps: {
|
|
61
|
+
...restProps.modalProps,
|
|
62
|
+
componentRef: modalScrollableRef,
|
|
63
|
+
}, modalHeaderProps: {
|
|
64
|
+
...restProps.modalHeaderProps,
|
|
65
|
+
bottomAddons: renderBottomAddon(),
|
|
66
|
+
}, modalFooterProps: {
|
|
67
|
+
sticky: true,
|
|
68
|
+
...restProps.modalFooterProps,
|
|
69
|
+
children: renderFooter(),
|
|
70
|
+
} }));
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
export { InputAutocompleteModalMobile };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { BottomSheetProps } from "./index-f12ee135";
|
|
4
4
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
5
|
-
import { BaseSelectProps } from "
|
|
5
|
+
import { BaseSelectProps } from "./index-3e68f8db";
|
|
6
6
|
import { InputAutocompleteDesktopProps } from "./Component.desktop";
|
|
7
7
|
import { InputAutocompleteMobileProps } from "./Component.mobile";
|
|
8
8
|
type InputAutocompleteResponsiveProps = InputAutocompleteDesktopProps & InputAutocompleteMobileProps & {
|
|
@@ -86,7 +86,7 @@ declare const InputAutocompleteResponsive: React.ForwardRefExoticComponent<Omit<
|
|
|
86
86
|
onInput?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
87
87
|
updatePopover?: React.MutableRefObject<() => void> | undefined;
|
|
88
88
|
} & Omit<BaseSelectProps, "onScroll" | "valueRenderer" | "autocomplete" | "nativeSelect" | "OptionsList" | "Checkmark"> & {
|
|
89
|
-
onChange: (payload: string | import("
|
|
89
|
+
onChange: (payload: string | import("./index-3e68f8db").BaseSelectChangePayload) => void;
|
|
90
90
|
onFilter: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
91
91
|
value?: string | undefined;
|
|
92
92
|
filter?: string | undefined;
|
|
@@ -11,6 +11,7 @@ import 'lodash.throttle';
|
|
|
11
11
|
import '@alfalab/core-components-button/modern';
|
|
12
12
|
import './autocomplete-mobile-field/Component.js';
|
|
13
13
|
import '@alfalab/core-components-form-control/modern';
|
|
14
|
+
import './mobile.module-32ab5262.js';
|
|
14
15
|
|
|
15
16
|
const InputAutocompleteResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
|
|
16
17
|
const [view] = useMedia([
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { FieldProps } from "
|
|
2
|
+
import { FieldProps } from "../index-3e68f8db";
|
|
3
3
|
import { InputAutocompleteDesktopProps } from "../Component.desktop";
|
|
4
4
|
type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteDesktopProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
|
|
5
5
|
declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => JSX.Element;
|
|
@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Input } from '@alfalab/core-components-input/modern';
|
|
5
5
|
|
|
6
|
-
const styles = {"arrow":"input-
|
|
6
|
+
const styles = {"arrow":"input-autocomplete__arrow_4r1bm","error":"input-autocomplete__error_4r1bm"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input: Input$1 = Input, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FormControlProps } from "@alfalab/core-components-form-control";
|
|
3
3
|
import { InputAutocompleteProps } from "../index";
|
|
4
|
-
import { FieldProps as BaseFieldProps } from "
|
|
4
|
+
import { FieldProps as BaseFieldProps } from "../index-3e68f8db";
|
|
5
5
|
type AutocompleteMobileFieldProps = FormControlProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & Pick<InputAutocompleteProps, 'value'>;
|
|
6
6
|
declare const AutocompleteMobileField: ({ size, open, error, hint, disabled, label, labelView, placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }: AutocompleteMobileFieldProps) => JSX.Element;
|
|
7
7
|
export { AutocompleteMobileFieldProps, AutocompleteMobileField };
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import { FormControl } from '@alfalab/core-components-form-control/modern';
|
|
4
4
|
import { useFocus } from '@alfalab/hooks';
|
|
5
5
|
|
|
6
|
-
const styles = {"component":"input-
|
|
6
|
+
const styles = {"component":"input-autocomplete__component_xiumm","field":"input-autocomplete__field_xiumm","disabled":"input-autocomplete__disabled_xiumm","placeholder":"input-autocomplete__placeholder_xiumm","contentWrapper":"input-autocomplete__contentWrapper_xiumm","value":"input-autocomplete__value_xiumm","focusVisible":"input-autocomplete__focusVisible_xiumm"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const AutocompleteMobileField = ({ size = 'm', open, error, hint, disabled, label, labelView = 'inner', placeholder, value, innerProps, dataTestId, fieldClassName, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, ...restProps }) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 8cqb4 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-link: #0072ef;
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
} :root {
|
|
19
19
|
--focus-color: var(--color-light-border-link);
|
|
20
20
|
--disabled-cursor: not-allowed;
|
|
21
|
-
} .input-
|
|
21
|
+
} .input-autocomplete__component_xiumm {
|
|
22
22
|
width: 100%;
|
|
23
23
|
outline: none;
|
|
24
|
-
} .input-
|
|
24
|
+
} .input-autocomplete__field_xiumm:not(.input-autocomplete__disabled_xiumm) {
|
|
25
25
|
cursor: pointer;
|
|
26
|
-
} .input-
|
|
26
|
+
} .input-autocomplete__disabled_xiumm {
|
|
27
27
|
cursor: var(--disabled-cursor);
|
|
28
|
-
} .input-
|
|
28
|
+
} .input-autocomplete__placeholder_xiumm {
|
|
29
29
|
color: var(--color-light-text-secondary);
|
|
30
|
-
} .input-
|
|
30
|
+
} .input-autocomplete__contentWrapper_xiumm {
|
|
31
31
|
font-size: 16px;
|
|
32
32
|
line-height: 20px;
|
|
33
33
|
font-weight: 400;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
text-overflow: ellipsis;
|
|
37
37
|
overflow: hidden;
|
|
38
38
|
width: 100%;
|
|
39
|
-
} .input-
|
|
39
|
+
} .input-autocomplete__value_xiumm {
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
text-overflow: ellipsis;
|
|
42
42
|
text-align: left;
|
|
43
|
-
} .input-
|
|
43
|
+
} .input-autocomplete__focusVisible_xiumm {
|
|
44
44
|
outline: 2px solid var(--focus-color);
|
|
45
45
|
outline-offset: 2px;
|
|
46
46
|
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
|
|
3
|
+
type UseSelectWithApplyProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Список выбранных пунктов
|
|
6
|
+
*/
|
|
7
|
+
selected: BaseSelectProps['selected'];
|
|
8
|
+
/**
|
|
9
|
+
* Список вариантов выбора
|
|
10
|
+
*/
|
|
11
|
+
options: BaseSelectProps['options'];
|
|
12
|
+
/**
|
|
13
|
+
* Обработчик выбора
|
|
14
|
+
*/
|
|
15
|
+
onChange: BaseSelectProps['onChange'];
|
|
16
|
+
/**
|
|
17
|
+
* Компонент выпадающего меню
|
|
18
|
+
*/
|
|
19
|
+
OptionsList?: BaseSelectProps['OptionsList'];
|
|
20
|
+
/**
|
|
21
|
+
* Пропсы, которые будут прокинуты в компонент списка
|
|
22
|
+
*/
|
|
23
|
+
optionsListProps?: BaseSelectProps['optionsListProps'];
|
|
24
|
+
/**
|
|
25
|
+
* Показывать кнопку очистки
|
|
26
|
+
*/
|
|
27
|
+
showClear?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Показывать пункт "Выбрать все"
|
|
30
|
+
*/
|
|
31
|
+
showSelectAll?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Показывать пункт "Выбрать все" в заголовке списка
|
|
34
|
+
*/
|
|
35
|
+
showHeaderWithSelectAll?: boolean;
|
|
36
|
+
};
|
|
37
|
+
declare const SELECT_ALL_KEY = "select_all";
|
|
38
|
+
declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
|
|
39
|
+
OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
|
|
40
|
+
showClear?: boolean | undefined;
|
|
41
|
+
onClose?: (() => void) | undefined;
|
|
42
|
+
selectedDraft?: OptionShape[] | undefined;
|
|
43
|
+
OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
|
|
44
|
+
Footer?: import("react").FC<import("./Component-b4e70cb0").FooterProps> | undefined;
|
|
45
|
+
Header?: import("react").FC<import("./Component-aed0af6e").HeaderProps> | undefined;
|
|
46
|
+
headerProps?: import("./Component-aed0af6e").HeaderProps | undefined;
|
|
47
|
+
showHeaderWithSelectAll?: boolean | undefined;
|
|
48
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
49
|
+
optionsListProps: {
|
|
50
|
+
OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
|
|
51
|
+
showClear: boolean;
|
|
52
|
+
onClear: () => void;
|
|
53
|
+
onApply: () => void;
|
|
54
|
+
onClose: () => void;
|
|
55
|
+
selectedDraft: OptionShape[];
|
|
56
|
+
showHeaderWithSelectAll: boolean;
|
|
57
|
+
headerProps: {
|
|
58
|
+
indeterminate: boolean;
|
|
59
|
+
checked: boolean;
|
|
60
|
+
onChange: () => void;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
allowUnselect: boolean;
|
|
64
|
+
multiple: boolean;
|
|
65
|
+
options: (OptionShape | import("./index-3e68f8db").GroupShape | {
|
|
66
|
+
key: string;
|
|
67
|
+
content: string;
|
|
68
|
+
})[];
|
|
69
|
+
onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
|
|
70
|
+
selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
|
|
71
|
+
};
|
|
72
|
+
export * from "./Component-b4e70cb0";
|
|
73
|
+
export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FC, ReactNode } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Набор констант для z-index соответствующих классов компонентов.
|
|
5
|
+
* Значения выбраны по приоритету.
|
|
6
|
+
*/
|
|
7
|
+
declare const stackingOrder: {
|
|
8
|
+
FOCUSED: number;
|
|
9
|
+
DEFAULT: number;
|
|
10
|
+
POPOVER: number;
|
|
11
|
+
MODAL: number;
|
|
12
|
+
TOAST: number;
|
|
13
|
+
};
|
|
14
|
+
declare const StackingContext: import("react").Context<number>;
|
|
15
|
+
type StackProps = {
|
|
16
|
+
/**
|
|
17
|
+
* Render prop, в который передается функция.
|
|
18
|
+
* Функция принимает аргумент со значением z-index из текущего контекста.
|
|
19
|
+
*/
|
|
20
|
+
children: (value: number) => ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Исходное значение для z-index.
|
|
23
|
+
* @default 5
|
|
24
|
+
*/
|
|
25
|
+
value?: number;
|
|
26
|
+
};
|
|
27
|
+
declare const Stack: FC<StackProps>;
|
|
28
|
+
export { stackingOrder, StackingContext, StackProps, Stack };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
2
|
+
type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
3
|
+
type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
|
|
4
|
+
type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
|
|
5
|
+
type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
|
|
6
|
+
export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
|