UISelect

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

Since: 6.4.0 (3.2.0)

Properties

Name	Type	Default	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
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
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: [
                    ...
                ]
            }
        }
    ]
}