principles-ui-components

<!doctype html> <html lang="en"> <head> <title>Code coverage report for UI_Component/common/PressFeedback.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> PressFeedback.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 30/30 </div> <div class='fl pad1y space-right2'> 100% Branches 21/21 </div> <div class='fl pad1y space-right2'> 100% Functions 7/7 </div> <div class='fl pad1y space-right2'> 100% Lines 29/29 </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</td><td class="line-coverage quiet">                  113x 113x 113x                                     113x 113x           113x 113x       163x 163x 6x 3x 3x 1x 2x 1x     157x   163x       164x       7x 7x 7x 6x 5x 4x               277x 277x 554x           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/PressFeedback.css';   export default class PressFeedback extends Component { constructor(props) { super(props); this.animationDone = this.animationDone.bind(this); this.styles = [ { animationName: '', animationDelay: '', animationDuration: '0s', animationTimingFunction: '', }, { animationName: 'pressFeedback', animationDelay: '0s', animationDuration: '0.581s', animationTimingFunction: AnimationEffect.Basic, }, { animationName: 'pressFeedback1', animationDelay: '0s', animationDuration: '0.581s', animationTimingFunction: AnimationEffect.Basic, }]; const { start } = props; this.state = { styleIndex: start ? 1 : 0, }; } componentDidMount() { // let elem = ReactDOM.findDOMNode(this.refs.motionContent); const elem = this.motionContent; elem.addEventListener('animationend', this.animationDone, false); }   componentWillReceiveProps(nextProps) { let value = 0; if (nextProps.start) { if (this.state.styleIndex === 0) { value = 1; } else if (this.state.styleIndex === 1) { value = 2; } else if (this.state.styleIndex === 2) { value = 1; } } else { value = 0; } this.setState({ styleIndex: value }); }   shouldComponentUpdate(nextProps, nextState) { return (nextProps.start !== this.props.start) || (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') { if (this.props.animationDoneCB && typeof this.props.animationDoneCB === 'function') { this.props.animationDoneCB(); } } } }     render() { const { children } = this.props; const { styleIndex } = this.state; return (<div style={this.styles[styleIndex]} ref={(motionContent) => { this.motionContent = motionContent; }}> {children} </div>); } }   PressFeedback.defaultProps = { start: false, animationDoneCB: null, };   PressFeedback.propTypes = { start: PropTypes.bool.isRequired, animationDoneCB: PropTypes.func, };  </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>