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

110 lines
2.9 KiB
Vue
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-04-07 06:29:59 +00:00
import classNames from 'classnames'
2018-03-19 13:23:38 +00:00
import Input from './Input'
2017-12-06 10:54:20 +00:00
import Icon from '../icon'
2018-03-19 13:23:38 +00:00
import inputProps from './inputProps'
2018-04-07 06:29:59 +00:00
import Button from '../button'
import { cloneElement } from '../_util/vnode'
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
2018-04-07 06:31:41 +00:00
import PropTypes from '../_util/vue-types'
2017-12-06 10:54:20 +00:00
export default {
2018-04-08 13:17:20 +00:00
name: 'AInputSearch',
2017-12-06 10:54:20 +00:00
props: {
2018-03-19 13:23:38 +00:00
...inputProps,
2017-12-06 10:54:20 +00:00
prefixCls: {
default: 'ant-input-search',
type: String,
},
inputPrefixCls: {
default: 'ant-input',
type: String,
},
2018-07-17 14:05:18 +00:00
enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
2017-12-06 10:54:20 +00:00
},
model: {
prop: 'value',
event: 'change.value',
2017-12-06 10:54:20 +00:00
},
methods: {
onSearch (e) {
2017-12-07 04:31:12 +00:00
this.$emit('search', this.$refs.input.stateValue)
this.$refs.input.focus()
2017-12-06 10:54:20 +00:00
},
focus () {
this.$refs.input.focus()
},
blur () {
this.$refs.input.blur()
},
2018-04-07 06:29:59 +00:00
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, {
2018-04-07 06:29:59 +00:00
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>
)
},
2017-12-06 10:54:20 +00:00
},
render () {
2018-04-07 06:29:59 +00:00
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,
})
2017-12-07 04:31:12 +00:00
const inputProps = {
props: {
...others,
prefixCls: inputPrefixCls,
2018-04-07 06:29:59 +00:00
size,
suffix: searchSuffix,
2017-12-07 04:31:12 +00:00
},
attrs: this.$attrs,
2018-04-07 06:29:59 +00:00
on: {
2018-04-14 13:09:35 +00:00
...this.$listeners,
2018-04-07 06:29:59 +00:00
pressEnter: this.onSearch,
},
2017-12-07 04:31:12 +00:00
}
2017-12-06 10:54:20 +00:00
return (
<Input
2017-12-07 04:31:12 +00:00
{...inputProps}
2018-04-07 06:29:59 +00:00
class={inputClassName}
2017-12-06 10:54:20 +00:00
ref='input'
/>
2017-12-06 10:54:20 +00:00
)
},
}
2018-03-19 02:16:27 +00:00