@dabapps/roe

<!doctype html> <html lang="en"> <head> <title>Code coverage report for ts/components/navigation/nav-bar.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">ts/components/navigation</a> nav-bar.tsx </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 50/50 </div> <div class='fl pad1y space-right2'> 100% Branches 32/32 </div> <div class='fl pad1y space-right2'> 100% Functions 9/9 </div> <div class='fl pad1y space-right2'> 100% Lines 48/48 </div> </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 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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138</td><td class="line-coverage quiet">21x 21x 21x 21x   21x   21x                                         21x     11x     11x             21x 11x 11x     21x 5x 2x     5x 2x       21x 1x 1x     21x 48x 64x 16x                 16x                       16x             21x 26x   13x 6x   7x       21x 13x   13x 5x 5x   8x 8x       11x 5x 5x   5x 4x   4x       3x             5x   21x   21x  </td><td class="text"><pre class="prettyprint lang-js">import * as classNames from 'classnames'; import * as React from 'react'; import { HTMLProps, PureComponent } from 'react'; import * as ReactDOM from 'react-dom'; import { ComponentProps } from '../../types'; import { addClassName, getScrollOffset, removeClassName } from '../../utils';   const WITH_FIXED_NAV_BAR = 'with-fixed-nav-bar';   export interface NavBarProps extends ComponentProps, HTMLProps<HTMLElement> { /** * Fix the navbar to the top of the screen */ fixed?: boolean; /** * Hide the navbar when scrolling down, but display when scrolling up */ shy?: boolean; /** * Remove NavBar shadow */ noShadow?: boolean; }   export interface NavBarState { hidden: boolean; }   export class NavBar extends PureComponent<NavBarProps, NavBarState> { private previousScrollY: number;   public constructor (props: NavBarProps) { super(props);   this.previousScrollY = getScrollOffset().y;   this.state = { hidden: false, }; }   public componentWillMount () { this.updateBodyClass(this.props); this.toggleShyListeners(this.props); }   public componentWillUpdate (nextProps: NavBarProps) { if (this.props.shy !== nextProps.shy) { this.toggleShyListeners(nextProps); }   if (this.props.fixed !== nextProps.fixed || this.props.shy !== nextProps.shy) { this.updateBodyClass(nextProps); } }   public componentWillUnmount () { window.removeEventListener('scroll', this.hideOrShowNavBar); window.removeEventListener('resize', this.hideOrShowNavBar); }   public render () { const { children, className, fixed, shy, noShadow, component: Component = 'div', ...remainingProps, } = this.props;   const { hidden, } = this.state;   const myClassNames = [ 'nav-bar', fixed || shy ? 'fixed' : null, shy ? 'shy' : null, hidden ? 'hidden' : null, noShadow ? 'no-shadow' : null, className ];   return ( <Component {...remainingProps} className={classNames(myClassNames)}> {children} </Component> ); }   private updateBodyClass (props: NavBarProps) { const { fixed, shy } = props;   if (fixed || shy) { addClassName(document.body, WITH_FIXED_NAV_BAR); } else { removeClassName(document.body, WITH_FIXED_NAV_BAR) } }   private toggleShyListeners (props: NavBarProps) { const { shy } = props;   if (shy) { window.addEventListener('scroll', this.hideOrShowNavBar); window.addEventListener('resize', this.hideOrShowNavBar); } else { window.removeEventListener('scroll', this.hideOrShowNavBar); window.removeEventListener('resize', this.hideOrShowNavBar); } }   private hideOrShowNavBar = () => { const { y } = getScrollOffset(); const element = ReactDOM.findDOMNode(this);   if (element) { const { height } = element.getBoundingClientRect();   if (y > this.previousScrollY && y > height) { this.setState({ hidden: true, }); } else if (y < this.previousScrollY) { this.setState({ hidden: false, }); } }   this.previousScrollY = y; } }   export default NavBar;  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Tue Sep 18 2018 23:45:15 GMT+0100 (BST) </div> </div> <script src="../../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../../sorter.js"></script> </body> </html>