UNPKG

@git-temporal/git-temporal-react

Version:

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

283 lines (282 loc) 7.99 kB
<!doctype html> <html lang="en"> <head> <title>Code coverage report for app/components/Popup.tsx</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">app/components</a> Popup.tsx </h1> <div class='clearfix'> </div> </div> <div class='status-line high'></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</td><td class="line-coverage quiet"><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-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">12x</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-yes">12x</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-yes">12x</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-yes">12x</span> <span class="cline-any cline-yes">12x</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-yes">26x</span> <span class="cline-any cline-yes">26x</span> <span class="cline-any cline-yes">26x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">25x</span> <span class="cline-any cline-yes">25x</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">26x</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-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">16x</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-yes">16x</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-yes">16x</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></td><td class="text"><pre class="prettyprint lang-js">import React from 'react'; import { style } from 'app/styles'; &nbsp; export interface PopupProps { isOpen: boolean; // The children are the popup content children: string | JSX.Element | JSX.Element[]; onClose?: (evt) =&gt; void; onMouseEnter?: (evt) =&gt; void; onMouseLeave?: (evt) =&gt; void; style?: string | object; noBackdrop?: boolean; } &nbsp; const containerStyle = { overflow: 'visible', }; &nbsp; const popupStyle = { _extends: 'popup', right: 0, marginRight: 0, minWidth: 180, zIndex: 4, }; &nbsp; const backdropStyle = { opacity: 0, position: 'fixed', top: 0, left: 0, height: '100%', width: '100%', zIndex: 3, }; &nbsp; const visible = { display: 'block' }; const hidden = { display: 'none' }; &nbsp; export class Popup extends React.Component&lt;PopupProps&gt; { render() { const popupStyles: any = [popupStyle, this.props.style]; const backdropStyles: any = [backdropStyle]; if (this.props.isOpen) { popupStyles.push(visible); backdropStyles.push(visible); } else { popupStyles.push(hidden); backdropStyles.push(hidden); } &nbsp; return ( &lt;div style={style(containerStyle)}&gt; {!this.props.noBackdrop &amp;&amp; ( &lt;div style={style(backdropStyles)} onClick={this.onBackdropClick} /&gt; )} &lt;div style={style(popupStyles)} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} &gt; {this.props.children} &lt;/div&gt; &lt;/div&gt; ); } &nbsp; onBackdropClick = <span class="fstat-no" title="function not covered" >(e</span>vt: any) =&gt; { <span class="cstat-no" title="statement not covered" > this.props.onClose &amp;&amp; this.props.onClose(evt);</span> }; &nbsp; onMouseEnter = <span class="fstat-no" title="function not covered" >(e</span>vt: any) =&gt; { <span class="cstat-no" title="statement not covered" > this.props.onMouseEnter &amp;&amp; this.props.onMouseEnter(evt);</span> }; &nbsp; onMouseLeave = <span class="fstat-no" title="function not covered" >(e</span>vt: any) =&gt; { <span class="cstat-no" title="statement not covered" > this.props.onMouseLeave &amp;&amp; this.props.onMouseLeave(evt);</span> }; } &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 Mon Jan 20 2020 20:05:02 GMT-0800 (PST) </div> </div> <script src="../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../sorter.js"></script> </body> </html>