From cf466f359797ad0acc30a61f441783bd58e7dd1c Mon Sep 17 00:00:00 2001 From: Trevor Burnham Date: Fri, 26 Feb 2016 17:14:54 -0500 Subject: [PATCH 1/4] Add option group support See discussion at https://github.com/JedWatson/react-select/pull/480 --- dist/react-select-plus.css | 13 + dist/react-select-plus.js | 290 +++- dist/react-select-plus.min.css | 2 +- dist/react-select-plus.min.js | 4 +- examples/dist/app.js | 1348 ----------------- examples/dist/bundle.js | 286 +++- examples/dist/example.css | 13 + examples/dist/standalone.js | 290 +++- examples/src/app.js | 2 + .../src/components/GroupedOptionsField.js | 78 + less/menu.less | 18 + lib/OptionGroup.js | 91 ++ lib/Select.js | 187 ++- src/OptionGroup.js | 77 + src/Select.js | 133 +- 15 files changed, 1224 insertions(+), 1608 deletions(-) delete mode 100644 examples/dist/app.js create mode 100644 examples/src/components/GroupedOptionsField.js create mode 100644 lib/OptionGroup.js create mode 100644 src/OptionGroup.js diff --git a/dist/react-select-plus.css b/dist/react-select-plus.css index 154eadc3..499800f9 100644 --- a/dist/react-select-plus.css +++ b/dist/react-select-plus.css @@ -227,6 +227,19 @@ max-height: 198px; overflow-y: auto; } +.Select-option-group-label { + box-sizing: border-box; + background-color: #fff; + color: #666666; + font-weight: bold; + cursor: default; + display: block; + padding: 8px 10px; +} +.Select-option-group-label ~ .Select-option, +.Select-option-group-label ~ .Select-option-group { + padding-left: 20px; +} .Select-option { box-sizing: border-box; background-color: #fff; diff --git a/dist/react-select-plus.js b/dist/react-select-plus.js index 7e69cba8..29a9b448 100644 --- a/dist/react-select-plus.js +++ b/dist/react-select-plus.js @@ -170,7 +170,7 @@ var Async = _react2['default'].createClass({ module.exports = Async; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":4,"./utils/stripDiacritics":6}],2:[function(require,module,exports){ +},{"./Select":5,"./utils/stripDiacritics":7}],2:[function(require,module,exports){ (function (global){ 'use strict'; @@ -307,6 +307,101 @@ module.exports = Option; (function (global){ 'use strict'; +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); + +var _classnames2 = _interopRequireDefault(_classnames); + +var OptionGroup = _react2['default'].createClass({ + displayName: 'OptionGroup', + + propTypes: { + children: _react2['default'].PropTypes.any, + className: _react2['default'].PropTypes.string, // className (based on mouse position) + label: _react2['default'].PropTypes.node, // the heading to show above the child options + option: _react2['default'].PropTypes.object.isRequired }, + + // object that is base for that option group + blockEvent: function blockEvent(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.target.tagName !== 'A' || !('href' in event.target)) { + return; + } + if (event.target.target) { + window.open(event.target.href, event.target.target); + } else { + window.location.href = event.target.href; + } + }, + + handleMouseDown: function handleMouseDown(event) { + event.preventDefault(); + event.stopPropagation(); + }, + + handleTouchEnd: function handleTouchEnd(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; + + this.handleMouseDown(event); + }, + + handleTouchMove: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + }, + + handleTouchStart: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; + }, + + render: function render() { + var option = this.props.option; + + var className = (0, _classnames2['default'])(this.props.className, option.className); + + return option.disabled ? _react2['default'].createElement( + 'div', + { className: className, + onMouseDown: this.blockEvent, + onClick: this.blockEvent }, + this.props.children + ) : _react2['default'].createElement( + 'div', + { className: className, + style: option.style, + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseMove: this.handleMouseMove, + onTouchStart: this.handleTouchStart, + onTouchMove: this.handleTouchMove, + onTouchEnd: this.handleTouchEnd, + title: option.title }, + _react2['default'].createElement( + 'div', + { className: 'Select-option-group-label' }, + this.props.label + ), + this.props.children + ); + } +}); + +module.exports = OptionGroup; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) +},{}],5:[function(require,module,exports){ +(function (global){ +'use strict'; + Object.defineProperty(exports, '__esModule', { value: true }); @@ -347,10 +442,24 @@ var _Option = require('./Option'); var _Option2 = _interopRequireDefault(_Option); +var _OptionGroup = require('./OptionGroup'); + +var _OptionGroup2 = _interopRequireDefault(_OptionGroup); + var _Value = require('./Value'); var _Value2 = _interopRequireDefault(_Value); +function clone(obj) { + var copy = {}; + for (var attr in obj) { + if (obj.hasOwnProperty(attr)) { + copy[attr] = obj[attr]; + }; + } + return copy; +} + function stringifyValue(value) { if (typeof value === 'object') { return JSON.stringify(value); @@ -406,6 +515,7 @@ var Select = _react2['default'].createClass({ onOpen: _react2['default'].PropTypes.func, // fires when the menu is opened onValueClick: _react2['default'].PropTypes.func, // onClick handler for value labels: function (value, event) {} optionComponent: _react2['default'].PropTypes.func, // option component to render in dropdown + optionGroupComponent: _react2['default'].PropTypes.func, // option group component to render in dropdown optionRenderer: _react2['default'].PropTypes.func, // optionRenderer: function (option) {} options: _react2['default'].PropTypes.array, // array of options placeholder: stringOrNode, // field placeholder, displayed when there's no value @@ -449,6 +559,7 @@ var Select = _react2['default'].createClass({ noResultsText: 'No results found', onBlurResetsInput: true, optionComponent: _Option2['default'], + optionGroupComponent: _OptionGroup2['default'], placeholder: 'Select...', required: false, scrollMenuIntoView: true, @@ -470,12 +581,22 @@ var Select = _react2['default'].createClass({ }; }, + componentWillMount: function componentWillMount() { + this._flatOptions = this.flattenOptions(this.props.options); + }, + componentDidMount: function componentDidMount() { if (this.props.autofocus) { this.focus(); } }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.options !== this.props.options) { + this._flatOptions = this.flattenOptions(nextProps.options); + } + }, + componentWillUpdate: function componentWillUpdate(nextProps, nextState) { if (nextState.isOpen !== this.state.isOpen) { var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose; @@ -761,10 +882,9 @@ var Select = _react2['default'].createClass({ expandValue: function expandValue(value) { if (typeof value !== 'string' && typeof value !== 'number') return value; - var _props = this.props; - var options = _props.options; - var valueKey = _props.valueKey; + var valueKey = this.props.valueKey; + var options = this._flatOptions; if (!options) return; for (var i = 0; i < options.length; i++) { if (options[i][valueKey] === value) return options[i]; @@ -997,84 +1117,137 @@ var Select = _react2['default'].createClass({ ); }, - filterOptions: function filterOptions(excludeOptions) { + filterOptions: function filterOptions(options, excludeOptions) { var _this3 = this; var filterValue = this.state.inputValue; - var options = this.props.options || []; if (typeof this.props.filterOptions === 'function') { return this.props.filterOptions.call(this, options, filterValue, excludeOptions); } else if (this.props.filterOptions) { - if (this.props.ignoreAccents) { - filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); - } - if (this.props.ignoreCase) { - filterValue = filterValue.toLowerCase(); - } - if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { - return i[_this3.props.valueKey]; - }); - return options.filter(function (option) { - if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; - if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); - if (!filterValue) return true; - var valueTest = String(option[_this3.props.valueKey]); - var labelTest = String(option[_this3.props.labelKey]); + var _ret = (function () { if (_this3.props.ignoreAccents) { - if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); - if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); } if (_this3.props.ignoreCase) { - if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); - if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + filterValue = filterValue.toLowerCase(); } - return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; - }); + if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { + return i[_this3.props.valueKey]; + }); + var includeOption = function includeOption(option) { + if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; + if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); + if (!filterValue) return true; + var valueTest = String(option[_this3.props.valueKey]); + var labelTest = String(option[_this3.props.labelKey]); + if (_this3.props.ignoreAccents) { + if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); + if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + } + if (_this3.props.ignoreCase) { + if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); + if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + } + return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; + }; + var filteredOptions = []; + options.forEach(function (option) { + if (_this3.isGroup(option)) { + var filteredGroup = clone(option); + filteredGroup.options = _this3.filterOptions(option.options, excludeOptions); + if (filteredGroup.options.length) { + filteredOptions.push(filteredGroup); + }; + } else if (includeOption(option)) { + filteredOptions.push(option); + }; + }); + return { + v: filteredOptions + }; + })(); + + if (typeof _ret === 'object') return _ret.v; } else { return options; } }, + isGroup: function isGroup(option) { + return option && Array.isArray(option.options); + }, + + flattenOptions: function flattenOptions(options) { + if (!options) return; + var flatOptions = []; + for (var i = 0; i < options.length; i++) { + if (this.isGroup(options[i])) { + flatOptions = flatOptions.concat(this.flattenOptions(options[i].options)); + } else { + flatOptions.push(options[i]); + } + } + return flatOptions; + }, + renderMenu: function renderMenu(options, valueArray, focusedOption) { var _this4 = this; if (options && options.length) { - var _ret = (function () { + var _ret2 = (function () { + var OptionGroup = _this4.props.optionGroupComponent; var Option = _this4.props.optionComponent; var renderLabel = _this4.props.optionRenderer || _this4.getOptionLabel; return { v: options.map(function (option, i) { - var isSelected = valueArray && valueArray.indexOf(option) > -1; - var isFocused = option === focusedOption; - var optionRef = isFocused ? 'focused' : null; - var optionClass = (0, _classnames2['default'])({ - 'Select-option': true, - 'is-selected': isSelected, - 'is-focused': isFocused, - 'is-disabled': option.disabled - }); - - return _react2['default'].createElement( - Option, - { - className: optionClass, - isDisabled: option.disabled, - isFocused: isFocused, - key: 'option-' + i + '-' + option[_this4.props.valueKey], - onSelect: _this4.selectValue, - onFocus: _this4.focusOption, - option: option, - isSelected: isSelected, - ref: optionRef - }, - renderLabel(option) - ); + if (_this4.isGroup(option)) { + var optionGroupClass = (0, _classnames2['default'])({ + 'Select-option-group': true + }); + + return _react2['default'].createElement( + OptionGroup, + { + className: optionGroupClass, + key: 'option-group-' + i, + label: renderLabel(option), + option: option + }, + _this4.renderMenu(option.options, valueArray, focusedOption) + ); + } else { + var isSelected = valueArray && valueArray.indexOf(option) > -1; + var isFocused = option === focusedOption; + var optionRef = isFocused ? 'focused' : null; + var optionClass = (0, _classnames2['default'])({ + 'Select-option': true, + 'is-selected': isSelected, + 'is-focused': isFocused, + 'is-disabled': option.disabled + }); + + return _react2['default'].createElement( + Option, + { + className: optionClass, + isDisabled: option.disabled, + isFocused: isFocused, + key: 'option-' + i + '-' + option[_this4.props.valueKey], + onSelect: _this4.selectValue, + onFocus: _this4.focusOption, + option: option, + isSelected: isSelected, + ref: optionRef + }, + renderLabel(option) + ); + } }) }; })(); - if (typeof _ret === 'object') return _ret.v; + if (typeof _ret2 === 'object') return _ret2.v; } else if (this.props.noResultsText) { return _react2['default'].createElement( 'div', @@ -1108,7 +1281,8 @@ var Select = _react2['default'].createClass({ render: function render() { var valueArray = this.getValueArray(); - var options = this._visibleOptions = this.filterOptions(this.props.multi ? valueArray : null); + var options = this.filterOptions(this.props.options || [], this.props.multi ? valueArray : null); + this._visibleOptions = this.flattenOptions(options); var isOpen = typeof this.props.isOpen === 'boolean' ? this.props.isOpen : this.state.isOpen; if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false; var focusedOption = this._focusedOption = this.getFocusableOption(valueArray[0]); @@ -1168,7 +1342,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Dropdown":2,"./Option":3,"./Value":5,"./utils/stripDiacritics":6}],5:[function(require,module,exports){ +},{"./Async":1,"./Dropdown":2,"./Option":3,"./OptionGroup":4,"./Value":6,"./utils/stripDiacritics":7}],6:[function(require,module,exports){ (function (global){ 'use strict'; @@ -1276,7 +1450,7 @@ var Value = _react2['default'].createClass({ module.exports = Value; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{}],6:[function(require,module,exports){ +},{}],7:[function(require,module,exports){ 'use strict'; var map = [{ 'base': 'A', 'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { 'base': 'AA', 'letters': /[\uA732]/g }, { 'base': 'AE', 'letters': /[\u00C6\u01FC\u01E2]/g }, { 'base': 'AO', 'letters': /[\uA734]/g }, { 'base': 'AU', 'letters': /[\uA736]/g }, { 'base': 'AV', 'letters': /[\uA738\uA73A]/g }, { 'base': 'AY', 'letters': /[\uA73C]/g }, { 'base': 'B', 'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { 'base': 'C', 'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { 'base': 'D', 'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { 'base': 'DZ', 'letters': /[\u01F1\u01C4]/g }, { 'base': 'Dz', 'letters': /[\u01F2\u01C5]/g }, { 'base': 'E', 'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { 'base': 'F', 'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { 'base': 'G', 'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { 'base': 'H', 'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { 'base': 'I', 'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { 'base': 'J', 'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { 'base': 'K', 'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { 'base': 'L', 'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { 'base': 'LJ', 'letters': /[\u01C7]/g }, { 'base': 'Lj', 'letters': /[\u01C8]/g }, { 'base': 'M', 'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { 'base': 'N', 'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { 'base': 'NJ', 'letters': /[\u01CA]/g }, { 'base': 'Nj', 'letters': /[\u01CB]/g }, { 'base': 'O', 'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { 'base': 'OI', 'letters': /[\u01A2]/g }, { 'base': 'OO', 'letters': /[\uA74E]/g }, { 'base': 'OU', 'letters': /[\u0222]/g }, { 'base': 'P', 'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { 'base': 'Q', 'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { 'base': 'R', 'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { 'base': 'S', 'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { 'base': 'T', 'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { 'base': 'TZ', 'letters': /[\uA728]/g }, { 'base': 'U', 'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { 'base': 'V', 'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { 'base': 'VY', 'letters': /[\uA760]/g }, { 'base': 'W', 'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { 'base': 'X', 'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { 'base': 'Y', 'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { 'base': 'Z', 'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { 'base': 'a', 'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { 'base': 'aa', 'letters': /[\uA733]/g }, { 'base': 'ae', 'letters': /[\u00E6\u01FD\u01E3]/g }, { 'base': 'ao', 'letters': /[\uA735]/g }, { 'base': 'au', 'letters': /[\uA737]/g }, { 'base': 'av', 'letters': /[\uA739\uA73B]/g }, { 'base': 'ay', 'letters': /[\uA73D]/g }, { 'base': 'b', 'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { 'base': 'dz', 'letters': /[\u01F3\u01C6]/g }, { 'base': 'e', 'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { 'base': 'f', 'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { 'base': 'g', 'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { 'base': 'h', 'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { 'base': 'k', 'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { 'base': 'l', 'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { 'base': 'lj', 'letters': /[\u01C9]/g }, { 'base': 'm', 'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { 'base': 'n', 'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { 'base': 'nj', 'letters': /[\u01CC]/g }, { 'base': 'o', 'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { 'base': 'oi', 'letters': /[\u01A3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\uA74F]/g }, { 'base': 'p', 'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { 'base': 'q', 'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { 'base': 'r', 'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { 'base': 's', 'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { 'base': 't', 'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { 'base': 'tz', 'letters': /[\uA729]/g }, { 'base': 'u', 'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { 'base': 'vy', 'letters': /[\uA761]/g }, { 'base': 'w', 'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { 'base': 'x', 'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { 'base': 'y', 'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { 'base': 'z', 'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }]; @@ -1288,5 +1462,5 @@ module.exports = function stripDiacritics(str) { return str; }; -},{}]},{},[4])(4) +},{}]},{},[5])(5) }); \ No newline at end of file diff --git a/dist/react-select-plus.min.css b/dist/react-select-plus.min.css index f882afea..dadaaa2d 100644 --- a/dist/react-select-plus.min.css +++ b/dist/react-select-plus.min.css @@ -1 +1 @@ -.Select,.Select-control{position:relative}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select-placeholder,:not(.Select--multi)>.Select-control .Select-value{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-arrow-zone,.Select-clear-zone,.Select-loading,.Select-loading-zone{position:relative;vertical-align:middle}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value .Select-value-label,.has-value:not(.Select--multi)>.Select-control>.Select-value .Select-value-label{color:#333}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:hover,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:focus,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;height:34px;margin:0;outline:0;padding:0;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell;width:16px}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-focused{background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}} \ No newline at end of file +.Select,.Select-control{position:relative}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select-placeholder,:not(.Select--multi)>.Select-control .Select-value{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value .Select-value-label,.has-value:not(.Select--multi)>.Select-control>.Select-value .Select-value-label{color:#333}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:hover,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:focus,.has-value:not(.Select--multi)>.Select-control>.Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;height:34px;margin:0;outline:0;padding:0;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{cursor:pointer;position:relative;text-align:center;vertical-align:middle}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell;width:16px}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block;position:relative;vertical-align:middle}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option-group-label{box-sizing:border-box;background-color:#fff;color:#666;font-weight:700;cursor:default;display:block;padding:8px 10px}.Select-option-group-label~.Select-option,.Select-option-group-label~.Select-option-group{padding-left:20px}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-focused{background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}} \ No newline at end of file diff --git a/dist/react-select-plus.min.js b/dist/react-select-plus.min.js index 152b3b9e..65c80314 100644 --- a/dist/react-select-plus.min.js +++ b/dist/react-select-plus.min.js @@ -1,2 +1,2 @@ -!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;i=0;--t){var s=u.slice(0,t);if(e[s]&&(u===s||e[s].complete))return e[s]}}function r(e,u){return e&&"function"==typeof e.then?e.then(function(e){u(null,e)},function(e){u(e)}):void 0}var a=Object.assign||function(e){for(var u=1;ur.bottom||i.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,u){return e?u?0===e.length:0===Object.keys(e).length:!0},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(null===e||void 0===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||e.clearableValue===!1,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);return this.props.disabled||!this.props.searchable?a["default"].createElement("div",i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):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",required:this.state.required,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,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},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 this.props.noResultsText?a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText):null;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=0;--u){var s=t.slice(0,u);if(e[s]&&(t===s||e[s].complete))return e[s]}}function r(e,t){return e&&"function"==typeof e.then?e.then(function(e){t(null,e)},function(e){t(e)}):void 0}var a=Object.assign||function(e){for(var t=1;tr.bottom||i.topt.offsetHeight&&!(t.scrollHeight-t.offsetHeight-t.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,t){return e?t?0===e.length:0===Object.keys(e).length:!0},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(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var t=this.expandValue(e);return t?[t]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var t=this.props.valueKey,u=this._flatOptions;if(u)for(var s=0;s-1&&u0?t[u-1]:t[t.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?l["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},l["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,t){var u=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:l["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,t){return l["default"].createElement(o,{disabled:u.props.disabled||e.clearableValue===!1,key:"value-"+t+"-"+e[u.props.valueKey],onClick:n,onRemove:u.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(t&&(n=null),l["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var t=(0,E["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?l["default"].createElement("div",r({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):l["default"].createElement(f["default"],r({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,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:l["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,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},l["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return l["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},l["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e,t){var u=this,s=this.state.inputValue;if("function"==typeof this.props.filterOptions)return this.props.filterOptions.call(this,e,s,t);if(!this.props.filterOptions)return e;var o=function(){u.props.ignoreAccents&&(s=(0,b["default"])(s)),u.props.ignoreCase&&(s=s.toLowerCase()),t&&(t=t.map(function(e){return e[u.props.valueKey]}));var o=function(e){if(t&&t.indexOf(e[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,e,s);if(!s)return!0;var o=String(e[u.props.valueKey]),n=String(e[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,b["default"])(o)),"value"!==u.props.matchProp&&(n=(0,b["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,s.length)===s||"value"!==u.props.matchProp&&n.substr(0,s.length)===s:"label"!==u.props.matchProp&&o.indexOf(s)>=0||"value"!==u.props.matchProp&&n.indexOf(s)>=0},i=[];return e.forEach(function(e){if(u.isGroup(e)){var s=n(e);s.options=u.filterOptions(e.options,t),s.options.length&&i.push(s)}else o(e)&&i.push(e)}),{v:i}}();return"object"==typeof o?o.v:void 0},isGroup:function(e){return e&&Array.isArray(e.options)},flattenOptions:function(e){if(e){for(var t=[],u=0;u-1,d=e===u,c=d?"focused":null,f=(0,E["default"])({"Select-option":!0,"is-selected":p,"is-focused":d,"is-disabled":e.disabled});return l["default"].createElement(n,{className:f,isDisabled:e.disabled,isFocused:d,key:"option-"+r+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:p,ref:c},i(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var t=this;if(this.props.name){var u=e.map(function(e){return i(e[t.props.valueKey])}).join(this.props.delimiter);return l["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:u,disabled:this.props.disabled})}},getFocusableOption:function(e){var t=this._visibleOptions;if(t.length){var u=this.state.focusedOption||e;if(u&&t.indexOf(u)>-1)return u;for(var s=0;s -*/ - -},{"./components/Contributors":2,"./components/CustomComponents":3,"./components/CustomRender":4,"./components/Multiselect":5,"./components/NumericSelect":6,"./components/States":7,"react":undefined,"react-dom":undefined,"react-select-plus":undefined}],2:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var CONTRIBUTORS = require('../data/contributors'); -var MAX_CONTRIBUTORS = 6; -var ASYNC_DELAY = 500; - -var Contributors = _react2['default'].createClass({ - displayName: 'Contributors', - propTypes: { - label: _react2['default'].PropTypes.string - }, - getInitialState: function getInitialState() { - return { - multi: true, - value: [CONTRIBUTORS[0]] - }; - }, - onChange: function onChange(value) { - this.setState({ - value: value - }); - }, - switchToMulti: function switchToMulti() { - this.setState({ - multi: true, - value: [this.state.value] - }); - }, - switchToSingle: function switchToSingle() { - this.setState({ - multi: false, - value: this.state.value[0] - }); - }, - getContributors: function getContributors(input, callback) { - input = input.toLowerCase(); - var options = CONTRIBUTORS.filter(function (i) { - return i.github.substr(0, input.length) === input; - }); - var data = { - options: options.slice(0, MAX_CONTRIBUTORS), - complete: options.length <= MAX_CONTRIBUTORS - }; - setTimeout(function () { - callback(null, data); - }, ASYNC_DELAY); - }, - gotoContributor: function gotoContributor(value, event) { - window.open('https://github.com/' + value.github); - }, - render: function render() { - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'].Async, { multi: this.state.multi, value: this.state.value, onChange: this.onChange, onValueClick: this.gotoContributor, valueKey: 'github', labelKey: 'name', loadOptions: this.getContributors }), - _react2['default'].createElement( - 'div', - { className: 'checkbox-list' }, - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: this.state.multi, onChange: this.switchToMulti }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Multiselect' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: !this.state.multi, onChange: this.switchToSingle }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Single Value' - ) - ) - ), - _react2['default'].createElement( - 'div', - { className: 'hint' }, - 'This example implements custom label and value properties, async options and opens the github profiles in a new window when values are clicked' - ) - ); - } -}); - -module.exports = Contributors; - -},{"../data/contributors":8,"react":undefined,"react-select-plus":undefined}],3:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var _reactGravatar = require('react-gravatar'); - -var _reactGravatar2 = _interopRequireDefault(_reactGravatar); - -var USERS = require('../data/users'); -var GRAVATAR_SIZE = 15; - -var GravatarOption = _react2['default'].createClass({ - displayName: 'GravatarOption', - - propTypes: { - children: _react2['default'].PropTypes.node, - className: _react2['default'].PropTypes.string, - isDisabled: _react2['default'].PropTypes.bool, - isFocused: _react2['default'].PropTypes.bool, - isSelected: _react2['default'].PropTypes.bool, - onFocus: _react2['default'].PropTypes.func, - onSelect: _react2['default'].PropTypes.func, - onUnfocus: _react2['default'].PropTypes.func, - option: _react2['default'].PropTypes.object.isRequired - }, - handleMouseDown: function handleMouseDown(event) { - event.preventDefault(); - event.stopPropagation(); - this.props.onSelect(this.props.option, event); - }, - handleMouseEnter: function handleMouseEnter(event) { - this.props.onFocus(this.props.option, event); - }, - handleMouseMove: function handleMouseMove(event) { - if (this.props.isFocused) return; - this.props.onFocus(this.props.option, event); - }, - handleMouseLeave: function handleMouseLeave(event) { - this.props.onUnfocus(this.props.option, event); - }, - render: function render() { - var gravatarStyle = { - borderRadius: 3, - display: 'inline-block', - marginRight: 10, - position: 'relative', - top: -2, - verticalAlign: 'middle' - }; - return _react2['default'].createElement( - 'div', - { className: this.props.className, - onMouseDown: this.handleMouseDown, - onMouseEnter: this.handleMouseEnter, - onMouseMove: this.handleMouseMove, - onMouseLeave: this.handleMouseLeave, - title: this.props.option.title }, - _react2['default'].createElement(_reactGravatar2['default'], { email: this.props.option.email, size: GRAVATAR_SIZE, style: gravatarStyle }), - this.props.children - ); - } -}); - -var GravatarValue = _react2['default'].createClass({ - displayName: 'GravatarValue', - - propTypes: { - children: _react2['default'].PropTypes.node, - placeholder: _react2['default'].PropTypes.string, - value: _react2['default'].PropTypes.object - }, - render: function render() { - var gravatarStyle = { - borderRadius: 3, - display: 'inline-block', - marginRight: 10, - position: 'relative', - top: -2, - verticalAlign: 'middle' - }; - return _react2['default'].createElement( - 'div', - { className: 'Select-value', title: this.props.value.title }, - _react2['default'].createElement( - 'span', - { className: 'Select-value-label' }, - _react2['default'].createElement(_reactGravatar2['default'], { email: this.props.value.email, size: GRAVATAR_SIZE, style: gravatarStyle }), - this.props.children - ) - ); - } -}); - -var UsersField = _react2['default'].createClass({ - displayName: 'UsersField', - - propTypes: { - hint: _react2['default'].PropTypes.string, - label: _react2['default'].PropTypes.string - }, - getInitialState: function getInitialState() { - return {}; - }, - setValue: function setValue(value) { - this.setState({ value: value }); - }, - render: function render() { - var placeholder = _react2['default'].createElement( - 'span', - null, - '☺ Select User' - ); - - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'], { - onChange: this.setValue, - optionComponent: GravatarOption, - options: USERS, - placeholder: placeholder, - value: this.state.value, - valueComponent: GravatarValue - }), - _react2['default'].createElement( - 'div', - { className: 'hint' }, - 'This example implements custom Option and Value components to render a Gravatar image for each user based on their email. It also demonstrates rendering HTML elements as the placeholder.' - ) - ); - } -}); - -module.exports = UsersField; - -},{"../data/users":10,"react":undefined,"react-gravatar":14,"react-select-plus":undefined}],4:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var DisabledUpsellOptions = _react2['default'].createClass({ - displayName: 'DisabledUpsellOptions', - propTypes: { - label: _react2['default'].PropTypes.string - }, - getInitialState: function getInitialState() { - return {}; - }, - setValue: function setValue(value) { - this.setState({ value: value }); - console.log('Support level selected:', value.label); - }, - renderLink: function renderLink() { - return _react2['default'].createElement( - 'a', - { style: { marginLeft: 5 }, href: '/upgrade', target: '_blank' }, - 'Upgrade here!' - ); - }, - renderOption: function renderOption(option) { - return _react2['default'].createElement( - 'span', - { style: { color: option.color } }, - option.label, - ' ', - option.link - ); - }, - renderValue: function renderValue(option) { - return _react2['default'].createElement( - 'strong', - { style: { color: option.color } }, - option.label - ); - }, - render: function render() { - var options = [{ label: 'Basic customer support', value: 'basic', color: '#E31864' }, { label: 'Premium customer support', value: 'premium', color: '#6216A3' }, { label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() }]; - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'], { - placeholder: 'Select your support level', - options: options, - optionRenderer: this.renderOption, - onChange: this.setValue, - value: this.state.value, - valueRenderer: this.renderValue - }), - _react2['default'].createElement( - 'div', - { className: 'hint' }, - 'This demonstates custom render methods and links in disabled options' - ) - ); - } -}); -module.exports = DisabledUpsellOptions; - -},{"react":undefined,"react-select-plus":undefined}],5:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var FLAVOURS = [{ label: 'Chocolate', value: 'chocolate' }, { label: 'Vanilla', value: 'vanilla' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Caramel', value: 'caramel' }, { label: 'Cookies and Cream', value: 'cookiescream' }, { label: 'Peppermint', value: 'peppermint' }]; - -var WHY_WOULD_YOU = [{ label: 'Chocolate (are you crazy?)', value: 'chocolate', disabled: true }].concat(FLAVOURS.slice(1)); - -var MultiSelectField = _react2['default'].createClass({ - displayName: 'MultiSelectField', - propTypes: { - label: _react2['default'].PropTypes.string - }, - getInitialState: function getInitialState() { - return { - disabled: false, - crazy: false, - options: FLAVOURS, - value: [] - }; - }, - handleSelectChange: function handleSelectChange(value) { - console.log('You\'ve selected:', value); - this.setState({ value: value }); - }, - toggleDisabled: function toggleDisabled(e) { - this.setState({ disabled: e.target.checked }); - }, - toggleChocolate: function toggleChocolate(e) { - var crazy = e.target.checked; - this.setState({ - crazy: crazy, - options: crazy ? WHY_WOULD_YOU : FLAVOURS - }); - }, - render: function render() { - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'], { multi: true, simpleValue: true, disabled: this.state.disabled, value: this.state.value, placeholder: 'Select your favourite(s)', options: this.state.options, onChange: this.handleSelectChange }), - _react2['default'].createElement( - 'div', - { className: 'checkbox-list' }, - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.disabled, onChange: this.toggleDisabled }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Disable the control' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.crazy, onChange: this.toggleChocolate }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'I don\'t like Chocolate (disabled the option)' - ) - ) - ) - ); - } -}); - -module.exports = MultiSelectField; - -},{"react":undefined,"react-select-plus":undefined}],6:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var ValuesAsNumbersField = _react2['default'].createClass({ - displayName: 'ValuesAsNumbersField', - propTypes: { - label: _react2['default'].PropTypes.string - }, - getInitialState: function getInitialState() { - return { - options: [{ value: 10, label: 'Ten' }, { value: 11, label: 'Eleven' }, { value: 12, label: 'Twelve' }, { value: 23, label: 'Twenty-three' }, { value: 24, label: 'Twenty-four' }], - matchPos: 'any', - matchValue: true, - matchLabel: true, - value: null, - multi: false - }; - }, - onChangeMatchStart: function onChangeMatchStart(event) { - this.setState({ - matchPos: event.target.checked ? 'start' : 'any' - }); - }, - onChangeMatchValue: function onChangeMatchValue(event) { - this.setState({ - matchValue: event.target.checked - }); - }, - onChangeMatchLabel: function onChangeMatchLabel(event) { - this.setState({ - matchLabel: event.target.checked - }); - }, - onChange: function onChange(value) { - this.setState({ value: value }); - console.log('Numeric Select value changed to', value); - }, - onChangeMulti: function onChangeMulti(event) { - this.setState({ - multi: event.target.checked - }); - }, - render: function render() { - var matchProp = 'any'; - if (this.state.matchLabel && !this.state.matchValue) { - matchProp = 'label'; - } - if (!this.state.matchLabel && this.state.matchValue) { - matchProp = 'value'; - } - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'], { - matchPos: this.state.matchPos, - matchProp: matchProp, - multi: this.state.multi, - onChange: this.onChange, - options: this.state.options, - simpleValue: true, - value: this.state.value - }), - _react2['default'].createElement( - 'div', - { className: 'checkbox-list' }, - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.multi, onChange: this.onChangeMulti }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Multi-Select' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchValue, onChange: this.onChangeMatchValue }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Match value only' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchLabel, onChange: this.onChangeMatchLabel }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Match label only' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', checked: this.state.matchPos === 'start', onChange: this.onChangeMatchStart }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Only include matches from the start of the string' - ) - ) - ), - _react2['default'].createElement( - 'div', - { className: 'hint' }, - 'This example uses simple numeric values' - ) - ); - } -}); - -module.exports = ValuesAsNumbersField; - -},{"react":undefined,"react-select-plus":undefined}],7:[function(require,module,exports){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactSelectPlus = require('react-select-plus'); - -var _reactSelectPlus2 = _interopRequireDefault(_reactSelectPlus); - -var STATES = require('../data/states'); - -var StatesField = _react2['default'].createClass({ - displayName: 'StatesField', - propTypes: { - label: _react2['default'].PropTypes.string, - searchable: _react2['default'].PropTypes.bool - }, - getDefaultProps: function getDefaultProps() { - return { - label: 'States:', - searchable: true - }; - }, - getInitialState: function getInitialState() { - return { - country: 'AU', - disabled: false, - searchable: this.props.searchable, - selectValue: 'new-south-wales', - clearable: true - }; - }, - switchCountry: function switchCountry(e) { - var newCountry = e.target.value; - console.log('Country changed to ' + newCountry); - this.setState({ - country: newCountry, - selectValue: null - }); - }, - updateValue: function updateValue(newValue) { - console.log('State changed to ' + newValue); - this.setState({ - selectValue: newValue - }); - }, - focusStateSelect: function focusStateSelect() { - this.refs.stateSelect.focus(); - }, - toggleCheckbox: function toggleCheckbox(e) { - var newState = {}; - newState[e.target.name] = e.target.checked; - this.setState(newState); - }, - render: function render() { - var options = STATES[this.state.country]; - return _react2['default'].createElement( - 'div', - { className: 'section' }, - _react2['default'].createElement( - 'h3', - { className: 'section-heading' }, - this.props.label - ), - _react2['default'].createElement(_reactSelectPlus2['default'], { ref: 'stateSelect', autofocus: true, options: options, simpleValue: true, clearable: this.state.clearable, name: 'selected-state', disabled: this.state.disabled, value: this.state.selectValue, onChange: this.updateValue, searchable: this.state.searchable }), - _react2['default'].createElement( - 'div', - { style: { marginTop: 14 } }, - _react2['default'].createElement( - 'button', - { type: 'button', onClick: this.focusStateSelect }, - 'Focus Select' - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox', style: { marginLeft: 10 } }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', name: 'searchable', checked: this.state.searchable, onChange: this.toggleCheckbox }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Searchable' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox', style: { marginLeft: 10 } }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', name: 'disabled', checked: this.state.disabled, onChange: this.toggleCheckbox }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Disabled' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox', style: { marginLeft: 10 } }, - _react2['default'].createElement('input', { type: 'checkbox', className: 'checkbox-control', name: 'clearable', checked: this.state.clearable, onChange: this.toggleCheckbox }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Clearable' - ) - ) - ), - _react2['default'].createElement( - 'div', - { className: 'checkbox-list' }, - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: this.state.country === 'AU', value: 'AU', onChange: this.switchCountry }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'Australia' - ) - ), - _react2['default'].createElement( - 'label', - { className: 'checkbox' }, - _react2['default'].createElement('input', { type: 'radio', className: 'checkbox-control', checked: this.state.country === 'US', value: 'US', onChange: this.switchCountry }), - _react2['default'].createElement( - 'span', - { className: 'checkbox-label' }, - 'United States' - ) - ) - ) - ); - } -}); - -module.exports = StatesField; - -},{"../data/states":9,"react":undefined,"react-select-plus":undefined}],8:[function(require,module,exports){ -'use strict'; - -module.exports = [{ github: 'jedwatson', name: 'Jed Watson' }, { github: 'bruderstein', name: 'Dave Brotherstone' }, { github: 'jossmac', name: 'Joss Mackison' }, { github: 'jniechcial', name: 'Jakub Niechciał' }, { github: 'craigdallimore', name: 'Craig Dallimore' }, { github: 'julen', name: 'Julen Ruiz Aizpuru' }, { github: 'dcousens', name: 'Daniel Cousens' }, { github: 'jgautsch', name: 'Jon Gautsch' }, { github: 'dmitry-smirnov', name: 'Dmitry Smirnov' }]; - -},{}],9:[function(require,module,exports){ -'use strict'; - -exports.AU = [{ value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' }, { value: 'new-south-wales', label: 'New South Wales', className: 'State-NSW' }, { value: 'victoria', label: 'Victoria', className: 'State-Vic' }, { value: 'queensland', label: 'Queensland', className: 'State-Qld' }, { value: 'western-australia', label: 'Western Australia', className: 'State-WA' }, { value: 'south-australia', label: 'South Australia', className: 'State-SA' }, { value: 'tasmania', label: 'Tasmania', className: 'State-Tas' }, { value: 'northern-territory', label: 'Northern Territory', className: 'State-NT' }]; - -exports.US = [{ value: 'AL', label: 'Alabama', disabled: true }, { value: 'AK', label: 'Alaska' }, { value: 'AS', label: 'American Samoa' }, { value: 'AZ', label: 'Arizona' }, { value: 'AR', label: 'Arkansas' }, { value: 'CA', label: 'California' }, { value: 'CO', label: 'Colorado' }, { value: 'CT', label: 'Connecticut' }, { value: 'DE', label: 'Delaware' }, { value: 'DC', label: 'District Of Columbia' }, { value: 'FM', label: 'Federated States Of Micronesia' }, { value: 'FL', label: 'Florida' }, { value: 'GA', label: 'Georgia' }, { value: 'GU', label: 'Guam' }, { value: 'HI', label: 'Hawaii' }, { value: 'ID', label: 'Idaho' }, { value: 'IL', label: 'Illinois' }, { value: 'IN', label: 'Indiana' }, { value: 'IA', label: 'Iowa' }, { value: 'KS', label: 'Kansas' }, { value: 'KY', label: 'Kentucky' }, { value: 'LA', label: 'Louisiana' }, { value: 'ME', label: 'Maine' }, { value: 'MH', label: 'Marshall Islands' }, { value: 'MD', label: 'Maryland' }, { value: 'MA', label: 'Massachusetts' }, { value: 'MI', label: 'Michigan' }, { value: 'MN', label: 'Minnesota' }, { value: 'MS', label: 'Mississippi' }, { value: 'MO', label: 'Missouri' }, { value: 'MT', label: 'Montana' }, { value: 'NE', label: 'Nebraska' }, { value: 'NV', label: 'Nevada' }, { value: 'NH', label: 'New Hampshire' }, { value: 'NJ', label: 'New Jersey' }, { value: 'NM', label: 'New Mexico' }, { value: 'NY', label: 'New York' }, { value: 'NC', label: 'North Carolina' }, { value: 'ND', label: 'North Dakota' }, { value: 'MP', label: 'Northern Mariana Islands' }, { value: 'OH', label: 'Ohio' }, { value: 'OK', label: 'Oklahoma' }, { value: 'OR', label: 'Oregon' }, { value: 'PW', label: 'Palau' }, { value: 'PA', label: 'Pennsylvania' }, { value: 'PR', label: 'Puerto Rico' }, { value: 'RI', label: 'Rhode Island' }, { value: 'SC', label: 'South Carolina' }, { value: 'SD', label: 'South Dakota' }, { value: 'TN', label: 'Tennessee' }, { value: 'TX', label: 'Texas' }, { value: 'UT', label: 'Utah' }, { value: 'VT', label: 'Vermont' }, { value: 'VI', label: 'Virgin Islands' }, { value: 'VA', label: 'Virginia' }, { value: 'WA', label: 'Washington' }, { value: 'WV', label: 'West Virginia' }, { value: 'WI', label: 'Wisconsin' }, { value: 'WY', label: 'Wyoming' }]; - -},{}],10:[function(require,module,exports){ -'use strict'; - -module.exports = [{ value: 'John Smith', label: 'John Smith', email: 'john@smith.com' }, { value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com' }, { value: 'Stan Hoper', label: 'Stan Hoper', email: 'stan@hoper.com' }]; - -},{}],11:[function(require,module,exports){ -// Copyright Joyent, Inc. and other Node contributors. -// -// Permission is hereby granted, free of charge, to any person obtaining a -// copy of this software and associated documentation files (the -// "Software"), to deal in the Software without restriction, including -// without limitation the rights to use, copy, modify, merge, publish, -// distribute, sublicense, and/or sell copies of the Software, and to permit -// persons to whom the Software is furnished to do so, subject to the -// following conditions: -// -// The above copyright notice and this permission notice shall be included -// in all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS -// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN -// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, -// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR -// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE -// USE OR OTHER DEALINGS IN THE SOFTWARE. - -'use strict'; - -// If obj.hasOwnProperty has been overridden, then calling -// obj.hasOwnProperty(prop) will break. -// See: https://github.com/joyent/node/issues/1707 -function hasOwnProperty(obj, prop) { - return Object.prototype.hasOwnProperty.call(obj, prop); -} - -module.exports = function(qs, sep, eq, options) { - sep = sep || '&'; - eq = eq || '='; - var obj = {}; - - if (typeof qs !== 'string' || qs.length === 0) { - return obj; - } - - var regexp = /\+/g; - qs = qs.split(sep); - - var maxKeys = 1000; - if (options && typeof options.maxKeys === 'number') { - maxKeys = options.maxKeys; - } - - var len = qs.length; - // maxKeys <= 0 means that we should not limit keys count - if (maxKeys > 0 && len > maxKeys) { - len = maxKeys; - } - - for (var i = 0; i < len; ++i) { - var x = qs[i].replace(regexp, '%20'), - idx = x.indexOf(eq), - kstr, vstr, k, v; - - if (idx >= 0) { - kstr = x.substr(0, idx); - vstr = x.substr(idx + 1); - } else { - kstr = x; - vstr = ''; - } - - k = decodeURIComponent(kstr); - v = decodeURIComponent(vstr); - - if (!hasOwnProperty(obj, k)) { - obj[k] = v; - } else if (isArray(obj[k])) { - obj[k].push(v); - } else { - obj[k] = [obj[k], v]; - } - } - - return obj; -}; - -var isArray = Array.isArray || function (xs) { - return Object.prototype.toString.call(xs) === '[object Array]'; -}; - -},{}],12:[function(require,module,exports){ -// Copyright Joyent, Inc. and other Node contributors. -// -// Permission is hereby granted, free of charge, to any person obtaining a -// copy of this software and associated documentation files (the -// "Software"), to deal in the Software without restriction, including -// without limitation the rights to use, copy, modify, merge, publish, -// distribute, sublicense, and/or sell copies of the Software, and to permit -// persons to whom the Software is furnished to do so, subject to the -// following conditions: -// -// The above copyright notice and this permission notice shall be included -// in all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS -// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN -// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, -// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR -// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE -// USE OR OTHER DEALINGS IN THE SOFTWARE. - -'use strict'; - -var stringifyPrimitive = function(v) { - switch (typeof v) { - case 'string': - return v; - - case 'boolean': - return v ? 'true' : 'false'; - - case 'number': - return isFinite(v) ? v : ''; - - default: - return ''; - } -}; - -module.exports = function(obj, sep, eq, name) { - sep = sep || '&'; - eq = eq || '='; - if (obj === null) { - obj = undefined; - } - - if (typeof obj === 'object') { - return map(objectKeys(obj), function(k) { - var ks = encodeURIComponent(stringifyPrimitive(k)) + eq; - if (isArray(obj[k])) { - return map(obj[k], function(v) { - return ks + encodeURIComponent(stringifyPrimitive(v)); - }).join(sep); - } else { - return ks + encodeURIComponent(stringifyPrimitive(obj[k])); - } - }).join(sep); - - } - - if (!name) return ''; - return encodeURIComponent(stringifyPrimitive(name)) + eq + - encodeURIComponent(stringifyPrimitive(obj)); -}; - -var isArray = Array.isArray || function (xs) { - return Object.prototype.toString.call(xs) === '[object Array]'; -}; - -function map (xs, f) { - if (xs.map) return xs.map(f); - var res = []; - for (var i = 0; i < xs.length; i++) { - res.push(f(xs[i], i)); - } - return res; -} - -var objectKeys = Object.keys || function (obj) { - var res = []; - for (var key in obj) { - if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key); - } - return res; -}; - -},{}],13:[function(require,module,exports){ -'use strict'; - -exports.decode = exports.parse = require('./decode'); -exports.encode = exports.stringify = require('./encode'); - -},{"./decode":11,"./encode":12}],14:[function(require,module,exports){ -// Generated by CoffeeScript 1.10.0 -var React, isRetina, md5, querystring; - -React = require('react'); - -md5 = require('md5'); - -querystring = require('querystring'); - -isRetina = require('is-retina'); - -module.exports = React.createClass({ - displayName: 'Gravatar', - propTypes: { - email: React.PropTypes.string, - md5: React.PropTypes.string, - size: React.PropTypes.number, - rating: React.PropTypes.string, - https: React.PropTypes.bool, - "default": React.PropTypes.string, - className: React.PropTypes.string - }, - getDefaultProps: function() { - return { - size: 50, - rating: 'g', - https: false, - "default": "retro", - className: "" - }; - }, - render: function() { - var base, hash, modernBrowser, query, retinaQuery, retinaSrc, src; - base = this.props.https ? "https://secure.gravatar.com/avatar/" : 'http://www.gravatar.com/avatar/'; - query = querystring.stringify({ - s: this.props.size, - r: this.props.rating, - d: this.props["default"] - }); - retinaQuery = querystring.stringify({ - s: this.props.size * 2, - r: this.props.rating, - d: this.props["default"] - }); - if (this.props.md5) { - hash = this.props.md5; - } else if (this.props.email) { - hash = md5(this.props.email); - } else { - console.warn('Gravatar image can not be fetched. Either the "email" or "md5" prop must be specified.'); - return React.createElement("script", null); - } - src = base + hash + "?" + query; - retinaSrc = base + hash + "?" + retinaQuery; - modernBrowser = true; - if (typeof window !== "undefined" && window !== null) { - modernBrowser = 'srcset' in document.createElement('img'); - } - if (!modernBrowser && isRetina()) { - return React.createElement("img", React.__spread({ - "style": this.props.style, - "className": "react-gravatar " + this.props.className, - "src": retinaSrc, - "height": this.props.size, - "width": this.props.size - }, this.props)); - } else { - return React.createElement("img", React.__spread({ - "style": this.props.style, - "className": "react-gravatar " + this.props.className, - "src": src, - "srcSet": retinaSrc + " 2x", - "height": this.props.size, - "width": this.props.size - }, this.props)); - } - } -}); - -},{"is-retina":15,"md5":16,"querystring":13,"react":undefined}],15:[function(require,module,exports){ -module.exports = function() { - var mediaQuery; - if (typeof window !== "undefined" && window !== null) { - mediaQuery = "(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)"; - if (window.devicePixelRatio > 1.25) { - return true; - } - if (window.matchMedia && window.matchMedia(mediaQuery).matches) { - return true; - } - } - return false; -}; - -},{}],16:[function(require,module,exports){ -(function(){ - var crypt = require('crypt'), - utf8 = require('charenc').utf8, - isBuffer = require('is-buffer'), - bin = require('charenc').bin, - - // The core - md5 = function (message, options) { - // Convert to byte array - if (message.constructor == String) - if (options && options.encoding === 'binary') - message = bin.stringToBytes(message); - else - message = utf8.stringToBytes(message); - else if (isBuffer(message)) - message = Array.prototype.slice.call(message, 0); - else if (!Array.isArray(message)) - message = message.toString(); - // else, assume byte array already - - var m = crypt.bytesToWords(message), - l = message.length * 8, - a = 1732584193, - b = -271733879, - c = -1732584194, - d = 271733878; - - // Swap endian - for (var i = 0; i < m.length; i++) { - m[i] = ((m[i] << 8) | (m[i] >>> 24)) & 0x00FF00FF | - ((m[i] << 24) | (m[i] >>> 8)) & 0xFF00FF00; - } - - // Padding - m[l >>> 5] |= 0x80 << (l % 32); - m[(((l + 64) >>> 9) << 4) + 14] = l; - - // Method shortcuts - var FF = md5._ff, - GG = md5._gg, - HH = md5._hh, - II = md5._ii; - - for (var i = 0; i < m.length; i += 16) { - - var aa = a, - bb = b, - cc = c, - dd = d; - - a = FF(a, b, c, d, m[i+ 0], 7, -680876936); - d = FF(d, a, b, c, m[i+ 1], 12, -389564586); - c = FF(c, d, a, b, m[i+ 2], 17, 606105819); - b = FF(b, c, d, a, m[i+ 3], 22, -1044525330); - a = FF(a, b, c, d, m[i+ 4], 7, -176418897); - d = FF(d, a, b, c, m[i+ 5], 12, 1200080426); - c = FF(c, d, a, b, m[i+ 6], 17, -1473231341); - b = FF(b, c, d, a, m[i+ 7], 22, -45705983); - a = FF(a, b, c, d, m[i+ 8], 7, 1770035416); - d = FF(d, a, b, c, m[i+ 9], 12, -1958414417); - c = FF(c, d, a, b, m[i+10], 17, -42063); - b = FF(b, c, d, a, m[i+11], 22, -1990404162); - a = FF(a, b, c, d, m[i+12], 7, 1804603682); - d = FF(d, a, b, c, m[i+13], 12, -40341101); - c = FF(c, d, a, b, m[i+14], 17, -1502002290); - b = FF(b, c, d, a, m[i+15], 22, 1236535329); - - a = GG(a, b, c, d, m[i+ 1], 5, -165796510); - d = GG(d, a, b, c, m[i+ 6], 9, -1069501632); - c = GG(c, d, a, b, m[i+11], 14, 643717713); - b = GG(b, c, d, a, m[i+ 0], 20, -373897302); - a = GG(a, b, c, d, m[i+ 5], 5, -701558691); - d = GG(d, a, b, c, m[i+10], 9, 38016083); - c = GG(c, d, a, b, m[i+15], 14, -660478335); - b = GG(b, c, d, a, m[i+ 4], 20, -405537848); - a = GG(a, b, c, d, m[i+ 9], 5, 568446438); - d = GG(d, a, b, c, m[i+14], 9, -1019803690); - c = GG(c, d, a, b, m[i+ 3], 14, -187363961); - b = GG(b, c, d, a, m[i+ 8], 20, 1163531501); - a = GG(a, b, c, d, m[i+13], 5, -1444681467); - d = GG(d, a, b, c, m[i+ 2], 9, -51403784); - c = GG(c, d, a, b, m[i+ 7], 14, 1735328473); - b = GG(b, c, d, a, m[i+12], 20, -1926607734); - - a = HH(a, b, c, d, m[i+ 5], 4, -378558); - d = HH(d, a, b, c, m[i+ 8], 11, -2022574463); - c = HH(c, d, a, b, m[i+11], 16, 1839030562); - b = HH(b, c, d, a, m[i+14], 23, -35309556); - a = HH(a, b, c, d, m[i+ 1], 4, -1530992060); - d = HH(d, a, b, c, m[i+ 4], 11, 1272893353); - c = HH(c, d, a, b, m[i+ 7], 16, -155497632); - b = HH(b, c, d, a, m[i+10], 23, -1094730640); - a = HH(a, b, c, d, m[i+13], 4, 681279174); - d = HH(d, a, b, c, m[i+ 0], 11, -358537222); - c = HH(c, d, a, b, m[i+ 3], 16, -722521979); - b = HH(b, c, d, a, m[i+ 6], 23, 76029189); - a = HH(a, b, c, d, m[i+ 9], 4, -640364487); - d = HH(d, a, b, c, m[i+12], 11, -421815835); - c = HH(c, d, a, b, m[i+15], 16, 530742520); - b = HH(b, c, d, a, m[i+ 2], 23, -995338651); - - a = II(a, b, c, d, m[i+ 0], 6, -198630844); - d = II(d, a, b, c, m[i+ 7], 10, 1126891415); - c = II(c, d, a, b, m[i+14], 15, -1416354905); - b = II(b, c, d, a, m[i+ 5], 21, -57434055); - a = II(a, b, c, d, m[i+12], 6, 1700485571); - d = II(d, a, b, c, m[i+ 3], 10, -1894986606); - c = II(c, d, a, b, m[i+10], 15, -1051523); - b = II(b, c, d, a, m[i+ 1], 21, -2054922799); - a = II(a, b, c, d, m[i+ 8], 6, 1873313359); - d = II(d, a, b, c, m[i+15], 10, -30611744); - c = II(c, d, a, b, m[i+ 6], 15, -1560198380); - b = II(b, c, d, a, m[i+13], 21, 1309151649); - a = II(a, b, c, d, m[i+ 4], 6, -145523070); - d = II(d, a, b, c, m[i+11], 10, -1120210379); - c = II(c, d, a, b, m[i+ 2], 15, 718787259); - b = II(b, c, d, a, m[i+ 9], 21, -343485551); - - a = (a + aa) >>> 0; - b = (b + bb) >>> 0; - c = (c + cc) >>> 0; - d = (d + dd) >>> 0; - } - - return crypt.endian([a, b, c, d]); - }; - - // Auxiliary functions - md5._ff = function (a, b, c, d, x, s, t) { - var n = a + (b & c | ~b & d) + (x >>> 0) + t; - return ((n << s) | (n >>> (32 - s))) + b; - }; - md5._gg = function (a, b, c, d, x, s, t) { - var n = a + (b & d | c & ~d) + (x >>> 0) + t; - return ((n << s) | (n >>> (32 - s))) + b; - }; - md5._hh = function (a, b, c, d, x, s, t) { - var n = a + (b ^ c ^ d) + (x >>> 0) + t; - return ((n << s) | (n >>> (32 - s))) + b; - }; - md5._ii = function (a, b, c, d, x, s, t) { - var n = a + (c ^ (b | ~d)) + (x >>> 0) + t; - return ((n << s) | (n >>> (32 - s))) + b; - }; - - // Package private blocksize - md5._blocksize = 16; - md5._digestsize = 16; - - module.exports = function (message, options) { - if(typeof message == 'undefined') - return; - - var digestbytes = crypt.wordsToBytes(md5(message, options)); - return options && options.asBytes ? digestbytes : - options && options.asString ? bin.bytesToString(digestbytes) : - crypt.bytesToHex(digestbytes); - }; - -})(); - -},{"charenc":17,"crypt":18,"is-buffer":19}],17:[function(require,module,exports){ -var charenc = { - // UTF-8 encoding - utf8: { - // Convert a string to a byte array - stringToBytes: function(str) { - return charenc.bin.stringToBytes(unescape(encodeURIComponent(str))); - }, - - // Convert a byte array to a string - bytesToString: function(bytes) { - return decodeURIComponent(escape(charenc.bin.bytesToString(bytes))); - } - }, - - // Binary encoding - bin: { - // Convert a string to a byte array - stringToBytes: function(str) { - for (var bytes = [], i = 0; i < str.length; i++) - bytes.push(str.charCodeAt(i) & 0xFF); - return bytes; - }, - - // Convert a byte array to a string - bytesToString: function(bytes) { - for (var str = [], i = 0; i < bytes.length; i++) - str.push(String.fromCharCode(bytes[i])); - return str.join(''); - } - } -}; - -module.exports = charenc; - -},{}],18:[function(require,module,exports){ -(function() { - var base64map - = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', - - crypt = { - // Bit-wise rotation left - rotl: function(n, b) { - return (n << b) | (n >>> (32 - b)); - }, - - // Bit-wise rotation right - rotr: function(n, b) { - return (n << (32 - b)) | (n >>> b); - }, - - // Swap big-endian to little-endian and vice versa - endian: function(n) { - // If number given, swap endian - if (n.constructor == Number) { - return crypt.rotl(n, 8) & 0x00FF00FF | crypt.rotl(n, 24) & 0xFF00FF00; - } - - // Else, assume array and swap all items - for (var i = 0; i < n.length; i++) - n[i] = crypt.endian(n[i]); - return n; - }, - - // Generate an array of any length of random bytes - randomBytes: function(n) { - for (var bytes = []; n > 0; n--) - bytes.push(Math.floor(Math.random() * 256)); - return bytes; - }, - - // Convert a byte array to big-endian 32-bit words - bytesToWords: function(bytes) { - for (var words = [], i = 0, b = 0; i < bytes.length; i++, b += 8) - words[b >>> 5] |= bytes[i] << (24 - b % 32); - return words; - }, - - // Convert big-endian 32-bit words to a byte array - wordsToBytes: function(words) { - for (var bytes = [], b = 0; b < words.length * 32; b += 8) - bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF); - return bytes; - }, - - // Convert a byte array to a hex string - bytesToHex: function(bytes) { - for (var hex = [], i = 0; i < bytes.length; i++) { - hex.push((bytes[i] >>> 4).toString(16)); - hex.push((bytes[i] & 0xF).toString(16)); - } - return hex.join(''); - }, - - // Convert a hex string to a byte array - hexToBytes: function(hex) { - for (var bytes = [], c = 0; c < hex.length; c += 2) - bytes.push(parseInt(hex.substr(c, 2), 16)); - return bytes; - }, - - // Convert a byte array to a base-64 string - bytesToBase64: function(bytes) { - for (var base64 = [], i = 0; i < bytes.length; i += 3) { - var triplet = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]; - for (var j = 0; j < 4; j++) - if (i * 8 + j * 6 <= bytes.length * 8) - base64.push(base64map.charAt((triplet >>> 6 * (3 - j)) & 0x3F)); - else - base64.push('='); - } - return base64.join(''); - }, - - // Convert a base-64 string to a byte array - base64ToBytes: function(base64) { - // Remove non-base-64 characters - base64 = base64.replace(/[^A-Z0-9+\/]/ig, ''); - - for (var bytes = [], i = 0, imod4 = 0; i < base64.length; - imod4 = ++i % 4) { - if (imod4 == 0) continue; - bytes.push(((base64map.indexOf(base64.charAt(i - 1)) - & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2)) - | (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2))); - } - return bytes; - } - }; - - module.exports = crypt; -})(); - -},{}],19:[function(require,module,exports){ -/** - * Determine if an object is Buffer - * - * Author: Feross Aboukhadijeh - * License: MIT - * - * `npm install is-buffer` - */ - -module.exports = function (obj) { - return !!( - obj != null && - obj.constructor && - typeof obj.constructor.isBuffer === 'function' && - obj.constructor.isBuffer(obj) - ) -} - -},{}]},{},[1]); diff --git a/examples/dist/bundle.js b/examples/dist/bundle.js index b4a4d77b..7aaf2b7e 100644 --- a/examples/dist/bundle.js +++ b/examples/dist/bundle.js @@ -168,7 +168,7 @@ var Async = _react2['default'].createClass({ module.exports = Async; -},{"./Select":"react-select-plus","./utils/stripDiacritics":5,"react":undefined}],2:[function(require,module,exports){ +},{"./Select":"react-select-plus","./utils/stripDiacritics":6,"react":undefined}],2:[function(require,module,exports){ 'use strict'; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } @@ -310,6 +310,99 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); +var OptionGroup = _react2['default'].createClass({ + displayName: 'OptionGroup', + + propTypes: { + children: _react2['default'].PropTypes.any, + className: _react2['default'].PropTypes.string, // className (based on mouse position) + label: _react2['default'].PropTypes.node, // the heading to show above the child options + option: _react2['default'].PropTypes.object.isRequired }, + + // object that is base for that option group + blockEvent: function blockEvent(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.target.tagName !== 'A' || !('href' in event.target)) { + return; + } + if (event.target.target) { + window.open(event.target.href, event.target.target); + } else { + window.location.href = event.target.href; + } + }, + + handleMouseDown: function handleMouseDown(event) { + event.preventDefault(); + event.stopPropagation(); + }, + + handleTouchEnd: function handleTouchEnd(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; + + this.handleMouseDown(event); + }, + + handleTouchMove: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + }, + + handleTouchStart: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; + }, + + render: function render() { + var option = this.props.option; + + var className = (0, _classnames2['default'])(this.props.className, option.className); + + return option.disabled ? _react2['default'].createElement( + 'div', + { className: className, + onMouseDown: this.blockEvent, + onClick: this.blockEvent }, + this.props.children + ) : _react2['default'].createElement( + 'div', + { className: className, + style: option.style, + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseMove: this.handleMouseMove, + onTouchStart: this.handleTouchStart, + onTouchMove: this.handleTouchMove, + onTouchEnd: this.handleTouchEnd, + title: option.title }, + _react2['default'].createElement( + 'div', + { className: 'Select-option-group-label' }, + this.props.label + ), + this.props.children + ); + } +}); + +module.exports = OptionGroup; + +},{"classnames":undefined,"react":undefined}],5:[function(require,module,exports){ +'use strict'; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + var Value = _react2['default'].createClass({ displayName: 'Value', @@ -403,7 +496,7 @@ var Value = _react2['default'].createClass({ module.exports = Value; -},{"classnames":undefined,"react":undefined}],5:[function(require,module,exports){ +},{"classnames":undefined,"react":undefined}],6:[function(require,module,exports){ 'use strict'; var map = [{ 'base': 'A', 'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { 'base': 'AA', 'letters': /[\uA732]/g }, { 'base': 'AE', 'letters': /[\u00C6\u01FC\u01E2]/g }, { 'base': 'AO', 'letters': /[\uA734]/g }, { 'base': 'AU', 'letters': /[\uA736]/g }, { 'base': 'AV', 'letters': /[\uA738\uA73A]/g }, { 'base': 'AY', 'letters': /[\uA73C]/g }, { 'base': 'B', 'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { 'base': 'C', 'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { 'base': 'D', 'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { 'base': 'DZ', 'letters': /[\u01F1\u01C4]/g }, { 'base': 'Dz', 'letters': /[\u01F2\u01C5]/g }, { 'base': 'E', 'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { 'base': 'F', 'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { 'base': 'G', 'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { 'base': 'H', 'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { 'base': 'I', 'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { 'base': 'J', 'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { 'base': 'K', 'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { 'base': 'L', 'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { 'base': 'LJ', 'letters': /[\u01C7]/g }, { 'base': 'Lj', 'letters': /[\u01C8]/g }, { 'base': 'M', 'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { 'base': 'N', 'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { 'base': 'NJ', 'letters': /[\u01CA]/g }, { 'base': 'Nj', 'letters': /[\u01CB]/g }, { 'base': 'O', 'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { 'base': 'OI', 'letters': /[\u01A2]/g }, { 'base': 'OO', 'letters': /[\uA74E]/g }, { 'base': 'OU', 'letters': /[\u0222]/g }, { 'base': 'P', 'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { 'base': 'Q', 'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { 'base': 'R', 'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { 'base': 'S', 'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { 'base': 'T', 'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { 'base': 'TZ', 'letters': /[\uA728]/g }, { 'base': 'U', 'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { 'base': 'V', 'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { 'base': 'VY', 'letters': /[\uA760]/g }, { 'base': 'W', 'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { 'base': 'X', 'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { 'base': 'Y', 'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { 'base': 'Z', 'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { 'base': 'a', 'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { 'base': 'aa', 'letters': /[\uA733]/g }, { 'base': 'ae', 'letters': /[\u00E6\u01FD\u01E3]/g }, { 'base': 'ao', 'letters': /[\uA735]/g }, { 'base': 'au', 'letters': /[\uA737]/g }, { 'base': 'av', 'letters': /[\uA739\uA73B]/g }, { 'base': 'ay', 'letters': /[\uA73D]/g }, { 'base': 'b', 'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { 'base': 'dz', 'letters': /[\u01F3\u01C6]/g }, { 'base': 'e', 'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { 'base': 'f', 'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { 'base': 'g', 'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { 'base': 'h', 'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { 'base': 'k', 'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { 'base': 'l', 'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { 'base': 'lj', 'letters': /[\u01C9]/g }, { 'base': 'm', 'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { 'base': 'n', 'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { 'base': 'nj', 'letters': /[\u01CC]/g }, { 'base': 'o', 'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { 'base': 'oi', 'letters': /[\u01A3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\uA74F]/g }, { 'base': 'p', 'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { 'base': 'q', 'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { 'base': 'r', 'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { 'base': 's', 'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { 'base': 't', 'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { 'base': 'tz', 'letters': /[\uA729]/g }, { 'base': 'u', 'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { 'base': 'vy', 'letters': /[\uA761]/g }, { 'base': 'w', 'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { 'base': 'x', 'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { 'base': 'y', 'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { 'base': 'z', 'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }]; @@ -458,10 +551,24 @@ var _Option = require('./Option'); var _Option2 = _interopRequireDefault(_Option); +var _OptionGroup = require('./OptionGroup'); + +var _OptionGroup2 = _interopRequireDefault(_OptionGroup); + var _Value = require('./Value'); var _Value2 = _interopRequireDefault(_Value); +function clone(obj) { + var copy = {}; + for (var attr in obj) { + if (obj.hasOwnProperty(attr)) { + copy[attr] = obj[attr]; + }; + } + return copy; +} + function stringifyValue(value) { if (typeof value === 'object') { return JSON.stringify(value); @@ -517,6 +624,7 @@ var Select = _react2['default'].createClass({ onOpen: _react2['default'].PropTypes.func, // fires when the menu is opened onValueClick: _react2['default'].PropTypes.func, // onClick handler for value labels: function (value, event) {} optionComponent: _react2['default'].PropTypes.func, // option component to render in dropdown + optionGroupComponent: _react2['default'].PropTypes.func, // option group component to render in dropdown optionRenderer: _react2['default'].PropTypes.func, // optionRenderer: function (option) {} options: _react2['default'].PropTypes.array, // array of options placeholder: stringOrNode, // field placeholder, displayed when there's no value @@ -560,6 +668,7 @@ var Select = _react2['default'].createClass({ noResultsText: 'No results found', onBlurResetsInput: true, optionComponent: _Option2['default'], + optionGroupComponent: _OptionGroup2['default'], placeholder: 'Select...', required: false, scrollMenuIntoView: true, @@ -581,12 +690,22 @@ var Select = _react2['default'].createClass({ }; }, + componentWillMount: function componentWillMount() { + this._flatOptions = this.flattenOptions(this.props.options); + }, + componentDidMount: function componentDidMount() { if (this.props.autofocus) { this.focus(); } }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.options !== this.props.options) { + this._flatOptions = this.flattenOptions(nextProps.options); + } + }, + componentWillUpdate: function componentWillUpdate(nextProps, nextState) { if (nextState.isOpen !== this.state.isOpen) { var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose; @@ -872,10 +991,9 @@ var Select = _react2['default'].createClass({ expandValue: function expandValue(value) { if (typeof value !== 'string' && typeof value !== 'number') return value; - var _props = this.props; - var options = _props.options; - var valueKey = _props.valueKey; + var valueKey = this.props.valueKey; + var options = this._flatOptions; if (!options) return; for (var i = 0; i < options.length; i++) { if (options[i][valueKey] === value) return options[i]; @@ -1108,84 +1226,137 @@ var Select = _react2['default'].createClass({ ); }, - filterOptions: function filterOptions(excludeOptions) { + filterOptions: function filterOptions(options, excludeOptions) { var _this3 = this; var filterValue = this.state.inputValue; - var options = this.props.options || []; if (typeof this.props.filterOptions === 'function') { return this.props.filterOptions.call(this, options, filterValue, excludeOptions); } else if (this.props.filterOptions) { - if (this.props.ignoreAccents) { - filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); - } - if (this.props.ignoreCase) { - filterValue = filterValue.toLowerCase(); - } - if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { - return i[_this3.props.valueKey]; - }); - return options.filter(function (option) { - if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; - if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); - if (!filterValue) return true; - var valueTest = String(option[_this3.props.valueKey]); - var labelTest = String(option[_this3.props.labelKey]); + var _ret = (function () { if (_this3.props.ignoreAccents) { - if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); - if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); } if (_this3.props.ignoreCase) { - if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); - if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + filterValue = filterValue.toLowerCase(); } - return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; - }); + if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { + return i[_this3.props.valueKey]; + }); + var includeOption = function includeOption(option) { + if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; + if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); + if (!filterValue) return true; + var valueTest = String(option[_this3.props.valueKey]); + var labelTest = String(option[_this3.props.labelKey]); + if (_this3.props.ignoreAccents) { + if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); + if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + } + if (_this3.props.ignoreCase) { + if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); + if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + } + return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; + }; + var filteredOptions = []; + options.forEach(function (option) { + if (_this3.isGroup(option)) { + var filteredGroup = clone(option); + filteredGroup.options = _this3.filterOptions(option.options, excludeOptions); + if (filteredGroup.options.length) { + filteredOptions.push(filteredGroup); + }; + } else if (includeOption(option)) { + filteredOptions.push(option); + }; + }); + return { + v: filteredOptions + }; + })(); + + if (typeof _ret === 'object') return _ret.v; } else { return options; } }, + isGroup: function isGroup(option) { + return option && Array.isArray(option.options); + }, + + flattenOptions: function flattenOptions(options) { + if (!options) return; + var flatOptions = []; + for (var i = 0; i < options.length; i++) { + if (this.isGroup(options[i])) { + flatOptions = flatOptions.concat(this.flattenOptions(options[i].options)); + } else { + flatOptions.push(options[i]); + } + } + return flatOptions; + }, + renderMenu: function renderMenu(options, valueArray, focusedOption) { var _this4 = this; if (options && options.length) { - var _ret = (function () { + var _ret2 = (function () { + var OptionGroup = _this4.props.optionGroupComponent; var Option = _this4.props.optionComponent; var renderLabel = _this4.props.optionRenderer || _this4.getOptionLabel; return { v: options.map(function (option, i) { - var isSelected = valueArray && valueArray.indexOf(option) > -1; - var isFocused = option === focusedOption; - var optionRef = isFocused ? 'focused' : null; - var optionClass = (0, _classnames2['default'])({ - 'Select-option': true, - 'is-selected': isSelected, - 'is-focused': isFocused, - 'is-disabled': option.disabled - }); - - return _react2['default'].createElement( - Option, - { - className: optionClass, - isDisabled: option.disabled, - isFocused: isFocused, - key: 'option-' + i + '-' + option[_this4.props.valueKey], - onSelect: _this4.selectValue, - onFocus: _this4.focusOption, - option: option, - isSelected: isSelected, - ref: optionRef - }, - renderLabel(option) - ); + if (_this4.isGroup(option)) { + var optionGroupClass = (0, _classnames2['default'])({ + 'Select-option-group': true + }); + + return _react2['default'].createElement( + OptionGroup, + { + className: optionGroupClass, + key: 'option-group-' + i, + label: renderLabel(option), + option: option + }, + _this4.renderMenu(option.options, valueArray, focusedOption) + ); + } else { + var isSelected = valueArray && valueArray.indexOf(option) > -1; + var isFocused = option === focusedOption; + var optionRef = isFocused ? 'focused' : null; + var optionClass = (0, _classnames2['default'])({ + 'Select-option': true, + 'is-selected': isSelected, + 'is-focused': isFocused, + 'is-disabled': option.disabled + }); + + return _react2['default'].createElement( + Option, + { + className: optionClass, + isDisabled: option.disabled, + isFocused: isFocused, + key: 'option-' + i + '-' + option[_this4.props.valueKey], + onSelect: _this4.selectValue, + onFocus: _this4.focusOption, + option: option, + isSelected: isSelected, + ref: optionRef + }, + renderLabel(option) + ); + } }) }; })(); - if (typeof _ret === 'object') return _ret.v; + if (typeof _ret2 === 'object') return _ret2.v; } else if (this.props.noResultsText) { return _react2['default'].createElement( 'div', @@ -1219,7 +1390,8 @@ var Select = _react2['default'].createClass({ render: function render() { var valueArray = this.getValueArray(); - var options = this._visibleOptions = this.filterOptions(this.props.multi ? valueArray : null); + var options = this.filterOptions(this.props.options || [], this.props.multi ? valueArray : null); + this._visibleOptions = this.flattenOptions(options); var isOpen = typeof this.props.isOpen === 'boolean' ? this.props.isOpen : this.state.isOpen; if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false; var focusedOption = this._focusedOption = this.getFocusableOption(valueArray[0]); @@ -1278,4 +1450,4 @@ var Select = _react2['default'].createClass({ exports['default'] = Select; module.exports = exports['default']; -},{"./Async":1,"./Dropdown":2,"./Option":3,"./Value":4,"./utils/stripDiacritics":5,"classnames":undefined,"react":undefined,"react-dom":undefined,"react-input-autosize":undefined}]},{},[]); +},{"./Async":1,"./Dropdown":2,"./Option":3,"./OptionGroup":4,"./Value":5,"./utils/stripDiacritics":6,"classnames":undefined,"react":undefined,"react-dom":undefined,"react-input-autosize":undefined}]},{},[]); diff --git a/examples/dist/example.css b/examples/dist/example.css index 891a7050..f9f9f889 100644 --- a/examples/dist/example.css +++ b/examples/dist/example.css @@ -227,6 +227,19 @@ max-height: 198px; overflow-y: auto; } +.Select-option-group-label { + box-sizing: border-box; + background-color: #fff; + color: #666666; + font-weight: bold; + cursor: default; + display: block; + padding: 8px 10px; +} +.Select-option-group-label ~ .Select-option, +.Select-option-group-label ~ .Select-option-group { + padding-left: 20px; +} .Select-option { box-sizing: border-box; background-color: #fff; diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js index 7e69cba8..29a9b448 100644 --- a/examples/dist/standalone.js +++ b/examples/dist/standalone.js @@ -170,7 +170,7 @@ var Async = _react2['default'].createClass({ module.exports = Async; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":4,"./utils/stripDiacritics":6}],2:[function(require,module,exports){ +},{"./Select":5,"./utils/stripDiacritics":7}],2:[function(require,module,exports){ (function (global){ 'use strict'; @@ -307,6 +307,101 @@ module.exports = Option; (function (global){ 'use strict'; +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); + +var _react2 = _interopRequireDefault(_react); + +var _classnames = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); + +var _classnames2 = _interopRequireDefault(_classnames); + +var OptionGroup = _react2['default'].createClass({ + displayName: 'OptionGroup', + + propTypes: { + children: _react2['default'].PropTypes.any, + className: _react2['default'].PropTypes.string, // className (based on mouse position) + label: _react2['default'].PropTypes.node, // the heading to show above the child options + option: _react2['default'].PropTypes.object.isRequired }, + + // object that is base for that option group + blockEvent: function blockEvent(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.target.tagName !== 'A' || !('href' in event.target)) { + return; + } + if (event.target.target) { + window.open(event.target.href, event.target.target); + } else { + window.location.href = event.target.href; + } + }, + + handleMouseDown: function handleMouseDown(event) { + event.preventDefault(); + event.stopPropagation(); + }, + + handleTouchEnd: function handleTouchEnd(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; + + this.handleMouseDown(event); + }, + + handleTouchMove: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + }, + + handleTouchStart: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; + }, + + render: function render() { + var option = this.props.option; + + var className = (0, _classnames2['default'])(this.props.className, option.className); + + return option.disabled ? _react2['default'].createElement( + 'div', + { className: className, + onMouseDown: this.blockEvent, + onClick: this.blockEvent }, + this.props.children + ) : _react2['default'].createElement( + 'div', + { className: className, + style: option.style, + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseMove: this.handleMouseMove, + onTouchStart: this.handleTouchStart, + onTouchMove: this.handleTouchMove, + onTouchEnd: this.handleTouchEnd, + title: option.title }, + _react2['default'].createElement( + 'div', + { className: 'Select-option-group-label' }, + this.props.label + ), + this.props.children + ); + } +}); + +module.exports = OptionGroup; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) +},{}],5:[function(require,module,exports){ +(function (global){ +'use strict'; + Object.defineProperty(exports, '__esModule', { value: true }); @@ -347,10 +442,24 @@ var _Option = require('./Option'); var _Option2 = _interopRequireDefault(_Option); +var _OptionGroup = require('./OptionGroup'); + +var _OptionGroup2 = _interopRequireDefault(_OptionGroup); + var _Value = require('./Value'); var _Value2 = _interopRequireDefault(_Value); +function clone(obj) { + var copy = {}; + for (var attr in obj) { + if (obj.hasOwnProperty(attr)) { + copy[attr] = obj[attr]; + }; + } + return copy; +} + function stringifyValue(value) { if (typeof value === 'object') { return JSON.stringify(value); @@ -406,6 +515,7 @@ var Select = _react2['default'].createClass({ onOpen: _react2['default'].PropTypes.func, // fires when the menu is opened onValueClick: _react2['default'].PropTypes.func, // onClick handler for value labels: function (value, event) {} optionComponent: _react2['default'].PropTypes.func, // option component to render in dropdown + optionGroupComponent: _react2['default'].PropTypes.func, // option group component to render in dropdown optionRenderer: _react2['default'].PropTypes.func, // optionRenderer: function (option) {} options: _react2['default'].PropTypes.array, // array of options placeholder: stringOrNode, // field placeholder, displayed when there's no value @@ -449,6 +559,7 @@ var Select = _react2['default'].createClass({ noResultsText: 'No results found', onBlurResetsInput: true, optionComponent: _Option2['default'], + optionGroupComponent: _OptionGroup2['default'], placeholder: 'Select...', required: false, scrollMenuIntoView: true, @@ -470,12 +581,22 @@ var Select = _react2['default'].createClass({ }; }, + componentWillMount: function componentWillMount() { + this._flatOptions = this.flattenOptions(this.props.options); + }, + componentDidMount: function componentDidMount() { if (this.props.autofocus) { this.focus(); } }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.options !== this.props.options) { + this._flatOptions = this.flattenOptions(nextProps.options); + } + }, + componentWillUpdate: function componentWillUpdate(nextProps, nextState) { if (nextState.isOpen !== this.state.isOpen) { var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose; @@ -761,10 +882,9 @@ var Select = _react2['default'].createClass({ expandValue: function expandValue(value) { if (typeof value !== 'string' && typeof value !== 'number') return value; - var _props = this.props; - var options = _props.options; - var valueKey = _props.valueKey; + var valueKey = this.props.valueKey; + var options = this._flatOptions; if (!options) return; for (var i = 0; i < options.length; i++) { if (options[i][valueKey] === value) return options[i]; @@ -997,84 +1117,137 @@ var Select = _react2['default'].createClass({ ); }, - filterOptions: function filterOptions(excludeOptions) { + filterOptions: function filterOptions(options, excludeOptions) { var _this3 = this; var filterValue = this.state.inputValue; - var options = this.props.options || []; if (typeof this.props.filterOptions === 'function') { return this.props.filterOptions.call(this, options, filterValue, excludeOptions); } else if (this.props.filterOptions) { - if (this.props.ignoreAccents) { - filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); - } - if (this.props.ignoreCase) { - filterValue = filterValue.toLowerCase(); - } - if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { - return i[_this3.props.valueKey]; - }); - return options.filter(function (option) { - if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; - if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); - if (!filterValue) return true; - var valueTest = String(option[_this3.props.valueKey]); - var labelTest = String(option[_this3.props.labelKey]); + var _ret = (function () { if (_this3.props.ignoreAccents) { - if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); - if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + filterValue = (0, _utilsStripDiacritics2['default'])(filterValue); } if (_this3.props.ignoreCase) { - if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); - if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + filterValue = filterValue.toLowerCase(); } - return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; - }); + if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { + return i[_this3.props.valueKey]; + }); + var includeOption = function includeOption(option) { + if (excludeOptions && excludeOptions.indexOf(option[_this3.props.valueKey]) > -1) return false; + if (_this3.props.filterOption) return _this3.props.filterOption.call(_this3, option, filterValue); + if (!filterValue) return true; + var valueTest = String(option[_this3.props.valueKey]); + var labelTest = String(option[_this3.props.labelKey]); + if (_this3.props.ignoreAccents) { + if (_this3.props.matchProp !== 'label') valueTest = (0, _utilsStripDiacritics2['default'])(valueTest); + if (_this3.props.matchProp !== 'value') labelTest = (0, _utilsStripDiacritics2['default'])(labelTest); + } + if (_this3.props.ignoreCase) { + if (_this3.props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); + if (_this3.props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + } + return _this3.props.matchPos === 'start' ? _this3.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || _this3.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : _this3.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || _this3.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; + }; + var filteredOptions = []; + options.forEach(function (option) { + if (_this3.isGroup(option)) { + var filteredGroup = clone(option); + filteredGroup.options = _this3.filterOptions(option.options, excludeOptions); + if (filteredGroup.options.length) { + filteredOptions.push(filteredGroup); + }; + } else if (includeOption(option)) { + filteredOptions.push(option); + }; + }); + return { + v: filteredOptions + }; + })(); + + if (typeof _ret === 'object') return _ret.v; } else { return options; } }, + isGroup: function isGroup(option) { + return option && Array.isArray(option.options); + }, + + flattenOptions: function flattenOptions(options) { + if (!options) return; + var flatOptions = []; + for (var i = 0; i < options.length; i++) { + if (this.isGroup(options[i])) { + flatOptions = flatOptions.concat(this.flattenOptions(options[i].options)); + } else { + flatOptions.push(options[i]); + } + } + return flatOptions; + }, + renderMenu: function renderMenu(options, valueArray, focusedOption) { var _this4 = this; if (options && options.length) { - var _ret = (function () { + var _ret2 = (function () { + var OptionGroup = _this4.props.optionGroupComponent; var Option = _this4.props.optionComponent; var renderLabel = _this4.props.optionRenderer || _this4.getOptionLabel; return { v: options.map(function (option, i) { - var isSelected = valueArray && valueArray.indexOf(option) > -1; - var isFocused = option === focusedOption; - var optionRef = isFocused ? 'focused' : null; - var optionClass = (0, _classnames2['default'])({ - 'Select-option': true, - 'is-selected': isSelected, - 'is-focused': isFocused, - 'is-disabled': option.disabled - }); - - return _react2['default'].createElement( - Option, - { - className: optionClass, - isDisabled: option.disabled, - isFocused: isFocused, - key: 'option-' + i + '-' + option[_this4.props.valueKey], - onSelect: _this4.selectValue, - onFocus: _this4.focusOption, - option: option, - isSelected: isSelected, - ref: optionRef - }, - renderLabel(option) - ); + if (_this4.isGroup(option)) { + var optionGroupClass = (0, _classnames2['default'])({ + 'Select-option-group': true + }); + + return _react2['default'].createElement( + OptionGroup, + { + className: optionGroupClass, + key: 'option-group-' + i, + label: renderLabel(option), + option: option + }, + _this4.renderMenu(option.options, valueArray, focusedOption) + ); + } else { + var isSelected = valueArray && valueArray.indexOf(option) > -1; + var isFocused = option === focusedOption; + var optionRef = isFocused ? 'focused' : null; + var optionClass = (0, _classnames2['default'])({ + 'Select-option': true, + 'is-selected': isSelected, + 'is-focused': isFocused, + 'is-disabled': option.disabled + }); + + return _react2['default'].createElement( + Option, + { + className: optionClass, + isDisabled: option.disabled, + isFocused: isFocused, + key: 'option-' + i + '-' + option[_this4.props.valueKey], + onSelect: _this4.selectValue, + onFocus: _this4.focusOption, + option: option, + isSelected: isSelected, + ref: optionRef + }, + renderLabel(option) + ); + } }) }; })(); - if (typeof _ret === 'object') return _ret.v; + if (typeof _ret2 === 'object') return _ret2.v; } else if (this.props.noResultsText) { return _react2['default'].createElement( 'div', @@ -1108,7 +1281,8 @@ var Select = _react2['default'].createClass({ render: function render() { var valueArray = this.getValueArray(); - var options = this._visibleOptions = this.filterOptions(this.props.multi ? valueArray : null); + var options = this.filterOptions(this.props.options || [], this.props.multi ? valueArray : null); + this._visibleOptions = this.flattenOptions(options); var isOpen = typeof this.props.isOpen === 'boolean' ? this.props.isOpen : this.state.isOpen; if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false; var focusedOption = this._focusedOption = this.getFocusableOption(valueArray[0]); @@ -1168,7 +1342,7 @@ exports['default'] = Select; module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Async":1,"./Dropdown":2,"./Option":3,"./Value":5,"./utils/stripDiacritics":6}],5:[function(require,module,exports){ +},{"./Async":1,"./Dropdown":2,"./Option":3,"./OptionGroup":4,"./Value":6,"./utils/stripDiacritics":7}],6:[function(require,module,exports){ (function (global){ 'use strict'; @@ -1276,7 +1450,7 @@ var Value = _react2['default'].createClass({ module.exports = Value; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{}],6:[function(require,module,exports){ +},{}],7:[function(require,module,exports){ 'use strict'; var map = [{ 'base': 'A', 'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { 'base': 'AA', 'letters': /[\uA732]/g }, { 'base': 'AE', 'letters': /[\u00C6\u01FC\u01E2]/g }, { 'base': 'AO', 'letters': /[\uA734]/g }, { 'base': 'AU', 'letters': /[\uA736]/g }, { 'base': 'AV', 'letters': /[\uA738\uA73A]/g }, { 'base': 'AY', 'letters': /[\uA73C]/g }, { 'base': 'B', 'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { 'base': 'C', 'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { 'base': 'D', 'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { 'base': 'DZ', 'letters': /[\u01F1\u01C4]/g }, { 'base': 'Dz', 'letters': /[\u01F2\u01C5]/g }, { 'base': 'E', 'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { 'base': 'F', 'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { 'base': 'G', 'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { 'base': 'H', 'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { 'base': 'I', 'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { 'base': 'J', 'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { 'base': 'K', 'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { 'base': 'L', 'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { 'base': 'LJ', 'letters': /[\u01C7]/g }, { 'base': 'Lj', 'letters': /[\u01C8]/g }, { 'base': 'M', 'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { 'base': 'N', 'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { 'base': 'NJ', 'letters': /[\u01CA]/g }, { 'base': 'Nj', 'letters': /[\u01CB]/g }, { 'base': 'O', 'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { 'base': 'OI', 'letters': /[\u01A2]/g }, { 'base': 'OO', 'letters': /[\uA74E]/g }, { 'base': 'OU', 'letters': /[\u0222]/g }, { 'base': 'P', 'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { 'base': 'Q', 'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { 'base': 'R', 'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { 'base': 'S', 'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { 'base': 'T', 'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { 'base': 'TZ', 'letters': /[\uA728]/g }, { 'base': 'U', 'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { 'base': 'V', 'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { 'base': 'VY', 'letters': /[\uA760]/g }, { 'base': 'W', 'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { 'base': 'X', 'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { 'base': 'Y', 'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { 'base': 'Z', 'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { 'base': 'a', 'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { 'base': 'aa', 'letters': /[\uA733]/g }, { 'base': 'ae', 'letters': /[\u00E6\u01FD\u01E3]/g }, { 'base': 'ao', 'letters': /[\uA735]/g }, { 'base': 'au', 'letters': /[\uA737]/g }, { 'base': 'av', 'letters': /[\uA739\uA73B]/g }, { 'base': 'ay', 'letters': /[\uA73D]/g }, { 'base': 'b', 'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { 'base': 'dz', 'letters': /[\u01F3\u01C6]/g }, { 'base': 'e', 'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { 'base': 'f', 'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { 'base': 'g', 'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { 'base': 'h', 'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { 'base': 'k', 'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { 'base': 'l', 'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { 'base': 'lj', 'letters': /[\u01C9]/g }, { 'base': 'm', 'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { 'base': 'n', 'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { 'base': 'nj', 'letters': /[\u01CC]/g }, { 'base': 'o', 'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { 'base': 'oi', 'letters': /[\u01A3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\uA74F]/g }, { 'base': 'p', 'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { 'base': 'q', 'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { 'base': 'r', 'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { 'base': 's', 'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { 'base': 't', 'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { 'base': 'tz', 'letters': /[\uA729]/g }, { 'base': 'u', 'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { 'base': 'vy', 'letters': /[\uA761]/g }, { 'base': 'w', 'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { 'base': 'x', 'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { 'base': 'y', 'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { 'base': 'z', 'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }]; @@ -1288,5 +1462,5 @@ module.exports = function stripDiacritics(str) { return str; }; -},{}]},{},[4])(4) +},{}]},{},[5])(5) }); \ No newline at end of file diff --git a/examples/src/app.js b/examples/src/app.js index 5eda595d..e79cc308 100644 --- a/examples/src/app.js +++ b/examples/src/app.js @@ -7,6 +7,7 @@ import Select from 'react-select-plus'; import Contributors from './components/Contributors'; import CustomComponents from './components/CustomComponents'; import CustomRender from './components/CustomRender'; +import GroupedOptionsField from './components/GroupedOptionsField'; import Multiselect from './components/Multiselect'; import NumericSelect from './components/NumericSelect'; import States from './components/States'; @@ -17,6 +18,7 @@ ReactDOM.render( + {/* diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js new file mode 100644 index 00000000..4ff1ef9f --- /dev/null +++ b/examples/src/components/GroupedOptionsField.js @@ -0,0 +1,78 @@ +import React from 'react'; +import Select from 'react-select-plus'; + +var ops = [{ + label: 'Black', + value: 'black', +}, { + label: 'Primary Colors', + options: [{ + label: 'Yellow', + value: 'yellow' + }, { + label: 'Red', + value: 'red' + }, { + label: 'Blue', + value: 'blue' + }] +}, { + label: 'Secondary Colors', + options: [{ + label: 'Orange', + value: 'orange' + }, { + label: 'Purple', + options: [{ + label: 'Light Purple', + value: 'light_purple' + }, { + label: 'Medium Purple', + value: 'medium_purple' + }, { + label: 'Dark Purple', + value: 'dark_purple' + }] + }, { + label: 'Green', + value: 'green' + }] +}, { + label: 'White', + value: 'white', +}]; + +var GroupedOptionsField = React.createClass({ + displayName: 'GroupedOptionsField', + propTypes: { + delimiter: React.PropTypes.string, + label: React.PropTypes.string, + multi: React.PropTypes.bool, + }, + + getInitialState () { + return { + value: null, + }; + }, + + onChange(value) { + this.setState({ value }); + console.log('Option Groups Select value changed to', value); + }, + + render () { + return ( +
+

{this.props.label}

+