fix: button

Fixed the issue that when the href property is undefined, the Button will also be rendered as a anchor.
Fixed the issue that Edge throws an error when setting the loading property.
This commit is contained in:
tangjinzhou 2019-01-02 20:18:13 +08:00
parent 7dbf5ed4d7
commit 7422026674
3 changed files with 22 additions and 10 deletions

View File

@ -38,4 +38,6 @@ exports[`Button renders Chinese characters correctly 5`] = `
exports[`Button renders correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Follow</span></button>`;
exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" type="button" class="ant-btn ant-btn-default"><span>link button</span></a>`;
exports[`Button should not render as link button when href is undefined 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>button</span></button>`;
exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" class="ant-btn ant-btn-default"><span>link button</span></a>`;

View File

@ -173,4 +173,15 @@ describe('Button', () => {
})
expect(wrapper2.html()).toMatchSnapshot()
})
it('should not render as link button when href is undefined', async () => {
const wrapper = mount({
render () {
return (
<Button type='primary' href={undefined}>button</Button>
)
},
})
expect(wrapper.html()).toMatchSnapshot()
})
})

View File

@ -3,13 +3,13 @@ import Icon from '../icon'
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
import buttonTypes from './buttonTypes'
import { filterEmpty } from '../_util/props-util'
const props = buttonTypes()
export default {
inheritAttrs: false,
name: 'AButton',
__ANT_BUTTON: true,
props: {
...props,
},
props,
data () {
return {
sizeMap: {
@ -48,13 +48,15 @@ export default {
computed: {
classes () {
const { prefixCls, type, shape, size, hasTwoCNChar,
sLoading, ghost, block, sizeMap } = this
sLoading, ghost, block, sizeMap, icon, $slots } = this
const sizeCls = sizeMap[size] || ''
const children = filterEmpty($slots.default)
return {
[`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
[`${prefixCls}-loading`]: sLoading,
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
@ -106,11 +108,8 @@ export default {
disabled, handleClick,
sLoading, $slots, $attrs, $listeners } = this
const buttonProps = {
props: {
},
attrs: {
...$attrs,
type: htmlType,
disabled,
},
class: classes,
@ -123,7 +122,7 @@ export default {
const iconNode = iconType ? <Icon type={iconType} /> : null
const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
if ('href' in $attrs) {
if ($attrs.href !== undefined) {
return (
<a {...buttonProps} ref='buttonNode'>
{iconNode}{kids}
@ -132,7 +131,7 @@ export default {
} else {
return (
<Wave>
<button {...buttonProps} ref='buttonNode'>
<button {...buttonProps} ref='buttonNode' type={htmlType || 'button'}>
{iconNode}{kids}
</button>
</Wave>