Select.js 58 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import KeyCode from '../_util/KeyCode';
  5. import PropTypes from '../_util/vue-types';
  6. import classnames from 'classnames';
  7. import classes from 'component-classes';
  8. import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu';
  9. import warning from 'warning';
  10. import Vue from 'vue';
  11. import Option from './Option';
  12. import OptGroup from './OptGroup';
  13. import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs, getOptionProps, getSlots, getListeners } from '../_util/props-util';
  14. import getTransitionProps from '../_util/getTransitionProps';
  15. import { cloneElement } from '../_util/vnode';
  16. import BaseMixin from '../_util/BaseMixin';
  17. import proxyComponent from '../_util/proxyComponent';
  18. import ref from 'vue-ref';
  19. import SelectTrigger from './SelectTrigger';
  20. import { defaultFilterFn, findFirstMenuItem, findIndexInValueBySingleValue, generateUUID, getLabelFromPropsValue, getMapKey, getPropValue, getValuePropValue, includesSeparators, isCombobox, isMultipleOrTags, isMultipleOrTagsOrCombobox, isSingleMode, preventDefaultEvent, saveRef, splitBySeparators, toArray, toTitle, UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE, validateOptionValue } from './util';
  21. import { SelectPropTypes } from './PropTypes';
  22. import contains from '../vc-util/Dom/contains';
  23. import { isIE, isEdge } from '../_util/env';
  24. Vue.use(ref, { name: 'ant-ref' });
  25. var SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY';
  26. var noop = function noop() {
  27. return null;
  28. };
  29. // Where el is the DOM element you'd like to test for visibility
  30. function isHidden(node) {
  31. return !node || node.offsetParent === null;
  32. }
  33. function chaining() {
  34. for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
  35. fns[_key] = arguments[_key];
  36. }
  37. return function () {
  38. for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  39. args[_key2] = arguments[_key2];
  40. }
  41. // eslint-disable-line
  42. // eslint-disable-line
  43. for (var i = 0; i < fns.length; i++) {
  44. if (fns[i] && typeof fns[i] === 'function') {
  45. fns[i].apply(chaining, args);
  46. }
  47. }
  48. };
  49. }
  50. var Select = {
  51. inheritAttrs: false,
  52. Option: Option,
  53. OptGroup: OptGroup,
  54. name: 'Select',
  55. mixins: [BaseMixin],
  56. props: _extends({}, SelectPropTypes, {
  57. prefixCls: SelectPropTypes.prefixCls.def('rc-select'),
  58. defaultOpen: PropTypes.bool.def(false),
  59. labelInValue: SelectPropTypes.labelInValue.def(false),
  60. defaultActiveFirstOption: SelectPropTypes.defaultActiveFirstOption.def(true),
  61. showSearch: SelectPropTypes.showSearch.def(true),
  62. allowClear: SelectPropTypes.allowClear.def(false),
  63. placeholder: SelectPropTypes.placeholder.def(''),
  64. // showArrow: SelectPropTypes.showArrow.def(true),
  65. dropdownMatchSelectWidth: PropTypes.bool.def(true),
  66. dropdownStyle: SelectPropTypes.dropdownStyle.def(function () {
  67. return {};
  68. }),
  69. dropdownMenuStyle: PropTypes.object.def(function () {
  70. return {};
  71. }),
  72. optionFilterProp: SelectPropTypes.optionFilterProp.def('value'),
  73. optionLabelProp: SelectPropTypes.optionLabelProp.def('value'),
  74. notFoundContent: PropTypes.any.def('Not Found'),
  75. backfill: PropTypes.bool.def(false),
  76. showAction: SelectPropTypes.showAction.def(['click']),
  77. combobox: PropTypes.bool.def(false),
  78. tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
  79. autoClearSearchValue: PropTypes.bool.def(true),
  80. tabIndex: PropTypes.any.def(0),
  81. dropdownRender: PropTypes.func.def(function (menu) {
  82. return menu;
  83. })
  84. // onChange: noop,
  85. // onFocus: noop,
  86. // onBlur: noop,
  87. // onSelect: noop,
  88. // onSearch: noop,
  89. // onDeselect: noop,
  90. // onInputKeydown: noop,
  91. }),
  92. model: {
  93. prop: 'value',
  94. event: 'change'
  95. },
  96. created: function created() {
  97. this.saveInputRef = saveRef(this, 'inputRef');
  98. this.saveInputMirrorRef = saveRef(this, 'inputMirrorRef');
  99. this.saveTopCtrlRef = saveRef(this, 'topCtrlRef');
  100. this.saveSelectTriggerRef = saveRef(this, 'selectTriggerRef');
  101. this.saveRootRef = saveRef(this, 'rootRef');
  102. this.saveSelectionRef = saveRef(this, 'selectionRef');
  103. this._focused = false;
  104. this._mouseDown = false;
  105. this._options = [];
  106. this._empty = false;
  107. },
  108. data: function data() {
  109. var props = getOptionProps(this);
  110. var optionsInfo = this.getOptionsInfoFromProps(props);
  111. warning(this.__propsSymbol__, 'Replace slots.default with props.children and pass props.__propsSymbol__');
  112. if (props.tags && typeof props.filterOption !== 'function') {
  113. var isDisabledExist = Object.keys(optionsInfo).some(function (key) {
  114. return optionsInfo[key].disabled;
  115. });
  116. warning(!isDisabledExist, 'Please avoid setting option to disabled in tags mode since user can always type text as tag.');
  117. }
  118. var state = {
  119. _value: this.getValueFromProps(props, true), // true: use default value
  120. _inputValue: props.combobox ? this.getInputValueForCombobox(props, optionsInfo, true // use default value
  121. ) : '',
  122. _open: props.defaultOpen,
  123. _optionsInfo: optionsInfo,
  124. _backfillValue: '',
  125. // a flag for aviod redundant getOptionsInfoFromProps call
  126. _skipBuildOptionsInfo: true,
  127. _ariaId: generateUUID()
  128. };
  129. return _extends({}, state, {
  130. _mirrorInputValue: state._inputValue }, this.getDerivedState(props, state));
  131. },
  132. mounted: function mounted() {
  133. var _this = this;
  134. this.$nextTick(function () {
  135. // when defaultOpen is true, we should auto focus search input
  136. // https://github.com/ant-design/ant-design/issues/14254
  137. if (_this.autoFocus || _this._open) {
  138. _this.focus();
  139. }
  140. // this.setState({
  141. // _ariaId: generateUUID(),
  142. // });
  143. });
  144. },
  145. watch: {
  146. __propsSymbol__: function __propsSymbol__() {
  147. _extends(this.$data, this.getDerivedState(getOptionProps(this), this.$data));
  148. },
  149. '$data._inputValue': function $data_inputValue(val) {
  150. this.$data._mirrorInputValue = val;
  151. }
  152. },
  153. updated: function updated() {
  154. var _this2 = this;
  155. this.$nextTick(function () {
  156. if (isMultipleOrTags(_this2.$props)) {
  157. var inputNode = _this2.getInputDOMNode();
  158. var mirrorNode = _this2.getInputMirrorDOMNode();
  159. if (inputNode && inputNode.value && mirrorNode) {
  160. inputNode.style.width = '';
  161. inputNode.style.width = mirrorNode.clientWidth + 10 + 'px';
  162. } else if (inputNode) {
  163. inputNode.style.width = '';
  164. }
  165. }
  166. _this2.forcePopupAlign();
  167. });
  168. },
  169. beforeDestroy: function beforeDestroy() {
  170. this.clearFocusTime();
  171. this.clearBlurTime();
  172. this.clearComboboxTime();
  173. if (this.dropdownContainer) {
  174. document.body.removeChild(this.dropdownContainer);
  175. this.dropdownContainer = null;
  176. }
  177. },
  178. methods: {
  179. getDerivedState: function getDerivedState(nextProps, prevState) {
  180. var optionsInfo = prevState._skipBuildOptionsInfo ? prevState._optionsInfo : this.getOptionsInfoFromProps(nextProps, prevState);
  181. var newState = {
  182. _optionsInfo: optionsInfo,
  183. _skipBuildOptionsInfo: false
  184. };
  185. if ('open' in nextProps) {
  186. newState._open = nextProps.open;
  187. }
  188. if ('value' in nextProps) {
  189. var value = this.getValueFromProps(nextProps);
  190. newState._value = value;
  191. if (nextProps.combobox) {
  192. newState._inputValue = this.getInputValueForCombobox(nextProps, optionsInfo);
  193. }
  194. }
  195. return newState;
  196. },
  197. getOptionsFromChildren: function getOptionsFromChildren() {
  198. var _this3 = this;
  199. var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  200. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  201. children.forEach(function (child) {
  202. if (!child.data || child.data.slot !== undefined) {
  203. return;
  204. }
  205. if (getSlotOptions(child).isSelectOptGroup) {
  206. _this3.getOptionsFromChildren(child.componentOptions.children, options);
  207. } else {
  208. options.push(child);
  209. }
  210. });
  211. return options;
  212. },
  213. getInputValueForCombobox: function getInputValueForCombobox(props, optionsInfo, useDefaultValue) {
  214. var value = [];
  215. if ('value' in props && !useDefaultValue) {
  216. value = toArray(props.value);
  217. }
  218. if ('defaultValue' in props && useDefaultValue) {
  219. value = toArray(props.defaultValue);
  220. }
  221. if (value.length) {
  222. value = value[0];
  223. } else {
  224. return '';
  225. }
  226. var label = value;
  227. if (props.labelInValue) {
  228. label = value.label;
  229. } else if (optionsInfo[getMapKey(value)]) {
  230. label = optionsInfo[getMapKey(value)].label;
  231. }
  232. if (label === undefined) {
  233. label = '';
  234. }
  235. return label;
  236. },
  237. getLabelFromOption: function getLabelFromOption(props, option) {
  238. return getPropValue(option, props.optionLabelProp);
  239. },
  240. getOptionsInfoFromProps: function getOptionsInfoFromProps(props, preState) {
  241. var _this4 = this;
  242. var options = this.getOptionsFromChildren(this.$props.children);
  243. var optionsInfo = {};
  244. options.forEach(function (option) {
  245. var singleValue = getValuePropValue(option);
  246. optionsInfo[getMapKey(singleValue)] = {
  247. option: option,
  248. value: singleValue,
  249. label: _this4.getLabelFromOption(props, option),
  250. title: getValue(option, 'title'),
  251. disabled: getValue(option, 'disabled')
  252. };
  253. });
  254. if (preState) {
  255. // keep option info in pre state value.
  256. var oldOptionsInfo = preState._optionsInfo;
  257. var value = preState._value;
  258. if (value) {
  259. value.forEach(function (v) {
  260. var key = getMapKey(v);
  261. if (!optionsInfo[key] && oldOptionsInfo[key] !== undefined) {
  262. optionsInfo[key] = oldOptionsInfo[key];
  263. }
  264. });
  265. }
  266. }
  267. return optionsInfo;
  268. },
  269. getValueFromProps: function getValueFromProps(props, useDefaultValue) {
  270. var value = [];
  271. if ('value' in props && !useDefaultValue) {
  272. value = toArray(props.value);
  273. }
  274. if ('defaultValue' in props && useDefaultValue) {
  275. value = toArray(props.defaultValue);
  276. }
  277. if (props.labelInValue) {
  278. value = value.map(function (v) {
  279. return v.key;
  280. });
  281. }
  282. return value;
  283. },
  284. onInputChange: function onInputChange(e) {
  285. var _e$target = e.target,
  286. val = _e$target.value,
  287. composing = _e$target.composing;
  288. var _$data$_inputValue = this.$data._inputValue,
  289. _inputValue = _$data$_inputValue === undefined ? '' : _$data$_inputValue;
  290. if (e.isComposing || composing || _inputValue === val) {
  291. this.setState({
  292. _mirrorInputValue: val
  293. });
  294. return;
  295. }
  296. var tokenSeparators = this.$props.tokenSeparators;
  297. if (isMultipleOrTags(this.$props) && tokenSeparators.length && includesSeparators(val, tokenSeparators)) {
  298. var nextValue = this.getValueByInput(val);
  299. if (nextValue !== undefined) {
  300. this.fireChange(nextValue);
  301. }
  302. this.setOpenState(false, { needFocus: true });
  303. this.setInputValue('', false);
  304. return;
  305. }
  306. this.setInputValue(val);
  307. this.setState({
  308. _open: true
  309. });
  310. if (isCombobox(this.$props)) {
  311. this.fireChange([val]);
  312. }
  313. },
  314. onDropdownVisibleChange: function onDropdownVisibleChange(open) {
  315. if (open && !this._focused) {
  316. this.clearBlurTime();
  317. this.timeoutFocus();
  318. this._focused = true;
  319. this.updateFocusClassName();
  320. }
  321. this.setOpenState(open);
  322. },
  323. // combobox ignore
  324. onKeyDown: function onKeyDown(event) {
  325. var open = this.$data._open;
  326. var disabled = this.$props.disabled;
  327. if (disabled) {
  328. return;
  329. }
  330. var keyCode = event.keyCode;
  331. if (open && !this.getInputDOMNode()) {
  332. this.onInputKeydown(event);
  333. } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
  334. // vue state是同步更新,onKeyDown在onMenuSelect后会再次调用,单选时不在调用setOpenState
  335. // https://github.com/vueComponent/ant-design-vue/issues/1142
  336. if (keyCode === KeyCode.ENTER && !isMultipleOrTags(this.$props)) {
  337. this.maybeFocus(true);
  338. } else if (!open) {
  339. this.setOpenState(true);
  340. }
  341. event.preventDefault();
  342. } else if (keyCode === KeyCode.SPACE) {
  343. // Not block space if popup is shown
  344. if (!open) {
  345. this.setOpenState(true);
  346. event.preventDefault();
  347. }
  348. }
  349. },
  350. onInputKeydown: function onInputKeydown(event) {
  351. var _this5 = this;
  352. var _$props = this.$props,
  353. disabled = _$props.disabled,
  354. combobox = _$props.combobox,
  355. defaultActiveFirstOption = _$props.defaultActiveFirstOption;
  356. if (disabled) {
  357. return;
  358. }
  359. var state = this.$data;
  360. var isRealOpen = this.getRealOpenState(state);
  361. var keyCode = event.keyCode;
  362. if (isMultipleOrTags(this.$props) && !event.target.value && keyCode === KeyCode.BACKSPACE) {
  363. event.preventDefault();
  364. var value = state._value;
  365. if (value.length) {
  366. this.removeSelected(value[value.length - 1]);
  367. }
  368. return;
  369. }
  370. if (keyCode === KeyCode.DOWN) {
  371. if (!state._open) {
  372. this.openIfHasChildren();
  373. event.preventDefault();
  374. event.stopPropagation();
  375. return;
  376. }
  377. } else if (keyCode === KeyCode.ENTER && state._open) {
  378. // Aviod trigger form submit when select item
  379. // https://github.com/ant-design/ant-design/issues/10861
  380. // https://github.com/ant-design/ant-design/issues/14544
  381. if (isRealOpen || !combobox) {
  382. event.preventDefault();
  383. }
  384. // Hard close popup to avoid lock of non option in combobox mode
  385. if (isRealOpen && combobox && defaultActiveFirstOption === false) {
  386. this.comboboxTimer = setTimeout(function () {
  387. _this5.setOpenState(false);
  388. });
  389. }
  390. } else if (keyCode === KeyCode.ESC) {
  391. if (state._open) {
  392. this.setOpenState(false);
  393. event.preventDefault();
  394. event.stopPropagation();
  395. }
  396. return;
  397. }
  398. if (isRealOpen && this.selectTriggerRef) {
  399. var menu = this.selectTriggerRef.getInnerMenu();
  400. if (menu && menu.onKeyDown(event, this.handleBackfill)) {
  401. event.preventDefault();
  402. event.stopPropagation();
  403. }
  404. }
  405. },
  406. onMenuSelect: function onMenuSelect(_ref) {
  407. var item = _ref.item;
  408. if (!item) {
  409. return;
  410. }
  411. var value = this.$data._value;
  412. var props = this.$props;
  413. var selectedValue = getValuePropValue(item);
  414. var lastValue = value[value.length - 1];
  415. var skipTrigger = false;
  416. if (isMultipleOrTags(props)) {
  417. if (findIndexInValueBySingleValue(value, selectedValue) !== -1) {
  418. skipTrigger = true;
  419. } else {
  420. value = value.concat([selectedValue]);
  421. }
  422. } else {
  423. if (!isCombobox(props) && lastValue !== undefined && lastValue === selectedValue && selectedValue !== this.$data._backfillValue) {
  424. this.setOpenState(false, { needFocus: true, fireSearch: false });
  425. skipTrigger = true;
  426. } else {
  427. value = [selectedValue];
  428. this.setOpenState(false, { needFocus: true, fireSearch: false });
  429. }
  430. }
  431. if (!skipTrigger) {
  432. this.fireChange(value);
  433. }
  434. if (!skipTrigger) {
  435. this.fireSelect(selectedValue);
  436. var inputValue = isCombobox(props) ? getPropValue(item, props.optionLabelProp) : '';
  437. if (props.autoClearSearchValue) {
  438. this.setInputValue(inputValue, false);
  439. }
  440. }
  441. },
  442. onMenuDeselect: function onMenuDeselect(_ref2) {
  443. var item = _ref2.item,
  444. domEvent = _ref2.domEvent;
  445. if (domEvent.type === 'keydown' && domEvent.keyCode === KeyCode.ENTER) {
  446. var menuItemDomNode = item.$el;
  447. // https://github.com/ant-design/ant-design/issues/20465#issuecomment-569033796
  448. if (!isHidden(menuItemDomNode)) {
  449. this.removeSelected(getValuePropValue(item));
  450. }
  451. return;
  452. }
  453. if (domEvent.type === 'click') {
  454. this.removeSelected(getValuePropValue(item));
  455. }
  456. if (this.autoClearSearchValue) {
  457. this.setInputValue('');
  458. }
  459. },
  460. onArrowClick: function onArrowClick(e) {
  461. e.stopPropagation();
  462. e.preventDefault();
  463. this.clearBlurTime();
  464. if (!this.disabled) {
  465. this.setOpenState(!this.$data._open, { needFocus: !this.$data._open });
  466. }
  467. },
  468. onPlaceholderClick: function onPlaceholderClick() {
  469. if (this.getInputDOMNode() && this.getInputDOMNode()) {
  470. this.getInputDOMNode().focus();
  471. }
  472. },
  473. onPopupFocus: function onPopupFocus() {
  474. // fix ie scrollbar, focus element again
  475. this.maybeFocus(true, true);
  476. },
  477. onClearSelection: function onClearSelection(event) {
  478. var props = this.$props;
  479. var state = this.$data;
  480. if (props.disabled) {
  481. return;
  482. }
  483. var inputValue = state._inputValue,
  484. value = state._value;
  485. event.stopPropagation();
  486. if (inputValue || value.length) {
  487. if (value.length) {
  488. this.fireChange([]);
  489. }
  490. this.setOpenState(false, { needFocus: true });
  491. if (inputValue) {
  492. this.setInputValue('');
  493. }
  494. }
  495. },
  496. onChoiceAnimationLeave: function onChoiceAnimationLeave() {
  497. this.forcePopupAlign();
  498. },
  499. getOptionInfoBySingleValue: function getOptionInfoBySingleValue(value, optionsInfo) {
  500. var h = this.$createElement;
  501. var info = void 0;
  502. optionsInfo = optionsInfo || this.$data._optionsInfo;
  503. if (optionsInfo[getMapKey(value)]) {
  504. info = optionsInfo[getMapKey(value)];
  505. }
  506. if (info) {
  507. return info;
  508. }
  509. var defaultLabel = value;
  510. if (this.$props.labelInValue) {
  511. var valueLabel = getLabelFromPropsValue(this.$props.value, value);
  512. var defaultValueLabel = getLabelFromPropsValue(this.$props.defaultValue, value);
  513. if (valueLabel !== undefined) {
  514. defaultLabel = valueLabel;
  515. } else if (defaultValueLabel !== undefined) {
  516. defaultLabel = defaultValueLabel;
  517. }
  518. }
  519. var defaultInfo = {
  520. option: h(
  521. Option,
  522. {
  523. attrs: { value: value },
  524. key: value },
  525. [value]
  526. ),
  527. value: value,
  528. label: defaultLabel
  529. };
  530. return defaultInfo;
  531. },
  532. getOptionBySingleValue: function getOptionBySingleValue(value) {
  533. var _getOptionInfoBySingl = this.getOptionInfoBySingleValue(value),
  534. option = _getOptionInfoBySingl.option;
  535. return option;
  536. },
  537. getOptionsBySingleValue: function getOptionsBySingleValue(values) {
  538. var _this6 = this;
  539. return values.map(function (value) {
  540. return _this6.getOptionBySingleValue(value);
  541. });
  542. },
  543. getValueByLabel: function getValueByLabel(label) {
  544. var _this7 = this;
  545. if (label === undefined) {
  546. return null;
  547. }
  548. var value = null;
  549. Object.keys(this.$data._optionsInfo).forEach(function (key) {
  550. var info = _this7.$data._optionsInfo[key];
  551. var disabled = info.disabled;
  552. if (disabled) {
  553. return;
  554. }
  555. var oldLable = toArray(info.label);
  556. if (oldLable && oldLable.join('') === label) {
  557. value = info.value;
  558. }
  559. });
  560. return value;
  561. },
  562. getVLBySingleValue: function getVLBySingleValue(value) {
  563. if (this.$props.labelInValue) {
  564. return {
  565. key: value,
  566. label: this.getLabelBySingleValue(value)
  567. };
  568. }
  569. return value;
  570. },
  571. getVLForOnChange: function getVLForOnChange(vlsS) {
  572. var _this8 = this;
  573. var vls = vlsS;
  574. if (vls !== undefined) {
  575. if (!this.labelInValue) {
  576. vls = vls.map(function (v) {
  577. return v;
  578. });
  579. } else {
  580. vls = vls.map(function (vl) {
  581. return {
  582. key: vl,
  583. label: _this8.getLabelBySingleValue(vl)
  584. };
  585. });
  586. }
  587. return isMultipleOrTags(this.$props) ? vls : vls[0];
  588. }
  589. return vls;
  590. },
  591. getLabelBySingleValue: function getLabelBySingleValue(value, optionsInfo) {
  592. var _getOptionInfoBySingl2 = this.getOptionInfoBySingleValue(value, optionsInfo),
  593. label = _getOptionInfoBySingl2.label;
  594. return label;
  595. },
  596. getDropdownContainer: function getDropdownContainer() {
  597. if (!this.dropdownContainer) {
  598. this.dropdownContainer = document.createElement('div');
  599. document.body.appendChild(this.dropdownContainer);
  600. }
  601. return this.dropdownContainer;
  602. },
  603. getPlaceholderElement: function getPlaceholderElement() {
  604. var h = this.$createElement;
  605. var props = this.$props,
  606. state = this.$data;
  607. var hidden = false;
  608. if (state._mirrorInputValue) {
  609. hidden = true;
  610. }
  611. var value = state._value;
  612. if (value.length) {
  613. hidden = true;
  614. }
  615. if (!state._mirrorInputValue && isCombobox(props) && value.length === 1 && state._value && !state._value[0]) {
  616. hidden = false;
  617. }
  618. var placeholder = props.placeholder;
  619. if (placeholder) {
  620. var p = {
  621. on: {
  622. mousedown: preventDefaultEvent,
  623. click: this.onPlaceholderClick
  624. },
  625. attrs: UNSELECTABLE_ATTRIBUTE,
  626. style: _extends({
  627. display: hidden ? 'none' : 'block'
  628. }, UNSELECTABLE_STYLE),
  629. 'class': props.prefixCls + '-selection__placeholder'
  630. };
  631. return h(
  632. 'div',
  633. p,
  634. [placeholder]
  635. );
  636. }
  637. return null;
  638. },
  639. inputClick: function inputClick(e) {
  640. if (this.$data._open) {
  641. this.clearBlurTime();
  642. e.stopPropagation();
  643. } else {
  644. this._focused = false;
  645. }
  646. },
  647. inputBlur: function inputBlur(e) {
  648. var _this9 = this;
  649. var target = e.relatedTarget || document.activeElement;
  650. // https://github.com/vueComponent/ant-design-vue/issues/999
  651. // https://github.com/vueComponent/ant-design-vue/issues/1223
  652. if ((isIE || isEdge) && (e.relatedTarget === this.$refs.arrow || target && this.selectTriggerRef && this.selectTriggerRef.getInnerMenu() && this.selectTriggerRef.getInnerMenu().$el === target || contains(e.target, target))) {
  653. e.target.focus();
  654. e.preventDefault();
  655. return;
  656. }
  657. this.clearBlurTime();
  658. if (this.disabled) {
  659. e.preventDefault();
  660. return;
  661. }
  662. this.blurTimer = setTimeout(function () {
  663. _this9._focused = false;
  664. _this9.updateFocusClassName();
  665. var props = _this9.$props;
  666. var value = _this9.$data._value;
  667. var inputValue = _this9.$data._inputValue;
  668. if (isSingleMode(props) && props.showSearch && inputValue && props.defaultActiveFirstOption) {
  669. var options = _this9._options || [];
  670. if (options.length) {
  671. var firstOption = findFirstMenuItem(options);
  672. if (firstOption) {
  673. value = [getValuePropValue(firstOption)];
  674. _this9.fireChange(value);
  675. }
  676. }
  677. } else if (isMultipleOrTags(props) && inputValue) {
  678. if (_this9._mouseDown) {
  679. // need update dropmenu when not blur
  680. _this9.setInputValue('');
  681. } else {
  682. // why not use setState?
  683. _this9.$data._inputValue = '';
  684. if (_this9.getInputDOMNode && _this9.getInputDOMNode()) {
  685. _this9.getInputDOMNode().value = '';
  686. }
  687. }
  688. var tmpValue = _this9.getValueByInput(inputValue);
  689. if (tmpValue !== undefined) {
  690. value = tmpValue;
  691. _this9.fireChange(value);
  692. }
  693. }
  694. // if click the rest space of Select in multiple mode
  695. if (isMultipleOrTags(props) && _this9._mouseDown) {
  696. _this9.maybeFocus(true, true);
  697. _this9._mouseDown = false;
  698. return;
  699. }
  700. _this9.setOpenState(false);
  701. _this9.$emit('blur', _this9.getVLForOnChange(value));
  702. }, 200);
  703. },
  704. inputFocus: function inputFocus(e) {
  705. if (this.$props.disabled) {
  706. e.preventDefault();
  707. return;
  708. }
  709. this.clearBlurTime();
  710. // In IE11, onOuterFocus will be trigger twice when focus input
  711. // First one: e.target is div
  712. // Second one: e.target is input
  713. // other browser only trigger second one
  714. // https://github.com/ant-design/ant-design/issues/15942
  715. // Here we ignore the first one when e.target is div
  716. var inputNode = this.getInputDOMNode();
  717. if (inputNode && e.target === this.rootRef) {
  718. return;
  719. }
  720. if (!isMultipleOrTagsOrCombobox(this.$props) && e.target === inputNode) {
  721. return;
  722. }
  723. if (this._focused) {
  724. return;
  725. }
  726. this._focused = true;
  727. this.updateFocusClassName();
  728. // only effect multiple or tag mode
  729. if (!isMultipleOrTags(this.$props) || !this._mouseDown) {
  730. this.timeoutFocus();
  731. }
  732. },
  733. _getInputElement: function _getInputElement() {
  734. var h = this.$createElement;
  735. var props = this.$props;
  736. var _$data = this.$data,
  737. inputValue = _$data._inputValue,
  738. _mirrorInputValue = _$data._mirrorInputValue;
  739. var attrs = getAttrs(this);
  740. var defaultInput = h('input', {
  741. attrs: { id: attrs.id, autoComplete: 'off' }
  742. });
  743. var inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
  744. var inputCls = classnames(getClass(inputElement), _defineProperty({}, props.prefixCls + '-search__field', true));
  745. var inputEvents = getEvents(inputElement);
  746. // https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
  747. // Add space to the end of the inputValue as the width measurement tolerance
  748. inputElement.data = inputElement.data || {};
  749. return h(
  750. 'div',
  751. { 'class': props.prefixCls + '-search__field__wrap', on: {
  752. 'click': this.inputClick
  753. }
  754. },
  755. [cloneElement(inputElement, {
  756. props: {
  757. disabled: props.disabled,
  758. value: inputValue
  759. },
  760. attrs: _extends({}, inputElement.data.attrs || {}, {
  761. disabled: props.disabled,
  762. value: inputValue
  763. }),
  764. domProps: {
  765. value: inputValue
  766. },
  767. 'class': inputCls,
  768. directives: [{
  769. name: 'ant-ref',
  770. value: this.saveInputRef
  771. }, {
  772. name: 'ant-input'
  773. }],
  774. on: {
  775. input: this.onInputChange,
  776. keydown: chaining(this.onInputKeydown, inputEvents.keydown, getListeners(this).inputKeydown),
  777. focus: chaining(this.inputFocus, inputEvents.focus),
  778. blur: chaining(this.inputBlur, inputEvents.blur)
  779. }
  780. }), h(
  781. 'span',
  782. _mergeJSXProps([{
  783. directives: [{
  784. name: 'ant-ref',
  785. value: this.saveInputMirrorRef
  786. }]
  787. }, {
  788. // ref='inputMirrorRef'
  789. 'class': props.prefixCls + '-search__field__mirror'
  790. }]),
  791. [_mirrorInputValue, '\xA0']
  792. )]
  793. );
  794. },
  795. getInputDOMNode: function getInputDOMNode() {
  796. return this.topCtrlRef ? this.topCtrlRef.querySelector('input,textarea,div[contentEditable]') : this.inputRef;
  797. },
  798. getInputMirrorDOMNode: function getInputMirrorDOMNode() {
  799. return this.inputMirrorRef;
  800. },
  801. getPopupDOMNode: function getPopupDOMNode() {
  802. if (this.selectTriggerRef) {
  803. return this.selectTriggerRef.getPopupDOMNode();
  804. }
  805. },
  806. getPopupMenuComponent: function getPopupMenuComponent() {
  807. if (this.selectTriggerRef) {
  808. return this.selectTriggerRef.getInnerMenu();
  809. }
  810. },
  811. setOpenState: function setOpenState(open) {
  812. var _this10 = this;
  813. var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  814. var props = this.$props,
  815. state = this.$data;
  816. var needFocus = config.needFocus,
  817. fireSearch = config.fireSearch;
  818. if (state._open === open) {
  819. this.maybeFocus(open, !!needFocus);
  820. return;
  821. }
  822. this.__emit('dropdownVisibleChange', open);
  823. var nextState = {
  824. _open: open,
  825. _backfillValue: ''
  826. };
  827. // clear search input value when open is false in singleMode.
  828. if (!open && isSingleMode(props) && props.showSearch) {
  829. this.setInputValue('', fireSearch);
  830. }
  831. if (!open) {
  832. this.maybeFocus(open, !!needFocus);
  833. }
  834. this.setState(nextState, function () {
  835. if (open) {
  836. _this10.maybeFocus(open, !!needFocus);
  837. }
  838. });
  839. },
  840. setInputValue: function setInputValue(inputValue) {
  841. var fireSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  842. if (inputValue !== this.$data._inputValue) {
  843. this.setState({
  844. _inputValue: inputValue
  845. }, this.forcePopupAlign);
  846. if (fireSearch) {
  847. this.$emit('search', inputValue);
  848. }
  849. }
  850. },
  851. getValueByInput: function getValueByInput(str) {
  852. var _this11 = this;
  853. var _$props2 = this.$props,
  854. multiple = _$props2.multiple,
  855. tokenSeparators = _$props2.tokenSeparators;
  856. var nextValue = this.$data._value;
  857. var hasNewValue = false;
  858. splitBySeparators(str, tokenSeparators).forEach(function (label) {
  859. var selectedValue = [label];
  860. if (multiple) {
  861. var value = _this11.getValueByLabel(label);
  862. if (value && findIndexInValueBySingleValue(nextValue, value) === -1) {
  863. nextValue = nextValue.concat(value);
  864. hasNewValue = true;
  865. _this11.fireSelect(value);
  866. }
  867. } else if (findIndexInValueBySingleValue(nextValue, label) === -1) {
  868. nextValue = nextValue.concat(selectedValue);
  869. hasNewValue = true;
  870. _this11.fireSelect(label);
  871. }
  872. });
  873. return hasNewValue ? nextValue : undefined;
  874. },
  875. getRealOpenState: function getRealOpenState(state) {
  876. var _open = this.$props.open;
  877. if (typeof _open === 'boolean') {
  878. return _open;
  879. }
  880. var open = (state || this.$data)._open;
  881. var options = this._options || [];
  882. if (isMultipleOrTagsOrCombobox(this.$props) || !this.$props.showSearch) {
  883. if (open && !options.length) {
  884. open = false;
  885. }
  886. }
  887. return open;
  888. },
  889. focus: function focus() {
  890. if (isSingleMode(this.$props) && this.selectionRef) {
  891. this.selectionRef.focus();
  892. } else if (this.getInputDOMNode()) {
  893. this.getInputDOMNode().focus();
  894. }
  895. },
  896. blur: function blur() {
  897. if (isSingleMode(this.$props) && this.selectionRef) {
  898. this.selectionRef.blur();
  899. } else if (this.getInputDOMNode()) {
  900. this.getInputDOMNode().blur();
  901. }
  902. },
  903. markMouseDown: function markMouseDown() {
  904. this._mouseDown = true;
  905. },
  906. markMouseLeave: function markMouseLeave() {
  907. this._mouseDown = false;
  908. },
  909. handleBackfill: function handleBackfill(item) {
  910. if (!this.backfill || !(isSingleMode(this.$props) || isCombobox(this.$props))) {
  911. return;
  912. }
  913. var key = getValuePropValue(item);
  914. if (isCombobox(this.$props)) {
  915. this.setInputValue(key, false);
  916. }
  917. this.setState({
  918. _value: [key],
  919. _backfillValue: key
  920. });
  921. },
  922. _filterOption: function _filterOption(input, child) {
  923. var defaultFilter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultFilterFn;
  924. var _$data2 = this.$data,
  925. value = _$data2._value,
  926. backfillValue = _$data2._backfillValue;
  927. var lastValue = value[value.length - 1];
  928. if (!input || lastValue && lastValue === backfillValue) {
  929. return true;
  930. }
  931. var filterFn = this.$props.filterOption;
  932. if (hasProp(this, 'filterOption')) {
  933. if (filterFn === true) {
  934. filterFn = defaultFilter.bind(this);
  935. }
  936. } else {
  937. filterFn = defaultFilter.bind(this);
  938. }
  939. if (!filterFn) {
  940. return true;
  941. } else if (typeof filterFn === 'function') {
  942. return filterFn.call(this, input, child);
  943. } else if (getValue(child, 'disabled')) {
  944. return false;
  945. }
  946. return true;
  947. },
  948. timeoutFocus: function timeoutFocus() {
  949. var _this12 = this;
  950. if (this.focusTimer) {
  951. this.clearFocusTime();
  952. }
  953. this.focusTimer = window.setTimeout(function () {
  954. // this._focused = true
  955. // this.updateFocusClassName()
  956. _this12.$emit('focus');
  957. }, 10);
  958. },
  959. clearFocusTime: function clearFocusTime() {
  960. if (this.focusTimer) {
  961. clearTimeout(this.focusTimer);
  962. this.focusTimer = null;
  963. }
  964. },
  965. clearBlurTime: function clearBlurTime() {
  966. if (this.blurTimer) {
  967. clearTimeout(this.blurTimer);
  968. this.blurTimer = null;
  969. }
  970. },
  971. clearComboboxTime: function clearComboboxTime() {
  972. if (this.comboboxTimer) {
  973. clearTimeout(this.comboboxTimer);
  974. this.comboboxTimer = null;
  975. }
  976. },
  977. updateFocusClassName: function updateFocusClassName() {
  978. var rootRef = this.rootRef,
  979. prefixCls = this.prefixCls;
  980. // avoid setState and its side effect
  981. if (this._focused) {
  982. classes(rootRef).add(prefixCls + '-focused');
  983. } else {
  984. classes(rootRef).remove(prefixCls + '-focused');
  985. }
  986. },
  987. maybeFocus: function maybeFocus(open, needFocus) {
  988. if (needFocus || open) {
  989. var input = this.getInputDOMNode();
  990. var _document = document,
  991. activeElement = _document.activeElement;
  992. if (input && (open || isMultipleOrTagsOrCombobox(this.$props))) {
  993. if (activeElement !== input) {
  994. input.focus();
  995. this._focused = true;
  996. }
  997. } else if (activeElement !== this.selectionRef && this.selectionRef) {
  998. this.selectionRef.focus();
  999. this._focused = true;
  1000. }
  1001. }
  1002. },
  1003. removeSelected: function removeSelected(selectedKey, e) {
  1004. var props = this.$props;
  1005. if (props.disabled || this.isChildDisabled(selectedKey)) {
  1006. return;
  1007. }
  1008. // Do not trigger Trigger popup
  1009. if (e && e.stopPropagation) {
  1010. e.stopPropagation();
  1011. }
  1012. var oldValue = this.$data._value;
  1013. var value = oldValue.filter(function (singleValue) {
  1014. return singleValue !== selectedKey;
  1015. });
  1016. var canMultiple = isMultipleOrTags(props);
  1017. if (canMultiple) {
  1018. var event = selectedKey;
  1019. if (props.labelInValue) {
  1020. event = {
  1021. key: selectedKey,
  1022. label: this.getLabelBySingleValue(selectedKey)
  1023. };
  1024. }
  1025. this.$emit('deselect', event, this.getOptionBySingleValue(selectedKey));
  1026. }
  1027. this.fireChange(value);
  1028. },
  1029. openIfHasChildren: function openIfHasChildren() {
  1030. var $props = this.$props;
  1031. if ($props.children && $props.children.length || isSingleMode($props)) {
  1032. this.setOpenState(true);
  1033. }
  1034. },
  1035. fireSelect: function fireSelect(value) {
  1036. this.$emit('select', this.getVLBySingleValue(value), this.getOptionBySingleValue(value));
  1037. },
  1038. fireChange: function fireChange(value) {
  1039. if (!hasProp(this, 'value')) {
  1040. this.setState({
  1041. _value: value
  1042. }, this.forcePopupAlign);
  1043. }
  1044. var vls = this.getVLForOnChange(value);
  1045. var options = this.getOptionsBySingleValue(value);
  1046. this._valueOptions = options;
  1047. this.$emit('change', vls, isMultipleOrTags(this.$props) ? options : options[0]);
  1048. },
  1049. isChildDisabled: function isChildDisabled(key) {
  1050. return (this.$props.children || []).some(function (child) {
  1051. var childValue = getValuePropValue(child);
  1052. return childValue === key && getValue(child, 'disabled');
  1053. });
  1054. },
  1055. forcePopupAlign: function forcePopupAlign() {
  1056. if (!this.$data._open) {
  1057. return;
  1058. }
  1059. if (this.selectTriggerRef && this.selectTriggerRef.triggerRef) {
  1060. this.selectTriggerRef.triggerRef.forcePopupAlign();
  1061. }
  1062. },
  1063. renderFilterOptions: function renderFilterOptions() {
  1064. var h = this.$createElement;
  1065. var inputValue = this.$data._inputValue;
  1066. var _$props3 = this.$props,
  1067. children = _$props3.children,
  1068. tags = _$props3.tags,
  1069. notFoundContent = _$props3.notFoundContent;
  1070. var menuItems = [];
  1071. var childrenKeys = [];
  1072. var empty = false;
  1073. var options = this.renderFilterOptionsFromChildren(children, childrenKeys, menuItems);
  1074. if (tags) {
  1075. // tags value must be string
  1076. var value = this.$data._value;
  1077. value = value.filter(function (singleValue) {
  1078. return childrenKeys.indexOf(singleValue) === -1 && (!inputValue || String(singleValue).indexOf(String(inputValue)) > -1);
  1079. });
  1080. // sort by length
  1081. value.sort(function (val1, val2) {
  1082. return val1.length - val2.length;
  1083. });
  1084. value.forEach(function (singleValue) {
  1085. var key = singleValue;
  1086. var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
  1087. role: 'option'
  1088. });
  1089. var menuItem = h(
  1090. MenuItem,
  1091. _mergeJSXProps([{ style: UNSELECTABLE_STYLE }, { attrs: attrs }, {
  1092. attrs: { value: key },
  1093. key: key }]),
  1094. [key]
  1095. );
  1096. options.push(menuItem);
  1097. menuItems.push(menuItem);
  1098. });
  1099. // ref: https://github.com/ant-design/ant-design/issues/14090
  1100. if (inputValue && menuItems.every(function (option) {
  1101. return getValuePropValue(option) !== inputValue;
  1102. })) {
  1103. var p = {
  1104. attrs: UNSELECTABLE_ATTRIBUTE,
  1105. key: inputValue,
  1106. props: {
  1107. value: inputValue,
  1108. role: 'option'
  1109. },
  1110. style: UNSELECTABLE_STYLE
  1111. };
  1112. options.unshift(h(
  1113. MenuItem,
  1114. p,
  1115. [inputValue]
  1116. ));
  1117. }
  1118. }
  1119. if (!options.length && notFoundContent) {
  1120. empty = true;
  1121. var _p = {
  1122. attrs: UNSELECTABLE_ATTRIBUTE,
  1123. key: 'NOT_FOUND',
  1124. props: {
  1125. value: 'NOT_FOUND',
  1126. disabled: true,
  1127. role: 'option'
  1128. },
  1129. style: UNSELECTABLE_STYLE
  1130. };
  1131. options = [h(
  1132. MenuItem,
  1133. _p,
  1134. [notFoundContent]
  1135. )];
  1136. }
  1137. return { empty: empty, options: options };
  1138. },
  1139. renderFilterOptionsFromChildren: function renderFilterOptionsFromChildren() {
  1140. var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  1141. var _this13 = this;
  1142. var childrenKeys = arguments[1];
  1143. var menuItems = arguments[2];
  1144. var h = this.$createElement;
  1145. var sel = [];
  1146. var props = this.$props;
  1147. var inputValue = this.$data._inputValue;
  1148. var tags = props.tags;
  1149. children.forEach(function (child) {
  1150. if (!child.data || child.data.slot !== undefined) {
  1151. return;
  1152. }
  1153. if (getSlotOptions(child).isSelectOptGroup) {
  1154. var label = getComponentFromProp(child, 'label');
  1155. var key = child.key;
  1156. if (!key && typeof label === 'string') {
  1157. key = label;
  1158. } else if (!label && key) {
  1159. label = key;
  1160. }
  1161. var childChildren = getSlots(child)['default'];
  1162. childChildren = typeof childChildren === 'function' ? childChildren() : childChildren;
  1163. // Match option group label
  1164. if (inputValue && _this13._filterOption(inputValue, child)) {
  1165. var innerItems = childChildren.map(function (subChild) {
  1166. var childValueSub = getValuePropValue(subChild) || subChild.key;
  1167. return h(
  1168. MenuItem,
  1169. _mergeJSXProps([{ key: childValueSub, attrs: { value: childValueSub }
  1170. }, subChild.data]),
  1171. [subChild.componentOptions.children]
  1172. );
  1173. });
  1174. sel.push(h(
  1175. MenuItemGroup,
  1176. { key: key, attrs: { title: label },
  1177. 'class': getClass(child) },
  1178. [innerItems]
  1179. ));
  1180. // Not match
  1181. } else {
  1182. var _innerItems = _this13.renderFilterOptionsFromChildren(childChildren, childrenKeys, menuItems);
  1183. if (_innerItems.length) {
  1184. sel.push(h(
  1185. MenuItemGroup,
  1186. _mergeJSXProps([{ key: key, attrs: { title: label }
  1187. }, child.data]),
  1188. [_innerItems]
  1189. ));
  1190. }
  1191. }
  1192. return;
  1193. }
  1194. warning(getSlotOptions(child).isSelectOption, 'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' + ('instead of `' + (getSlotOptions(child).name || getSlotOptions(child)) + '`.'));
  1195. var childValue = getValuePropValue(child);
  1196. validateOptionValue(childValue, _this13.$props);
  1197. if (_this13._filterOption(inputValue, child)) {
  1198. var p = {
  1199. attrs: _extends({}, UNSELECTABLE_ATTRIBUTE, getAttrs(child)),
  1200. key: childValue,
  1201. props: _extends({
  1202. value: childValue
  1203. }, getPropsData(child), {
  1204. role: 'option'
  1205. }),
  1206. style: UNSELECTABLE_STYLE,
  1207. on: getEvents(child),
  1208. 'class': getClass(child)
  1209. };
  1210. var menuItem = h(
  1211. MenuItem,
  1212. p,
  1213. [child.componentOptions.children]
  1214. );
  1215. sel.push(menuItem);
  1216. menuItems.push(menuItem);
  1217. }
  1218. if (tags) {
  1219. childrenKeys.push(childValue);
  1220. }
  1221. });
  1222. return sel;
  1223. },
  1224. renderTopControlNode: function renderTopControlNode() {
  1225. var _this14 = this;
  1226. var h = this.$createElement;
  1227. var props = this.$props;
  1228. var _$data3 = this.$data,
  1229. value = _$data3._value,
  1230. inputValue = _$data3._inputValue,
  1231. open = _$data3._open;
  1232. var choiceTransitionName = props.choiceTransitionName,
  1233. prefixCls = props.prefixCls,
  1234. maxTagTextLength = props.maxTagTextLength,
  1235. maxTagCount = props.maxTagCount,
  1236. maxTagPlaceholder = props.maxTagPlaceholder,
  1237. showSearch = props.showSearch;
  1238. var removeIcon = getComponentFromProp(this, 'removeIcon');
  1239. var className = prefixCls + '-selection__rendered';
  1240. // search input is inside topControlNode in single, multiple & combobox. 2016/04/13
  1241. var innerNode = null;
  1242. if (isSingleMode(props)) {
  1243. var selectedValue = null;
  1244. if (value.length) {
  1245. var showSelectedValue = false;
  1246. var opacity = 1;
  1247. if (!showSearch) {
  1248. showSelectedValue = true;
  1249. } else if (open) {
  1250. showSelectedValue = !inputValue;
  1251. if (showSelectedValue) {
  1252. opacity = 0.4;
  1253. }
  1254. } else {
  1255. showSelectedValue = true;
  1256. }
  1257. var singleValue = value[0];
  1258. var _getOptionInfoBySingl3 = this.getOptionInfoBySingleValue(singleValue),
  1259. label = _getOptionInfoBySingl3.label,
  1260. title = _getOptionInfoBySingl3.title;
  1261. selectedValue = h(
  1262. 'div',
  1263. {
  1264. key: 'value',
  1265. 'class': prefixCls + '-selection-selected-value',
  1266. attrs: { title: toTitle(title || label)
  1267. },
  1268. style: {
  1269. display: showSelectedValue ? 'block' : 'none',
  1270. opacity: opacity
  1271. }
  1272. },
  1273. [label]
  1274. );
  1275. }
  1276. if (!showSearch) {
  1277. innerNode = [selectedValue];
  1278. } else {
  1279. innerNode = [selectedValue, h(
  1280. 'div',
  1281. {
  1282. 'class': prefixCls + '-search ' + prefixCls + '-search--inline',
  1283. key: 'input',
  1284. style: {
  1285. display: open ? 'block' : 'none'
  1286. }
  1287. },
  1288. [this._getInputElement()]
  1289. )];
  1290. }
  1291. } else {
  1292. var selectedValueNodes = [];
  1293. var limitedCountValue = value;
  1294. var maxTagPlaceholderEl = void 0;
  1295. if (maxTagCount !== undefined && value.length > maxTagCount) {
  1296. limitedCountValue = limitedCountValue.slice(0, maxTagCount);
  1297. var omittedValues = this.getVLForOnChange(value.slice(maxTagCount, value.length));
  1298. var content = '+ ' + (value.length - maxTagCount) + ' ...';
  1299. if (maxTagPlaceholder) {
  1300. content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
  1301. }
  1302. var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
  1303. role: 'presentation',
  1304. title: toTitle(content)
  1305. });
  1306. maxTagPlaceholderEl = h(
  1307. 'li',
  1308. _mergeJSXProps([{
  1309. style: UNSELECTABLE_STYLE
  1310. }, { attrs: attrs }, {
  1311. on: {
  1312. 'mousedown': preventDefaultEvent
  1313. },
  1314. 'class': prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled',
  1315. key: 'maxTagPlaceholder'
  1316. }]),
  1317. [h(
  1318. 'div',
  1319. { 'class': prefixCls + '-selection__choice__content' },
  1320. [content]
  1321. )]
  1322. );
  1323. }
  1324. if (isMultipleOrTags(props)) {
  1325. selectedValueNodes = limitedCountValue.map(function (singleValue) {
  1326. var info = _this14.getOptionInfoBySingleValue(singleValue);
  1327. var content = info.label;
  1328. var title = info.title || content;
  1329. if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
  1330. content = content.slice(0, maxTagTextLength) + '...';
  1331. }
  1332. var disabled = _this14.isChildDisabled(singleValue);
  1333. var choiceClassName = disabled ? prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled' : prefixCls + '-selection__choice';
  1334. // attrs 放在一起,避免动态title混乱问题,很奇怪的问题 https://github.com/vueComponent/ant-design-vue/issues/588
  1335. var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
  1336. role: 'presentation',
  1337. title: toTitle(title)
  1338. });
  1339. return h(
  1340. 'li',
  1341. _mergeJSXProps([{
  1342. style: UNSELECTABLE_STYLE
  1343. }, { attrs: attrs }, {
  1344. on: {
  1345. 'mousedown': preventDefaultEvent
  1346. },
  1347. 'class': choiceClassName,
  1348. key: singleValue || SELECT_EMPTY_VALUE_KEY
  1349. }]),
  1350. [h(
  1351. 'div',
  1352. { 'class': prefixCls + '-selection__choice__content' },
  1353. [content]
  1354. ), disabled ? null : h(
  1355. 'span',
  1356. {
  1357. on: {
  1358. 'click': function click(event) {
  1359. _this14.removeSelected(singleValue, event);
  1360. }
  1361. },
  1362. 'class': prefixCls + '-selection__choice__remove'
  1363. },
  1364. [removeIcon || h(
  1365. 'i',
  1366. { 'class': prefixCls + '-selection__choice__remove-icon' },
  1367. ['\xD7']
  1368. )]
  1369. )]
  1370. );
  1371. });
  1372. }
  1373. if (maxTagPlaceholderEl) {
  1374. selectedValueNodes.push(maxTagPlaceholderEl);
  1375. }
  1376. selectedValueNodes.push(h(
  1377. 'li',
  1378. { 'class': prefixCls + '-search ' + prefixCls + '-search--inline', key: '__input' },
  1379. [this._getInputElement()]
  1380. ));
  1381. if (isMultipleOrTags(props) && choiceTransitionName) {
  1382. var transitionProps = getTransitionProps(choiceTransitionName, {
  1383. tag: 'ul',
  1384. afterLeave: this.onChoiceAnimationLeave
  1385. });
  1386. innerNode = h(
  1387. 'transition-group',
  1388. transitionProps,
  1389. [selectedValueNodes]
  1390. );
  1391. } else {
  1392. innerNode = h('ul', [selectedValueNodes]);
  1393. }
  1394. }
  1395. return h(
  1396. 'div',
  1397. _mergeJSXProps([{
  1398. 'class': className
  1399. }, {
  1400. directives: [{
  1401. name: 'ant-ref',
  1402. value: this.saveTopCtrlRef
  1403. }]
  1404. }, {
  1405. on: {
  1406. 'click': this.topCtrlContainerClick
  1407. }
  1408. }]),
  1409. [this.getPlaceholderElement(), innerNode]
  1410. );
  1411. },
  1412. renderArrow: function renderArrow(multiple) {
  1413. var h = this.$createElement;
  1414. // showArrow : Set to true if not multiple by default but keep set value.
  1415. var _$props4 = this.$props,
  1416. _$props4$showArrow = _$props4.showArrow,
  1417. showArrow = _$props4$showArrow === undefined ? !multiple : _$props4$showArrow,
  1418. loading = _$props4.loading,
  1419. prefixCls = _$props4.prefixCls;
  1420. var inputIcon = getComponentFromProp(this, 'inputIcon');
  1421. if (!showArrow && !loading) {
  1422. return null;
  1423. }
  1424. // if loading have loading icon
  1425. var defaultIcon = loading ? h('i', { 'class': prefixCls + '-arrow-loading' }) : h('i', { 'class': prefixCls + '-arrow-icon' });
  1426. return h(
  1427. 'span',
  1428. _mergeJSXProps([{
  1429. key: 'arrow',
  1430. 'class': prefixCls + '-arrow',
  1431. style: UNSELECTABLE_STYLE
  1432. }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
  1433. on: {
  1434. 'click': this.onArrowClick
  1435. },
  1436. ref: 'arrow'
  1437. }]),
  1438. [inputIcon || defaultIcon]
  1439. );
  1440. },
  1441. topCtrlContainerClick: function topCtrlContainerClick(e) {
  1442. if (this.$data._open && !isSingleMode(this.$props)) {
  1443. e.stopPropagation();
  1444. }
  1445. },
  1446. renderClear: function renderClear() {
  1447. var h = this.$createElement;
  1448. var _$props5 = this.$props,
  1449. prefixCls = _$props5.prefixCls,
  1450. allowClear = _$props5.allowClear;
  1451. var _$data4 = this.$data,
  1452. value = _$data4._value,
  1453. inputValue = _$data4._inputValue;
  1454. var clearIcon = getComponentFromProp(this, 'clearIcon');
  1455. var clear = h(
  1456. 'span',
  1457. _mergeJSXProps([{
  1458. key: 'clear',
  1459. 'class': prefixCls + '-selection__clear',
  1460. on: {
  1461. 'mousedown': preventDefaultEvent
  1462. },
  1463. style: UNSELECTABLE_STYLE
  1464. }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
  1465. on: {
  1466. 'click': this.onClearSelection
  1467. }
  1468. }]),
  1469. [clearIcon || h(
  1470. 'i',
  1471. { 'class': prefixCls + '-selection__clear-icon' },
  1472. ['\xD7']
  1473. )]
  1474. );
  1475. if (!allowClear) {
  1476. return null;
  1477. }
  1478. if (isCombobox(this.$props)) {
  1479. if (inputValue) {
  1480. return clear;
  1481. }
  1482. return null;
  1483. }
  1484. if (inputValue || value.length) {
  1485. return clear;
  1486. }
  1487. return null;
  1488. },
  1489. selectionRefClick: function selectionRefClick() {
  1490. //e.stopPropagation();
  1491. if (!this.disabled) {
  1492. var input = this.getInputDOMNode();
  1493. if (this._focused && this.$data._open) {
  1494. // this._focused = false;
  1495. this.setOpenState(false, false);
  1496. input && input.blur();
  1497. } else {
  1498. this.clearBlurTime();
  1499. //this._focused = true;
  1500. this.setOpenState(true, true);
  1501. input && input.focus();
  1502. }
  1503. }
  1504. },
  1505. selectionRefFocus: function selectionRefFocus(e) {
  1506. if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
  1507. e.preventDefault();
  1508. return;
  1509. }
  1510. this._focused = true;
  1511. this.updateFocusClassName();
  1512. this.$emit('focus');
  1513. },
  1514. selectionRefBlur: function selectionRefBlur(e) {
  1515. if (isMultipleOrTagsOrCombobox(this.$props)) {
  1516. e.preventDefault();
  1517. return;
  1518. }
  1519. this.inputBlur(e);
  1520. }
  1521. },
  1522. render: function render() {
  1523. var _rootCls;
  1524. var h = arguments[0];
  1525. var props = this.$props;
  1526. var multiple = isMultipleOrTags(props);
  1527. // Default set showArrow to true if not set (not set directly in defaultProps to handle multiple case)
  1528. var _props$showArrow = props.showArrow,
  1529. showArrow = _props$showArrow === undefined ? true : _props$showArrow;
  1530. var state = this.$data;
  1531. var disabled = props.disabled,
  1532. prefixCls = props.prefixCls,
  1533. loading = props.loading;
  1534. var ctrlNode = this.renderTopControlNode();
  1535. var _$data5 = this.$data,
  1536. open = _$data5._open,
  1537. inputValue = _$data5._inputValue,
  1538. value = _$data5._value;
  1539. if (open) {
  1540. var filterOptions = this.renderFilterOptions();
  1541. this._empty = filterOptions.empty;
  1542. this._options = filterOptions.options;
  1543. }
  1544. var realOpen = this.getRealOpenState();
  1545. var empty = this._empty;
  1546. var options = this._options || [];
  1547. var _getListeners = getListeners(this),
  1548. _getListeners$mouseen = _getListeners.mouseenter,
  1549. mouseenter = _getListeners$mouseen === undefined ? noop : _getListeners$mouseen,
  1550. _getListeners$mousele = _getListeners.mouseleave,
  1551. mouseleave = _getListeners$mousele === undefined ? noop : _getListeners$mousele,
  1552. _getListeners$popupSc = _getListeners.popupScroll,
  1553. popupScroll = _getListeners$popupSc === undefined ? noop : _getListeners$popupSc;
  1554. var selectionProps = {
  1555. props: {},
  1556. attrs: {
  1557. role: 'combobox',
  1558. 'aria-autocomplete': 'list',
  1559. 'aria-haspopup': 'true',
  1560. 'aria-expanded': realOpen,
  1561. 'aria-controls': this.$data._ariaId
  1562. },
  1563. on: {
  1564. // click: this.selectionRefClick,
  1565. },
  1566. 'class': prefixCls + '-selection ' + prefixCls + '-selection--' + (multiple ? 'multiple' : 'single'),
  1567. // directives: [
  1568. // {
  1569. // name: 'ant-ref',
  1570. // value: this.saveSelectionRef,
  1571. // },
  1572. // ],
  1573. key: 'selection'
  1574. };
  1575. //if (!isMultipleOrTagsOrCombobox(props)) {
  1576. // selectionProps.on.keydown = this.onKeyDown;
  1577. // selectionProps.on.focus = this.selectionRefFocus;
  1578. // selectionProps.on.blur = this.selectionRefBlur;
  1579. // selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
  1580. //}
  1581. var extraSelectionProps = { attrs: { tabIndex: -1 } };
  1582. if (!isMultipleOrTagsOrCombobox(props)) {
  1583. extraSelectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
  1584. }
  1585. var rootCls = (_rootCls = {}, _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-open', open), _defineProperty(_rootCls, prefixCls + '-focused', open || !!this._focused), _defineProperty(_rootCls, prefixCls + '-combobox', isCombobox(props)), _defineProperty(_rootCls, prefixCls + '-disabled', disabled), _defineProperty(_rootCls, prefixCls + '-enabled', !disabled), _defineProperty(_rootCls, prefixCls + '-allow-clear', !!props.allowClear), _defineProperty(_rootCls, prefixCls + '-no-arrow', !showArrow), _defineProperty(_rootCls, prefixCls + '-loading', !!loading), _rootCls);
  1586. return h(
  1587. SelectTrigger,
  1588. _mergeJSXProps([{
  1589. attrs: {
  1590. dropdownAlign: props.dropdownAlign,
  1591. dropdownClassName: props.dropdownClassName,
  1592. dropdownMatchSelectWidth: props.dropdownMatchSelectWidth,
  1593. defaultActiveFirstOption: props.defaultActiveFirstOption,
  1594. dropdownMenuStyle: props.dropdownMenuStyle,
  1595. transitionName: props.transitionName,
  1596. animation: props.animation,
  1597. prefixCls: props.prefixCls,
  1598. dropdownStyle: props.dropdownStyle,
  1599. combobox: props.combobox,
  1600. showSearch: props.showSearch,
  1601. options: options,
  1602. empty: empty,
  1603. multiple: multiple,
  1604. disabled: disabled,
  1605. visible: realOpen,
  1606. inputValue: inputValue,
  1607. value: value,
  1608. backfillValue: state._backfillValue,
  1609. firstActiveValue: props.firstActiveValue,
  1610. getPopupContainer: props.getPopupContainer,
  1611. showAction: props.showAction,
  1612. menuItemSelectedIcon: getComponentFromProp(this, 'menuItemSelectedIcon')
  1613. },
  1614. on: {
  1615. 'dropdownVisibleChange': this.onDropdownVisibleChange,
  1616. 'menuSelect': this.onMenuSelect,
  1617. 'menuDeselect': this.onMenuDeselect,
  1618. 'popupScroll': popupScroll,
  1619. 'popupFocus': this.onPopupFocus,
  1620. 'mouseenter': mouseenter,
  1621. 'mouseleave': mouseleave
  1622. }
  1623. }, {
  1624. directives: [{
  1625. name: 'ant-ref',
  1626. value: this.saveSelectTriggerRef
  1627. }]
  1628. }, {
  1629. attrs: {
  1630. dropdownRender: props.dropdownRender,
  1631. ariaId: this.$data._ariaId
  1632. }
  1633. }]),
  1634. [h(
  1635. 'div',
  1636. _mergeJSXProps([{
  1637. directives: [{
  1638. name: 'ant-ref',
  1639. value: chaining(this.saveRootRef, this.saveSelectionRef)
  1640. }]
  1641. }, {
  1642. style: getStyle(this),
  1643. 'class': classnames(rootCls),
  1644. on: {
  1645. 'mousedown': this.markMouseDown,
  1646. 'mouseup': this.markMouseLeave,
  1647. 'mouseout': this.markMouseLeave
  1648. }
  1649. }, extraSelectionProps, {
  1650. on: {
  1651. 'blur': this.selectionRefBlur,
  1652. 'focus': this.selectionRefFocus,
  1653. 'click': this.selectionRefClick,
  1654. 'keydown': isMultipleOrTagsOrCombobox(props) ? noop : this.onKeyDown
  1655. }
  1656. }]),
  1657. [h(
  1658. 'div',
  1659. selectionProps,
  1660. [ctrlNode, this.renderClear(), this.renderArrow(!!multiple)]
  1661. )]
  1662. )]
  1663. );
  1664. }
  1665. };
  1666. export { Select };
  1667. export default proxyComponent(Select);