feat: implement custom properties for items and choices

+ Added unit tests for both choice and item reducers
+ Had to add some visually unpleasant undefineds, sorry :P

assets/scripts/src/actions/index.js

@@ -1,4 +1,4 @@
-export const addItem = (value, label, id, choiceId, groupId) => {
+export const addItem = (value, label, id, choiceId, groupId, customProperties) => {
   return {
     type: 'ADD_ITEM',
     value,
@@ -6,6 +6,7 @@ export const addItem = (value, label, id, choiceId, groupId) => {
     id,
     choiceId,
     groupId,
+    customProperties
   };
 };
 
@@ -25,7 +26,7 @@ export const highlightItem = (id, highlighted) => {
   };
 };
 
-export const addChoice = (value, label, id, groupId, disabled, elementId) => {
+export const addChoice = (value, label, id, groupId, disabled, elementId, customProperties) => {
   return {
     type: 'ADD_CHOICE',
     value,
@@ -34,6 +35,7 @@ export const addChoice = (value, label, id, groupId, disabled, elementId) => {
     groupId,
     disabled,
     elementId: elementId,
+    customProperties
   };
 };
 

assets/scripts/src/choices.js

@@ -812,13 +812,16 @@ class Choices {
                 item.label,
                 true,
                 false,
-                -1
+                -1,
+                item.customProperties
               );
             } else {
               this._addItem(
                 item.value,
                 item.label,
-                item.id
+                item.id,
+                undefined,
+                item.customProperties
               );
             }
           } else if (itemType === 'String') {
@@ -868,7 +871,7 @@ class Choices {
 
         if (foundChoice) {
           if (!foundChoice.selected) {
-            this._addItem(foundChoice.value, foundChoice.label, foundChoice.id, foundChoice.groupId);
+            this._addItem(foundChoice.value, foundChoice.label, foundChoice.id, foundChoice.groupId, foundChoice.customProperties);
           } else if (!this.config.silent) {
             console.warn('Attempting to select choice already selected');
           }
@@ -915,7 +918,9 @@ class Choices {
                 result[value],
                 result[label],
                 result.selected,
-                result.disabled
+                result.disabled,
+                undefined,
+                result['customProperties']
               );
             }
           });
@@ -1134,7 +1139,8 @@ class Choices {
           choice.value,
           choice.label,
           choice.id,
-          choice.groupId
+          choice.groupId,
+          choice.customProperties
         );
         this._triggerChange(choice.value);
       }
@@ -1305,7 +1311,9 @@ class Choices {
               result[value],
               result[label],
               result.selected,
-              result.disabled
+              result.disabled,
+              undefined,
+              result['customProperties']
             );
           }
         });
@@ -2058,10 +2066,13 @@ class Choices {
    * Add item to store with correct value
    * @param {String} value Value to add to store
    * @param {String} label Label to add to store
+   * @param {Number} choiceId ID of the associated choice that was selected
+   * @param {Number} groupId ID of group choice is within. Negative number indicates no group
+   * @param {Object} customProperties Object containing user defined properties
    * @return {Object} Class instance
    * @public
    */
-  _addItem(value, label, choiceId = -1, groupId = -1) {
+  _addItem(value, label, choiceId = -1, groupId = -1, customProperties = null) {
     let passedValue = isType('String', value) ? value.trim() : value;
     const items = this.store.getItems();
     const passedLabel = label || passedValue;
@@ -2083,7 +2094,7 @@ class Choices {
       passedValue += this.config.appendValue.toString();
     }
 
-    this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId, groupId));
+    this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId, groupId, customProperties));
 
     if (this.passedElement.type === 'select-one') {
       this.removeActiveItems(id);
@@ -2152,15 +2163,16 @@ class Choices {
 
   /**
    * Add choice to dropdown
-   * @param {Boolean} isSelected Whether choice is selected
-   * @param {Boolean} isDisabled Whether choice is disabled
    * @param {String} value Value of choice
    * @param {String} Label Label of choice
+   * @param {Boolean} isSelected Whether choice is selected
+   * @param {Boolean} isDisabled Whether choice is disabled
    * @param {Number} groupId ID of group choice is within. Negative number indicates no group
+   * @param {Object} customProperties Object containing user defined properties
    * @return
    * @private
    */
-  _addChoice(value, label, isSelected = false, isDisabled = false, groupId = -1) {
+  _addChoice(value, label, isSelected = false, isDisabled = false, groupId = -1, customProperties = null) {
     if (typeof value === 'undefined' || value === null) {
       return;
     }
@@ -2177,11 +2189,19 @@ class Choices {
       choiceId,
       groupId,
       isDisabled,
-      choiceElementId
+      choiceElementId,
+      customProperties
     ));
 
     if (isSelected) {
-      this._addItem(value, choiceLabel, choiceId);
+      this._addItem(
+        value,
+        choiceLabel,
+        choiceId,
+        undefined,
+        undefined,
+        customProperties
+      );
     }
   }
 
@@ -2618,7 +2638,9 @@ class Choices {
                 choice.value,
                 choice.label,
                 choice.selected,
-                choice.disabled
+                choice.disabled,
+                undefined,
+                choice.customProperties
               );
             } else {
               // Otherwise pre-select the first choice in the array
@@ -2626,7 +2648,9 @@ class Choices {
                 choice.value,
                 choice.label,
                 true,
-                false
+                false,
+                undefined,
+                choice.customProperties
               );
             }
           } else {
@@ -2634,7 +2658,9 @@ class Choices {
               choice.value,
               choice.label,
               choice.selected,
-              choice.disabled
+              choice.disabled,
+              undefined,
+              choice.customProperties
             );
           }
         });

assets/scripts/src/reducers/choices.js

@@ -16,6 +16,7 @@ const choices = (state = [], action) => {
         selected: false,
         active: true,
         score: 9999,
+        customProperties: action.customProperties
       }];
     }
 

assets/scripts/src/reducers/items.js

@@ -10,6 +10,7 @@ const items = (state = [], action) => {
         label: action.label,
         active: true,
         highlighted: false,
+        customProperties: action.customProperties
       }];
 
       return newState.map((item) => {

tests/spec/choices_spec.js

@@ -1,6 +1,9 @@
 import 'whatwg-fetch';
 import 'es6-promise';
 import Choices from '../../assets/scripts/src/choices.js';
+import itemReducer from '../../assets/scripts/src/reducers/items.js';
+import choiceReducer from '../../assets/scripts/src/reducers/choices.js';
+import { addItem as addItemAction, addChoice as addChoiceAction } from '../../assets/scripts/src/actions/index.js';
 
 if (typeof Object.assign != 'function') {
   Object.assign = function (target, varArgs) { // .length of function is 2
@@ -28,10 +31,6 @@ if (typeof Object.assign != 'function') {
 
 describe('Choices', () => {
 
-  afterEach(function() {
-    this.choices.destroy();
-  });
-
   describe('should initialize Choices', () => {
 
     beforeEach(function() {
@@ -43,6 +42,10 @@ describe('Choices', () => {
       this.choices = new Choices(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should be defined', function() {
       expect(this.choices).toBeDefined();
     });
@@ -164,6 +167,10 @@ describe('Choices', () => {
       document.body.appendChild(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should accept a user inputted value', function() {
       this.choices = new Choices(this.input);
 
@@ -272,6 +279,10 @@ describe('Choices', () => {
       document.body.appendChild(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should open the choice list on focussing', function() {
       this.choices = new Choices(this.input);
       this.choices.input.focus();
@@ -567,6 +578,10 @@ describe('Choices', () => {
       });
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should add any pre-defined values', function() {
       expect(this.choices.currentState.items.length).toBeGreaterThan(1);
     });
@@ -604,6 +619,10 @@ describe('Choices', () => {
       this.choices = new Choices(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should handle highlightItem()', function() {
       const items = this.choices.currentState.items;
       const randomItem = items[Math.floor(Math.random() * items.length)];
@@ -839,6 +858,10 @@ describe('Choices', () => {
       this.choices = new Choices(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should handle disable()', function() {
       this.choices.disable();
 
@@ -863,6 +886,10 @@ describe('Choices', () => {
       this.choices = new Choices(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should handle clearInput()', function() {
       this.choices.clearInput();
       expect(this.choices.input.value).toBe('');
@@ -899,6 +926,10 @@ describe('Choices', () => {
       document.body.appendChild(this.input);
     });
 
+    afterEach(function() {
+      this.choices.destroy();
+    });
+
     it('should flip the dropdown', function() {
       this.choices = new Choices(this.input, {
         position: 'top'
@@ -919,4 +950,66 @@ describe('Choices', () => {
       expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
     });
   });
+
+  describe('should allow custom properties provided by the user on items or choices', function() {
+      it('should allow the user to supply custom properties for an item', function() {
+        var randomItem = {
+          id: 8999,
+          choiceId: 9000,
+          groupId: 9001,
+          value: 'value',
+          label: 'label',
+          customProperties: {
+            foo: 'bar'
+          }
+        }
+
+        var expectedState = [{
+          id: randomItem.id,
+          choiceId: randomItem.choiceId,
+          groupId: randomItem.groupId,
+          value: randomItem.value,
+          label: randomItem.label,
+          active: true,
+          highlighted: false,
+          customProperties: randomItem.customProperties
+        }];
+
+        var action = addItemAction(randomItem.value, randomItem.label, randomItem.id, randomItem.choiceId, randomItem.groupId, randomItem.customProperties);
+
+        expect(itemReducer([], action)).toEqual(expectedState);
+      });
+
+      it('should allow the user to supply custom properties for a choice', function() {
+        var randomChoice = {
+          id: 123,
+          elementId: 321,
+          groupId: 213,
+          value: 'value',
+          label: 'label',
+          disabled: false,
+          customProperties: {
+            foo: 'bar'
+          }
+        }
+
+        var expectedState = [{
+          id: randomChoice.id,
+          elementId: randomChoice.elementId,
+          groupId: randomChoice.groupId,
+          value: randomChoice.value,
+          label: randomChoice.label,
+          disabled: randomChoice.disabled,
+          selected: false,
+          active: true,
+          score: 9999,
+          customProperties: randomChoice.customProperties
+        }];
+
+        var action = addChoiceAction(randomChoice.value, randomChoice.label, randomChoice.id, randomChoice.groupId, randomChoice.disabled, randomChoice.elementId, randomChoice.customProperties);
+
+        expect(choiceReducer([], action)).toEqual(expectedState);
+      });
+    });
+
 });