ant-design-vue/components/auto-complete/index.jsx

160 lines
4.3 KiB
Vue
Raw Normal View History

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';
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
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'),
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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),
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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
/* istanbul ignore next */
2019-01-12 11:33:27 +08:00
AutoComplete.install = function(Vue) {
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);
};
2019-01-12 11:33:27 +08:00
export default AutoComplete;