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