Early returns + refactoring

src/scripts/src/choices.js

@@ -6,7 +6,7 @@ import Input from './components/input';
 import List from './components/list';
 import WrappedInput from './components/wrapped-input';
 import WrappedSelect from './components/wrapped-select';
-import { DEFAULT_CONFIG, DEFAULT_CLASSNAMES, EVENTS, KEY_CODES } from './constants';
+import { DEFAULT_CONFIG, DEFAULT_CLASSNAMES, EVENTS, KEY_CODES, SCROLLING_SPEED } from './constants';
 import { TEMPLATES } from './templates';
 import { addChoice, filterChoices, activateChoices, clearChoices } from './actions/choices';
 import { addItem, removeItem, highlightItem } from './actions/items';
@@ -388,17 +388,19 @@ class Choices {
    */
   render() {
     this.currentState = this.store.getState();
-
-    // Only render if our state has actually changed
-    if (this.currentState !== this.prevState) {
     const stateChanged = (
       this.currentState.choices !== this.prevState.choices ||
       this.currentState.groups !== this.prevState.groups ||
       this.currentState.items !== this.prevState.items
     );
 
-      // Choices
-      if (stateChanged && this.isSelectElement) {
+    if (!stateChanged) {
+      return;
+    }
+
+    /* Choices */
+
+    if (this.isSelectElement) {
       // Get active groups/choices
       const activeGroups = this.store.getGroupsFilteredByActive();
       const activeChoices = this.store.getChoicesFilteredByActive();
@@ -464,11 +466,10 @@ class Choices {
       }
     }
 
-      // Items
-      if (stateChanged) {
+    /* Items */
+
     // Get active items (items that can be selected)
     const activeItems = this.store.getItemsFilteredByActive() || [];
-
     // Clear list
     this.itemList.clear();
 
@@ -483,11 +484,9 @@ class Choices {
         this.itemList.append(itemListFragment);
       }
     }
-      }
 
     this.prevState = this.currentState;
   }
-  }
 
   /**
    * Select item (a selected item can be deleted)
@@ -550,10 +549,7 @@ class Choices {
       eventResponse.groupValue = group.value;
     }
 
-    this.store.dispatch(
-      highlightItem(id, false),
-    );
-
+    this.store.dispatch(highlightItem(id, false));
     this.passedElement.triggerEvent(EVENTS.highlightItem, eventResponse);
 
     return this;
@@ -1141,6 +1137,7 @@ class Choices {
       this._triggerChange(lastItem.value);
     } else {
       if (!hasHighlightedItems) {
+        // Highlight last item if none already highlighted
         this.highlightItem(lastItem, false);
       }
       this.removeHighlightedItems(true);
@@ -1297,8 +1294,11 @@ class Choices {
       this.currentValue.trim() :
       this.currentValue;
 
+    if (newValue.length < 1 && newValue === `${currentValue} `) {
+      return 0;
+    }
+
     // If new value matches the desired length and is not the same as the current value with a space
-    if (newValue.length >= 1 && newValue !== `${currentValue} `) {
     const haystack = this.store.getSearchableChoices();
     const needle = newValue;
     const keys = isType('Array', this.config.searchFields) ?
@@ -1316,9 +1316,6 @@ class Choices {
     return results.length;
   }
 
-    return 0;
-  }
-
   /**
    * Determine the action when a user is searching
    * @param  {String} value Value entered by user
@@ -1599,17 +1596,15 @@ class Choices {
         this.hideDropdown();
       }
     } else {
-      const backKey = 46;
-      const deleteKey = 8;
+      const backKey = KEY_CODES.BACK_KEY;
+      const deleteKey = KEY_CODES.DELETE_KEY;
 
       // If user has removed value...
       if ((e.keyCode === backKey || e.keyCode === deleteKey) && !e.target.value) {
         // ...and it is a multiple select input, activate choices (if searching)
         if (!this.isTextElement && this.isSearching) {
           this.isSearching = false;
-          this.store.dispatch(
-            activateChoices(true),
-          );
+          this.store.dispatch(activateChoices(true));
         }
       } else if (this.canSearch && canAddItem.response) {
         this._handleSearch(this.input.getValue());
@@ -1769,8 +1764,10 @@ class Choices {
    */
   _onFocus(e) {
     const target = e.target;
-    // If target is something that concerns us
-    if (this.containerOuter.element.contains(target)) {
+    if (!this.containerOuter.element.contains(target)) {
+      return;
+    }
+
     const focusActions = {
       text: () => {
         if (target === this.input.element) {
@@ -1796,7 +1793,6 @@ class Choices {
 
     focusActions[this.passedElement.element.type]();
   }
-  }
 
   /**
    * Blur event
@@ -1882,7 +1878,7 @@ class Choices {
       choice.offsetTop;
 
     const animateScroll = () => {
-      const strength = 4;
+      const strength = SCROLLING_SPEED;
       const choiceListScrollTop = this.choiceList.scrollPos;
       let continueAnimation = false;
       let easing;
@@ -2068,9 +2064,7 @@ class Choices {
     const groupId = item.groupId;
     const group = groupId >= 0 ? this.store.getGroupById(groupId) : null;
 
-    this.store.dispatch(
-      removeItem(id, choiceId),
-    );
+    this.store.dispatch(removeItem(id, choiceId));
 
     if (group && group.value) {
       this.passedElement.triggerEvent(EVENTS.removeItem, {
@@ -2272,7 +2266,6 @@ class Choices {
 
     // Wrap input in container preserving DOM ordering
     wrap(this.passedElement.element, this.containerInner.element);
-
     // Wrapper inner container with outer container
     wrap(this.containerInner.element, this.containerOuter.element);
 
@@ -2295,7 +2288,7 @@ class Choices {
       dropdown.appendChild(choiceList);
     }
 
-    if (this.isSelectMultipleElement || this.isTextElement) {
+    if (!this.isSelectOneElement) {
       this.containerInner.element.appendChild(this.input.element);
     } else if (this.canSearch) {
       dropdown.insertBefore(input, dropdown.firstChild);

src/scripts/src/constants.js

@@ -103,3 +103,5 @@ export const KEY_CODES = {
   PAGE_UP_KEY: 33,
   PAGE_DOWN_KEY: 34,
 };
+
+export const SCROLLING_SPEED = 4;