cpr-select - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

build/cpr-select.js

@@ -6,4 +6,4 @@ /*!
  * license: MIT
- * version: 2.2.3
+ * version: 2.2.4
  */
-!function(e){function t(i){if(s[i])return s[i].exports;var o=s[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){"use strict";function i(e,t){for(var s,i=!0;i;){i=!1;var o=e,n=t;if(!o)return!1;if(s=o===n)return s;e=o.parentElement,t=n,i=!0}}var o=function(e){return e&&e.__esModule?e["default"]:e},n=o(s(1)),l=s(2).findIndex,a="",r=void 0,c=n.createClass({displayName:"CanopySelect",componentWillMount:function(){document.body.addEventListener("click",this.state.close)},componentWillUnmount:function(){document.body.removeEventListener("click",this.state.close)},getInitialState:function(){var e=this;return{dialogDisplayed:!1,top:0,focused:!1,close:function(t){i(t.target,e.el)||e.setState({dialogDisplayed:!1,focused:!1})}}},displayDialog:function(e){this.props.disabled||this.setState({dialogDisplayed:!0})},getIndex:function(e){return l(this.props.options,{key:e})},onKeyDown:function(e){if(!this.props.disabled){var t=e.which,s=this.state.selectedIndex;9!==t&&e.preventDefault(),13===t?this.selectItem(s):38===t?0>=s?this.setState({dialogDisplayed:!0}):this.setState({dialogDisplayed:!0,selectedIndex:void 0===s?0:s-1}):40===t?s===this.props.options.length-1?this.setState({dialogDisplayed:!0}):this.setState({dialogDisplayed:!0,selectedIndex:s?s+1:0}):27===t?this.setState({dialogDisplayed:!1}):this.highlightByText(e.which)}},triggerItemChange:function(){this.props.onChange&&this.props.onChange.call(null,this.props.options[this.state.selectedIndex].key,this.props.options[this.state.selectedIndex],this.state.selectedIndex)},selectItem:function(e,t){var s=this;this.props.disabled||setTimeout(function(){s.setState({selectedIndex:e,focused:!0,dialogDisplayed:!1}),setTimeout(s.triggerItemChange)})},positionDialogAndGetTop:function(e,t,s){var i=e.length-t,o=Math.floor(s/36),n=Math.floor((o-1)/2);if(t>n&&n+1>i){if(e.length<o)return-2+(36*t*-1-10)+"px";this.positionDialog(t,s);var l=s/-2-15;return l-36*(n-i)+"px"}return t>n?(this.positionDialog(t,s),s/-2-.0075*s):-1+(36*t*-1-10)+"px"},positionDialog:function(e,t){var s=this;setTimeout(function(){var i=s.el.querySelector(".cp-select__menu");if(i){var o=t/2-8;i.scrollTop=36*e-o}})},focusSelect:function(){this.state.focused||this.setState({focused:!0})},onBlur:function(){this.setState({focused:!1})},highlightByText:function(e){a+=String.fromCharCode(e);var t=this.getIndexFromString(a);t>-1&&this.selectItem(t),clearTimeout(r),r=setTimeout(function(){a=""},1e3)},getIndexFromString:function(e){var t=this;return e=e.toLowerCase(),l(this.props.options,function(s){return null!==t.getViewValue(s)?0===t.getViewValue(s).toLowerCase().indexOf(e):!1})},getViewValue:function(e){return null===e.value||void 0===e.value?null:e.value||e},getDialog:function(e,t){var s=this;if(e){var i=function(){var e=s.state.selectedIndex,i=t.map(function(t,i){return t.separator?n.createElement("li",{key:"separator"+i,className:"separator"}):n.createElement("li",{key:t.key,className:e===i?"+selected":"",onMouseDown:s.selectItem.bind(s,i)},n.createElement("a",{style:null!==t.value?{}:{color:"rgba(0,0,0,0)"}},null!==t.value?t.value:"null"))});setTimeout(function(){try{s.el.querySelector(".cp-select__hidden-input").focus()}catch(e){if(-1===e.message.indexOf("Invariant Violation"))throw new Error(e.message)}},100);var o=s.props.maxHeight||400;return{v:n.createElement("div",null,n.createElement("ul",{className:"cp-select__menu cps-dropdown-menu",style:{top:s.positionDialogAndGetTop(t,e,o),maxHeight:o+"px"}},i))}}();if("object"==typeof i)return i.v}},render:function(){var e="cp-select",t=this.props.options[this.getIndex(this.props.selected)],s=this;return this.props.disabled&&(e+=" +disabled"),this.state.focused&&!this.props.disabled&&(e+=" +focus"),n.createElement("div",{ref:function(e){e&&(s.el=e)},className:"cp-select-outer "+this.props.outerClass,role:"select"},n.createElement("input",{className:"cp-select__hidden-input",onFocus:this.focusSelect,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),n.createElement("div",{className:""+e+" "+this.props.selectClass,onClick:this.displayDialog},t?n.createElement("div",{className:"cp-select__selected"},t.value):n.createElement("div",{className:"cp-select__selected",style:{color:"#afafaf"}},this.props.placeholder),n.createElement("div",{className:"cp-select__icon"})),this.getDialog(this.state.dialogDisplayed,this.props.options))}});"undefined"!=typeof window&&window&&!window.CanopySelect&&(window.CanopySelect=c),e.exports=c},function(e,t,s){e.exports=React},function(e,t,s){e.exports=_}]);
+!function(e){function t(o){if(n[o])return n[o].exports;var l=n[o]={i:o,l:!1,exports:{}};return e[o].call(l.exports,l,l.exports,t),l.l=!0,l.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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}function a(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)}function r(e,t){return!!e&&(e===t||r(e.parentElement,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=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}}(),s=n(1),c=function(e){return e&&e.__esModule?e:{default:e}}(s),u=n(2),p="",d=void 0,f=function(e){function t(){var e,n,a,i;o(this,t);for(var s=arguments.length,f=Array(s),g=0;g<s;g++)f[g]=arguments[g];return n=a=l(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(f))),a.state={dialogDisplayed:!1,top:0,focused:!1,close:function(e){r(e.target,a.el)||a.setState({dialogDisplayed:!1,focused:!1})}},a.displayDialog=function(e){a.props.disabled||a.setState({dialogDisplayed:!0})},a.getIndex=function(e){return(0,u.findIndex)(a.props.options,{key:e})},a.onKeyDown=function(e){if(!a.props.disabled){var t=e.which,n=a.state.selectedIndex;9!==t&&e.preventDefault(),13===t?a.selectItem(n):38===t?n<=0?a.setState({dialogDisplayed:!0}):a.setState({dialogDisplayed:!0,selectedIndex:void 0===n?0:n-1}):40===t?n===a.props.options.length-1?a.setState({dialogDisplayed:!0}):a.setState({dialogDisplayed:!0,selectedIndex:n?n+1:0}):27===t?a.setState({dialogDisplayed:!1}):a.highlightByText(e.which)}},a.triggerItemChange=function(){a.props.onChange&&a.props.onChange.call(null,a.props.options[a.state.selectedIndex].key,a.props.options[a.state.selectedIndex],a.state.selectedIndex)},a.selectItem=function(e,t){a.props.disabled||setTimeout(function(){a.setState({selectedIndex:e,focused:!0,dialogDisplayed:!1}),setTimeout(a.triggerItemChange)})},a.positionDialogAndGetTop=function(e,t,n){var o=e.length-t,l=Math.floor(n/36),r=Math.floor((l-1)/2);if(t>r&&o<r+1){if(e.length<l)return 36*t*-1-10-2+"px";a.positionDialog(t,n);return n/-2-15-36*(r-o)+"px"}return t>r?(a.positionDialog(t,n),n/-2-.0075*n):36*t*-1-10-1+"px"},a.positionDialog=function(e,t){setTimeout(function(){var n=a.el.querySelector(".cp-select__menu");if(n){var o=t/2-8;n.scrollTop=36*e-o}})},a.focusSelect=function(){a.state.focused||a.setState({focused:!0})},a.onBlur=function(){a.setState({focused:!1})},a.highlightByText=function(e){p+=String.fromCharCode(e);var t=a.getIndexFromString(p);t>-1&&a.selectItem(t),clearTimeout(d),d=setTimeout(function(){p=""},1e3)},a.getIndexFromString=function(e){return e=e.toLowerCase(),(0,u.findIndex)(a.props.options,function(t){return null!==a.getViewValue(t)&&0===a.getViewValue(t).toLowerCase().indexOf(e)})},a.getViewValue=function(e){return null===e.value||void 0===e.value?null:e.value||e},a.getDialog=function(e,t){if(e){var n=a.state.selectedIndex,o=t.map(function(e,t){return e.separator?c.default.createElement("li",{key:"separator"+t,className:"separator"}):c.default.createElement("li",{key:e.key,className:n===t?"+selected":"",onMouseDown:a.selectItem.bind(a,t)},c.default.createElement("a",{style:null!==e.value?{}:{color:"rgba(0,0,0,0)"}},null!==e.value?e.value:"null"))});setTimeout(function(){try{a.el.querySelector(".cp-select__hidden-input").focus()}catch(e){if(-1===e.message.indexOf("Invariant Violation"))throw new Error(e.message)}},100);var l=a.props.maxHeight||400;return c.default.createElement("div",null,c.default.createElement("ul",{className:"cp-select__menu cps-dropdown-menu",style:{top:a.positionDialogAndGetTop(t,n,l),maxHeight:l+"px"}},o))}},a.render=function(){var e="cp-select",t=a.props.options[a.getIndex(a.props.selected)],n=a;return a.props.disabled&&(e+=" +disabled"),a.state.focused&&!a.props.disabled&&(e+=" +focus"),c.default.createElement("div",{ref:function(e){e&&(n.el=e)},className:"cp-select-outer "+a.props.outerClass,role:"select"},c.default.createElement("input",{className:"cp-select__hidden-input",onFocus:a.focusSelect,onBlur:a.onBlur,onKeyDown:a.onKeyDown}),c.default.createElement("div",{className:e+" "+a.props.selectClass,onClick:a.displayDialog},t?c.default.createElement("div",{className:"cp-select__selected"},t.value):c.default.createElement("div",{className:"cp-select__selected",style:{color:"#afafaf"}},a.props.placeholder),c.default.createElement("div",{className:"cp-select__icon"})),a.getDialog(a.state.dialogDisplayed,a.props.options))},i=n,l(a,i)}return a(t,e),i(t,[{key:"componentWillMount",value:function(){document.body.addEventListener("click",this.state.close)}},{key:"componentWillUnmount",value:function(){document.body.removeEventListener("click",this.state.close)}}]),t}(c.default.Component);t.default=f,"undefined"!=typeof window&&window&&!window.CanopySelect&&(window.CanopySelect=f)},function(e,t){e.exports=React},function(e,t){e.exports=_}]);

lib/select.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
 	value: true
 });
+exports.default = undefined;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -15,43 +16,33 @@ var _react = require('react');
 
-var searchString = "";
-var keyTimeout = undefined;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function nearest(_x, _x2) {
-	var _left;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-	var _again = true;
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-	_function: while (_again) {
-		var element = _x,
-		    el = _x2;
-		_again = false;
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-		if (!element) return false;
+var searchString = "";
+var keyTimeout = void 0;
 
-		if (_left = element === el) {
-			return _left;
-		}
-
-		_x = element.parentElement;
-		_x2 = el;
-		_again = true;
-		continue _function;
-	}
+function nearest(element, el) {
+	if (!element) return false;
+	return element === el || nearest(element.parentElement, el);
 }
 
-var CanopySelect = _react2['default'].createClass({
-	displayName: 'CanopySelect',
+var CanopySelect = function (_React$Component) {
+	_inherits(CanopySelect, _React$Component);
 
-	componentWillMount: function componentWillMount() {
-		document.body.addEventListener('click', this.state.close);
-	},
+	function CanopySelect() {
+		var _ref;
 
-	componentWillUnmount: function componentWillUnmount() {
-		document.body.removeEventListener('click', this.state.close);
-	},
+		var _temp, _this, _ret;
 
-	getInitialState: function getInitialState() {
-		var _this = this;
+		_classCallCheck(this, CanopySelect);
 
-		return {
+		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+			args[_key] = arguments[_key];
+		}
+
+		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CanopySelect.__proto__ || Object.getPrototypeOf(CanopySelect)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
 			dialogDisplayed: false,
@@ -68,55 +59,48 @@ top: 0,
 			}
-		};
-	},
+		}, _this.displayDialog = function (e) {
+			if (_this.props.disabled) return;
 
-	displayDialog: function displayDialog(e) {
-		if (this.props.disabled) return;
+			_this.setState({
+				dialogDisplayed: true
+			});
+		}, _this.getIndex = function (key) {
+			return (0, _lodash.findIndex)(_this.props.options, { key: key });
+		}, _this.onKeyDown = function (e) {
+			if (_this.props.disabled) return;
 
-		this.setState({
-			dialogDisplayed: true
-		});
-	},
+			var key = e.which;
+			var selectedIndex = _this.state.selectedIndex;
 
-	getIndex: function getIndex(key) {
-		return (0, _lodash.findIndex)(this.props.options, { key: key });
-	},
+			if (key !== 9) {
+				// tab key
+				e.preventDefault();
+			}
 
-	onKeyDown: function onKeyDown(e) {
-		if (this.props.disabled) return;
+			if (key === 13) {
+				// enter key
+				_this.selectItem(selectedIndex);
+			} else if (key === 38) {
+				// up key
 
-		var key = e.which;
-		var selectedIndex = this.state.selectedIndex;
+				if (selectedIndex <= 0) {
+					_this.setState({
+						dialogDisplayed: true
+					});
+				} else {
+					_this.setState({
+						dialogDisplayed: true,
+						selectedIndex: selectedIndex === undefined ? 0 : selectedIndex - 1
+					});
+				}
 
-		if (key !== 9) {
-			// tab key
-			e.preventDefault();
-		}
-
-		if (key === 13) {
-			// enter key
-			this.selectItem(selectedIndex);
-		} else if (key === 38) {
-			// up key
-
-			if (selectedIndex <= 0) {
-				this.setState({
-					dialogDisplayed: true
-				});
-			} else {
-				this.setState({
-					dialogDisplayed: true,
-					selectedIndex: selectedIndex === undefined ? 0 : selectedIndex - 1
-				});
-			}
-
-			//positionDialog(scope.collection[scope.selectedIndex]);
-		} else if (key === 40) {
+				//positionDialog(scope.collection[scope.selectedIndex]);
+			} else if (key === 40) {
 				// down key
 
-				if (selectedIndex === this.props.options.length - 1) {
-					this.setState({
+				if (selectedIndex === _this.props.options.length - 1) {
+					_this.setState({
 						dialogDisplayed: true
 					});
 				} else {
-					this.setState({
+					_this.setState({
 						dialogDisplayed: true,
@@ -129,131 +113,102 @@ selectedIndex: !selectedIndex ? 0 : selectedIndex + 1
 			} else if (key === 27) {
-					// escape key
-					this.setState({
-						dialogDisplayed: false
-					});
-				} else {
-					// all other keys
-					this.highlightByText(e.which);
-				}
-	},
+				// escape key
+				_this.setState({
+					dialogDisplayed: false
+				});
+			} else {
+				// all other keys
+				_this.highlightByText(e.which);
+			}
+		}, _this.triggerItemChange = function () {
+			if (_this.props.onChange) {
+				_this.props.onChange.call(null, _this.props.options[_this.state.selectedIndex].key, _this.props.options[_this.state.selectedIndex], _this.state.selectedIndex);
+			}
+		}, _this.selectItem = function (index, e) {
+			if (_this.props.disabled) return;
 
-	triggerItemChange: function triggerItemChange() {
-		if (this.props.onChange) {
-			this.props.onChange.call(null, this.props.options[this.state.selectedIndex].key, this.props.options[this.state.selectedIndex], this.state.selectedIndex);
-		}
-	},
-
-	selectItem: function selectItem(index, e) {
-		var _this2 = this;
-
-		if (this.props.disabled) return;
-
-		setTimeout(function () {
-			_this2.setState({
-				selectedIndex: index,
-				focused: true,
-				dialogDisplayed: false
+			setTimeout(function () {
+				_this.setState({
+					selectedIndex: index,
+					focused: true,
+					dialogDisplayed: false
+				});
+				setTimeout(_this.triggerItemChange);
 			});
-			setTimeout(_this2.triggerItemChange);
-		});
-	},
+		}, _this.positionDialogAndGetTop = function (options, index, maxHeight) {
+			var distanceFromEnd = options.length - index;
+			var numVisibleOptions = Math.floor(maxHeight / 36);
+			var numSurroundingOptions = Math.floor((numVisibleOptions - 1) / 2);
+			var unusedPixels = maxHeight % 36;
 
-	positionDialogAndGetTop: function positionDialogAndGetTop(options, index, maxHeight) {
-		var distanceFromEnd = options.length - index;
-		var numVisibleOptions = Math.floor(maxHeight / 36);
-		var numSurroundingOptions = Math.floor((numVisibleOptions - 1) / 2);
-		var unusedPixels = maxHeight % 36;
-
-		if (index > numSurroundingOptions && distanceFromEnd < numSurroundingOptions + 1) {
-			// Bottom 5
-			if (options.length < numVisibleOptions) {
-				// Dialog doesn't have a scroll
-				return -2 + (36 * index * -1 - 10) + "px";
+			if (index > numSurroundingOptions && distanceFromEnd < numSurroundingOptions + 1) {
+				// Bottom 5
+				if (options.length < numVisibleOptions) {
+					// Dialog doesn't have a scroll
+					return -2 + (36 * index * -1 - 10) + "px";
+				} else {
+					// Dialog has a scroll
+					_this.positionDialog(index, maxHeight);
+					var start = maxHeight / -2 - 15;
+					return start - (numSurroundingOptions - distanceFromEnd) * 36 + "px";
+				}
+			} else if (index > numSurroundingOptions) {
+				// Middle
+				_this.positionDialog(index, maxHeight);
+				return maxHeight / -2 - 0.0075 * maxHeight;
 			} else {
-				// Dialog has a scroll
-				this.positionDialog(index, maxHeight);
-				var start = maxHeight / -2 - 15;
-				return start - (numSurroundingOptions - distanceFromEnd) * 36 + "px";
+				// Top 5
+				return -1 + (36 * index * -1 - 10) + "px";
 			}
-		} else if (index > numSurroundingOptions) {
-			// Middle
-			this.positionDialog(index, maxHeight);
-			return maxHeight / -2 - 0.0075 * maxHeight;
-		} else {
-			// Top 5
-			return -1 + (36 * index * -1 - 10) + "px";
-		}
-	},
-
-	positionDialog: function positionDialog(index, maxHeight) {
-		var _this3 = this;
-
-		setTimeout(function () {
-			var menuDialog = _this3.el.querySelector(".cp-select__menu");
-			if (menuDialog) {
-				var dialogHeightImpact = maxHeight / 2 - 8;
-				menuDialog.scrollTop = 36 * index - dialogHeightImpact;
+		}, _this.positionDialog = function (index, maxHeight) {
+			setTimeout(function () {
+				var menuDialog = _this.el.querySelector(".cp-select__menu");
+				if (menuDialog) {
+					var dialogHeightImpact = maxHeight / 2 - 8;
+					menuDialog.scrollTop = 36 * index - dialogHeightImpact;
+				}
+			});
+		}, _this.focusSelect = function () {
+			if (!_this.state.focused) {
+				_this.setState({
+					focused: true
+				});
 			}
-		});
-	},
-
-	focusSelect: function focusSelect() {
-		if (!this.state.focused) {
-			this.setState({
-				focused: true
+		}, _this.onBlur = function () {
+			_this.setState({
+				focused: false
 			});
-		}
-	},
+		}, _this.highlightByText = function (charCode) {
+			searchString += String.fromCharCode(charCode);
+			var i = _this.getIndexFromString(searchString);
 
-	onBlur: function onBlur() {
-		this.setState({
-			focused: false
-		});
-	},
+			if (i > -1) {
+				_this.selectItem(i);
+			}
 
-	highlightByText: function highlightByText(charCode) {
-		searchString += String.fromCharCode(charCode);
-		var i = this.getIndexFromString(searchString);
+			clearTimeout(keyTimeout);
 
-		if (i > -1) {
-			this.selectItem(i);
-		}
+			keyTimeout = setTimeout(function () {
+				searchString = "";
+			}, 1000);
+		}, _this.getIndexFromString = function (searchString) {
+			searchString = searchString.toLowerCase();
+			return (0, _lodash.findIndex)(_this.props.options, function (option) {
+				return _this.getViewValue(option) !== null ? _this.getViewValue(option).toLowerCase().indexOf(searchString) === 0 : false;
+			});
+		}, _this.getViewValue = function (option) {
+			if (option.value === null || option.value === undefined) return null;
+			return option.value || option;
+		}, _this.getDialog = function (dialogDisplayed, options) {
+			if (dialogDisplayed) {
 
-		clearTimeout(keyTimeout);
+				var selectedIndex = _this.state.selectedIndex;
 
-		keyTimeout = setTimeout(function () {
-			searchString = "";
-		}, 1000);
-	},
-
-	getIndexFromString: function getIndexFromString(searchString) {
-		var _this4 = this;
-
-		searchString = searchString.toLowerCase();
-		return (0, _lodash.findIndex)(this.props.options, function (option) {
-			return _this4.getViewValue(option) !== null ? _this4.getViewValue(option).toLowerCase().indexOf(searchString) === 0 : false;
-		});
-	},
-
-	getViewValue: function getViewValue(option) {
-		if (option.value === null || option.value === undefined) return null;
-		return option.value || option;
-	},
-
-	getDialog: function getDialog(dialogDisplayed, options) {
-		var _this5 = this;
-
-		if (dialogDisplayed) {
-			var _ret = (function () {
-
-				var selectedIndex = _this5.state.selectedIndex;
-
 				var optionElements = options.map(function (option, index) {
 					if (option.separator) {
-						return _react2['default'].createElement('li', { key: 'separator' + index, className: 'separator' });
+						return _react2.default.createElement('li', { key: 'separator' + index, className: 'separator' });
 					} else {
-						return _react2['default'].createElement(
+						return _react2.default.createElement(
 							'li',
-							{ key: option.key, className: selectedIndex === index ? '+selected' : '', onMouseDown: _this5.selectItem.bind(_this5, index) },
-							_react2['default'].createElement(
+							{ key: option.key, className: selectedIndex === index ? '+selected' : '', onMouseDown: _this.selectItem.bind(_this, index) },
+							_react2.default.createElement(
 								'a',
@@ -269,3 +224,3 @@ { style: option.value !== null ? {} : { color: "rgba(0,0,0,0)" } },
 					try {
-						_this5.el.querySelector('.cp-select__hidden-input').focus();
+						_this.el.querySelector('.cp-select__hidden-input').focus();
 					} catch (e) {
@@ -279,56 +234,64 @@ // It is okay if the element does not exist anymore
 
-				var maxHeight = _this5.props.maxHeight || 400;
-				return {
-					v: _react2['default'].createElement(
-						'div',
-						null,
-						_react2['default'].createElement(
-							'ul',
-							{ className: 'cp-select__menu cps-dropdown-menu', style: { top: _this5.positionDialogAndGetTop(options, selectedIndex, maxHeight), maxHeight: maxHeight + 'px' } },
-							optionElements
-						)
+				var maxHeight = _this.props.maxHeight || 400;
+				return _react2.default.createElement(
+					'div',
+					null,
+					_react2.default.createElement(
+						'ul',
+						{ className: 'cp-select__menu cps-dropdown-menu', style: { top: _this.positionDialogAndGetTop(options, selectedIndex, maxHeight), maxHeight: maxHeight + 'px' } },
+						optionElements
 					)
-				};
-			})();
+				);
+			}
+		}, _this.render = function () {
+			var cpSelectClasses = 'cp-select';
+			var selectedItem = _this.props.options[_this.getIndex(_this.props.selected)];
+			var that = _this;
 
-			if (typeof _ret === 'object') return _ret.v;
-		}
-	},
+			if (_this.props.disabled) cpSelectClasses += ' +disabled';
+			if (_this.state.focused && !_this.props.disabled) cpSelectClasses += ' +focus';
 
-	render: function render() {
-		var cpSelectClasses = 'cp-select';
-		var selectedItem = this.props.options[this.getIndex(this.props.selected)];
-		var that = this;
-
-		if (this.props.disabled) cpSelectClasses += ' +disabled';
-		if (this.state.focused && !this.props.disabled) cpSelectClasses += ' +focus';
-
-		return _react2['default'].createElement(
-			'div',
-			{ ref: function (el) {
-					if (el) that.el = el;
-				}, className: 'cp-select-outer ' + this.props.outerClass, role: 'select' },
-			_react2['default'].createElement('input', { className: 'cp-select__hidden-input', onFocus: this.focusSelect, onBlur: this.onBlur, onKeyDown: this.onKeyDown }),
-			_react2['default'].createElement(
+			return _react2.default.createElement(
 				'div',
-				{ className: cpSelectClasses + ' ' + this.props.selectClass, onClick: this.displayDialog },
-				selectedItem ? _react2['default'].createElement(
+				{ ref: function ref(el) {
+						if (el) that.el = el;
+					}, className: 'cp-select-outer ' + _this.props.outerClass, role: 'select' },
+				_react2.default.createElement('input', { className: 'cp-select__hidden-input', onFocus: _this.focusSelect, onBlur: _this.onBlur, onKeyDown: _this.onKeyDown }),
+				_react2.default.createElement(
 					'div',
-					{ className: 'cp-select__selected' },
-					selectedItem.value
-				) : _react2['default'].createElement(
-					'div',
-					{ className: 'cp-select__selected', style: { color: '#afafaf' } },
-					this.props.placeholder
+					{ className: cpSelectClasses + ' ' + _this.props.selectClass, onClick: _this.displayDialog },
+					selectedItem ? _react2.default.createElement(
+						'div',
+						{ className: 'cp-select__selected' },
+						selectedItem.value
+					) : _react2.default.createElement(
+						'div',
+						{ className: 'cp-select__selected', style: { color: '#afafaf' } },
+						_this.props.placeholder
+					),
+					_react2.default.createElement('div', { className: 'cp-select__icon' })
 				),
-				_react2['default'].createElement('div', { className: 'cp-select__icon' })
-			),
-			this.getDialog(this.state.dialogDisplayed, this.props.options)
-		);
+				_this.getDialog(_this.state.dialogDisplayed, _this.props.options)
+			);
+		}, _temp), _possibleConstructorReturn(_this, _ret);
 	}
-});
 
-if (typeof window !== "undefined" && window && !window.CanopySelect) window.CanopySelect = CanopySelect;
+	_createClass(CanopySelect, [{
+		key: 'componentWillMount',
+		value: function componentWillMount() {
+			document.body.addEventListener('click', this.state.close);
+		}
+	}, {
+		key: 'componentWillUnmount',
+		value: function componentWillUnmount() {
+			document.body.removeEventListener('click', this.state.close);
+		}
+	}]);
 
-exports['default'] = CanopySelect;
-module.exports = exports['default'];
+	return CanopySelect;
+}(_react2.default.Component);
+
+exports.default = CanopySelect;
+;
+
+if (typeof window !== "undefined" && window && !window.CanopySelect) window.CanopySelect = CanopySelect;

lib/select.spec.js

 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _select = require('./select.js');
 
-var _selectJs = require('./select.js');
+var _select2 = _interopRequireDefault(_select);
 
-var _selectJs2 = _interopRequireDefault(_selectJs);
-
 var _react = require('react');
@@ -17,12 +15,14 @@
 
-var _reactAddonsTestUtils = require('react-addons-test-utils');
+var _testUtils = require('react-dom/test-utils');
 
-var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+var _testUtils2 = _interopRequireDefault(_testUtils);
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 describe('select', function () {
 	it('Should render an empty component', function () {
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: [] }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: [] }));
 
-		var hiddenInput = _reactAddonsTestUtils2['default'].scryRenderedDOMComponentsWithTag(multiSelect, 'input');
-		var renderedInput = _reactAddonsTestUtils2['default'].scryRenderedDOMComponentsWithClass(multiSelect, 'cp-select');
+		var hiddenInput = _testUtils2.default.scryRenderedDOMComponentsWithTag(multiSelect, 'input');
+		var renderedInput = _testUtils2.default.scryRenderedDOMComponentsWithClass(multiSelect, 'cp-select');
 
@@ -34,6 +34,6 @@ expect(hiddenInput.length).toBe(1);
 	it('Should render placeholder', function () {
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: [], placeholder: 'Kifak?' }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: [], placeholder: 'Kifak?' }));
 
-		var selection = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select__selected');
-		expect(_reactDom2['default'].findDOMNode(selection).textContent).toEqual('Kifak?');
+		var selection = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select__selected');
+		expect(_reactDom2.default.findDOMNode(selection).textContent).toEqual('Kifak?');
 	});
@@ -53,6 +53,6 @@
 
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: items, selected: items[1].key }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: items, selected: items[1].key }));
 
-		var selection = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select__selected');
-		expect(_reactDom2['default'].findDOMNode(selection).textContent).toEqual('Alaska');
+		var selection = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select__selected');
+		expect(_reactDom2.default.findDOMNode(selection).textContent).toEqual('Alaska');
 	});
@@ -72,10 +72,10 @@
 
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: items }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: items }));
 
-		var select = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
-		_reactAddonsTestUtils2['default'].Simulate.click(select);
+		var select = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
+		_testUtils2.default.Simulate.click(select);
 
-		var menu = _reactAddonsTestUtils2['default'].scryRenderedDOMComponentsWithClass(multiSelect, 'cp-select__menu');
+		var menu = _testUtils2.default.scryRenderedDOMComponentsWithClass(multiSelect, 'cp-select__menu');
 		expect(menu.length).toBe(1);
-		expect(_reactDom2['default'].findDOMNode(menu[0]).querySelectorAll('li').length).toBe(3);
+		expect(_reactDom2.default.findDOMNode(menu[0]).querySelectorAll('li').length).toBe(3);
 	});
@@ -102,8 +102,8 @@
 
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: items, onChange: callback }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: items, onChange: callback }));
 
-		var select = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
-		_reactAddonsTestUtils2['default'].Simulate.click(select);
+		var select = _testUtils2.default.findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
+		_testUtils2.default.Simulate.click(select);
 
-		_reactAddonsTestUtils2['default'].Simulate.mouseDown(_reactDom2['default'].findDOMNode(_reactDom2['default'].findDOMNode(multiSelect).querySelectorAll('li')[2]));
+		_testUtils2.default.Simulate.mouseDown(_reactDom2.default.findDOMNode(_reactDom2.default.findDOMNode(multiSelect).querySelectorAll('li')[2]));
 	});
@@ -130,13 +130,13 @@
 
-		var multiSelect = _reactAddonsTestUtils2['default'].renderIntoDocument(_react2['default'].createElement(_selectJs2['default'], { options: items, onChange: callback }));
+		var multiSelect = _testUtils2.default.renderIntoDocument(_react2.default.createElement(_select2.default, { options: items, onChange: callback }));
 
-		var select = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select');
-		_reactAddonsTestUtils2['default'].Simulate.click(select);
-		var input = _reactAddonsTestUtils2['default'].findRenderedDOMComponentWithClass(multiSelect, 'cp-select__hidden-input');
-		_reactAddonsTestUtils2['default'].Simulate.keyDown(input, { which: 38 });
-		_reactAddonsTestUtils2['default'].Simulate.keyDown(input, { which: 38 });
-		_reactAddonsTestUtils2['default'].Simulate.keyDown(input, { which: 38 });
-		_reactAddonsTestUtils2['default'].Simulate.keyDown(input, { which: 38 });
-		_reactAddonsTestUtils2['default'].Simulate.keyDown(input, { which: 13 });
+		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: 38 });
+		_testUtils2.default.Simulate.keyDown(input, { which: 38 });
+		_testUtils2.default.Simulate.keyDown(input, { which: 38 });
+		_testUtils2.default.Simulate.keyDown(input, { which: 13 });
 	});
 });

package.json

 {
   "name": "cpr-select",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "A consistently styled cross-browser and keyboard friendly select component",
@@ -27,25 +27,27 @@ "main": "lib/select.js",
   "devDependencies": {
-    "autoprefixer-loader": "1.2.0",
-    "babel": "5.6.14",
-    "babel-core": "4.7.13",
-    "babel-loader": "4.2.0",
-    "css-loader": "0.9.1",
-    "jasmine-core": "2.1.3",
+    "babel-cli": "6.26.0",
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "canopy-styleguide": "^6.0.0",
+    "css-loader": "0.28.7",
+    "jasmine-core": "2.8.0",
     "jsx-loader": "0.13.2",
-    "karma": "0.12.31",
-    "karma-chrome-launcher": "0.1.7",
-    "karma-jasmine": "0.3.4",
-    "karma-phantomjs-launcher": "0.2.0",
-    "karma-sourcemap-loader": "0.3.5",
-    "karma-webpack": "1.5.1",
-    "lodash": "^4.17.2",
-    "ngmin": "0.5.0",
-    "ngmin-webpack-plugin": "0.1.3",
-    "phantomjs": "^2.1.3",
-    "phantomjs-polyfill": "0.0.1",
-    "react": "^15.4.1",
-    "react-addons-test-utils": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "style-loader": "0.8.3",
-    "webpack": "1.4.15"
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-jasmine": "1.1.0",
+    "karma-phantomjs-launcher": "1.0.4",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "2.0.4",
+    "lodash": "^4.17.4",
+    "phantomjs-polyfill": "0.0.2",
+    "phantomjs-prebuilt": "^2.1.15",
+    "postcss-loader": "^2.0.6",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "style-loader": "0.18.2",
+    "webpack": "3.6.0"
   },
@@ -52,0 +54,0 @@ "dependencies": {},

README.md

@@ -23,2 +23,4 @@ cpr-select [![Build Status](https://travis-ci.org/CanopyTax/cpr-select.png?branch=master)](https://travis-ci.org/CanopyTax/cpr-select)
 + `placeholder`: placeholder for input
++ `selectClass`: (optional) custom class to be added to the select element
++ `outerClass`: (optional) custom class to be added to the outer containing element
 
@@ -25,0 +27,0 @@ ### Basic

src/select.js

@@ -12,29 +12,27 @@ import React from 'react';
 
-const CanopySelect = React.createClass({
+export default class CanopySelect extends React.Component {
 
-	componentWillMount: function() {
+	state = {
+		dialogDisplayed: false,
+		top: 0,
+		focused: false,
+		close: (e) => {
+			if (!nearest(e.target, this.el)) {
+				this.setState({
+					dialogDisplayed: false,
+					focused: false
+				});
+			}
+		}
+	};
+
+	componentWillMount() {
 		document.body.addEventListener('click', this.state.close);
-	},
+	};
 
-	componentWillUnmount: function() {
+	componentWillUnmount() {
 		document.body.removeEventListener('click', this.state.close);
-	},
+	};
 
-	getInitialState: function() {
-		return {
-			dialogDisplayed: false,
-			top: 0,
-			focused: false,
-			close: (e) => {
-				if (!nearest(e.target, this.el)) {
-					this.setState({
-						dialogDisplayed: false,
-						focused: false
-					});
-				}
-			}
-		}
-	},
-
-	displayDialog: function(e) {
+	displayDialog = (e) => {
 		if (this.props.disabled) return;
@@ -45,9 +43,9 @@
 		})
-	},
+	};
 
-	getIndex: function(key) {
+	getIndex = (key) => {
 		return findIndex(this.props.options, {key: key});
-	},
+	};
 
-	onKeyDown: function(e) {
+	onKeyDown = (e) => {
 		if (this.props.disabled) return;
@@ -101,5 +99,5 @@
 		}
-	},
+	};
 
-	triggerItemChange: function() {
+	triggerItemChange = () => {
 		if (this.props.onChange) {
@@ -113,5 +111,5 @@ this.props.onChange.call(
 		}
-	},
+	};
 
-	selectItem: function(index, e) {
+	selectItem = (index, e) => {
 		if (this.props.disabled) return;
@@ -127,5 +125,5 @@
 		});
-	},
+	};
 
-	positionDialogAndGetTop: function(options, index, maxHeight) {
+	positionDialogAndGetTop = (options, index, maxHeight) => {
 		const distanceFromEnd = options.length - index;
@@ -155,5 +153,5 @@ const numVisibleOptions = Math.floor(maxHeight / 36);
 		}
-	},
+	};
 
-	positionDialog: function(index, maxHeight) {
+	positionDialog = (index, maxHeight) => {
 		setTimeout(() => {
@@ -166,5 +164,5 @@ let menuDialog = this.el.querySelector(".cp-select__menu");
 		});
-	},
+	};
 
-	focusSelect: function() {
+	focusSelect = () => {
 		if (!this.state.focused) {
@@ -175,11 +173,11 @@ this.setState({
 		}
-	},
+	};
 
-	onBlur: function() {
+	onBlur = () => {
 		this.setState({
 			focused: false
 		});
-	},
+	};
 
-	highlightByText: function(charCode) {
+	highlightByText = (charCode) => {
 		searchString += String.fromCharCode(charCode);
@@ -197,5 +195,5 @@ let i = this.getIndexFromString(searchString);
 		}, 1000);
-	},
+	};
 
-	getIndexFromString: function(searchString) {
+	getIndexFromString = (searchString) => {
 		searchString = searchString.toLowerCase();
@@ -205,10 +203,10 @@ return findIndex(this.props.options, (option) => {
 		});
-	},
+	};
 
-	getViewValue: function(option) {
+	getViewValue = (option) => {
 		if (option.value === null || option.value === undefined) return null;
 		return option.value || option;
-	},
+	};
 
-	getDialog: function(dialogDisplayed, options) {
+	getDialog = (dialogDisplayed, options) => {
 		if (dialogDisplayed) {
@@ -246,5 +244,5 @@
 		}
-	},
+	};
 
-	render: function() {
+	render = () => {
 		let cpSelectClasses = 'cp-select';
@@ -273,6 +271,4 @@ let selectedItem = this.props.options[
 	}
-});
+};
 
 if (typeof window !== "undefined" && window && !window.CanopySelect) window.CanopySelect = CanopySelect;
-
-export default CanopySelect;

src/select.spec.js

 import CanopySelect from './select.js';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 
@@ -6,0 +6,0 @@ describe('select', function() {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38733

increased by6.87%

Number of lines in readme file

55

increased by3.77%

Worsened metrics

Dev dependency count

25

increased by8.7%

Lines of code

858

decreased by-2.39%

No dependency changes