@hbsis.uikit/react
Version:
Biblioteca ReactJS
348 lines (347 loc) • 15.9 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for components/toggle/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/toggle</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/79</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Branches</span>
<span class='fraction'>0/59</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Functions</span>
<span class='fraction'>0/18</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">0% </span>
<span class="quiet">Lines</span>
<span class='fraction'>0/27</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</td><td class="line-coverage quiet"><span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </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="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>
import PropTypes <span class="cstat-no" title="statement not covered" >from 'prop-types'<span class="cstat-no" title="statement not covered" ></span></span>
import cx from 'cl<span class="cstat-no" title="statement not covered" >assnames'<span class="cstat-no" title="statement not covered" ></span></span>
import ToggleS<span class="cstat-no" title="statement not covered" >tyled from './toggle.styled</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="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 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>
const IconOn <span class="cstat-no" title="statement not covered" >= ({ colo<span class="fstat-no" title="function not covered" >r = '#6</span>197C6' }) => (<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>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6" viewBox="0 0 9 6">
<path fill={color} fillRule="evenodd" d="M2.293 5.707l-2-2a.999.999 0 1 1 1.414-1.414L3 3.586 6.293.293a.999.999 0 1 1 1.414 1.414l-4 4a.997.997 0 0 1-1.414 0z" />
</svg>
</span>
)
const IconOff <span class="cstat-no" title="statement not covered" >= ({ colo<span class="fstat-no" title="function not covered" >r = '#95</span>A3B7' }) => (<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>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
<path fill={color} fillRule="evenodd" d="M1.586 3L.293 1.707A.999.999 0 1 1 1.707.293L3 1.586 4.293.293a.999.999 0 1 1 1.414 1.414L4.414 3l1.293 1.293a.999.999 0 1 1-1.414 1.414L3 4.414 1.707 5.707A.999.999 0 1 1 .293 4.293L1.586 3z" />
</svg>
</span>
)
class Tog<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >gl</span>e extends Component {<span class="cstat-no" title="statement not covered" ></span></span>
construct<span class="fstat-no" title="function not covered" >or(prop</span>s) {<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 = {
on: props.on || false
}
}
onClick = ()<span class="fstat-no" title="function not covered" > =</span>> {
co<span class="cstat-no" title="statement not covered" >nst { onChan</span>ge, onCheck<span class="cstat-no" title="statement not covered" >, onUnCheck, disabled</span> } = this.<span class="cstat-no" title="statement not covered" >props<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ></span></span></span>
if<span class="cstat-no" title="statement not covered" > (disabled)</span>
<span class="cstat-no" title="statement not covered" > return</span>
th<span class="cstat-no" title="statement not covered" >is.setState({</span>
on: !this.state.on
},<span class="fstat-no" title="function not covered" > (</span>) => {
if<span class="cstat-no" title="statement not covered" > (onChange) {</span>
on<span class="cstat-no" title="statement not covered" >Change(this.state.on)</span>
}
if<span class="cstat-no" title="statement not covered" > (this.state.on && onCheck) {</span>
on<span class="cstat-no" title="statement not covered" >Check()</span>
}
el<span class="cstat-no" title="statement not covered" >se if (!this.state.on && onUnCheck) {</span>
on<span class="cstat-no" title="statement not covered" >UnCheck()</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="fstat-no" title="function not covered" ></span></span></span></span>
render () {
const {<span class="cstat-no" title="statement not covered" > on } = this.s</span>tate
co<span class="cstat-no" title="statement not covered" >nst { posit</span>ion, label,<span class="cstat-no" title="statement not covered" > disabled } = th</span>is.props<span class="cstat-no" title="statement not covered" ><span class="cstat-no" title="statement not covered" ></span></span>
re<span class="cstat-no" title="statement not covered" >turn (</span>
<ToggleStyled onClick={this.onClick} disabled={disabled}>
{label !== null && <div className='widget-toggle-label'>{label}</div>}
<div className={cx({
[position]: true
}, 'element-position')}>
<div className={cx({
'on': on
}, 'widget-toggle-container')}>
<div className='toggle-labels'>
<IconOn color={disabled ? '#aaaaaa' : '#6197C6'} />
<IconOff color={disabled ? '#aaaaaa' : '#95A3B7'} />
</div>
<div className='toggle-button' />
</div>
</div>
</ToggleStyled>
)
}<span class="cstat-no" title="statement not covered" ></span>
}
<span class="cstat-no" title="statement not covered" >Toggle.propTypes = {</span>
position: PropTypes.oneOf(['left', 'center', 'right']),
label: PropTypes.string,
on: PropTypes.bool,
onChange: PropTypes.func,
onCheck: PropTypes.func,
onUnCheck: PropTypes.func
}
<span class="cstat-no" title="statement not covered" >Toggle.defaultProps = {</span>
position: 'left',
label: null,
on: false,
onChange: () => { }<span class="fstat-no" title="function not covered" >,</span>
onCheck: () => { }<span class="fstat-no" title="function not covered" >,</span>
onUnCheck: () => { }<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ></span></span>
}
export { Toggle }
</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>