2020-10-12 10:46:05 +00:00
|
|
|
import { App, defineComponent, inject, provide } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import { Option, OptGroup } from '../vc-select';
|
|
|
|
import Select, { AbstractSelectProps, SelectValue } from '../select';
|
|
|
|
import Input from '../input';
|
|
|
|
import InputElement from './InputElement';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-07-01 16:24:44 +00:00
|
|
|
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
|
2018-02-27 11:08:49 +00:00
|
|
|
|
2020-10-12 10:46:05 +00:00
|
|
|
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
|
2020-07-01 16:24:44 +00:00
|
|
|
return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
|
|
|
|
}
|
2018-02-27 11:08:49 +00:00
|
|
|
|
|
|
|
const AutoCompleteProps = {
|
2018-07-11 09:51:20 +00:00
|
|
|
...AbstractSelectProps(),
|
2018-02-27 11:08:49 +00:00
|
|
|
value: SelectValue,
|
|
|
|
defaultValue: SelectValue,
|
2018-05-06 12:37:39 +00:00
|
|
|
dataSource: PropTypes.array,
|
2020-10-13 02:43:39 +00:00
|
|
|
dropdownMenuStyle: PropTypes.style,
|
2020-10-12 10:46:05 +00:00
|
|
|
optionLabelProp: PropTypes.string,
|
2020-10-10 10:16:28 +00:00
|
|
|
dropdownMatchSelectWidth: PropTypes.looseBool,
|
2018-02-27 11:08:49 +00:00
|
|
|
// onChange?: (value: SelectValue) => void;
|
|
|
|
// onSelect?: (value: SelectValue, option: Object) => any;
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-27 11:08:49 +00:00
|
|
|
|
2020-10-12 10:46:05 +00:00
|
|
|
const AutoComplete = defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AAutoComplete',
|
2020-07-01 16:24:44 +00:00
|
|
|
inheritAttrs: false,
|
2020-10-12 10:46:05 +00:00
|
|
|
emits: ['change', 'select', 'focus', 'blur'],
|
2018-02-27 11:08:49 +00:00
|
|
|
props: {
|
|
|
|
...AutoCompleteProps,
|
|
|
|
prefixCls: PropTypes.string.def('ant-select'),
|
2020-10-10 10:16:28 +00:00
|
|
|
showSearch: PropTypes.looseBool.def(false),
|
2018-02-27 11:08:49 +00:00
|
|
|
transitionName: PropTypes.string.def('slide-up'),
|
|
|
|
choiceTransitionName: PropTypes.string.def('zoom'),
|
2020-10-10 10:16:28 +00:00
|
|
|
autofocus: PropTypes.looseBool,
|
|
|
|
backfill: PropTypes.looseBool,
|
2018-02-27 11:08:49 +00:00
|
|
|
optionLabelProp: PropTypes.string.def('children'),
|
2020-10-10 10:16:28 +00:00
|
|
|
filterOption: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(false),
|
|
|
|
defaultActiveFirstOption: PropTypes.looseBool.def(true),
|
2018-02-27 11:08:49 +00:00
|
|
|
},
|
2018-04-08 13:17:20 +00:00
|
|
|
Option: { ...Option, name: 'AAutoCompleteOption' },
|
|
|
|
OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
|
2020-07-01 16:24:44 +00:00
|
|
|
setup() {
|
2019-07-04 10:12:52 +00:00
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-12 10:46:05 +00:00
|
|
|
popupRef: null,
|
2020-10-13 09:46:52 +00:00
|
|
|
select: null,
|
2019-07-04 10:12:52 +00:00
|
|
|
};
|
|
|
|
},
|
2020-07-01 16:24:44 +00:00
|
|
|
created() {
|
|
|
|
provide('savePopupRef', this.savePopupRef);
|
|
|
|
},
|
2018-02-27 11:08:49 +00:00
|
|
|
methods: {
|
2020-10-12 10:46:05 +00:00
|
|
|
savePopupRef(ref: any) {
|
2019-07-04 10:12:52 +00:00
|
|
|
this.popupRef = ref;
|
|
|
|
},
|
2020-10-12 10:46:05 +00:00
|
|
|
saveSelect(node: any) {
|
2020-07-01 16:24:44 +00:00
|
|
|
this.select = node;
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
getInputElement() {
|
2020-07-01 16:24:44 +00:00
|
|
|
const children = getSlot(this);
|
2019-12-06 09:11:17 +00:00
|
|
|
const element = children.length ? children[0] : <Input lazy={false} />;
|
2020-07-06 09:45:23 +00:00
|
|
|
return (
|
|
|
|
<InputElement placeholder={this.placeholder} {...element.props}>
|
|
|
|
{element}
|
|
|
|
</InputElement>
|
|
|
|
);
|
2018-02-27 11:08:49 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
focus() {
|
2020-07-01 16:24:44 +00:00
|
|
|
if (this.select) {
|
|
|
|
this.select.focus();
|
2018-05-18 13:09:52 +00:00
|
|
|
}
|
2018-02-27 11:08:49 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
blur() {
|
2020-07-01 16:24:44 +00:00
|
|
|
if (this.select) {
|
|
|
|
this.select.blur();
|
2018-05-18 13:09:52 +00:00
|
|
|
}
|
2018-02-27 11:08:49 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2020-07-01 16:24:44 +00:00
|
|
|
const { size, prefixCls: customizePrefixCls, optionLabelProp, dataSource } = this;
|
2019-03-11 11:58:32 +00:00
|
|
|
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-11 11:58:32 +00:00
|
|
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
2020-10-13 09:46:52 +00:00
|
|
|
const { class: className } = this.$attrs as any;
|
2018-02-27 11:08:49 +00:00
|
|
|
const cls = {
|
2020-07-01 16:24:44 +00:00
|
|
|
[className]: !!className,
|
2018-02-27 11:08:49 +00:00
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
|
|
|
[`${prefixCls}-show-search`]: true,
|
|
|
|
[`${prefixCls}-auto-complete`]: true,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-27 11:08:49 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
let options;
|
2020-07-01 16:24:44 +00:00
|
|
|
const childArray = getSlot(this, 'dataSource');
|
|
|
|
if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
|
2019-01-12 03:33:27 +00:00
|
|
|
options = childArray;
|
2018-02-27 11:08:49 +00:00
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
options = dataSource
|
2020-10-12 10:46:05 +00:00
|
|
|
? dataSource.map((item: any) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
if (isValidElement(item)) {
|
|
|
|
return item;
|
|
|
|
}
|
|
|
|
switch (typeof item) {
|
|
|
|
case 'string':
|
|
|
|
return <Option key={item}>{item}</Option>;
|
|
|
|
case 'object':
|
|
|
|
return <Option key={item.value}>{item.text}</Option>;
|
|
|
|
default:
|
|
|
|
throw new Error(
|
|
|
|
'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
|
|
|
|
);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
: [];
|
2018-02-27 11:08:49 +00:00
|
|
|
}
|
2018-02-28 11:07:04 +00:00
|
|
|
const selectProps = {
|
2020-07-01 16:24:44 +00:00
|
|
|
...getOptionProps(this),
|
|
|
|
...this.$attrs,
|
|
|
|
mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
|
|
|
optionLabelProp,
|
|
|
|
getInputElement: this.getInputElement,
|
|
|
|
notFoundContent: getComponent(this, 'notFoundContent'),
|
|
|
|
placeholder: '',
|
2018-02-28 11:07:04 +00:00
|
|
|
class: cls,
|
2020-07-01 16:24:44 +00:00
|
|
|
ref: this.saveSelect,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
return <Select {...selectProps}>{options}</Select>;
|
2018-02-27 11:08:49 +00:00
|
|
|
},
|
2020-10-12 10:46:05 +00:00
|
|
|
});
|
2018-02-27 11:08:49 +00:00
|
|
|
|
2018-09-19 05:21:57 +00:00
|
|
|
/* istanbul ignore next */
|
2020-10-12 10:46:05 +00:00
|
|
|
AutoComplete.install = function(app: App) {
|
2020-07-01 16:24:44 +00:00
|
|
|
app.component(AutoComplete.name, AutoComplete);
|
|
|
|
app.component(AutoComplete.Option.name, AutoComplete.Option);
|
|
|
|
app.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-19 05:21:57 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
export default AutoComplete;
|