MultiSelectorInput

Свойства

• id (string):
  Уникальный идентификатор компонента.
• name (string):
  Имя для поля ввода, используемого в формах.
• class (string):
  Дополнительные CSS-классы для компонента.
• classList (JSX.HTMLAttributes<HTMLDivElement>['classList']):
  Дополнительные CSS-классы в виде объекта, который поддерживает динамическое назначение классов.
• style (JSX.CSSProperties):
  Инлайн-стили для компонента.
• formId (string):
  Идентификатор формы, к которой привязан компонент.
• placeholder (string):
  Текст-заполнитель, который отображается, когда нет выбранных элементов.
• clearable (boolean):
  Определяет, можно ли очищать выбранные значения. Если true, отображается иконка очистки.
• wrappable (boolean):
  Определяет, можно ли переносить строки в списке значений. Это полезно для длинных списков, которые могут занимать несколько строк.
• disabled (boolean):
  Отключает компонент, делая его недоступным для взаимодействия.
• forceLoading (boolean):
  Принудительно включает режим загрузки, когда отображается индикатор загрузки.
• store ([get: any, set: (field: string, value: (string | number)[]) => void]):
  Опциональное хранилище для работы с состоянием выбора. Поддерживает управление через массив идентификаторов.
• items (SelectorItem[]):
  Локальный массив элементов, которые можно выбрать.
• itemsUrl (string):
  URL для загрузки элементов с удалённого сервера. Поддерживает динамическую загрузку данных по мере фильтрации.
• value (SelectorItem[] | SelectorItem['id'][]):
  Текущее значение выбора. Может быть массивом объектов элементов или массивом их идентификаторов.
• valueUrl (string):
  URL для получения данных по идентификатору, если value передано в виде массива идентификаторов.
• itemComponent (string):
  Компонент для рендеринга каждого элемента в выпадающем списке.
• valueComponent (string):
  Компонент для рендеринга выбранных значений.
• onSelect (function(items: SelectorItem[])):
  Функция-обработчик, которая вызывается при выборе одного или нескольких элементов. Возвращает массив выбранных элементов.
• onInput (function(items: SelectorItem['id'][])):
  Функция-обработчик, которая вызывается при изменении выбранных значений. Возвращает массив идентификаторов выбранных элементов.
• onKeyDown (function(event: KeyboardEvent)):
  Функция-обработчик для события нажатия клавиш при фокусе на элементе.

Важные моменты

• Dropdown:
  Компонент поддерживает отображение выпадающего списка с элементами, который появляется при клике на поле или вводе текста для фильтрации.
• Debounce:
  Используется для оптимизации фильтрации данных, срабатывая только через заданное время (700 мс) после последнего ввода.
• Spinner:
  Индикатор загрузки отображается, когда данные загружаются или когда включён флаг forceLoading.
• Фильтрация элементов:
  Компонент поддерживает как локальную, так и удалённую фильтрацию через метод filterItems.