import { inject } from 'vue';
import Wave from '../_util/wave';
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
import buttonTypes from './buttonTypes';
import { filterEmpty } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
// eslint-disable-next-line no-console
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
const props = buttonTypes();
export default {
name: 'AButton',
inheritAttrs: false,
__ANT_BUTTON: true,
props,
setup() {
const configProvider = inject('configProvider', ConfigConsumerProps);
return {
configProvider,
};
},
data() {
this.children = [];
return {
sizeMap: {
large: 'lg',
small: 'sm',
},
sLoading: !!this.loading,
hasTwoCNChar: false,
};
},
watch: {
loading(val, preVal) {
if (preVal && typeof preVal !== 'boolean') {
clearTimeout(this.delayTimeout);
}
if (val && typeof val !== 'boolean' && val.delay) {
this.delayTimeout = setTimeout(() => {
this.sLoading = !!val;
}, val.delay);
} else {
this.sLoading = !!val;
}
},
},
mounted() {
this.fixTwoCNChar();
},
updated() {
this.fixTwoCNChar();
},
beforeDestroy() {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
},
methods: {
getClasses() {
const {
prefixCls: customizePrefixCls,
type,
shape,
size,
hasTwoCNChar,
sLoading,
ghost,
block,
icon,
$attrs,
} = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
// large => lg
// small => sm
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
break;
default:
break;
}
const iconType = sLoading ? 'loading' : icon;
return {
[$attrs.class]: $attrs.class,
[`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: this.children.length === 0 && iconType,
[`${prefixCls}-loading`]: sLoading,
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
};
},
fixTwoCNChar() {
// Fix for HOC usage like
const node = this.$refs.buttonNode;
if (!node) {
return;
}
const buttonText = node.textContent;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.hasTwoCNChar) {
this.hasTwoCNChar = true;
}
} else if (this.hasTwoCNChar) {
this.hasTwoCNChar = false;
}
},
handleClick(event) {
const { sLoading } = this.$data;
if (sLoading) {
return;
}
this.$emit('click', event);
},
insertSpace(child, needInserted) {
const SPACE = needInserted ? ' ' : '';
if (typeof child.children === 'string') {
let text = child.children.trim();
if (isTwoCNChar(text)) {
text = text.split('').join(SPACE);
}
return {text};
}
return child;
},
isNeedInserted() {
const { icon, type } = this;
return this.children.length === 1 && !icon && type !== 'link';
},
},
render() {
this.icon = this.$slots.icon && this.$slots.icon();
const { type, htmlType, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
const children = filterEmpty($slots.default && $slots.default());
this.children = children;
const classes = this.getClasses();
const buttonProps = {
...$attrs,
disabled,
class: classes,
onClick: handleClick,
};
const iconNode = sLoading ? : icon;
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
const kids = children.map(child =>
this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
);
if ($attrs.href !== undefined) {
return (
{iconNode}
{kids}
);
}
const buttonNode = (
);
if (type === 'link') {
return buttonNode;
}
return {buttonNode};
},
};