NuclearDispersionSystem/ant-design-vue-jeecg/node_modules/ant-design-vue/lib/vc-select/Select.js

1831 lines
61 KiB
JavaScript
Raw Normal View History

2023-09-14 14:47:11 +08:00
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Select = undefined;
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _KeyCode = require('../_util/KeyCode');
var _KeyCode2 = _interopRequireDefault(_KeyCode);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _classnames2 = require('classnames');
var _classnames3 = _interopRequireDefault(_classnames2);
var _componentClasses = require('component-classes');
var _componentClasses2 = _interopRequireDefault(_componentClasses);
var _vcMenu = require('../vc-menu');
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _Option = require('./Option');
var _Option2 = _interopRequireDefault(_Option);
var _OptGroup = require('./OptGroup');
var _OptGroup2 = _interopRequireDefault(_OptGroup);
var _propsUtil = require('../_util/props-util');
var _getTransitionProps = require('../_util/getTransitionProps');
var _getTransitionProps2 = _interopRequireDefault(_getTransitionProps);
var _vnode = require('../_util/vnode');
var _BaseMixin = require('../_util/BaseMixin');
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _proxyComponent = require('../_util/proxyComponent');
var _proxyComponent2 = _interopRequireDefault(_proxyComponent);
var _vueRef = require('vue-ref');
var _vueRef2 = _interopRequireDefault(_vueRef);
var _SelectTrigger = require('./SelectTrigger');
var _SelectTrigger2 = _interopRequireDefault(_SelectTrigger);
var _util = require('./util');
var _PropTypes = require('./PropTypes');
var _contains = require('../vc-util/Dom/contains');
var _contains2 = _interopRequireDefault(_contains);
var _env = require('../_util/env');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
_vue2['default'].use(_vueRef2['default'], { 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: _Option2['default'],
OptGroup: _OptGroup2['default'],
name: 'Select',
mixins: [_BaseMixin2['default']],
props: (0, _extends3['default'])({}, _PropTypes.SelectPropTypes, {
prefixCls: _PropTypes.SelectPropTypes.prefixCls.def('rc-select'),
defaultOpen: _vueTypes2['default'].bool.def(false),
labelInValue: _PropTypes.SelectPropTypes.labelInValue.def(false),
defaultActiveFirstOption: _PropTypes.SelectPropTypes.defaultActiveFirstOption.def(true),
showSearch: _PropTypes.SelectPropTypes.showSearch.def(true),
allowClear: _PropTypes.SelectPropTypes.allowClear.def(false),
placeholder: _PropTypes.SelectPropTypes.placeholder.def(''),
// showArrow: SelectPropTypes.showArrow.def(true),
dropdownMatchSelectWidth: _vueTypes2['default'].bool.def(true),
dropdownStyle: _PropTypes.SelectPropTypes.dropdownStyle.def(function () {
return {};
}),
dropdownMenuStyle: _vueTypes2['default'].object.def(function () {
return {};
}),
optionFilterProp: _PropTypes.SelectPropTypes.optionFilterProp.def('value'),
optionLabelProp: _PropTypes.SelectPropTypes.optionLabelProp.def('value'),
notFoundContent: _vueTypes2['default'].any.def('Not Found'),
backfill: _vueTypes2['default'].bool.def(false),
showAction: _PropTypes.SelectPropTypes.showAction.def(['click']),
combobox: _vueTypes2['default'].bool.def(false),
tokenSeparators: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string).def([]),
autoClearSearchValue: _vueTypes2['default'].bool.def(true),
tabIndex: _vueTypes2['default'].any.def(0),
dropdownRender: _vueTypes2['default'].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 = (0, _util.saveRef)(this, 'inputRef');
this.saveInputMirrorRef = (0, _util.saveRef)(this, 'inputMirrorRef');
this.saveTopCtrlRef = (0, _util.saveRef)(this, 'topCtrlRef');
this.saveSelectTriggerRef = (0, _util.saveRef)(this, 'selectTriggerRef');
this.saveRootRef = (0, _util.saveRef)(this, 'rootRef');
this.saveSelectionRef = (0, _util.saveRef)(this, 'selectionRef');
this._focused = false;
this._mouseDown = false;
this._options = [];
this._empty = false;
},
data: function data() {
var props = (0, _propsUtil.getOptionProps)(this);
var optionsInfo = this.getOptionsInfoFromProps(props);
(0, _warning2['default'])(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;
});
(0, _warning2['default'])(!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: (0, _util.generateUUID)()
};
return (0, _extends3['default'])({}, 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__() {
(0, _extends3['default'])(this.$data, this.getDerivedState((0, _propsUtil.getOptionProps)(this), this.$data));
},
'$data._inputValue': function $data_inputValue(val) {
this.$data._mirrorInputValue = val;
}
},
updated: function updated() {
var _this2 = this;
this.$nextTick(function () {
if ((0, _util.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 ((0, _propsUtil.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 = (0, _util.toArray)(props.value);
}
if ('defaultValue' in props && useDefaultValue) {
value = (0, _util.toArray)(props.defaultValue);
}
if (value.length) {
value = value[0];
} else {
return '';
}
var label = value;
if (props.labelInValue) {
label = value.label;
} else if (optionsInfo[(0, _util.getMapKey)(value)]) {
label = optionsInfo[(0, _util.getMapKey)(value)].label;
}
if (label === undefined) {
label = '';
}
return label;
},
getLabelFromOption: function getLabelFromOption(props, option) {
return (0, _util.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 = (0, _util.getValuePropValue)(option);
optionsInfo[(0, _util.getMapKey)(singleValue)] = {
option: option,
value: singleValue,
label: _this4.getLabelFromOption(props, option),
title: (0, _propsUtil.getValueByProp)(option, 'title'),
disabled: (0, _propsUtil.getValueByProp)(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 = (0, _util.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 = (0, _util.toArray)(props.value);
}
if ('defaultValue' in props && useDefaultValue) {
value = (0, _util.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 ((0, _util.isMultipleOrTags)(this.$props) && tokenSeparators.length && (0, _util.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 ((0, _util.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 === _KeyCode2['default'].ENTER || keyCode === _KeyCode2['default'].DOWN) {
// vue state是同步更新onKeyDown在onMenuSelect后会再次调用单选时不在调用setOpenState
// https://github.com/vueComponent/ant-design-vue/issues/1142
if (keyCode === _KeyCode2['default'].ENTER && !(0, _util.isMultipleOrTags)(this.$props)) {
this.maybeFocus(true);
} else if (!open) {
this.setOpenState(true);
}
event.preventDefault();
} else if (keyCode === _KeyCode2['default'].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 ((0, _util.isMultipleOrTags)(this.$props) && !event.target.value && keyCode === _KeyCode2['default'].BACKSPACE) {
event.preventDefault();
var value = state._value;
if (value.length) {
this.removeSelected(value[value.length - 1]);
}
return;
}
if (keyCode === _KeyCode2['default'].DOWN) {
if (!state._open) {
this.openIfHasChildren();
event.preventDefault();
event.stopPropagation();
return;
}
} else if (keyCode === _KeyCode2['default'].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 === _KeyCode2['default'].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 = (0, _util.getValuePropValue)(item);
var lastValue = value[value.length - 1];
var skipTrigger = false;
if ((0, _util.isMultipleOrTags)(props)) {
if ((0, _util.findIndexInValueBySingleValue)(value, selectedValue) !== -1) {
skipTrigger = true;
} else {
value = value.concat([selectedValue]);
}
} else {
if (!(0, _util.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 = (0, _util.isCombobox)(props) ? (0, _util.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 === _KeyCode2['default'].ENTER) {
var menuItemDomNode = item.$el;
// https://github.com/ant-design/ant-design/issues/20465#issuecomment-569033796
if (!isHidden(menuItemDomNode)) {
this.removeSelected((0, _util.getValuePropValue)(item));
}
return;
}
if (domEvent.type === 'click') {
this.removeSelected((0, _util.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[(0, _util.getMapKey)(value)]) {
info = optionsInfo[(0, _util.getMapKey)(value)];
}
if (info) {
return info;
}
var defaultLabel = value;
if (this.$props.labelInValue) {
var valueLabel = (0, _util.getLabelFromPropsValue)(this.$props.value, value);
var defaultValueLabel = (0, _util.getLabelFromPropsValue)(this.$props.defaultValue, value);
if (valueLabel !== undefined) {
defaultLabel = valueLabel;
} else if (defaultValueLabel !== undefined) {
defaultLabel = defaultValueLabel;
}
}
var defaultInfo = {
option: h(
_Option2['default'],
{
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 = (0, _util.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 (0, _util.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 && (0, _util.isCombobox)(props) && value.length === 1 && state._value && !state._value[0]) {
hidden = false;
}
var placeholder = props.placeholder;
if (placeholder) {
var p = {
on: {
mousedown: _util.preventDefaultEvent,
click: this.onPlaceholderClick
},
attrs: _util.UNSELECTABLE_ATTRIBUTE,
style: (0, _extends3['default'])({
display: hidden ? 'none' : 'block'
}, _util.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 ((_env.isIE || _env.isEdge) && (e.relatedTarget === this.$refs.arrow || target && this.selectTriggerRef && this.selectTriggerRef.getInnerMenu() && this.selectTriggerRef.getInnerMenu().$el === target || (0, _contains2['default'])(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 ((0, _util.isSingleMode)(props) && props.showSearch && inputValue && props.defaultActiveFirstOption) {
var options = _this9._options || [];
if (options.length) {
var firstOption = (0, _util.findFirstMenuItem)(options);
if (firstOption) {
value = [(0, _util.getValuePropValue)(firstOption)];
_this9.fireChange(value);
}
}
} else if ((0, _util.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 ((0, _util.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 (!(0, _util.isMultipleOrTagsOrCombobox)(this.$props) && e.target === inputNode) {
return;
}
if (this._focused) {
return;
}
this._focused = true;
this.updateFocusClassName();
// only effect multiple or tag mode
if (!(0, _util.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 = (0, _propsUtil.getAttrs)(this);
var defaultInput = h('input', {
attrs: { id: attrs.id, autoComplete: 'off' }
});
var inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
var inputCls = (0, _classnames3['default'])((0, _propsUtil.getClass)(inputElement), (0, _defineProperty3['default'])({}, props.prefixCls + '-search__field', true));
var inputEvents = (0, _propsUtil.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
}
},
[(0, _vnode.cloneElement)(inputElement, {
props: {
disabled: props.disabled,
value: inputValue
},
attrs: (0, _extends3['default'])({}, 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, (0, _propsUtil.getListeners)(this).inputKeydown),
focus: chaining(this.inputFocus, inputEvents.focus),
blur: chaining(this.inputBlur, inputEvents.blur)
}
}), h(
'span',
(0, _babelHelperVueJsxMergeProps2['default'])([{
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 && (0, _util.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;
(0, _util.splitBySeparators)(str, tokenSeparators).forEach(function (label) {
var selectedValue = [label];
if (multiple) {
var value = _this11.getValueByLabel(label);
if (value && (0, _util.findIndexInValueBySingleValue)(nextValue, value) === -1) {
nextValue = nextValue.concat(value);
hasNewValue = true;
_this11.fireSelect(value);
}
} else if ((0, _util.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 ((0, _util.isMultipleOrTagsOrCombobox)(this.$props) || !this.$props.showSearch) {
if (open && !options.length) {
open = false;
}
}
return open;
},
focus: function focus() {
if ((0, _util.isSingleMode)(this.$props) && this.selectionRef) {
this.selectionRef.focus();
} else if (this.getInputDOMNode()) {
this.getInputDOMNode().focus();
}
},
blur: function blur() {
if ((0, _util.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 || !((0, _util.isSingleMode)(this.$props) || (0, _util.isCombobox)(this.$props))) {
return;
}
var key = (0, _util.getValuePropValue)(item);
if ((0, _util.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] : _util.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 ((0, _propsUtil.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 ((0, _propsUtil.getValueByProp)(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) {
(0, _componentClasses2['default'])(rootRef).add(prefixCls + '-focused');
} else {
(0, _componentClasses2['default'])(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 || (0, _util.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 = (0, _util.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 || (0, _util.isSingleMode)($props)) {
this.setOpenState(true);
}
},
fireSelect: function fireSelect(value) {
this.$emit('select', this.getVLBySingleValue(value), this.getOptionBySingleValue(value));
},
fireChange: function fireChange(value) {
if (!(0, _propsUtil.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, (0, _util.isMultipleOrTags)(this.$props) ? options : options[0]);
},
isChildDisabled: function isChildDisabled(key) {
return (this.$props.children || []).some(function (child) {
var childValue = (0, _util.getValuePropValue)(child);
return childValue === key && (0, _propsUtil.getValueByProp)(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 = (0, _extends3['default'])({}, _util.UNSELECTABLE_ATTRIBUTE, {
role: 'option'
});
var menuItem = h(
_vcMenu.Item,
(0, _babelHelperVueJsxMergeProps2['default'])([{ style: _util.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 (0, _util.getValuePropValue)(option) !== inputValue;
})) {
var p = {
attrs: _util.UNSELECTABLE_ATTRIBUTE,
key: inputValue,
props: {
value: inputValue,
role: 'option'
},
style: _util.UNSELECTABLE_STYLE
};
options.unshift(h(
_vcMenu.Item,
p,
[inputValue]
));
}
}
if (!options.length && notFoundContent) {
empty = true;
var _p = {
attrs: _util.UNSELECTABLE_ATTRIBUTE,
key: 'NOT_FOUND',
props: {
value: 'NOT_FOUND',
disabled: true,
role: 'option'
},
style: _util.UNSELECTABLE_STYLE
};
options = [h(
_vcMenu.Item,
_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 ((0, _propsUtil.getSlotOptions)(child).isSelectOptGroup) {
var label = (0, _propsUtil.getComponentFromProp)(child, 'label');
var key = child.key;
if (!key && typeof label === 'string') {
key = label;
} else if (!label && key) {
label = key;
}
var childChildren = (0, _propsUtil.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 = (0, _util.getValuePropValue)(subChild) || subChild.key;
return h(
_vcMenu.Item,
(0, _babelHelperVueJsxMergeProps2['default'])([{ key: childValueSub, attrs: { value: childValueSub }
}, subChild.data]),
[subChild.componentOptions.children]
);
});
sel.push(h(
_vcMenu.ItemGroup,
{ key: key, attrs: { title: label },
'class': (0, _propsUtil.getClass)(child) },
[innerItems]
));
// Not match
} else {
var _innerItems = _this13.renderFilterOptionsFromChildren(childChildren, childrenKeys, menuItems);
if (_innerItems.length) {
sel.push(h(
_vcMenu.ItemGroup,
(0, _babelHelperVueJsxMergeProps2['default'])([{ key: key, attrs: { title: label }
}, child.data]),
[_innerItems]
));
}
}
return;
}
(0, _warning2['default'])((0, _propsUtil.getSlotOptions)(child).isSelectOption, 'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' + ('instead of `' + ((0, _propsUtil.getSlotOptions)(child).name || (0, _propsUtil.getSlotOptions)(child)) + '`.'));
var childValue = (0, _util.getValuePropValue)(child);
(0, _util.validateOptionValue)(childValue, _this13.$props);
if (_this13._filterOption(inputValue, child)) {
var p = {
attrs: (0, _extends3['default'])({}, _util.UNSELECTABLE_ATTRIBUTE, (0, _propsUtil.getAttrs)(child)),
key: childValue,
props: (0, _extends3['default'])({
value: childValue
}, (0, _propsUtil.getPropsData)(child), {
role: 'option'
}),
style: _util.UNSELECTABLE_STYLE,
on: (0, _propsUtil.getEvents)(child),
'class': (0, _propsUtil.getClass)(child)
};
var menuItem = h(
_vcMenu.Item,
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 = (0, _propsUtil.getComponentFromProp)(this, 'removeIcon');
var className = prefixCls + '-selection__rendered';
// search input is inside topControlNode in single, multiple & combobox. 2016/04/13
var innerNode = null;
if ((0, _util.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: (0, _util.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 = (0, _extends3['default'])({}, _util.UNSELECTABLE_ATTRIBUTE, {
role: 'presentation',
title: (0, _util.toTitle)(content)
});
maxTagPlaceholderEl = h(
'li',
(0, _babelHelperVueJsxMergeProps2['default'])([{
style: _util.UNSELECTABLE_STYLE
}, { attrs: attrs }, {
on: {
'mousedown': _util.preventDefaultEvent
},
'class': prefixCls + '-selection__choice ' + prefixCls + '-selection__choice__disabled',
key: 'maxTagPlaceholder'
}]),
[h(
'div',
{ 'class': prefixCls + '-selection__choice__content' },
[content]
)]
);
}
if ((0, _util.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 = (0, _extends3['default'])({}, _util.UNSELECTABLE_ATTRIBUTE, {
role: 'presentation',
title: (0, _util.toTitle)(title)
});
return h(
'li',
(0, _babelHelperVueJsxMergeProps2['default'])([{
style: _util.UNSELECTABLE_STYLE
}, { attrs: attrs }, {
on: {
'mousedown': _util.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 ((0, _util.isMultipleOrTags)(props) && choiceTransitionName) {
var transitionProps = (0, _getTransitionProps2['default'])(choiceTransitionName, {
tag: 'ul',
afterLeave: this.onChoiceAnimationLeave
});
innerNode = h(
'transition-group',
transitionProps,
[selectedValueNodes]
);
} else {
innerNode = h('ul', [selectedValueNodes]);
}
}
return h(
'div',
(0, _babelHelperVueJsxMergeProps2['default'])([{
'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 = (0, _propsUtil.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',
(0, _babelHelperVueJsxMergeProps2['default'])([{
key: 'arrow',
'class': prefixCls + '-arrow',
style: _util.UNSELECTABLE_STYLE
}, { attrs: _util.UNSELECTABLE_ATTRIBUTE }, {
on: {
'click': this.onArrowClick
},
ref: 'arrow'
}]),
[inputIcon || defaultIcon]
);
},
topCtrlContainerClick: function topCtrlContainerClick(e) {
if (this.$data._open && !(0, _util.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 = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');
var clear = h(
'span',
(0, _babelHelperVueJsxMergeProps2['default'])([{
key: 'clear',
'class': prefixCls + '-selection__clear',
on: {
'mousedown': _util.preventDefaultEvent
},
style: _util.UNSELECTABLE_STYLE
}, { attrs: _util.UNSELECTABLE_ATTRIBUTE }, {
on: {
'click': this.onClearSelection
}
}]),
[clearIcon || h(
'i',
{ 'class': prefixCls + '-selection__clear-icon' },
['\xD7']
)]
);
if (!allowClear) {
return null;
}
if ((0, _util.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 || (0, _util.isMultipleOrTagsOrCombobox)(this.$props)) {
e.preventDefault();
return;
}
this._focused = true;
this.updateFocusClassName();
this.$emit('focus');
},
selectionRefBlur: function selectionRefBlur(e) {
if ((0, _util.isMultipleOrTagsOrCombobox)(this.$props)) {
e.preventDefault();
return;
}
this.inputBlur(e);
}
},
render: function render() {
var _rootCls;
var h = arguments[0];
var props = this.$props;
var multiple = (0, _util.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 = (0, _propsUtil.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 (!(0, _util.isMultipleOrTagsOrCombobox)(props)) {
extraSelectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
}
var rootCls = (_rootCls = {}, (0, _defineProperty3['default'])(_rootCls, prefixCls, true), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-open', open), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-focused', open || !!this._focused), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-combobox', (0, _util.isCombobox)(props)), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-enabled', !disabled), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-allow-clear', !!props.allowClear), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-no-arrow', !showArrow), (0, _defineProperty3['default'])(_rootCls, prefixCls + '-loading', !!loading), _rootCls);
return h(
_SelectTrigger2['default'],
(0, _babelHelperVueJsxMergeProps2['default'])([{
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: (0, _propsUtil.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',
(0, _babelHelperVueJsxMergeProps2['default'])([{
directives: [{
name: 'ant-ref',
value: chaining(this.saveRootRef, this.saveSelectionRef)
}]
}, {
style: (0, _propsUtil.getStyle)(this),
'class': (0, _classnames3['default'])(rootCls),
on: {
'mousedown': this.markMouseDown,
'mouseup': this.markMouseLeave,
'mouseout': this.markMouseLeave
}
}, extraSelectionProps, {
on: {
'blur': this.selectionRefBlur,
'focus': this.selectionRefFocus,
'click': this.selectionRefClick,
'keydown': (0, _util.isMultipleOrTagsOrCombobox)(props) ? noop : this.onKeyDown
}
}]),
[h(
'div',
selectionProps,
[ctrlNode, this.renderClear(), this.renderArrow(!!multiple)]
)]
)]
);
}
};
exports.Select = Select;
exports['default'] = (0, _proxyComponent2['default'])(Select);