UNPKG

89.1 kBJavaScriptView Raw
1import AutosizeInput from 'react-input-autosize';
2import classNames from 'classnames';
3import PropTypes from 'prop-types';
4import React, { Component } from 'react';
5import { findDOMNode } from 'react-dom';
6
7var arrowRenderer = function arrowRenderer(_ref) {
8 var onMouseDown = _ref.onMouseDown;
9
10 return React.createElement('span', {
11 className: 'Select-arrow',
12 onMouseDown: onMouseDown
13 });
14};
15
16arrowRenderer.propTypes = {
17 onMouseDown: PropTypes.func
18};
19
20var clearRenderer = function clearRenderer() {
21 return React.createElement('span', {
22 className: 'Select-clear',
23 dangerouslySetInnerHTML: { __html: '×' }
24 });
25};
26
27var 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 }];
28
29var stripDiacritics = function stripDiacritics(str) {
30 for (var i = 0; i < map.length; i++) {
31 str = str.replace(map[i].letters, map[i].base);
32 }
33 return str;
34};
35
36var trim = function trim(str) {
37 return str.replace(/^\s+|\s+$/g, '');
38};
39
40var isValid = function isValid(value) {
41 return typeof value !== 'undefined' && value !== null && value !== '';
42};
43
44var filterOptions = function filterOptions(options, filterValue, excludeOptions, props) {
45 if (props.ignoreAccents) {
46 filterValue = stripDiacritics(filterValue);
47 }
48
49 if (props.ignoreCase) {
50 filterValue = filterValue.toLowerCase();
51 }
52
53 if (props.trimFilter) {
54 filterValue = trim(filterValue);
55 }
56
57 if (excludeOptions) excludeOptions = excludeOptions.map(function (i) {
58 return i[props.valueKey];
59 });
60
61 return options.filter(function (option) {
62 if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1) return false;
63 if (props.filterOption) return props.filterOption.call(undefined, option, filterValue);
64 if (!filterValue) return true;
65
66 var value = option[props.valueKey];
67 var label = option[props.labelKey];
68 var hasValue = isValid(value);
69 var hasLabel = isValid(label);
70
71 if (!hasValue && !hasLabel) {
72 return false;
73 }
74
75 var valueTest = hasValue ? String(value) : null;
76 var labelTest = hasLabel ? String(label) : null;
77
78 if (props.ignoreAccents) {
79 if (valueTest && props.matchProp !== 'label') valueTest = stripDiacritics(valueTest);
80 if (labelTest && props.matchProp !== 'value') labelTest = stripDiacritics(labelTest);
81 }
82
83 if (props.ignoreCase) {
84 if (valueTest && props.matchProp !== 'label') valueTest = valueTest.toLowerCase();
85 if (labelTest && props.matchProp !== 'value') labelTest = labelTest.toLowerCase();
86 }
87
88 return props.matchPos === 'start' ? valueTest && props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || labelTest && props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : valueTest && props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || labelTest && props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
89 });
90};
91
92var menuRenderer = function menuRenderer(_ref) {
93 var focusedOption = _ref.focusedOption,
94 focusOption = _ref.focusOption,
95 inputValue = _ref.inputValue,
96 instancePrefix = _ref.instancePrefix,
97 onFocus = _ref.onFocus,
98 onOptionRef = _ref.onOptionRef,
99 onSelect = _ref.onSelect,
100 optionClassName = _ref.optionClassName,
101 optionComponent = _ref.optionComponent,
102 optionRenderer = _ref.optionRenderer,
103 options = _ref.options,
104 removeValue = _ref.removeValue,
105 selectValue = _ref.selectValue,
106 valueArray = _ref.valueArray,
107 valueKey = _ref.valueKey;
108
109 var Option = optionComponent;
110
111 return options.map(function (option, i) {
112 var isSelected = valueArray && valueArray.some(function (x) {
113 return x[valueKey] === option[valueKey];
114 });
115 var isFocused = option === focusedOption;
116 var optionClass = classNames(optionClassName, {
117 'Select-option': true,
118 'is-selected': isSelected,
119 'is-focused': isFocused,
120 'is-disabled': option.disabled
121 });
122
123 return React.createElement(
124 Option,
125 {
126 className: optionClass,
127 focusOption: focusOption,
128 inputValue: inputValue,
129 instancePrefix: instancePrefix,
130 isDisabled: option.disabled,
131 isFocused: isFocused,
132 isSelected: isSelected,
133 key: 'option-' + i + '-' + option[valueKey],
134 onFocus: onFocus,
135 onSelect: onSelect,
136 option: option,
137 optionIndex: i,
138 ref: function ref(_ref2) {
139 onOptionRef(_ref2, isFocused);
140 },
141 removeValue: removeValue,
142 selectValue: selectValue
143 },
144 optionRenderer(option, i, inputValue)
145 );
146 });
147};
148
149menuRenderer.propTypes = {
150 focusOption: PropTypes.func,
151 focusedOption: PropTypes.object,
152 inputValue: PropTypes.string,
153 instancePrefix: PropTypes.string,
154 onFocus: PropTypes.func,
155 onOptionRef: PropTypes.func,
156 onSelect: PropTypes.func,
157 optionClassName: PropTypes.string,
158 optionComponent: PropTypes.func,
159 optionRenderer: PropTypes.func,
160 options: PropTypes.array,
161 removeValue: PropTypes.func,
162 selectValue: PropTypes.func,
163 valueArray: PropTypes.array,
164 valueKey: PropTypes.string
165};
166
167var blockEvent = (function (event) {
168 event.preventDefault();
169 event.stopPropagation();
170 if (event.target.tagName !== 'A' || !('href' in event.target)) {
171 return;
172 }
173 if (event.target.target) {
174 window.open(event.target.href, event.target.target);
175 } else {
176 window.location.href = event.target.href;
177 }
178});
179
180var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
181 return typeof obj;
182} : function (obj) {
183 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
184};
185
186
187
188
189
190var asyncGenerator = function () {
191 function AwaitValue(value) {
192 this.value = value;
193 }
194
195 function AsyncGenerator(gen) {
196 var front, back;
197
198 function send(key, arg) {
199 return new Promise(function (resolve, reject) {
200 var request = {
201 key: key,
202 arg: arg,
203 resolve: resolve,
204 reject: reject,
205 next: null
206 };
207
208 if (back) {
209 back = back.next = request;
210 } else {
211 front = back = request;
212 resume(key, arg);
213 }
214 });
215 }
216
217 function resume(key, arg) {
218 try {
219 var result = gen[key](arg);
220 var value = result.value;
221
222 if (value instanceof AwaitValue) {
223 Promise.resolve(value.value).then(function (arg) {
224 resume("next", arg);
225 }, function (arg) {
226 resume("throw", arg);
227 });
228 } else {
229 settle(result.done ? "return" : "normal", result.value);
230 }
231 } catch (err) {
232 settle("throw", err);
233 }
234 }
235
236 function settle(type, value) {
237 switch (type) {
238 case "return":
239 front.resolve({
240 value: value,
241 done: true
242 });
243 break;
244
245 case "throw":
246 front.reject(value);
247 break;
248
249 default:
250 front.resolve({
251 value: value,
252 done: false
253 });
254 break;
255 }
256
257 front = front.next;
258
259 if (front) {
260 resume(front.key, front.arg);
261 } else {
262 back = null;
263 }
264 }
265
266 this._invoke = send;
267
268 if (typeof gen.return !== "function") {
269 this.return = undefined;
270 }
271 }
272
273 if (typeof Symbol === "function" && Symbol.asyncIterator) {
274 AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
275 return this;
276 };
277 }
278
279 AsyncGenerator.prototype.next = function (arg) {
280 return this._invoke("next", arg);
281 };
282
283 AsyncGenerator.prototype.throw = function (arg) {
284 return this._invoke("throw", arg);
285 };
286
287 AsyncGenerator.prototype.return = function (arg) {
288 return this._invoke("return", arg);
289 };
290
291 return {
292 wrap: function (fn) {
293 return function () {
294 return new AsyncGenerator(fn.apply(this, arguments));
295 };
296 },
297 await: function (value) {
298 return new AwaitValue(value);
299 }
300 };
301}();
302
303
304
305
306
307var classCallCheck = function (instance, Constructor) {
308 if (!(instance instanceof Constructor)) {
309 throw new TypeError("Cannot call a class as a function");
310 }
311};
312
313var createClass = function () {
314 function defineProperties(target, props) {
315 for (var i = 0; i < props.length; i++) {
316 var descriptor = props[i];
317 descriptor.enumerable = descriptor.enumerable || false;
318 descriptor.configurable = true;
319 if ("value" in descriptor) descriptor.writable = true;
320 Object.defineProperty(target, descriptor.key, descriptor);
321 }
322 }
323
324 return function (Constructor, protoProps, staticProps) {
325 if (protoProps) defineProperties(Constructor.prototype, protoProps);
326 if (staticProps) defineProperties(Constructor, staticProps);
327 return Constructor;
328 };
329}();
330
331
332
333
334
335var defineProperty = function (obj, key, value) {
336 if (key in obj) {
337 Object.defineProperty(obj, key, {
338 value: value,
339 enumerable: true,
340 configurable: true,
341 writable: true
342 });
343 } else {
344 obj[key] = value;
345 }
346
347 return obj;
348};
349
350var _extends = Object.assign || function (target) {
351 for (var i = 1; i < arguments.length; i++) {
352 var source = arguments[i];
353
354 for (var key in source) {
355 if (Object.prototype.hasOwnProperty.call(source, key)) {
356 target[key] = source[key];
357 }
358 }
359 }
360
361 return target;
362};
363
364
365
366var inherits = function (subClass, superClass) {
367 if (typeof superClass !== "function" && superClass !== null) {
368 throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
369 }
370
371 subClass.prototype = Object.create(superClass && superClass.prototype, {
372 constructor: {
373 value: subClass,
374 enumerable: false,
375 writable: true,
376 configurable: true
377 }
378 });
379 if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
380};
381
382
383
384
385
386
387
388
389
390var objectWithoutProperties = function (obj, keys) {
391 var target = {};
392
393 for (var i in obj) {
394 if (keys.indexOf(i) >= 0) continue;
395 if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
396 target[i] = obj[i];
397 }
398
399 return target;
400};
401
402var possibleConstructorReturn = function (self, call) {
403 if (!self) {
404 throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
405 }
406
407 return call && (typeof call === "object" || typeof call === "function") ? call : self;
408};
409
410var Option = function (_React$Component) {
411 inherits(Option, _React$Component);
412
413 function Option(props) {
414 classCallCheck(this, Option);
415
416 var _this = possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).call(this, props));
417
418 _this.handleMouseDown = _this.handleMouseDown.bind(_this);
419 _this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
420 _this.handleMouseMove = _this.handleMouseMove.bind(_this);
421 _this.handleTouchStart = _this.handleTouchStart.bind(_this);
422 _this.handleTouchEnd = _this.handleTouchEnd.bind(_this);
423 _this.handleTouchMove = _this.handleTouchMove.bind(_this);
424 _this.onFocus = _this.onFocus.bind(_this);
425 return _this;
426 }
427
428 createClass(Option, [{
429 key: 'handleMouseDown',
430 value: function handleMouseDown(event) {
431 event.preventDefault();
432 event.stopPropagation();
433 this.props.onSelect(this.props.option, event);
434 }
435 }, {
436 key: 'handleMouseEnter',
437 value: function handleMouseEnter(event) {
438 this.onFocus(event);
439 }
440 }, {
441 key: 'handleMouseMove',
442 value: function handleMouseMove(event) {
443 this.onFocus(event);
444 }
445 }, {
446 key: 'handleTouchEnd',
447 value: function handleTouchEnd(event) {
448 // Check if the view is being dragged, In this case
449 // we don't want to fire the click event (because the user only wants to scroll)
450 if (this.dragging) return;
451
452 this.handleMouseDown(event);
453 }
454 }, {
455 key: 'handleTouchMove',
456 value: function handleTouchMove() {
457 // Set a flag that the view is being dragged
458 this.dragging = true;
459 }
460 }, {
461 key: 'handleTouchStart',
462 value: function handleTouchStart() {
463 // Set a flag that the view is not being dragged
464 this.dragging = false;
465 }
466 }, {
467 key: 'onFocus',
468 value: function onFocus(event) {
469 if (!this.props.isFocused) {
470 this.props.onFocus(this.props.option, event);
471 }
472 }
473 }, {
474 key: 'render',
475 value: function render() {
476 var _props = this.props,
477 option = _props.option,
478 instancePrefix = _props.instancePrefix,
479 optionIndex = _props.optionIndex;
480
481 var className = classNames(this.props.className, option.className);
482
483 return option.disabled ? React.createElement(
484 'div',
485 { className: className,
486 onMouseDown: blockEvent,
487 onClick: blockEvent },
488 this.props.children
489 ) : React.createElement(
490 'div',
491 { className: className,
492 style: option.style,
493 role: 'option',
494 'aria-label': option.label,
495 onMouseDown: this.handleMouseDown,
496 onMouseEnter: this.handleMouseEnter,
497 onMouseMove: this.handleMouseMove,
498 onTouchStart: this.handleTouchStart,
499 onTouchMove: this.handleTouchMove,
500 onTouchEnd: this.handleTouchEnd,
501 id: instancePrefix + '-option-' + optionIndex,
502 title: option.title },
503 this.props.children
504 );
505 }
506 }]);
507 return Option;
508}(React.Component);
509
510Option.propTypes = {
511 children: PropTypes.node,
512 className: PropTypes.string, // className (based on mouse position)
513 instancePrefix: PropTypes.string.isRequired, // unique prefix for the ids (used for aria)
514 isDisabled: PropTypes.bool, // the option is disabled
515 isFocused: PropTypes.bool, // the option is focused
516 isSelected: PropTypes.bool, // the option is selected
517 onFocus: PropTypes.func, // method to handle mouseEnter on option element
518 onSelect: PropTypes.func, // method to handle click on option element
519 onUnfocus: PropTypes.func, // method to handle mouseLeave on option element
520 option: PropTypes.object.isRequired, // object that is base for that option
521 optionIndex: PropTypes.number // index of the option, used to generate unique ids for aria
522};
523
524var Value = function (_React$Component) {
525 inherits(Value, _React$Component);
526
527 function Value(props) {
528 classCallCheck(this, Value);
529
530 var _this = possibleConstructorReturn(this, (Value.__proto__ || Object.getPrototypeOf(Value)).call(this, props));
531
532 _this.handleMouseDown = _this.handleMouseDown.bind(_this);
533 _this.onRemove = _this.onRemove.bind(_this);
534 _this.handleTouchEndRemove = _this.handleTouchEndRemove.bind(_this);
535 _this.handleTouchMove = _this.handleTouchMove.bind(_this);
536 _this.handleTouchStart = _this.handleTouchStart.bind(_this);
537 return _this;
538 }
539
540 createClass(Value, [{
541 key: 'handleMouseDown',
542 value: function handleMouseDown(event) {
543 if (event.type === 'mousedown' && event.button !== 0) {
544 return;
545 }
546 if (this.props.onClick) {
547 event.stopPropagation();
548 this.props.onClick(this.props.value, event);
549 return;
550 }
551 if (this.props.value.href) {
552 event.stopPropagation();
553 }
554 }
555 }, {
556 key: 'onRemove',
557 value: function onRemove(event) {
558 event.preventDefault();
559 event.stopPropagation();
560 this.props.onRemove(this.props.value);
561 }
562 }, {
563 key: 'handleTouchEndRemove',
564 value: function handleTouchEndRemove(event) {
565 // Check if the view is being dragged, In this case
566 // we don't want to fire the click event (because the user only wants to scroll)
567 if (this.dragging) return;
568
569 // Fire the mouse events
570 this.onRemove(event);
571 }
572 }, {
573 key: 'handleTouchMove',
574 value: function handleTouchMove() {
575 // Set a flag that the view is being dragged
576 this.dragging = true;
577 }
578 }, {
579 key: 'handleTouchStart',
580 value: function handleTouchStart() {
581 // Set a flag that the view is not being dragged
582 this.dragging = false;
583 }
584 }, {
585 key: 'renderRemoveIcon',
586 value: function renderRemoveIcon() {
587 if (this.props.disabled || !this.props.onRemove) return;
588 return React.createElement(
589 'span',
590 { className: 'Select-value-icon',
591 'aria-hidden': 'true',
592 onMouseDown: this.onRemove,
593 onTouchEnd: this.handleTouchEndRemove,
594 onTouchStart: this.handleTouchStart,
595 onTouchMove: this.handleTouchMove },
596 '\xD7'
597 );
598 }
599 }, {
600 key: 'renderLabel',
601 value: function renderLabel() {
602 var className = 'Select-value-label';
603 return this.props.onClick || this.props.value.href ? React.createElement(
604 'a',
605 { className: className, href: this.props.value.href, target: this.props.value.target, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown },
606 this.props.children
607 ) : React.createElement(
608 'span',
609 { className: className, role: 'option', 'aria-selected': 'true', id: this.props.id },
610 this.props.children
611 );
612 }
613 }, {
614 key: 'render',
615 value: function render() {
616 return React.createElement(
617 'div',
618 { className: classNames('Select-value', this.props.value.className),
619 style: this.props.value.style,
620 title: this.props.value.title
621 },
622 this.renderRemoveIcon(),
623 this.renderLabel()
624 );
625 }
626 }]);
627 return Value;
628}(React.Component);
629
630Value.propTypes = {
631 children: PropTypes.node,
632 disabled: PropTypes.bool, // disabled prop passed to ReactSelect
633 id: PropTypes.string, // Unique id for the value - used for aria
634 onClick: PropTypes.func, // method to handle click on value label
635 onRemove: PropTypes.func, // method to handle removal of the value
636 value: PropTypes.object.isRequired // the option object for this value
637};
638
639/*!
640 Copyright (c) 2018 Jed Watson.
641 Licensed under the MIT License (MIT), see
642 http://jedwatson.github.io/react-select
643*/
644var stringifyValue = function stringifyValue(value) {
645 return typeof value === 'string' ? value : value !== null && JSON.stringify(value) || '';
646};
647
648var stringOrNode = PropTypes.oneOfType([PropTypes.string, PropTypes.node]);
649var stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
650
651var instanceId = 1;
652
653var shouldShowValue = function shouldShowValue(state, props) {
654 var inputValue = state.inputValue,
655 isPseudoFocused = state.isPseudoFocused,
656 isFocused = state.isFocused;
657 var onSelectResetsInput = props.onSelectResetsInput;
658
659
660 if (!inputValue) return true;
661
662 if (!onSelectResetsInput) {
663 return !(!isFocused && isPseudoFocused || isFocused && !isPseudoFocused);
664 }
665
666 return false;
667};
668
669var shouldShowPlaceholder = function shouldShowPlaceholder(state, props, isOpen) {
670 var inputValue = state.inputValue,
671 isPseudoFocused = state.isPseudoFocused,
672 isFocused = state.isFocused;
673 var onSelectResetsInput = props.onSelectResetsInput;
674
675
676 return !inputValue || !onSelectResetsInput && !isOpen && !isPseudoFocused && !isFocused;
677};
678
679/**
680 * Retrieve a value from the given options and valueKey
681 * @param {String|Number|Array} value - the selected value(s)
682 * @param {Object} props - the Select component's props (or nextProps)
683 */
684var expandValue = function expandValue(value, props) {
685 var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value);
686 if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value;
687 var options = props.options,
688 valueKey = props.valueKey;
689
690 if (!options) return;
691 for (var i = 0; i < options.length; i++) {
692 if (String(options[i][valueKey]) === String(value)) return options[i];
693 }
694};
695
696var handleRequired = function handleRequired(value, multi) {
697 if (!value) return true;
698 return multi ? value.length === 0 : Object.keys(value).length === 0;
699};
700
701var Select$1 = function (_React$Component) {
702 inherits(Select, _React$Component);
703
704 function Select(props) {
705 classCallCheck(this, Select);
706
707 var _this = possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
708
709 ['clearValue', 'focusOption', 'getOptionLabel', 'handleInputBlur', 'handleInputChange', 'handleInputFocus', 'handleInputValueChange', 'handleKeyDown', 'handleMenuScroll', 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', 'handleTouchEnd', 'handleTouchEndClearValue', 'handleTouchMove', 'handleTouchOutside', 'handleTouchStart', 'handleValueClick', 'onOptionRef', 'removeValue', 'selectValue'].forEach(function (fn) {
710 return _this[fn] = _this[fn].bind(_this);
711 });
712
713 _this.state = {
714 inputValue: '',
715 isFocused: false,
716 isOpen: false,
717 isPseudoFocused: false,
718 required: false
719 };
720 return _this;
721 }
722
723 createClass(Select, [{
724 key: 'componentWillMount',
725 value: function componentWillMount() {
726 this._instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId) + '-';
727 var valueArray = this.getValueArray(this.props.value);
728
729 if (this.props.required) {
730 this.setState({
731 required: handleRequired(valueArray[0], this.props.multi)
732 });
733 }
734 }
735 }, {
736 key: 'componentDidMount',
737 value: function componentDidMount() {
738 if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') {
739 console.warn('Warning: The autofocus prop has changed to autoFocus, support will be removed after react-select@1.0');
740 }
741 if (this.props.autoFocus || this.props.autofocus) {
742 this.focus();
743 }
744 }
745 }, {
746 key: 'componentWillReceiveProps',
747 value: function componentWillReceiveProps(nextProps) {
748 var valueArray = this.getValueArray(nextProps.value, nextProps);
749
750 if (nextProps.required) {
751 this.setState({
752 required: handleRequired(valueArray[0], nextProps.multi)
753 });
754 } else if (this.props.required) {
755 // Used to be required but it's not any more
756 this.setState({ required: false });
757 }
758
759 if (this.state.inputValue && this.props.value !== nextProps.value && nextProps.onSelectResetsInput) {
760 this.setState({ inputValue: this.handleInputValueChange('') });
761 }
762 }
763 }, {
764 key: 'componentDidUpdate',
765 value: function componentDidUpdate(prevProps, prevState) {
766 // focus to the selected option
767 if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) {
768 var focusedOptionNode = findDOMNode(this.focused);
769 var menuNode = findDOMNode(this.menu);
770
771 var scrollTop = menuNode.scrollTop;
772 var scrollBottom = scrollTop + menuNode.offsetHeight;
773 var optionTop = focusedOptionNode.offsetTop;
774 var optionBottom = optionTop + focusedOptionNode.offsetHeight;
775
776 if (scrollTop > optionTop || scrollBottom < optionBottom) {
777 menuNode.scrollTop = focusedOptionNode.offsetTop;
778 }
779
780 // We still set hasScrolledToOption to true even if we didn't
781 // actually need to scroll, as we've still confirmed that the
782 // option is in view.
783 this.hasScrolledToOption = true;
784 } else if (!this.state.isOpen) {
785 this.hasScrolledToOption = false;
786 }
787
788 if (this._scrollToFocusedOptionOnUpdate && this.focused && this.menu) {
789 this._scrollToFocusedOptionOnUpdate = false;
790 var focusedDOM = findDOMNode(this.focused);
791 var menuDOM = findDOMNode(this.menu);
792 var focusedRect = focusedDOM.getBoundingClientRect();
793 var menuRect = menuDOM.getBoundingClientRect();
794 if (focusedRect.bottom > menuRect.bottom) {
795 menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight;
796 } else if (focusedRect.top < menuRect.top) {
797 menuDOM.scrollTop = focusedDOM.offsetTop;
798 }
799 }
800 if (this.props.scrollMenuIntoView && this.menuContainer) {
801 var menuContainerRect = this.menuContainer.getBoundingClientRect();
802 if (window.innerHeight < menuContainerRect.bottom + this.props.menuBuffer) {
803 window.scrollBy(0, menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight);
804 }
805 }
806 if (prevProps.disabled !== this.props.disabled) {
807 this.setState({ isFocused: false }); // eslint-disable-line react/no-did-update-set-state
808 this.closeMenu();
809 }
810 if (prevState.isOpen !== this.state.isOpen) {
811 this.toggleTouchOutsideEvent(this.state.isOpen);
812 var handler = this.state.isOpen ? this.props.onOpen : this.props.onClose;
813 handler && handler();
814 }
815 }
816 }, {
817 key: 'componentWillUnmount',
818 value: function componentWillUnmount() {
819 this.toggleTouchOutsideEvent(false);
820 }
821 }, {
822 key: 'toggleTouchOutsideEvent',
823 value: function toggleTouchOutsideEvent(enabled) {
824 if (enabled) {
825 if (!document.addEventListener && document.attachEvent) {
826 document.attachEvent('ontouchstart', this.handleTouchOutside);
827 } else {
828 document.addEventListener('touchstart', this.handleTouchOutside);
829 }
830 } else {
831 if (!document.removeEventListener && document.detachEvent) {
832 document.detachEvent('ontouchstart', this.handleTouchOutside);
833 } else {
834 document.removeEventListener('touchstart', this.handleTouchOutside);
835 }
836 }
837 }
838 }, {
839 key: 'handleTouchOutside',
840 value: function handleTouchOutside(event) {
841 // handle touch outside on ios to dismiss menu
842 if (this.wrapper && !this.wrapper.contains(event.target)) {
843 this.closeMenu();
844 }
845 }
846 }, {
847 key: 'focus',
848 value: function focus() {
849 if (!this.input) return;
850 this.input.focus();
851 }
852 }, {
853 key: 'blurInput',
854 value: function blurInput() {
855 if (!this.input) return;
856 this.input.blur();
857 }
858 }, {
859 key: 'handleTouchMove',
860 value: function handleTouchMove() {
861 // Set a flag that the view is being dragged
862 this.dragging = true;
863 }
864 }, {
865 key: 'handleTouchStart',
866 value: function handleTouchStart() {
867 // Set a flag that the view is not being dragged
868 this.dragging = false;
869 }
870 }, {
871 key: 'handleTouchEnd',
872 value: function handleTouchEnd(event) {
873 // Check if the view is being dragged, In this case
874 // we don't want to fire the click event (because the user only wants to scroll)
875 if (this.dragging) return;
876
877 // Fire the mouse events
878 this.handleMouseDown(event);
879 }
880 }, {
881 key: 'handleTouchEndClearValue',
882 value: function handleTouchEndClearValue(event) {
883 // Check if the view is being dragged, In this case
884 // we don't want to fire the click event (because the user only wants to scroll)
885 if (this.dragging) return;
886
887 // Clear the value
888 this.clearValue(event);
889 }
890 }, {
891 key: 'handleMouseDown',
892 value: function handleMouseDown(event) {
893 // if the event was triggered by a mousedown and not the primary
894 // button, or if the component is disabled, ignore it.
895 if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
896 return;
897 }
898
899 if (event.target.tagName === 'INPUT') {
900 if (!this.state.isFocused) {
901 this._openAfterFocus = this.props.openOnClick;
902 this.focus();
903 } else if (!this.state.isOpen) {
904 this.setState({
905 isOpen: true,
906 isPseudoFocused: false
907 });
908 }
909
910 return;
911 }
912
913 // prevent default event handlers
914 event.preventDefault();
915
916 // for the non-searchable select, toggle the menu
917 if (!this.props.searchable) {
918 // This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open.
919 this.focus();
920 return this.setState({
921 isOpen: !this.state.isOpen
922 });
923 }
924
925 if (this.state.isFocused) {
926 // On iOS, we can get into a state where we think the input is focused but it isn't really,
927 // since iOS ignores programmatic calls to input.focus() that weren't triggered by a click event.
928 // Call focus() again here to be safe.
929 this.focus();
930
931 var input = this.input;
932 var toOpen = true;
933
934 if (typeof input.getInput === 'function') {
935 // Get the actual DOM input if the ref is an <AutosizeInput /> component
936 input = input.getInput();
937 }
938
939 // clears the value so that the cursor will be at the end of input when the component re-renders
940 input.value = '';
941
942 if (this._focusAfterClear) {
943 toOpen = false;
944 this._focusAfterClear = false;
945 }
946
947 // if the input is focused, ensure the menu is open
948 this.setState({
949 isOpen: toOpen,
950 isPseudoFocused: false,
951 focusedOption: null
952 });
953 } else {
954 // otherwise, focus the input and open the menu
955 this._openAfterFocus = this.props.openOnClick;
956 this.focus();
957 this.setState({ focusedOption: null });
958 }
959 }
960 }, {
961 key: 'handleMouseDownOnArrow',
962 value: function handleMouseDownOnArrow(event) {
963 // if the event was triggered by a mousedown and not the primary
964 // button, or if the component is disabled, ignore it.
965 if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
966 return;
967 }
968
969 if (this.state.isOpen) {
970 // prevent default event handlers
971 event.stopPropagation();
972 event.preventDefault();
973 // close the menu
974 this.closeMenu();
975 } else {
976 // If the menu isn't open, let the event bubble to the main handleMouseDown
977 this.setState({
978 isOpen: true
979 });
980 }
981 }
982 }, {
983 key: 'handleMouseDownOnMenu',
984 value: function handleMouseDownOnMenu(event) {
985 // if the event was triggered by a mousedown and not the primary
986 // button, or if the component is disabled, ignore it.
987 if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
988 return;
989 }
990
991 event.stopPropagation();
992 event.preventDefault();
993
994 this._openAfterFocus = true;
995 this.focus();
996 }
997 }, {
998 key: 'closeMenu',
999 value: function closeMenu() {
1000 if (this.props.onCloseResetsInput) {
1001 this.setState({
1002 inputValue: this.handleInputValueChange(''),
1003 isOpen: false,
1004 isPseudoFocused: this.state.isFocused && !this.props.multi
1005 });
1006 } else {
1007 this.setState({
1008 isOpen: false,
1009 isPseudoFocused: this.state.isFocused && !this.props.multi
1010 });
1011 }
1012 this.hasScrolledToOption = false;
1013 }
1014 }, {
1015 key: 'handleInputFocus',
1016 value: function handleInputFocus(event) {
1017 if (this.props.disabled) return;
1018
1019 var toOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus;
1020 toOpen = this._focusAfterClear ? false : toOpen; //if focus happens after clear values, don't open dropdown yet.
1021
1022 if (this.props.onFocus) {
1023 this.props.onFocus(event);
1024 }
1025
1026 this.setState({
1027 isFocused: true,
1028 isOpen: !!toOpen
1029 });
1030
1031 this._focusAfterClear = false;
1032 this._openAfterFocus = false;
1033 }
1034 }, {
1035 key: 'handleInputBlur',
1036 value: function handleInputBlur(event) {
1037 // The check for menu.contains(activeElement) is necessary to prevent IE11's scrollbar from closing the menu in certain contexts.
1038 if (this.menu && (this.menu === document.activeElement || this.menu.contains(document.activeElement))) {
1039 this.focus();
1040 return;
1041 }
1042
1043 if (this.props.onBlur) {
1044 this.props.onBlur(event);
1045 }
1046 var onBlurredState = {
1047 isFocused: false,
1048 isOpen: false,
1049 isPseudoFocused: false
1050 };
1051 if (this.props.onBlurResetsInput) {
1052 onBlurredState.inputValue = this.handleInputValueChange('');
1053 }
1054 this.setState(onBlurredState);
1055 }
1056 }, {
1057 key: 'handleInputChange',
1058 value: function handleInputChange(event) {
1059 var newInputValue = event.target.value;
1060
1061 if (this.state.inputValue !== event.target.value) {
1062 newInputValue = this.handleInputValueChange(newInputValue);
1063 }
1064
1065 this.setState({
1066 inputValue: newInputValue,
1067 isOpen: true,
1068 isPseudoFocused: false
1069 });
1070 }
1071 }, {
1072 key: 'setInputValue',
1073 value: function setInputValue(newValue) {
1074 if (this.props.onInputChange) {
1075 var nextState = this.props.onInputChange(newValue);
1076 if (nextState != null && (typeof nextState === 'undefined' ? 'undefined' : _typeof(nextState)) !== 'object') {
1077 newValue = '' + nextState;
1078 }
1079 }
1080 this.setState({
1081 inputValue: newValue
1082 });
1083 }
1084 }, {
1085 key: 'handleInputValueChange',
1086 value: function handleInputValueChange(newValue) {
1087 if (this.props.onInputChange) {
1088 var nextState = this.props.onInputChange(newValue);
1089 // Note: != used deliberately here to catch undefined and null
1090 if (nextState != null && (typeof nextState === 'undefined' ? 'undefined' : _typeof(nextState)) !== 'object') {
1091 newValue = '' + nextState;
1092 }
1093 }
1094 return newValue;
1095 }
1096 }, {
1097 key: 'handleKeyDown',
1098 value: function handleKeyDown(event) {
1099 if (this.props.disabled) return;
1100
1101 if (typeof this.props.onInputKeyDown === 'function') {
1102 this.props.onInputKeyDown(event);
1103 if (event.defaultPrevented) {
1104 return;
1105 }
1106 }
1107
1108 switch (event.keyCode) {
1109 case 8:
1110 // backspace
1111 if (!this.state.inputValue && this.props.backspaceRemoves) {
1112 event.preventDefault();
1113 this.popValue();
1114 }
1115 break;
1116 case 9:
1117 // tab
1118 if (event.shiftKey || !this.state.isOpen || !this.props.tabSelectsValue) {
1119 break;
1120 }
1121 event.preventDefault();
1122 this.selectFocusedOption();
1123 break;
1124 case 13:
1125 // enter
1126 event.preventDefault();
1127 event.stopPropagation();
1128 if (this.state.isOpen) {
1129 this.selectFocusedOption();
1130 } else {
1131 this.focusNextOption();
1132 }
1133 break;
1134 case 27:
1135 // escape
1136 event.preventDefault();
1137 if (this.state.isOpen) {
1138 this.closeMenu();
1139 event.stopPropagation();
1140 } else if (this.props.clearable && this.props.escapeClearsValue) {
1141 this.clearValue(event);
1142 event.stopPropagation();
1143 }
1144 break;
1145 case 32:
1146 // space
1147 if (this.props.searchable) {
1148 break;
1149 }
1150 event.preventDefault();
1151 if (!this.state.isOpen) {
1152 this.focusNextOption();
1153 break;
1154 }
1155 event.stopPropagation();
1156 this.selectFocusedOption();
1157 break;
1158 case 38:
1159 // up
1160 event.preventDefault();
1161 this.focusPreviousOption();
1162 break;
1163 case 40:
1164 // down
1165 event.preventDefault();
1166 this.focusNextOption();
1167 break;
1168 case 33:
1169 // page up
1170 event.preventDefault();
1171 this.focusPageUpOption();
1172 break;
1173 case 34:
1174 // page down
1175 event.preventDefault();
1176 this.focusPageDownOption();
1177 break;
1178 case 35:
1179 // end key
1180 if (event.shiftKey) {
1181 break;
1182 }
1183 event.preventDefault();
1184 this.focusEndOption();
1185 break;
1186 case 36:
1187 // home key
1188 if (event.shiftKey) {
1189 break;
1190 }
1191 event.preventDefault();
1192 this.focusStartOption();
1193 break;
1194 case 46:
1195 // delete
1196 if (!this.state.inputValue && this.props.deleteRemoves) {
1197 event.preventDefault();
1198 this.popValue();
1199 }
1200 break;
1201 }
1202 }
1203 }, {
1204 key: 'handleValueClick',
1205 value: function handleValueClick(option, event) {
1206 if (!this.props.onValueClick) return;
1207 this.props.onValueClick(option, event);
1208 }
1209 }, {
1210 key: 'handleMenuScroll',
1211 value: function handleMenuScroll(event) {
1212 if (!this.props.onMenuScrollToBottom) return;
1213 var target = event.target;
1214
1215 if (target.scrollHeight > target.offsetHeight && target.scrollHeight - target.offsetHeight - target.scrollTop <= 0) {
1216 this.props.onMenuScrollToBottom();
1217 }
1218 }
1219 }, {
1220 key: 'getOptionLabel',
1221 value: function getOptionLabel(op) {
1222 return op[this.props.labelKey];
1223 }
1224
1225 /**
1226 * Turns a value into an array from the given options
1227 * @param {String|Number|Array} value - the value of the select input
1228 * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration
1229 * @returns {Array} the value of the select represented in an array
1230 */
1231
1232 }, {
1233 key: 'getValueArray',
1234 value: function getValueArray(value) {
1235 var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
1236
1237 /** support optionally passing in the `nextProps` so `componentWillReceiveProps` updates will function as expected */
1238 var props = (typeof nextProps === 'undefined' ? 'undefined' : _typeof(nextProps)) === 'object' ? nextProps : this.props;
1239 if (props.multi) {
1240 if (typeof value === 'string') {
1241 value = value.split(props.delimiter);
1242 }
1243 if (!Array.isArray(value)) {
1244 if (value === null || value === undefined) return [];
1245 value = [value];
1246 }
1247 return value.map(function (value) {
1248 return expandValue(value, props);
1249 }).filter(function (i) {
1250 return i;
1251 });
1252 }
1253 var expandedValue = expandValue(value, props);
1254 return expandedValue ? [expandedValue] : [];
1255 }
1256 }, {
1257 key: 'setValue',
1258 value: function setValue(value) {
1259 var _this2 = this;
1260
1261 if (this.props.autoBlur) {
1262 this.blurInput();
1263 }
1264 if (this.props.required) {
1265 var required = handleRequired(value, this.props.multi);
1266 this.setState({ required: required });
1267 }
1268 if (this.props.simpleValue && value) {
1269 value = this.props.multi ? value.map(function (i) {
1270 return i[_this2.props.valueKey];
1271 }).join(this.props.delimiter) : value[this.props.valueKey];
1272 }
1273 if (this.props.onChange) {
1274 this.props.onChange(value);
1275 }
1276 }
1277 }, {
1278 key: 'selectValue',
1279 value: function selectValue(value) {
1280 var _this3 = this;
1281
1282 // NOTE: we actually add/set the value in a callback to make sure the
1283 // input value is empty to avoid styling issues in Chrome
1284 if (this.props.closeOnSelect) {
1285 this.hasScrolledToOption = false;
1286 }
1287 var updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue;
1288 if (this.props.multi) {
1289 this.setState({
1290 focusedIndex: null,
1291 inputValue: this.handleInputValueChange(updatedValue),
1292 isOpen: !this.props.closeOnSelect
1293 }, function () {
1294 var valueArray = _this3.getValueArray(_this3.props.value);
1295 if (valueArray.some(function (i) {
1296 return i[_this3.props.valueKey] === value[_this3.props.valueKey];
1297 })) {
1298 _this3.removeValue(value);
1299 } else {
1300 _this3.addValue(value);
1301 }
1302 });
1303 } else {
1304 this.setState({
1305 inputValue: this.handleInputValueChange(updatedValue),
1306 isOpen: !this.props.closeOnSelect,
1307 isPseudoFocused: this.state.isFocused
1308 }, function () {
1309 _this3.setValue(value);
1310 });
1311 }
1312 }
1313 }, {
1314 key: 'addValue',
1315 value: function addValue(value) {
1316 var valueArray = this.getValueArray(this.props.value);
1317 var visibleOptions = this._visibleOptions.filter(function (val) {
1318 return !val.disabled;
1319 });
1320 var lastValueIndex = visibleOptions.indexOf(value);
1321 this.setValue(valueArray.concat(value));
1322 if (visibleOptions.length - 1 === lastValueIndex) {
1323 // the last option was selected; focus the second-last one
1324 this.focusOption(visibleOptions[lastValueIndex - 1]);
1325 } else if (visibleOptions.length > lastValueIndex) {
1326 // focus the option below the selected one
1327 this.focusOption(visibleOptions[lastValueIndex + 1]);
1328 }
1329 }
1330 }, {
1331 key: 'popValue',
1332 value: function popValue() {
1333 var valueArray = this.getValueArray(this.props.value);
1334 if (!valueArray.length) return;
1335 if (valueArray[valueArray.length - 1].clearableValue === false) return;
1336 this.setValue(this.props.multi ? valueArray.slice(0, valueArray.length - 1) : null);
1337 }
1338 }, {
1339 key: 'removeValue',
1340 value: function removeValue(value) {
1341 var _this4 = this;
1342
1343 var valueArray = this.getValueArray(this.props.value);
1344 this.setValue(valueArray.filter(function (i) {
1345 return i[_this4.props.valueKey] !== value[_this4.props.valueKey];
1346 }));
1347 this.focus();
1348 }
1349 }, {
1350 key: 'clearValue',
1351 value: function clearValue(event) {
1352 // if the event was triggered by a mousedown and not the primary
1353 // button, ignore it.
1354 if (event && event.type === 'mousedown' && event.button !== 0) {
1355 return;
1356 }
1357
1358 event.preventDefault();
1359
1360 this.setValue(this.getResetValue());
1361 this.setState({
1362 inputValue: this.handleInputValueChange(''),
1363 isOpen: false
1364 }, this.focus);
1365
1366 this._focusAfterClear = true;
1367 }
1368 }, {
1369 key: 'getResetValue',
1370 value: function getResetValue() {
1371 if (this.props.resetValue !== undefined) {
1372 return this.props.resetValue;
1373 } else if (this.props.multi) {
1374 return [];
1375 } else {
1376 return null;
1377 }
1378 }
1379 }, {
1380 key: 'focusOption',
1381 value: function focusOption(option) {
1382 this.setState({
1383 focusedOption: option
1384 });
1385 }
1386 }, {
1387 key: 'focusNextOption',
1388 value: function focusNextOption() {
1389 this.focusAdjacentOption('next');
1390 }
1391 }, {
1392 key: 'focusPreviousOption',
1393 value: function focusPreviousOption() {
1394 this.focusAdjacentOption('previous');
1395 }
1396 }, {
1397 key: 'focusPageUpOption',
1398 value: function focusPageUpOption() {
1399 this.focusAdjacentOption('page_up');
1400 }
1401 }, {
1402 key: 'focusPageDownOption',
1403 value: function focusPageDownOption() {
1404 this.focusAdjacentOption('page_down');
1405 }
1406 }, {
1407 key: 'focusStartOption',
1408 value: function focusStartOption() {
1409 this.focusAdjacentOption('start');
1410 }
1411 }, {
1412 key: 'focusEndOption',
1413 value: function focusEndOption() {
1414 this.focusAdjacentOption('end');
1415 }
1416 }, {
1417 key: 'focusAdjacentOption',
1418 value: function focusAdjacentOption(dir) {
1419 var options = this._visibleOptions.map(function (option, index) {
1420 return { option: option, index: index };
1421 }).filter(function (option) {
1422 return !option.option.disabled;
1423 });
1424 this._scrollToFocusedOptionOnUpdate = true;
1425 if (!this.state.isOpen) {
1426 var newState = {
1427 focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null),
1428 isOpen: true
1429 };
1430 if (this.props.onSelectResetsInput) {
1431 newState.inputValue = '';
1432 }
1433 this.setState(newState);
1434 return;
1435 }
1436 if (!options.length) return;
1437 var focusedIndex = -1;
1438 for (var i = 0; i < options.length; i++) {
1439 if (this._focusedOption === options[i].option) {
1440 focusedIndex = i;
1441 break;
1442 }
1443 }
1444 if (dir === 'next' && focusedIndex !== -1) {
1445 focusedIndex = (focusedIndex + 1) % options.length;
1446 } else if (dir === 'previous') {
1447 if (focusedIndex > 0) {
1448 focusedIndex = focusedIndex - 1;
1449 } else {
1450 focusedIndex = options.length - 1;
1451 }
1452 } else if (dir === 'start') {
1453 focusedIndex = 0;
1454 } else if (dir === 'end') {
1455 focusedIndex = options.length - 1;
1456 } else if (dir === 'page_up') {
1457 var potentialIndex = focusedIndex - this.props.pageSize;
1458 if (potentialIndex < 0) {
1459 focusedIndex = 0;
1460 } else {
1461 focusedIndex = potentialIndex;
1462 }
1463 } else if (dir === 'page_down') {
1464 var _potentialIndex = focusedIndex + this.props.pageSize;
1465 if (_potentialIndex > options.length - 1) {
1466 focusedIndex = options.length - 1;
1467 } else {
1468 focusedIndex = _potentialIndex;
1469 }
1470 }
1471
1472 if (focusedIndex === -1) {
1473 focusedIndex = 0;
1474 }
1475
1476 this.setState({
1477 focusedIndex: options[focusedIndex].index,
1478 focusedOption: options[focusedIndex].option
1479 });
1480 }
1481 }, {
1482 key: 'getFocusedOption',
1483 value: function getFocusedOption() {
1484 return this._focusedOption;
1485 }
1486 }, {
1487 key: 'selectFocusedOption',
1488 value: function selectFocusedOption() {
1489 if (this._focusedOption) {
1490 return this.selectValue(this._focusedOption);
1491 }
1492 }
1493 }, {
1494 key: 'renderLoading',
1495 value: function renderLoading() {
1496 if (!this.props.isLoading) return;
1497 return React.createElement(
1498 'span',
1499 { className: 'Select-loading-zone', 'aria-hidden': 'true' },
1500 React.createElement('span', { className: 'Select-loading' })
1501 );
1502 }
1503 }, {
1504 key: 'renderValue',
1505 value: function renderValue(valueArray, isOpen) {
1506 var _this5 = this;
1507
1508 var renderLabel = this.props.valueRenderer || this.getOptionLabel;
1509 var ValueComponent = this.props.valueComponent;
1510 if (!valueArray.length) {
1511 var showPlaceholder = shouldShowPlaceholder(this.state, this.props, isOpen);
1512 return showPlaceholder ? React.createElement(
1513 'div',
1514 { className: 'Select-placeholder' },
1515 this.props.placeholder
1516 ) : null;
1517 }
1518 var onClick = this.props.onValueClick ? this.handleValueClick : null;
1519 if (this.props.multi) {
1520 return valueArray.map(function (value, i) {
1521 return React.createElement(
1522 ValueComponent,
1523 {
1524 disabled: _this5.props.disabled || value.clearableValue === false,
1525 id: _this5._instancePrefix + '-value-' + i,
1526 instancePrefix: _this5._instancePrefix,
1527 key: 'value-' + i + '-' + value[_this5.props.valueKey],
1528 onClick: onClick,
1529 onRemove: _this5.removeValue,
1530 placeholder: _this5.props.placeholder,
1531 value: value
1532 },
1533 renderLabel(value, i),
1534 React.createElement(
1535 'span',
1536 { className: 'Select-aria-only' },
1537 '\xA0'
1538 )
1539 );
1540 });
1541 } else if (shouldShowValue(this.state, this.props)) {
1542 if (isOpen) onClick = null;
1543 return React.createElement(
1544 ValueComponent,
1545 {
1546 disabled: this.props.disabled,
1547 id: this._instancePrefix + '-value-item',
1548 instancePrefix: this._instancePrefix,
1549 onClick: onClick,
1550 placeholder: this.props.placeholder,
1551 value: valueArray[0]
1552 },
1553 renderLabel(valueArray[0])
1554 );
1555 }
1556 }
1557 }, {
1558 key: 'renderInput',
1559 value: function renderInput(valueArray, focusedOptionIndex) {
1560 var _classNames,
1561 _this6 = this;
1562
1563 var className = classNames('Select-input', this.props.inputProps.className);
1564 var isOpen = this.state.isOpen;
1565
1566 var ariaOwns = classNames((_classNames = {}, defineProperty(_classNames, this._instancePrefix + '-list', isOpen), defineProperty(_classNames, this._instancePrefix + '-backspace-remove-message', this.props.multi && !this.props.disabled && this.state.isFocused && !this.state.inputValue), _classNames));
1567
1568 var value = this.state.inputValue;
1569 if (value && !this.props.onSelectResetsInput && !this.state.isFocused) {
1570 // it hides input value when it is not focused and was not reset on select
1571 value = '';
1572 }
1573
1574 var inputProps = _extends({}, this.props.inputProps, {
1575 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value',
1576 'aria-describedby': this.props['aria-describedby'],
1577 'aria-expanded': '' + isOpen,
1578 'aria-haspopup': '' + isOpen,
1579 'aria-label': this.props['aria-label'],
1580 'aria-labelledby': this.props['aria-labelledby'],
1581 'aria-owns': ariaOwns,
1582 className: className,
1583 onBlur: this.handleInputBlur,
1584 onChange: this.handleInputChange,
1585 onFocus: this.handleInputFocus,
1586 ref: function ref(_ref) {
1587 return _this6.input = _ref;
1588 },
1589 role: 'combobox',
1590 required: this.state.required,
1591 tabIndex: this.props.tabIndex,
1592 value: value
1593 });
1594
1595 if (this.props.inputRenderer) {
1596 return this.props.inputRenderer(inputProps);
1597 }
1598
1599 if (this.props.disabled || !this.props.searchable) {
1600 var divProps = objectWithoutProperties(this.props.inputProps, []);
1601
1602
1603 var _ariaOwns = classNames(defineProperty({}, this._instancePrefix + '-list', isOpen));
1604 return React.createElement('div', _extends({}, divProps, {
1605 'aria-expanded': isOpen,
1606 'aria-owns': _ariaOwns,
1607 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value',
1608 'aria-disabled': '' + this.props.disabled,
1609 'aria-label': this.props['aria-label'],
1610 'aria-labelledby': this.props['aria-labelledby'],
1611 className: className,
1612 onBlur: this.handleInputBlur,
1613 onFocus: this.handleInputFocus,
1614 ref: function ref(_ref2) {
1615 return _this6.input = _ref2;
1616 },
1617 role: 'combobox',
1618 style: { border: 0, width: 1, display: 'inline-block' },
1619 tabIndex: this.props.tabIndex || 0
1620 }));
1621 }
1622
1623 if (this.props.autosize) {
1624 return React.createElement(AutosizeInput, _extends({ id: this.props.id }, inputProps, { minWidth: '5' }));
1625 }
1626 return React.createElement(
1627 'div',
1628 { className: className, key: 'input-wrap', style: { display: 'inline-block' } },
1629 React.createElement('input', _extends({ id: this.props.id }, inputProps))
1630 );
1631 }
1632 }, {
1633 key: 'renderClear',
1634 value: function renderClear() {
1635 var valueArray = this.getValueArray(this.props.value);
1636 if (!this.props.clearable || !valueArray.length || this.props.disabled || this.props.isLoading) return;
1637 var ariaLabel = this.props.multi ? this.props.clearAllText : this.props.clearValueText;
1638 var clear = this.props.clearRenderer();
1639
1640 return React.createElement(
1641 'span',
1642 {
1643 'aria-label': ariaLabel,
1644 className: 'Select-clear-zone',
1645 onMouseDown: this.clearValue,
1646 onTouchEnd: this.handleTouchEndClearValue,
1647 onTouchMove: this.handleTouchMove,
1648 onTouchStart: this.handleTouchStart,
1649 title: ariaLabel
1650 },
1651 clear
1652 );
1653 }
1654 }, {
1655 key: 'renderArrow',
1656 value: function renderArrow() {
1657 if (!this.props.arrowRenderer) return;
1658
1659 var onMouseDown = this.handleMouseDownOnArrow;
1660 var isOpen = this.state.isOpen;
1661 var arrow = this.props.arrowRenderer({ onMouseDown: onMouseDown, isOpen: isOpen });
1662
1663 if (!arrow) {
1664 return null;
1665 }
1666
1667 return React.createElement(
1668 'span',
1669 {
1670 className: 'Select-arrow-zone',
1671 onMouseDown: onMouseDown
1672 },
1673 arrow
1674 );
1675 }
1676 }, {
1677 key: 'filterOptions',
1678 value: function filterOptions$$1(excludeOptions) {
1679 var filterValue = this.state.inputValue;
1680 var options = this.props.options || [];
1681 if (this.props.filterOptions) {
1682 // Maintain backwards compatibility with boolean attribute
1683 var filterOptions$$1 = typeof this.props.filterOptions === 'function' ? this.props.filterOptions : filterOptions;
1684
1685 return filterOptions$$1(options, filterValue, excludeOptions, {
1686 filterOption: this.props.filterOption,
1687 ignoreAccents: this.props.ignoreAccents,
1688 ignoreCase: this.props.ignoreCase,
1689 labelKey: this.props.labelKey,
1690 matchPos: this.props.matchPos,
1691 matchProp: this.props.matchProp,
1692 trimFilter: this.props.trimFilter,
1693 valueKey: this.props.valueKey
1694 });
1695 } else {
1696 return options;
1697 }
1698 }
1699 }, {
1700 key: 'onOptionRef',
1701 value: function onOptionRef(ref, isFocused) {
1702 if (isFocused) {
1703 this.focused = ref;
1704 }
1705 }
1706 }, {
1707 key: 'renderMenu',
1708 value: function renderMenu(options, valueArray, focusedOption) {
1709 if (options && options.length) {
1710 return this.props.menuRenderer({
1711 focusedOption: focusedOption,
1712 focusOption: this.focusOption,
1713 inputValue: this.state.inputValue,
1714 instancePrefix: this._instancePrefix,
1715 labelKey: this.props.labelKey,
1716 onFocus: this.focusOption,
1717 onOptionRef: this.onOptionRef,
1718 onSelect: this.selectValue,
1719 optionClassName: this.props.optionClassName,
1720 optionComponent: this.props.optionComponent,
1721 optionRenderer: this.props.optionRenderer || this.getOptionLabel,
1722 options: options,
1723 removeValue: this.removeValue,
1724 selectValue: this.selectValue,
1725 valueArray: valueArray,
1726 valueKey: this.props.valueKey
1727 });
1728 } else if (this.props.noResultsText) {
1729 return React.createElement(
1730 'div',
1731 { className: 'Select-noresults' },
1732 this.props.noResultsText
1733 );
1734 } else {
1735 return null;
1736 }
1737 }
1738 }, {
1739 key: 'renderHiddenField',
1740 value: function renderHiddenField(valueArray) {
1741 var _this7 = this;
1742
1743 if (!this.props.name) return;
1744 if (this.props.joinValues) {
1745 var value = valueArray.map(function (i) {
1746 return stringifyValue(i[_this7.props.valueKey]);
1747 }).join(this.props.delimiter);
1748 return React.createElement('input', {
1749 disabled: this.props.disabled,
1750 name: this.props.name,
1751 ref: function ref(_ref3) {
1752 return _this7.value = _ref3;
1753 },
1754 type: 'hidden',
1755 value: value
1756 });
1757 }
1758 return valueArray.map(function (item, index) {
1759 return React.createElement('input', {
1760 disabled: _this7.props.disabled,
1761 key: 'hidden.' + index,
1762 name: _this7.props.name,
1763 ref: 'value' + index,
1764 type: 'hidden',
1765 value: stringifyValue(item[_this7.props.valueKey])
1766 });
1767 });
1768 }
1769 }, {
1770 key: 'getFocusableOptionIndex',
1771 value: function getFocusableOptionIndex(selectedOption) {
1772 var options = this._visibleOptions;
1773 if (!options.length) return null;
1774
1775 var valueKey = this.props.valueKey;
1776 var focusedOption = this.state.focusedOption || selectedOption;
1777 if (focusedOption && !focusedOption.disabled) {
1778 var focusedOptionIndex = -1;
1779 options.some(function (option, index) {
1780 var isOptionEqual = option[valueKey] === focusedOption[valueKey];
1781 if (isOptionEqual) {
1782 focusedOptionIndex = index;
1783 }
1784 return isOptionEqual;
1785 });
1786 if (focusedOptionIndex !== -1) {
1787 return focusedOptionIndex;
1788 }
1789 }
1790
1791 for (var i = 0; i < options.length; i++) {
1792 if (!options[i].disabled) return i;
1793 }
1794 return null;
1795 }
1796 }, {
1797 key: 'renderOuter',
1798 value: function renderOuter(options, valueArray, focusedOption) {
1799 var _this8 = this;
1800
1801 var menu = this.renderMenu(options, valueArray, focusedOption);
1802 if (!menu) {
1803 return null;
1804 }
1805
1806 return React.createElement(
1807 'div',
1808 { ref: function ref(_ref5) {
1809 return _this8.menuContainer = _ref5;
1810 }, className: 'Select-menu-outer', style: this.props.menuContainerStyle },
1811 React.createElement(
1812 'div',
1813 {
1814 className: 'Select-menu',
1815 id: this._instancePrefix + '-list',
1816 onMouseDown: this.handleMouseDownOnMenu,
1817 onScroll: this.handleMenuScroll,
1818 ref: function ref(_ref4) {
1819 return _this8.menu = _ref4;
1820 },
1821 role: 'listbox',
1822 style: this.props.menuStyle,
1823 tabIndex: -1
1824 },
1825 menu
1826 )
1827 );
1828 }
1829 }, {
1830 key: 'render',
1831 value: function render() {
1832 var _this9 = this;
1833
1834 var valueArray = this.getValueArray(this.props.value);
1835 var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
1836 var isOpen = this.state.isOpen;
1837 if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
1838 var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
1839
1840 var focusedOption = null;
1841 if (focusedOptionIndex !== null) {
1842 focusedOption = this._focusedOption = options[focusedOptionIndex];
1843 } else {
1844 focusedOption = this._focusedOption = null;
1845 }
1846 var className = classNames('Select', this.props.className, {
1847 'has-value': valueArray.length,
1848 'is-clearable': this.props.clearable,
1849 'is-disabled': this.props.disabled,
1850 'is-focused': this.state.isFocused,
1851 'is-loading': this.props.isLoading,
1852 'is-open': isOpen,
1853 'is-pseudo-focused': this.state.isPseudoFocused,
1854 'is-searchable': this.props.searchable,
1855 'Select--multi': this.props.multi,
1856 'Select--rtl': this.props.rtl,
1857 'Select--single': !this.props.multi
1858 });
1859
1860 var removeMessage = null;
1861 if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
1862 removeMessage = React.createElement(
1863 'span',
1864 { id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only', 'aria-live': 'assertive' },
1865 this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
1866 );
1867 }
1868
1869 return React.createElement(
1870 'div',
1871 { ref: function ref(_ref7) {
1872 return _this9.wrapper = _ref7;
1873 },
1874 className: className,
1875 style: this.props.wrapperStyle },
1876 this.renderHiddenField(valueArray),
1877 React.createElement(
1878 'div',
1879 { ref: function ref(_ref6) {
1880 return _this9.control = _ref6;
1881 },
1882 className: 'Select-control',
1883 onKeyDown: this.handleKeyDown,
1884 onMouseDown: this.handleMouseDown,
1885 onTouchEnd: this.handleTouchEnd,
1886 onTouchMove: this.handleTouchMove,
1887 onTouchStart: this.handleTouchStart,
1888 style: this.props.style
1889 },
1890 React.createElement(
1891 'span',
1892 { className: 'Select-multi-value-wrapper', id: this._instancePrefix + '-value' },
1893 this.renderValue(valueArray, isOpen),
1894 this.renderInput(valueArray, focusedOptionIndex)
1895 ),
1896 removeMessage,
1897 this.renderLoading(),
1898 this.renderClear(),
1899 this.renderArrow()
1900 ),
1901 isOpen ? this.renderOuter(options, valueArray, focusedOption) : null
1902 );
1903 }
1904 }]);
1905 return Select;
1906}(React.Component);
1907
1908Select$1.propTypes = {
1909 'aria-describedby': PropTypes.string, // html id(s) of element(s) that should be used to describe this input (for assistive tech)
1910 'aria-label': PropTypes.string, // aria label (for assistive tech)
1911 'aria-labelledby': PropTypes.string, // html id of an element that should be used as the label (for assistive tech)
1912 arrowRenderer: PropTypes.func, // create the drop-down caret element
1913 autoBlur: PropTypes.bool, // automatically blur the component when an option is selected
1914 autoFocus: PropTypes.bool, // autofocus the component on mount
1915 autofocus: PropTypes.bool, // deprecated; use autoFocus instead
1916 autosize: PropTypes.bool, // whether to enable autosizing or not
1917 backspaceRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input
1918 backspaceToRemoveMessage: PropTypes.string, // message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
1919 className: PropTypes.string, // className for the outer element
1920 clearAllText: stringOrNode, // title for the "clear" control when multi: true
1921 clearRenderer: PropTypes.func, // create clearable x element
1922 clearValueText: stringOrNode, // title for the "clear" control
1923 clearable: PropTypes.bool, // should it be possible to reset value
1924 closeOnSelect: PropTypes.bool, // whether to close the menu when a value is selected
1925 deleteRemoves: PropTypes.bool, // whether delete removes an item if there is no text input
1926 delimiter: PropTypes.string, // delimiter to use to join multiple values for the hidden field value
1927 disabled: PropTypes.bool, // whether the Select is disabled or not
1928 escapeClearsValue: PropTypes.bool, // whether escape clears the value when the menu is closed
1929 filterOption: PropTypes.func, // method to filter a single option (option, filterString)
1930 filterOptions: PropTypes.any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
1931 id: PropTypes.string, // html id to set on the input element for accessibility or tests
1932 ignoreAccents: PropTypes.bool, // whether to strip diacritics when filtering
1933 ignoreCase: PropTypes.bool, // whether to perform case-insensitive filtering
1934 inputProps: PropTypes.object, // custom attributes for the Input
1935 inputRenderer: PropTypes.func, // returns a custom input component
1936 instanceId: PropTypes.string, // set the components instanceId
1937 isLoading: PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
1938 joinValues: PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode)
1939 labelKey: PropTypes.string, // path of the label value in option objects
1940 matchPos: PropTypes.string, // (any|start) match the start or entire string when filtering
1941 matchProp: PropTypes.string, // (any|label|value) which option property to filter on
1942 menuBuffer: PropTypes.number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
1943 menuContainerStyle: PropTypes.object, // optional style to apply to the menu container
1944 menuRenderer: PropTypes.func, // renders a custom menu with options
1945 menuStyle: PropTypes.object, // optional style to apply to the menu
1946 multi: PropTypes.bool, // multi-value input
1947 name: PropTypes.string, // generates a hidden <input /> tag with this field name for html forms
1948 noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
1949 onBlur: PropTypes.func, // onBlur handler: function (event) {}
1950 onBlurResetsInput: PropTypes.bool, // whether input is cleared on blur
1951 onChange: PropTypes.func, // onChange handler: function (newValue) {}
1952 onClose: PropTypes.func, // fires when the menu is closed
1953 onCloseResetsInput: PropTypes.bool, // whether input is cleared when menu is closed through the arrow
1954 onFocus: PropTypes.func, // onFocus handler: function (event) {}
1955 onInputChange: PropTypes.func, // onInputChange handler: function (inputValue) {}
1956 onInputKeyDown: PropTypes.func, // input keyDown handler: function (event) {}
1957 onMenuScrollToBottom: PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
1958 onOpen: PropTypes.func, // fires when the menu is opened
1959 onSelectResetsInput: PropTypes.bool, // whether input is cleared on select (works only for multiselect)
1960 onValueClick: PropTypes.func, // onClick handler for value labels: function (value, event) {}
1961 openOnClick: PropTypes.bool, // boolean to control opening the menu when the control is clicked
1962 openOnFocus: PropTypes.bool, // always open options menu on focus
1963 optionClassName: PropTypes.string, // additional class(es) to apply to the <Option /> elements
1964 optionComponent: PropTypes.func, // option component to render in dropdown
1965 optionRenderer: PropTypes.func, // optionRenderer: function (option) {}
1966 options: PropTypes.array, // array of options
1967 pageSize: PropTypes.number, // number of entries to page when using page up/down keys
1968 placeholder: stringOrNode, // field placeholder, displayed when there's no value
1969 removeSelected: PropTypes.bool, // whether the selected option is removed from the dropdown on multi selects
1970 required: PropTypes.bool, // applies HTML5 required attribute when needed
1971 resetValue: PropTypes.any, // value to use when you clear the control
1972 rtl: PropTypes.bool, // set to true in order to use react-select in right-to-left direction
1973 scrollMenuIntoView: PropTypes.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged
1974 searchable: PropTypes.bool, // whether to enable searching feature or not
1975 simpleValue: PropTypes.bool, // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
1976 style: PropTypes.object, // optional style to apply to the control
1977 tabIndex: stringOrNumber, // optional tab index of the control
1978 tabSelectsValue: PropTypes.bool, // whether to treat tabbing out while focused to be value selection
1979 trimFilter: PropTypes.bool, // whether to trim whitespace around filter value
1980 value: PropTypes.any, // initial field value
1981 valueComponent: PropTypes.func, // value component to render
1982 valueKey: PropTypes.string, // path of the label value in option objects
1983 valueRenderer: PropTypes.func, // valueRenderer: function (option) {}
1984 wrapperStyle: PropTypes.object // optional style to apply to the component wrapper
1985};
1986
1987Select$1.defaultProps = {
1988 arrowRenderer: arrowRenderer,
1989 autosize: true,
1990 backspaceRemoves: true,
1991 backspaceToRemoveMessage: 'Press backspace to remove {label}',
1992 clearable: true,
1993 clearAllText: 'Clear all',
1994 clearRenderer: clearRenderer,
1995 clearValueText: 'Clear value',
1996 closeOnSelect: true,
1997 deleteRemoves: true,
1998 delimiter: ',',
1999 disabled: false,
2000 escapeClearsValue: true,
2001 filterOptions: filterOptions,
2002 ignoreAccents: true,
2003 ignoreCase: true,
2004 inputProps: {},
2005 isLoading: false,
2006 joinValues: false,
2007 labelKey: 'label',
2008 matchPos: 'any',
2009 matchProp: 'any',
2010 menuBuffer: 0,
2011 menuRenderer: menuRenderer,
2012 multi: false,
2013 noResultsText: 'No results found',
2014 onBlurResetsInput: true,
2015 onCloseResetsInput: true,
2016 onSelectResetsInput: true,
2017 openOnClick: true,
2018 optionComponent: Option,
2019 pageSize: 5,
2020 placeholder: 'Select...',
2021 removeSelected: true,
2022 required: false,
2023 rtl: false,
2024 scrollMenuIntoView: true,
2025 searchable: true,
2026 simpleValue: false,
2027 tabSelectsValue: true,
2028 trimFilter: true,
2029 valueComponent: Value,
2030 valueKey: 'value'
2031};
2032
2033var propTypes = {
2034 autoload: PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true
2035 cache: PropTypes.any, // object to use to cache results; set to null/false to disable caching
2036 children: PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
2037 ignoreAccents: PropTypes.bool, // strip diacritics when filtering; defaults to true
2038 ignoreCase: PropTypes.bool, // perform case-insensitive filtering; defaults to true
2039 loadOptions: PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise
2040 loadingPlaceholder: PropTypes.oneOfType([// replaces the placeholder while options are loading
2041 PropTypes.string, PropTypes.node]),
2042 multi: PropTypes.bool, // multi-value input
2043 noResultsText: PropTypes.oneOfType([// field noResultsText, displayed when no options come back from the server
2044 PropTypes.string, PropTypes.node]),
2045 onChange: PropTypes.func, // onChange handler: function (newValue) {}
2046 onInputChange: PropTypes.func, // optional for keeping track of what is being typed
2047 options: PropTypes.array.isRequired, // array of options
2048 placeholder: PropTypes.oneOfType([// field placeholder, displayed when there's no value (shared with Select)
2049 PropTypes.string, PropTypes.node]),
2050 searchPromptText: PropTypes.oneOfType([// label to prompt for search input
2051 PropTypes.string, PropTypes.node]),
2052 value: PropTypes.any // initial field value
2053};
2054
2055var defaultCache = {};
2056
2057var defaultChildren = function defaultChildren(props) {
2058 return React.createElement(Select$1, props);
2059};
2060
2061var defaultProps = {
2062 autoload: true,
2063 cache: defaultCache,
2064 children: defaultChildren,
2065 ignoreAccents: true,
2066 ignoreCase: true,
2067 loadingPlaceholder: 'Loading...',
2068 options: [],
2069 searchPromptText: 'Type to search'
2070};
2071
2072var Async = function (_Component) {
2073 inherits(Async, _Component);
2074
2075 function Async(props, context) {
2076 classCallCheck(this, Async);
2077
2078 var _this = possibleConstructorReturn(this, (Async.__proto__ || Object.getPrototypeOf(Async)).call(this, props, context));
2079
2080 _this._cache = props.cache === defaultCache ? {} : props.cache;
2081
2082 _this.state = {
2083 inputValue: '',
2084 isLoading: false,
2085 options: props.options
2086 };
2087
2088 _this.onInputChange = _this.onInputChange.bind(_this);
2089 return _this;
2090 }
2091
2092 createClass(Async, [{
2093 key: 'componentDidMount',
2094 value: function componentDidMount() {
2095 var autoload = this.props.autoload;
2096
2097
2098 if (autoload) {
2099 this.loadOptions('');
2100 }
2101 }
2102 }, {
2103 key: 'componentWillReceiveProps',
2104 value: function componentWillReceiveProps(nextProps) {
2105 if (nextProps.options !== this.props.options) {
2106 this.setState({
2107 options: nextProps.options
2108 });
2109 }
2110 }
2111 }, {
2112 key: 'componentWillUnmount',
2113 value: function componentWillUnmount() {
2114 this._callback = null;
2115 }
2116 }, {
2117 key: 'loadOptions',
2118 value: function loadOptions(inputValue) {
2119 var _this2 = this;
2120
2121 var loadOptions = this.props.loadOptions;
2122
2123 var cache = this._cache;
2124
2125 if (cache && Object.prototype.hasOwnProperty.call(cache, inputValue)) {
2126 this._callback = null;
2127
2128 this.setState({
2129 isLoading: false,
2130 options: cache[inputValue]
2131 });
2132
2133 return;
2134 }
2135
2136 var callback = function callback(error, data) {
2137 var options = data && data.options || [];
2138
2139 if (cache) {
2140 cache[inputValue] = options;
2141 }
2142
2143 if (callback === _this2._callback) {
2144 _this2._callback = null;
2145
2146 _this2.setState({
2147 isLoading: false,
2148 options: options
2149 });
2150 }
2151 };
2152
2153 // Ignore all but the most recent request
2154 this._callback = callback;
2155
2156 var promise = loadOptions(inputValue, callback);
2157 if (promise) {
2158 promise.then(function (data) {
2159 return callback(null, data);
2160 }, function (error) {
2161 return callback(error);
2162 });
2163 }
2164
2165 if (this._callback && !this.state.isLoading) {
2166 this.setState({
2167 isLoading: true
2168 });
2169 }
2170 }
2171 }, {
2172 key: 'onInputChange',
2173 value: function onInputChange(inputValue) {
2174 var _props = this.props,
2175 ignoreAccents = _props.ignoreAccents,
2176 ignoreCase = _props.ignoreCase,
2177 onInputChange = _props.onInputChange;
2178
2179 var newInputValue = inputValue;
2180
2181 if (onInputChange) {
2182 var value = onInputChange(newInputValue);
2183 // Note: != used deliberately here to catch undefined and null
2184 if (value != null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') {
2185 newInputValue = '' + value;
2186 }
2187 }
2188
2189 var transformedInputValue = newInputValue;
2190
2191 if (ignoreAccents) {
2192 transformedInputValue = stripDiacritics(transformedInputValue);
2193 }
2194
2195 if (ignoreCase) {
2196 transformedInputValue = transformedInputValue.toLowerCase();
2197 }
2198
2199 this.setState({ inputValue: newInputValue });
2200 this.loadOptions(transformedInputValue);
2201
2202 // Return new input value, but without applying toLowerCase() to avoid modifying the user's view case of the input while typing.
2203 return newInputValue;
2204 }
2205 }, {
2206 key: 'noResultsText',
2207 value: function noResultsText() {
2208 var _props2 = this.props,
2209 loadingPlaceholder = _props2.loadingPlaceholder,
2210 noResultsText = _props2.noResultsText,
2211 searchPromptText = _props2.searchPromptText;
2212 var _state = this.state,
2213 inputValue = _state.inputValue,
2214 isLoading = _state.isLoading;
2215
2216
2217 if (isLoading) {
2218 return loadingPlaceholder;
2219 }
2220 if (inputValue && noResultsText) {
2221 return noResultsText;
2222 }
2223 return searchPromptText;
2224 }
2225 }, {
2226 key: 'focus',
2227 value: function focus() {
2228 this.select.focus();
2229 }
2230 }, {
2231 key: 'render',
2232 value: function render() {
2233 var _this3 = this;
2234
2235 var _props3 = this.props,
2236 children = _props3.children,
2237 loadingPlaceholder = _props3.loadingPlaceholder,
2238 placeholder = _props3.placeholder;
2239 var _state2 = this.state,
2240 isLoading = _state2.isLoading,
2241 options = _state2.options;
2242
2243
2244 var props = {
2245 noResultsText: this.noResultsText(),
2246 placeholder: isLoading ? loadingPlaceholder : placeholder,
2247 options: isLoading && loadingPlaceholder ? [] : options,
2248 ref: function ref(_ref) {
2249 return _this3.select = _ref;
2250 }
2251 };
2252
2253 return children(_extends({}, this.props, props, {
2254 isLoading: isLoading,
2255 onInputChange: this.onInputChange
2256 }));
2257 }
2258 }]);
2259 return Async;
2260}(Component);
2261
2262Async.propTypes = propTypes;
2263Async.defaultProps = defaultProps;
2264
2265var CreatableSelect = function (_React$Component) {
2266 inherits(CreatableSelect, _React$Component);
2267
2268 function CreatableSelect(props, context) {
2269 classCallCheck(this, CreatableSelect);
2270
2271 var _this = possibleConstructorReturn(this, (CreatableSelect.__proto__ || Object.getPrototypeOf(CreatableSelect)).call(this, props, context));
2272
2273 _this.filterOptions = _this.filterOptions.bind(_this);
2274 _this.menuRenderer = _this.menuRenderer.bind(_this);
2275 _this.onInputKeyDown = _this.onInputKeyDown.bind(_this);
2276 _this.onInputChange = _this.onInputChange.bind(_this);
2277 _this.onOptionSelect = _this.onOptionSelect.bind(_this);
2278 return _this;
2279 }
2280
2281 createClass(CreatableSelect, [{
2282 key: 'createNewOption',
2283 value: function createNewOption() {
2284 var _props = this.props,
2285 isValidNewOption = _props.isValidNewOption,
2286 newOptionCreator = _props.newOptionCreator,
2287 onNewOptionClick = _props.onNewOptionClick,
2288 _props$options = _props.options,
2289 options = _props$options === undefined ? [] : _props$options;
2290
2291
2292 if (isValidNewOption({ label: this.inputValue })) {
2293 var option = newOptionCreator({ label: this.inputValue, labelKey: this.labelKey, valueKey: this.valueKey });
2294 var _isOptionUnique = this.isOptionUnique({ option: option, options: options });
2295
2296 // Don't add the same option twice.
2297 if (_isOptionUnique) {
2298 if (onNewOptionClick) {
2299 onNewOptionClick(option);
2300 } else {
2301 options.unshift(option);
2302
2303 this.select.selectValue(option);
2304 }
2305 }
2306 }
2307 }
2308 }, {
2309 key: 'filterOptions',
2310 value: function filterOptions$$1() {
2311 var _props2 = this.props,
2312 filterOptions$$1 = _props2.filterOptions,
2313 isValidNewOption = _props2.isValidNewOption,
2314 promptTextCreator = _props2.promptTextCreator;
2315
2316 // TRICKY Check currently selected options as well.
2317 // Don't display a create-prompt for a value that's selected.
2318 // This covers async edge-cases where a newly-created Option isn't yet in the async-loaded array.
2319
2320 var excludeOptions = (arguments.length <= 2 ? undefined : arguments[2]) || [];
2321
2322 var filteredOptions = filterOptions$$1.apply(undefined, arguments) || [];
2323
2324 if (isValidNewOption({ label: this.inputValue })) {
2325 var _newOptionCreator = this.props.newOptionCreator;
2326
2327
2328 var option = _newOptionCreator({
2329 label: this.inputValue,
2330 labelKey: this.labelKey,
2331 valueKey: this.valueKey
2332 });
2333
2334 // TRICKY Compare to all options (not just filtered options) in case option has already been selected).
2335 // For multi-selects, this would remove it from the filtered list.
2336 var _isOptionUnique2 = this.isOptionUnique({
2337 option: option,
2338 options: excludeOptions.concat(filteredOptions)
2339 });
2340
2341 if (_isOptionUnique2) {
2342 var prompt = promptTextCreator(this.inputValue);
2343
2344 this._createPlaceholderOption = _newOptionCreator({
2345 label: prompt,
2346 labelKey: this.labelKey,
2347 valueKey: this.valueKey
2348 });
2349
2350 filteredOptions.unshift(this._createPlaceholderOption);
2351 }
2352 }
2353
2354 return filteredOptions;
2355 }
2356 }, {
2357 key: 'isOptionUnique',
2358 value: function isOptionUnique(_ref) {
2359 var option = _ref.option,
2360 options = _ref.options;
2361 var isOptionUnique = this.props.isOptionUnique;
2362
2363
2364 options = options || this.props.options;
2365
2366 return isOptionUnique({
2367 labelKey: this.labelKey,
2368 option: option,
2369 options: options,
2370 valueKey: this.valueKey
2371 });
2372 }
2373 }, {
2374 key: 'menuRenderer',
2375 value: function menuRenderer$$1(params) {
2376 var menuRenderer$$1 = this.props.menuRenderer;
2377
2378
2379 return menuRenderer$$1(_extends({}, params, {
2380 onSelect: this.onOptionSelect,
2381 selectValue: this.onOptionSelect
2382 }));
2383 }
2384 }, {
2385 key: 'onInputChange',
2386 value: function onInputChange(input) {
2387 var onInputChange = this.props.onInputChange;
2388
2389 // This value may be needed in between Select mounts (when this.select is null)
2390
2391 this.inputValue = input;
2392
2393 if (onInputChange) {
2394 this.inputValue = onInputChange(input);
2395 }
2396
2397 return this.inputValue;
2398 }
2399 }, {
2400 key: 'onInputKeyDown',
2401 value: function onInputKeyDown(event) {
2402 var _props3 = this.props,
2403 shouldKeyDownEventCreateNewOption = _props3.shouldKeyDownEventCreateNewOption,
2404 onInputKeyDown = _props3.onInputKeyDown;
2405
2406 var focusedOption = this.select.getFocusedOption();
2407
2408 if (focusedOption && focusedOption === this._createPlaceholderOption && shouldKeyDownEventCreateNewOption({ keyCode: event.keyCode })) {
2409 this.createNewOption();
2410
2411 // Prevent decorated Select from doing anything additional with this keyDown event
2412 event.preventDefault();
2413 } else if (onInputKeyDown) {
2414 onInputKeyDown(event);
2415 }
2416 }
2417 }, {
2418 key: 'onOptionSelect',
2419 value: function onOptionSelect(option) {
2420 if (option === this._createPlaceholderOption) {
2421 this.createNewOption();
2422 } else {
2423 this.select.selectValue(option);
2424 }
2425 }
2426 }, {
2427 key: 'focus',
2428 value: function focus() {
2429 this.select.focus();
2430 }
2431 }, {
2432 key: 'render',
2433 value: function render() {
2434 var _this2 = this;
2435
2436 var _props4 = this.props,
2437 refProp = _props4.ref,
2438 restProps = objectWithoutProperties(_props4, ['ref']);
2439 var children = this.props.children;
2440
2441 // We can't use destructuring default values to set the children,
2442 // because it won't apply work if `children` is null. A falsy check is
2443 // more reliable in real world use-cases.
2444
2445 if (!children) {
2446 children = defaultChildren$2;
2447 }
2448
2449 var props = _extends({}, restProps, {
2450 allowCreate: true,
2451 filterOptions: this.filterOptions,
2452 menuRenderer: this.menuRenderer,
2453 onInputChange: this.onInputChange,
2454 onInputKeyDown: this.onInputKeyDown,
2455 ref: function ref(_ref2) {
2456 _this2.select = _ref2;
2457
2458 // These values may be needed in between Select mounts (when this.select is null)
2459 if (_ref2) {
2460 _this2.labelKey = _ref2.props.labelKey;
2461 _this2.valueKey = _ref2.props.valueKey;
2462 }
2463 if (refProp) {
2464 refProp(_ref2);
2465 }
2466 }
2467 });
2468
2469 return children(props);
2470 }
2471 }]);
2472 return CreatableSelect;
2473}(React.Component);
2474
2475var defaultChildren$2 = function defaultChildren(props) {
2476 return React.createElement(Select$1, props);
2477};
2478
2479var isOptionUnique = function isOptionUnique(_ref3) {
2480 var option = _ref3.option,
2481 options = _ref3.options,
2482 labelKey = _ref3.labelKey,
2483 valueKey = _ref3.valueKey;
2484
2485 if (!options || !options.length) {
2486 return true;
2487 }
2488
2489 return options.filter(function (existingOption) {
2490 return existingOption[labelKey] === option[labelKey] || existingOption[valueKey] === option[valueKey];
2491 }).length === 0;
2492};
2493
2494var isValidNewOption = function isValidNewOption(_ref4) {
2495 var label = _ref4.label;
2496 return !!label;
2497};
2498
2499var newOptionCreator = function newOptionCreator(_ref5) {
2500 var label = _ref5.label,
2501 labelKey = _ref5.labelKey,
2502 valueKey = _ref5.valueKey;
2503
2504 var option = {};
2505 option[valueKey] = label;
2506 option[labelKey] = label;
2507 option.className = 'Select-create-option-placeholder';
2508
2509 return option;
2510};
2511
2512var promptTextCreator = function promptTextCreator(label) {
2513 return 'Create option "' + label + '"';
2514};
2515
2516var shouldKeyDownEventCreateNewOption = function shouldKeyDownEventCreateNewOption(_ref6) {
2517 var keyCode = _ref6.keyCode;
2518
2519 switch (keyCode) {
2520 case 9: // TAB
2521 case 13: // ENTER
2522 case 188:
2523 // COMMA
2524 return true;
2525 default:
2526 return false;
2527 }
2528};
2529
2530// Default prop methods
2531CreatableSelect.isOptionUnique = isOptionUnique;
2532CreatableSelect.isValidNewOption = isValidNewOption;
2533CreatableSelect.newOptionCreator = newOptionCreator;
2534CreatableSelect.promptTextCreator = promptTextCreator;
2535CreatableSelect.shouldKeyDownEventCreateNewOption = shouldKeyDownEventCreateNewOption;
2536
2537CreatableSelect.defaultProps = {
2538 filterOptions: filterOptions,
2539 isOptionUnique: isOptionUnique,
2540 isValidNewOption: isValidNewOption,
2541 menuRenderer: menuRenderer,
2542 newOptionCreator: newOptionCreator,
2543 promptTextCreator: promptTextCreator,
2544 shouldKeyDownEventCreateNewOption: shouldKeyDownEventCreateNewOption
2545};
2546
2547CreatableSelect.propTypes = {
2548 // Child function responsible for creating the inner Select component
2549 // This component can be used to compose HOCs (eg Creatable and Async)
2550 // (props: Object): PropTypes.element
2551 children: PropTypes.func,
2552
2553 // See Select.propTypes.filterOptions
2554 filterOptions: PropTypes.any,
2555
2556 // Searches for any matching option within the set of options.
2557 // This function prevents duplicate options from being created.
2558 // ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean
2559 isOptionUnique: PropTypes.func,
2560
2561 // Determines if the current input text represents a valid option.
2562 // ({ label: string }): boolean
2563 isValidNewOption: PropTypes.func,
2564
2565 // See Select.propTypes.menuRenderer
2566 menuRenderer: PropTypes.any,
2567
2568 // Factory to create new option.
2569 // ({ label: string, labelKey: string, valueKey: string }): Object
2570 newOptionCreator: PropTypes.func,
2571
2572 // input change handler: function (inputValue) {}
2573 onInputChange: PropTypes.func,
2574
2575 // input keyDown handler: function (event) {}
2576 onInputKeyDown: PropTypes.func,
2577
2578 // new option click handler: function (option) {}
2579 onNewOptionClick: PropTypes.func,
2580
2581 // See Select.propTypes.options
2582 options: PropTypes.array,
2583
2584 // Creates prompt/placeholder option text.
2585 // (filterText: string): string
2586 promptTextCreator: PropTypes.func,
2587
2588 ref: PropTypes.func,
2589
2590 // Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
2591 shouldKeyDownEventCreateNewOption: PropTypes.func
2592};
2593
2594var AsyncCreatableSelect = function (_React$Component) {
2595 inherits(AsyncCreatableSelect, _React$Component);
2596
2597 function AsyncCreatableSelect() {
2598 classCallCheck(this, AsyncCreatableSelect);
2599 return possibleConstructorReturn(this, (AsyncCreatableSelect.__proto__ || Object.getPrototypeOf(AsyncCreatableSelect)).apply(this, arguments));
2600 }
2601
2602 createClass(AsyncCreatableSelect, [{
2603 key: 'focus',
2604 value: function focus() {
2605 this.select.focus();
2606 }
2607 }, {
2608 key: 'render',
2609 value: function render() {
2610 var _this2 = this;
2611
2612 return React.createElement(
2613 Async,
2614 this.props,
2615 function (_ref) {
2616 var ref = _ref.ref,
2617 asyncProps = objectWithoutProperties(_ref, ['ref']);
2618
2619 var asyncRef = ref;
2620 return React.createElement(
2621 CreatableSelect,
2622 asyncProps,
2623 function (_ref2) {
2624 var ref = _ref2.ref,
2625 creatableProps = objectWithoutProperties(_ref2, ['ref']);
2626
2627 var creatableRef = ref;
2628 return _this2.props.children(_extends({}, creatableProps, {
2629 ref: function ref(select) {
2630 creatableRef(select);
2631 asyncRef(select);
2632 _this2.select = select;
2633 }
2634 }));
2635 }
2636 );
2637 }
2638 );
2639 }
2640 }]);
2641 return AsyncCreatableSelect;
2642}(React.Component);
2643
2644var defaultChildren$1 = function defaultChildren(props) {
2645 return React.createElement(Select$1, props);
2646};
2647
2648AsyncCreatableSelect.propTypes = {
2649 children: PropTypes.func.isRequired // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element
2650};
2651
2652AsyncCreatableSelect.defaultProps = {
2653 children: defaultChildren$1
2654};
2655
2656Select$1.Async = Async;
2657Select$1.AsyncCreatable = AsyncCreatableSelect;
2658Select$1.Creatable = CreatableSelect;
2659Select$1.Value = Value;
2660Select$1.Option = Option;
2661
2662export { Async, AsyncCreatableSelect as AsyncCreatable, CreatableSelect as Creatable, Value, Option, menuRenderer as defaultMenuRenderer, arrowRenderer as defaultArrowRenderer, clearRenderer as defaultClearRenderer, filterOptions as defaultFilterOptions };
2663export default Select$1;