diff --git a/CHANGES.md b/CHANGES.md index 558e8498b3..1a056fa96a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,9 +2,11 @@ ## Breaking Changes -Value component -> MultiValue +Major API changes to Component props, SingleValue and Value have been merged -Major API changes Component props, SingleValue and MultiValue have been merged +The component is now "controlled", which means you have to pass value as a prop and always handle the `onChange` event. See https://facebook.github.io/react/docs/forms.html#controlled-components + +Using values that aren't in the `options` array is still supported, but they have to be full options (previous versions would expand strings into `{ label: string, value: string }`) Options & Value components get their label as their Children diff --git a/bower.json b/bower.json index 3b41363dce..0dd07b75f2 100644 --- a/bower.json +++ b/bower.json @@ -17,7 +17,7 @@ ], "dependencies": { "classnames": "^2.2.0", - "react-input-autosize": "^0.6.3" + "react-input-autosize": "^0.6.5" }, "keywords": [ "react", diff --git a/dist/react-select.js b/dist/react-select.js index 1754482f0e..15e7b47396 100644 --- a/dist/react-select.js +++ b/dist/react-select.js @@ -258,7 +258,7 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); -var _reactDom = require('react-dom'); +var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); var _reactDom2 = _interopRequireDefault(_reactDom); @@ -965,7 +965,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5,"react-dom":undefined}],4:[function(require,module,exports){ +},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5}],4:[function(require,module,exports){ (function (global){ 'use strict'; diff --git a/dist/react-select.min.js b/dist/react-select.min.js index e2ca1f2bad..22861cdebe 100644 --- a/dist/react-select.min.js +++ b/dist/react-select.min.js @@ -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 u;u="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,u.Select=e()}}(function(){return function e(u,t,s){function o(i,r){if(!t[i]){if(!u[i]){var a="function"==typeof require&&require;if(!r&&a)return a(i,!0);if(n)return n(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=t[i]={exports:{}};u[i][0].call(p.exports,function(e){var t=u[i][1][e];return o(t?t:e)},p,p.exports,e,u,t,s)}return t[i].exports}for(var n="function"==typeof require&&require,i=0;in.bottom||o.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(!e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var u=(0,h["default"])("Select-input",this.props.inputProps.className);if(this.props.disabled||!this.props.searchable){if(this.props.multi&&e.length)return;return a["default"].createElement("div",{className:u}," ")}return a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",value:this.state.inputValue}))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchEnd:this.clearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText);var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,h["default"])({"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;sn.bottom||o.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(!e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var u=(0,h["default"])("Select-input",this.props.inputProps.className);if(this.props.disabled||!this.props.searchable){if(this.props.multi&&e.length)return;return a["default"].createElement("div",{className:u}," ")}return a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",value:this.state.inputValue}))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchEnd:this.clearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText);var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,h["default"])({"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;s
-

React Select

-

Standalone example

-
- -
- -
-
+

React Select

+

Standalone bulid

+
For usage without babel / browserify / webpack
+
- Copyright © Jed Watson 2014. MIT Licensed. + Copyright © Jed Watson 2015. MIT Licensed.
- - - - + + + + + - diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js index 1754482f0e..15e7b47396 100644 --- a/examples/dist/standalone.js +++ b/examples/dist/standalone.js @@ -258,7 +258,7 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); -var _reactDom = require('react-dom'); +var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); var _reactDom2 = _interopRequireDefault(_reactDom); @@ -965,7 +965,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5,"react-dom":undefined}],4:[function(require,module,exports){ +},{"./Async":1,"./Option":2,"./Value":4,"./utils/stripDiacritics":5}],4:[function(require,module,exports){ (function (global){ 'use strict'; diff --git a/examples/src/standalone.html b/examples/src/standalone.html index 1f1fdc0eeb..14b76ce39d 100644 --- a/examples/src/standalone.html +++ b/examples/src/standalone.html @@ -5,32 +5,44 @@
-

React Select

-

Standalone example

-
- -
- -
-
+

React Select

+

Standalone bulid

+
For usage without babel / browserify / webpack
+
- Copyright © Jed Watson 2014. MIT Licensed. + Copyright © Jed Watson 2015. MIT Licensed.
- - - - + + + + + - diff --git a/package.json b/package.json index b8ea8e50cc..16e730a9e7 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "classnames": "^2.2.0", - "react-input-autosize": "^0.6.3" + "react-input-autosize": "^0.6.5" }, "devDependencies": { "babel": "^5.8.23", @@ -42,6 +42,7 @@ "browserify-shim": { "classnames": "global:classNames", "react": "global:React", + "react-dom": "global:ReactDOM", "react-input-autosize": "global:AutosizeInput" }, "scripts": { diff --git a/src/Select.js b/src/Select.js index d647fda3e5..319892c6fb 100644 --- a/src/Select.js +++ b/src/Select.js @@ -109,7 +109,7 @@ const Select = React.createClass({ isPseudoFocused: false, }; }, - + componentDidMount () { if (this.props.autofocus) { this.focus();