2019-01-12 03:33:27 +00:00
|
|
|
|
import classNames from 'classnames';
|
2020-03-07 11:45:13 +00:00
|
|
|
|
import { isMobile } from 'is-mobile';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
import Input from './Input';
|
2020-03-26 03:53:51 +00:00
|
|
|
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
|
|
|
|
import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
import inputProps from './inputProps';
|
|
|
|
|
import Button from '../button';
|
|
|
|
|
import { cloneElement } from '../_util/vnode';
|
2020-01-19 08:58:38 +00:00
|
|
|
|
import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
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,
|
2020-03-07 11:45:13 +00:00
|
|
|
|
enterButton: PropTypes.any.def(false),
|
2017-12-06 10:54:20 +00:00
|
|
|
|
},
|
2019-04-07 09:19:18 +00:00
|
|
|
|
inject: {
|
2019-09-11 14:35:25 +00:00
|
|
|
|
configProvider: { default: () => ConfigConsumerProps },
|
2019-04-07 09:19:18 +00:00
|
|
|
|
},
|
2017-12-06 10:54:20 +00:00
|
|
|
|
methods: {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
onChange(e) {
|
|
|
|
|
if (e && e.target && e.type === 'click') {
|
|
|
|
|
this.$emit('search', e.target.value, e);
|
|
|
|
|
}
|
|
|
|
|
this.$emit('change', e);
|
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
onSearch(e) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
if (this.loading || this.disabled) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
|
this.$emit('search', this.$refs.input.stateValue, e);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
if (!isMobile({ tablet: true })) {
|
|
|
|
|
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
|
|
|
|
},
|
2020-03-07 11:45:13 +00:00
|
|
|
|
renderLoading(prefixCls) {
|
|
|
|
|
const { size } = this.$props;
|
|
|
|
|
let enterButton = getComponentFromProp(this, 'enterButton');
|
|
|
|
|
// 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
|
|
|
|
|
enterButton = enterButton || enterButton === '';
|
|
|
|
|
if (enterButton) {
|
|
|
|
|
return (
|
|
|
|
|
<Button class={`${prefixCls}-button`} type="primary" size={size} key="enterButton">
|
2020-03-26 03:53:51 +00:00
|
|
|
|
<LoadingOutlined />
|
2020-03-07 11:45:13 +00:00
|
|
|
|
</Button>
|
|
|
|
|
);
|
|
|
|
|
}
|
2020-03-26 03:53:51 +00:00
|
|
|
|
return <LoadingOutlined class={`${prefixCls}-icon`} key="loadingIcon" />;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
},
|
2019-04-07 09:19:18 +00:00
|
|
|
|
renderSuffix(prefixCls) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const { loading } = this;
|
2019-04-07 09:19:18 +00:00
|
|
|
|
const suffix = getComponentFromProp(this, 'suffix');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
let enterButton = getComponentFromProp(this, 'enterButton');
|
|
|
|
|
// 兼容 <a-input-search enterButton />, 因enterButton类型为 any,此类写法 enterButton 为空字符串
|
|
|
|
|
enterButton = enterButton || enterButton === '';
|
|
|
|
|
if (loading && !enterButton) {
|
|
|
|
|
return [suffix, this.renderLoading(prefixCls)];
|
|
|
|
|
}
|
|
|
|
|
|
2019-04-07 09:19:18 +00:00
|
|
|
|
if (enterButton) return suffix;
|
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const icon = (
|
2020-03-26 03:53:51 +00:00
|
|
|
|
<SearchOutlined class={`${prefixCls}-icon`} key="searchIcon" onClick={this.onSearch} />
|
2019-04-07 09:19:18 +00:00
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (suffix) {
|
2019-09-11 10:11:48 +00:00
|
|
|
|
// let cloneSuffix = suffix;
|
|
|
|
|
// if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
|
|
|
|
|
// cloneSuffix = cloneElement(cloneSuffix, {
|
|
|
|
|
// key: 'originSuffix',
|
|
|
|
|
// });
|
|
|
|
|
// }
|
2020-03-07 11:45:13 +00:00
|
|
|
|
return [suffix, icon];
|
2019-04-07 09:19:18 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
|
return icon;
|
2019-04-07 09:19:18 +00:00
|
|
|
|
},
|
|
|
|
|
renderAddonAfter(prefixCls) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const { size, disabled, loading } = this;
|
|
|
|
|
const btnClassName = `${prefixCls}-button`;
|
|
|
|
|
let enterButton = getComponentFromProp(this, 'enterButton');
|
|
|
|
|
enterButton = enterButton || enterButton === '';
|
2019-04-07 09:19:18 +00:00
|
|
|
|
const addonAfter = getComponentFromProp(this, 'addonAfter');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
if (loading && enterButton) {
|
|
|
|
|
return [this.renderLoading(prefixCls), addonAfter];
|
|
|
|
|
}
|
2019-05-28 03:37:38 +00:00
|
|
|
|
if (!enterButton) return addonAfter;
|
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;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const isAntdButton =
|
|
|
|
|
enterButtonAsElement.componentOptions &&
|
|
|
|
|
enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON;
|
|
|
|
|
if (enterButtonAsElement.tag === 'button' || isAntdButton) {
|
2019-04-07 09:19:18 +00:00
|
|
|
|
button = cloneElement(enterButtonAsElement, {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
key: 'enterButton',
|
|
|
|
|
class: isAntdButton ? btnClassName : '',
|
|
|
|
|
props: isAntdButton ? { 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
|
|
|
|
>
|
2020-03-26 03:53:51 +00:00
|
|
|
|
{enterButton === true || enterButton === '' ? <SearchOutlined /> : 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,
|
2020-03-07 11:45:13 +00:00
|
|
|
|
loading,
|
2019-04-07 09:19:18 +00:00
|
|
|
|
...others
|
|
|
|
|
} = getOptionProps(this);
|
2019-09-11 14:35:25 +00:00
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-04-07 09:19:18 +00:00
|
|
|
|
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
|
|
|
|
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
|
let enterButton = getComponentFromProp(this, 'enterButton');
|
2019-03-15 14:56:05 +00:00
|
|
|
|
const addonBefore = getComponentFromProp(this, 'addonBefore');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
enterButton = enterButton || enterButton === '';
|
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
|
|
|
|
|
2020-01-19 08:58:38 +00:00
|
|
|
|
const on = { ...getListeners(this) };
|
2019-01-12 03:33:27 +00:00
|
|
|
|
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),
|
2019-10-17 09:59:23 +00:00
|
|
|
|
prefix: getComponentFromProp(this, 'prefix'),
|
2019-04-07 09:19:18 +00:00
|
|
|
|
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,
|
2020-03-07 11:45:13 +00:00
|
|
|
|
change: this.onChange,
|
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
|
|
|
|
};
|