cpr-select - npm Package Compare versions

Comparing version 2.5.6 to 2.6.0

build/cpr-select.js

@@ -6,3 +6,3 @@ /*!
  * license: MIT
- * version: 2.5.5
- */!function(e){var t={};function n(o){if(t[o])return t[o].exports;var l=t[o]={i:o,l:!1,exports:{}};return e[o].call(l.exports,l,l.exports,n),l.l=!0,l.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)n.d(o,l,function(t){return e[t]}.bind(null,l));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),l=function(e){return e&&e.__esModule?e:{default:e}}(n(1)),r=n(2);function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var i="",s=void 0;var c=function(e){function t(){var e,n,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var c=arguments.length,u=Array(c),d=0;d<c;d++)u[d]=arguments[d];return n=o=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),o.state={dialogDisplayed:!1,top:0,focused:!1,close:function(e){(function e(t,n){return!!t&&(t===n||e(t.parentElement,n))})(e.target,o.el)||o.setState({dialogDisplayed:!1,focused:!1})}},o.displayDialog=function(e){o.disabled()||o.setState({dialogDisplayed:!0})},o.getIndex=function(e){return(0,r.findIndex)(o.props.options,{key:e})},o.onKeyDown=function(e){if(!o.disabled()){var t=e.which,n=o.state.selectedIndex;9!==t&&e.preventDefault(),13===t?o.selectItem(n):38===t?n<=0?o.setState({dialogDisplayed:!0}):o.setState({dialogDisplayed:!0,selectedIndex:n-1}):40===t?n===o.props.options.length-1?o.setState({dialogDisplayed:!0}):o.setState({dialogDisplayed:!0,selectedIndex:n+1}):27===t?o.setState({dialogDisplayed:!1}):o.highlightByText(e.which)}},o.triggerItemChange=function(){o.props.onChange&&o.props.onChange.call(null,o.props.options[o.state.selectedIndex].key,o.props.options[o.state.selectedIndex],o.state.selectedIndex)},o.selectItem=function(e,t){o.disabled()||setTimeout(function(){o.setState({selectedIndex:e,focused:!0,dialogDisplayed:!1}),setTimeout(o.triggerItemChange)})},o.positionDialogAndGetTop=function(e,t,n){var l=e.length-t,r=Math.floor(n/36),a=Math.floor((r-1)/2);return t>a&&l<a+1?e.length<r?36*t*-1-10-2+"px":(o.positionDialog(t,n),n/-2-15-36*(a-l)+"px"):t>a?(o.positionDialog(t,n),n/-2-.0075*n):36*t*-1-10-1+"px"},o.positionDialog=function(e,t){setTimeout(function(){var n=o.el.querySelector(".cp-select__menu");if(n){var l=t/2-8;n.scrollTop=36*e-l}})},o.focusSelect=function(){o.state.focused||o.setState({focused:!0})},o.onBlur=function(){o.setState({focused:!1,dialogDisplayed:!1},function(){o.props.onBlur&&o.props.onBlur.call(null,o.props.options[o.state.selectedIndex].key,o.props.options[o.state.selectedIndex],o.state.selectedIndex)})},o.highlightByText=function(e){i+=String.fromCharCode(e);var t=o.getIndexFromString(i);t>-1&&o.selectItem(t),clearTimeout(s),s=setTimeout(function(){i=""},1e3)},o.getIndexFromString=function(e){return e=e.toLowerCase(),(0,r.findIndex)(o.props.options,function(t){return null!==o.getViewValue(t)&&0===o.getViewValue(t).toLowerCase().indexOf(e)})},o.getViewValue=function(e){return null===e.value||void 0===e.value?null:e.value||e},o.getDialog=function(e,t){if(e){var n=o.state.selectedIndex,r=t.map(function(e,t){return e.separator?l.default.createElement("li",{key:"separator"+t,className:"separator"}):l.default.createElement("li",{key:e.key,className:n===t?"+selected":"",onMouseDown:o.selectItem.bind(o,t)},l.default.createElement("a",{style:null!==e.value?{}:{color:"rgba(0,0,0,0)"}},null!==e.value?e.value:"null"))});setTimeout(function(){try{o.el.querySelector(".cp-select__hidden-input").focus()}catch(e){if(-1===e.message.indexOf("Invariant Violation"))throw new Error(e.message)}},100);var a=o.props.maxHeight||400,i=o.props.zIndex||1e3,s=o.props.dropdownClass;return l.default.createElement("div",null,l.default.createElement("ul",{className:"cp-select__menu cps-dropdown-menu "+(s||""),style:{top:o.positionDialogAndGetTop(t,n,a),maxHeight:a+"px",zIndex:i}},r))}},o.disabled=function(){return!o.props.options||0===o.props.options.length||o.props.disabled},o.render=function(){var e=o.props,t=e.options,n=void 0===t?[]:t,r=e.selected,a=e.outerClass,i=e.selectClass,s=e.placeholder,c=e.inputClass,u="cp-select",d=n[o.getIndex(r)],p=o;return o.disabled()&&(u+=" +disabled"),o.state.focused&&(u+=" +focus"),l.default.createElement("div",{ref:function(e){e&&(p.el=e)},className:"cp-select-outer "+(a||""),role:"select"},l.default.createElement("input",{className:"cp-select__hidden-input "+(c||""),onFocus:o.focusSelect,onBlur:o.onBlur,onKeyDown:o.onKeyDown}),l.default.createElement("div",{className:u+" "+(i||""),onClick:o.displayDialog},d?l.default.createElement("div",{className:"cp-select__selected"},d.value):l.default.createElement("div",{className:"cp-select__selected",style:{color:"#afafaf"}},s),n.length>0&&l.default.createElement("div",{className:"cp-select__icon"})),o.getDialog(o.state.dialogDisplayed,n))},a(o,n)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,l.default.Component),o(t,[{key:"componentWillUnmount",value:function(){document.body.removeEventListener("click",this.state.close)}},{key:"componentDidMount",value:function(){document.body.addEventListener("click",this.state.close);var e=this.getIndex(this.props.selected);this.setState(function(){return{selectedIndex:-1===e?0:e}})}}]),t}();t.default=c,"undefined"!=typeof window&&window&&!window.CanopySelect&&(window.CanopySelect=c)},function(e,t){e.exports=React},function(e,t){e.exports=_}]);
+ * version: 2.5.6
+ */!function(e){var t={};function n(o){if(t[o])return t[o].exports;var l=t[o]={i:o,l:!1,exports:{}};return e[o].call(l.exports,l,l.exports,n),l.l=!0,l.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)n.d(o,l,function(t){return e[t]}.bind(null,l));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),l=function(e){return e&&e.__esModule?e:{default:e}}(n(1)),r=n(2);function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}var i="",s=void 0;var c=function(e){function t(){var e,n,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var c=arguments.length,u=Array(c),d=0;d<c;d++)u[d]=arguments[d];return n=o=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),o.state={dialogDisplayed:!1,top:0,focused:!1,close:function(e){(function e(t,n){return!!t&&(t===n||e(t.parentElement,n))})(e.target,o.el)||o.setState({dialogDisplayed:!1,focused:!1})}},o.displayDialog=function(e){o.disabled()||o.setState({dialogDisplayed:!0})},o.getIndex=function(e){return(0,r.findIndex)(o.props.options,{key:e})},o.onKeyDown=function(e){if(!o.disabled()){var t=e.which,n=o.state.selectedIndex;9!==t&&e.preventDefault(),13===t?o.selectItem(n):38===t?n<=0||o.props.options[n-1].disabled?o.setState({dialogDisplayed:!0}):o.setState({dialogDisplayed:!0,selectedIndex:n-1}):40===t?n===o.props.options.length-1||o.props.options[n+1].disabled?o.setState({dialogDisplayed:!0}):o.setState({dialogDisplayed:!0,selectedIndex:n+1}):27===t?o.setState({dialogDisplayed:!1}):o.highlightByText(e.which)}},o.triggerItemChange=function(){o.props.onChange&&o.props.onChange.call(null,o.props.options[o.state.selectedIndex].key,o.props.options[o.state.selectedIndex],o.state.selectedIndex)},o.selectItem=function(e,t){o.disabled()||setTimeout(function(){o.setState({selectedIndex:e,focused:!0,dialogDisplayed:!1}),setTimeout(o.triggerItemChange)})},o.positionDialogAndGetTop=function(e,t,n){var l=e.length-t,r=Math.floor(n/36),a=Math.floor((r-1)/2);return t>a&&l<a+1?e.length<r?36*t*-1-10-2+"px":(o.positionDialog(t,n),n/-2-15-36*(a-l)+"px"):t>a?(o.positionDialog(t,n),n/-2-.0075*n):36*t*-1-10-1+"px"},o.positionDialog=function(e,t){setTimeout(function(){var n=o.el.querySelector(".cp-select__menu");if(n){var l=t/2-8;n.scrollTop=36*e-l}})},o.focusSelect=function(){o.state.focused||o.setState({focused:!0})},o.onBlur=function(){o.setState({focused:!1,dialogDisplayed:!1},function(){o.props.onBlur&&o.props.onBlur.call(null,o.props.options[o.state.selectedIndex].key,o.props.options[o.state.selectedIndex],o.state.selectedIndex)})},o.highlightByText=function(e){i+=String.fromCharCode(e);var t=o.getIndexFromString(i);t>-1&&o.selectItem(t),clearTimeout(s),s=setTimeout(function(){i=""},1e3)},o.getIndexFromString=function(e){return e=e.toLowerCase(),(0,r.findIndex)(o.props.options,function(t){return null!==o.getViewValue(t)&&0===o.getViewValue(t).toLowerCase().indexOf(e)})},o.getViewValue=function(e){return null===e.value||void 0===e.value?null:e.value||e},o.getDialog=function(e,t){if(e){var n=o.state.selectedIndex,a=t.map(function(e,t){if(e.separator)return l.default.createElement("li",{key:"separator"+t,className:"separator"});var a={color:null!==e.value?"":"rgba(0,0,0,0)",backgroundColor:e.disabled?"#fff":"",cursor:e.disabled?"default":""};return l.default.createElement("li",{key:e.key,className:n===t?"+selected":"",onMouseDown:e.disabled?r.noop:o.selectItem.bind(o,t)},l.default.createElement("a",{style:a,className:e.disabled?"cps-color-af":""},null!==e.value?e.value:"null"))});setTimeout(function(){try{o.el.querySelector(".cp-select__hidden-input").focus()}catch(e){if(-1===e.message.indexOf("Invariant Violation"))throw new Error(e.message)}},100);var i=o.props.maxHeight||400,s=o.props.zIndex||1e3,c=o.props.dropdownClass;return l.default.createElement("div",null,l.default.createElement("ul",{className:"cp-select__menu cps-dropdown-menu "+(c||""),style:{top:o.positionDialogAndGetTop(t,n,i),maxHeight:i+"px",zIndex:s}},a))}},o.disabled=function(){return!o.props.options||0===o.props.options.length||o.props.disabled},o.render=function(){var e=o.props,t=e.options,n=void 0===t?[]:t,r=e.selected,a=e.outerClass,i=e.selectClass,s=e.placeholder,c=e.inputClass,u="cp-select",d=n[o.getIndex(r)],p=o;return o.disabled()&&(u+=" +disabled"),o.state.focused&&(u+=" +focus"),l.default.createElement("div",{ref:function(e){e&&(p.el=e)},className:"cp-select-outer "+(a||""),role:"select"},l.default.createElement("input",{className:"cp-select__hidden-input "+(c||""),onFocus:o.focusSelect,onBlur:o.onBlur,onKeyDown:o.onKeyDown}),l.default.createElement("div",{className:u+" "+(i||""),onClick:o.displayDialog},d?l.default.createElement("div",{className:"cp-select__selected"},d.value):l.default.createElement("div",{className:"cp-select__selected",style:{color:"#afafaf"}},s),n.length>0&&l.default.createElement("div",{className:"cp-select__icon"})),o.getDialog(o.state.dialogDisplayed,n))},a(o,n)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,l.default.Component),o(t,[{key:"componentWillUnmount",value:function(){document.body.removeEventListener("click",this.state.close)}},{key:"componentDidMount",value:function(){document.body.addEventListener("click",this.state.close);var e=this.getIndex(this.props.selected);this.setState(function(){return{selectedIndex:-1===e?0:e}})}}]),t}();t.default=c,"undefined"!=typeof window&&window&&!window.CanopySelect&&(window.CanopySelect=c)},function(e,t){e.exports=React},function(e,t){e.exports=_}]);

lib/select.js

@@ -82,3 +82,3 @@ 'use strict';
         // up key
-        if (selectedIndex <= 0) {
+        if (selectedIndex <= 0 || _this.props.options[selectedIndex - 1].disabled) {
           _this.setState({
@@ -96,3 +96,3 @@ dialogDisplayed: true
 
-        if (selectedIndex === _this.props.options.length - 1) {
+        if (selectedIndex === _this.props.options.length - 1 || _this.props.options[selectedIndex + 1].disabled) {
           _this.setState({
@@ -210,8 +210,17 @@ dialogDisplayed: true
           } else {
+            var linkStyles = {
+              color: option.value !== null ? "" : "rgba(0,0,0,0)",
+              backgroundColor: option.disabled ? "#fff" : "",
+              cursor: option.disabled ? "default" : ""
+            };
             return _react2.default.createElement(
               'li',
-              { key: option.key, className: selectedIndex === index ? '+selected' : '', onMouseDown: _this.selectItem.bind(_this, index) },
+              {
+                key: option.key,
+                className: selectedIndex === index ? '+selected' : '',
+                onMouseDown: option.disabled ? _lodash.noop : _this.selectItem.bind(_this, index)
+              },
               _react2.default.createElement(
                 'a',
-                { style: option.value !== null ? {} : { color: "rgba(0,0,0,0)" } },
+                { style: linkStyles, className: '' + (option.disabled ? "cps-color-af" : "") },
                 option.value !== null ? option.value : "null"
@@ -218,0 +227,0 @@ )

lib/select.spec.js

@@ -136,2 +136,34 @@ 'use strict';
   });
+
+  it('Should not select disabled items with arrows', function (run) {
+    var items = [{
+      "value": "Alabama",
+      "key": "AL"
+    }, {
+      "value": "Alaska",
+      "key": "AK",
+      "disabled": true
+    }, {
+      "value": "American Samoa",
+      "key": "AS",
+      "disabled": true
+    }];
+
+    function callback(key, item, index) {
+      expect(key).toBe('AL');
+      expect(item.key).toBe('AL');
+      expect(index).toBe(0);
+      run();
+    }
+
+    var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: items, onChange: callback }));
+
+    var select = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
+    _testUtils2.default.Simulate.click(select);
+    var input = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select__hidden-input');
+    _testUtils2.default.Simulate.keyDown(input, { which: 38 });
+    _testUtils2.default.Simulate.keyDown(input, { which: 40 });
+    _testUtils2.default.Simulate.keyDown(input, { which: 40 });
+    _testUtils2.default.Simulate.keyDown(input, { which: 13 });
+  });
 });

package.json

 {
   "name": "cpr-select",
-  "version": "2.5.6",
+  "version": "2.6.0",
   "description": "A consistently styled cross-browser and keyboard friendly select component",
@@ -5,0 +5,0 @@ "main": "lib/select.js",

README.md

@@ -19,3 +19,3 @@ cpr-select [![Build Status](https://travis-ci.org/CanopyTax/cpr-select.png?branch=master)](https://travis-ci.org/CanopyTax/cpr-select)
 + `selected`: the key of the currently selected item
-+ `options`: the items to select from. You can insert a separator between items by putting `{separator: true}` as an item.
++ `options`: the items to select from. You can insert a separator between items by putting `{separator: true}` as an item. You can also prevent the user from selecting an item by including `disabled: true` in your item object.
 + `onChange`: called when selected item changes
@@ -47,3 +47,4 @@ + `onBlur`: called when the select widget is blurred (with the currently selected item)
     "value": "American Samoa",
-    "key": "AS"
+    "key": "AS",
+    "disabled": true
   }
@@ -50,0 +51,0 @@ ];

src/select.js

 import React from 'react';
-import {findIndex} from 'lodash';
+import {findIndex, noop} from 'lodash';
 
@@ -65,3 +65,3 @@ let searchString = "";
     } else if(key === 38) { // up key
-      if (selectedIndex <= 0) {
+      if (selectedIndex <= 0 || this.props.options[selectedIndex - 1].disabled) {
         this.setState({
@@ -79,3 +79,3 @@ dialogDisplayed: true,
 
-      if (selectedIndex === this.props.options.length - 1) {
+      if (selectedIndex === this.props.options.length - 1 || this.props.options[selectedIndex + 1].disabled) {
         this.setState({
@@ -221,3 +221,18 @@ dialogDisplayed: true
         } else {
-          return <li key={option.key} className={selectedIndex === index ? '+selected' : ''} onMouseDown={this.selectItem.bind(this, index)}><a style={option.value !== null ? {} : {color: "rgba(0,0,0,0)"}}>{option.value !== null ? option.value : "null"}</a></li>
+          const linkStyles = {
+            color: option.value !== null ? "" : "rgba(0,0,0,0)",
+            backgroundColor: option.disabled ? "#fff" : "",
+            cursor: option.disabled ? "default" : ""
+          }
+          return (
+            <li
+              key={option.key}
+              className={selectedIndex === index ? '+selected' : ''}
+              onMouseDown={option.disabled ? noop : this.selectItem.bind(this, index)}
+            >
+              <a style={linkStyles} className={`${option.disabled ? "cps-color-af" : ""}`}>
+                {option.value !== null ? option.value : "null"}
+              </a>
+            </li>
+          )
         }
@@ -224,0 +239,0 @@ });

src/select.spec.js

@@ -145,2 +145,38 @@ import CanopySelect from './select.js';
   });
+
+  it('Should not select disabled items with arrows', function(run) {
+    let items = [
+      {
+        "value": "Alabama",
+        "key": "AL"
+      }, {
+        "value": "Alaska",
+        "key": "AK",
+        "disabled": true
+      }, {
+        "value": "American Samoa",
+        "key": "AS",
+        "disabled": true
+      }
+    ];
+
+    function callback(key, item, index) {
+      expect(key).toBe('AL');
+      expect(item.key).toBe('AL');
+      expect(index).toBe(0);
+      run();
+    }
+
+    let multiSelect = TestUtils.renderIntoDocument(
+      <CanopySelect options={items} onChange={callback}></CanopySelect>
+    );
+
+    let select = TestUtils.findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
+    TestUtils.Simulate.click(select);
+    let input = TestUtils.findRenderedDOMComponentWithClass(multiSelect, 'cp-select__hidden-input');
+    TestUtils.Simulate.keyDown(input, {which: 38});
+    TestUtils.Simulate.keyDown(input, {which: 40});
+    TestUtils.Simulate.keyDown(input, {which: 40});
+    TestUtils.Simulate.keyDown(input, {which: 13});
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46958

increased by7.98%

Lines of code

979

increased by9.39%

Number of lines in readme file

60

increased by1.69%

No dependency changes