Clearer store naming conventions

src/scripts/src/choices.js

@@ -431,8 +431,8 @@ class Choices {
 
     if (this.isSelectElement) {
       // Get active groups/choices
-      const activeGroups = this.store.groupsFilteredByActive;
-      const activeChoices = this.store.choicesFilteredByActive;
+      const activeGroups = this.store.activeGroups;
+      const activeChoices = this.store.activeChoices;
 
       let choiceListFragment = document.createDocumentFragment();
 
@@ -464,7 +464,7 @@ class Choices {
 
       // If we have choices to show
       if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {
-        const activeItems = this.store.itemsFilteredByActive;
+        const activeItems = this.store.activeItems;
         const canAddItem = this._canAddItem(activeItems, this.input.value);
 
         // ...and we can select them
@@ -502,7 +502,7 @@ class Choices {
     /* Items */
     if (this.currentState.items !== this.prevState.items) {
       // Get active items (items that can be selected)
-      const activeItems = this.store.itemsFilteredByActive || [];
+      const activeItems = this.store.activeItems || [];
       // Clear list
       this.itemList.clear();
 
@@ -608,7 +608,7 @@ class Choices {
       return this;
     }
 
-    const items = this.store.itemsFilteredByActive;
+    const items = this.store.activeItems;
 
     items.forEach((item) => {
       if (item.value === value) {
@@ -627,7 +627,7 @@ class Choices {
    * @public
    */
   removeActiveItems(excludedId) {
-    const items = this.store.itemsFilteredByActive;
+    const items = this.store.activeItems;
 
     items.forEach((item) => {
       if (excludedId !== item.id) {
@@ -645,7 +645,7 @@ class Choices {
    * @public
    */
   removeHighlightedItems(runEvent = false) {
-    const items = this.store.itemsFilteredByHighlighted;
+    const items = this.store.highlightedActiveItems;
 
     items.forEach((item) => {
       this._removeItem(item);
@@ -727,7 +727,7 @@ class Choices {
    * @public
    */
   getValue(valueOnly = false) {
-    const items = this.store.itemsFilteredByActive;
+    const items = this.store.activeItems;
 
     const values = items.reduce((selectedItems, item) => {
       const itemValue = valueOnly ? item.value : item;
@@ -1322,7 +1322,7 @@ class Choices {
     }
 
     const target = e.target;
-    const activeItems = this.store.itemsFilteredByActive;
+    const activeItems = this.store.activeItems;
     const hasFocusedInput = this.input.isFocussed;
     const hasActiveDropdown = this.dropdown.isActive;
     const hasItems = this.itemList.hasChildren;
@@ -1491,7 +1491,7 @@ class Choices {
     }
 
     const value = this.input.value;
-    const activeItems = this.store.itemsFilteredByActive;
+    const activeItems = this.store.activeItems;
     const canAddItem = this._canAddItem(activeItems, value);
 
     // We are typing into a text input and have a value, we want to show a dropdown
@@ -1587,7 +1587,7 @@ class Choices {
     }
 
     if (this.containerOuter.element.contains(target) && target !== this.input.element) {
-      const activeItems = this.store.itemsFilteredByActive;
+      const activeItems = this.store.activeItems;
       const hasShiftKey = e.shiftKey;
 
       const buttonTarget = findAncestorByAttrName(target, 'data-button');
@@ -1633,7 +1633,7 @@ class Choices {
   _onClick(e) {
     const target = e.target;
     const hasActiveDropdown = this.dropdown.isActive;
-    const activeItems = this.store.itemsFilteredByActive;
+    const activeItems = this.store.activeItems;
 
     // If target is something that concerns us
     if (this.containerOuter.element.contains(target)) {
@@ -1720,7 +1720,7 @@ class Choices {
     const target = e.target;
     // If target is something that concerns us
     if (this.containerOuter.element.contains(target) && !this.isScrollingOnIe) {
-      const activeItems = this.store.itemsFilteredByActive;
+      const activeItems = this.store.activeItems;
       const hasHighlightedItems = activeItems.some(item => item.highlighted);
       const blurActions = {
         text: () => {

src/scripts/src/choices.test.js

@@ -1107,7 +1107,7 @@ describe('choices', () => {
     });
 
     describe('getValue', () => {
-      let itemsFilteredByActiveStub;
+      let activeItemsStub;
       const items = [
         {
           id: '1',
@@ -1120,11 +1120,11 @@ describe('choices', () => {
       ];
 
       beforeEach(() => {
-        itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
+        activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
       });
 
       afterEach(() => {
-        itemsFilteredByActiveStub.reset();
+        activeItemsStub.reset();
       });
 
       describe('passing true valueOnly flag', () => {
@@ -1186,7 +1186,7 @@ describe('choices', () => {
       });
 
       describe('passing valid value', () => {
-        let itemsFilteredByActiveStub;
+        let activeItemsStub;
         let removeItemStub;
         const value = 'Removed';
         const items = [
@@ -1206,14 +1206,14 @@ describe('choices', () => {
 
         beforeEach(() => {
           removeItemStub = stub();
-          itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
+          activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
           instance._removeItem = removeItemStub;
 
           output = instance.removeActiveItemsByValue(value);
         });
 
         afterEach(() => {
-          itemsFilteredByActiveStub.reset();
+          activeItemsStub.reset();
           instance._removeItem.reset();
         });
 
@@ -1226,7 +1226,7 @@ describe('choices', () => {
     });
 
     describe('removeActiveItems', () => {
-      let itemsFilteredByActiveStub;
+      let activeItemsStub;
       let removeItemStub;
       const items = [
         {
@@ -1245,12 +1245,12 @@ describe('choices', () => {
 
       beforeEach(() => {
         removeItemStub = stub();
-        itemsFilteredByActiveStub = stub(instance.store, 'itemsFilteredByActive').get(() => items);
+        activeItemsStub = stub(instance.store, 'activeItems').get(() => items);
         instance._removeItem = removeItemStub;
       });
 
       afterEach(() => {
-        itemsFilteredByActiveStub.reset();
+        activeItemsStub.reset();
         instance._removeItem.reset();
       });
 
@@ -1283,7 +1283,7 @@ describe('choices', () => {
     });
 
     describe('removeHighlightedItems', () => {
-      let itemsFilteredByHighlightedStub;
+      let highlightedActiveItemsStub;
       let removeItemStub;
       let triggerChangeStub;
 
@@ -1300,7 +1300,7 @@ describe('choices', () => {
 
 
       beforeEach(() => {
-        itemsFilteredByHighlightedStub = stub(instance.store, 'itemsFilteredByHighlighted').get(() => items);
+        highlightedActiveItemsStub = stub(instance.store, 'highlightedActiveItems').get(() => items);
         removeItemStub = stub();
         triggerChangeStub = stub();
 
@@ -1309,7 +1309,7 @@ describe('choices', () => {
       });
 
       afterEach(() => {
-        itemsFilteredByHighlightedStub.reset();
+        highlightedActiveItemsStub.reset();
         instance._removeItem.reset();
         instance._triggerChange.reset();
       });

src/scripts/src/store/store.js

@@ -49,7 +49,7 @@ export default class Store {
    * Get active items from store
    * @return {Array} Item objects
    */
-  get itemsFilteredByActive() {
+  get activeItems() {
     return this.items.filter(item => item.active === true);
   }
 
@@ -57,7 +57,7 @@ export default class Store {
   * Get highlighted items from store
   * @return {Array} Item objects
   */
-  get itemsFilteredByHighlighted() {
+  get highlightedActiveItems() {
     return this.items.filter(item => item.active && item.highlighted);
   }
 
@@ -73,7 +73,7 @@ export default class Store {
    * Get active choices from store
    * @return {Array} Option objects
    */
-  get choicesFilteredByActive() {
+  get activeChoices() {
     const choices = this.choices;
     const values = choices.filter(choice => choice.active === true);
 
@@ -84,7 +84,7 @@ export default class Store {
    * Get selectable choices from store
    * @return {Array} Option objects
    */
-  get choicesFilteredBySelectable() {
+  get selectableChoices() {
     return this.choices.filter(choice => choice.disabled !== true);
   }
 
@@ -93,7 +93,7 @@ export default class Store {
    * @return {Array} Option objects
    */
   get searchableChoices() {
-    return this.choicesFilteredBySelectable.filter(choice => choice.placeholder !== true);
+    return this.selectableChoices.filter(choice => choice.placeholder !== true);
   }
 
   /**
@@ -118,7 +118,7 @@ export default class Store {
    * Get active groups from store
    * @return {Array} Group objects
    */
-  get groupsFilteredByActive() {
+  get activeGroups() {
     const groups = this.groups;
     const choices = this.choices;
 
@@ -137,7 +137,7 @@ export default class Store {
    */
   getChoiceById(id) {
     if (id) {
-      const choices = this.choicesFilteredByActive;
+      const choices = this.activeChoices;
       const foundChoice = choices.find(choice => choice.id === parseInt(id, 10));
       return foundChoice;
     }

src/scripts/src/store/store.test.js

@@ -161,17 +161,17 @@ describe('reducers/store', () => {
       });
     });
 
-    describe('itemsFilteredByActive getter', () => {
+    describe('activeItems getter', () => {
       it('returns items that are active', () => {
         const expectedResponse = state.items.filter((item => item.active));
-        expect(instance.itemsFilteredByActive).to.eql(expectedResponse);
+        expect(instance.activeItems).to.eql(expectedResponse);
       });
     });
 
-    describe('itemsFilteredByHighlighted getter', () => {
+    describe('highlightedActiveItems getter', () => {
       it('returns items that are active and highlighted', () => {
         const expectedResponse = state.items.filter((item => item.highlighted && item.active));
-        expect(instance.itemsFilteredByHighlighted).to.eql(expectedResponse);
+        expect(instance.highlightedActiveItems).to.eql(expectedResponse);
       });
     });
 
@@ -182,17 +182,17 @@ describe('reducers/store', () => {
       });
     });
 
-    describe('choicesFilteredByActive getter', () => {
+    describe('activeChoices getter', () => {
       it('returns choices that are active', () => {
         const expectedResponse = state.choices.filter((choice => choice.active));
-        expect(instance.choicesFilteredByActive).to.eql(expectedResponse);
+        expect(instance.activeChoices).to.eql(expectedResponse);
       });
     });
 
-    describe('choicesFilteredBySelectable getter', () => {
+    describe('selectableChoices getter', () => {
       it('returns choices that are not disabled', () => {
         const expectedResponse = state.choices.filter((choice => !choice.disabled));
-        expect(instance.choicesFilteredBySelectable).to.eql(expectedResponse);
+        expect(instance.selectableChoices).to.eql(expectedResponse);
       });
     });
 
@@ -235,10 +235,10 @@ describe('reducers/store', () => {
       });
     });
 
-    describe('groupsFilteredByActive getter', () => {
+    describe('activeGroups getter', () => {
       it('returns active groups', () => {
         const expectedResponse = state.groups.filter(group => group.active);
-        expect(instance.groupsFilteredByActive).to.eql(expectedResponse);
+        expect(instance.activeGroups).to.eql(expectedResponse);
       });
     });