2021-06-30 02:03:17 +00:00
|
|
|
import {
|
|
|
|
computed,
|
|
|
|
defineComponent,
|
|
|
|
onBeforeUnmount,
|
|
|
|
onMounted,
|
|
|
|
onUpdated,
|
|
|
|
ref,
|
|
|
|
Text,
|
|
|
|
watch,
|
|
|
|
watchEffect,
|
|
|
|
} from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import Wave from '../_util/wave';
|
|
|
|
import buttonTypes from './buttonTypes';
|
2021-06-30 02:03:17 +00:00
|
|
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
|
|
|
import { flattenChildren, getPropsSlot } from '../_util/props-util';
|
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
|
|
import devWarning from '../vc-util/devWarning';
|
|
|
|
|
|
|
|
import type { ButtonType } from './buttonTypes';
|
|
|
|
import type { VNode } from 'vue';
|
|
|
|
|
2019-03-13 01:38:54 +00:00
|
|
|
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
|
|
|
|
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
2019-01-12 03:33:27 +00:00
|
|
|
const props = buttonTypes();
|
2021-06-30 02:03:17 +00:00
|
|
|
|
|
|
|
function isUnborderedButtonType(type: ButtonType | undefined) {
|
|
|
|
return type === 'text' || type === 'link';
|
|
|
|
}
|
|
|
|
|
2020-10-13 10:04:02 +00:00
|
|
|
export default defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AButton',
|
2019-02-01 09:23:00 +00:00
|
|
|
inheritAttrs: false,
|
2018-01-11 10:53:51 +00:00
|
|
|
__ANT_BUTTON: true,
|
2019-01-02 12:18:13 +00:00
|
|
|
props,
|
2021-06-30 02:03:17 +00:00
|
|
|
slots: ['icon'],
|
|
|
|
emits: ['click'],
|
|
|
|
setup(props, { slots, attrs, emit }) {
|
|
|
|
const { prefixCls, autoInsertSpaceInButton, direction } = useConfigInject('btn', props);
|
|
|
|
|
|
|
|
const buttonNodeRef = ref<HTMLElement>(null);
|
|
|
|
const delayTimeout = ref(undefined);
|
|
|
|
const iconCom = ref<VNode>(null);
|
|
|
|
const children = ref<VNode[]>([]);
|
|
|
|
|
|
|
|
const sLoading = ref(props.loading);
|
|
|
|
const hasTwoCNChar = ref(false);
|
|
|
|
|
|
|
|
const autoInsertSpace = computed(() => autoInsertSpaceInButton.value !== false);
|
|
|
|
|
|
|
|
const getClasses = () => {
|
|
|
|
const { type, shape, size, ghost, block, danger } = props;
|
2019-03-13 01:38:54 +00:00
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
// large => lg
|
|
|
|
// small => sm
|
|
|
|
let sizeCls = '';
|
|
|
|
switch (size) {
|
|
|
|
case 'large':
|
|
|
|
sizeCls = 'lg';
|
|
|
|
break;
|
|
|
|
case 'small':
|
|
|
|
sizeCls = 'sm';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2021-06-30 02:03:17 +00:00
|
|
|
const iconType = sLoading.value ? 'loading' : iconCom.value;
|
2017-10-26 07:18:08 +00:00
|
|
|
return {
|
2021-06-30 02:03:17 +00:00
|
|
|
[attrs.class as string]: attrs.class,
|
|
|
|
[`${prefixCls.value}`]: true,
|
|
|
|
[`${prefixCls.value}-${type}`]: type,
|
|
|
|
[`${prefixCls.value}-${shape}`]: shape,
|
|
|
|
[`${prefixCls.value}-${sizeCls}`]: sizeCls,
|
|
|
|
[`${prefixCls.value}-icon-only`]: children.value.length === 0 && !!iconType,
|
|
|
|
[`${prefixCls.value}-loading`]: sLoading.value,
|
|
|
|
[`${prefixCls.value}-background-ghost`]: ghost && !isUnborderedButtonType(type),
|
|
|
|
[`${prefixCls.value}-two-chinese-chars`]: hasTwoCNChar.value && autoInsertSpace.value,
|
|
|
|
[`${prefixCls.value}-block`]: block,
|
|
|
|
[`${prefixCls.value}-dangerous`]: !!danger,
|
|
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2021-06-30 02:03:17 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const fixTwoCNChar = () => {
|
2018-04-06 12:56:19 +00:00
|
|
|
// Fix for HOC usage like <FormatMessage />
|
2021-06-30 02:03:17 +00:00
|
|
|
const node = buttonNodeRef.value!;
|
|
|
|
if (!node || autoInsertSpaceInButton.value === false) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-11-28 13:58:42 +00:00
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
const buttonText = node.textContent;
|
2021-06-30 02:03:17 +00:00
|
|
|
|
|
|
|
if (isNeedInserted() && isTwoCNChar(buttonText)) {
|
|
|
|
if (!hasTwoCNChar.value) {
|
|
|
|
hasTwoCNChar.value = true;
|
2018-04-06 12:56:19 +00:00
|
|
|
}
|
2021-06-30 02:03:17 +00:00
|
|
|
} else if (hasTwoCNChar.value) {
|
|
|
|
hasTwoCNChar.value = false;
|
2018-04-06 12:56:19 +00:00
|
|
|
}
|
2021-06-30 02:03:17 +00:00
|
|
|
};
|
|
|
|
const handleClick = (event: Event) => {
|
|
|
|
// https://github.com/ant-design/ant-design/issues/30207
|
|
|
|
if (sLoading.value || props.disabled) {
|
|
|
|
event.preventDefault();
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-11-28 13:58:42 +00:00
|
|
|
}
|
2021-06-30 02:03:17 +00:00
|
|
|
emit('click', event);
|
|
|
|
};
|
|
|
|
|
|
|
|
const insertSpace = (child: VNode, needInserted: boolean) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
const SPACE = needInserted ? ' ' : '';
|
2020-06-20 13:45:08 +00:00
|
|
|
if (child.type === Text) {
|
2020-10-13 10:04:02 +00:00
|
|
|
let text = (child.children as string).trim();
|
2017-12-29 08:51:06 +00:00
|
|
|
if (isTwoCNChar(text)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
text = text.split('').join(SPACE);
|
2017-12-29 08:51:06 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return <span>{text}</span>;
|
2017-12-29 08:51:06 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return child;
|
|
|
|
};
|
2020-06-11 07:58:41 +00:00
|
|
|
|
2021-06-30 02:03:17 +00:00
|
|
|
const isNeedInserted = () =>
|
|
|
|
children.value.length === 1 && !iconCom.value && !isUnborderedButtonType(props.type);
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
|
|
devWarning(
|
|
|
|
!(props.ghost && isUnborderedButtonType(props.type)),
|
|
|
|
'Button',
|
|
|
|
"`link` or `text` button can't be a `ghost` button.",
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => props.loading,
|
|
|
|
(val, preVal) => {
|
|
|
|
if (preVal && typeof preVal !== 'boolean') {
|
|
|
|
clearTimeout(delayTimeout.value);
|
|
|
|
}
|
|
|
|
if (val && typeof val !== 'boolean' && val.delay) {
|
|
|
|
delayTimeout.value = setTimeout(() => {
|
|
|
|
sLoading.value = !!val;
|
|
|
|
}, val.delay);
|
|
|
|
} else {
|
|
|
|
sLoading.value = !!val;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
immediate: true,
|
|
|
|
},
|
2019-05-28 03:37:38 +00:00
|
|
|
);
|
2018-11-28 13:58:42 +00:00
|
|
|
|
2021-06-30 02:03:17 +00:00
|
|
|
onMounted(fixTwoCNChar);
|
|
|
|
onUpdated(fixTwoCNChar);
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
delayTimeout.value && clearTimeout(delayTimeout.value);
|
|
|
|
});
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
iconCom.value = getPropsSlot(slots, props, 'icon');
|
|
|
|
children.value = flattenChildren(getPropsSlot(slots, props));
|
|
|
|
|
|
|
|
const { type, htmlType, disabled, href, title, target } = props;
|
|
|
|
const classes = getClasses();
|
|
|
|
|
|
|
|
const buttonProps = {
|
|
|
|
...attrs,
|
|
|
|
title,
|
|
|
|
disabled,
|
|
|
|
class: classes,
|
|
|
|
onClick: handleClick,
|
|
|
|
};
|
|
|
|
const iconNode = sLoading.value ? <LoadingOutlined /> : iconCom.value;
|
|
|
|
|
|
|
|
const kids = children.value.map((child) =>
|
|
|
|
insertSpace(child, isNeedInserted() && autoInsertSpace.value),
|
|
|
|
);
|
|
|
|
|
|
|
|
if (href !== undefined) {
|
|
|
|
return (
|
|
|
|
<a {...buttonProps} href={href} target={target} ref={buttonNodeRef}>
|
|
|
|
{iconNode}
|
|
|
|
{kids}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const buttonNode = (
|
|
|
|
<button {...buttonProps} ref={buttonNodeRef} type={htmlType}>
|
2019-01-12 03:33:27 +00:00
|
|
|
{iconNode}
|
|
|
|
{kids}
|
2021-06-30 02:03:17 +00:00
|
|
|
</button>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2019-08-12 03:30:32 +00:00
|
|
|
|
2021-06-30 02:03:17 +00:00
|
|
|
if (isUnborderedButtonType(type)) {
|
|
|
|
return buttonNode;
|
|
|
|
}
|
2019-08-12 03:30:32 +00:00
|
|
|
|
2021-06-30 02:03:17 +00:00
|
|
|
return <Wave ref="wave">{buttonNode}</Wave>;
|
|
|
|
};
|
2017-10-26 07:18:08 +00:00
|
|
|
},
|
2020-10-13 10:04:02 +00:00
|
|
|
});
|