choices.js - npm Package Compare versions

Comparing version 2.8.7 to 2.8.9

assets/scripts/src/actions/index.js

@@ -1,2 +0,2 @@
-export const addItem = (value, label, id, choiceId, groupId, customProperties) => {
+export const addItem = (value, label, id, choiceId, groupId, customProperties, keyCode) => {
   return {
@@ -9,3 +9,4 @@ type: 'ADD_ITEM',
     groupId,
-    customProperties
+    customProperties,
+    keyCode
   };
@@ -30,3 +31,3 @@ };
 
-export const addChoice = (value, label, id, groupId, disabled, elementId, customProperties) => {
+export const addChoice = (value, label, id, groupId, disabled, elementId, customProperties, keyCode) => {
   return {
@@ -40,3 +41,4 @@ type: 'ADD_CHOICE',
     elementId: elementId,
-    customProperties
+    customProperties,
+    keyCode
   };
@@ -43,0 +45,0 @@ };

assets/scripts/src/reducers/choices.js

@@ -19,3 +19,4 @@ const choices = (state = [], action) => {
         score: 9999,
-        customProperties: action.customProperties
+        customProperties: action.customProperties,
+        keyCode: null
       }];
@@ -22,0 +23,0 @@ }

assets/scripts/src/reducers/items.js

@@ -13,3 +13,4 @@ const items = (state = [], action) => {
         highlighted: false,
-        customProperties: action.customProperties
+        customProperties: action.customProperties,
+        keyCode: null
       }];
@@ -16,0 +17,0 @@

bower.json

 {
   "name": "choices.js",
-  "version": "2.8.7",
+  "version": "2.8.9",
   "description": "A vanilla JS customisable text input/select box plugin",
@@ -5,0 +5,0 @@ "main": [

package.json

 {
   "name": "choices.js",
-  "version": "2.8.7",
+  "version": "2.8.9",
   "description": "A vanilla JS customisable text input/select box plugin",
@@ -8,4 +8,4 @@ "main": "./assets/scripts/dist/choices.min.js",
     "start": "node server.js",
-    "test": "./node_modules/karma/bin/karma start --single-run --no-auto-watch tests/karma.config.js",
-    "test:watch": "./node_modules/karma/bin/karma start --auto-watch --no-single-run tests/karma.config.js",
+    "test": "karma start --single-run --no-auto-watch tests/karma.config.js",
+    "test:watch": "karma start --auto-watch --no-single-run tests/karma.config.js",
     "css:watch": "nodemon -e scss -x \"npm run css:build\"",
@@ -18,3 +18,4 @@ "css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
     "version": "node version.js --current $npm_package_version --new $npm_config_newVersion",
-    "postversion": "npm run js:build"
+    "postversion": "npm run js:build",
+    "dev": "dev"
   },
@@ -21,0 +22,0 @@ "repository": {

README.md

@@ -79,2 +79,3 @@ # Choices.js ![Build Status](https://travis-ci.org/jshjohnson/Choices.svg?branch=master)
     shouldSort: true,
+    shouldSortItems: false,
     sortFilter: () => {...},
@@ -85,2 +86,3 @@ placeholder: true,
     appendValue: null,
+    renderSelectedChoices: 'auto',
     loadingText: 'Loading...',
@@ -323,4 +325,11 @@ noResultsText: 'No results found',
 
-**Usage:** Whether choices should be sorted. If false, choices will appear in the order they were given.
+**Usage:** Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given.
 
+### shouldSortItems
+**Type:** `Boolean` **Default:** `false`
+
+**Input types affected:** `text`, `select-multiple`
+
+**Usage:** Whether items should be sorted. If false, items will appear in the order they were selected.
+
 ### sortFilter
@@ -331,3 +340,3 @@ **Type:** `Function` **Default:** sortByAlpha
 
-**Usage:** The function that will sort choices before they are displayed (unless a user is searching). By default choices are sorted by alphabetical order.
+**Usage:** The function that will sort choices and items before they are displayed (unless a user is searching). By default choices and items are sorted by alphabetical order.
 
@@ -373,2 +382,9 @@ **Example:**
 
+### renderSelectedChoices
+**Type:** `String` **Default:** `auto`
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`.
+
 ### loadingText
@@ -524,3 +540,3 @@ **Type:** `String` **Default:** `Loading...`
 ### addItem
-**Arguments:** `id, value, label, groupValue`
+**Arguments:** `id, value, label, groupValue, keyCode`
 
@@ -553,3 +569,3 @@ **Input types affected:** `text`, `select-one`, `select-multiple`
 ### choice
-**Arguments:** `value`
+**Arguments:** `value, keyCode`
 
@@ -845,5 +861,2 @@ **Input types affected:** `select-one`, `select-multiple`
 
-## Contributions
-In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using npm scripts...bla bla bla
-
 ## License
@@ -850,0 +863,0 @@ MIT License

tests/spec/choices_spec.js

@@ -31,3 +31,3 @@ import 'whatwg-fetch';
 
-    it('should have initalised', function() {
+    it('should have initialised', function() {
       expect(this.choices.initialised).toBe(true);
@@ -40,3 +40,3 @@ });
       expect(reinitialise._createTemplates).not.toHaveBeenCalled();
-    })
+    });
 
@@ -70,2 +70,3 @@ it('should have a blank state', function() {
       expect(this.choices.config.shouldSort).toEqual(jasmine.any(Boolean));
+      expect(this.choices.config.shouldSortItems).toEqual(jasmine.any(Boolean));
       expect(this.choices.config.placeholder).toEqual(jasmine.any(Boolean));
@@ -75,2 +76,3 @@ expect(this.choices.config.placeholderValue).toEqual(null);
       expect(this.choices.config.appendValue).toEqual(null);
+      expect(this.choices.config.renderSelectedChoices).toEqual(jasmine.any(String));
       expect(this.choices.config.loadingText).toEqual(jasmine.any(String));
@@ -140,2 +142,20 @@ expect(this.choices.config.noResultsText).toEqual(jasmine.any(String));
     });
+
+    it('should backup and recover original styles', function () {
+      const origStyle = 'background-color: #ccc; margin: 5px padding: 10px;';
+
+      this.choices.destroy();
+      this.input.setAttribute('style', origStyle);
+      this.choices = new Choices(this.input);
+
+      let style = this.input.getAttribute('data-choice-orig-style');
+      expect(style).toEqual(origStyle);
+
+      this.choices.destroy();
+      style = this.input.getAttribute('data-choice-orig-style');
+      expect(style).toBeNull();
+
+      style = this.input.getAttribute('style');
+      expect(style).toEqual(origStyle);
+    });
   });
@@ -269,3 +289,3 @@
 
-    it('should open the choice list on focussing', function() {
+    it('should open the choice list on focusing', function() {
       this.choices = new Choices(this.input);
@@ -285,3 +305,3 @@ this.choices.input.focus();
 
-      for (var i = 0; i < 2; i++) {
+      for (let i = 0; i < 2; i++) {
         // Key down to third choice
@@ -508,3 +528,3 @@ this.choices._onKeyDown({
 
-    it('should sort choices if shouldSort is false', function() {
+    it('should sort choices if shouldSort is true', function() {
       this.choices = new Choices(this.input, {
@@ -938,2 +958,18 @@ shouldSort: true,
     });
+
+    it('should render selected choices', function() {
+      this.choices = new Choices(this.input, {
+        renderSelectedChoices: 'always'
+      });
+      const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
+      expect(renderedChoices.length).toEqual(3);
+    });
+
+    it('shouldn\'t render selected choices', function() {
+      this.choices = new Choices(this.input, {
+        renderSelectedChoices: 'auto'
+      });
+      const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
+      expect(renderedChoices.length).toEqual(1);
+    });
   });
@@ -951,4 +987,5 @@
           foo: 'bar'
-        }
-      }
+        },
+        keyCode: null
+      };
 
@@ -963,3 +1000,4 @@ const expectedState = [{
         highlighted: false,
-        customProperties: randomItem.customProperties
+        customProperties: randomItem.customProperties,
+        keyCode: randomItem.keyCode
       }];
@@ -973,3 +1011,4 @@
         randomItem.groupId,
-        randomItem.customProperties
+        randomItem.customProperties,
+        randomItem.keyCode
       );
@@ -990,4 +1029,5 @@
           foo: 'bar'
-        }
-      }
+        },
+        keyCode: null
+      };
 
@@ -1004,3 +1044,4 @@ const expectedState = [{
         score: 9999,
-        customProperties: randomChoice.customProperties
+        customProperties: randomChoice.customProperties,
+        keyCode: randomChoice.keyCode
       }];
@@ -1015,3 +1056,4 @@
         randomChoice.elementId,
-        randomChoice.customProperties
+        randomChoice.customProperties,
+        randomChoice.keyCode
       );
@@ -1065,5 +1107,5 @@
       this.choices.setValue([{
-          value: 'bar',
-          label: 'foo',
-          customProperties: expectedCustomProperties
+        value: 'bar',
+        label: 'foo',
+        customProperties: expectedCustomProperties
       }]);
@@ -1070,0 +1112,0 @@ const selectedItems = this.choices.getValue();

version.js

@@ -1,2 +0,2 @@
-// Example usage: npm --newVersion=2.8.7 run version
+// Example usage: npm --newVersion=2.8.9 run version
 
@@ -3,0 +3,0 @@ const fs = require('fs');

webpack.config.prod.js

 var path = require('path');
-var package = require('./package.json');
+var pkg = require('./package.json');
 var webpack = require('webpack');
 var wrapperPlugin = require('wrapper-webpack-plugin');
-var banner = `/*! ${ package.name } v${ package.version } | (c) ${ new Date().getFullYear() } ${ package.author } | ${ package.homepage } */ \n`;
+var banner = `/*! ${ pkg.name } v${ pkg.version } | (c) ${ new Date().getFullYear() } ${ pkg.author } | ${ pkg.homepage } */ \n`;
 var minimize = process.argv.indexOf('--minimize') !== -1;
@@ -7,0 +7,0 @@

No alert changes

Improved metrics

Total package byte prevSize

755279

increased by1.56%

Number of package files

49

increased by2.08%

Lines of code

10306

increased by1.53%

Number of lines in readme file

859

increased by1.54%

No dependency changes