1766 lines
58 KiB
Java
1766 lines
58 KiB
Java
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); |