ui-iterator

Iterator element as part of a larger web UI component

Installation

$ npm install ui-iterator --save-dev

Usage

const Iterator = require('ui-iterator');
const options = {
  // Set up options here (see below)
};
 
const someIterator = new Iterator(options);
someContainerElement.appendChild(someIterator.element);
someIterator.getValue();

Options

Type: {Object}

tabindex

Type: {Integer}

The value of tabindex attribute to be set for the DOM element of the left (decrementing) button. Default: 1. The right (incrementing) button's tabindex will get +1.

incrementor

Type: {Function}

A function that is supposed to produce the next value to be displayed in the element when a user clicks the increment button.

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

• {Any} currentVal - the current element's value.

The function is supposed to return an object with properties:

• {Any} value - the value that is supposed to be returned by the element's getValue() method;
• {String} label - a text label that is supposed to be displayed in the element;
• {Boolean} end - true if there will not be the next value; the increment button becomes disabled.

decrementor

Type: {Function}

The same as incrementor but for decrementing value.

initialValue

Type: {Object}

Sets up the initial state of the element before any user interaction.

Properties:

• {Any} value - the value that is supposed to be returned by the element's getValue() method;
• {String} label - a text label that is supposed to be displayed in the element;
• {Boolean} incrementAvailable - if false, the increment button is set up in the disabled mode;
• {Boolean} decrementAvailable - if false, the decrement button is set up in the disabled mode.

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.

API

Properties

element

Type: {HTMLElement}

Returns reference to the DOM node created by the constructor.

Methods

setValue(valueData)

Sets the element's value.

Parameters:

• {Object} valueData - an object describing the new state of the element.

Properties:

• {Any} value - the value that is supposed to be returned by the element's getValue() method;
• {String} label - a text label that is supposed to be displayed in the element;
• {Boolean} incrementAvailable - if false, the increment button is set up in the disabled mode;
• {Boolean} decrementAvailable - if false, the decrement button is set up in the disabled mode.

Return: {undefined}

getValue()

Gets the current value of the element.

Return: {Any}