EditListSelector Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference
• ListPage Component Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • Inherited methods
• Children
• DOM element properties

Introduction

Syntax

tml`
	<EditListSelector />
`

The EditListSelector component is a Selector component that renders a <div> with a list of selectable items. The list has a header with buttons that allow editing the list, including:

• Adding items.
• Deleting items.
• Sorting the list of items.
• Manually rearranging the order of the items.

The EditListSelector component must be passed an sVar attribute specifying a Selector input state variable that contains the options and the selected value. The state variable coordinates most list actions, including item selection, item addition, item deletion, and reordering of the item list.

Attributes

• Standard properties
  The EditListSelector component accepts the standard attributes.
• onAdd
  A callback function to be invoked when a new item is requested to be added to the list. The function has no arguments and should add a new entry to the sVar state variable's options. The function can do this asynchronously. For example, it can first ask the user for item name.
• onDelete
  A callback function to be invoked when a list item is is requested to be deleted. The function has one argument containing the value of the option to be deleted. It should delete the option associated with the value from the sVar state variable and set a new selected option, if required. If no options are left, it should do what's required.
• onSort
  A callback function that will be invoked when the list's 'Sort' button is pressed. The function has no arguments and should sort the sVar state variable's options in a standard order. If not present or falsey, the 'Sort' button is not shown.
• onClick
  A callback function that will be invoked when an item is clicked. The function has a single value argument which is the value associated with the clicked item. The sVar state variable is set to the clicked item's value prior to calling the onClick function.
• onClickThru
  A callback function that will be invoked when an already selected item is clicked. If an onClickThru function is defined, all items will show a &rightChevron; symbol to indicate that there is information that will be revealed on a second click. When called, the onClickThru function should reveal any desired information.
• title
  A title string that to be displayed on the header at the top of the list.
• sVar
  a Selector input state variable that contains the options and the selected value.

Instance methods

These methods are intended to be used by parent components to dynamically change the properties of the rendered components without re-rendering.

Inherited methods

• Component methods

Children

The EditListSelector component ignores any children.

DOM element properties

• The EditListSelector component renders a <ul> element containing a <li> element for each option.
• The EditListSelector <ul> element has a CSS class string that contains listSelector.
• An <li> element is rendered for each option. Each <li> element has a CSS class string that contains editList_item.
• The highlighted <li> element will have a CSS class string that contains editList_item-sel. The other will have editList_item-unsel.