2019-01-12 11:33:27 +08: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';
|
2019-03-11 19:58:32 +08:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2019-01-12 11:33:27 +08:00
|
|
|
import {
|
|
|
|
getComponentFromProp,
|
|
|
|
getOptionProps,
|
|
|
|
filterEmpty,
|
|
|
|
isValidElement,
|
|
|
|
} from '../_util/props-util';
|
2019-08-28 10:50:19 +08:00
|
|
|
import Base from '../base';
|
2018-02-27 19:08:49 +08:00
|
|
|
|
2018-05-14 11:02:03 +08:00
|
|
|
// const DataSourceItemObject = PropTypes.shape({
|
|
|
|
// value: String,
|
|
|
|
// text: String,
|
|
|
|
// }).loose
|
|
|
|
// const DataSourceItemType = PropTypes.oneOfType([
|
|
|
|
// PropTypes.string,
|
|
|
|
// DataSourceItemObject,
|
|
|
|
// ]).isRequired
|
2018-02-27 19:08:49 +08:00
|
|
|
|
|
|
|
// export interface AutoCompleteInputProps {
|
|
|
|
// onChange?: React.FormEventHandler<any>;
|
|
|
|
// value: any;
|
|
|
|
// }
|
|
|
|
|
|
|
|
const AutoCompleteProps = {
|
2018-07-11 17:51:20 +08:00
|
|
|
...AbstractSelectProps(),
|
2018-02-27 19:08:49 +08:00
|
|
|
value: SelectValue,
|
|
|
|
defaultValue: SelectValue,
|
2018-05-06 20:37:39 +08:00
|
|
|
dataSource: PropTypes.array,
|
2018-02-27 19:08:49 +08:00
|
|
|
optionLabelProp: String,
|
2018-02-28 19:07:04 +08:00
|
|
|
dropdownMatchSelectWidth: PropTypes.bool,
|
2018-02-27 19:08:49 +08:00
|
|
|
// onChange?: (value: SelectValue) => void;
|
|
|
|
// onSelect?: (value: SelectValue, option: Object) => any;
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-27 19:08:49 +08:00
|
|
|
|
2018-09-19 13:21:57 +08:00
|
|
|
const AutoComplete = {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'AAutoComplete',
|
2018-02-27 19:08:49 +08:00
|
|
|
props: {
|
|
|
|
...AutoCompleteProps,
|
|
|
|
prefixCls: PropTypes.string.def('ant-select'),
|
|
|
|
showSearch: PropTypes.bool.def(false),
|
|
|
|
transitionName: PropTypes.string.def('slide-up'),
|
|
|
|
choiceTransitionName: PropTypes.string.def('zoom'),
|
2018-09-05 21:28:54 +08:00
|
|
|
autoFocus: PropTypes.bool,
|
|
|
|
backfill: PropTypes.bool,
|
2018-02-27 19:08:49 +08:00
|
|
|
optionLabelProp: PropTypes.string.def('children'),
|
2019-01-12 11:33:27 +08:00
|
|
|
filterOption: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]).def(false),
|
2018-02-28 19:07:04 +08:00
|
|
|
defaultActiveFirstOption: PropTypes.bool.def(true),
|
2018-02-27 19:08:49 +08:00
|
|
|
},
|
2018-04-08 21:17:20 +08:00
|
|
|
Option: { ...Option, name: 'AAutoCompleteOption' },
|
|
|
|
OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
|
2018-02-28 19:07:04 +08:00
|
|
|
model: {
|
|
|
|
prop: 'value',
|
|
|
|
event: 'change',
|
|
|
|
},
|
2019-03-11 19:58:32 +08:00
|
|
|
inject: {
|
|
|
|
configProvider: { default: () => ({}) },
|
|
|
|
},
|
2019-07-04 18:12:52 +08:00
|
|
|
provide() {
|
|
|
|
return {
|
|
|
|
savePopupRef: this.savePopupRef,
|
|
|
|
};
|
|
|
|
},
|
2018-02-27 19:08:49 +08:00
|
|
|
methods: {
|
2019-07-04 18:12:52 +08:00
|
|
|
savePopupRef(ref) {
|
|
|
|
this.popupRef = ref;
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
getInputElement() {
|
|
|
|
const { $slots } = this;
|
|
|
|
const children = filterEmpty($slots.default);
|
|
|
|
const element = children.length ? children[0] : <Input />;
|
|
|
|
return <InputElement>{element}</InputElement>;
|
2018-02-27 19:08:49 +08:00
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
focus() {
|
2018-05-18 21:09:52 +08:00
|
|
|
if (this.$refs.select) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.$refs.select.focus();
|
2018-05-18 21:09:52 +08:00
|
|
|
}
|
2018-02-27 19:08:49 +08:00
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
blur() {
|
2018-05-18 21:09:52 +08:00
|
|
|
if (this.$refs.select) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.$refs.select.blur();
|
2018-05-18 21:09:52 +08:00
|
|
|
}
|
2018-02-27 19:08:49 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
2019-05-28 11:37:38 +08:00
|
|
|
const {
|
|
|
|
size,
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
optionLabelProp,
|
|
|
|
dataSource,
|
|
|
|
$slots,
|
|
|
|
$listeners,
|
|
|
|
} = this;
|
2019-03-11 19:58:32 +08:00
|
|
|
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
|
|
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
2018-02-27 19:08:49 +08:00
|
|
|
|
|
|
|
const cls = {
|
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
|
|
|
[`${prefixCls}-show-search`]: true,
|
|
|
|
[`${prefixCls}-auto-complete`]: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-27 19:08:49 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let options;
|
|
|
|
const childArray = filterEmpty($slots.dataSource);
|
2018-02-27 19:08:49 +08:00
|
|
|
if (childArray.length) {
|
2019-01-12 11:33:27 +08:00
|
|
|
options = childArray;
|
2018-02-27 19:08:49 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
options = dataSource
|
|
|
|
? dataSource.map(item => {
|
|
|
|
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 19:08:49 +08:00
|
|
|
}
|
2018-02-28 19:07:04 +08:00
|
|
|
const selectProps = {
|
|
|
|
props: {
|
|
|
|
...getOptionProps(this),
|
2018-09-05 21:28:54 +08:00
|
|
|
mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
2018-02-28 19:07:04 +08:00
|
|
|
optionLabelProp,
|
|
|
|
getInputElement: this.getInputElement,
|
|
|
|
notFoundContent: getComponentFromProp(this, 'notFoundContent'),
|
|
|
|
},
|
|
|
|
class: cls,
|
|
|
|
ref: 'select',
|
2018-12-13 18:30:06 +08:00
|
|
|
on: $listeners,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
return <Select {...selectProps}>{options}</Select>;
|
2018-02-27 19:08:49 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-27 19:08:49 +08:00
|
|
|
|
2018-09-19 13:21:57 +08:00
|
|
|
/* istanbul ignore next */
|
2019-01-12 11:33:27 +08:00
|
|
|
AutoComplete.install = function(Vue) {
|
2019-08-28 10:50:19 +08:00
|
|
|
Vue.use(Base);
|
2019-01-12 11:33:27 +08:00
|
|
|
Vue.component(AutoComplete.name, AutoComplete);
|
|
|
|
Vue.component(AutoComplete.Option.name, AutoComplete.Option);
|
|
|
|
Vue.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
|
|
|
|
};
|
2018-09-19 13:21:57 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export default AutoComplete;
|