Skip to content

Commit ac88e49

Browse files
tangjinzhoutangjinzhou
committed
refactor: tag
1 parent 98eb6b2 commit ac88e49

File tree

9 files changed

+96
-130
lines changed

9 files changed

+96
-130
lines changed

‎components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -686,7 +686,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
686686
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
687687
<div class="ant-calendar-footer-btn">
688688
<div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
689-
<div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
689+
<div class="ant-tag ant-tag-blue">My Birthday</div>
690690
</div><a role="button" class="ant-calendar-time-picker-btn ant-calendar-time-picker-btn-disabled">select time</a><a role="button" class="ant-calendar-ok-btn ant-calendar-ok-btn-disabled">Ok</a>
691691
</div>
692692
</div>

‎components/table/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
8686
<!----><a href="javascript:;">John Brown</a></td>
8787
<td>32</td>
8888
<td>New York No. 1 Lake Park</td>
89-
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
89+
<td><span><div class="ant-tag ant-tag-blue">nice</div><div class="ant-tag ant-tag-blue">developer</div></span></td>
9090
<td><span><a href="javascript:;">Invite 一 John Brown</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
9191
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
9292
</tr>
@@ -95,7 +95,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
9595
<!----><a href="javascript:;">Jim Green</a></td>
9696
<td>42</td>
9797
<td>London No. 1 Lake Park</td>
98-
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
98+
<td><span><div class="ant-tag ant-tag-blue">loser</div></span></td>
9999
<td><span><a href="javascript:;">Invite 一 Jim Green</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
100100
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
101101
</tr>
@@ -104,7 +104,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
104104
<!----><a href="javascript:;">Joe Black</a></td>
105105
<td>32</td>
106106
<td>Sidney No. 1 Lake Park</td>
107-
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
107+
<td><span><div class="ant-tag ant-tag-blue">cool</div><div class="ant-tag ant-tag-blue">teacher</div></span></td>
108108
<td><span><a href="javascript:;">Invite 一 Joe Black</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
109109
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
110110
</tr>
@@ -2903,7 +2903,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
29032903
<td class="">Brown</td>
29042904
<td class="">32</td>
29052905
<td class="">New York No. 1 Lake Park</td>
2906-
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
2906+
<td class=""><span><div class="ant-tag ant-tag-blue">nice</div><div class="ant-tag ant-tag-blue">developer</div></span></td>
29072907
<td class=""><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
29082908
</tr>
29092909
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
@@ -2912,7 +2912,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
29122912
<td class="">Green</td>
29132913
<td class="">42</td>
29142914
<td class="">London No. 1 Lake Park</td>
2915-
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
2915+
<td class=""><span><div class="ant-tag ant-tag-blue">loser</div></span></td>
29162916
<td class=""><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
29172917
</tr>
29182918
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
@@ -2921,7 +2921,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
29212921
<td class="">Black</td>
29222922
<td class="">32</td>
29232923
<td class="">Sidney No. 1 Lake Park</td>
2924-
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
2924+
<td class=""><span><div class="ant-tag ant-tag-blue">cool</div><div class="ant-tag ant-tag-blue">teacher</div></span></td>
29252925
<td class=""><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
29262926
</tr>
29272927
</tbody>

‎components/tag/Tag.jsx

Lines changed: 49 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
props: {
1313
prefixCls: PropTypes.string.def('ant-tag'),
1414
color: PropTypes.string,
15-
closable: PropTypes.bool,
15+
closable: PropTypes.bool.def(false),
1616
visible: PropTypes.bool,
1717
afterClose: PropTypes.func,
1818
},
@@ -21,22 +21,13 @@ export default {
2121
event: 'close.visible',
2222
},
2323
data () {
24-
const props = getOptionProps(this)
25-
let state = {}
26-
if ('visible' in props) {
27-
state = {
28-
_visible: props.visible,
29-
_closed: !props.visible,
30-
}
24+
let _visible = true
25+
if (hasProp(this, 'visible')) {
26+
_visible = this.visible
3127
}
32-
state = {
33-
_closing: false,
34-
_closed: false,
35-
_visible: true,
36-
...state,
28+
return {
29+
_visible,
3730
}
38-
this.pre_visible = state._visible
39-
return state
4031
},
4132
watch: {
4233
visible (val) {
@@ -45,61 +36,26 @@ export default {
4536
})
4637
},
4738
},
48-
updated () {
49-
this.$nextTick(() => {
50-
const preVisible = this.pre_visible
51-
this.pre_visible = this.$data._visible
52-
if (preVisible && !this.$data._visible) {
53-
this.close()
54-
} else if (!preVisible && this.$data._visible) {
55-
this.show()
56-
}
57-
})
58-
},
5939
methods: {
60-
handleIconClick (e) {
40+
setVisible (visible, e) {
6141
this.$emit('close', e)
6242
this.$emit('close.visible', false)
63-
if (e.defaultPrevented || hasProp(this, 'visible')) {
43+
if (e.defaultPrevented) {
6444
return
6545
}
66-
this.setState({ _visible: false })
67-
this.$forceUpdate()
68-
},
69-
close () {
70-
if (this.$data._closing || this.$data._closed) {
71-
return
46+
if (!hasProp(this, 'visible')) {
47+
this.setState({ _visible: visible })
7248
}
73-
const dom = this.$el
74-
dom.style.width = `${dom.getBoundingClientRect().width}px`
75-
// It's Magic Code, don't know why
76-
dom.style.width = `${dom.getBoundingClientRect().width}px`
77-
this.setState({
78-
_closing: true,
79-
})
8049
},
8150

82-
show () {
83-
this.setState({
84-
_closed: false,
85-
})
51+
handleIconClick (e) {
52+
this.setVisible(false, e)
8653
},
8754

88-
animationEnd (_, existed) {
89-
if (!existed && !this.$data._closed) {
90-
this.setState({
91-
_closed: true,
92-
_closing: false,
93-
})
94-
95-
const afterClose = this.afterClose
96-
if (afterClose) {
97-
afterClose()
98-
}
99-
} else {
100-
this.setState({
101-
_closed: false,
102-
})
55+
animationEnd () {
56+
const afterClose = this.afterClose
57+
if (afterClose) {
58+
afterClose()
10359
}
10460
},
10561

@@ -110,46 +66,51 @@ export default {
11066
.test(color)
11167
)
11268
},
69+
getTagStyle () {
70+
const { color } = this.$props
71+
const isPresetColor = this.isPresetColor(color)
72+
return {
73+
backgroundColor: color && !isPresetColor ? color : undefined,
74+
}
75+
},
76+
77+
getTagClassName () {
78+
const { prefixCls, color } = this.$props
79+
const isPresetColor = this.isPresetColor(color)
80+
return {
81+
[prefixCls]: true,
82+
[`${prefixCls}-${color}`]: isPresetColor,
83+
[`${prefixCls}-has-color`]: color && !isPresetColor,
84+
}
85+
},
86+
87+
renderCloseIcon () {
88+
const { closable } = this.$props
89+
return closable ? <Icon type='close' onClick={this.handleIconClick} /> : null
90+
},
11391
},
11492

11593
render () {
116-
const { prefixCls, closable, color } = this.$props
117-
const closeIcon = closable ? <Icon type='close' onClick={this.handleIconClick} /> : ''
118-
const isPresetColor = this.isPresetColor(color)
119-
const cls = {
120-
[`${prefixCls}`]: true,
121-
[`${prefixCls}-${color}`]: isPresetColor,
122-
[`${prefixCls}-has-color`]: (color && !isPresetColor),
123-
[`${prefixCls}-close`]: this.$data._closing,
124-
}
125-
126-
const tagStyle = {
127-
backgroundColor: (color && !isPresetColor) ? color : null,
128-
}
129-
const tag =
94+
const { prefixCls } = this.$props
95+
const { _visible: visible } = this.$data
96+
const tag = (
13097
<div
131-
v-show={!this.$data._closing}
132-
data-show={!this.$data._closing}
98+
v-show={visible}
13399
{...{ on: omit(this.$listeners, ['close']) }}
134-
class={cls}
135-
style={tagStyle}
100+
class={this.getTagClassName()}
101+
style={this.getTagStyle()}
136102
>
137103
{this.$slots.default}
138-
{closeIcon}
104+
{this.renderCloseIcon()}
139105
</div>
106+
)
140107
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
141-
afterLeave: () => this.animationEnd(undefined, false),
142-
afterEnter: () => this.animationEnd(undefined, true),
108+
appear: false,
109+
afterLeave: this.animationEnd,
143110
})
144111
return (
145112
<Wave>
146-
{this.$data._closed ? <span/>
147-
: <transition
148-
{...transitionProps}
149-
>
150-
{tag}
151-
</transition>
152-
}
113+
<transition {...transitionProps}>{tag}</transition>
153114
</Wave>
154115
)
155116
},

‎components/tag/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
44
<div>
5-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 1</div>
6-
<div data-show="true" class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
7-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
5+
<div class="ant-tag">Tag 1</div>
6+
<div class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
7+
<div class="ant-tag">Tag 2<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
88
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
99
</svg></i></div>
10-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
10+
<div class="ant-tag">Prevent Default<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
1111
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
1212
</svg></i></div>
1313
</div>
@@ -25,40 +25,40 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
2525
<div>
2626
<h4 style="margin-bottom: 16px;">Presets:</h4>
2727
<div>
28-
<div data-show="true" class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
29-
<div data-show="true" class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
30-
<div data-show="true" class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
31-
<div data-show="true" class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
32-
<div data-show="true" class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
33-
<div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
34-
<div data-show="true" class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</div>
28+
<div class="ant-tag ant-tag-pink">pink</div>
29+
<div class="ant-tag ant-tag-red">red</div>
30+
<div class="ant-tag ant-tag-orange">orange</div>
31+
<div class="ant-tag ant-tag-green">green</div>
32+
<div class="ant-tag ant-tag-cyan">cyan</div>
33+
<div class="ant-tag ant-tag-blue">blue</div>
34+
<div class="ant-tag ant-tag-purple">purple</div>
3535
</div>
3636
<h4>Custom:</h4>
3737
<div>
38-
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
39-
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
40-
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
41-
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</div>
38+
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">#f50</div>
39+
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
40+
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(135, 208, 104);">#87d068</div>
41+
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(16, 142, 233);">#108ee9</div>
4242
</div>
4343
</div>
4444
`;
4545

4646
exports[`renders ./components/tag/demo/control.md correctly 1`] = `
4747
<div>
48-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
48+
<div class="ant-tag">
4949
Unremovable
5050
</div>
51-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
51+
<div class="ant-tag">
5252
Tag 2
5353
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
5454
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
5555
</svg></i></div>
56-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
56+
<div class="ant-tag">
5757
Tag 3Tag 3Tag 3Tag 3...
5858
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
5959
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
6060
</svg></i></div>
61-
<div data-show="true" class="ant-tag ant-tag-zoom-enter" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
61+
<div class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
6262
<path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
6363
</svg></i> New Tag
6464
</div>
@@ -67,7 +67,7 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
6767

6868
exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
6969
<div>
70-
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
70+
<div class="ant-tag">
7171
Movies
7272
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
7373
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>

0 commit comments

Comments
 (0)