12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766 |
- import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
- import _defineProperty from 'babel-runtime/helpers/defineProperty';
- import _extends from 'babel-runtime/helpers/extends';
- import KeyCode from '../_util/KeyCode';
- import PropTypes from '../_util/vue-types';
- import classnames from 'classnames';
- import classes from 'component-classes';
- import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu';
- import warning from 'warning';
- import Vue from 'vue';
- import Option from './Option';
- import OptGroup from './OptGroup';
- import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs, getOptionProps, getSlots, getListeners } from '../_util/props-util';
- import getTransitionProps from '../_util/getTransitionProps';
- import { cloneElement } from '../_util/vnode';
- import BaseMixin from '../_util/BaseMixin';
- import proxyComponent from '../_util/proxyComponent';
- import ref from 'vue-ref';
- import SelectTrigger from './SelectTrigger';
- 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';
- import { SelectPropTypes } from './PropTypes';
- import contains from '../vc-util/Dom/contains';
- import { isIE, isEdge } from '../_util/env';
- Vue.use(ref, { name: 'ant-ref' });
- var SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY';
- var noop = function noop() {
- return null;
- };
- // Where el is the DOM element you'd like to test for visibility
- function isHidden(node) {
- return !node || node.offsetParent === null;
- }
- function chaining() {
- for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
- fns[_key] = arguments[_key];
- }
- return function () {
- for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
- args[_key2] = arguments[_key2];
- }
- // eslint-disable-line
- // eslint-disable-line
- for (var i = 0; i < fns.length; i++) {
- if (fns[i] && typeof fns[i] === 'function') {
- fns[i].apply(chaining, args);
- }
- }
- };
- }
- var Select = {
- inheritAttrs: false,
- Option: Option,
- OptGroup: OptGroup,
- name: 'Select',
- mixins: [BaseMixin],
- props: _extends({}, SelectPropTypes, {
- prefixCls: SelectPropTypes.prefixCls.def('rc-select'),
- defaultOpen: PropTypes.bool.def(false),
- labelInValue: SelectPropTypes.labelInValue.def(false),
- defaultActiveFirstOption: SelectPropTypes.defaultActiveFirstOption.def(true),
- showSearch: SelectPropTypes.showSearch.def(true),
- allowClear: SelectPropTypes.allowClear.def(false),
- placeholder: SelectPropTypes.placeholder.def(''),
- // showArrow: SelectPropTypes.showArrow.def(true),
- dropdownMatchSelectWidth: PropTypes.bool.def(true),
- dropdownStyle: SelectPropTypes.dropdownStyle.def(function () {
- return {};
- }),
- dropdownMenuStyle: PropTypes.object.def(function () {
- return {};
- }),
- optionFilterProp: SelectPropTypes.optionFilterProp.def('value'),
- optionLabelProp: SelectPropTypes.optionLabelProp.def('value'),
- notFoundContent: PropTypes.any.def('Not Found'),
- backfill: PropTypes.bool.def(false),
- showAction: SelectPropTypes.showAction.def(['click']),
- combobox: PropTypes.bool.def(false),
- tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
- autoClearSearchValue: PropTypes.bool.def(true),
- tabIndex: PropTypes.any.def(0),
- dropdownRender: PropTypes.func.def(function (menu) {
- return menu;
- })
- // onChange: noop,
- // onFocus: noop,
- // onBlur: noop,
- // onSelect: noop,
- // onSearch: noop,
- // onDeselect: noop,
- // onInputKeydown: noop,
- }),
- model: {
- prop: 'value',
- event: 'change'
- },
- created: function created() {
- this.saveInputRef = saveRef(this, 'inputRef');
- this.saveInputMirrorRef = saveRef(this, 'inputMirrorRef');
- this.saveTopCtrlRef = saveRef(this, 'topCtrlRef');
- this.saveSelectTriggerRef = saveRef(this, 'selectTriggerRef');
- this.saveRootRef = saveRef(this, 'rootRef');
- this.saveSelectionRef = saveRef(this, 'selectionRef');
- this._focused = false;
- this._mouseDown = false;
- this._options = [];
- this._empty = false;
- },
- data: function data() {
- var props = getOptionProps(this);
- var optionsInfo = this.getOptionsInfoFromProps(props);
- warning(this.__propsSymbol__, 'Replace slots.default with props.children and pass props.__propsSymbol__');
- if (props.tags && typeof props.filterOption !== 'function') {
- var isDisabledExist = Object.keys(optionsInfo).some(function (key) {
- return optionsInfo[key].disabled;
- });
- warning(!isDisabledExist, 'Please avoid setting option to disabled in tags mode since user can always type text as tag.');
- }
- var state = {
- _value: this.getValueFromProps(props, true), // true: use default value
- _inputValue: props.combobox ? this.getInputValueForCombobox(props, optionsInfo, true // use default value
- ) : '',
- _open: props.defaultOpen,
- _optionsInfo: optionsInfo,
- _backfillValue: '',
- // a flag for aviod redundant getOptionsInfoFromProps call
- _skipBuildOptionsInfo: true,
- _ariaId: generateUUID()
- };
- return _extends({}, state, {
- _mirrorInputValue: state._inputValue }, this.getDerivedState(props, state));
- },
- mounted: function mounted() {
- var _this = this;
- this.$nextTick(function () {
- // when defaultOpen is true, we should auto focus search input
- // https://github.com/ant-design/ant-design/issues/14254
- if (_this.autoFocus || _this._open) {
- _this.focus();
- }
- // this.setState({
- // _ariaId: generateUUID(),
- // });
- });
- },
- watch: {
- __propsSymbol__: function __propsSymbol__() {
- _extends(this.$data, this.getDerivedState(getOptionProps(this), this.$data));
- },
- '$data._inputValue': function $data_inputValue(val) {
- this.$data._mirrorInputValue = val;
- }
- },
- updated: function updated() {
- var _this2 = this;
- this.$nextTick(function () {
- if (isMultipleOrTags(_this2.$props)) {
- var inputNode = _this2.getInputDOMNode();
- var mirrorNode = _this2.getInputMirrorDOMNode();
- if (inputNode && inputNode.value && mirrorNode) {
- inputNode.style.width = '';
- inputNode.style.width = mirrorNode.clientWidth + 10 + 'px';
- } else if (inputNode) {
- inputNode.style.width = '';
- }
- }
- _this2.forcePopupAlign();
- });
- },
- beforeDestroy: function beforeDestroy() {
- this.clearFocusTime();
- this.clearBlurTime();
- this.clearComboboxTime();
- if (this.dropdownContainer) {
- document.body.removeChild(this.dropdownContainer);
- this.dropdownContainer = null;
- }
- },
- methods: {
- getDerivedState: function getDerivedState(nextProps, prevState) {
- var optionsInfo = prevState._skipBuildOptionsInfo ? prevState._optionsInfo : this.getOptionsInfoFromProps(nextProps, prevState);
- var newState = {
- _optionsInfo: optionsInfo,
- _skipBuildOptionsInfo: false
- };
- if ('open' in nextProps) {
- newState._open = nextProps.open;
- }
- if ('value' in nextProps) {
- var value = this.getValueFromProps(nextProps);
- newState._value = value;
- if (nextProps.combobox) {
- newState._inputValue = this.getInputValueForCombobox(nextProps, optionsInfo);
- }
- }
- return newState;
- },
- getOptionsFromChildren: function getOptionsFromChildren() {
- var _this3 = this;
- var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
- children.forEach(function (child) {
- if (!child.data || child.data.slot !== undefined) {
- return;
- }
- if (getSlotOptions(child).isSelectOptGroup) {
- _this3.getOptionsFromChildren(child.componentOptions.children, options);
- } else {
- options.push(child);
- }
- });
- return options;
- },
- getInputValueForCombobox: function getInputValueForCombobox(props, optionsInfo, useDefaultValue) {
- var value = [];
- if ('value' in props && !useDefaultValue) {
- value = toArray(props.value);
- }
- if ('defaultValue' in props && useDefaultValue) {
- value = toArray(props.defaultValue);
- }
- if (value.length) {
- value = value[0];
- } else {
- return '';
- }
- var label = value;
- if (props.labelInValue) {
- label = value.label;
- } else if (optionsInfo[getMapKey(value)]) {
- label = optionsInfo[getMapKey(value)].label;
- }
- if (label === undefined) {
- label = '';
- }
- return label;
- },
- getLabelFromOption: function getLabelFromOption(props, option) {
- return getPropValue(option, props.optionLabelProp);
- },
- getOptionsInfoFromProps: function getOptionsInfoFromProps(props, preState) {
- var _this4 = this;
- var options = this.getOptionsFromChildren(this.$props.children);
- var optionsInfo = {};
- options.forEach(function (option) {
- var singleValue = getValuePropValue(option);
- optionsInfo[getMapKey(singleValue)] = {
- option: option,
- value: singleValue,
- label: _this4.getLabelFromOption(props, option),
- title: getValue(option, 'title'),
- disabled: getValue(option, 'disabled')
- };
- });
- if (preState) {
- // keep option info in pre state value.
- var oldOptionsInfo = preState._optionsInfo;
- var value = preState._value;
- if (value) {
- value.forEach(function (v) {
- var key = getMapKey(v);
- if (!optionsInfo[key] && oldOptionsInfo[key] !== undefined) {
- optionsInfo[key] = oldOptionsInfo[key];
- }
- });
- }
- }
- return optionsInfo;
- },
- getValueFromProps: function getValueFromProps(props, useDefaultValue) {
- var value = [];
- if ('value' in props && !useDefaultValue) {
- value = toArray(props.value);
- }
- if ('defaultValue' in props && useDefaultValue) {
- value = toArray(props.defaultValue);
- }
- if (props.labelInValue) {
- value = value.map(function (v) {
- return v.key;
- });
- }
- return value;
- },
- onInputChange: function onInputChange(e) {
- var _e$target = e.target,
- val = _e$target.value,
- composing = _e$target.composing;
- var _$data$_inputValue = this.$data._inputValue,
- _inputValue = _$data$_inputValue === undefined ? '' : _$data$_inputValue;
- if (e.isComposing || composing || _inputValue === val) {
- this.setState({
- _mirrorInputValue: val
- });
- return;
- }
- var tokenSeparators = this.$props.tokenSeparators;
- if (isMultipleOrTags(this.$props) && tokenSeparators.length && includesSeparators(val, tokenSeparators)) {
- var nextValue = this.getValueByInput(val);
- if (nextValue !== undefined) {
- this.fireChange(nextValue);
- }
- this.setOpenState(false, { needFocus: true });
- this.setInputValue('', false);
- return;
- }
- this.setInputValue(val);
- this.setState({
- _open: true
- });
- if (isCombobox(this.$props)) {
- this.fireChange([val]);
- }
- },
- onDropdownVisibleChange: function onDropdownVisibleChange(open) {
- if (open && !this._focused) {
- this.clearBlurTime();
- this.timeoutFocus();
- this._focused = true;
- this.updateFocusClassName();
- }
- this.setOpenState(open);
- },
- // combobox ignore
- onKeyDown: function onKeyDown(event) {
- var open = this.$data._open;
- var disabled = this.$props.disabled;
- if (disabled) {
- return;
- }
- var keyCode = event.keyCode;
- if (open && !this.getInputDOMNode()) {
- this.onInputKeydown(event);
- } else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
- // vue state是同步更新,onKeyDown在onMenuSelect后会再次调用,单选时不在调用setOpenState
- // https://github.com/vueComponent/ant-design-vue/issues/1142
- if (keyCode === KeyCode.ENTER && !isMultipleOrTags(this.$props)) {
- this.maybeFocus(true);
- } else if (!open) {
- this.setOpenState(true);
- }
- event.preventDefault();
- } else if (keyCode === KeyCode.SPACE) {
- // Not block space if popup is shown
- if (!open) {
- this.setOpenState(true);
- event.preventDefault();
- }
- }
- },
- onInputKeydown: function onInputKeydown(event) {
- var _this5 = this;
- var _$props = this.$props,
- disabled = _$props.disabled,
- combobox = _$props.combobox,
- defaultActiveFirstOption = _$props.defaultActiveFirstOption;
- if (disabled) {
- return;
- }
- var state = this.$data;
- var isRealOpen = this.getRealOpenState(state);
- var keyCode = event.keyCode;
- if (isMultipleOrTags(this.$props) && !event.target.value && keyCode === KeyCode.BACKSPACE) {
- event.preventDefault();
- var value = state._value;
- if (value.length) {
- this.removeSelected(value[value.length - 1]);
- }
- return;
- }
- if (keyCode === KeyCode.DOWN) {
- if (!state._open) {
- this.openIfHasChildren();
- event.preventDefault();
- event.stopPropagation();
- return;
- }
- } else if (keyCode === KeyCode.ENTER && state._open) {
- // Aviod trigger form submit when select item
- // https://github.com/ant-design/ant-design/issues/10861
- // https://github.com/ant-design/ant-design/issues/14544
- if (isRealOpen || !combobox) {
- event.preventDefault();
- }
- // Hard close popup to avoid lock of non option in combobox mode
- if (isRealOpen && combobox && defaultActiveFirstOption === false) {
- this.comboboxTimer = setTimeout(function () {
- _this5.setOpenState(false);
- });
- }
- } else if (keyCode === KeyCode.ESC) {
- if (state._open) {
- this.setOpenState(false);
- event.preventDefault();
- event.stopPropagation();
- }
- return;
- }
- if (isRealOpen && this.selectTriggerRef) {
- var menu = this.selectTriggerRef.getInnerMenu();
- if (menu && menu.onKeyDown(event, this.handleBackfill)) {
- event.preventDefault();
- event.stopPropagation();
- }
- }
- },
- onMenuSelect: function onMenuSelect(_ref) {
- var item = _ref.item;
- if (!item) {
- return;
- }
- var value = this.$data._value;
- var props = this.$props;
- var selectedValue = getValuePropValue(item);
- var lastValue = value[value.length - 1];
- var skipTrigger = false;
- if (isMultipleOrTags(props)) {
- if (findIndexInValueBySingleValue(value, selectedValue) !== -1) {
- skipTrigger = true;
- } else {
- value = value.concat([selectedValue]);
- }
- } else {
- if (!isCombobox(props) && lastValue !== undefined && lastValue === selectedValue && selectedValue !== this.$data._backfillValue) {
- this.setOpenState(false, { needFocus: true, fireSearch: false });
- skipTrigger = true;
- } else {
- value = [selectedValue];
- this.setOpenState(false, { needFocus: true, fireSearch: false });
- }
- }
- if (!skipTrigger) {
- this.fireChange(value);
- }
- if (!skipTrigger) {
- this.fireSelect(selectedValue);
- var inputValue = isCombobox(props) ? getPropValue(item, props.optionLabelProp) : '';
- if (props.autoClearSearchValue) {
- this.setInputValue(inputValue, false);
- }
- }
- },
- onMenuDeselect: function onMenuDeselect(_ref2) {
- var item = _ref2.item,
- domEvent = _ref2.domEvent;
- if (domEvent.type === 'keydown' && domEvent.keyCode === KeyCode.ENTER) {
- var menuItemDomNode = item.$el;
- // https://github.com/ant-design/ant-design/issues/20465#issuecomment-569033796
- if (!isHidden(menuItemDomNode)) {
- this.removeSelected(getValuePropValue(item));
- }
- return;
- }
- if (domEvent.type === 'click') {
- this.removeSelected(getValuePropValue(item));
- }
- if (this.autoClearSearchValue) {
- this.setInputValue('');
- }
- },
- onArrowClick: function onArrowClick(e) {
- e.stopPropagation();
- e.preventDefault();
- this.clearBlurTime();
- if (!this.disabled) {
- this.setOpenState(!this.$data._open, { needFocus: !this.$data._open });
- }
- },
- onPlaceholderClick: function onPlaceholderClick() {
- if (this.getInputDOMNode() && this.getInputDOMNode()) {
- this.getInputDOMNode().focus();
- }
- },
- onPopupFocus: function onPopupFocus() {
- // fix ie scrollbar, focus element again
- this.maybeFocus(true, true);
- },
- onClearSelection: function onClearSelection(event) {
- var props = this.$props;
- var state = this.$data;
- if (props.disabled) {
- return;
- }
- var inputValue = state._inputValue,
- value = state._value;
- event.stopPropagation();
- if (inputValue || value.length) {
- if (value.length) {
- this.fireChange([]);
- }
- this.setOpenState(false, { needFocus: true });
- if (inputValue) {
- this.setInputValue('');
- }
- }
- },
- onChoiceAnimationLeave: function onChoiceAnimationLeave() {
- this.forcePopupAlign();
- },
- getOptionInfoBySingleValue: function getOptionInfoBySingleValue(value, optionsInfo) {
- var h = this.$createElement;
- var info = void 0;
- optionsInfo = optionsInfo || this.$data._optionsInfo;
- if (optionsInfo[getMapKey(value)]) {
- info = optionsInfo[getMapKey(value)];
- }
- if (info) {
- return info;
- }
- var defaultLabel = value;
- if (this.$props.labelInValue) {
- var valueLabel = getLabelFromPropsValue(this.$props.value, value);
- var defaultValueLabel = getLabelFromPropsValue(this.$props.defaultValue, value);
- if (valueLabel !== undefined) {
- defaultLabel = valueLabel;
- } else if (defaultValueLabel !== undefined) {
- defaultLabel = defaultValueLabel;
- }
- }
- var defaultInfo = {
- option: h(
- Option,
- {
- attrs: { value: value },
- key: value },
- [value]
- ),
- value: value,
- label: defaultLabel
- };
- return defaultInfo;
- },
- getOptionBySingleValue: function getOptionBySingleValue(value) {
- var _getOptionInfoBySingl = this.getOptionInfoBySingleValue(value),
- option = _getOptionInfoBySingl.option;
- return option;
- },
- getOptionsBySingleValue: function getOptionsBySingleValue(values) {
- var _this6 = this;
- return values.map(function (value) {
- return _this6.getOptionBySingleValue(value);
- });
- },
- getValueByLabel: function getValueByLabel(label) {
- var _this7 = this;
- if (label === undefined) {
- return null;
- }
- var value = null;
- Object.keys(this.$data._optionsInfo).forEach(function (key) {
- var info = _this7.$data._optionsInfo[key];
- var disabled = info.disabled;
- if (disabled) {
- return;
- }
- var oldLable = toArray(info.label);
- if (oldLable && oldLable.join('') === label) {
- value = info.value;
- }
- });
- return value;
- },
- getVLBySingleValue: function getVLBySingleValue(value) {
- if (this.$props.labelInValue) {
- return {
- key: value,
- label: this.getLabelBySingleValue(value)
- };
- }
- return value;
- },
- getVLForOnChange: function getVLForOnChange(vlsS) {
- var _this8 = this;
- var vls = vlsS;
- if (vls !== undefined) {
- if (!this.labelInValue) {
- vls = vls.map(function (v) {
- return v;
- });
- } else {
- vls = vls.map(function (vl) {
- return {
- key: vl,
- label: _this8.getLabelBySingleValue(vl)
- };
- });
- }
- return isMultipleOrTags(this.$props) ? vls : vls[0];
- }
- return vls;
- },
- getLabelBySingleValue: function getLabelBySingleValue(value, optionsInfo) {
- var _getOptionInfoBySingl2 = this.getOptionInfoBySingleValue(value, optionsInfo),
- label = _getOptionInfoBySingl2.label;
- return label;
- },
- getDropdownContainer: function getDropdownContainer() {
- if (!this.dropdownContainer) {
- this.dropdownContainer = document.createElement('div');
- document.body.appendChild(this.dropdownContainer);
- }
- return this.dropdownContainer;
- },
- getPlaceholderElement: function getPlaceholderElement() {
- var h = this.$createElement;
- var props = this.$props,
- state = this.$data;
- var hidden = false;
- if (state._mirrorInputValue) {
- hidden = true;
- }
- var value = state._value;
- if (value.length) {
- hidden = true;
- }
- if (!state._mirrorInputValue && isCombobox(props) && value.length === 1 && state._value && !state._value[0]) {
- hidden = false;
- }
- var placeholder = props.placeholder;
- if (placeholder) {
- var p = {
- on: {
- mousedown: preventDefaultEvent,
- click: this.onPlaceholderClick
- },
- attrs: UNSELECTABLE_ATTRIBUTE,
- style: _extends({
- display: hidden ? 'none' : 'block'
- }, UNSELECTABLE_STYLE),
- 'class': props.prefixCls + '-selection__placeholder'
- };
- return h(
- 'div',
- p,
- [placeholder]
- );
- }
- return null;
- },
- inputClick: function inputClick(e) {
- if (this.$data._open) {
- this.clearBlurTime();
- e.stopPropagation();
- } else {
- this._focused = false;
- }
- },
- inputBlur: function inputBlur(e) {
- var _this9 = this;
- var target = e.relatedTarget || document.activeElement;
- // https://github.com/vueComponent/ant-design-vue/issues/999
- // https://github.com/vueComponent/ant-design-vue/issues/1223
- if ((isIE || isEdge) && (e.relatedTarget === this.$refs.arrow || target && this.selectTriggerRef && this.selectTriggerRef.getInnerMenu() && this.selectTriggerRef.getInnerMenu().$el === target || contains(e.target, target))) {
- e.target.focus();
- e.preventDefault();
- return;
- }
- this.clearBlurTime();
- if (this.disabled) {
- e.preventDefault();
- return;
- }
- this.blurTimer = setTimeout(function () {
- _this9._focused = false;
- _this9.updateFocusClassName();
- var props = _this9.$props;
- var value = _this9.$data._value;
- var inputValue = _this9.$data._inputValue;
- if (isSingleMode(props) && props.showSearch && inputValue && props.defaultActiveFirstOption) {
- var options = _this9._options || [];
- if (options.length) {
- var firstOption = findFirstMenuItem(options);
- if (firstOption) {
- value = [getValuePropValue(firstOption)];
- _this9.fireChange(value);
- }
- }
- } else if (isMultipleOrTags(props) && inputValue) {
- if (_this9._mouseDown) {
- // need update dropmenu when not blur
- _this9.setInputValue('');
- } else {
- // why not use setState?
- _this9.$data._inputValue = '';
- if (_this9.getInputDOMNode && _this9.getInputDOMNode()) {
- _this9.getInputDOMNode().value = '';
- }
- }
- var tmpValue = _this9.getValueByInput(inputValue);
- if (tmpValue !== undefined) {
- value = tmpValue;
- _this9.fireChange(value);
- }
- }
- // if click the rest space of Select in multiple mode
- if (isMultipleOrTags(props) && _this9._mouseDown) {
- _this9.maybeFocus(true, true);
- _this9._mouseDown = false;
- return;
- }
- _this9.setOpenState(false);
- _this9.$emit('blur', _this9.getVLForOnChange(value));
- }, 200);
- },
- inputFocus: function inputFocus(e) {
- if (this.$props.disabled) {
- e.preventDefault();
- return;
- }
- this.clearBlurTime();
- // In IE11, onOuterFocus will be trigger twice when focus input
- // First one: e.target is div
- // Second one: e.target is input
- // other browser only trigger second one
- // https://github.com/ant-design/ant-design/issues/15942
- // Here we ignore the first one when e.target is div
- var inputNode = this.getInputDOMNode();
- if (inputNode && e.target === this.rootRef) {
- return;
- }
- if (!isMultipleOrTagsOrCombobox(this.$props) && e.target === inputNode) {
- return;
- }
- if (this._focused) {
- return;
- }
- this._focused = true;
- this.updateFocusClassName();
- // only effect multiple or tag mode
- if (!isMultipleOrTags(this.$props) || !this._mouseDown) {
- this.timeoutFocus();
- }
- },
- _getInputElement: function _getInputElement() {
- var h = this.$createElement;
- var props = this.$props;
- var _$data = this.$data,
- inputValue = _$data._inputValue,
- _mirrorInputValue = _$data._mirrorInputValue;
- var attrs = getAttrs(this);
- var defaultInput = h('input', {
- attrs: { id: attrs.id, autoComplete: 'off' }
- });
- var inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
- var inputCls = classnames(getClass(inputElement), _defineProperty({}, props.prefixCls + '-search__field', true));
- var inputEvents = getEvents(inputElement);
- // https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
- // Add space to the end of the inputValue as the width measurement tolerance
- inputElement.data = inputElement.data || {};
- return h(
- 'div',
- { 'class': props.prefixCls + '-search__field__wrap', on: {
- 'click': this.inputClick
- }
- },
- [cloneElement(inputElement, {
- props: {
- disabled: props.disabled,
- value: inputValue
- },
- attrs: _extends({}, inputElement.data.attrs || {}, {
- disabled: props.disabled,
- value: inputValue
- }),
- domProps: {
- value: inputValue
- },
- 'class': inputCls,
- directives: [{
- name: 'ant-ref',
- value: this.saveInputRef
- }, {
- name: 'ant-input'
- }],
- on: {
- input: this.onInputChange,
- keydown: chaining(this.onInputKeydown, inputEvents.keydown, getListeners(this).inputKeydown),
- focus: chaining(this.inputFocus, inputEvents.focus),
- blur: chaining(this.inputBlur, inputEvents.blur)
- }
- }), h(
- 'span',
- _mergeJSXProps([{
- directives: [{
- name: 'ant-ref',
- value: this.saveInputMirrorRef
- }]
- }, {
- // ref='inputMirrorRef'
- 'class': props.prefixCls + '-search__field__mirror'
- }]),
- [_mirrorInputValue, '\xA0']
- )]
- );
- },
- getInputDOMNode: function getInputDOMNode() {
- return this.topCtrlRef ? this.topCtrlRef.querySelector('input,textarea,div[contentEditable]') : this.inputRef;
- },
- getInputMirrorDOMNode: function getInputMirrorDOMNode() {
- return this.inputMirrorRef;
- },
- getPopupDOMNode: function getPopupDOMNode() {
- if (this.selectTriggerRef) {
- return this.selectTriggerRef.getPopupDOMNode();
- }
- },
- getPopupMenuComponent: function getPopupMenuComponent() {
- if (this.selectTriggerRef) {
- return this.selectTriggerRef.getInnerMenu();
- }
- },
- setOpenState: function setOpenState(open) {
- var _this10 = this;
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
- var props = this.$props,
- state = this.$data;
- var needFocus = config.needFocus,
- fireSearch = config.fireSearch;
- if (state._open === open) {
- this.maybeFocus(open, !!needFocus);
- return;
- }
- this.__emit('dropdownVisibleChange', open);
- var nextState = {
- _open: open,
- _backfillValue: ''
- };
- // clear search input value when open is false in singleMode.
- if (!open && isSingleMode(props) && props.showSearch) {
- this.setInputValue('', fireSearch);
- }
- if (!open) {
- this.maybeFocus(open, !!needFocus);
- }
- this.setState(nextState, function () {
- if (open) {
- _this10.maybeFocus(open, !!needFocus);
- }
- });
- },
- setInputValue: function setInputValue(inputValue) {
- var fireSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
- if (inputValue !== this.$data._inputValue) {
- this.setState({
- _inputValue: inputValue
- }, this.forcePopupAlign);
- if (fireSearch) {
- this.$emit('search', inputValue);
- }
- }
- },
- getValueByInput: function getValueByInput(str) {
- var _this11 = this;
- var _$props2 = this.$props,
- multiple = _$props2.multiple,
- tokenSeparators = _$props2.tokenSeparators;
- var nextValue = this.$data._value;
- var hasNewValue = false;
- splitBySeparators(str, tokenSeparators).forEach(function (label) {
- var selectedValue = [label];
- if (multiple) {
- var value = _this11.getValueByLabel(label);
- if (value && findIndexInValueBySingleValue(nextValue, value) === -1) {
- nextValue = nextValue.concat(value);
- hasNewValue = true;
- _this11.fireSelect(value);
- }
- } else if (findIndexInValueBySingleValue(nextValue, label) === -1) {
- nextValue = nextValue.concat(selectedValue);
- hasNewValue = true;
- _this11.fireSelect(label);
- }
- });
- return hasNewValue ? nextValue : undefined;
- },
- getRealOpenState: function getRealOpenState(state) {
- var _open = this.$props.open;
- if (typeof _open === 'boolean') {
- return _open;
- }
- var open = (state || this.$data)._open;
- var options = this._options || [];
- if (isMultipleOrTagsOrCombobox(this.$props) || !this.$props.showSearch) {
- if (open && !options.length) {
- open = false;
- }
- }
- return open;
- },
- focus: function focus() {
- if (isSingleMode(this.$props) && this.selectionRef) {
- this.selectionRef.focus();
- } else if (this.getInputDOMNode()) {
- this.getInputDOMNode().focus();
- }
- },
- blur: function blur() {
- if (isSingleMode(this.$props) && this.selectionRef) {
- this.selectionRef.blur();
- } else if (this.getInputDOMNode()) {
- this.getInputDOMNode().blur();
- }
- },
- markMouseDown: function markMouseDown() {
- this._mouseDown = true;
- },
- markMouseLeave: function markMouseLeave() {
- this._mouseDown = false;
- },
- handleBackfill: function handleBackfill(item) {
- if (!this.backfill || !(isSingleMode(this.$props) || isCombobox(this.$props))) {
- return;
- }
- var key = getValuePropValue(item);
- if (isCombobox(this.$props)) {
- this.setInputValue(key, false);
- }
- this.setState({
- _value: [key],
- _backfillValue: key
- });
- },
- _filterOption: function _filterOption(input, child) {
- var defaultFilter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultFilterFn;
- var _$data2 = this.$data,
- value = _$data2._value,
- backfillValue = _$data2._backfillValue;
- var lastValue = value[value.length - 1];
- if (!input || lastValue && lastValue === backfillValue) {
- return true;
- }
- var filterFn = this.$props.filterOption;
- if (hasProp(this, 'filterOption')) {
- if (filterFn === true) {
- filterFn = defaultFilter.bind(this);
- }
- } else {
- filterFn = defaultFilter.bind(this);
- }
- if (!filterFn) {
- return true;
- } else if (typeof filterFn === 'function') {
- return filterFn.call(this, input, child);
- } else if (getValue(child, 'disabled')) {
- return false;
- }
- return true;
- },
- timeoutFocus: function timeoutFocus() {
- var _this12 = this;
- if (this.focusTimer) {
- this.clearFocusTime();
- }
- this.focusTimer = window.setTimeout(function () {
- // this._focused = true
- // this.updateFocusClassName()
- _this12.$emit('focus');
- }, 10);
- },
- clearFocusTime: function clearFocusTime() {
- if (this.focusTimer) {
- clearTimeout(this.focusTimer);
- this.focusTimer = null;
- }
- },
- clearBlurTime: function clearBlurTime() {
- if (this.blurTimer) {
- clearTimeout(this.blurTimer);
- this.blurTimer = null;
- }
- },
- clearComboboxTime: function clearComboboxTime() {
- if (this.comboboxTimer) {
- clearTimeout(this.comboboxTimer);
- this.comboboxTimer = null;
- }
- },
- updateFocusClassName: function updateFocusClassName() {
- var rootRef = this.rootRef,
- prefixCls = this.prefixCls;
- // avoid setState and its side effect
- if (this._focused) {
- classes(rootRef).add(prefixCls + '-focused');
- } else {
- classes(rootRef).remove(prefixCls + '-focused');
- }
- },
- maybeFocus: function maybeFocus(open, needFocus) {
- if (needFocus || open) {
- var input = this.getInputDOMNode();
- var _document = document,
- activeElement = _document.activeElement;
- if (input && (open || isMultipleOrTagsOrCombobox(this.$props))) {
- if (activeElement !== input) {
- input.focus();
- this._focused = true;
- }
- } else if (activeElement !== this.selectionRef && this.selectionRef) {
- this.selectionRef.focus();
- this._focused = true;
- }
- }
- },
- removeSelected: function removeSelected(selectedKey, e) {
- var props = this.$props;
- if (props.disabled || this.isChildDisabled(selectedKey)) {
- return;
- }
- // Do not trigger Trigger popup
- if (e && e.stopPropagation) {
- e.stopPropagation();
- }
- var oldValue = this.$data._value;
- var value = oldValue.filter(function (singleValue) {
- return singleValue !== selectedKey;
- });
- var canMultiple = isMultipleOrTags(props);
- if (canMultiple) {
- var event = selectedKey;
- if (props.labelInValue) {
- event = {
- key: selectedKey,
- label: this.getLabelBySingleValue(selectedKey)
- };
- }
- this.$emit('deselect', event, this.getOptionBySingleValue(selectedKey));
- }
- this.fireChange(value);
- },
- openIfHasChildren: function openIfHasChildren() {
- var $props = this.$props;
- if ($props.children && $props.children.length || isSingleMode($props)) {
- this.setOpenState(true);
- }
- },
- fireSelect: function fireSelect(value) {
- this.$emit('select', this.getVLBySingleValue(value), this.getOptionBySingleValue(value));
- },
- fireChange: function fireChange(value) {
- if (!hasProp(this, 'value')) {
- this.setState({
- _value: value
- }, this.forcePopupAlign);
- }
- var vls = this.getVLForOnChange(value);
- var options = this.getOptionsBySingleValue(value);
- this._valueOptions = options;
- this.$emit('change', vls, isMultipleOrTags(this.$props) ? options : options[0]);
- },
- isChildDisabled: function isChildDisabled(key) {
- return (this.$props.children || []).some(function (child) {
- var childValue = getValuePropValue(child);
- return childValue === key && getValue(child, 'disabled');
- });
- },
- forcePopupAlign: function forcePopupAlign() {
- if (!this.$data._open) {
- return;
- }
- if (this.selectTriggerRef && this.selectTriggerRef.triggerRef) {
- this.selectTriggerRef.triggerRef.forcePopupAlign();
- }
- },
- renderFilterOptions: function renderFilterOptions() {
- var h = this.$createElement;
- var inputValue = this.$data._inputValue;
- var _$props3 = this.$props,
- children = _$props3.children,
- tags = _$props3.tags,
- notFoundContent = _$props3.notFoundContent;
- var menuItems = [];
- var childrenKeys = [];
- var empty = false;
- var options = this.renderFilterOptionsFromChildren(children, childrenKeys, menuItems);
- if (tags) {
- // tags value must be string
- var value = this.$data._value;
- value = value.filter(function (singleValue) {
- return childrenKeys.indexOf(singleValue) === -1 && (!inputValue || String(singleValue).indexOf(String(inputValue)) > -1);
- });
- // sort by length
- value.sort(function (val1, val2) {
- return val1.length - val2.length;
- });
- value.forEach(function (singleValue) {
- var key = singleValue;
- var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
- role: 'option'
- });
- var menuItem = h(
- MenuItem,
- _mergeJSXProps([{ style: UNSELECTABLE_STYLE }, { attrs: attrs }, {
- attrs: { value: key },
- key: key }]),
- [key]
- );
- options.push(menuItem);
- menuItems.push(menuItem);
- });
- // ref: https://github.com/ant-design/ant-design/issues/14090
- if (inputValue && menuItems.every(function (option) {
- return getValuePropValue(option) !== inputValue;
- })) {
- var p = {
- attrs: UNSELECTABLE_ATTRIBUTE,
- key: inputValue,
- props: {
- value: inputValue,
- role: 'option'
- },
- style: UNSELECTABLE_STYLE
- };
- options.unshift(h(
- MenuItem,
- p,
- [inputValue]
- ));
- }
- }
- if (!options.length && notFoundContent) {
- empty = true;
- var _p = {
- attrs: UNSELECTABLE_ATTRIBUTE,
- key: 'NOT_FOUND',
- props: {
- value: 'NOT_FOUND',
- disabled: true,
- role: 'option'
- },
- style: UNSELECTABLE_STYLE
- };
- options = [h(
- MenuItem,
- _p,
- [notFoundContent]
- )];
- }
- return { empty: empty, options: options };
- },
- renderFilterOptionsFromChildren: function renderFilterOptionsFromChildren() {
- var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
- var _this13 = this;
- var childrenKeys = arguments[1];
- var menuItems = arguments[2];
- var h = this.$createElement;
- var sel = [];
- var props = this.$props;
- var inputValue = this.$data._inputValue;
- var tags = props.tags;
- children.forEach(function (child) {
- if (!child.data || child.data.slot !== undefined) {
- return;
- }
- if (getSlotOptions(child).isSelectOptGroup) {
- var label = getComponentFromProp(child, 'label');
- var key = child.key;
- if (!key && typeof label === 'string') {
- key = label;
- } else if (!label && key) {
- label = key;
- }
- var childChildren = getSlots(child)['default'];
- childChildren = typeof childChildren === 'function' ? childChildren() : childChildren;
- // Match option group label
- if (inputValue && _this13._filterOption(inputValue, child)) {
- var innerItems = childChildren.map(function (subChild) {
- var childValueSub = getValuePropValue(subChild) || subChild.key;
- return h(
- MenuItem,
- _mergeJSXProps([{ key: childValueSub, attrs: { value: childValueSub }
- }, subChild.data]),
- [subChild.componentOptions.children]
- );
- });
- sel.push(h(
- MenuItemGroup,
- { key: key, attrs: { title: label },
- 'class': getClass(child) },
- [innerItems]
- ));
- // Not match
- } else {
- var _innerItems = _this13.renderFilterOptionsFromChildren(childChildren, childrenKeys, menuItems);
- if (_innerItems.length) {
- sel.push(h(
- MenuItemGroup,
- _mergeJSXProps([{ key: key, attrs: { title: label }
- }, child.data]),
- [_innerItems]
- ));
- }
- }
- return;
- }
- warning(getSlotOptions(child).isSelectOption, 'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' + ('instead of `' + (getSlotOptions(child).name || getSlotOptions(child)) + '`.'));
- var childValue = getValuePropValue(child);
- validateOptionValue(childValue, _this13.$props);
- if (_this13._filterOption(inputValue, child)) {
- var p = {
- attrs: _extends({}, UNSELECTABLE_ATTRIBUTE, getAttrs(child)),
- key: childValue,
- props: _extends({
- value: childValue
- }, getPropsData(child), {
- role: 'option'
- }),
- style: UNSELECTABLE_STYLE,
- on: getEvents(child),
- 'class': getClass(child)
- };
- var menuItem = h(
- MenuItem,
- p,
- [child.componentOptions.children]
- );
- sel.push(menuItem);
- menuItems.push(menuItem);
- }
- if (tags) {
- childrenKeys.push(childValue);
- }
- });
- return sel;
- },
- renderTopControlNode: function renderTopControlNode() {
- var _this14 = this;
- var h = this.$createElement;
- var props = this.$props;
- var _$data3 = this.$data,
- value = _$data3._value,
- inputValue = _$data3._inputValue,
- open = _$data3._open;
- var choiceTransitionName = props.choiceTransitionName,
- prefixCls = props.prefixCls,
- maxTagTextLength = props.maxTagTextLength,
- maxTagCount = props.maxTagCount,
- maxTagPlaceholder = props.maxTagPlaceholder,
- showSearch = props.showSearch;
- var removeIcon = getComponentFromProp(this, 'removeIcon');
- var className = prefixCls + '-selection__rendered';
- // search input is inside topControlNode in single, multiple & combobox. 2016/04/13
- var innerNode = null;
- if (isSingleMode(props)) {
- var selectedValue = null;
- if (value.length) {
- var showSelectedValue = false;
- var opacity = 1;
- if (!showSearch) {
- showSelectedValue = true;
- } else if (open) {
- showSelectedValue = !inputValue;
- if (showSelectedValue) {
- opacity = 0.4;
- }
- } else {
- showSelectedValue = true;
- }
- var singleValue = value[0];
- var _getOptionInfoBySingl3 = this.getOptionInfoBySingleValue(singleValue),
- label = _getOptionInfoBySingl3.label,
- title = _getOptionInfoBySingl3.title;
- selectedValue = h(
- 'div',
- {
- key: 'value',
- 'class': prefixCls + '-selection-selected-value',
- attrs: { title: toTitle(title || label)
- },
- style: {
- display: showSelectedValue ? 'block' : 'none',
- opacity: opacity
- }
- },
- [label]
- );
- }
- if (!showSearch) {
- innerNode = [selectedValue];
- } else {
- innerNode = [selectedValue, h(
- 'div',
- {
- 'class': prefixCls + '-search ' + prefixCls + '-search--inline',
- key: 'input',
- style: {
- display: open ? 'block' : 'none'
- }
- },
- [this._getInputElement()]
- )];
- }
- } else {
- var selectedValueNodes = [];
- var limitedCountValue = value;
- var maxTagPlaceholderEl = void 0;
- if (maxTagCount !== undefined && value.length > maxTagCount) {
- limitedCountValue = limitedCountValue.slice(0, maxTagCount);
- var omittedValues = this.getVLForOnChange(value.slice(maxTagCount, value.length));
- var content = '+ ' + (value.length - maxTagCount) + ' ...';
- if (maxTagPlaceholder) {
- content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
- }
- var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
- role: 'presentation',
- title: toTitle(content)
- });
- maxTagPlaceholderEl = h(
- 'li',
- _mergeJSXProps([{
- style: UNSELECTABLE_STYLE
- }, { attrs: attrs }, {
- on: {
- 'mousedown': preventDefaultEvent
- },
- 'class': prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled',
- key: 'maxTagPlaceholder'
- }]),
- [h(
- 'div',
- { 'class': prefixCls + '-selection__choice__content' },
- [content]
- )]
- );
- }
- if (isMultipleOrTags(props)) {
- selectedValueNodes = limitedCountValue.map(function (singleValue) {
- var info = _this14.getOptionInfoBySingleValue(singleValue);
- var content = info.label;
- var title = info.title || content;
- if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
- content = content.slice(0, maxTagTextLength) + '...';
- }
- var disabled = _this14.isChildDisabled(singleValue);
- var choiceClassName = disabled ? prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled' : prefixCls + '-selection__choice';
- // attrs 放在一起,避免动态title混乱问题,很奇怪的问题 https://github.com/vueComponent/ant-design-vue/issues/588
- var attrs = _extends({}, UNSELECTABLE_ATTRIBUTE, {
- role: 'presentation',
- title: toTitle(title)
- });
- return h(
- 'li',
- _mergeJSXProps([{
- style: UNSELECTABLE_STYLE
- }, { attrs: attrs }, {
- on: {
- 'mousedown': preventDefaultEvent
- },
- 'class': choiceClassName,
- key: singleValue || SELECT_EMPTY_VALUE_KEY
- }]),
- [h(
- 'div',
- { 'class': prefixCls + '-selection__choice__content' },
- [content]
- ), disabled ? null : h(
- 'span',
- {
- on: {
- 'click': function click(event) {
- _this14.removeSelected(singleValue, event);
- }
- },
- 'class': prefixCls + '-selection__choice__remove'
- },
- [removeIcon || h(
- 'i',
- { 'class': prefixCls + '-selection__choice__remove-icon' },
- ['\xD7']
- )]
- )]
- );
- });
- }
- if (maxTagPlaceholderEl) {
- selectedValueNodes.push(maxTagPlaceholderEl);
- }
- selectedValueNodes.push(h(
- 'li',
- { 'class': prefixCls + '-search ' + prefixCls + '-search--inline', key: '__input' },
- [this._getInputElement()]
- ));
- if (isMultipleOrTags(props) && choiceTransitionName) {
- var transitionProps = getTransitionProps(choiceTransitionName, {
- tag: 'ul',
- afterLeave: this.onChoiceAnimationLeave
- });
- innerNode = h(
- 'transition-group',
- transitionProps,
- [selectedValueNodes]
- );
- } else {
- innerNode = h('ul', [selectedValueNodes]);
- }
- }
- return h(
- 'div',
- _mergeJSXProps([{
- 'class': className
- }, {
- directives: [{
- name: 'ant-ref',
- value: this.saveTopCtrlRef
- }]
- }, {
- on: {
- 'click': this.topCtrlContainerClick
- }
- }]),
- [this.getPlaceholderElement(), innerNode]
- );
- },
- renderArrow: function renderArrow(multiple) {
- var h = this.$createElement;
- // showArrow : Set to true if not multiple by default but keep set value.
- var _$props4 = this.$props,
- _$props4$showArrow = _$props4.showArrow,
- showArrow = _$props4$showArrow === undefined ? !multiple : _$props4$showArrow,
- loading = _$props4.loading,
- prefixCls = _$props4.prefixCls;
- var inputIcon = getComponentFromProp(this, 'inputIcon');
- if (!showArrow && !loading) {
- return null;
- }
- // if loading have loading icon
- var defaultIcon = loading ? h('i', { 'class': prefixCls + '-arrow-loading' }) : h('i', { 'class': prefixCls + '-arrow-icon' });
- return h(
- 'span',
- _mergeJSXProps([{
- key: 'arrow',
- 'class': prefixCls + '-arrow',
- style: UNSELECTABLE_STYLE
- }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
- on: {
- 'click': this.onArrowClick
- },
- ref: 'arrow'
- }]),
- [inputIcon || defaultIcon]
- );
- },
- topCtrlContainerClick: function topCtrlContainerClick(e) {
- if (this.$data._open && !isSingleMode(this.$props)) {
- e.stopPropagation();
- }
- },
- renderClear: function renderClear() {
- var h = this.$createElement;
- var _$props5 = this.$props,
- prefixCls = _$props5.prefixCls,
- allowClear = _$props5.allowClear;
- var _$data4 = this.$data,
- value = _$data4._value,
- inputValue = _$data4._inputValue;
- var clearIcon = getComponentFromProp(this, 'clearIcon');
- var clear = h(
- 'span',
- _mergeJSXProps([{
- key: 'clear',
- 'class': prefixCls + '-selection__clear',
- on: {
- 'mousedown': preventDefaultEvent
- },
- style: UNSELECTABLE_STYLE
- }, { attrs: UNSELECTABLE_ATTRIBUTE }, {
- on: {
- 'click': this.onClearSelection
- }
- }]),
- [clearIcon || h(
- 'i',
- { 'class': prefixCls + '-selection__clear-icon' },
- ['\xD7']
- )]
- );
- if (!allowClear) {
- return null;
- }
- if (isCombobox(this.$props)) {
- if (inputValue) {
- return clear;
- }
- return null;
- }
- if (inputValue || value.length) {
- return clear;
- }
- return null;
- },
- selectionRefClick: function selectionRefClick() {
- //e.stopPropagation();
- if (!this.disabled) {
- var input = this.getInputDOMNode();
- if (this._focused && this.$data._open) {
- // this._focused = false;
- this.setOpenState(false, false);
- input && input.blur();
- } else {
- this.clearBlurTime();
- //this._focused = true;
- this.setOpenState(true, true);
- input && input.focus();
- }
- }
- },
- selectionRefFocus: function selectionRefFocus(e) {
- if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
- e.preventDefault();
- return;
- }
- this._focused = true;
- this.updateFocusClassName();
- this.$emit('focus');
- },
- selectionRefBlur: function selectionRefBlur(e) {
- if (isMultipleOrTagsOrCombobox(this.$props)) {
- e.preventDefault();
- return;
- }
- this.inputBlur(e);
- }
- },
- render: function render() {
- var _rootCls;
- var h = arguments[0];
- var props = this.$props;
- var multiple = isMultipleOrTags(props);
- // Default set showArrow to true if not set (not set directly in defaultProps to handle multiple case)
- var _props$showArrow = props.showArrow,
- showArrow = _props$showArrow === undefined ? true : _props$showArrow;
- var state = this.$data;
- var disabled = props.disabled,
- prefixCls = props.prefixCls,
- loading = props.loading;
- var ctrlNode = this.renderTopControlNode();
- var _$data5 = this.$data,
- open = _$data5._open,
- inputValue = _$data5._inputValue,
- value = _$data5._value;
- if (open) {
- var filterOptions = this.renderFilterOptions();
- this._empty = filterOptions.empty;
- this._options = filterOptions.options;
- }
- var realOpen = this.getRealOpenState();
- var empty = this._empty;
- var options = this._options || [];
- var _getListeners = getListeners(this),
- _getListeners$mouseen = _getListeners.mouseenter,
- mouseenter = _getListeners$mouseen === undefined ? noop : _getListeners$mouseen,
- _getListeners$mousele = _getListeners.mouseleave,
- mouseleave = _getListeners$mousele === undefined ? noop : _getListeners$mousele,
- _getListeners$popupSc = _getListeners.popupScroll,
- popupScroll = _getListeners$popupSc === undefined ? noop : _getListeners$popupSc;
- var selectionProps = {
- props: {},
- attrs: {
- role: 'combobox',
- 'aria-autocomplete': 'list',
- 'aria-haspopup': 'true',
- 'aria-expanded': realOpen,
- 'aria-controls': this.$data._ariaId
- },
- on: {
- // click: this.selectionRefClick,
- },
- 'class': prefixCls + '-selection ' + prefixCls + '-selection--' + (multiple ? 'multiple' : 'single'),
- // directives: [
- // {
- // name: 'ant-ref',
- // value: this.saveSelectionRef,
- // },
- // ],
- key: 'selection'
- };
- //if (!isMultipleOrTagsOrCombobox(props)) {
- // selectionProps.on.keydown = this.onKeyDown;
- // selectionProps.on.focus = this.selectionRefFocus;
- // selectionProps.on.blur = this.selectionRefBlur;
- // selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
- //}
- var extraSelectionProps = { attrs: { tabIndex: -1 } };
- if (!isMultipleOrTagsOrCombobox(props)) {
- extraSelectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
- }
- 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);
- return h(
- SelectTrigger,
- _mergeJSXProps([{
- attrs: {
- dropdownAlign: props.dropdownAlign,
- dropdownClassName: props.dropdownClassName,
- dropdownMatchSelectWidth: props.dropdownMatchSelectWidth,
- defaultActiveFirstOption: props.defaultActiveFirstOption,
- dropdownMenuStyle: props.dropdownMenuStyle,
- transitionName: props.transitionName,
- animation: props.animation,
- prefixCls: props.prefixCls,
- dropdownStyle: props.dropdownStyle,
- combobox: props.combobox,
- showSearch: props.showSearch,
- options: options,
- empty: empty,
- multiple: multiple,
- disabled: disabled,
- visible: realOpen,
- inputValue: inputValue,
- value: value,
- backfillValue: state._backfillValue,
- firstActiveValue: props.firstActiveValue,
- getPopupContainer: props.getPopupContainer,
- showAction: props.showAction,
- menuItemSelectedIcon: getComponentFromProp(this, 'menuItemSelectedIcon')
- },
- on: {
- 'dropdownVisibleChange': this.onDropdownVisibleChange,
- 'menuSelect': this.onMenuSelect,
- 'menuDeselect': this.onMenuDeselect,
- 'popupScroll': popupScroll,
- 'popupFocus': this.onPopupFocus,
- 'mouseenter': mouseenter,
- 'mouseleave': mouseleave
- }
- }, {
- directives: [{
- name: 'ant-ref',
- value: this.saveSelectTriggerRef
- }]
- }, {
- attrs: {
- dropdownRender: props.dropdownRender,
- ariaId: this.$data._ariaId
- }
- }]),
- [h(
- 'div',
- _mergeJSXProps([{
- directives: [{
- name: 'ant-ref',
- value: chaining(this.saveRootRef, this.saveSelectionRef)
- }]
- }, {
- style: getStyle(this),
- 'class': classnames(rootCls),
- on: {
- 'mousedown': this.markMouseDown,
- 'mouseup': this.markMouseLeave,
- 'mouseout': this.markMouseLeave
- }
- }, extraSelectionProps, {
- on: {
- 'blur': this.selectionRefBlur,
- 'focus': this.selectionRefFocus,
- 'click': this.selectionRefClick,
- 'keydown': isMultipleOrTagsOrCombobox(props) ? noop : this.onKeyDown
- }
- }]),
- [h(
- 'div',
- selectionProps,
- [ctrlNode, this.renderClear(), this.renderArrow(!!multiple)]
- )]
- )]
- );
- }
- };
- export { Select };
- export default proxyComponent(Select);
|