refactor: trim down code, prettier

patw0929 · Mar 1, 2020 · aafe63c · aafe63c
1 parent ef14a0e
commit aafe63c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 73 deletions.
diff --git 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 (
         <FlagBox
-          key={`${keyPrefix}${country.iso2}`} 
+          key={`${keyPrefix}${country.iso2}`}
           dialCode={country.dialCode}
           isoCode={country.iso2}
           name={country.name}
           onMouseOver={onMouseOverOrFocus}
           onClick={partial(this.setFlag, country.iso2)}
           onFocus={onMouseOverOrFocus}
-          flagRef={selectedFlag => { 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 = <div className="divider" />;
     const preferredOptions = this.appendListItem(preferredCountries, true);
     const allOptions = this.appendListItem(countries);

diff --git 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}
   >
-    <div
-      ref={flagRef}
-      className="flag-box"
-    >
-      <div
-        ref={innerFlagRef}
-        className={`iti-flag ${isoCode}`}
-      />
+    <div ref={flagRef} className="flag-box">
+      <div ref={innerFlagRef} className={`iti-flag ${isoCode}`} />
     </div>
 
     <span className="country-name">{name}</span>
-    <span className="dial-code">
-      {`+ ${dialCode}`}
-    </span>
+    <span className="dial-code">{`+ ${dialCode}`}</span>
   </li>
-) 
+);
 
 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
@@ -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 ? (
       <div className="selected-dial-code">{dialCode}</div>
-    ) : (
-      ''
-    );
+    ) : null;
   };
 
   genArrow = () => {
     const { allowDropdown, showDropdown } = this.props;
-    const arrow = showDropdown ? <UpArrow /> : <DownArrow />
+    const arrow = showDropdown ? <UpArrow /> : <DownArrow />;
 
-
-    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
@@ -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
@@ -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
@@ -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
@@ -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);