react-intl-tel-input

<!doctype html> <html lang="en"> <head> <title>Code coverage report for components/FlagDropDown.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/</a> FlagDropDown.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 88.57% Statements 31/35 </div> <div class='fl pad1y space-right2'> 66.67% Branches 12/18 </div> <div class='fl pad1y space-right2'> 75% Functions 6/8 </div> <div class='fl pad1y space-right2'> 90.32% Lines 28/31 </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</td><td class="line-coverage quiet">1× 1× 1× 1× 1×   1×                                         187×     187× 187×     187×   187×       187× 187× 6× 6×   187× 187× 129× 129×     187× 187×     187×   187× 187×                                     187× 187×                             187×                                 1×  </td><td class="text"><pre class="prettyprint lang-js">import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; import CountryList from './CountryList'; import RootModal from './RootModal'; import utils from './utils';   class FlagDropDown extends Component { static propTypes = { allowDropdown: PropTypes.bool, dropdownContainer: PropTypes.string, separateDialCode: PropTypes.bool, dialCode: PropTypes.string, countryCode: PropTypes.string, showDropdown: PropTypes.bool, clickSelectedFlag: PropTypes.func, handleSelectedFlagKeydown: PropTypes.func, isMobile: PropTypes.bool, setFlag: PropTypes.func, countries: PropTypes.array, inputTop: PropTypes.number, inputOuterHeight: PropTypes.number, preferredCountries: PropTypes.array, highlightedCountry: PropTypes.number, changeHighlightCountry: PropTypes.func, };   render() { const flagClassObj = { 'iti-flag': true, }; let flagClass = undefined; const selectedCountryData = (this.props.countryCode && this.props.countryCode !== 'auto') ? utils.getCountryData(this.props.countryCode, false) : {}; const titleTip = (selectedCountryData) ? `${selectedCountryData.name}: +${selectedCountryData.dialCode}` : 'Unknown'; const arrowClass = classNames({ 'iti-arrow': true, up: this.props.showDropdown, }); let genSelectedDialCode = () => ''; if (this.props.separateDialCode) { genSelectedDialCode = () => <div className="selected-dial-code">{this.props.dialCode}</div>; } let genArrow = () => ''; if (this.props.allowDropdown) { genArrow = () => <div className={arrowClass}></div>; }   if (Ethis.props.countryCode) { flagClassObj[this.props.countryCode] = true; }   flagClass = classNames(flagClassObj);   let genCountryList = () => ''; if (Ithis.props.dropdownContainer) { if (this.props.showDropdown) { genCountryList = () => <RootModal> <CountryList ref="countryList" dropdownContainer={this.props.dropdownContainer} isMobile={this.props.isMobile} showDropdown={this.props.showDropdown} setFlag={this.props.setFlag} countries={this.props.countries} inputTop={this.props.inputTop} inputOuterHeight={this.props.inputOuterHeight} preferredCountries={this.props.preferredCountries} highlightedCountry={this.props.highlightedCountry} changeHighlightCountry={this.props.changeHighlightCountry} /> </RootModal>; } } else { genCountryList = () => <CountryList ref="countryList" dropdownContainer={this.props.dropdownContainer} isMobile={this.props.isMobile} showDropdown={this.props.showDropdown} setFlag={this.props.setFlag} countries={this.props.countries} inputTop={this.props.inputTop} inputOuterHeight={this.props.inputOuterHeight} preferredCountries={this.props.preferredCountries} highlightedCountry={this.props.highlightedCountry} changeHighlightCountry={this.props.changeHighlightCountry} />; }   return ( <div className="flag-container"> <div className="selected-flag" tabIndex={this.props.allowDropdown ? '0' : ''} onClick={this.props.clickSelectedFlag} onKeyDown={this.props.handleSelectedFlagKeydown} title={titleTip} > <div className={flagClass}></div> {genSelectedDialCode()} {genArrow()} </div> {genCountryList()} </div> ); } }   export default FlagDropDown;  </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="http://istanbul-js.org/" target="_blank">istanbul</a> at Wed Jun 22 2016 13:38:33 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>