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

<script>
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'
import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'

const DataSourceItemObject = PropTypes.shape({
  value: String,
  text: String,
}).loose
const DataSourceItemType = PropTypes.oneOfType([
  PropTypes.string,
  DataSourceItemObject,
]).isRequired

// export interface AutoCompleteInputProps {
//   onChange?: React.FormEventHandler<any>;
//   value: any;
// }

const AutoCompleteProps = {
  ...AbstractSelectProps,
  value: SelectValue,
  defaultValue: SelectValue,
  dataSource: PropTypes.arrayOf(DataSourceItemType),
  optionLabelProp: String,
  dropdownMatchSelectWidth: PropTypes.bool,
  // onChange?: (value: SelectValue) => void;
  // onSelect?: (value: SelectValue, option: Object) => any;
}

export default {
  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'),
    filterOption: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.func,
    ]).def(false),
    defaultActiveFirstOption: PropTypes.bool.def(true),
  },
  Option,
  OptGroup,
  model: {
    prop: 'value',
    event: 'change',
  },
  methods: {
    getInputElement () {
      const { $slots } = this
      const children = filterEmpty($slots.default)
      const element = children.length ? children[0] : <Input />
      const { componentOptions = {}} = element
      const { listeners = {}} = componentOptions
      const elementProps = {
        on: listeners,
      }
      return (
        <InputElement {...elementProps}>{element}</InputElement>
      )
    },

    focus () {
      this.$nextTick(() => {
        if (this.$refs.select) {
          this.$refs.select.focus()
        }
      })
    },

    blur () {
      this.$nextTick(() => {
        if (this.$refs.select) {
          this.$refs.select.blur()
        }
      })
    },
  },

  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) => {
        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[]`.')
        }
      }) : []
    }
    const selectProps = {
      props: {
        ...getOptionProps(this),
        mode: 'combobox',
        optionLabelProp,
        getInputElement: this.getInputElement,
        notFoundContent: getComponentFromProp(this, 'notFoundContent'),
      },
      class: cls,
      ref: 'select',
      on: {
        ...$listeners,
      },
    }
    return (
      <Select
        {...selectProps}
      >
        {options}
      </Select>
    )
  },
}

</script>