yb-simpleselect

Simpleselect

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

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

type=SimpleOption (default): обычные options

Обычные options с возможностью накликивания

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

typeSelect=Default (default): обычный, окантованный div-input

Блок с рамкой, внутри которого отобаражен label выбранного элемента

typeSelect=TablecellSelect: div-input без окантовки

Блок без окантовки, является (визуально) ячейкой таблицы

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

• Импортируем

import SimpleSelect from "yb-simpleselect";

• Пример jsx

```javascript ```

Пропсы

• 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, даже когда не было клика (например, когда значение установили извне, программно)