diff --git a/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap index 3f5723e21..c8fbc379c 100644 --- a/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap @@ -686,7 +686,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
-
My Birthday
+
My Birthday
select timeOk
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index b965f9d88..c938503c7 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -86,7 +86,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = ` John Brown 32 New York No. 1 Lake Park -
nice
developer
 +
nice
developer
 Invite 一 John Brown
Delete
More actions @@ -95,7 +95,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = ` Jim Green 42 London No. 1 Lake Park -
loser
 +
loser
 Invite 一 Jim Green
Delete
More actions @@ -104,7 +104,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = ` Joe Black 32 Sidney No. 1 Lake Park -
cool
teacher
 +
cool
teacher
 Invite 一 Joe Black
Delete
More actions @@ -2903,7 +2903,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = ` Brown 32 New York No. 1 Lake Park -
nice
developer
 +
nice
developer
 Action 一 John
Delete @@ -2912,7 +2912,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = ` Green 42 London No. 1 Lake Park -
loser
 +
loser
 Action 一 Jim
Delete @@ -2921,7 +2921,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = ` Black 32 Sidney No. 1 Lake Park -
cool
teacher
 +
cool
teacher
 Action 一 Joe
Delete diff --git a/components/tag/Tag.jsx b/components/tag/Tag.jsx index 6bfa106a7..7781950fc 100644 --- a/components/tag/Tag.jsx +++ b/components/tag/Tag.jsx @@ -12,7 +12,7 @@ export default { props: { prefixCls: PropTypes.string.def('ant-tag'), color: PropTypes.string, - closable: PropTypes.bool, + closable: PropTypes.bool.def(false), visible: PropTypes.bool, afterClose: PropTypes.func, }, @@ -21,22 +21,13 @@ export default { event: 'close.visible', }, data () { - const props = getOptionProps(this) - let state = {} - if ('visible' in props) { - state = { - _visible: props.visible, - _closed: !props.visible, - } + let _visible = true + if (hasProp(this, 'visible')) { + _visible = this.visible } - state = { - _closing: false, - _closed: false, - _visible: true, - ...state, + return { + _visible, } - this.pre_visible = state._visible - return state }, watch: { visible (val) { @@ -45,61 +36,26 @@ export default { }) }, }, - updated () { - this.$nextTick(() => { - const preVisible = this.pre_visible - this.pre_visible = this.$data._visible - if (preVisible && !this.$data._visible) { - this.close() - } else if (!preVisible && this.$data._visible) { - this.show() - } - }) - }, methods: { - handleIconClick (e) { + setVisible (visible, e) { this.$emit('close', e) this.$emit('close.visible', false) - if (e.defaultPrevented || hasProp(this, 'visible')) { + if (e.defaultPrevented) { return } - this.setState({ _visible: false }) - this.$forceUpdate() - }, - close () { - if (this.$data._closing || this.$data._closed) { - return + if (!hasProp(this, 'visible')) { + this.setState({ _visible: visible }) } - const dom = this.$el - dom.style.width = `${dom.getBoundingClientRect().width}px` - // It's Magic Code, don't know why - dom.style.width = `${dom.getBoundingClientRect().width}px` - this.setState({ - _closing: true, - }) }, - show () { - this.setState({ - _closed: false, - }) + handleIconClick (e) { + this.setVisible(false, e) }, - animationEnd (_, existed) { - if (!existed && !this.$data._closed) { - this.setState({ - _closed: true, - _closing: false, - }) - - const afterClose = this.afterClose - if (afterClose) { - afterClose() - } - } else { - this.setState({ - _closed: false, - }) + animationEnd () { + const afterClose = this.afterClose + if (afterClose) { + afterClose() } }, @@ -110,46 +66,51 @@ export default { .test(color) ) }, + getTagStyle () { + const { color } = this.$props + const isPresetColor = this.isPresetColor(color) + return { + backgroundColor: color && !isPresetColor ? color : undefined, + } + }, + + getTagClassName () { + const { prefixCls, color } = this.$props + const isPresetColor = this.isPresetColor(color) + return { + [prefixCls]: true, + [`${prefixCls}-${color}`]: isPresetColor, + [`${prefixCls}-has-color`]: color && !isPresetColor, + } + }, + + renderCloseIcon () { + const { closable } = this.$props + return closable ? : null + }, }, render () { - const { prefixCls, closable, color } = this.$props - const closeIcon = closable ? : '' - const isPresetColor = this.isPresetColor(color) - const cls = { - [`${prefixCls}`]: true, - [`${prefixCls}-${color}`]: isPresetColor, - [`${prefixCls}-has-color`]: (color && !isPresetColor), - [`${prefixCls}-close`]: this.$data._closing, - } - - const tagStyle = { - backgroundColor: (color && !isPresetColor) ? color : null, - } - const tag = + const { prefixCls } = this.$props + const { _visible: visible } = this.$data + const tag = (
{this.$slots.default} - {closeIcon} + {this.renderCloseIcon()}
+ ) const transitionProps = getTransitionProps(`${prefixCls}-zoom`, { - afterLeave: () => this.animationEnd(undefined, false), - afterEnter: () => this.animationEnd(undefined, true), + appear: false, + afterLeave: this.animationEnd, }) return ( - {this.$data._closed ? - : - {tag} - - } + {tag} ) }, diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap index 0626bdb2b..0a66151d0 100644 --- a/components/tag/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap @@ -2,12 +2,12 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
-
Tag 1
-
Link
-
Tag 2
Tag 1
+
Link
+
Tag 2
-
Prevent Default
Prevent Default
@@ -25,40 +25,40 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `

Presets:

-
pink
-
red
-
orange
-
green
-
cyan
-
blue
-
purple
+
pink
+
red
+
orange
+
green
+
cyan
+
blue
+
purple

Custom:

-
#f50
-
#2db7f5
-
#87d068
-
#108ee9
+
#f50
+
#2db7f5
+
#87d068
+
#108ee9
`; exports[`renders ./components/tag/demo/control.md correctly 1`] = `
-
+
Unremovable
-
+
Tag 2
-
+
Tag 3Tag 3Tag 3Tag 3...
-
New Tag
@@ -67,7 +67,7 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = ` exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
-
+
Movies `; +exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = ``; -exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = ``; +exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
`; -exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = ``; +exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = ``; -exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
`; +exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
`; -exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `
`; +exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = ``; -exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
`; +exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
`; diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js index eb68438d9..9fa53db4e 100644 --- a/components/tag/__tests__/index.test.js +++ b/components/tag/__tests__/index.test.js @@ -12,13 +12,13 @@ describe('Tag', () => { }, { sync: false, attachToDocument: true }) await asyncExpect(() => { expect(wrapper.findAll('.anticon-close').length).toBe(1) - expect(wrapper.findAll('.ant-tag').length).toBe(1) + expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1) wrapper.find('.anticon-close').trigger('click') expect(onClose).toBeCalled() }) - // await asyncExpect(() => { - // expect(wrapper.findAll('.ant-tag').length).toBe(0) - // }) + await asyncExpect(() => { + expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(0) + }) }) it('should not be closed when prevent default', async () => { @@ -32,11 +32,11 @@ describe('Tag', () => { }, { sync: false }) await asyncExpect(() => { expect(wrapper.findAll('.anticon-close').length).toBe(1) - expect(wrapper.findAll('.ant-tag').length).toBe(1) + expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1) wrapper.find('.anticon-close').trigger('click') }) await asyncExpect(() => { - expect(wrapper.findAll('.ant-tag').length).toBe(1) + expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1) }, 0) }) describe('visibility', () => { diff --git a/components/tag/demo/index.vue b/components/tag/demo/index.vue index a334db409..4197a48b1 100644 --- a/components/tag/demo/index.vue +++ b/components/tag/demo/index.vue @@ -37,7 +37,7 @@ export default { title: 'Tag', render () { return ( -
+
@@ -56,3 +56,8 @@ export default { }, } + diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index 1c3e56974..7a1b5197c 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -21,7 +21,7 @@ | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| checked | Checked status of Tag | boolean | `false` | +| checked(v-model) | Checked status of Tag | boolean | `false` | ### Tag.CheckableTag Events | Events Name | Description | Arguments | diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index d1d7cd014..db414bd87 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -20,7 +20,7 @@ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| checked | 设置标签的选中状态 | boolean | false | +| checked(v-model) | 设置标签的选中状态 | boolean | false | ### 事件 | 事件名称 | 说明 | 回调参数 |