fui-material 2.6.7 → 2.6.8
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.
|
@@ -1,26 +1,132 @@
|
|
|
1
1
|
import React, { type ChangeEvent, type ReactNode, type CSSProperties } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Интерфейс пропсов для компонента `FSearchableSelect`.
|
|
4
|
+
*
|
|
5
|
+
* @interface IFSearchableSelect
|
|
6
|
+
* @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>}
|
|
4
7
|
*/
|
|
5
8
|
export interface IFSearchableSelect extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
9
|
+
/**
|
|
10
|
+
* Метка (label), отображаемая над полем ввода.
|
|
11
|
+
* @type {string | undefined}
|
|
12
|
+
*/
|
|
6
13
|
label?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Инлайновые стили для внешнего контейнера компонента.
|
|
16
|
+
* @type {CSSProperties | undefined}
|
|
17
|
+
*/
|
|
7
18
|
st?: CSSProperties;
|
|
19
|
+
/**
|
|
20
|
+
* Дочерние элементы (обычно `<option>`), из которых формируется список выбора.
|
|
21
|
+
* Значения извлекаются из пропсов `value` и `children` переданных элементов.
|
|
22
|
+
* @type {ReactNode | undefined}
|
|
23
|
+
*/
|
|
8
24
|
children?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Флаг, указывающий, должен ли компонент занимать 100% ширины родителя.
|
|
27
|
+
* @type {boolean | undefined}
|
|
28
|
+
*/
|
|
9
29
|
fullWidth?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Флаг состояния загрузки. Если true, отображается спиннер, а взаимодействие блокируется.
|
|
32
|
+
* @type {boolean | undefined}
|
|
33
|
+
*/
|
|
10
34
|
load?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
37
|
+
* @type {string[] | string | undefined}
|
|
38
|
+
*/
|
|
11
39
|
errText?: string[] | string | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* Вспомогательный текст, отображаемый под полем ввода.
|
|
42
|
+
* @type {string | undefined}
|
|
43
|
+
*/
|
|
12
44
|
helpText?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Явное указание ширины компонента.
|
|
47
|
+
* @type {string | number | undefined}
|
|
48
|
+
*/
|
|
13
49
|
width?: string | number;
|
|
50
|
+
/**
|
|
51
|
+
* Явное указание высоты компонента.
|
|
52
|
+
* @type {string | number | undefined}
|
|
53
|
+
*/
|
|
14
54
|
height?: string | number;
|
|
55
|
+
/**
|
|
56
|
+
* Разрешить создание новых элементов, отсутствующих в списке.
|
|
57
|
+
* При вводе уникального текста появится опция "Создать".
|
|
58
|
+
* @type {boolean | undefined}
|
|
59
|
+
*/
|
|
15
60
|
allowCreate?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Текущее значение поля (контролируемый компонент).
|
|
63
|
+
* @type {string | number | readonly string[] | undefined}
|
|
64
|
+
*/
|
|
16
65
|
value?: string | number | readonly string[];
|
|
66
|
+
/**
|
|
67
|
+
* Callback, вызываемый при изменении значения.
|
|
68
|
+
* Возвращает синтетическое событие с объектом target, содержащим name и value.
|
|
69
|
+
* @type {((event: { target: { name: string; value: string } } | ChangeEvent<HTMLInputElement>) => void) | undefined}
|
|
70
|
+
*/
|
|
17
71
|
onChange?: (event: {
|
|
18
72
|
target: {
|
|
19
73
|
name: string;
|
|
20
74
|
value: string;
|
|
21
75
|
};
|
|
22
76
|
} | ChangeEvent<HTMLInputElement>) => void;
|
|
77
|
+
/**
|
|
78
|
+
* Возвращает вводимый пользователем текст
|
|
79
|
+
* @type {React.ChangeEvent<HTMLInputElement>}
|
|
80
|
+
*/
|
|
23
81
|
onChangeTerm?: (text: React.ChangeEvent<HTMLInputElement>) => void;
|
|
24
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* Компонент `FSearchableSelect` — выпадающий список с возможностью поиска и фильтрации опций.
|
|
85
|
+
*
|
|
86
|
+
* Особенности:
|
|
87
|
+
* - Поддерживает фильтрацию списка при вводе текста.
|
|
88
|
+
* - Может работать как обычный Select или как Combobox (с `allowCreate`).
|
|
89
|
+
* - Парсит опции из переданных `children` (например, `<option value="1">One</option>`).
|
|
90
|
+
* - Поддерживает навигацию с клавиатуры (стрелки, Enter, Escape).
|
|
91
|
+
* - Имеет состояния: ошибка, загрузка, disabled.
|
|
92
|
+
*
|
|
93
|
+
* @component
|
|
94
|
+
* @example
|
|
95
|
+
* // Простой пример использования с опциями
|
|
96
|
+
* <FSearchableSelect
|
|
97
|
+
* label="Выберите город"
|
|
98
|
+
* value={city}
|
|
99
|
+
* onChange={(e) => setCity(e.target.value)}
|
|
100
|
+
* fullWidth
|
|
101
|
+
* >
|
|
102
|
+
* <option value="moscow">Москва</option>
|
|
103
|
+
* <option value="spb">Санкт-Петербург</option>
|
|
104
|
+
* </FSearchableSelect>
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* // Пример с созданием новых значений (allowCreate) и ошибкой
|
|
108
|
+
* <FSearchableSelect
|
|
109
|
+
* label="Теги"
|
|
110
|
+
* allowCreate
|
|
111
|
+
* value={tag}
|
|
112
|
+
* onChange={(e) => setTag(e.target.value)}
|
|
113
|
+
* errText={hasError ? ['Некорректный тег'] : undefined}
|
|
114
|
+
* >
|
|
115
|
+
* {tagsList.map(t => <option key={t.id} value={t.name}>{t.name}</option>)}
|
|
116
|
+
* </FSearchableSelect>
|
|
117
|
+
*
|
|
118
|
+
* @param {string} [label] - Метка поля.
|
|
119
|
+
* @param {CSSProperties} [st] - Стили контейнера.
|
|
120
|
+
* @param {ReactNode} [children] - Опции списка.
|
|
121
|
+
* @param {boolean} [fullWidth=false] - Растянуть на 100%.
|
|
122
|
+
* @param {boolean} [load=false] - Показать лоадер.
|
|
123
|
+
* @param {string[] | string} [errText] - Текст ошибки.
|
|
124
|
+
* @param {string} [helpText] - Подсказка.
|
|
125
|
+
* @param {boolean} [allowCreate=false] - Разрешить ввод своих значений.
|
|
126
|
+
* @param {string|number} [value] - Значение.
|
|
127
|
+
* @param {Function} [onChange] - Обработчик изменений.
|
|
128
|
+
*
|
|
129
|
+
* @returns {JSX.Element} Рендерит кастомный Select с поиском.
|
|
130
|
+
*/
|
|
25
131
|
declare const FSearchableSelect: React.ForwardRefExoticComponent<IFSearchableSelect & React.RefAttributes<HTMLInputElement>>;
|
|
26
132
|
export default FSearchableSelect;
|