diff --git a/src/components/CountryList.js b/src/components/CountryList.js index 8858a8de1..151bb4f60 100644 --- a/src/components/CountryList.js +++ b/src/components/CountryList.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import utils from './utils'; -import FlagBox from './FlagBox' +import FlagBox from './FlagBox'; function partial(fn, ...args) { return fn.bind(fn, ...args); @@ -81,23 +81,29 @@ export default class CountryList extends Component { preferred: isPreferred, }; const countryClass = classNames(countryClassObj); - const onMouseOverOrFocus = this.props.isMobile ? () => {} : this.handleMouseOver - const keyPrefix = isPreferred ? 'pref-' : '' - + const onMouseOverOrFocus = this.props.isMobile + ? () => {} + : this.handleMouseOver; + const keyPrefix = isPreferred ? 'pref-' : ''; + return ( { this.selectedFlag = selectedFlag }} - innerFlagRef={selectedFlagInner => { this.selectedFlagInner = selectedFlagInner }} + flagRef={selectedFlag => { + this.selectedFlag = selectedFlag; + }} + innerFlagRef={selectedFlagInner => { + this.selectedFlagInner = selectedFlagInner; + }} countryClass={countryClass} /> - ) + ); }); }; @@ -110,12 +116,12 @@ export default class CountryList extends Component { }; render() { - const { preferredCountries, countries, showDropdown } = this.props + const { preferredCountries, countries, showDropdown } = this.props; const className = classNames({ 'country-list': true, hide: !showDropdown, }); - + const divider =
; const preferredOptions = this.appendListItem(preferredCountries, true); const allOptions = this.appendListItem(countries); diff --git a/src/components/FlagBox.js b/src/components/FlagBox.js index 653ab3b22..3499135a6 100644 --- a/src/components/FlagBox.js +++ b/src/components/FlagBox.js @@ -1,5 +1,5 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React from 'react'; +import PropTypes from 'prop-types'; const FlagBox = ({ dialCode, @@ -20,22 +20,14 @@ const FlagBox = ({ onFocus={onFocus} onClick={onClick} > -
-
+
+
{name} - - {`+ ${dialCode}`} - + {`+ ${dialCode}`} -) +); FlagBox.propTypes = { dialCode: PropTypes.string.isRequired, @@ -47,12 +39,12 @@ FlagBox.propTypes = { flagRef: PropTypes.func, innerFlagRef: PropTypes.func, countryClass: PropTypes.string.isRequired, -} +}; FlagBox.defaultProps = { onFocus: () => {}, onMouseOver: () => {}, onClick: () => {}, -} +}; -export default FlagBox +export default FlagBox; diff --git a/src/components/FlagDropDown.js b/src/components/FlagDropDown.js index 4942dc760..13250ed35 100644 --- a/src/components/FlagDropDown.js +++ b/src/components/FlagDropDown.js @@ -4,7 +4,11 @@ import classNames from 'classnames'; import CountryList from './CountryList'; import RootModal from './RootModal'; -import { DownArrow, UpArrow, SelectedFlagPopoverButton } from './FlagDropDown.styles' +import { + DownArrow, + UpArrow, + SelectedFlagPopoverButton, +} from './FlagDropDown.styles'; export default class FlagDropDown extends Component { static propTypes = { @@ -33,31 +37,20 @@ export default class FlagDropDown extends Component { return separateDialCode ? (
{dialCode}
- ) : ( - '' - ); + ) : null; }; genArrow = () => { const { allowDropdown, showDropdown } = this.props; - const arrow = showDropdown ? : + const arrow = showDropdown ? : ; - - return allowDropdown ? arrow : null + return allowDropdown ? arrow : null; }; - genFlagClassName = () => { - const { countryCode } = this.props; - const flagClassObj = { - 'iti-flag': true, - }; - - if (countryCode) { - flagClassObj[countryCode] = true; - } - - return classNames(flagClassObj); - }; + genFlagClassName = () => + classNames('iti-flag', { + [this.props.countryCode]: !!this.props.countryCode, + }); genCountryList = () => { const { diff --git a/src/components/FlagDropDown.styles.js b/src/components/FlagDropDown.styles.js index dd1d018fa..1e4e288b8 100644 --- a/src/components/FlagDropDown.styles.js +++ b/src/components/FlagDropDown.styles.js @@ -1,24 +1,24 @@ -import styled from 'styled-components' +import styled from 'styled-components'; const ArrowBase = styled.div` - font-size: 6px; - margin-left: 5px; -` + font-size: 6px; + margin-left: 5px; +`; export const UpArrow = styled(ArrowBase)` - &:after { - content: "▲"; - } -` + &:after { + content: '▲'; + } +`; export const DownArrow = styled(ArrowBase)` - &:after { - content: "▼"; - } -` + &:after { + content: '▼'; + } +`; export const SelectedFlagPopoverButton = styled.div` - display: flex; - justify-content: center; - align-items: center; -` + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/src/components/IntlTelInput.js b/src/components/IntlTelInput.js index 41b4266c4..8bcb15a69 100644 --- a/src/components/IntlTelInput.js +++ b/src/components/IntlTelInput.js @@ -165,7 +165,7 @@ class IntlTelInput extends Component { } if (this.props.defaultCountry !== prevProps.defaultCountry) { - this.updateFlagOnDefaultCountryChange(this.props.defaultCountry) + this.updateFlagOnDefaultCountryChange(this.props.defaultCountry); } } @@ -176,8 +176,8 @@ class IntlTelInput extends Component { } // Updates flag when value of defaultCountry props change - updateFlagOnDefaultCountryChange = (countryCode) => { - this.setFlag(countryCode, false) + updateFlagOnDefaultCountryChange = countryCode => { + this.setFlag(countryCode, false); }; getTempCountry = countryCode => { @@ -1215,12 +1215,11 @@ class IntlTelInput extends Component { : previousValue.substring(0, cursorPosition); // Don't format if user is deleting chars - const formattedValue = previousValue.length < priorValue.length - ? previousValue - : this.formatNumber(e.target.value); - const value = this.props.format - ? formattedValue - : e.target.value; + const formattedValue = + previousValue.length < priorValue.length + ? previousValue + : this.formatNumber(e.target.value); + const value = this.props.format ? formattedValue : e.target.value; cursorPosition = utils.getCursorPositionAfterFormating( previousStringBeforeCursor, diff --git a/src/components/__tests__/FlagDropDown.test.js b/src/components/__tests__/FlagDropDown.test.js index a185d2c4f..66a9040a2 100644 --- a/src/components/__tests__/FlagDropDown.test.js +++ b/src/components/__tests__/FlagDropDown.test.js @@ -72,7 +72,10 @@ describe('FlagDropDown', function() { expect( subject.find(CountryList).find('.country-list.hide').length ).toBeTruthy(); - flagComponent.find('.selected-flag').last().simulate('click'); + flagComponent + .find('.selected-flag') + .last() + .simulate('click'); subject.update(); expect( diff --git a/src/components/__tests__/TelInput.test.js b/src/components/__tests__/TelInput.test.js index 3508b583d..8b52221d8 100644 --- a/src/components/__tests__/TelInput.test.js +++ b/src/components/__tests__/TelInput.test.js @@ -467,7 +467,10 @@ describe('TelInput', function() { it('should set "expanded" class to wrapper only when flags are open', () => { const subject = this.makeSubject(); - const flagComponent = subject.find(FlagDropDown).find('.selected-flag').last(); + const flagComponent = subject + .find(FlagDropDown) + .find('.selected-flag') + .last(); flagComponent.simulate('click'); expect(subject.instance().wrapperClass.expanded).toBe(true);