principles-ui-components

<!doctype html> <html lang="en"> <head> <title>Code coverage report for UI_Component/common/BreathMotion.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">UI_Component/common</a> BreathMotion.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 40/40 </div> <div class='fl pad1y space-right2'> 95.65% Branches 22/23 </div> <div class='fl pad1y space-right2'> 100% Functions 9/9 </div> <div class='fl pad1y space-right2'> 100% Lines 39/39 </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</td><td class="line-coverage quiet">                  113x 113x 113x                                                                         113x       113x 113x 113x 5x 2x             113x 113x         160x 18x 18x   18x 1x 1x   142x 14x 14x 14x   14x         167x       7x 7x 7x 6x 5x 5x 1x   4x 1x   3x   4x             279x 279x 558x           3x       3x      </td><td class="text"><pre class="prettyprint lang-js">import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { is, Map } from 'immutable'; import ReactDOM from 'react-dom'; import { AnimationEffect } from './CommonDefine'; import '../css/BreathMotion.css';   export default class BreathMotion extends Component { constructor(props) { super(props); this.animationDone = this.animationDone.bind(this); this.styles = [ { animationName: '', animationDelay: '', animationDuration: '0s', animationTimingFunction: '', transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect. }, { animationName: 'breathIn', animationDelay: '5s', animationDuration: '0.5s', animationTimingFunction: AnimationEffect.BreathIn, transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect. }, { animationName: 'breathOut', animationDelay: '0s', animationDuration: '0.668s', animationTimingFunction: AnimationEffect.BreathOut, transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect. }, { animationName: 'breathIn', animationDelay: '0.083s', animationDuration: '0.5s', animationTimingFunction: AnimationEffect.BreathIn, transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect. }, { animationName: 'breathOut', animationDelay: '0s', animationDuration: '0.668s', animationTimingFunction: AnimationEffect.BreathOut, transform: 'scale(1.0)', // Must have this or on the TV border-radus won't show currect. }];   this.state = { styleIndex: 0, };   this.animationTimer = null; const { doBreath } = props; if (doBreath) { this.animationTimer = setTimeout(() => { this.setState({ styleIndex: 1 }); }, 10000); } }   componentDidMount() { // let elem = ReactDOM.findDOMNode(this.refs.motionContent); const elem = this.motionContent; elem.addEventListener('animationend', this.animationDone, false); }     componentWillReceiveProps(nextProps) { if (this.props.doBreath === false && nextProps.doBreath === true) { clearTimeout(this.animationTimer); this.animationTimer = null;   this.animationTimer = setTimeout(() => { this.animationTimer = null; this.setState({ styleIndex: 1 }); }, 10000); } else if (this.props.doBreath === true && nextProps.doBreath === false) { Eif (this.animationTimer) { clearTimeout(this.animationTimer); this.animationTimer = null; } this.setState({ styleIndex: 0 }); } }   shouldComponentUpdate(nextProps, nextState) { return (nextProps.doBreath !== this.props.doBreath) || (nextProps.children !== this.props.children) || (nextState.styleIndex !== this.state.styleIndex); }   animationDone(e) { e.preventDefault(); const target = e.target; if (target === e.currentTarget) { if (e.type === 'animationend') { let index = this.state.styleIndex; if (index === 0) { return; } if (index === 4) { index = 1; } else { index += 1; } this.setState({ styleIndex: index }); } } }     render() { const { children } = this.props; const { styleIndex } = this.state; return (<div style={this.styles[styleIndex]} ref={(motionContent) => { this.motionContent = motionContent; }}> {children} </div>); } }   BreathMotion.defaultProps = { doBreath: false, };   BreathMotion.propTypes = { doBreath: PropTypes.bool.isRequired, };  </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 Aug 15 2017 12:07:28 GMT+0800 (CST) </div> </div> <script src="../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../sorter.js"></script> </body> </html>