docs/global.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Global</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Global</h1>
<section>
<header>
<h2></h2>
</header>
<article>
<div class="container-overview">
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="compactArray"><span class="type-signature"></span>compactArray<span class="signature">(arr)</span><span class="type-signature"> → {array}</span></h4>
<div class="description">
Eliminates null/undefined values from array (flow compliant)
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>arr</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Source array</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="compactArray.js.html">compactArray.js</a>, <a href="compactArray.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
<h4 class="name" id="debounce"><span class="type-signature"></span>debounce<span class="signature">(fn, time)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Reduces multiple function calls, which are fired in quick succession to
a single function call (i.e. to reduce function calls on scroll events.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Function to debounce</td>
</tr>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Time to wait until function is called - will be reset
on every invocation of the debounced function in the given timeframe.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="debounce.js.html">debounce.js</a>, <a href="debounce.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Debounced function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id="first"><span class="type-signature"></span>first<span class="signature">(arr)</span><span class="type-signature"> → {element}</span></h4>
<div class="description">
Returns the first element of an array
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>arr</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="first.js.html">first.js</a>, <a href="first.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
First element of the array
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">element</span>
</dd>
</dl>
<h4 class="name" id="generateMarkup"><span class="type-signature"></span>generateMarkup<span class="signature">(markup)</span><span class="type-signature"> → {object}</span></h4>
<div class="description">
Given a string containing markup renders the markup into a
React component. This needs to be called inside the
'dangerouslySetInnerHTML' prop to work.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>markup</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">String containing HTML</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="generateMarkup.js.html">generateMarkup.js</a>, <a href="generateMarkup.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Object which is transformed to innerHTML by
dangerouslySetInnerHTML
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
<h4 class="name" id="immutablyDeleteProperty"><span class="type-signature"></span>immutablyDeleteProperty<span class="signature">(obj, property)</span><span class="type-signature"> → {object}</span></h4>
<div class="description">
Removes a property from an object and returns a new object. The original
object is not altered.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>obj</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Object to delete property from</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">property to delete</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="immutablyDeleteProperty.js.html">immutablyDeleteProperty.js</a>, <a href="immutablyDeleteProperty.js.html#line5">line 5</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
new object without the specified property
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
<h4 class="name" id="insertInArrIf"><span class="type-signature"></span>insertInArrIf<span class="signature">(condition, value)</span><span class="type-signature"> → {array}</span></h4>
<div class="description">
Conditionally inserts a value into an array. To make practical use of this
funciton inside an array you have to use the array spread operator on the
result.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>condition</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">condition to determine if property should be inserted</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="description last">value to insert</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="insertInArrIf.js.html">insertInArrIf.js</a>, <a href="insertInArrIf.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
either empty or containing the new value
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
<h4 class="name" id="insertInObjIf"><span class="type-signature"></span>insertInObjIf<span class="signature">(condition, property, value)</span><span class="type-signature"> → {object}</span></h4>
<div class="description">
Conditionally inserts a key-value pair into an object. To make practical
use of this function inside an object you have to use the object spread
operator on the result
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>condition</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">condition to determine if property should be inserted</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">property to insert</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">any</span>
</td>
<td class="description last">property value</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="insertInObjIf.js.html">insertInObjIf.js</a>, <a href="insertInObjIf.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
new object either empty or containing the inserted property only
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
<h4 class="name" id="last"><span class="type-signature"></span>last<span class="signature">(arr)</span><span class="type-signature"> → {element}</span></h4>
<div class="description">
Returns the last element of an array
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>arr</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="last.js.html">last.js</a>, <a href="last.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Last element of the array
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">element</span>
</dd>
</dl>
<h4 class="name" id="objArrayToKeyedObj"><span class="type-signature"></span>objArrayToKeyedObj<span class="signature">(arr, property)</span><span class="type-signature"> → {object}</span></h4>
<div class="description">
Converts an array of objects to an object keyed by a specific property,
where each key is the value of the property and the value is the actual object.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>arr</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array containing objects each containing a specific property</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Property to key objects by</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="objArrayToKeyedObj.js.html">objArrayToKeyedObj.js</a>, <a href="objArrayToKeyedObj.js.html#line5">line 5</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
<h4 class="name" id="objToArray"><span class="type-signature"></span>objToArray<span class="signature">(obj)</span><span class="type-signature"> → {array}</span></h4>
<div class="description">
Converts an object to an array of its values. This is basically the same
as Object.values(). The latter sometimes has some unintended effects on
flow, which is why we currently fallback to this helper.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>obj</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Object to convert</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="objToArray.js.html">objToArray.js</a>, <a href="objToArray.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Array of values
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
<h4 class="name" id="partial"><span class="type-signature"></span>partial<span class="signature">(fn)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Function partially apply arguments to a function. (Left to right)
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Function to apply to.</td>
</tr>
<tr>
<td class="name"><code>...args</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Arguments to apply</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="partial.js.html">partial.js</a>, <a href="partial.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Partially applied function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id="pipe"><span class="type-signature"></span>pipe<span class="signature">(f1)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Pipes the output of functions as arguments into the next function
(from left to right).
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>f1</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">first function to call</td>
</tr>
<tr>
<td class="name"><code>...fns</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Additional functions to pipe through</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="pipe.js.html">pipe.js</a>, <a href="pipe.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Composed function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>const splitString = str => str.split('')
const getLength = arr => arr.length
pipe(splitString, getLength)('Hello world') // => 11</code></pre>
<h4 class="name" id="range"><span class="type-signature"></span>range<span class="signature">(start, end)</span><span class="type-signature"> → {array}</span></h4>
<div class="description">
Creates an array containing a range of numbers.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>start</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">First number of the range, array index 0</td>
</tr>
<tr>
<td class="name"><code>end</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Endindex, not included inside the resulting array</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="range.js.html">range.js</a>, <a href="range.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
array of numbers
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>range(2, 6) // => [2, 3, 4, 5]</code></pre>
<h4 class="name" id="sortByProperty"><span class="type-signature"></span>sortByProperty<span class="signature">(property, order, list)</span><span class="type-signature"> → {array}</span></h4>
<div class="description">
Given an array of objects sorts the array by the given property of
each object in either ascending or descending order.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Property to sort by</td>
</tr>
<tr>
<td class="name"><code>order</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Should be either 1 or -1</td>
</tr>
<tr>
<td class="name"><code>list</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">list of objects to sort</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="sortByProperty.js.html">sortByProperty.js</a>, <a href="sortByProperty.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Sorted list
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
<h4 class="name" id="throttle"><span class="type-signature"></span>throttle<span class="signature">(fn, time, context)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Makes sure that a given function is only called once in a specified
timeframe.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Function to call after timeout</td>
</tr>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last">Timeout in ms</td>
</tr>
<tr>
<td class="name"><code>context</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Useful for throttling object methods</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="throttle.js.html">throttle.js</a>, <a href="throttle.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Throttled function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id="toggleClass"><span class="type-signature"></span>toggleClass<span class="signature">(node, className, condition)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
Toggles the class on a DOM node by a given condition
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>node</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last">Domnode to add/remove class to/from</td>
</tr>
<tr>
<td class="name"><code>className</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Class to add/remove</td>
</tr>
<tr>
<td class="name"><code>condition</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">Expression that resolves to true/false</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="toggleClass.js.html">toggleClass.js</a>, <a href="toggleClass.js.html#line3">line 3</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#compactArray">compactArray</a></li><li><a href="global.html#debounce">debounce</a></li><li><a href="global.html#first">first</a></li><li><a href="global.html#generateMarkup">generateMarkup</a></li><li><a href="global.html#immutablyDeleteProperty">immutablyDeleteProperty</a></li><li><a href="global.html#insertInArrIf">insertInArrIf</a></li><li><a href="global.html#insertInObjIf">insertInObjIf</a></li><li><a href="global.html#last">last</a></li><li><a href="global.html#objArrayToKeyedObj">objArrayToKeyedObj</a></li><li><a href="global.html#objToArray">objToArray</a></li><li><a href="global.html#partial">partial</a></li><li><a href="global.html#pipe">pipe</a></li><li><a href="global.html#range">range</a></li><li><a href="global.html#sortByProperty">sortByProperty</a></li><li><a href="global.html#throttle">throttle</a></li><li><a href="global.html#toggleClass">toggleClass</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Jan 10 2018 15:04:34 GMT+0100 (CET)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>