List

import {List} from '@gravity-ui/uikit';

§ItemsHeight

Определяет высоту списка элементов (или функцию, возвращающую значение высоты для списка). Данное свойство может быть полезным, когда высота списка задается динамически, например,(items: []) => number.

§Items

Передает массив элементов для списка:

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} />

Элемент может быть представлен скалярным или произвольным значением (при этом он всегда должен быть truthy). В случае произвольного значения обязательно указывайте функции фильтрации и рендеринга. Рендеринг по умолчанию передает элемент только как текст.

Специальное поле item.disabled делает элемент неактивным.

Настройка рендеринга и высоты открывает множество возможностей для экспериментов. Например, код ниже позволяет эмулировать группы:

<List items={[{title: 'one', group: true,disabled: true}, {title: 'two'},
    {
      title: 'three',
      group: true,
      disabled: true,
    },
    {
      title: 'four',
    },
  ]} onItemClick={(value) => console.log(value)}
  renderItem={(item) => {
    if (item.group) {
      return (
        <div className={'group'}>
          <div className={'select-text'}>{item.title}</div>
        </div>
      );
    }
    return (
      <div className={'select'}>
        <div className={'select-text'}>{item.title}</div>
      </div>
    );
  }}
  itemHeight={(item) => (item.group ? 24 : 36)}
  itemsHeight={160}
  filterItem={(filter) => (item) => item.title.includes(filter)}
/>

§Filterable

Свойство filterable отключает возможность ввода для поиска элемента, если его значение — false. Значение по умолчанию — true.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} filterable={false} />

§Sortable

Свойство sortable позволяет менять местами элементы списка, если его значение — true. Значение по умолчанию — false.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} sortable={true} />

§Виртуализация

Чтобы виртуализация работала, нужно выполнить одно из двух условий:

1. Задать свойство itemsHeight. В этом случае высота списка будет фиксированной и равной указанному значению.
2. Задать родительскому контейнеру списка стиль display: flex. В этом случае список будет подстраиваться под ширину контейнера.

§Внешнее управление

Иногда может потребоваться управлять действиями элементов с клавиатуры, сохраняя фокус на внешнем элементе. В этом случае можно использовать передачу события onKeyDown в список. Аналогичным образом можно передать onFocus и onBlur, если нужно воспроизвести поведение при потере активного элемента.

§Filter

Свойство filter позволяет задать значение фильтра, используемое для внешней сортировки.

§PropTypes