@salutejs/plasma-new-hope 0.120.0 → 0.121.0-dev.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/cjs/components/Autocomplete/Autocomplete.js +12 -3
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.js +12 -3
- package/emotion/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +561 -0
- package/emotion/es/components/Autocomplete/Autocomplete.js +12 -3
- package/emotion/es/components/Autocomplete/Autocomplete.template-doc.mdx +561 -0
- package/es/components/Autocomplete/Autocomplete.js +12 -3
- package/es/components/Autocomplete/Autocomplete.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.js +12 -3
- package/styled-components/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +561 -0
- package/styled-components/es/components/Autocomplete/Autocomplete.js +12 -3
- package/styled-components/es/components/Autocomplete/Autocomplete.template-doc.mdx +561 -0
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts +4 -0
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
|
@@ -0,0 +1,561 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: autocomplete
|
|
3
|
+
title: Autocomplete
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
|
7
|
+
import Tabs from '@theme/Tabs';
|
|
8
|
+
import TabItem from '@theme/TabItem';
|
|
9
|
+
|
|
10
|
+
# Autocomplete
|
|
11
|
+
Поле ввода с подсказками в выпадающем списке.
|
|
12
|
+
|
|
13
|
+
<Description name="Autocomplete" />
|
|
14
|
+
<PropsTable name="Autocomplete" />
|
|
15
|
+
|
|
16
|
+
## Использование
|
|
17
|
+
Расширенная версия компонента `TextField`. Добавилась возможность использования выпадающего списка с подсказками.\
|
|
18
|
+
По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой коллбэк `filter`.\
|
|
19
|
+
Все пропсы, которые поддерживает компонент `TextField` также поддерживаются и здесь.
|
|
20
|
+
Формат подсказок `suggestions` следующий:
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
type SuggestionItem = {
|
|
24
|
+
/**
|
|
25
|
+
* Метка-подпись к подсказке
|
|
26
|
+
*/
|
|
27
|
+
label: string;
|
|
28
|
+
/**
|
|
29
|
+
* Слот для контента слева
|
|
30
|
+
*/
|
|
31
|
+
contentLeft?: ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Слот для контента справа
|
|
34
|
+
*/
|
|
35
|
+
contentRight?: ReactNode;
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Примеры
|
|
40
|
+
|
|
41
|
+
<Tabs>
|
|
42
|
+
<TabItem value="default" label="Default" default>
|
|
43
|
+
```tsx live
|
|
44
|
+
import React from 'react';
|
|
45
|
+
import { Autocomplete } from '@salutejs/{{ package }}';
|
|
46
|
+
|
|
47
|
+
export function App() {
|
|
48
|
+
const mockData = [
|
|
49
|
+
{ label: 'Алексей Смирнов' },
|
|
50
|
+
{ label: 'Екатерина Иванова' },
|
|
51
|
+
{ label: 'Дмитрий Петров' },
|
|
52
|
+
{ label: 'Ольга Васильева' },
|
|
53
|
+
{ label: 'Сергей Сидоров' },
|
|
54
|
+
{ label: 'Мария Кузнецова' },
|
|
55
|
+
{ label: 'Андрей Попов' },
|
|
56
|
+
{ label: 'Анна Николаева' },
|
|
57
|
+
{ label: 'Иван Федоров' },
|
|
58
|
+
{ label: 'Наталья Морозова' },
|
|
59
|
+
{ label: 'Михаил Павлов' },
|
|
60
|
+
{ label: 'Елена Романова' },
|
|
61
|
+
{ label: 'Владимир Киселев' },
|
|
62
|
+
{ label: 'Татьяна Захарова' },
|
|
63
|
+
{ label: 'Николай Семенов' },
|
|
64
|
+
{ label: 'Юлия Белова' },
|
|
65
|
+
{ label: 'Александр Гусев' },
|
|
66
|
+
{ label: 'Оксана Яковлева' },
|
|
67
|
+
{ label: 'Игорь Егорова' },
|
|
68
|
+
{ label: 'Вера Тихомирова' },
|
|
69
|
+
{ label: 'Артем Григорьев' },
|
|
70
|
+
{ label: 'Евгения Козлова' },
|
|
71
|
+
{ label: 'Максим Лебедев' },
|
|
72
|
+
{ label: 'Виктория Калашникова' },
|
|
73
|
+
{ label: 'Константин Абрамов' },
|
|
74
|
+
{ label: 'Светлана Новикова' },
|
|
75
|
+
{ label: 'Юрий Волков' },
|
|
76
|
+
{ label: 'Валентина Воробьева' },
|
|
77
|
+
{ label: 'Павел Сергеев' },
|
|
78
|
+
{ label: 'Людмила Виноградова' },
|
|
79
|
+
{ label: 'Антон Соловьев' },
|
|
80
|
+
{ label: 'Маргарита Цветкова' },
|
|
81
|
+
{ label: 'Роман Трофимов' },
|
|
82
|
+
{ label: 'Лариса Зайцева' },
|
|
83
|
+
{ label: 'Евгений Никитин' },
|
|
84
|
+
{ label: 'Галина Михайлова' },
|
|
85
|
+
{ label: 'Владислав Антонов' },
|
|
86
|
+
{ label: 'Дарья Филатова' },
|
|
87
|
+
{ label: 'Олег Буров' },
|
|
88
|
+
{ label: 'Инна Медведева' },
|
|
89
|
+
{ label: 'Вячеслав Крылов' },
|
|
90
|
+
{ label: 'Тамара Беляева' },
|
|
91
|
+
{ label: 'Кирилл Марков' },
|
|
92
|
+
{ label: 'Марина Пономарева' },
|
|
93
|
+
{ label: 'Борис Захаров' },
|
|
94
|
+
{ label: 'Жанна Савельева' },
|
|
95
|
+
{ label: 'Федор Жуков' },
|
|
96
|
+
{ label: 'Елизавета Логинова' },
|
|
97
|
+
{ label: 'Виктор Рыбаков' },
|
|
98
|
+
{ label: 'Лилия Макарова' },
|
|
99
|
+
];
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<div style=\{{ display: 'block', height:"400px" }}>
|
|
103
|
+
<Autocomplete suggestions={mockData} listMaxHeight="250px" label="Label" placeholder="Placeholder" leftHelper="Введите имя Алексей" />
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
</TabItem>
|
|
109
|
+
<TabItem value="controlled" label="Controlled">
|
|
110
|
+
```tsx live
|
|
111
|
+
import React from 'react';
|
|
112
|
+
import { Autocomplete } from '@salutejs/{{ package }}';
|
|
113
|
+
|
|
114
|
+
export function App() {
|
|
115
|
+
const mockData = [
|
|
116
|
+
{ label: 'Алексей Смирнов' },
|
|
117
|
+
{ label: 'Екатерина Иванова' },
|
|
118
|
+
{ label: 'Дмитрий Петров' },
|
|
119
|
+
{ label: 'Ольга Васильева' },
|
|
120
|
+
{ label: 'Сергей Сидоров' },
|
|
121
|
+
{ label: 'Мария Кузнецова' },
|
|
122
|
+
{ label: 'Андрей Попов' },
|
|
123
|
+
{ label: 'Анна Николаева' },
|
|
124
|
+
{ label: 'Иван Федоров' },
|
|
125
|
+
{ label: 'Наталья Морозова' },
|
|
126
|
+
{ label: 'Михаил Павлов' },
|
|
127
|
+
{ label: 'Елена Романова' },
|
|
128
|
+
{ label: 'Владимир Киселев' },
|
|
129
|
+
{ label: 'Татьяна Захарова' },
|
|
130
|
+
{ label: 'Николай Семенов' },
|
|
131
|
+
{ label: 'Юлия Белова' },
|
|
132
|
+
{ label: 'Александр Гусев' },
|
|
133
|
+
{ label: 'Оксана Яковлева' },
|
|
134
|
+
{ label: 'Игорь Егорова' },
|
|
135
|
+
{ label: 'Вера Тихомирова' },
|
|
136
|
+
{ label: 'Артем Григорьев' },
|
|
137
|
+
{ label: 'Евгения Козлова' },
|
|
138
|
+
{ label: 'Максим Лебедев' },
|
|
139
|
+
{ label: 'Виктория Калашникова' },
|
|
140
|
+
{ label: 'Константин Абрамов' },
|
|
141
|
+
{ label: 'Светлана Новикова' },
|
|
142
|
+
{ label: 'Юрий Волков' },
|
|
143
|
+
{ label: 'Валентина Воробьева' },
|
|
144
|
+
{ label: 'Павел Сергеев' },
|
|
145
|
+
{ label: 'Людмила Виноградова' },
|
|
146
|
+
{ label: 'Антон Соловьев' },
|
|
147
|
+
{ label: 'Маргарита Цветкова' },
|
|
148
|
+
{ label: 'Роман Трофимов' },
|
|
149
|
+
{ label: 'Лариса Зайцева' },
|
|
150
|
+
{ label: 'Евгений Никитин' },
|
|
151
|
+
{ label: 'Галина Михайлова' },
|
|
152
|
+
{ label: 'Владислав Антонов' },
|
|
153
|
+
{ label: 'Дарья Филатова' },
|
|
154
|
+
{ label: 'Олег Буров' },
|
|
155
|
+
{ label: 'Инна Медведева' },
|
|
156
|
+
{ label: 'Вячеслав Крылов' },
|
|
157
|
+
{ label: 'Тамара Беляева' },
|
|
158
|
+
{ label: 'Кирилл Марков' },
|
|
159
|
+
{ label: 'Марина Пономарева' },
|
|
160
|
+
{ label: 'Борис Захаров' },
|
|
161
|
+
{ label: 'Жанна Савельева' },
|
|
162
|
+
{ label: 'Федор Жуков' },
|
|
163
|
+
{ label: 'Елизавета Логинова' },
|
|
164
|
+
{ label: 'Виктор Рыбаков' },
|
|
165
|
+
{ label: 'Лилия Макарова' },
|
|
166
|
+
];
|
|
167
|
+
|
|
168
|
+
const [value, setValue] = useState('')
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<div style=\{{ display: 'block', height:"400px" }}>
|
|
172
|
+
<Autocomplete value={value} onChange={(e) => setValue(e.target.value)} onSuggestionSelect={(e) => setValue(e.label)} suggestions={mockData} listMaxHeight="250px" label="Label" placeholder="Placeholder" leftHelper="Введите имя Алексей" />
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
</TabItem>
|
|
178
|
+
<TabItem value="infinite" label="Infinite Loading">
|
|
179
|
+
Это пример с бесконечным лоадингом подсказок в списке. Для удобства порог для открытия списка подсказок понижен до 0 (открываться будет сразу при фокусе).
|
|
180
|
+
|
|
181
|
+
```tsx live
|
|
182
|
+
import React from 'react';
|
|
183
|
+
import { Autocomplete, Cell, Spinner } from '@salutejs/{{ package }}';
|
|
184
|
+
|
|
185
|
+
export function App() {
|
|
186
|
+
const mockData = [
|
|
187
|
+
{ label: 'Алексей Смирнов' },
|
|
188
|
+
{ label: 'Екатерина Иванова' },
|
|
189
|
+
{ label: 'Дмитрий Петров' },
|
|
190
|
+
{ label: 'Ольга Васильева' },
|
|
191
|
+
{ label: 'Сергей Сидоров' },
|
|
192
|
+
{ label: 'Мария Кузнецова' },
|
|
193
|
+
{ label: 'Андрей Попов' },
|
|
194
|
+
{ label: 'Анна Николаева' },
|
|
195
|
+
{ label: 'Иван Федоров' },
|
|
196
|
+
{ label: 'Наталья Морозова' },
|
|
197
|
+
{ label: 'Михаил Павлов' },
|
|
198
|
+
{ label: 'Елена Романова' },
|
|
199
|
+
{ label: 'Владимир Киселев' },
|
|
200
|
+
{ label: 'Татьяна Захарова' },
|
|
201
|
+
{ label: 'Николай Семенов' },
|
|
202
|
+
{ label: 'Юлия Белова' },
|
|
203
|
+
{ label: 'Александр Гусев' },
|
|
204
|
+
{ label: 'Оксана Яковлева' },
|
|
205
|
+
{ label: 'Игорь Егорова' },
|
|
206
|
+
{ label: 'Вера Тихомирова' },
|
|
207
|
+
{ label: 'Артем Григорьев' },
|
|
208
|
+
{ label: 'Евгения Козлова' },
|
|
209
|
+
{ label: 'Максим Лебедев' },
|
|
210
|
+
{ label: 'Виктория Калашникова' },
|
|
211
|
+
{ label: 'Константин Абрамов' },
|
|
212
|
+
{ label: 'Светлана Новикова' },
|
|
213
|
+
{ label: 'Юрий Волков' },
|
|
214
|
+
{ label: 'Валентина Воробьева' },
|
|
215
|
+
{ label: 'Павел Сергеев' },
|
|
216
|
+
{ label: 'Людмила Виноградова' },
|
|
217
|
+
{ label: 'Антон Соловьев' },
|
|
218
|
+
{ label: 'Маргарита Цветкова' },
|
|
219
|
+
{ label: 'Роман Трофимов' },
|
|
220
|
+
{ label: 'Лариса Зайцева' },
|
|
221
|
+
{ label: 'Евгений Никитин' },
|
|
222
|
+
{ label: 'Галина Михайлова' },
|
|
223
|
+
{ label: 'Владислав Антонов' },
|
|
224
|
+
{ label: 'Дарья Филатова' },
|
|
225
|
+
{ label: 'Олег Буров' },
|
|
226
|
+
{ label: 'Инна Медведева' },
|
|
227
|
+
{ label: 'Вячеслав Крылов' },
|
|
228
|
+
{ label: 'Тамара Беляева' },
|
|
229
|
+
{ label: 'Кирилл Марков' },
|
|
230
|
+
{ label: 'Марина Пономарева' },
|
|
231
|
+
{ label: 'Борис Захаров' },
|
|
232
|
+
{ label: 'Жанна Савельева' },
|
|
233
|
+
{ label: 'Федор Жуков' },
|
|
234
|
+
{ label: 'Елизавета Логинова' },
|
|
235
|
+
{ label: 'Виктор Рыбаков' },
|
|
236
|
+
{ label: 'Лилия Макарова' },
|
|
237
|
+
];
|
|
238
|
+
|
|
239
|
+
const getData = async (data, page, pageSize = 10) => {
|
|
240
|
+
return new Promise((resolve) => {
|
|
241
|
+
setTimeout(() => {
|
|
242
|
+
resolve({page, data: data.slice(page * pageSize - 1, page * pageSize - 1 + pageSize)})
|
|
243
|
+
}, 1500)
|
|
244
|
+
})
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
const [suggestions, setSuggestions] = useState({ page: 1, data: mockData.slice(0, 10) })
|
|
248
|
+
const [isInfiniteLoading, setIsInfiniteLoading] = useState(false)
|
|
249
|
+
|
|
250
|
+
const onScroll = async (e) => {
|
|
251
|
+
if (isInfiniteLoading) return
|
|
252
|
+
|
|
253
|
+
if (e.target.scrollTop + e.target.offsetHeight + 10 > e.target.scrollHeight) {
|
|
254
|
+
setIsInfiniteLoading(true)
|
|
255
|
+
|
|
256
|
+
const res = await getData(mockData, suggestions.page + 1, 10)
|
|
257
|
+
setSuggestions({page: res.page, data: [...suggestions.data, ...res.data]})
|
|
258
|
+
|
|
259
|
+
setIsInfiniteLoading(false)
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
return (
|
|
264
|
+
<div style=\{{ display: 'block', height:"400px" }}>
|
|
265
|
+
<Autocomplete
|
|
266
|
+
suggestions={suggestions.data}
|
|
267
|
+
listMaxHeight="250px"
|
|
268
|
+
onScroll={onScroll}
|
|
269
|
+
threshold={0}
|
|
270
|
+
renderListEnd={isInfiniteLoading ? () => <Cell contentLeft={<Spinner view="primary" />} title="Загрузка" stretching="auto" /> : undefined}
|
|
271
|
+
label="Label"
|
|
272
|
+
placeholder="Placeholder"
|
|
273
|
+
leftHelper="Введите имя Алексей"
|
|
274
|
+
/>
|
|
275
|
+
</div>
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
</TabItem>
|
|
280
|
+
<TabItem value="filter" label="Custom Filter">
|
|
281
|
+
Пример кастомной фильтрации на бекенде. Не забываем отключить дефолтную фильтрацию.
|
|
282
|
+
|
|
283
|
+
```tsx live
|
|
284
|
+
import React from 'react';
|
|
285
|
+
import { Autocomplete } from '@salutejs/{{ package }}';
|
|
286
|
+
|
|
287
|
+
export function App() {
|
|
288
|
+
const mockData = [
|
|
289
|
+
{ label: 'Алексей Смирнов' },
|
|
290
|
+
{ label: 'Екатерина Иванова' },
|
|
291
|
+
{ label: 'Дмитрий Петров' },
|
|
292
|
+
{ label: 'Ольга Васильева' },
|
|
293
|
+
{ label: 'Сергей Сидоров' },
|
|
294
|
+
{ label: 'Мария Кузнецова' },
|
|
295
|
+
{ label: 'Андрей Попов' },
|
|
296
|
+
{ label: 'Анна Николаева' },
|
|
297
|
+
{ label: 'Иван Федоров' },
|
|
298
|
+
{ label: 'Наталья Морозова' },
|
|
299
|
+
{ label: 'Михаил Павлов' },
|
|
300
|
+
{ label: 'Елена Романова' },
|
|
301
|
+
{ label: 'Владимир Киселев' },
|
|
302
|
+
{ label: 'Татьяна Захарова' },
|
|
303
|
+
{ label: 'Николай Семенов' },
|
|
304
|
+
{ label: 'Юлия Белова' },
|
|
305
|
+
{ label: 'Александр Гусев' },
|
|
306
|
+
{ label: 'Оксана Яковлева' },
|
|
307
|
+
{ label: 'Игорь Егорова' },
|
|
308
|
+
{ label: 'Вера Тихомирова' },
|
|
309
|
+
{ label: 'Артем Григорьев' },
|
|
310
|
+
{ label: 'Евгения Козлова' },
|
|
311
|
+
{ label: 'Максим Лебедев' },
|
|
312
|
+
{ label: 'Виктория Калашникова' },
|
|
313
|
+
{ label: 'Константин Абрамов' },
|
|
314
|
+
{ label: 'Светлана Новикова' },
|
|
315
|
+
{ label: 'Юрий Волков' },
|
|
316
|
+
{ label: 'Валентина Воробьева' },
|
|
317
|
+
{ label: 'Павел Сергеев' },
|
|
318
|
+
{ label: 'Людмила Виноградова' },
|
|
319
|
+
{ label: 'Антон Соловьев' },
|
|
320
|
+
{ label: 'Маргарита Цветкова' },
|
|
321
|
+
{ label: 'Роман Трофимов' },
|
|
322
|
+
{ label: 'Лариса Зайцева' },
|
|
323
|
+
{ label: 'Евгений Никитин' },
|
|
324
|
+
{ label: 'Галина Михайлова' },
|
|
325
|
+
{ label: 'Владислав Антонов' },
|
|
326
|
+
{ label: 'Дарья Филатова' },
|
|
327
|
+
{ label: 'Олег Буров' },
|
|
328
|
+
{ label: 'Инна Медведева' },
|
|
329
|
+
{ label: 'Вячеслав Крылов' },
|
|
330
|
+
{ label: 'Тамара Беляева' },
|
|
331
|
+
{ label: 'Кирилл Марков' },
|
|
332
|
+
{ label: 'Марина Пономарева' },
|
|
333
|
+
{ label: 'Борис Захаров' },
|
|
334
|
+
{ label: 'Жанна Савельева' },
|
|
335
|
+
{ label: 'Федор Жуков' },
|
|
336
|
+
{ label: 'Елизавета Логинова' },
|
|
337
|
+
{ label: 'Виктор Рыбаков' },
|
|
338
|
+
{ label: 'Лилия Макарова' },
|
|
339
|
+
];
|
|
340
|
+
|
|
341
|
+
const [value, setValue] = useState('')
|
|
342
|
+
const [suggestions, setSuggestions] = useState(mockData)
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
const getData = async (value) => {
|
|
346
|
+
return new Promise((resolve) => {
|
|
347
|
+
setTimeout(() => {
|
|
348
|
+
resolve(mockData.filter(({ label }) => label.toLowerCase().includes(value.toString().toLowerCase())))
|
|
349
|
+
}, 200)
|
|
350
|
+
})
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
useEffect(() => {
|
|
354
|
+
getData(value).then(setSuggestions)
|
|
355
|
+
}, [value])
|
|
356
|
+
|
|
357
|
+
return (
|
|
358
|
+
<div style=\{{ display: 'block', height:"400px" }}>
|
|
359
|
+
<Autocomplete
|
|
360
|
+
value={value}
|
|
361
|
+
onChange={(e) => setValue(e.target.value)}
|
|
362
|
+
onSuggestionSelect={(e) => setValue(e.label)}
|
|
363
|
+
suggestions={suggestions}
|
|
364
|
+
listMaxHeight="250px"
|
|
365
|
+
filter={() => true} // Отключаем дефолтную фильтрацию
|
|
366
|
+
label="Label"
|
|
367
|
+
placeholder="Placeholder"
|
|
368
|
+
leftHelper="Введите имя Алексей"
|
|
369
|
+
/>
|
|
370
|
+
</div>
|
|
371
|
+
);
|
|
372
|
+
}
|
|
373
|
+
```
|
|
374
|
+
</TabItem>
|
|
375
|
+
<TabItem value="emptyState" label="Empty State">
|
|
376
|
+
Если произошла ошибка, или же к примеру нужно показать некую информацию пользователю, то для этой цели можно использовать компонент `EmptyState`.
|
|
377
|
+
|
|
378
|
+
```tsx live
|
|
379
|
+
import React from 'react';
|
|
380
|
+
import { Autocomplete, EmptyState, Spinner } from '@salutejs/{{ package }}';
|
|
381
|
+
import { IconRefresh } from '@salutejs/plasma-icons';
|
|
382
|
+
|
|
383
|
+
export function App() {
|
|
384
|
+
const mockData = [
|
|
385
|
+
{ label: 'Алексей Смирнов' },
|
|
386
|
+
{ label: 'Екатерина Иванова' },
|
|
387
|
+
{ label: 'Дмитрий Петров' },
|
|
388
|
+
{ label: 'Ольга Васильева' },
|
|
389
|
+
{ label: 'Сергей Сидоров' },
|
|
390
|
+
{ label: 'Мария Кузнецова' },
|
|
391
|
+
{ label: 'Андрей Попов' },
|
|
392
|
+
{ label: 'Анна Николаева' },
|
|
393
|
+
{ label: 'Иван Федоров' },
|
|
394
|
+
{ label: 'Наталья Морозова' },
|
|
395
|
+
{ label: 'Михаил Павлов' },
|
|
396
|
+
{ label: 'Елена Романова' },
|
|
397
|
+
{ label: 'Владимир Киселев' },
|
|
398
|
+
{ label: 'Татьяна Захарова' },
|
|
399
|
+
{ label: 'Николай Семенов' },
|
|
400
|
+
{ label: 'Юлия Белова' },
|
|
401
|
+
{ label: 'Александр Гусев' },
|
|
402
|
+
{ label: 'Оксана Яковлева' },
|
|
403
|
+
{ label: 'Игорь Егорова' },
|
|
404
|
+
{ label: 'Вера Тихомирова' },
|
|
405
|
+
{ label: 'Артем Григорьев' },
|
|
406
|
+
{ label: 'Евгения Козлова' },
|
|
407
|
+
{ label: 'Максим Лебедев' },
|
|
408
|
+
{ label: 'Виктория Калашникова' },
|
|
409
|
+
{ label: 'Константин Абрамов' },
|
|
410
|
+
{ label: 'Светлана Новикова' },
|
|
411
|
+
{ label: 'Юрий Волков' },
|
|
412
|
+
{ label: 'Валентина Воробьева' },
|
|
413
|
+
{ label: 'Павел Сергеев' },
|
|
414
|
+
{ label: 'Людмила Виноградова' },
|
|
415
|
+
{ label: 'Антон Соловьев' },
|
|
416
|
+
{ label: 'Маргарита Цветкова' },
|
|
417
|
+
{ label: 'Роман Трофимов' },
|
|
418
|
+
{ label: 'Лариса Зайцева' },
|
|
419
|
+
{ label: 'Евгений Никитин' },
|
|
420
|
+
{ label: 'Галина Михайлова' },
|
|
421
|
+
{ label: 'Владислав Антонов' },
|
|
422
|
+
{ label: 'Дарья Филатова' },
|
|
423
|
+
{ label: 'Олег Буров' },
|
|
424
|
+
{ label: 'Инна Медведева' },
|
|
425
|
+
{ label: 'Вячеслав Крылов' },
|
|
426
|
+
{ label: 'Тамара Беляева' },
|
|
427
|
+
{ label: 'Кирилл Марков' },
|
|
428
|
+
{ label: 'Марина Пономарева' },
|
|
429
|
+
{ label: 'Борис Захаров' },
|
|
430
|
+
{ label: 'Жанна Савельева' },
|
|
431
|
+
{ label: 'Федор Жуков' },
|
|
432
|
+
{ label: 'Елизавета Логинова' },
|
|
433
|
+
{ label: 'Виктор Рыбаков' },
|
|
434
|
+
{ label: 'Лилия Макарова' },
|
|
435
|
+
];
|
|
436
|
+
|
|
437
|
+
const getData = async () => {
|
|
438
|
+
return new Promise((resolve) => {
|
|
439
|
+
setTimeout(() => {
|
|
440
|
+
resolve(mockData)
|
|
441
|
+
}, 1500)
|
|
442
|
+
})
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
const [isError, setIsError] = useState(true)
|
|
446
|
+
const [isLoading, setIsLoading] = useState(false)
|
|
447
|
+
const [value, setValue] = useState('')
|
|
448
|
+
const [suggestions, setSuggestions] = useState([])
|
|
449
|
+
|
|
450
|
+
const handleGetData = async () => {
|
|
451
|
+
setIsLoading(true)
|
|
452
|
+
|
|
453
|
+
const res = await getData()
|
|
454
|
+
|
|
455
|
+
setIsLoading(false)
|
|
456
|
+
setIsError(false)
|
|
457
|
+
setSuggestions(res)
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
return (
|
|
461
|
+
<div style=\{{ display: 'block', height:"400px" }}>
|
|
462
|
+
<Autocomplete
|
|
463
|
+
value={value}
|
|
464
|
+
onChange={(e) => setValue(e.target.value)}
|
|
465
|
+
onSuggestionSelect={(e) => setValue(e.label)}
|
|
466
|
+
suggestions={suggestions}
|
|
467
|
+
listMaxHeight="250px"
|
|
468
|
+
renderList={isError ? () => <EmptyState icon={<IconRefresh />} description="Произошла ошибка. Попробуйте обновить." buttonText="Обновить" buttonAction={handleGetData} /> : undefined}
|
|
469
|
+
contentRight={isLoading ? <Spinner view="primary" /> : undefined}
|
|
470
|
+
label="Label"
|
|
471
|
+
placeholder="Placeholder"
|
|
472
|
+
leftHelper="Введите имя Алексей"
|
|
473
|
+
/>
|
|
474
|
+
</div>
|
|
475
|
+
);
|
|
476
|
+
}
|
|
477
|
+
```
|
|
478
|
+
</TabItem>
|
|
479
|
+
<TabItem value="portal" label="Portal">
|
|
480
|
+
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
|
|
481
|
+
Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.
|
|
482
|
+
```tsx live
|
|
483
|
+
import React from 'react';
|
|
484
|
+
import { Autocomplete } from '@salutejs/{{ package }}';
|
|
485
|
+
|
|
486
|
+
export function App() {
|
|
487
|
+
const mockData = [
|
|
488
|
+
{ label: 'Алексей Смирнов' },
|
|
489
|
+
{ label: 'Екатерина Иванова' },
|
|
490
|
+
{ label: 'Дмитрий Петров' },
|
|
491
|
+
{ label: 'Ольга Васильева' },
|
|
492
|
+
{ label: 'Сергей Сидоров' },
|
|
493
|
+
{ label: 'Мария Кузнецова' },
|
|
494
|
+
{ label: 'Андрей Попов' },
|
|
495
|
+
{ label: 'Анна Николаева' },
|
|
496
|
+
{ label: 'Иван Федоров' },
|
|
497
|
+
{ label: 'Наталья Морозова' },
|
|
498
|
+
{ label: 'Михаил Павлов' },
|
|
499
|
+
{ label: 'Елена Романова' },
|
|
500
|
+
{ label: 'Владимир Киселев' },
|
|
501
|
+
{ label: 'Татьяна Захарова' },
|
|
502
|
+
{ label: 'Николай Семенов' },
|
|
503
|
+
{ label: 'Юлия Белова' },
|
|
504
|
+
{ label: 'Александр Гусев' },
|
|
505
|
+
{ label: 'Оксана Яковлева' },
|
|
506
|
+
{ label: 'Игорь Егорова' },
|
|
507
|
+
{ label: 'Вера Тихомирова' },
|
|
508
|
+
{ label: 'Артем Григорьев' },
|
|
509
|
+
{ label: 'Евгения Козлова' },
|
|
510
|
+
{ label: 'Максим Лебедев' },
|
|
511
|
+
{ label: 'Виктория Калашникова' },
|
|
512
|
+
{ label: 'Константин Абрамов' },
|
|
513
|
+
{ label: 'Светлана Новикова' },
|
|
514
|
+
{ label: 'Юрий Волков' },
|
|
515
|
+
{ label: 'Валентина Воробьева' },
|
|
516
|
+
{ label: 'Павел Сергеев' },
|
|
517
|
+
{ label: 'Людмила Виноградова' },
|
|
518
|
+
{ label: 'Антон Соловьев' },
|
|
519
|
+
{ label: 'Маргарита Цветкова' },
|
|
520
|
+
{ label: 'Роман Трофимов' },
|
|
521
|
+
{ label: 'Лариса Зайцева' },
|
|
522
|
+
{ label: 'Евгений Никитин' },
|
|
523
|
+
{ label: 'Галина Михайлова' },
|
|
524
|
+
{ label: 'Владислав Антонов' },
|
|
525
|
+
{ label: 'Дарья Филатова' },
|
|
526
|
+
{ label: 'Олег Буров' },
|
|
527
|
+
{ label: 'Инна Медведева' },
|
|
528
|
+
{ label: 'Вячеслав Крылов' },
|
|
529
|
+
{ label: 'Тамара Беляева' },
|
|
530
|
+
{ label: 'Кирилл Марков' },
|
|
531
|
+
{ label: 'Марина Пономарева' },
|
|
532
|
+
{ label: 'Борис Захаров' },
|
|
533
|
+
{ label: 'Жанна Савельева' },
|
|
534
|
+
{ label: 'Федор Жуков' },
|
|
535
|
+
{ label: 'Елизавета Логинова' },
|
|
536
|
+
{ label: 'Виктор Рыбаков' },
|
|
537
|
+
{ label: 'Лилия Макарова' },
|
|
538
|
+
];
|
|
539
|
+
|
|
540
|
+
const ref = useRef(null);
|
|
541
|
+
|
|
542
|
+
return (
|
|
543
|
+
<div style=\{{ position: 'relative', display: 'block', height: "400px" }} ref={ref}>
|
|
544
|
+
<Autocomplete suggestions={mockData} listMaxHeight="250px" label="Label" placeholder="Placeholder" leftHelper="Введите имя Алексей" portal={ref} />
|
|
545
|
+
</div>
|
|
546
|
+
);
|
|
547
|
+
}
|
|
548
|
+
```
|
|
549
|
+
</TabItem>
|
|
550
|
+
</Tabs>
|
|
551
|
+
|
|
552
|
+
## Клавиатурная навигация
|
|
553
|
+
|
|
554
|
+
Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
|
|
555
|
+
|
|
556
|
+
- `Tab, Escape` - закрывает автокомплит. Перемещает фокус на следующий элемент на странице;
|
|
557
|
+
- `Enter` - выбираем подсказку из списка;
|
|
558
|
+
- `Home` - перемещает фокус на первый элемент;
|
|
559
|
+
- `End` - перемещает фокус на последний элемент;
|
|
560
|
+
- `ArrowUp` - перемещает фокус на один элемент выше;
|
|
561
|
+
- `ArrowDown` - перемещает фокус на один элемент ниже;
|
|
@@ -11,7 +11,7 @@ import { SuggestionItem } from './ui/SuggestionItem/SuggestionItem.js';
|
|
|
11
11
|
import { StyledPopover, Ul, InfiniteLoaderWrapper, LeftHelper, base } from './Autocomplete.styles.js';
|
|
12
12
|
import { useKeyNavigation } from './hooks/useKeyboardNavigation.js';
|
|
13
13
|
|
|
14
|
-
var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
|
|
14
|
+
var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.
|
|
@@ -35,6 +35,7 @@ var autocompleteRoot = function autocompleteRoot(Root) {
|
|
|
35
35
|
onScroll = _ref.onScroll,
|
|
36
36
|
listMaxHeight = _ref.listMaxHeight,
|
|
37
37
|
listWidth = _ref.listWidth,
|
|
38
|
+
portal = _ref.portal,
|
|
38
39
|
filter = _ref.filter,
|
|
39
40
|
onSuggestionSelect = _ref.onSuggestionSelect,
|
|
40
41
|
_ref$threshold = _ref.threshold,
|
|
@@ -115,6 +116,8 @@ var autocompleteRoot = function autocompleteRoot(Root) {
|
|
|
115
116
|
offset: [0, 0],
|
|
116
117
|
placement: getPlacements('bottom'),
|
|
117
118
|
isFocusTrapped: false,
|
|
119
|
+
usePortal: Boolean(portal),
|
|
120
|
+
frame: portal,
|
|
118
121
|
target: /*#__PURE__*/React.createElement(StyledTextField, _extends({
|
|
119
122
|
value: value,
|
|
120
123
|
onChange: handleChange,
|
|
@@ -142,7 +145,13 @@ var autocompleteRoot = function autocompleteRoot(Root) {
|
|
|
142
145
|
preventOverflow: false,
|
|
143
146
|
ref: targetRef,
|
|
144
147
|
listWidth: listWidth
|
|
145
|
-
}, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(
|
|
148
|
+
}, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Root, {
|
|
149
|
+
view: view,
|
|
150
|
+
size: size,
|
|
151
|
+
labelPlacement: labelPlacement,
|
|
152
|
+
disabled: disabled,
|
|
153
|
+
readOnly: readOnly
|
|
154
|
+
}, /*#__PURE__*/React.createElement(Ul, {
|
|
146
155
|
id: listId,
|
|
147
156
|
role: "listbox",
|
|
148
157
|
"aria-label": label,
|
|
@@ -156,7 +165,7 @@ var autocompleteRoot = function autocompleteRoot(Root) {
|
|
|
156
165
|
id: "".concat(listId, "/").concat(index),
|
|
157
166
|
focused: focused === index
|
|
158
167
|
});
|
|
159
|
-
}), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd()))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
|
168
|
+
}), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd())))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
|
160
169
|
id: helperTextId,
|
|
161
170
|
disabled: disabled,
|
|
162
171
|
readOnly: readOnly
|