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

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

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

Last updated