ant-design-vue/components/button/button.jsx

174 lines
4.5 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import Wave from '../_util/wave';
import Icon from '../icon';
import buttonTypes from './buttonTypes';
2020-01-18 21:34:23 +08:00
import { filterEmpty, getListeners } from '../_util/props-util';
2019-03-13 09:38:54 +08:00
import { ConfigConsumerProps } from '../config-provider';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
2019-01-12 11:33:27 +08:00
const props = buttonTypes();
2017-10-26 15:18:08 +08:00
export default {
2018-04-08 21:17:20 +08:00
name: 'AButton',
2019-02-01 17:23:00 +08:00
inheritAttrs: false,
2018-01-11 18:53:51 +08:00
__ANT_BUTTON: true,
props,
2019-03-13 09:38:54 +08:00
inject: {
2019-09-11 22:35:25 +08:00
configProvider: { default: () => ConfigConsumerProps },
2019-03-13 09:38:54 +08:00
},
2019-01-12 11:33:27 +08:00
data() {
2017-10-26 15:18:08 +08:00
return {
sizeMap: {
large: 'lg',
small: 'sm',
},
2017-12-29 16:51:06 +08:00
sLoading: !!this.loading,
2018-04-06 20:56:19 +08:00
hasTwoCNChar: false,
2019-01-12 11:33:27 +08:00
};
2017-10-26 15:18:08 +08:00
},
computed: {
2019-01-12 11:33:27 +08:00
classes() {
const {
2019-03-13 09:38:54 +08:00
prefixCls: customizePrefixCls,
2019-01-12 11:33:27 +08:00
type,
shape,
size,
hasTwoCNChar,
sLoading,
ghost,
block,
sizeMap,
icon,
$slots,
} = this;
2019-09-11 22:35:25 +08:00
const getPrefixCls = this.configProvider.getPrefixCls;
2019-03-13 09:38:54 +08:00
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
2019-01-12 11:33:27 +08:00
const sizeCls = sizeMap[size] || '';
2019-10-25 10:39:20 +08:00
const iconType = sLoading ? 'loading' : icon;
2019-01-12 11:33:27 +08:00
const children = filterEmpty($slots.default);
2017-10-26 15:18:08 +08:00
return {
[`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
2019-10-25 10:39:20 +08:00
[`${prefixCls}-icon-only`]: children.length === 0 && iconType,
2017-12-29 16:51:06 +08:00
[`${prefixCls}-loading`]: sLoading,
2017-10-26 15:18:08 +08:00
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
2019-03-13 09:38:54 +08:00
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
[`${prefixCls}-block`]: block,
2019-01-12 11:33:27 +08:00
};
2017-10-26 15:18:08 +08:00
},
},
2019-02-01 17:23:00 +08:00
watch: {
2019-09-08 20:16:17 +08:00
loading(val, preVal) {
if (preVal && typeof preVal !== 'boolean') {
clearTimeout(this.delayTimeout);
}
if (val && typeof val !== 'boolean' && val.delay) {
2019-02-01 17:23:00 +08:00
this.delayTimeout = setTimeout(() => {
this.sLoading = !!val;
}, val.delay);
} else {
this.sLoading = !!val;
}
},
},
mounted() {
this.fixTwoCNChar();
},
updated() {
this.fixTwoCNChar();
},
beforeDestroy() {
// if (this.timeout) {
// clearTimeout(this.timeout)
// }
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
},
2017-10-26 15:18:08 +08:00
methods: {
2019-01-12 11:33:27 +08:00
fixTwoCNChar() {
2018-04-06 20:56:19 +08:00
// Fix for HOC usage like <FormatMessage />
2019-01-12 11:33:27 +08:00
const node = this.$refs.buttonNode;
if (!node) {
2019-01-12 11:33:27 +08:00
return;
}
2019-01-12 11:33:27 +08:00
const buttonText = node.textContent || node.innerText;
2018-04-06 20:56:19 +08:00
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.hasTwoCNChar) {
2019-01-12 11:33:27 +08:00
this.hasTwoCNChar = true;
2018-04-06 20:56:19 +08:00
}
} else if (this.hasTwoCNChar) {
2019-01-12 11:33:27 +08:00
this.hasTwoCNChar = false;
2018-04-06 20:56:19 +08:00
}
},
2019-01-12 11:33:27 +08:00
handleClick(event) {
const { sLoading } = this.$data;
if (sLoading) {
2019-01-12 11:33:27 +08:00
return;
}
2019-01-12 11:33:27 +08:00
this.$emit('click', event);
2017-10-26 15:18:08 +08:00
},
2019-01-12 11:33:27 +08:00
insertSpace(child, needInserted) {
const SPACE = needInserted ? ' ' : '';
2017-12-29 16:51:06 +08:00
if (typeof child.text === 'string') {
2019-01-12 11:33:27 +08:00
let text = child.text.trim();
2017-12-29 16:51:06 +08:00
if (isTwoCNChar(text)) {
2019-01-12 11:33:27 +08:00
text = text.split('').join(SPACE);
2017-12-29 16:51:06 +08:00
}
2019-01-12 11:33:27 +08:00
return <span>{text}</span>;
2017-12-29 16:51:06 +08:00
}
2019-01-12 11:33:27 +08:00
return child;
2017-10-26 15:18:08 +08:00
},
2019-01-12 11:33:27 +08:00
isNeedInserted() {
const { icon, $slots } = this;
return $slots.default && $slots.default.length === 1 && !icon;
2018-04-06 20:56:19 +08:00
},
2017-10-26 15:18:08 +08:00
},
2019-01-12 11:33:27 +08:00
render() {
2020-01-18 21:34:23 +08:00
const { type, htmlType, classes, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
2017-12-29 16:51:06 +08:00
const buttonProps = {
attrs: {
...$attrs,
disabled,
},
2018-12-25 11:58:32 +08:00
class: classes,
2017-12-29 16:51:06 +08:00
on: {
2020-01-18 21:34:23 +08:00
...getListeners(this),
2017-12-29 16:51:06 +08:00
click: handleClick,
},
2019-01-12 11:33:27 +08:00
};
const iconType = sLoading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const children = filterEmpty($slots.default);
2019-03-13 09:38:54 +08:00
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
2019-05-28 11:37:38 +08:00
const kids = children.map(child =>
this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
);
if ($attrs.href !== undefined) {
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
return (
2019-01-12 11:33:27 +08:00
<a {...buttonProps} ref="buttonNode">
{iconNode}
{kids}
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
</a>
2019-01-12 11:33:27 +08:00
);
2017-12-29 16:51:06 +08:00
}
const buttonNode = (
<button {...buttonProps} ref="buttonNode" type={htmlType || 'button'}>
{iconNode}
{kids}
</button>
);
if (type === 'link') {
return buttonNode;
}
return <Wave>{buttonNode}</Wave>;
2017-10-26 15:18:08 +08:00
},
2019-01-12 11:33:27 +08:00
};