UISelect

Properties

Name Type
props props

new UISelect(props)

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:

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

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.props

Properties

Name Type
list list

UISelect.list

Properties

Name Type Description
label string Only on top level list
title string Only on non-top level lists
type string
values Array.<object>
values.title string
values.list list The list to display as a value

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

results matching ""

    No results matching ""