UNPKG

@hbsis.uikit/react

Version:
384 lines (383 loc) 17.9 kB
<!doctype html> <html lang="en"> <head> <title>Code coverage report for components/menu/index.js</title> <meta charset="utf-8" /> <link rel="stylesheet" href="..\..\prettify.css" /> <link rel="stylesheet" href="..\..\base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(..\..\sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="..\..\index.html">All files</a> / <a href="index.html">components/menu</a> index.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Statements</span> <span class='fraction'>0/93</span> </div> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Branches</span> <span class='fraction'>0/69</span> </div> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Functions</span> <span class='fraction'>0/24</span> </div> <div class='fl pad1y space-right2'> <span class="strong">0% </span> <span class="quiet">Lines</span> <span class='fraction'>0/44</span> </div> </div> </div> <div class='status-line low'></div> <pre><table class="coverage"> <tr><td class="line-count quiet">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107</td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React,<span class="cstat-no" title="statement not covered" > { Component } from 'react'<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> &nbsp; import PropTypes <span class="cstat-no" title="statement not covered" >from 'prop-types'<span class="cstat-no" title="statement not covered" ></span></span> import MenyS<span class="cstat-no" title="statement not covered" >tyled from './menu.styled</span>'<span class="cstat-no" title="statement not covered" ></span> import { MenuIte<span class="cstat-no" title="statement not covered" >m, NormalizeMenuItems }</span> from './<span class="fstat-no" title="function not covered" >menu-item'<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> &nbsp; class M<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >en</span>u extends Component {<span class="cstat-no" title="statement not covered" ></span></span> &nbsp; construct<span class="fstat-no" title="function not covered" >or(pr</span>ops) {<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ></span></span> super(pr<span class="cstat-no" title="statement not covered" >ops)</span> this.state = { items: props.items, } } &nbsp; componentWillReceiveProps (nextProps) { this.setState({ items: nextProps.items, }) } &nbsp; onSelectMenu = (m<span class="fstat-no" title="function not covered" >en</span>u, parentIndex, ownIndex) =&gt; { const { onSelectM<span class="cstat-no" title="statement not covered" >enu } = this.props</span> th<span class="cstat-no" title="statement not covered" >is.updateSelected(parentIndex, ownIndex).then(() <span class="fstat-no" title="function not covered" >=&gt;</span> {</span> on<span class="cstat-no" title="statement not covered" >SelectMenu &amp;&amp; onSelectMenu(menu)</span> }) }<span class="cstat-no" title="statement not covered" ></span> &nbsp; updateSelected = (p<span class="fstat-no" title="function not covered" >ar</span>entIndex, ownIndex) =&gt; { const { it<span class="cstat-no" title="statement not covered" >ems } = this.state</span> re<span class="cstat-no" title="statement not covered" >turn new Promise((r<span class="fstat-no" title="function not covered" >es</span>olve) =&gt; {</span> &nbsp; const listItems = <span class="cstat-no" title="statement not covered" >items.map(<span class="fstat-no" title="function not covered" >(i</span>tem, index) =&gt; {</span> const parentMatch = <span class="cstat-no" title="statement not covered" >(index === parentIndex</span>); re<span class="cstat-no" title="statement not covered" >turn {</span> ...item, active: parentMatch, opened: parentMatch &amp;&amp; item.items, items: item.items &amp;&amp; item.items.map((s<span class="fstat-no" title="function not covered" >ub</span>Item, subMenuIndex) =&gt; ({<span class="cstat-no" title="statement not covered" ></span> ...subItem, active: (parentMatch &amp;&amp; subMenuIndex === ownIndex), })) } }) &nbsp; th<span class="cstat-no" title="statement not covered" >is.setState({ items: listItems }, () <span class="fstat-no" title="function not covered" >=&gt;</span> {</span> re<span class="cstat-no" title="statement not covered" >solve()</span> }) }) }<span class="cstat-no" title="statement not covered" ></span> &nbsp; onToggleMenu = (m<span class="fstat-no" title="function not covered" >en</span>u, parentIndex, ownIndex) =&gt; { const { onToggleM<span class="cstat-no" title="statement not covered" >enu } = this.props</span> th<span class="cstat-no" title="statement not covered" >is.updateSelected(parentIndex, ownIndex).then(() <span class="fstat-no" title="function not covered" >=&gt;</span> {</span> on<span class="cstat-no" title="statement not covered" >ToggleMenu &amp;&amp; onToggleMenu(menu)</span> }) }<span class="cstat-no" title="statement not covered" ></span> &nbsp; itemIsActive = (i<span class="fstat-no" title="function not covered" >te</span>m) =&gt; { const { activeI<span class="cstat-no" title="statement not covered" >tem } = this.props</span> &nbsp; if<span class="cstat-no" title="statement not covered" > (item.active !== undefined)</span> <span class="cstat-no" title="statement not covered" > return item.active</span> &nbsp; let hasActiveChildren = fa<span class="cstat-no" title="statement not covered" >lse</span> if<span class="cstat-no" title="statement not covered" > (item.items &amp;&amp; item.items.length &gt; 0) {</span> //possui filhos //se algum filho for ativo deve ativar o pai tambem ha<span class="cstat-no" title="statement not covered" >sActiveChildren = item.items.filter(this.itemIsActive).length &gt; 0</span> } &nbsp; re<span class="cstat-no" title="statement not covered" >turn (activeItem !== null) ? (item.key === activeItem) || hasActiveChildren : false</span> }<span class="cstat-no" title="statement not covered" ></span> &nbsp; normalizeItens = ()<span class="fstat-no" title="function not covered" > =</span>&gt; { co<span class="cstat-no" title="statement not covered" >nst { prefix</span>, activeI<span class="cstat-no" title="statement not covered" >tem } = this.props<span class="cstat-no" title="statement not covered" ></span></span> const { it<span class="cstat-no" title="statement not covered" >ems } = this.state</span> &nbsp; re<span class="cstat-no" title="statement not covered" >turn (</span> items.map((i<span class="fstat-no" title="function not covered" >te</span>m, index) =&gt; { it<span class="cstat-no" title="statement not covered" >em.active = this.itemIsActive(item)</span> re<span class="cstat-no" title="statement not covered" >turn NormalizeMenuItems(item, prefix, this.onSelectMenu, this.onToggleMenu, index)</span> }) ) }<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ></span></span></span></span></span></span> &nbsp; render () { co<span class="cstat-no" title="statement not covered" >nst { width</span> = '196px', ite<span class="cstat-no" title="statement not covered" >ms = [], chil</span>dren } =<span class="cstat-no" title="statement not covered" > this.props<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ></span></span></span></span> re<span class="cstat-no" title="statement not covered" >turn (</span> &lt;MenyStyled width={width}&gt; {items &amp;&amp; items.length &gt; 0 &amp;&amp; this.normalizeItens()} {(!items || items.length == 0) &amp;&amp; (children &amp;&amp; children.length &gt; 0) &amp;&amp; children} &lt;/MenyStyled&gt; ) }<span class="cstat-no" title="statement not covered" ></span> } &nbsp; <span class="cstat-no" title="statement not covered" >Menu.propTypes = {</span> children: PropTypes.node, width: PropTypes.string, items: PropTypes.array, activeItem: PropTypes.string<span class="cstat-no" title="statement not covered" ></span> } &nbsp; export { MenuItem }<span class="cstat-no" title="statement not covered" ></span> export { Menu } &nbsp;</pre></td></tr> </table></pre> <div class='push'></div><!-- for sticky footer --> </div><!-- /wrapper --> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Sat May 05 2018 12:13:10 GMT-0300 (Hora oficial do Brasil) </div> </div> <script src="..\..\prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="..\..\sorter.js"></script> </body> </html>