Extract constants and purge superfluous utils (patw0929#318)

* refactor: booleans are eq

* refactor: extract constants

* refactor: addClass can be replaced by classList.add

* refactor: unused util

src/components/IntlTelInput.js

@@ -7,6 +7,7 @@ import AllCountries from './AllCountries';
 import FlagDropDown from './FlagDropDown';
 import TelInput from './TelInput';
 import utils from './utils';
+import { KEYS } from './constants'
 import '../styles/intlTelInput.scss';
 
 const mobileUserAgentRegexp = /Android.+Mobile|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
@@ -56,18 +57,6 @@ class IntlTelInput extends Component {
 
     this.windowLoaded = false;
 
-    this.keys = {
-      UP: 38,
-      DOWN: 40,
-      ENTER: 13,
-      ESC: 27,
-      PLUS: 43,
-      A: 65,
-      Z: 90,
-      SPACE: 32,
-      TAB: 9,
-    };
-
     this.query = '';
     this.selectedCountryData = {};
 
@@ -603,13 +592,13 @@ class IntlTelInput extends Component {
     const current = this.flagDropDown.querySelectorAll('.highlight')[0];
     const prevElement = current ? current.previousElementSibling : undefined;
     const nextElement = current ? current.nextElementSibling : undefined;
-    let next = key === this.keys.UP ? prevElement : nextElement;
+    let next = key === KEYS.UP ? prevElement : nextElement;
 
     if (next) {
       // skip the divider
       if (next.getAttribute('class').indexOf('divider') > -1) {
         next =
-          key === this.keys.UP
+          key === KEYS.UP
             ? next.previousElementSibling
             : next.nextElementSibling;
       }
@@ -1028,7 +1017,7 @@ class IntlTelInput extends Component {
     this.wrapperClass['separate-dial-code'] = this.props.separateDialCode;
 
     if (this.isMobile && this.props.useMobileFullscreenDropdown) {
-      utils.addClass(document.querySelector('body'), 'iti-mobile');
+      document.querySelector('body').classList.add('iti-mobile')
       // on mobile, we want a full screen dropdown, so we must append it to the body
       this.dropdownContainer = 'body';
       window.addEventListener('scroll', this.handleWindowScroll);
@@ -1038,10 +1027,10 @@ class IntlTelInput extends Component {
   handleSelectedFlagKeydown = e => {
     if (
       !this.state.showDropdown &&
-      (e.which === this.keys.UP ||
-        e.which === this.keys.DOWN ||
-        e.which === this.keys.SPACE ||
-        e.which === this.keys.ENTER)
+      (e.which === KEYS.UP ||
+        e.which === KEYS.DOWN ||
+        e.which === KEYS.SPACE ||
+        e.which === KEYS.ENTER)
     ) {
       // prevent form from being submitted if "ENTER" was pressed
       e.preventDefault();
@@ -1053,7 +1042,7 @@ class IntlTelInput extends Component {
     }
 
     // allow navigation from dropdown to input on TAB
-    if (e.which === this.keys.TAB) {
+    if (e.which === KEYS.TAB) {
       this.toggleDropdown(false);
     }
   };
@@ -1146,20 +1135,20 @@ class IntlTelInput extends Component {
     // and enter key from submitting a form etc
     e.preventDefault();
 
-    if (e.which === this.keys.UP || e.which === this.keys.DOWN) {
+    if (e.which === KEYS.UP || e.which === KEYS.DOWN) {
       // up and down to navigate
       this.handleUpDownKey(e.which);
-    } else if (e.which === this.keys.ENTER) {
+    } else if (e.which === KEYS.ENTER) {
       // enter to select
       this.handleEnterKey();
-    } else if (e.which === this.keys.ESC) {
+    } else if (e.which === KEYS.ESC) {
       // esc to close
       this.setState({
         showDropdown: false,
       });
     } else if (
-      (e.which >= this.keys.A && e.which <= this.keys.Z) ||
-      e.which === this.keys.SPACE
+      (e.which >= KEYS.A && e.which <= KEYS.Z) ||
+      e.which === KEYS.SPACE
     ) {
       // upper case letters (note: keyup/keydown only return upper case letters)
       // jump to countries that start with the query string

src/components/TelInput.js

@@ -62,8 +62,8 @@ export default class TelInput extends Component {
         type="tel"
         autoComplete={this.props.autoComplete}
         className={this.props.className}
-        disabled={this.props.disabled ? 'disabled' : false}
-        readOnly={this.props.readonly ? 'readonly' : false}
+        disabled={this.props.disabled}
+        readOnly={this.props.readonly}
         name={this.props.fieldName}
         id={this.props.fieldId}
         value={this.props.value}

src/components/__tests__/utils.test.js

@@ -134,29 +134,6 @@ describe('utils', () => {
     ).toEqual({});
   });
 
-  it('hasClass', () => {
-    const DEFAULT_HTML = `<html><body>
-      <div class="abc cde">test</div>
-    </body></html>`;
-    const doc = jsdom.jsdom(DEFAULT_HTML);
-    const element = doc.querySelector('.abc');
-
-    expect(utils.hasClass(element, 'cde')).toBeTruthy();
-  });
-
-  it('addClass', () => {
-    const DEFAULT_HTML = `<html><body>
-      <div class="abc cde">test</div>
-    </body></html>`;
-    const doc = jsdom.jsdom(DEFAULT_HTML);
-    const element = doc.querySelector('.abc');
-
-    utils.addClass(element, 'efg');
-
-    expect(element.classList.contains('efg')).toBeTruthy();
-  });
-
-
   it('findIndex', () => {
     let array = [];
     let predicate = () => true;

src/components/constants.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/prefer-default-export
+export const KEYS = {
+  UP: 38,
+  DOWN: 40,
+  ENTER: 13,
+  ESC: 27,
+  PLUS: 43,
+  A: 65,
+  Z: 90,
+  SPACE: 32,
+  TAB: 9,
+};

src/components/utils.js

@@ -170,24 +170,7 @@ export default {
 
     return {};
   },
-
-  // Copied from http://jaketrent.com/post/addremove-classes-raw-javascript/
-  hasClass(el, className) {
-    if (el.classList) {
-      return el.classList.contains(className);
-    }
-
-    return !!el.className.match(new RegExp(`(\\s|^)${className}(\\s|$)`));
-  },
-
-  addClass(el, className) {
-    if (el.classList) {
-      el.classList.add(className);
-    } else if (!this.hasClass(el, className)) {
-      el.className += ` ${className}`;
-    }
-  },
-
+
   findIndex(items, predicate) {
     let index = -1;