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

<script>
import { Option, OptGroup } from './vc-select'
import clonedeep from 'lodash.clonedeep'
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: DataSourceItemType,
  optionLabelProp: String,
  // 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: clonedeep(AbstractSelectProps.filterOption).def(false),
  },
  Option,
  OptGroup,
  methods: {
    getInputElement () {
      const { $slots } = this
      const children = filterEmpty($slots.default)
      const element = children.length ? children : <Input />
      console.log(element)
      // const elementProps = { ...element.props }
      return (
        <InputElement>{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[]`.')
        }
      }) : []
    }
    return (
      <Select
        {...getOptionProps(this)}
        class={cls}
        mode='combobox'
        optionLabelProp={optionLabelProp}
        getInputElement={this.getInputElement}
        notFoundContent={getComponentFromProp(this, 'notFoundContent')}
        ref='select'
        on={$listeners}
      >
        {options}
      </Select>
    )
  },
}

</script>