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

137 lines
3.5 KiB
Vue
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-02-28 11:07:04 +00:00
import { Option, OptGroup } from '../vc-select'
2018-02-27 11:08:49 +00:00
import Select, { AbstractSelectProps, SelectValue } from '../select'
import Input from '../input'
import InputElement from './InputElement'
import PropTypes from '../_util/vue-types'
2018-05-14 03:02:03 +00:00
import { getComponentFromProp, getOptionProps, filterEmpty, isValidElement } from '../_util/props-util'
2018-02-27 11:08:49 +00:00
2018-05-14 03:02:03 +00:00
// const DataSourceItemObject = PropTypes.shape({
// value: String,
// text: String,
// }).loose
// const DataSourceItemType = PropTypes.oneOfType([
// PropTypes.string,
// DataSourceItemObject,
// ]).isRequired
2018-02-27 11:08:49 +00:00
// export interface AutoCompleteInputProps {
// onChange?: React.FormEventHandler<any>;
// value: any;
// }
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,
2018-02-27 11:08:49 +00:00
optionLabelProp: String,
2018-02-28 11:07:04 +00:00
dropdownMatchSelectWidth: PropTypes.bool,
2018-02-27 11:08:49 +00:00
// onChange?: (value: SelectValue) => void;
// onSelect?: (value: SelectValue, option: Object) => any;
}
export default {
2018-04-08 13:17:20 +00:00
name: 'AAutoComplete',
2018-02-27 11:08:49 +00: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'),
optionLabelProp: PropTypes.string.def('children'),
2018-02-28 11:07:04 +00:00
filterOption: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.func,
]).def(false),
defaultActiveFirstOption: PropTypes.bool.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' },
2018-02-28 11:07:04 +00:00
model: {
prop: 'value',
event: 'change',
},
2018-02-27 11:08:49 +00:00
methods: {
getInputElement () {
const { $slots } = this
const children = filterEmpty($slots.default)
2018-02-28 11:07:04 +00:00
const element = children.length ? children[0] : <Input />
2018-02-27 11:08:49 +00:00
return (
2018-02-28 15:30:40 +00:00
<InputElement>{element}</InputElement>
2018-02-27 11:08:49 +00:00
)
},
focus () {
2018-05-18 13:09:52 +00:00
if (this.$refs.select) {
this.$refs.select.focus()
}
2018-02-27 11:08:49 +00:00
},
blur () {
2018-05-18 13:09:52 +00:00
if (this.$refs.select) {
this.$refs.select.blur()
}
2018-02-27 11:08:49 +00:00
},
},
render () {
const {
size, prefixCls, optionLabelProp, dataSource, $slots, $listeners,
} = this
const cls = {
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-show-search`]: true,
[`${prefixCls}-auto-complete`]: true,
}
let options
const childArray = filterEmpty($slots.dataSource)
if (childArray.length) {
options = childArray
} else {
options = dataSource ? dataSource.map((item) => {
2018-05-06 12:37:39 +00:00
if (isValidElement(item)) {
return item
}
2018-02-27 11:08:49 +00:00
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-28 11:07:04 +00:00
const selectProps = {
props: {
...getOptionProps(this),
mode: 'combobox',
optionLabelProp,
getInputElement: this.getInputElement,
notFoundContent: getComponentFromProp(this, 'notFoundContent'),
},
class: cls,
ref: 'select',
on: {
...$listeners,
},
}
2018-02-27 11:08:49 +00:00
return (
<Select
2018-02-28 11:07:04 +00:00
{...selectProps}
2018-02-27 11:08:49 +00:00
>
{options}
</Select>
)
},
}