react-select - npm Package Compare versions

Comparing version 0.2.13 to 0.2.14

dist/react-select.js

@@ -16,19 +16,21 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Select=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 	propTypes: {
-		value: React.PropTypes.any,             // initial field value
-		multi: React.PropTypes.bool,            // multi-value input
-		options: React.PropTypes.array,         // array of options
-		delimiter: React.PropTypes.string,      // delimiter to use to join multiple values
-		asyncOptions: React.PropTypes.func,     // function to call to get options
-		autoload: React.PropTypes.bool,         // whether to auto-load the default async options set
-		placeholder: React.PropTypes.string,    // field placeholder, displayed when there's no value
-		noResultsText: React.PropTypes.string,  // placeholder displayed when there are no matching search results
-		clearValueText: React.PropTypes.string, // title for the "clear" control
-		clearAllText: React.PropTypes.string,   // title for the "clear" control when multi: true
-		name: React.PropTypes.string,           // field name, for hidden <input /> tag
-		onChange: React.PropTypes.func,         // onChange handler: function(newValue) {}
-		className: React.PropTypes.string,      // className for the outer element
-		filterOption: React.PropTypes.func,     // method to filter a single option: function(option, filterString)
-		filterOptions: React.PropTypes.func,    // method to filter the options array: function([options], filterString, [values])
-		matchPos: React.PropTypes.string,       // (any|start) match the start or entire string when filtering
-		matchProp: React.PropTypes.string       // (any|label|value) which option property to filter on
+		value: React.PropTypes.any,                // initial field value
+		multi: React.PropTypes.bool,               // multi-value input
+		options: React.PropTypes.array,            // array of options
+		delimiter: React.PropTypes.string,         // delimiter to use to join multiple values
+		asyncOptions: React.PropTypes.func,        // function to call to get options
+		autoload: React.PropTypes.bool,            // whether to auto-load the default async options set
+		placeholder: React.PropTypes.string,       // field placeholder, displayed when there's no value
+		noResultsText: React.PropTypes.string,     // placeholder displayed when there are no matching search results
+		clearable: React.PropTypes.bool,           // should it be possible to reset value
+		clearValueText: React.PropTypes.string,    // title for the "clear" control
+		clearAllText: React.PropTypes.string,      // title for the "clear" control when multi: true
+		searchPromptText: React.PropTypes.string,  // label to prompt for search input
+		name: React.PropTypes.string,              // field name, for hidden <input /> tag
+		onChange: React.PropTypes.func,            // onChange handler: function(newValue) {}
+		className: React.PropTypes.string,         // className for the outer element
+		filterOption: React.PropTypes.func,        // method to filter a single option: function(option, filterString)
+		filterOptions: React.PropTypes.func,       // method to filter the options array: function([options], filterString, [values])
+		matchPos: React.PropTypes.string,          // (any|start) match the start or entire string when filtering
+		matchProp: React.PropTypes.string          // (any|label|value) which option property to filter on
 	},
@@ -45,4 +47,6 @@
 			noResultsText: 'No results found',
+			clearable: true,
 			clearValueText: 'Clear value',
 			clearAllText: 'Clear all',
+			searchPromptText: 'Type to search',
 			name: undefined,
@@ -470,3 +474,7 @@ onChange: undefined,
 		
-		return ops.length ? ops : React.createElement("div", {className: "Select-noresults"}, this.props.noResultsText);
+		return ops.length ? ops : (
+			React.createElement("div", {className: "Select-noresults"}, 
+				this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText
+			)
+		);
 		
@@ -502,3 +510,3 @@ },
 		var loading = this.state.isLoading ? React.createElement("span", {className: "Select-loading", "aria-hidden": "true"}) : null;
-		var clear = this.state.value ? React.createElement("span", {className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: '&times;'}}) : null;
+		var clear = this.props.clearable && this.state.value ? React.createElement("span", {className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: '&times;'}}) : null;
 		var menu = this.state.isOpen ? React.createElement("div", {ref: "menu", className: "Select-menu"}, this.buildMenu()) : null;
@@ -505,0 +513,0 @@

dist/react-select.min.js

@@ -1,1 +0,1 @@
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.Select=t()}}(function(){return function t(e,s,i){function n(a,l){if(!s[a]){if(!e[a]){var u="function"==typeof require&&require;if(!l&&u)return u(a,!0);if(o)return o(a,!0);var r=new Error("Cannot find module '"+a+"'");throw r.code="MODULE_NOT_FOUND",r}var p=s[a]={exports:{}};e[a][0].call(p.exports,function(t){var s=e[a][1][t];return n(s?s:t)},p,p.exports,t,e,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(t,e){(function(s){var i="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,o="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,a=t("classnames"),l=t("./Value"),u=0,r=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string},getDefaultProps:function(){return{value:void 0,options:[],delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearValueText:"Clear value",clearAllText:"Clear all",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any"}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(t){t.value!==this.state.value&&this.setState(this.getStateFromValue(t.value,t.options)),JSON.stringify(t.options)!==JSON.stringify(this.props.options)&&this.setState({options:t.options,filteredOptions:this.filterOptions(t.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.refs.input.focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var t=this.refs.focused.getDOMNode(),e=this.refs.menu.getDOMNode(),s=t.getBoundingClientRect(),i=e.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(e.scrollTop=t.offsetTop+t.clientHeight-e.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(t,e){e||(e=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(t,e),i=this.filterOptions(e,s);return{value:s.map(function(t){return t.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(t,e){return Array.isArray(t)||(t="string"==typeof t?t.split(this.props.delimiter):t?[t]:[]),t.map(function(t){return"string"==typeof t?t=i.findWhere(e,{value:t})||{value:t,label:t}:t}.bind(this))},setValue:function(t){this._focusAfterUpdate=!0;var e=this.getStateFromValue(t);e.isOpen=!1,this.fireChangeEvent(e),this.setState(e)},selectValue:function(t){this[this.props.multi?"addValue":"setValue"](t)},addValue:function(t){this.setValue(this.state.values.concat(t))},popValue:function(){this.setValue(i.initial(this.state.values))},removeValue:function(t){this.setValue(i.without(this.state.values,t))},clearValue:function(t){t&&"mousedown"==t.type&&0!==t.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},fireChangeEvent:function(t){t.value!==this.state.value&&this.props.onChange&&this.props.onChange(t.value,t.values)},handleMouseDown:function(t){("mousedown"!=t.type||0===t.button)&&(t.stopPropagation(),t.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.refs.input.focus()))},handleInputFocus:function(){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1},handleInputBlur:function(){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50)},handleKeyDown:function(t){switch(t.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(t.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}t.preventDefault()},handleInputChange:function(t){if(this._optionsFilterString=t.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:t.target.value}),this.loadAsyncOptions(t.target.value,{isLoading:!1,isOpen:!0});else{var e=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:t.target.value,filteredOptions:e,focusedOption:i.contains(e,this.state.focusedOption)?this.state.focusedOption:e[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(t,e){for(var s=0;s<=t.length;s++){var n=t.slice(0,s);if(this._optionsCache[n]&&(t===n||this._optionsCache[n].complete)){var o=this._optionsCache[n].options;return void this.setState(i.extend({options:o,filteredOptions:this.filterOptions(o)},e))}}var a=this._currentRequestId=u++;this.props.asyncOptions(t,function(s,n){this._optionsCache[t]=n,a===this._currentRequestId&&this.setState(i.extend({options:n.options,filteredOptions:this.filterOptions(n.options)},e))}.bind(this))},filterOptions:function(t,e){var s=this._optionsFilterString,n=(e||this.state.values).map(function(t){return t.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,t,s,n);var o=function(t){return this.props.multi&&i.contains(n,t.value)?!1:this.props.filterOption?this.props.filterOption.call(this,t,s):s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.value.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&t.label.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&t.value.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&t.label.toLowerCase().substr(0,s.length)===s};return i.filter(t,o,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(t){this.setState({focusedOption:t})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(t){this._focusedOptionReveal=!0;var e=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||e["next"===t?0:e.length-1]});if(e.length){for(var s=-1,i=0;i<e.length;i++)if(this.state.focusedOption===e[i]){s=i;break}var n=e[0];"next"===t&&s>-1&&s<e.length-1?n=e[s+1]:"previous"===t&&(n=s>0?e[s-1]:e[e.length-1]),this.setState({focusedOption:n})}},unfocusOption:function(t){this.state.focusedOption===t&&this.setState({focusedOption:null})},buildMenu:function(){var t=this.state.focusedOption?this.state.focusedOption.value:null,e=i.map(this.state.filteredOptions,function(e){var s=t===e.value,i=a({"Select-option":!0,"is-focused":s}),o=s?"focused":null,l=this.focusOption.bind(this,e),u=this.unfocusOption.bind(this,e),r=this.selectValue.bind(this,e);return n.createElement("div",{ref:o,key:"option-"+e.value,className:i,onMouseEnter:l,onMouseLeave:u,onMouseDown:r,onClick:r},e.label)},this);return e.length?e:n.createElement("div",{className:"Select-noresults"},this.props.noResultsText)},render:function(){var t=a("Select",this.props.className,{"is-multi":this.props.multi,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"has-value":this.state.value}),e=[];this.props.multi&&this.state.values.forEach(function(t){props=i.extend({key:t.value,onRemove:this.removeValue.bind(this,t)},t),e.push(n.createElement(l,n.__spread({},props)))},this),this.state.inputValue||this.props.multi&&e.length||e.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.state.value?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null,r=this.state.isOpen?n.createElement("div",{ref:"menu",className:"Select-menu"},this.buildMenu()):null;return n.createElement("div",{ref:"wrapper",className:t},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},e,n.createElement(o,{className:"Select-input",tabIndex:this.props.tabIndex,ref:"input",value:this.state.inputValue,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,minWidth:"5"}),n.createElement("span",{className:"Select-arrow"}),s,u),r)}});e.exports=r}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":3,classnames:2}],2:[function(t,e){function s(){for(var t=arguments,e=[],s=0;s<t.length;s++)t[s]&&"string"==typeof t[s]?e.push(t[s]):"object"==typeof t[s]&&(e=e.concat(Object.keys(t[s]).filter(function(e){return t[s][e]})));return e.join(" ")||void 0}e.exports=s},{}],3:[function(t,e){(function(s){var i=("undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null),n=(t("classnames"),i.createClass({displayName:"Value",propTypes:{label:i.PropTypes.string.isRequired},blockEvent:function(t){t.stopPropagation()},render:function(){return i.createElement("div",{className:"Select-item"},i.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),i.createElement("span",{className:"Select-item-label"},this.props.label))}}));e.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{classnames:2}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;"undefined"!=typeof window?t=window:"undefined"!=typeof global?t=global:"undefined"!=typeof self&&(t=self),t.Select=e()}}(function(){return function e(t,s,i){function n(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(o)return o(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var p=s[a]={exports:{}};t[a][0].call(p.exports,function(e){var s=t[a][1][e];return n(s?s:e)},p,p.exports,e,t,s,i)}return s[a].exports}for(var o="function"==typeof require&&require,a=0;a<i.length;a++)n(i[a]);return n}({1:[function(e,t){(function(s){var i="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,o="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,a=e("classnames"),l=e("./Value"),r=0,u=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearable:n.PropTypes.bool,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,searchPromptText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string},getDefaultProps:function(){return{value:void 0,options:[],delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any"}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.refs.input.focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=i.findWhere(t,{value:e})||{value:e,label:e}:e}.bind(this))},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this[this.props.multi?"addValue":"setValue"](e)},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(i.initial(this.state.values))},removeValue:function(e){this.setValue(i.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"==e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){("mousedown"!=e.type||0===e.button)&&(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.refs.input.focus()))},handleInputFocus:function(){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1},handleInputBlur:function(){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50)},handleKeyDown:function(e){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0});else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:i.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=0;s<=e.length;s++){var n=e.slice(0,s);if(this._optionsCache[n]&&(e===n||this._optionsCache[n].complete)){var o=this._optionsCache[n].options;return void this.setState(i.extend({options:o,filteredOptions:this.filterOptions(o)},t))}}var a=this._currentRequestId=r++;this.props.asyncOptions(e,function(s,n){this._optionsCache[e]=n,a===this._currentRequestId&&this.setState(i.extend({options:n.options,filteredOptions:this.filterOptions(n.options)},t))}.bind(this))},filterOptions:function(e,t){var s=this._optionsFilterString,n=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,n);var o=function(e){return this.props.multi&&i.contains(n,e.value)?!1:this.props.filterOption?this.props.filterOption.call(this,e,s):s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&e.value.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&e.label.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&e.value.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&e.label.toLowerCase().substr(0,s.length)===s};return i.filter(e,o,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]});if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var n=t[0];"next"===e&&s>-1&&s<t.length-1?n=t[s+1]:"previous"===e&&(n=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:n})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=i.map(this.state.filteredOptions,function(t){var s=e===t.value,i=a({"Select-option":!0,"is-focused":s}),o=s?"focused":null,l=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),u=this.selectValue.bind(this,t);return n.createElement("div",{ref:o,key:"option-"+t.value,className:i,onMouseEnter:l,onMouseLeave:r,onMouseDown:u,onClick:u},t.label)},this);return t.length?t:n.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},render:function(){var e=a("Select",this.props.className,{"is-multi":this.props.multi,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){props=i.extend({key:e.value,onRemove:this.removeValue.bind(this,e)},e),t.push(n.createElement(l,n.__spread({},props)))},this),this.state.inputValue||this.props.multi&&t.length||t.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,r=this.props.clearable&&this.state.value?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null,u=this.state.isOpen?n.createElement("div",{ref:"menu",className:"Select-menu"},this.buildMenu()):null;return n.createElement("div",{ref:"wrapper",className:e},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,n.createElement(o,{className:"Select-input",tabIndex:this.props.tabIndex,ref:"input",value:this.state.inputValue,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:this.handleInputChange,minWidth:"5"}),n.createElement("span",{className:"Select-arrow"}),s,r),u)}});t.exports=u}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":3,classnames:2}],2:[function(e,t){function s(){for(var e=arguments,t=[],s=0;s<e.length;s++)e[s]&&"string"==typeof e[s]?t.push(e[s]):"object"==typeof e[s]&&(t=t.concat(Object.keys(e[s]).filter(function(t){return e[s][t]})));return t.join(" ")||void 0}t.exports=s},{}],3:[function(e,t){(function(s){var i=("undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null),n=(e("classnames"),i.createClass({displayName:"Value",propTypes:{label:i.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){return i.createElement("div",{className:"Select-item"},i.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),i.createElement("span",{className:"Select-item-label"},this.props.label))}}));t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{classnames:2}]},{},[1])(1)});

HISTORY.md

 # React-Select
 
+## v0.2.14 / 2015-01-07
+
+* added; `searchPromptText` property that is displayed when `asyncOptions` is set and there are (a) no options loaded, and (b) no input entered to search on, thanks [Anton Fedchenko](https://github.com/kompot)
+* added; `clearable` property (defaults to `true`) to control whether the "clear" control is available, thanks [Anton Fedchenko](https://github.com/kompot)
+
 ## v0.2.13 / 2015-01-05
 
-* fixed; height issues in Safari
+* fixed; height issues in Safari, thanks [Joss Mackison](https://github.com/jossmac)
 * added; Option to specify "Clear value" label as prop for i18n
@@ -7,0 +12,0 @@

package.json

 {
   "name": "react-select",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "A Select control built with and for ReactJS",
@@ -5,0 +5,0 @@ "main": "src/Select.js",

src/Select.js

@@ -14,19 +14,21 @@ var _ = require('underscore'),
 	propTypes: {
-		value: React.PropTypes.any,             // initial field value
-		multi: React.PropTypes.bool,            // multi-value input
-		options: React.PropTypes.array,         // array of options
-		delimiter: React.PropTypes.string,      // delimiter to use to join multiple values
-		asyncOptions: React.PropTypes.func,     // function to call to get options
-		autoload: React.PropTypes.bool,         // whether to auto-load the default async options set
-		placeholder: React.PropTypes.string,    // field placeholder, displayed when there's no value
-		noResultsText: React.PropTypes.string,  // placeholder displayed when there are no matching search results
-		clearValueText: React.PropTypes.string, // title for the "clear" control
-		clearAllText: React.PropTypes.string,   // title for the "clear" control when multi: true
-		name: React.PropTypes.string,           // field name, for hidden <input /> tag
-		onChange: React.PropTypes.func,         // onChange handler: function(newValue) {}
-		className: React.PropTypes.string,      // className for the outer element
-		filterOption: React.PropTypes.func,     // method to filter a single option: function(option, filterString)
-		filterOptions: React.PropTypes.func,    // method to filter the options array: function([options], filterString, [values])
-		matchPos: React.PropTypes.string,       // (any|start) match the start or entire string when filtering
-		matchProp: React.PropTypes.string       // (any|label|value) which option property to filter on
+		value: React.PropTypes.any,                // initial field value
+		multi: React.PropTypes.bool,               // multi-value input
+		options: React.PropTypes.array,            // array of options
+		delimiter: React.PropTypes.string,         // delimiter to use to join multiple values
+		asyncOptions: React.PropTypes.func,        // function to call to get options
+		autoload: React.PropTypes.bool,            // whether to auto-load the default async options set
+		placeholder: React.PropTypes.string,       // field placeholder, displayed when there's no value
+		noResultsText: React.PropTypes.string,     // placeholder displayed when there are no matching search results
+		clearable: React.PropTypes.bool,           // should it be possible to reset value
+		clearValueText: React.PropTypes.string,    // title for the "clear" control
+		clearAllText: React.PropTypes.string,      // title for the "clear" control when multi: true
+		searchPromptText: React.PropTypes.string,  // label to prompt for search input
+		name: React.PropTypes.string,              // field name, for hidden <input /> tag
+		onChange: React.PropTypes.func,            // onChange handler: function(newValue) {}
+		className: React.PropTypes.string,         // className for the outer element
+		filterOption: React.PropTypes.func,        // method to filter a single option: function(option, filterString)
+		filterOptions: React.PropTypes.func,       // method to filter the options array: function([options], filterString, [values])
+		matchPos: React.PropTypes.string,          // (any|start) match the start or entire string when filtering
+		matchProp: React.PropTypes.string          // (any|label|value) which option property to filter on
 	},
@@ -43,4 +45,6 @@
 			noResultsText: 'No results found',
+			clearable: true,
 			clearValueText: 'Clear value',
 			clearAllText: 'Clear all',
+			searchPromptText: 'Type to search',
 			name: undefined,
@@ -468,3 +472,7 @@ onChange: undefined,
 		
-		return ops.length ? ops : <div className="Select-noresults">{this.props.noResultsText}</div>;
+		return ops.length ? ops : (
+			<div className="Select-noresults">
+				{this.props.asyncOptions && !this.state.inputValue ? this.props.searchPromptText : this.props.noResultsText}
+			</div>
+		);
 		
@@ -500,3 +508,3 @@ },
 		var loading = this.state.isLoading ? <span className="Select-loading" aria-hidden="true" /> : null;
-		var clear = this.state.value ? <span className="Select-clear" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText} aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText} onMouseDown={this.clearValue} onClick={this.clearValue} dangerouslySetInnerHTML={{ __html: '&times;' }} /> : null;
+		var clear = this.props.clearable && this.state.value ? <span className="Select-clear" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText} aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText} onMouseDown={this.clearValue} onClick={this.clearValue} dangerouslySetInnerHTML={{ __html: '&times;' }} /> : null;
 		var menu = this.state.isOpen ? <div ref="menu" className="Select-menu">{this.buildMenu()}</div> : null;
@@ -503,0 +511,0 @@

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

88784

increased by1.66%

Lines of code

1577

increased by1.02%

No dependency changes