2020-06-28 23:11:31 +08:00
|
|
|
import { provide, inject } from 'vue';
|
2019-09-18 20:03:13 +08:00
|
|
|
import warning from '../_util/warning';
|
2019-01-12 11:33:27 +08:00
|
|
|
import omit from 'omit.js';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import { Select as VcSelect, Option, OptGroup } from '../vc-select';
|
2019-04-20 16:23:50 +08:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2019-01-12 11:33:27 +08:00
|
|
|
import {
|
2020-06-28 23:11:31 +08:00
|
|
|
getComponent,
|
2019-01-12 11:33:27 +08:00
|
|
|
getOptionProps,
|
|
|
|
filterEmpty,
|
|
|
|
isValidElement,
|
2020-06-28 23:11:31 +08:00
|
|
|
getSlot,
|
2019-01-12 11:33:27 +08:00
|
|
|
} from '../_util/props-util';
|
2020-04-04 22:03:18 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
|
|
|
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
|
2020-04-05 14:19:12 +08:00
|
|
|
import DownOutlined from '@ant-design/icons-vue/DownOutlined';
|
|
|
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
2019-01-12 11:33:27 +08:00
|
|
|
import { cloneElement } from '../_util/vnode';
|
2018-02-23 16:14:59 +08:00
|
|
|
|
2018-07-11 17:51:20 +08:00
|
|
|
const AbstractSelectProps = () => ({
|
2018-02-23 16:14:59 +08:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
size: PropTypes.oneOf(['small', 'large', 'default']),
|
2019-01-12 11:33:27 +08:00
|
|
|
showAction: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
|
2018-02-23 16:14:59 +08:00
|
|
|
notFoundContent: PropTypes.any,
|
|
|
|
transitionName: PropTypes.string,
|
|
|
|
choiceTransitionName: PropTypes.string,
|
|
|
|
showSearch: PropTypes.bool,
|
|
|
|
allowClear: PropTypes.bool,
|
|
|
|
disabled: PropTypes.bool,
|
2020-07-17 17:13:30 +08:00
|
|
|
tabindex: PropTypes.number,
|
2018-02-26 18:44:06 +08:00
|
|
|
placeholder: PropTypes.any,
|
2018-02-23 16:14:59 +08:00
|
|
|
defaultActiveFirstOption: PropTypes.bool,
|
|
|
|
dropdownClassName: PropTypes.string,
|
|
|
|
dropdownStyle: PropTypes.any,
|
|
|
|
dropdownMenuStyle: PropTypes.any,
|
2018-09-05 21:28:54 +08:00
|
|
|
dropdownMatchSelectWidth: PropTypes.bool,
|
2018-02-23 16:14:59 +08:00
|
|
|
// onSearch: (value: string) => any,
|
2019-01-12 11:33:27 +08:00
|
|
|
filterOption: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
|
2020-07-17 17:36:58 +08:00
|
|
|
autofocus: PropTypes.bool,
|
2018-02-28 19:07:04 +08:00
|
|
|
backfill: PropTypes.bool,
|
2018-04-11 13:32:18 +08:00
|
|
|
showArrow: PropTypes.bool,
|
2018-09-05 21:28:54 +08:00
|
|
|
getPopupContainer: PropTypes.func,
|
2018-11-28 10:35:37 +08:00
|
|
|
open: PropTypes.bool,
|
|
|
|
defaultOpen: PropTypes.bool,
|
2018-12-11 11:40:27 +08:00
|
|
|
autoClearSearchValue: PropTypes.bool,
|
2019-01-05 16:22:25 +08:00
|
|
|
dropdownRender: PropTypes.func,
|
|
|
|
loading: PropTypes.bool,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-02-27 19:08:49 +08:00
|
|
|
const Value = PropTypes.shape({
|
2019-11-08 11:14:00 +08:00
|
|
|
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
2019-01-12 11:33:27 +08:00
|
|
|
}).loose;
|
2018-02-23 16:14:59 +08:00
|
|
|
|
|
|
|
const SelectValue = PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
2018-04-16 18:39:00 +08:00
|
|
|
PropTypes.number,
|
2019-01-12 11:33:27 +08:00
|
|
|
PropTypes.arrayOf(PropTypes.oneOfType([Value, PropTypes.string, PropTypes.number])),
|
2018-02-27 19:08:49 +08:00
|
|
|
Value,
|
2019-01-12 11:33:27 +08:00
|
|
|
]);
|
2018-02-23 16:14:59 +08:00
|
|
|
|
|
|
|
const SelectProps = {
|
2018-07-11 17:51:20 +08:00
|
|
|
...AbstractSelectProps(),
|
2018-02-23 16:14:59 +08:00
|
|
|
value: SelectValue,
|
|
|
|
defaultValue: SelectValue,
|
2018-09-05 21:28:54 +08:00
|
|
|
// mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
|
|
|
|
mode: PropTypes.string,
|
2018-02-23 16:14:59 +08:00
|
|
|
optionLabelProp: PropTypes.string,
|
2018-09-05 21:28:54 +08:00
|
|
|
firstActiveValue: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
2018-02-23 16:14:59 +08:00
|
|
|
maxTagCount: PropTypes.number,
|
|
|
|
maxTagPlaceholder: PropTypes.any,
|
2019-09-23 10:56:25 +08:00
|
|
|
maxTagTextLength: PropTypes.number,
|
2018-02-23 16:14:59 +08:00
|
|
|
dropdownMatchSelectWidth: PropTypes.bool,
|
|
|
|
optionFilterProp: PropTypes.string,
|
|
|
|
labelInValue: PropTypes.boolean,
|
|
|
|
getPopupContainer: PropTypes.func,
|
|
|
|
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
getInputElement: PropTypes.func,
|
2018-07-11 18:35:27 +08:00
|
|
|
options: PropTypes.array,
|
2018-12-11 11:40:27 +08:00
|
|
|
suffixIcon: PropTypes.any,
|
2019-01-05 16:22:25 +08:00
|
|
|
removeIcon: PropTypes.any,
|
|
|
|
clearIcon: PropTypes.any,
|
|
|
|
menuItemSelectedIcon: PropTypes.any,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-23 16:14:59 +08:00
|
|
|
|
|
|
|
const SelectPropTypes = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
size: PropTypes.oneOf(['default', 'large', 'small']),
|
2018-09-05 21:28:54 +08:00
|
|
|
// combobox: PropTypes.bool,
|
2018-02-23 16:14:59 +08:00
|
|
|
notFoundContent: PropTypes.any,
|
|
|
|
showSearch: PropTypes.bool,
|
|
|
|
optionLabelProp: PropTypes.string,
|
|
|
|
transitionName: PropTypes.string,
|
|
|
|
choiceTransitionName: PropTypes.string,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-23 16:14:59 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export { AbstractSelectProps, SelectValue, SelectProps };
|
|
|
|
const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
2018-09-19 13:21:57 +08:00
|
|
|
const Select = {
|
2018-09-05 21:28:54 +08:00
|
|
|
SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
2018-04-08 21:17:20 +08:00
|
|
|
Option: { ...Option, name: 'ASelectOption' },
|
|
|
|
OptGroup: { ...OptGroup, name: 'ASelectOptGroup' },
|
|
|
|
name: 'ASelect',
|
2018-02-23 16:14:59 +08:00
|
|
|
props: {
|
|
|
|
...SelectProps,
|
|
|
|
showSearch: PropTypes.bool.def(false),
|
|
|
|
transitionName: PropTypes.string.def('slide-up'),
|
|
|
|
choiceTransitionName: PropTypes.string.def('zoom'),
|
|
|
|
},
|
|
|
|
propTypes: SelectPropTypes,
|
2020-06-28 23:11:31 +08:00
|
|
|
setup() {
|
2019-07-04 18:12:52 +08:00
|
|
|
return {
|
2020-06-28 23:11:31 +08:00
|
|
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
2019-07-04 18:12:52 +08:00
|
|
|
};
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
created() {
|
2020-06-28 23:11:31 +08:00
|
|
|
provide('savePopupRef', this.savePopupRef);
|
2018-09-05 21:28:54 +08:00
|
|
|
warning(
|
|
|
|
this.$props.mode !== 'combobox',
|
2020-03-07 19:45:13 +08:00
|
|
|
'Select',
|
2018-09-05 21:28:54 +08:00
|
|
|
'The combobox mode of Select is deprecated,' +
|
2019-01-12 11:33:27 +08:00
|
|
|
'it will be removed in next major version,' +
|
|
|
|
'please use AutoComplete instead',
|
|
|
|
);
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
2018-02-23 16:14:59 +08:00
|
|
|
methods: {
|
2019-04-20 16:23:50 +08:00
|
|
|
getNotFoundContent(renderEmpty) {
|
2020-06-28 23:11:31 +08:00
|
|
|
const notFoundContent = getComponent(this, 'notFoundContent');
|
2019-04-20 16:23:50 +08:00
|
|
|
if (notFoundContent !== undefined) {
|
|
|
|
return notFoundContent;
|
|
|
|
}
|
2018-09-05 21:28:54 +08:00
|
|
|
if (this.isCombobox()) {
|
2019-04-20 16:23:50 +08:00
|
|
|
return null;
|
2018-02-23 16:14:59 +08:00
|
|
|
}
|
2020-06-28 23:11:31 +08:00
|
|
|
return renderEmpty('Select');
|
2018-02-23 16:14:59 +08:00
|
|
|
},
|
2020-03-07 19:45:13 +08:00
|
|
|
savePopupRef(ref) {
|
|
|
|
this.popupRef = ref;
|
|
|
|
},
|
|
|
|
focus() {
|
|
|
|
this.$refs.vcSelect.focus();
|
|
|
|
},
|
|
|
|
blur() {
|
|
|
|
this.$refs.vcSelect.blur();
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
isCombobox() {
|
|
|
|
const { mode } = this;
|
|
|
|
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
2019-01-05 16:22:25 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
renderSuffixIcon(prefixCls) {
|
|
|
|
const { loading } = this.$props;
|
2020-06-28 23:11:31 +08:00
|
|
|
let suffixIcon = getComponent(this, 'suffixIcon');
|
2019-01-12 11:33:27 +08:00
|
|
|
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
2019-01-05 16:22:25 +08:00
|
|
|
if (suffixIcon) {
|
|
|
|
return isValidElement(suffixIcon)
|
|
|
|
? cloneElement(suffixIcon, { class: `${prefixCls}-arrow-icon` })
|
2019-01-12 11:33:27 +08:00
|
|
|
: suffixIcon;
|
2019-01-05 16:22:25 +08:00
|
|
|
}
|
|
|
|
if (loading) {
|
2020-04-04 22:03:18 +08:00
|
|
|
return <LoadingOutlined />;
|
2019-01-05 16:22:25 +08:00
|
|
|
}
|
2020-04-04 22:03:18 +08:00
|
|
|
return <DownOutlined class={`${prefixCls}-arrow-icon`} />;
|
2019-01-05 16:22:25 +08:00
|
|
|
},
|
2019-04-20 16:23:50 +08:00
|
|
|
},
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
size,
|
|
|
|
mode,
|
|
|
|
options,
|
|
|
|
getPopupContainer,
|
2020-03-07 19:45:13 +08:00
|
|
|
showArrow,
|
2019-04-20 16:23:50 +08:00
|
|
|
...restProps
|
|
|
|
} = getOptionProps(this);
|
2020-06-28 23:11:31 +08:00
|
|
|
const { class: className } = this.$attrs;
|
2019-01-05 16:22:25 +08:00
|
|
|
|
2019-09-11 22:35:25 +08:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
|
|
const renderEmpty = this.configProvider.renderEmpty;
|
2019-04-20 16:23:50 +08:00
|
|
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
2018-02-23 16:14:59 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
2020-06-28 23:11:31 +08:00
|
|
|
let removeIcon = getComponent(this, 'removeIcon');
|
2019-04-20 16:23:50 +08:00
|
|
|
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
|
2020-06-28 23:11:31 +08:00
|
|
|
let clearIcon = getComponent(this, 'clearIcon');
|
2019-04-20 16:23:50 +08:00
|
|
|
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
|
2020-06-28 23:11:31 +08:00
|
|
|
let menuItemSelectedIcon = getComponent(this, 'menuItemSelectedIcon');
|
2019-04-20 16:23:50 +08:00
|
|
|
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon)
|
|
|
|
? menuItemSelectedIcon[0]
|
|
|
|
: menuItemSelectedIcon;
|
|
|
|
const rest = omit(restProps, [
|
|
|
|
'inputIcon',
|
|
|
|
'removeIcon',
|
|
|
|
'clearIcon',
|
|
|
|
'suffixIcon',
|
|
|
|
'menuItemSelectedIcon',
|
|
|
|
]);
|
2018-02-23 16:14:59 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
const cls = {
|
2020-06-28 23:11:31 +08:00
|
|
|
[className]: className,
|
2019-04-20 16:23:50 +08:00
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
2020-03-07 19:45:13 +08:00
|
|
|
[`${prefixCls}-show-arrow`]: showArrow,
|
2019-04-20 16:23:50 +08:00
|
|
|
};
|
2018-12-11 11:40:27 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
let { optionLabelProp } = this.$props;
|
|
|
|
if (this.isCombobox()) {
|
|
|
|
// children 带 dom 结构时,无法填入输入框
|
|
|
|
optionLabelProp = optionLabelProp || 'value';
|
|
|
|
}
|
2018-12-11 11:40:27 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
const modeConfig = {
|
|
|
|
multiple: mode === 'multiple',
|
|
|
|
tags: mode === 'tags',
|
|
|
|
combobox: this.isCombobox(),
|
|
|
|
};
|
|
|
|
const finalRemoveIcon = (removeIcon &&
|
|
|
|
(isValidElement(removeIcon)
|
|
|
|
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
|
2020-04-04 22:03:18 +08:00
|
|
|
: removeIcon)) || <CloseOutlined class={`${prefixCls}-remove-icon`} />;
|
2018-12-11 11:40:27 +08:00
|
|
|
|
2019-04-20 16:23:50 +08:00
|
|
|
const finalClearIcon = (clearIcon &&
|
|
|
|
(isValidElement(clearIcon)
|
|
|
|
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
|
2020-04-04 22:03:18 +08:00
|
|
|
: clearIcon)) || <CloseCircleFilled class={`${prefixCls}-clear-icon`} />;
|
2019-04-20 16:23:50 +08:00
|
|
|
|
|
|
|
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
|
|
|
|
(isValidElement(menuItemSelectedIcon)
|
|
|
|
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
|
2020-04-04 22:03:18 +08:00
|
|
|
: menuItemSelectedIcon)) || <CheckOutlined class={`${prefixCls}-selected-icon`} />;
|
2019-04-20 16:23:50 +08:00
|
|
|
|
|
|
|
const selectProps = {
|
2020-06-28 23:11:31 +08:00
|
|
|
inputIcon: this.renderSuffixIcon(prefixCls),
|
|
|
|
removeIcon: finalRemoveIcon,
|
|
|
|
clearIcon: finalClearIcon,
|
|
|
|
menuItemSelectedIcon: finalMenuItemSelectedIcon,
|
|
|
|
showArrow,
|
|
|
|
...rest,
|
|
|
|
...modeConfig,
|
|
|
|
prefixCls,
|
|
|
|
optionLabelProp: optionLabelProp || 'children',
|
|
|
|
notFoundContent: this.getNotFoundContent(renderEmpty),
|
|
|
|
maxTagPlaceholder: getComponent(this, 'maxTagPlaceholder'),
|
|
|
|
placeholder: getComponent(this, 'placeholder'),
|
|
|
|
children: options
|
|
|
|
? options.map(option => {
|
|
|
|
const { key, label = option.title, on, class: cls, style, ...restOption } = option;
|
|
|
|
return (
|
|
|
|
<Option key={key} {...{ on, class: cls, style, ...restOption }}>
|
|
|
|
{label}
|
|
|
|
</Option>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
: filterEmpty(getSlot(this)),
|
|
|
|
__propsSymbol__: Symbol(),
|
|
|
|
dropdownRender: getComponent(this, 'dropdownRender', {}, false),
|
|
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
|
|
|
...this.$attrs,
|
2019-04-20 16:23:50 +08:00
|
|
|
class: cls,
|
|
|
|
ref: 'vcSelect',
|
|
|
|
};
|
|
|
|
return <VcSelect {...selectProps} />;
|
2018-02-23 16:14:59 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-23 16:14:59 +08:00
|
|
|
|
2018-09-19 13:21:57 +08:00
|
|
|
/* istanbul ignore next */
|
2020-06-28 23:11:31 +08:00
|
|
|
Select.install = function(app) {
|
|
|
|
app.component(Select.name, Select);
|
|
|
|
app.component(Select.Option.name, Select.Option);
|
|
|
|
app.component(Select.OptGroup.name, Select.OptGroup);
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
export default Select;
|