# UISelect

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

**Since**: 7.0.0 (3.2.0)

| Name             | Type                     | Default                 | 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                           |
| size             | `string`                 | `""large""`   | **Only available for dropdown** Size of select. Variants: large\|small                                         |
| direction        | `string`                 | `""down""`    | **Only available for dropdown** Direction of rendered options list. Variants: down\|up                         |
| type             | `string`                 | `""default""` | **Only available for dropdown** Different types will be passed into this property. Variants default\|secondary |
| disabled         | `boolean`                | `false`                 | **Only available for dropdown** Disable state                                                                  |
| optionsListAlign | `string`                 | `""left""`    | **Only available for dropdown** Options list postion agaist parent                                             |
| tabindex         | `number`                 | `0`                     | **Only available for dropdown** - Tabindex                                                                     |
| isSelected       | `function`               |                         | **Required** - Callback check if selected                                                                      |
| onChangeList     | `function`               |                         | **Required** - Callback when list changes                                                                      |

### Example

```js
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)
          }
      })
    )
}
```

## list

## 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:

| 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

```js
{
    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: [
                    ...
                ]
            }
        }
    ]
}
```