UIDropdown

Simple Drop down component, which renders a select-element containing option-elements.

Properties

Name

Type

Default

Description

options

Array.<{label: string, value: *}>

Required - An array of Objects with "label" and "value" properties

header

string

Optional header property, renders an h2-element above the dropdown

disabled

boolean

false

Set to true to disable selection of the dropdown

onChangeList

function

Required - Callback function when selected option changes. Selected item's value as parameter

isSelected

function

Required - Callback which should return true for the currently selected option, runs for each item when rendered and gets all options and current option as parameters.

Example

import {UIDropdown} from 'writer'

render($$) {
  const el = $$('div')
  return el.append(
     $$(UIDropdown, {
         options: [ 
             {label: "one", value: 1}, 
             {label: "two", value: 2} 
         ],
         header: "One or two",
         onChangeList: (value) => { this.extendState({ selectedValue: value }) },
         isSelected: (options, option) => { return option.value === this.state.selectedValue }
     })
  )
}

Last updated