all files / src/components/ FlagDropDown.js

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
1×
1×
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import CountryList from './CountryList';
import utils from './utils';
 
class FlagDropDown extends Component {
  static propTypes = {
    countryCode: PropTypes.string,
    showDropdown: PropTypes.bool,
    clickSelectedFlag: PropTypes.func,
    handleSelectedFlagKeydown: PropTypes.func,
    isMobile: PropTypes.bool,
    selectFlag: 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({
      arrow: true,
      up: this.props.showDropdown,
    });
 
    if (this.props.countryCode) {
      flagClassObj[this.props.countryCode] = true;
    }
 
    flagClass = classNames(flagClassObj);
 
    return (
      <div className="flag-dropdown">
        <div className="selected-flag" tabIndex="0"
          onClick={this.props.clickSelectedFlag}
          onKeyDown={this.props.handleSelectedFlagKeydown}
          title={titleTip}
        >
          <div className={flagClass}></div>
          <div className={arrowClass}></div>
        </div>
        <CountryList ref="countryList"
          isMobile={this.props.isMobile}
          showDropdown={this.props.showDropdown}
          selectFlag={this.props.selectFlag}
          countries={this.props.countries}
          inputTop={this.props.inputTop}
          inputOuterHeight={this.props.inputOuterHeight}
          preferredCountries={this.props.preferredCountries}
          highlightedCountry={this.props.highlightedCountry}
          changeHighlightCountry={this.props.changeHighlightCountry}
        />
      </div>
    );
  }
}
 
export default FlagDropDown;