1 | import AutosizeInput from 'react-input-autosize';
|
2 | import classNames from 'classnames';
|
3 | import PropTypes from 'prop-types';
|
4 | import React, { Component } from 'react';
|
5 | import { findDOMNode } from 'react-dom';
|
6 |
|
7 | var 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 |
|
16 | arrowRenderer.propTypes = {
|
17 | onMouseDown: PropTypes.func
|
18 | };
|
19 |
|
20 | var clearRenderer = function clearRenderer() {
|
21 | return React.createElement('span', {
|
22 | className: 'Select-clear',
|
23 | dangerouslySetInnerHTML: { __html: '×' }
|
24 | });
|
25 | };
|
26 |
|
27 | var map = [{ 'base': 'A', 'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { 'base': 'AA', 'letters': /[\uA732]/g }, { 'base': 'AE', 'letters': /[\u00C6\u01FC\u01E2]/g }, { 'base': 'AO', 'letters': /[\uA734]/g }, { 'base': 'AU', 'letters': /[\uA736]/g }, { 'base': 'AV', 'letters': /[\uA738\uA73A]/g }, { 'base': 'AY', 'letters': /[\uA73C]/g }, { 'base': 'B', 'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { 'base': 'C', 'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { 'base': 'D', 'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { 'base': 'DZ', 'letters': /[\u01F1\u01C4]/g }, { 'base': 'Dz', 'letters': /[\u01F2\u01C5]/g }, { 'base': 'E', 'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { 'base': 'F', 'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { 'base': 'G', 'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { 'base': 'H', 'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { 'base': 'I', 'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { 'base': 'J', 'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { 'base': 'K', 'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { 'base': 'L', 'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { 'base': 'LJ', 'letters': /[\u01C7]/g }, { 'base': 'Lj', 'letters': /[\u01C8]/g }, { 'base': 'M', 'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { 'base': 'N', 'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { 'base': 'NJ', 'letters': /[\u01CA]/g }, { 'base': 'Nj', 'letters': /[\u01CB]/g }, { 'base': 'O', 'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { 'base': 'OI', 'letters': /[\u01A2]/g }, { 'base': 'OO', 'letters': /[\uA74E]/g }, { 'base': 'OU', 'letters': /[\u0222]/g }, { 'base': 'P', 'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { 'base': 'Q', 'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { 'base': 'R', 'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { 'base': 'S', 'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { 'base': 'T', 'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { 'base': 'TZ', 'letters': /[\uA728]/g }, { 'base': 'U', 'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { 'base': 'V', 'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { 'base': 'VY', 'letters': /[\uA760]/g }, { 'base': 'W', 'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { 'base': 'X', 'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { 'base': 'Y', 'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { 'base': 'Z', 'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { 'base': 'a', 'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { 'base': 'aa', 'letters': /[\uA733]/g }, { 'base': 'ae', 'letters': /[\u00E6\u01FD\u01E3]/g }, { 'base': 'ao', 'letters': /[\uA735]/g }, { 'base': 'au', 'letters': /[\uA737]/g }, { 'base': 'av', 'letters': /[\uA739\uA73B]/g }, { 'base': 'ay', 'letters': /[\uA73D]/g }, { 'base': 'b', 'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { 'base': 'dz', 'letters': /[\u01F3\u01C6]/g }, { 'base': 'e', 'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { 'base': 'f', 'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { 'base': 'g', 'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { 'base': 'h', 'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { 'base': 'k', 'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { 'base': 'l', 'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { 'base': 'lj', 'letters': /[\u01C9]/g }, { 'base': 'm', 'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { 'base': 'n', 'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { 'base': 'nj', 'letters': /[\u01CC]/g }, { 'base': 'o', 'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { 'base': 'oi', 'letters': /[\u01A3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\uA74F]/g }, { 'base': 'p', 'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { 'base': 'q', 'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { 'base': 'r', 'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { 'base': 's', 'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { 'base': 't', 'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { 'base': 'tz', 'letters': /[\uA729]/g }, { 'base': 'u', 'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { 'base': 'vy', 'letters': /[\uA761]/g }, { 'base': 'w', 'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { 'base': 'x', 'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { 'base': 'y', 'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { 'base': 'z', 'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }];
|
28 |
|
29 | var 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 |
|
36 | var trim = function trim(str) {
|
37 | return str.replace(/^\s+|\s+$/g, '');
|
38 | };
|
39 |
|
40 | var isValid = function isValid(value) {
|
41 | return typeof value !== 'undefined' && value !== null && value !== '';
|
42 | };
|
43 |
|
44 | var 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 |
|
92 | var 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 |
|
149 | menuRenderer.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 |
|
167 | var 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 |
|
180 | var _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 |
|
190 | var 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 |
|
307 | var classCallCheck = function (instance, Constructor) {
|
308 | if (!(instance instanceof Constructor)) {
|
309 | throw new TypeError("Cannot call a class as a function");
|
310 | }
|
311 | };
|
312 |
|
313 | var 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 |
|
335 | var 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 |
|
350 | var _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 |
|
366 | var 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 |
|
390 | var 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 |
|
402 | var 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 |
|
410 | var 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 |
|
449 |
|
450 | if (this.dragging) return;
|
451 |
|
452 | this.handleMouseDown(event);
|
453 | }
|
454 | }, {
|
455 | key: 'handleTouchMove',
|
456 | value: function handleTouchMove() {
|
457 |
|
458 | this.dragging = true;
|
459 | }
|
460 | }, {
|
461 | key: 'handleTouchStart',
|
462 | value: function handleTouchStart() {
|
463 |
|
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 |
|
510 | Option.propTypes = {
|
511 | children: PropTypes.node,
|
512 | className: PropTypes.string,
|
513 | instancePrefix: PropTypes.string.isRequired,
|
514 | isDisabled: PropTypes.bool,
|
515 | isFocused: PropTypes.bool,
|
516 | isSelected: PropTypes.bool,
|
517 | onFocus: PropTypes.func,
|
518 | onSelect: PropTypes.func,
|
519 | onUnfocus: PropTypes.func,
|
520 | option: PropTypes.object.isRequired,
|
521 | optionIndex: PropTypes.number
|
522 | };
|
523 |
|
524 | var 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 |
|
566 |
|
567 | if (this.dragging) return;
|
568 |
|
569 |
|
570 | this.onRemove(event);
|
571 | }
|
572 | }, {
|
573 | key: 'handleTouchMove',
|
574 | value: function handleTouchMove() {
|
575 |
|
576 | this.dragging = true;
|
577 | }
|
578 | }, {
|
579 | key: 'handleTouchStart',
|
580 | value: function handleTouchStart() {
|
581 |
|
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 |
|
630 | Value.propTypes = {
|
631 | children: PropTypes.node,
|
632 | disabled: PropTypes.bool,
|
633 | id: PropTypes.string,
|
634 | onClick: PropTypes.func,
|
635 | onRemove: PropTypes.func,
|
636 | value: PropTypes.object.isRequired
|
637 | };
|
638 |
|
639 |
|
640 |
|
641 |
|
642 |
|
643 |
|
644 | var stringifyValue = function stringifyValue(value) {
|
645 | return typeof value === 'string' ? value : value !== null && JSON.stringify(value) || '';
|
646 | };
|
647 |
|
648 | var stringOrNode = PropTypes.oneOfType([PropTypes.string, PropTypes.node]);
|
649 | var stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
|
650 |
|
651 | var instanceId = 1;
|
652 |
|
653 | var 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 |
|
669 | var 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 |
|
681 |
|
682 |
|
683 |
|
684 | var 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 |
|
696 | var handleRequired = function handleRequired(value, multi) {
|
697 | if (!value) return true;
|
698 | return multi ? value.length === 0 : Object.keys(value).length === 0;
|
699 | };
|
700 |
|
701 | var 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 |
|
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 |
|
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 |
|
781 |
|
782 |
|
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 });
|
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 |
|
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 |
|
862 | this.dragging = true;
|
863 | }
|
864 | }, {
|
865 | key: 'handleTouchStart',
|
866 | value: function handleTouchStart() {
|
867 |
|
868 | this.dragging = false;
|
869 | }
|
870 | }, {
|
871 | key: 'handleTouchEnd',
|
872 | value: function handleTouchEnd(event) {
|
873 |
|
874 |
|
875 | if (this.dragging) return;
|
876 |
|
877 |
|
878 | this.handleMouseDown(event);
|
879 | }
|
880 | }, {
|
881 | key: 'handleTouchEndClearValue',
|
882 | value: function handleTouchEndClearValue(event) {
|
883 |
|
884 |
|
885 | if (this.dragging) return;
|
886 |
|
887 |
|
888 | this.clearValue(event);
|
889 | }
|
890 | }, {
|
891 | key: 'handleMouseDown',
|
892 | value: function handleMouseDown(event) {
|
893 |
|
894 |
|
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 |
|
914 | event.preventDefault();
|
915 |
|
916 |
|
917 | if (!this.props.searchable) {
|
918 |
|
919 | this.focus();
|
920 | return this.setState({
|
921 | isOpen: !this.state.isOpen
|
922 | });
|
923 | }
|
924 |
|
925 | if (this.state.isFocused) {
|
926 |
|
927 |
|
928 |
|
929 | this.focus();
|
930 |
|
931 | var input = this.input;
|
932 | var toOpen = true;
|
933 |
|
934 | if (typeof input.getInput === 'function') {
|
935 |
|
936 | input = input.getInput();
|
937 | }
|
938 |
|
939 |
|
940 | input.value = '';
|
941 |
|
942 | if (this._focusAfterClear) {
|
943 | toOpen = false;
|
944 | this._focusAfterClear = false;
|
945 | }
|
946 |
|
947 |
|
948 | this.setState({
|
949 | isOpen: toOpen,
|
950 | isPseudoFocused: false,
|
951 | focusedOption: null
|
952 | });
|
953 | } else {
|
954 |
|
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 |
|
964 |
|
965 | if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
|
966 | return;
|
967 | }
|
968 |
|
969 | if (this.state.isOpen) {
|
970 |
|
971 | event.stopPropagation();
|
972 | event.preventDefault();
|
973 |
|
974 | this.closeMenu();
|
975 | } else {
|
976 |
|
977 | this.setState({
|
978 | isOpen: true
|
979 | });
|
980 | }
|
981 | }
|
982 | }, {
|
983 | key: 'handleMouseDownOnMenu',
|
984 | value: function handleMouseDownOnMenu(event) {
|
985 |
|
986 |
|
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;
|
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 |
|
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 |
|
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 |
|
1111 | if (!this.state.inputValue && this.props.backspaceRemoves) {
|
1112 | event.preventDefault();
|
1113 | this.popValue();
|
1114 | }
|
1115 | break;
|
1116 | case 9:
|
1117 |
|
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 |
|
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 |
|
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 |
|
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 |
|
1160 | event.preventDefault();
|
1161 | this.focusPreviousOption();
|
1162 | break;
|
1163 | case 40:
|
1164 |
|
1165 | event.preventDefault();
|
1166 | this.focusNextOption();
|
1167 | break;
|
1168 | case 33:
|
1169 |
|
1170 | event.preventDefault();
|
1171 | this.focusPageUpOption();
|
1172 | break;
|
1173 | case 34:
|
1174 |
|
1175 | event.preventDefault();
|
1176 | this.focusPageDownOption();
|
1177 | break;
|
1178 | case 35:
|
1179 |
|
1180 | if (event.shiftKey) {
|
1181 | break;
|
1182 | }
|
1183 | event.preventDefault();
|
1184 | this.focusEndOption();
|
1185 | break;
|
1186 | case 36:
|
1187 |
|
1188 | if (event.shiftKey) {
|
1189 | break;
|
1190 | }
|
1191 | event.preventDefault();
|
1192 | this.focusStartOption();
|
1193 | break;
|
1194 | case 46:
|
1195 |
|
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 |
|
1227 |
|
1228 |
|
1229 |
|
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 |
|
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 |
|
1283 |
|
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 |
|
1324 | this.focusOption(visibleOptions[lastValueIndex - 1]);
|
1325 | } else if (visibleOptions.length > lastValueIndex) {
|
1326 |
|
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 |
|
1353 |
|
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 |
|
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 |
|
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 |
|
1908 | Select$1.propTypes = {
|
1909 | 'aria-describedby': PropTypes.string,
|
1910 | 'aria-label': PropTypes.string,
|
1911 | 'aria-labelledby': PropTypes.string,
|
1912 | arrowRenderer: PropTypes.func,
|
1913 | autoBlur: PropTypes.bool,
|
1914 | autoFocus: PropTypes.bool,
|
1915 | autofocus: PropTypes.bool,
|
1916 | autosize: PropTypes.bool,
|
1917 | backspaceRemoves: PropTypes.bool,
|
1918 | backspaceToRemoveMessage: PropTypes.string,
|
1919 | className: PropTypes.string,
|
1920 | clearAllText: stringOrNode,
|
1921 | clearRenderer: PropTypes.func,
|
1922 | clearValueText: stringOrNode,
|
1923 | clearable: PropTypes.bool,
|
1924 | closeOnSelect: PropTypes.bool,
|
1925 | deleteRemoves: PropTypes.bool,
|
1926 | delimiter: PropTypes.string,
|
1927 | disabled: PropTypes.bool,
|
1928 | escapeClearsValue: PropTypes.bool,
|
1929 | filterOption: PropTypes.func,
|
1930 | filterOptions: PropTypes.any,
|
1931 | id: PropTypes.string,
|
1932 | ignoreAccents: PropTypes.bool,
|
1933 | ignoreCase: PropTypes.bool,
|
1934 | inputProps: PropTypes.object,
|
1935 | inputRenderer: PropTypes.func,
|
1936 | instanceId: PropTypes.string,
|
1937 | isLoading: PropTypes.bool,
|
1938 | joinValues: PropTypes.bool,
|
1939 | labelKey: PropTypes.string,
|
1940 | matchPos: PropTypes.string,
|
1941 | matchProp: PropTypes.string,
|
1942 | menuBuffer: PropTypes.number,
|
1943 | menuContainerStyle: PropTypes.object,
|
1944 | menuRenderer: PropTypes.func,
|
1945 | menuStyle: PropTypes.object,
|
1946 | multi: PropTypes.bool,
|
1947 | name: PropTypes.string,
|
1948 | noResultsText: stringOrNode,
|
1949 | onBlur: PropTypes.func,
|
1950 | onBlurResetsInput: PropTypes.bool,
|
1951 | onChange: PropTypes.func,
|
1952 | onClose: PropTypes.func,
|
1953 | onCloseResetsInput: PropTypes.bool,
|
1954 | onFocus: PropTypes.func,
|
1955 | onInputChange: PropTypes.func,
|
1956 | onInputKeyDown: PropTypes.func,
|
1957 | onMenuScrollToBottom: PropTypes.func,
|
1958 | onOpen: PropTypes.func,
|
1959 | onSelectResetsInput: PropTypes.bool,
|
1960 | onValueClick: PropTypes.func,
|
1961 | openOnClick: PropTypes.bool,
|
1962 | openOnFocus: PropTypes.bool,
|
1963 | optionClassName: PropTypes.string,
|
1964 | optionComponent: PropTypes.func,
|
1965 | optionRenderer: PropTypes.func,
|
1966 | options: PropTypes.array,
|
1967 | pageSize: PropTypes.number,
|
1968 | placeholder: stringOrNode,
|
1969 | removeSelected: PropTypes.bool,
|
1970 | required: PropTypes.bool,
|
1971 | resetValue: PropTypes.any,
|
1972 | rtl: PropTypes.bool,
|
1973 | scrollMenuIntoView: PropTypes.bool,
|
1974 | searchable: PropTypes.bool,
|
1975 | simpleValue: PropTypes.bool,
|
1976 | style: PropTypes.object,
|
1977 | tabIndex: stringOrNumber,
|
1978 | tabSelectsValue: PropTypes.bool,
|
1979 | trimFilter: PropTypes.bool,
|
1980 | value: PropTypes.any,
|
1981 | valueComponent: PropTypes.func,
|
1982 | valueKey: PropTypes.string,
|
1983 | valueRenderer: PropTypes.func,
|
1984 | wrapperStyle: PropTypes.object
|
1985 | };
|
1986 |
|
1987 | Select$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 |
|
2033 | var propTypes = {
|
2034 | autoload: PropTypes.bool.isRequired,
|
2035 | cache: PropTypes.any,
|
2036 | children: PropTypes.func.isRequired,
|
2037 | ignoreAccents: PropTypes.bool,
|
2038 | ignoreCase: PropTypes.bool,
|
2039 | loadOptions: PropTypes.func.isRequired,
|
2040 | loadingPlaceholder: PropTypes.oneOfType([
|
2041 | PropTypes.string, PropTypes.node]),
|
2042 | multi: PropTypes.bool,
|
2043 | noResultsText: PropTypes.oneOfType([
|
2044 | PropTypes.string, PropTypes.node]),
|
2045 | onChange: PropTypes.func,
|
2046 | onInputChange: PropTypes.func,
|
2047 | options: PropTypes.array.isRequired,
|
2048 | placeholder: PropTypes.oneOfType([
|
2049 | PropTypes.string, PropTypes.node]),
|
2050 | searchPromptText: PropTypes.oneOfType([
|
2051 | PropTypes.string, PropTypes.node]),
|
2052 | value: PropTypes.any
|
2053 | };
|
2054 |
|
2055 | var defaultCache = {};
|
2056 |
|
2057 | var defaultChildren = function defaultChildren(props) {
|
2058 | return React.createElement(Select$1, props);
|
2059 | };
|
2060 |
|
2061 | var 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 |
|
2072 | var 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 |
|
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 |
|
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 |
|
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 |
|
2262 | Async.propTypes = propTypes;
|
2263 | Async.defaultProps = defaultProps;
|
2264 |
|
2265 | var 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 |
|
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 |
|
2317 |
|
2318 |
|
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 |
|
2335 |
|
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 |
|
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 |
|
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 |
|
2442 |
|
2443 |
|
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 |
|
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 |
|
2475 | var defaultChildren$2 = function defaultChildren(props) {
|
2476 | return React.createElement(Select$1, props);
|
2477 | };
|
2478 |
|
2479 | var 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 |
|
2494 | var isValidNewOption = function isValidNewOption(_ref4) {
|
2495 | var label = _ref4.label;
|
2496 | return !!label;
|
2497 | };
|
2498 |
|
2499 | var 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 |
|
2512 | var promptTextCreator = function promptTextCreator(label) {
|
2513 | return 'Create option "' + label + '"';
|
2514 | };
|
2515 |
|
2516 | var shouldKeyDownEventCreateNewOption = function shouldKeyDownEventCreateNewOption(_ref6) {
|
2517 | var keyCode = _ref6.keyCode;
|
2518 |
|
2519 | switch (keyCode) {
|
2520 | case 9:
|
2521 | case 13:
|
2522 | case 188:
|
2523 |
|
2524 | return true;
|
2525 | default:
|
2526 | return false;
|
2527 | }
|
2528 | };
|
2529 |
|
2530 |
|
2531 | CreatableSelect.isOptionUnique = isOptionUnique;
|
2532 | CreatableSelect.isValidNewOption = isValidNewOption;
|
2533 | CreatableSelect.newOptionCreator = newOptionCreator;
|
2534 | CreatableSelect.promptTextCreator = promptTextCreator;
|
2535 | CreatableSelect.shouldKeyDownEventCreateNewOption = shouldKeyDownEventCreateNewOption;
|
2536 |
|
2537 | CreatableSelect.defaultProps = {
|
2538 | filterOptions: filterOptions,
|
2539 | isOptionUnique: isOptionUnique,
|
2540 | isValidNewOption: isValidNewOption,
|
2541 | menuRenderer: menuRenderer,
|
2542 | newOptionCreator: newOptionCreator,
|
2543 | promptTextCreator: promptTextCreator,
|
2544 | shouldKeyDownEventCreateNewOption: shouldKeyDownEventCreateNewOption
|
2545 | };
|
2546 |
|
2547 | CreatableSelect.propTypes = {
|
2548 |
|
2549 |
|
2550 |
|
2551 | children: PropTypes.func,
|
2552 |
|
2553 |
|
2554 | filterOptions: PropTypes.any,
|
2555 |
|
2556 |
|
2557 |
|
2558 |
|
2559 | isOptionUnique: PropTypes.func,
|
2560 |
|
2561 |
|
2562 |
|
2563 | isValidNewOption: PropTypes.func,
|
2564 |
|
2565 |
|
2566 | menuRenderer: PropTypes.any,
|
2567 |
|
2568 |
|
2569 |
|
2570 | newOptionCreator: PropTypes.func,
|
2571 |
|
2572 |
|
2573 | onInputChange: PropTypes.func,
|
2574 |
|
2575 |
|
2576 | onInputKeyDown: PropTypes.func,
|
2577 |
|
2578 |
|
2579 | onNewOptionClick: PropTypes.func,
|
2580 |
|
2581 |
|
2582 | options: PropTypes.array,
|
2583 |
|
2584 |
|
2585 |
|
2586 | promptTextCreator: PropTypes.func,
|
2587 |
|
2588 | ref: PropTypes.func,
|
2589 |
|
2590 |
|
2591 | shouldKeyDownEventCreateNewOption: PropTypes.func
|
2592 | };
|
2593 |
|
2594 | var 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 |
|
2644 | var defaultChildren$1 = function defaultChildren(props) {
|
2645 | return React.createElement(Select$1, props);
|
2646 | };
|
2647 |
|
2648 | AsyncCreatableSelect.propTypes = {
|
2649 | children: PropTypes.func.isRequired
|
2650 | };
|
2651 |
|
2652 | AsyncCreatableSelect.defaultProps = {
|
2653 | children: defaultChildren$1
|
2654 | };
|
2655 |
|
2656 | Select$1.Async = Async;
|
2657 | Select$1.AsyncCreatable = AsyncCreatableSelect;
|
2658 | Select$1.Creatable = CreatableSelect;
|
2659 | Select$1.Value = Value;
|
2660 | Select$1.Option = Option;
|
2661 |
|
2662 | export { Async, AsyncCreatableSelect as AsyncCreatable, CreatableSelect as Creatable, Value, Option, menuRenderer as defaultMenuRenderer, arrowRenderer as defaultArrowRenderer, clearRenderer as defaultClearRenderer, filterOptions as defaultFilterOptions };
|
2663 | export default Select$1;
|