Yb-simpleselect NPM

Simpleselect

Универсальный выпадающий список Посмотреть как работает Может быть использован как часть более сложных компонентов

Несколько вариантов использования

Несколько вариантов отображения блока (готовый вид)

Подключение и использование

Импортируем

import SimpleSelect from "yb-simpleselect";

Пример jsx

<SimpleSelect
   data={this.data}
   placeholder="Выберите"
/>

Пропсы

Array data обязательное поле Данные для наполнения выпадающего списка Формат данных: массив объектов
- label - надпись для каждого блока выбора
- value - значение, сохраняемое при выборе блока
- isChecked=false (наполняется автоматически)
String className (default="") Класс для расширения стилей
String label (default="") Текст над элементом
String inputLabel (default="") Текст внутри элемента (в input-е). Это не placeholder!! (если в данных хоть один из элементов isChecked : true, то данный параметр игнорируется) (устанавливается первый элемент с isChecked, а если их несколько, остальные переводятся в isChecked=false)
String placeholder (default="") Серый текст внутри элемента
Object activeValue (default={}) Имя:значение в объекте item, которое мы хотим установить, как выбранное
Boolean isInvalid (default=false) Отобразить с красной окантовкой. Требуется, например, в случае сигнализации ошибки
String labelKey (default="") Имя ключа в массиве данных, значение которого отобразить как надпись для каждого блока выбора Применяется, если в массиве данных нет ключа label, и необходимо использовать другой ключ

События

init() воспроизводится при создании экземпляра модуля, когда в массиве данных есть элемент с isChecked=true
clickOption(item) воспроизводится при выборе любого option. Аргумент - item
isChecked(item) вызывается, когда есть выбранный item В отличие от clickOption(), вызывается при любом выборе item, даже когда не было клика (например, когда значение установили извне, программно)