Library: pumpValue()

pumpValue() module is a function, which is used to throttle events using a time-handling function, e.g., delay(). It is similar to pumpEvent() but can use fixed form elements.

The definition is very simple:

import delay from './delay';

const pumpValue = (source, target, attrName, ms=500, wrap=delay) =>
  wrap(e => {
    target.setAttribute(attrName, (source || e.target).value);
  }, ms);

Usage

In a module-enabled environment (like Babel) it can be accessed like that:

import pumpValue from '@researchnow/reno/src/utils/pumpValue';

In global-based environments (like a browser) it is frequently mapped to Reno.utils.pumpValue.

pumpValue(source, target, attrName, ms=500, wrap=delay)

The function takes the following arguments:

• source is a form DOM node or null. If specified, its value property is used to get data. Otherwise, the event's target.value is used.
• target is a DOM node, which is usually a web component. It will be controlled by events.
• attrName is an attribute name, which will be set according to events.
• ms is a positive integer, which specifies a time delay to collect events.
• wrap is a time-handling function, which wraps the setting of an attribute. It consumes ms as well.
  • See debounce(), delay(), throttle() as examples of time-handling functions.

This function returns an event handler function.

Examples

The example below updates reno-table according to changes in reno-form.

const renoTable  = document.querySelector('reno-table');
const filterElem = document.querySelector('reno-form input[name="filter"]');

document.documentElement.addEventListener('reno-form-input',
  Reno.utils.pumpValue(filterElem, renoTable, 'detail.value'));