# UISelect

This component renders a list of selectable items. Toggles, Buttons or Dropdown. Should be rewritten because kind of mess.

### Properties

| Name             | Type                     | Description                                                                                   |
| ---------------- | ------------------------ | --------------------------------------------------------------------------------------------- |
| list             | [`list`](#UISelect.list) | **Required** - List object containing info for rendering. See [UISelect.list](#UISelect.list) |
| placeholder      | `string`                 | For dropdown. To provied placeholder value                                                    |
| emptyOptionLabel | `string`                 | For dropdown. Used insted of placeholder if want to provied reset option to dropdown          |
| isSelected       | `function`               | **Required** - Callback check if selected                                                     |
| onChangeList     | `function`               | **Required** - Callback when list changes                                                     |

### Example

```javascript
import {UISelect} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
      $$(UISelect, {
          list: this.state.list,
          onChangeList: (listItems, selectedItem) => {
             this.addToSelectedItems(selectedItem)
          },
          isSelected: (listItems, item) => {
              const selectedItems = this.getSelectedItems()
              return selectedItems.some((selectedItem) => return selectedItem.value === item.value)
          }
      })
    )
}
```

## UISelect.list

This component renders a list of selectable items.

It supports 3 types of lists: drop-down list, toggle list and button list.

The list is defined as a property, that should contain:

### Properties

| Name         | Type                     | Default | Description                                                                         |
| ------------ | ------------------------ | ------- | ----------------------------------------------------------------------------------- |
| label        | `string`                 |         | **Required** - Only on top level list                                               |
| type         | `string`                 |         | **Required** - Type of output. toggle\|button\|dropdown                             |
| multivalue   | `boolean`                | `false` | Determines you should be able to select many options. **Don't works with dropdown** |
| values       | `Array.<object>`         |         | **Required** - List with values                                                     |
| values.title | `string`                 |         | **Required** - Title for value in list                                              |
| values.list  | [`list`](#UISelect.list) |         | Toggle option. Optional list to be display when choosen                             |

### Example

```javascript
{
    label: '[a list label]',
    type: '[dropdown/toggle/button]'
    values: [
        {
            title: 'title 1', ...
        },
        {
            title: 'title 2', ...
        },
        {
            title: 'Additional options',
            list: {
                title: 'Other options',
                type: '[dropdown/toggle/button]',
                values: [
                    ...
                ]
            }
        }
    ]
}
```