() => {
const props = {
onFoundItems: (...args) => {
console.log('onFoundItems', ...args)
},
onChangeSearchValue: (...args) => {
console.log('onChangeSearchValue', ...args)
},
onSelectItem: (...args) => {
console.log('onSelectItem', ...args)
},
onSelectedItemsChanged: (...args) => {
console.log('onSelectedItemsChanged', ...args)
},
onClickItem: (...args) => {
console.log('onClickItem', ...args)
},
options: [
{
id: 1,
header: 'Республика Коми',
},
{
id: 2,
header: 'Республика Саха',
},
{
id: 3,
header: 'Республика Марий Эл',
},
{
id: 4,
header: 'Республика Мордовия',
},
],
}
return (
<div className="docz-space-between">
<Autocomplete {...props} placeholder="Начните вводить" />
<h2>Заполненное значение</h2>
<Autocomplete
{...props}
value="Республика Марий Эл"
placeholder="Начните вводить"
/>
<h2>Выключенное состояние</h2>
<Autocomplete {...props} disabled placeholder="Начните вводить" />
<h2>Без данных</h2>
<Autocomplete {...props} options={[]} placeholder="Начните вводить" />
<h2>Состояние загрузки</h2>
<Autocomplete {...props} loading placeholder="Начните вводить" />
<h2>Состояние ошибки</h2>
<Autocomplete
{...props}
error="Ошибка!"
placeholder="Начните вводить"
/>
<h2>С иконкой</h2>
<Autocomplete
{...props}
icon="search-icon"
placeholder="Начните вводить"
/>
<h2>Переопределения текста несовпадения</h2>
<Autocomplete
{...props}
value="Несовпадения случаются"
notFound={
<Autocomplete.NotFound>Nothing found</Autocomplete.NotFound>
}
placeholder="Начните вводить"
/>
<h2>Переопределение текста загрузки</h2>
<Autocomplete
{...props}
loading
loader={<Autocomplete.Loader>Loading...</Autocomplete.Loader>}
placeholder="Начните вводить"
/>
<h2>Переопределение сортировки списка</h2>
<Autocomplete
{...props}
sortOptions={options =>
options
.sort((a, b) =>
a.header.toLowerCase() > b.header.toLowerCase() ? 1 : -1,
)
.reverse()
}
placeholder="Начните вводить"
/>
<h2>Много данных</h2>
<Autocomplete
{...props}
placeholder="Много данных"
options={[
{
id: 1,
header: 'Республика Адыгея',
},
{
id: 2,
header: 'Республика Башкортостан',
},
{
id: 3,
header: 'Республика Бурятия',
},
{
id: 4,
header: 'Республика Алтай',
},
{
id: 5,
header: 'Республика Дагестан',
},
{
id: 6,
header: 'Республика Ингушетия',
},
{
id: 7,
header: 'Кабардино-Балкарская Республика',
},
{
id: 8,
header: 'Республика Калмыкия',
},
{
id: 9,
header: 'Карачаево-Черкесская Республика',
},
{
id: 10,
header: 'Республика Карелия',
},
{
id: 11,
header: 'Республика Коми',
},
{
id: 12,
header: 'Республика Марий Эл',
},
{
id: 13,
header: 'Республика Мордовия',
},
{
id: 14,
header: 'Республика Саха',
},
{
id: 15,
header: 'Республика Северная Осетия',
},
{
id: 16,
header: 'Республика Татарстан',
},
{
id: 17,
header: 'Республика Тыва',
},
{
id: 18,
header: 'Удмуртская Республика',
},
{
id: 19,
header: 'Республика Хакасия',
},
{
id: 20,
header: 'Чеченская Республика',
},
{
id: 21,
header: 'Чувашская Республика',
},
{
id: 22,
header: 'Алтайский край',
},
{
id: 23,
header: 'Краснодарский край',
},
{
id: 24,
header: 'Красноярский край',
},
{
id: 25,
header: 'Приморский край',
},
{
id: 26,
header: 'Ставропольский край',
},
{
id: 27,
header: 'Хабаровский край',
},
{
id: 28,
header: 'Владимирская область',
},
{
id: 29,
header: 'Волгоградская область',
},
{
id: 30,
header: 'Вологодская область',
},
{
id: 31,
header: 'Воронежская область',
},
{
id: 32,
header: 'Ивановская область',
},
{
id: 33,
header: 'Иркутская область',
},
{
id: 34,
header: 'Калининградская область',
},
{
id: 35,
header: 'Калужская область',
},
{
id: 36,
header: 'Камчатская область',
},
{
id: 37,
header: 'Кемеровская область',
},
{
id: 38,
header: 'Пензенская область',
},
{
id: 39,
header: 'Псковская область',
},
{
id: 40,
header: 'Ростовская область',
},
{
id: 41,
header: 'Рязанская область',
},
{
id: 42,
header: 'Самарская область',
},
{
id: 43,
header: 'Саратовская область',
},
{
id: 44,
header: 'Сахалинская область',
},
{
id: 45,
header: 'Кировская область',
},
{
id: 46,
header: 'Костромская область',
},
{
id: 47,
header: 'Курганская область',
},
{
id: 48,
header: 'Курская область',
},
{
id: 49,
header: 'Ленинградская область',
},
{
id: 50,
header: 'Липецкая область',
},
{
id: 51,
header: 'Магаданская область',
},
{
id: 52,
header: 'Московская область',
},
{
id: 53,
header: 'Мурманская область',
},
{
id: 54,
header: 'Нижегородская область',
},
{
id: 55,
header: 'Новгородская область',
},
{
id: 56,
header: 'Новосибирская область',
},
{
id: 57,
header: 'Омская область',
},
{
id: 58,
header: 'Оренбургская область',
},
{
id: 59,
header: 'Орловская область',
},
{
id: 60,
header: 'Свердловская область',
},
{
id: 61,
header: 'Смоленская область',
},
{
id: 62,
header: 'Тамбовская область',
},
{
id: 63,
header: 'Тверская область',
},
{
id: 64,
header: 'Томская область',
},
{
id: 65,
header: 'Тульская область',
},
{
id: 66,
header: 'Тюменская область',
},
{
id: 67,
header: 'Ульяновская область',
},
{
id: 68,
header: 'Челябинская область',
},
{
id: 69,
header: 'Читинская область',
},
{
id: 70,
header: 'Ярославская область',
},
{
id: 71,
header: 'г. Москва',
},
{
id: 72,
header: 'г. Санкт-Петербург',
},
{
id: 73,
header: 'Еврейская автономная область',
},
{
id: 74,
header: 'Агинский Бурятский автономный округ',
},
{
id: 75,
header: 'Корякский автономный округ',
},
{
id: 76,
header: 'Ненецкий автономный округ',
},
{
id: 77,
header: 'Таймырский',
},
{
id: 78,
header: 'Усть-Ордынский Бурятский АО',
},
{
id: 79,
header: 'Ханты-Мансийский АО',
},
{
id: 80,
header: 'Амурская область',
},
{
id: 81,
header: 'Архангельская область',
},
{
id: 82,
header: 'Астраханская область',
},
{
id: 83,
header: 'Белгородская область',
},
{
id: 84,
header: 'Брянская область',
},
{
id: 85,
header: 'Чукотский автономный округ',
},
{
id: 86,
header: 'Эвенкийский автономный округ',
},
{
id: 87,
header: 'Ямало-Ненецкий автономный округ',
},
]}
/>
</div>
)
}