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	Required - List object containing info for rendering. See 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

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		Toggle option. Optional list to be display when choosen

Example

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