ant-design-vue/components/input/Search.jsx

108 lines
2.9 KiB
JavaScript

import classNames from 'classnames'
import Input from './Input'
import Icon from '../icon'
import inputProps from './inputProps'
import Button from '../button'
import { cloneElement } from '../_util/vnode'
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
import PropTypes from '../_util/vue-types'
export default {
name: 'AInputSearch',
props: {
...inputProps,
prefixCls: {
default: 'ant-input-search',
type: String,
},
inputPrefixCls: {
default: 'ant-input',
type: String,
},
enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
},
computed: {
},
methods: {
onSearch (e) {
this.$emit('search', this.$refs.input.stateValue)
this.$refs.input.focus()
},
getButtonOrIcon () {
const { prefixCls, size } = this
const enterButton = getComponentFromProp(this, 'enterButton')
if (!enterButton) {
return <Icon class={`${prefixCls}-icon`} type='search' key='searchIcon' />
}
const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton
if (enterButtonAsElement.componentOptions && enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON) {
return cloneElement(enterButtonAsElement, {
class: `${prefixCls}-button`,
props: { size },
on: {
click: this.onSearch,
},
})
} else if (enterButtonAsElement.tag === 'button') {
return cloneElement(enterButtonAsElement[0], {
on: {
click: this.onSearch,
},
})
}
return (
<Button
class={`${prefixCls}-button`}
type='primary'
size={size}
onClick={this.onSearch}
key='enterButton'
>
{enterButton === true ? <Icon type='search' /> : enterButton}
</Button>
)
},
},
render () {
const { prefixCls, inputPrefixCls, size,
suffix, ...others
} = getOptionProps(this)
const enterButton = getComponentFromProp(this, 'enterButton')
const buttonOrIcon = this.getButtonOrIcon()
const searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon
const inputClassName = classNames(prefixCls, {
[`${prefixCls}-enter-button`]: !!enterButton,
[`${prefixCls}-${size}`]: !!size,
})
const inputProps = {
props: {
...others,
prefixCls: inputPrefixCls,
size,
suffix: searchSuffix,
},
attrs: this.$attrs,
on: {
...this.$listeners,
pressEnter: this.onSearch,
},
}
return (
<Input
{...inputProps}
class={inputClassName}
ref='input'
>
{/* <Icon
slot='suffix'
class={`${prefixCls}-icon`}
onClick={this.onSearch}
type='search'
/> */}
</Input>
)
},
}