2020-10-16 06:24:14 +00:00
|
|
|
|
import { defineComponent, inject } from 'vue';
|
2020-08-31 08:53:19 +00:00
|
|
|
|
import classNames from '../_util/classNames';
|
2021-04-16 23:38:43 +00:00
|
|
|
|
import isMobile from '../vc-menu/utils/isMobile';
|
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';
|
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-06-27 06:02:30 +00:00
|
|
|
|
import { getOptionProps, getComponent } from '../_util/props-util';
|
2020-09-30 02:47:18 +00:00
|
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-09-02 14:44:16 +00:00
|
|
|
|
import isPlainObject from 'lodash-es/isPlainObject';
|
2017-12-06 10:54:20 +00:00
|
|
|
|
|
2020-10-16 06:24:14 +00:00
|
|
|
|
export default defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
|
name: 'AInputSearch',
|
2019-05-25 07:10:28 +00:00
|
|
|
|
inheritAttrs: false,
|
2017-12-06 10:54:20 +00:00
|
|
|
|
props: {
|
2018-03-19 13:23:38 +00:00
|
|
|
|
...inputProps,
|
2020-03-21 09:29:53 +00:00
|
|
|
|
// 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
|
2020-10-16 06:24:14 +00:00
|
|
|
|
enterButton: PropTypes.VNodeChild,
|
2020-07-30 10:41:38 +00:00
|
|
|
|
onSearch: PropTypes.func,
|
2017-12-06 10:54:20 +00:00
|
|
|
|
},
|
2020-06-27 06:02:30 +00:00
|
|
|
|
setup() {
|
|
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-16 06:24:14 +00:00
|
|
|
|
input: null,
|
2020-06-27 06:02:30 +00:00
|
|
|
|
};
|
2019-04-07 09:19:18 +00:00
|
|
|
|
},
|
2017-12-06 10:54:20 +00:00
|
|
|
|
methods: {
|
2020-11-07 14:39:18 +00:00
|
|
|
|
saveInput(node: HTMLInputElement) {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
this.input = node;
|
|
|
|
|
},
|
2020-11-07 14:39:18 +00:00
|
|
|
|
handleChange(e: Event) {
|
2021-02-27 05:50:59 +00:00
|
|
|
|
this.$emit('update:value', (e.target as HTMLInputElement).value);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
if (e && e.target && e.type === 'click') {
|
2020-11-07 14:39:18 +00:00
|
|
|
|
this.$emit('search', (e.target as HTMLInputElement).value, e);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
}
|
|
|
|
|
this.$emit('change', e);
|
|
|
|
|
},
|
2020-11-07 14:39:18 +00:00
|
|
|
|
handleSearch(e: Event) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
if (this.loading || this.disabled) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-06-27 06:02:30 +00:00
|
|
|
|
this.$emit('search', this.input.stateValue, e);
|
2021-04-16 23:38:43 +00:00
|
|
|
|
if (!isMobile.tablet) {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
this.input.focus();
|
2020-03-07 11:45:13 +00:00
|
|
|
|
}
|
2017-12-06 10:54:20 +00:00
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
focus() {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
this.input.focus();
|
2018-06-10 01:29:18 +00:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
|
blur() {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
this.input.blur();
|
2018-06-10 01:29:18 +00:00
|
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
|
renderLoading(prefixCls: string) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const { size } = this.$props;
|
2020-06-27 06:02:30 +00:00
|
|
|
|
let enterButton = getComponent(this, 'enterButton');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
// 兼容 <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
|
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
|
renderSuffix(prefixCls: string) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const { loading } = this;
|
2020-06-27 06:02:30 +00:00
|
|
|
|
const suffix = getComponent(this, 'suffix');
|
|
|
|
|
let enterButton = getComponent(this, 'enterButton');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
// 兼容 <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-07-30 10:41:38 +00:00
|
|
|
|
<SearchOutlined class={`${prefixCls}-icon`} key="searchIcon" onClick={this.handleSearch} />
|
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
|
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
|
renderAddonAfter(prefixCls: string) {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const { size, disabled, loading } = this;
|
|
|
|
|
const btnClassName = `${prefixCls}-button`;
|
2020-06-27 06:02:30 +00:00
|
|
|
|
let enterButton = getComponent(this, 'enterButton');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
enterButton = enterButton || enterButton === '';
|
2020-06-27 06:02:30 +00:00
|
|
|
|
const addonAfter = getComponent(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;
|
2020-10-16 06:24:14 +00:00
|
|
|
|
let button: any;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
const isAntdButton =
|
2020-06-27 06:02:30 +00:00
|
|
|
|
enterButtonAsElement.type &&
|
|
|
|
|
isPlainObject(enterButtonAsElement.type) &&
|
|
|
|
|
enterButtonAsElement.type.__ANT_BUTTON;
|
|
|
|
|
if (enterButtonAsElement.tagName === '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 : '',
|
2020-06-27 06:02:30 +00:00
|
|
|
|
...(isAntdButton ? { size } : {}),
|
2020-07-30 10:41:38 +00:00
|
|
|
|
onClick: this.handleSearch,
|
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"
|
2020-07-30 10:41:38 +00:00
|
|
|
|
onClick={this.handleSearch}
|
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-06-27 06:02:30 +00:00
|
|
|
|
class: className,
|
|
|
|
|
...restProps
|
2020-10-16 06:24:14 +00:00
|
|
|
|
} = { ...getOptionProps(this), ...this.$attrs } as any;
|
2020-06-27 06:02:30 +00:00
|
|
|
|
delete restProps.onSearch;
|
|
|
|
|
delete restProps.loading;
|
|
|
|
|
delete restProps.enterButton;
|
|
|
|
|
delete restProps.addonBefore;
|
2020-07-30 10:41:38 +00:00
|
|
|
|
delete restProps['onUpdate:value'];
|
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-06-27 06:02:30 +00:00
|
|
|
|
let enterButton = getComponent(this, 'enterButton');
|
|
|
|
|
const addonBefore = getComponent(this, 'addonBefore');
|
2020-03-07 11:45:13 +00:00
|
|
|
|
enterButton = enterButton || enterButton === '';
|
2020-10-16 06:24:14 +00:00
|
|
|
|
let inputClassName: string;
|
2019-05-28 03:37:38 +00:00
|
|
|
|
if (enterButton) {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
inputClassName = classNames(prefixCls, className, {
|
2019-04-07 09:19:18 +00:00
|
|
|
|
[`${prefixCls}-enter-button`]: !!enterButton,
|
|
|
|
|
[`${prefixCls}-${size}`]: !!size,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
});
|
2019-04-07 09:19:18 +00:00
|
|
|
|
} else {
|
2021-01-19 15:43:01 +00:00
|
|
|
|
inputClassName = classNames(prefixCls, className);
|
2018-12-13 13:26:21 +00:00
|
|
|
|
}
|
2019-04-07 09:19:18 +00:00
|
|
|
|
|
2017-12-07 04:31:12 +00:00
|
|
|
|
const inputProps = {
|
2020-06-27 06:02:30 +00:00
|
|
|
|
...restProps,
|
|
|
|
|
prefixCls: inputPrefixCls,
|
|
|
|
|
size,
|
|
|
|
|
suffix: this.renderSuffix(prefixCls),
|
|
|
|
|
prefix: getComponent(this, 'prefix'),
|
|
|
|
|
addonAfter: this.renderAddonAfter(prefixCls),
|
|
|
|
|
addonBefore,
|
|
|
|
|
class: inputClassName,
|
2020-07-30 10:41:38 +00:00
|
|
|
|
onPressEnter: this.handleSearch,
|
|
|
|
|
onChange: this.handleChange,
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2020-06-27 06:02:30 +00:00
|
|
|
|
return <Input {...inputProps} ref={this.saveInput} />;
|
2017-12-06 10:54:20 +00:00
|
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
|
});
|