cpr-select
Advanced tools
Comparing version 2.0.1 to 2.1.0
@@ -8,2 +8,2 @@ /*! | ||
*/ | ||
!function(e){function t(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return e[s].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function s(e,t){for(var i,s=!0;s;){s=!1;var n=e,o=t;if(!n)return!1;if(i=n===o)return i;e=n.parentElement,t=o,s=!0}}var n=function(e){return e&&e.__esModule?e["default"]:e},o=n(i(1)),l=i(2).findIndex,a="",c=void 0,r=o.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){s(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,i=this.state.selectedIndex;9!==t&&e.preventDefault(),13===t?this.selectItem(i):38===t?0>=i?this.setState({dialogDisplayed:!0}):this.setState({dialogDisplayed:!0,selectedIndex:void 0===i?0:i-1}):40===t?i===this.props.options.length-1?this.setState({dialogDisplayed:!0}):this.setState({dialogDisplayed:!0,selectedIndex:i?i+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 i=this;this.props.disabled||setTimeout(function(){i.setState({selectedIndex:e,focused:!0,dialogDisplayed:!1}),setTimeout(i.triggerItemChange)})},positionDialogAndGetTop:function(e,t){var i=e.length-t;return t>5&&6>i?e.length<11?-2+(36*t*-1-10)+"px":(this.positionDialog(t),-215-36*(5-i)+"px"):t>5?(this.positionDialog(t),"-203px"):-1+(36*t*-1-10)+"px"},positionDialog:function(e){var t=this;setTimeout(function(){var i=t.el.querySelector(".cp-select__menu");i&&(i.scrollTop=36*e-192)})},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(c),c=setTimeout(function(){a=""},1e3)},getIndexFromString:function(e){var t=this;return e=e.toLowerCase(),l(this.props.options,function(i){return null!==t.getViewValue(i)?0===t.getViewValue(i).toLowerCase().indexOf(e):!1})},getViewValue:function(e){return null===e.value?null:e.value||e},getDialog:function(e,t){var i=this;if(e){var s=function(){var e=i.state.selectedIndex,s=t.map(function(t,s){return o.createElement("li",{key:t.key,className:e===s?"+selected":"",onMouseDown:i.selectItem.bind(i,s)},o.createElement("a",{style:null!==t.value?{}:{color:"rgba(0,0,0,0)"}},null!==t.value?t.value:"null"))});return setTimeout(function(){try{i.el.querySelector(".cp-select__hidden-input").focus()}catch(e){if(-1===e.message.indexOf("Invariant Violation"))throw new Error(e.message)}},100),{v:o.createElement("div",null,o.createElement("ul",{className:"cp-select__menu cps-dropdown-menu",style:{top:i.positionDialogAndGetTop(t,e)}},s))}}();if("object"==typeof s)return s.v}},render:function(){var e="cp-select",t=this.props.options[this.getIndex(this.props.selected)],i=this;return this.props.disabled&&(e+=" +disabled"),this.state.focused&&!this.props.disabled&&(e+=" +focus"),o.createElement("div",{ref:function(e){e&&(i.el=e)},className:"cp-select-outer",role:"select"},o.createElement("input",{className:"cp-select__hidden-input",onFocus:this.focusSelect,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),o.createElement("div",{className:e,onClick:this.displayDialog},o.createElement("div",{className:"cp-select__selected"},t?t.value:this.props.placeholder),o.createElement("div",{className:"cp-select__icon"})),this.getDialog(this.state.dialogDisplayed,this.props.options))}});"undefined"!=typeof window&&window&&!window.CanopySelect&&(window.CanopySelect=r),e.exports=r},function(e,t,i){e.exports=React},function(e,t,i){e.exports=_}]); | ||
!function(e){function t(i){if(s[i])return s[i].exports;var n=s[i]={exports:{},id:i,loaded:!1};return e[i].call(n.exports,n,n.exports,t),n.loaded=!0,n.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 n=e,o=t;if(!n)return!1;if(s=n===o)return s;e=n.parentElement,t=o,i=!0}}var n=function(e){return e&&e.__esModule?e["default"]:e},o=n(s(1)),l=s(2).findIndex,a="",r=void 0,c=o.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){var s=e.length-t;return t>5&&6>s?e.length<11?-2+(36*t*-1-10)+"px":(this.positionDialog(t),-215-36*(5-s)+"px"):t>5?(this.positionDialog(t),"-203px"):-1+(36*t*-1-10)+"px"},positionDialog:function(e){var t=this;setTimeout(function(){var s=t.el.querySelector(".cp-select__menu");s&&(s.scrollTop=36*e-192)})},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?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?o.createElement("li",{key:"separator"+i,className:"separator"}):o.createElement("li",{key:t.key,className:e===i?"+selected":"",onMouseDown:s.selectItem.bind(s,i)},o.createElement("a",{style:null!==t.value?{}:{color:"rgba(0,0,0,0)"}},null!==t.value?t.value:"null"))});return 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),{v:o.createElement("div",null,o.createElement("ul",{className:"cp-select__menu cps-dropdown-menu",style:{top:s.positionDialogAndGetTop(t,e)}},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"),o.createElement("div",{ref:function(e){e&&(s.el=e)},className:"cp-select-outer",role:"select"},o.createElement("input",{className:"cp-select__hidden-input",onFocus:this.focusSelect,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),o.createElement("div",{className:e,onClick:this.displayDialog},o.createElement("div",{className:"cp-select__selected"},t?t.value:this.props.placeholder),o.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=_}]); |
@@ -244,11 +244,15 @@ 'use strict'; | ||
var optionElements = options.map(function (option, index) { | ||
return _react2['default'].createElement( | ||
'li', | ||
{ key: option.key, className: selectedIndex === index ? '+selected' : '', onMouseDown: _this5.selectItem.bind(_this5, index) }, | ||
_react2['default'].createElement( | ||
'a', | ||
{ style: option.value !== null ? {} : { color: "rgba(0,0,0,0)" } }, | ||
option.value !== null ? option.value : "null" | ||
) | ||
); | ||
if (option.separator) { | ||
return _react2['default'].createElement('li', { key: 'separator' + index, className: 'separator' }); | ||
} else { | ||
return _react2['default'].createElement( | ||
'li', | ||
{ key: option.key, className: selectedIndex === index ? '+selected' : '', onMouseDown: _this5.selectItem.bind(_this5, index) }, | ||
_react2['default'].createElement( | ||
'a', | ||
{ style: option.value !== null ? {} : { color: "rgba(0,0,0,0)" } }, | ||
option.value !== null ? option.value : "null" | ||
) | ||
); | ||
} | ||
}); | ||
@@ -255,0 +259,0 @@ |
{ | ||
"name": "cpr-select", | ||
"version": "2.0.1", | ||
"version": "2.1.0", | ||
"description": "A consistently styled cross-browser and keyboard friendly select component", | ||
@@ -5,0 +5,0 @@ "main": "lib/select.js", |
@@ -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 | ||
+ `options`: the items to select from. You can insert a separator between items by putting `{separator: true}` as an item. | ||
+ `onChange`: called when selected item changes | ||
@@ -35,2 +35,4 @@ + `disabled`: pass true to disable the input | ||
}, { | ||
"separator": true, | ||
}, { | ||
"value": "Alaska", | ||
@@ -37,0 +39,0 @@ "key": "AK" |
@@ -204,3 +204,7 @@ import React from 'react'; | ||
let optionElements = options.map((option, index) => { | ||
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> | ||
if (option.separator) { | ||
return <li key={`separator${index}`} className="separator" /> | ||
} 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> | ||
} | ||
}); | ||
@@ -207,0 +211,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
34485
859
53
0