ui-dropdownlist v2.0.0
ui-dropdownlist
Dropdown list as part of a larger web UI component
Installation
$ npm install ui-dropdownlist --save-devUsage
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}