import { defineComponent, inject } from 'vue';
import classNames from '../_util/classNames';
import { isMobile } from 'is-mobile';
import Input from './Input';
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
import inputProps from './inputProps';
import Button from '../button';
import { cloneElement } from '../_util/vnode';
import PropTypes from '../_util/vue-types';
import { getOptionProps, getComponent } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
import isPlainObject from 'lodash-es/isPlainObject';
export default defineComponent({
name: 'AInputSearch',
inheritAttrs: false,
props: {
...inputProps,
// 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
enterButton: PropTypes.VNodeChild,
onSearch: PropTypes.func,
},
setup() {
return {
configProvider: inject('configProvider', defaultConfigProvider),
input: null,
};
},
methods: {
saveInput(node: HTMLInputElement) {
this.input = node;
},
handleChange(e: Event) {
if (e && e.target && e.type === 'click') {
this.$emit('search', (e.target as HTMLInputElement).value, e);
}
this.$emit('update:value', (e.target as HTMLInputElement).value);
this.$emit('change', e);
},
handleSearch(e: Event) {
if (this.loading || this.disabled) {
return;
}
this.$emit('search', this.input.stateValue, e);
if (!isMobile({ tablet: true })) {
this.input.focus();
}
},
focus() {
this.input.focus();
},
blur() {
this.input.blur();
},
renderLoading(prefixCls: string) {
const { size } = this.$props;
let enterButton = getComponent(this, 'enterButton');
// 兼容 , 因enterButton类型为 any,此类写法 enterButton 为空字符串
enterButton = enterButton || enterButton === '';
if (enterButton) {
return (
);
}
return ;
},
renderSuffix(prefixCls: string) {
const { loading } = this;
const suffix = getComponent(this, 'suffix');
let enterButton = getComponent(this, 'enterButton');
// 兼容 , 因enterButton类型为 any,此类写法 enterButton 为空字符串
enterButton = enterButton || enterButton === '';
if (loading && !enterButton) {
return [suffix, this.renderLoading(prefixCls)];
}
if (enterButton) return suffix;
const icon = (
);
if (suffix) {
// let cloneSuffix = suffix;
// if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
// cloneSuffix = cloneElement(cloneSuffix, {
// key: 'originSuffix',
// });
// }
return [suffix, icon];
}
return icon;
},
renderAddonAfter(prefixCls: string) {
const { size, disabled, loading } = this;
const btnClassName = `${prefixCls}-button`;
let enterButton = getComponent(this, 'enterButton');
enterButton = enterButton || enterButton === '';
const addonAfter = getComponent(this, 'addonAfter');
if (loading && enterButton) {
return [this.renderLoading(prefixCls), addonAfter];
}
if (!enterButton) return addonAfter;
const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton;
let button: any;
const isAntdButton =
enterButtonAsElement.type &&
isPlainObject(enterButtonAsElement.type) &&
enterButtonAsElement.type.__ANT_BUTTON;
if (enterButtonAsElement.tagName === 'button' || isAntdButton) {
button = cloneElement(enterButtonAsElement, {
key: 'enterButton',
class: isAntdButton ? btnClassName : '',
...(isAntdButton ? { size } : {}),
onClick: this.handleSearch,
});
} else {
button = (
);
}
if (addonAfter) {
return [button, addonAfter];
}
return button;
},
},
render() {
const {
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
size,
class: className,
...restProps
} = { ...getOptionProps(this), ...this.$attrs } as any;
delete restProps.onSearch;
delete restProps.loading;
delete restProps.enterButton;
delete restProps.addonBefore;
delete restProps['onUpdate:value'];
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
let enterButton = getComponent(this, 'enterButton');
const addonBefore = getComponent(this, 'addonBefore');
enterButton = enterButton || enterButton === '';
let inputClassName: string;
if (enterButton) {
inputClassName = classNames(prefixCls, className, {
[`${prefixCls}-enter-button`]: !!enterButton,
[`${prefixCls}-${size}`]: !!size,
});
} else {
inputClassName = prefixCls;
}
const inputProps = {
...restProps,
prefixCls: inputPrefixCls,
size,
suffix: this.renderSuffix(prefixCls),
prefix: getComponent(this, 'prefix'),
addonAfter: this.renderAddonAfter(prefixCls),
addonBefore,
class: inputClassName,
onPressEnter: this.handleSearch,
onChange: this.handleChange,
};
return ;
},
});