2019-01-12 03:33:27 +00:00
|
|
|
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, isValidElement } from '../_util/props-util';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2019-04-07 09:19:18 +00:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2017-12-06 10:54:20 +00:00
|
|
|
|
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AInputSearch',
|
2019-05-25 07:10:28 +00:00
|
|
|
inheritAttrs: false,
|
2019-02-01 09:23:00 +00:00
|
|
|
model: {
|
|
|
|
prop: 'value',
|
|
|
|
event: 'change.value',
|
|
|
|
},
|
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
|
|
|
},
|
2019-04-07 09:19:18 +00:00
|
|
|
inject: {
|
|
|
|
configProvider: { default: () => ({}) },
|
|
|
|
},
|
2017-12-06 10:54:20 +00:00
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
onSearch(e) {
|
|
|
|
this.$emit('search', this.$refs.input.stateValue, e);
|
|
|
|
this.$refs.input.focus();
|
2017-12-06 10:54:20 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
focus() {
|
|
|
|
this.$refs.input.focus();
|
2018-06-10 01:29:18 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
blur() {
|
|
|
|
this.$refs.input.blur();
|
2018-06-10 01:29:18 +00:00
|
|
|
},
|
2019-04-07 09:19:18 +00:00
|
|
|
renderSuffix(prefixCls) {
|
|
|
|
const suffix = getComponentFromProp(this, 'suffix');
|
|
|
|
const enterButton = getComponentFromProp(this, 'enterButton');
|
|
|
|
if (enterButton) return suffix;
|
|
|
|
|
|
|
|
const node = (
|
2019-05-28 03:37:38 +00:00
|
|
|
<Icon class={`${prefixCls}-icon`} type="search" key="searchIcon" onClick={this.onSearch} />
|
2019-04-07 09:19:18 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
if (suffix) {
|
|
|
|
let cloneSuffix = suffix;
|
|
|
|
if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
|
|
|
|
cloneSuffix = cloneElement(cloneSuffix, {
|
|
|
|
key: 'originSuffix',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return [cloneSuffix, node];
|
|
|
|
}
|
|
|
|
|
|
|
|
return node;
|
|
|
|
},
|
|
|
|
renderAddonAfter(prefixCls) {
|
|
|
|
const { size, disabled } = this;
|
2019-01-12 03:33:27 +00:00
|
|
|
const enterButton = getComponentFromProp(this, 'enterButton');
|
2019-04-07 09:19:18 +00:00
|
|
|
const addonAfter = getComponentFromProp(this, 'addonAfter');
|
2019-05-28 03:37:38 +00:00
|
|
|
if (!enterButton) return addonAfter;
|
2019-04-07 09:19:18 +00:00
|
|
|
const btnClassName = `${prefixCls}-button`;
|
2019-01-12 03:33:27 +00:00
|
|
|
const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
|
2019-04-07 09:19:18 +00:00
|
|
|
let button;
|
|
|
|
if (
|
2019-01-12 03:33:27 +00:00
|
|
|
enterButtonAsElement.tag === 'button' ||
|
|
|
|
(enterButtonAsElement.componentOptions &&
|
|
|
|
enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON)
|
|
|
|
) {
|
2019-04-07 09:19:18 +00:00
|
|
|
button = cloneElement(enterButtonAsElement, {
|
|
|
|
class: btnClassName,
|
2018-04-07 06:29:59 +00:00
|
|
|
props: { size },
|
2019-04-07 09:19:18 +00:00
|
|
|
on: {
|
|
|
|
click: this.onSearch,
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-09-05 13:28:54 +00:00
|
|
|
} else {
|
2019-04-07 09:19:18 +00:00
|
|
|
button = (
|
2018-09-05 13:28:54 +00:00
|
|
|
<Button
|
2019-04-07 09:19:18 +00:00
|
|
|
class={btnClassName}
|
2019-01-12 03:33:27 +00:00
|
|
|
type="primary"
|
2018-09-05 13:28:54 +00:00
|
|
|
size={size}
|
|
|
|
disabled={disabled}
|
2019-01-12 03:33:27 +00:00
|
|
|
key="enterButton"
|
2019-04-07 09:19:18 +00:00
|
|
|
onClick={this.onSearch}
|
2018-09-05 13:28:54 +00:00
|
|
|
>
|
2019-01-12 03:33:27 +00:00
|
|
|
{enterButton === true ? <Icon type="search" /> : enterButton}
|
2018-09-05 13:28:54 +00:00
|
|
|
</Button>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-04-07 06:29:59 +00:00
|
|
|
}
|
2019-04-07 09:19:18 +00:00
|
|
|
if (addonAfter) {
|
|
|
|
return [button, addonAfter];
|
|
|
|
}
|
|
|
|
|
|
|
|
return button;
|
2018-04-07 06:29:59 +00:00
|
|
|
},
|
2017-12-06 10:54:20 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2019-04-07 09:19:18 +00:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
inputPrefixCls: customizeInputPrefixCls,
|
|
|
|
size,
|
|
|
|
...others
|
|
|
|
} = getOptionProps(this);
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
|
|
|
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
|
|
|
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const enterButton = getComponentFromProp(this, 'enterButton');
|
2019-03-15 14:56:05 +00:00
|
|
|
const addonBefore = getComponentFromProp(this, 'addonBefore');
|
2019-04-07 09:19:18 +00:00
|
|
|
let inputClassName;
|
2019-05-28 03:37:38 +00:00
|
|
|
if (enterButton) {
|
2019-04-07 09:19:18 +00:00
|
|
|
inputClassName = classNames(prefixCls, {
|
|
|
|
[`${prefixCls}-enter-button`]: !!enterButton,
|
|
|
|
[`${prefixCls}-${size}`]: !!size,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2019-04-07 09:19:18 +00:00
|
|
|
} else {
|
|
|
|
inputClassName = prefixCls;
|
2018-12-13 13:26:21 +00:00
|
|
|
}
|
2019-04-07 09:19:18 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const on = { ...this.$listeners };
|
|
|
|
delete on.search;
|
2017-12-07 04:31:12 +00:00
|
|
|
const inputProps = {
|
|
|
|
props: {
|
|
|
|
...others,
|
|
|
|
prefixCls: inputPrefixCls,
|
2018-04-07 06:29:59 +00:00
|
|
|
size,
|
2019-04-07 09:19:18 +00:00
|
|
|
suffix: this.renderSuffix(prefixCls),
|
|
|
|
addonAfter: this.renderAddonAfter(prefixCls),
|
2019-03-15 14:56:05 +00:00
|
|
|
addonBefore,
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
|
|
|
attrs: this.$attrs,
|
2019-04-07 09:19:18 +00:00
|
|
|
class: inputClassName,
|
|
|
|
ref: 'input',
|
2018-04-07 06:29:59 +00:00
|
|
|
on: {
|
|
|
|
pressEnter: this.onSearch,
|
2018-09-05 13:28:54 +00:00
|
|
|
...on,
|
2018-04-07 06:29:59 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2019-04-07 09:19:18 +00:00
|
|
|
return <Input {...inputProps} />;
|
2017-12-06 10:54:20 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|