ui-dropdownlist

Dropdown list as part of a larger web UI component

Installation

$ npm install ui-dropdownlist --save-dev

Usage

const DropdownList = require('ui-dropdownlist');
const options = {
  // Set up options here (see below)
};

const someControl = new DropdownList(options);
someContainerElement.appendChild(someControl.element);
someControl.getValue();

Options

Type: {Object}

width

Type: {String}

Optional. Default: 100%.

Sets the width of the input element.

tabindex

Type: {Integer}

The value of tabindex attribute to be set for the DOM element. Default: 0.

validator

Type: {Function}

A function that will be used to validate the element's current value. Any truthy value returned by the function will mean the element's value is valid. Any falsy value returned by the function will mean the element's value is NOT valid.

If omitted, all element's values are treated as valid.

When called, the function will be passed the following arguments:

• {String} val - Current element's value

onValueChange

Type: {Function | Array<Function>}

Callback function(s) that will be called every time the value of the element changes.

When called, the function will be passed the following arguments:

• {String} val - New value of the element.

onValidationStatusChange

Type: {Function | Array<Function>}

Callback function(s) that will be called every time the validation status of the element changes.

When called, the function will be passed the following arguments:

• {Boolean} isValid - New validation status.

API

Properties

element

Type: {HTMLSelectElement}

Returns reference to the DOM node created by the constructor.

isValid

Type: {Boolean}

Returns the current validation status of the element.

Methods

focus()

Sets input focus on the element.

Return: {undefined}

setValue(val)

Sets the element's value. If the element's item collection doesn't contain an item with val value, the selected value doesn't change.

Parameters:

• {String} val - New value

Return: {undefined}

getValue()

Gets the current value of the element.

Return: {String}

getItems()

Gets the collection of value, label pairs of all items the element includes.

Return: {Array<String, String>}

enable()

Enables the input field.

Return: {undefined}

disable()

Disables the input field.

Return: {undefined}

addItem(val, label)

Add new item to the end of the item list.

Parameters:

• {String} val - Value of the item.
• {String} label - Text label of the item.

Return: {undefined}

addItemBefore(val, label, beforeVal)

Add new item before an existing item. If no item with value beforeVal is present on the item list, the new item is added to the end of the list.

Parameters:

• {String} val - Value of the new item.
• {String} label - Text label of the new item.
• {String} beforeVal - Value of existing item the new item has to be added before.

Return: {undefined}

addItemAfter(val, label, afterVal)

Add new item after an existing item. If no item with value afterVal is present on the item list, the new item is added to the end of the list.

Parameters:

• {String} val - Value of the new item.
• {String} label - Text label of the new item.
• {String} afterVal - Value of existing item the new item has to be added after.

Return: {undefined}

removeItem(val)

Remove an existing item from the item list.

If no item with value val is present on the item list, nothing happens.

If the item with value val is currently selected, the first item on the list will become selected.

Parameters:

• {String} val - Value of the removed item.

Return: {undefined}

empty()

Remove all items from the item list.

Return: {undefined}