multiselect-qa/README.md

Select с мультивыбором

## Select с мультивыбором


### Зависимости
- [toggle-qa](https://www.npmjs.com/package/toggle-qa)
- [arrow-change-qa](https://www.npmjs.com/package/arrow-change-qa)
- [checkbox-qa](https://www.npmjs.com/package/checkbox-qa)
<br>
<br>
<br>


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

<details>
  <summary>type=SimpleOption (default): обычные options</summary>
  <div>
  Обычные options с возможностью накликивания
  <br>
  <br>
  </div>
</details>

<details>
  <summary>type=CheckboxOption: надписи с checkbox-ами</summary>
  <div>
  Options c checkbox-ами
  <br>
  <br>
  </div>
</details>

<details>
  <summary>type=ColorOption: Квадраты с цветами</summary>
  <div>
  Options в виде цветных квадратов
  </div>
</details>
<br>
<br>

### Пропсы

- type - тип отображения списка
- data - набор данных для списка
- label - текст над элементом
- inputLabel - текст внутри элемента (в input-е)
- showApplyButton true/false(default) - отображать кнопку "Применить"
<br>
<br>
<br>


### Формат данных для SimpleOption, CheckboxOption
```javascript
data = [{
    label : "Видимый текст",
    value : 4, // значение
    isChecked : true // выбор - устанавливается автоматически
}]
```


### Формат данных для ColorOption
```javascript
data = [{
    value : #f99883, // значение, которое нарисует цвет
        Спец.значения (используются особые иконки):
        - transparent - прозрачный
        - multicolor - цветной (несколько цветов)
        - #ffffff - меняется цвет фоновой галочки выбора
    isChecked : true/false
    tooltip : "надпись при наведении" - в разработке
}]
```
<br>


### События
- clickOption() - воспроизводится при выборе любого option
- applyButton() - воспроизводится при нажатии кнопки "Применить"
- clear() - воспроизводится при нажатии крестика (очистить всё)
<br>
<br>
<br>


### Пример jsx
```javascript
<Multiselect
    type="CheckboxOption"
    data={this.data}

    clickOption={this.clickOption}
    applyButton={this.applyButton}
    clear={this.clear}

    label="Внешняя надпись"
    inputLabel="Внутренняя надпись"
    showApplyButton={true}
/>
```