Skip to content

Commit df5db65

Browse files
tangjinzhoutangjinzhou
committed
update wave & tag & tag snapshots
1 parent 12918ae commit df5db65

File tree

12 files changed

+160
-87
lines changed

12 files changed

+160
-87
lines changed

‎components/_util/wave.jsx

+40-20
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,18 @@ export default {
2424
return true
2525
},
2626

27-
onClick (node) {
27+
onClick (node, waveColor) {
2828
if (node.className.indexOf('-leave') >= 0) {
2929
return
3030
}
3131
this.removeExtraStyleNode()
3232
const { insertExtraNode } = this.$props
33-
const extraNode = document.createElement('div')
33+
this.extraNode = document.createElement('div')
34+
const extraNode = this.extraNode
3435
extraNode.className = 'ant-click-animating-node'
35-
const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
36+
const attributeName = this.getAttributeName()
3637
node.removeAttribute(attributeName)
3738
node.setAttribute(attributeName, 'true')
38-
// Get wave color from target
39-
const waveColor =
40-
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
41-
getComputedStyle(node).getPropertyValue('border-color') ||
42-
getComputedStyle(node).getPropertyValue('background-color')
4339
// Not white or transparnt or grey
4440
if (waveColor &&
4541
waveColor !== '#ffffff' &&
@@ -56,28 +52,28 @@ export default {
5652
if (insertExtraNode) {
5753
node.appendChild(extraNode)
5854
}
59-
const transitionEnd = () => {
60-
node.removeAttribute(attributeName)
61-
this.removeExtraStyleNode()
62-
if (insertExtraNode) {
63-
node.removeChild(extraNode)
64-
}
65-
TransitionEvents.removeEndEventListener(node, transitionEnd)
66-
}
67-
TransitionEvents.addEndEventListener(node, transitionEnd)
55+
TransitionEvents.addEndEventListener(node, this.onTransitionEnd)
6856
},
6957

7058
bindAnimationEvent (node) {
71-
if (node.getAttribute('disabled') ||
72-
node.className.indexOf('disabled') >= 0) {
59+
if (!node ||
60+
!node.getAttribute ||
61+
node.getAttribute('disabled') ||
62+
node.className.indexOf('disabled') >= 0) {
7363
return
7464
}
7565
const onClick = (e) => {
7666
// Fix radio button click twice
7767
if (e.target.tagName === 'INPUT') {
7868
return
7969
}
80-
setTimeout(() => this.onClick(node), 0)
70+
this.resetEffect(node)
71+
// Get wave color from target
72+
const waveColor =
73+
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
74+
getComputedStyle(node).getPropertyValue('border-color') ||
75+
getComputedStyle(node).getPropertyValue('background-color')
76+
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0)
8177
}
8278
node.addEventListener('click', onClick, true)
8379
return {
@@ -86,7 +82,31 @@ export default {
8682
},
8783
}
8884
},
85+
getAttributeName () {
86+
const { insertExtraNode } = this.$props
87+
return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
88+
},
8989

90+
resetEffect (node) {
91+
if (!node || node === this.extraNode) {
92+
return
93+
}
94+
const { insertExtraNode } = this.$props
95+
const attributeName = this.getAttributeName()
96+
node.removeAttribute(attributeName)
97+
this.removeExtraStyleNode()
98+
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
99+
node.removeChild(this.extraNode)
100+
}
101+
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd)
102+
},
103+
104+
onTransitionEnd (e) {
105+
if (!e || e.animationName !== 'fadeEffect') {
106+
return
107+
}
108+
this.resetEffect(e.target)
109+
},
90110
removeExtraStyleNode () {
91111
if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
92112
document.body.removeChild(this.styleForPesudo)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -685,7 +685,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
685685
</div>
686686
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
687687
<div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
688-
<div class="ant-tag ant-tag-blue">My Birthday</div>
688+
<div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
689689
</div>
690690
<div class="ant-calendar-footer-btn"><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></div>
691691
</div>

‎components/locale-provider/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default {
6666
changeConfirmLocale()
6767
},
6868
render () {
69-
return this.$slots.default[0]
69+
return this.$slots.default ? this.$slots.default[0] : null
7070
},
7171
}
7272

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
6767
<!----><a href="javascript:;">John Brown</a></td>
6868
<td>32</td>
6969
<td>New York No. 1 Lake Park</td>
70-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
70+
<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>
7171
<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">
7272
More actions <i class="anticon anticon-down"></i></a></span></td>
7373
</tr>
@@ -76,7 +76,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
7676
<!----><a href="javascript:;">Jim Green</a></td>
7777
<td>42</td>
7878
<td>London No. 1 Lake Park</td>
79-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
79+
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
8080
<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">
8181
More actions <i class="anticon anticon-down"></i></a></span></td>
8282
</tr>
@@ -85,7 +85,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
8585
<!----><a href="javascript:;">Joe Black</a></td>
8686
<td>32</td>
8787
<td>Sidney No. 1 Lake Park</td>
88-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
88+
<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>
8989
<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">
9090
More actions <i class="anticon anticon-down"></i></a></span></td>
9191
</tr>
@@ -2517,7 +2517,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
25172517
<td>Brown</td>
25182518
<td>32</td>
25192519
<td>New York No. 1 Lake Park</td>
2520-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
2520+
<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>
25212521
<td><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
25222522
</tr>
25232523
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
@@ -2526,7 +2526,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
25262526
<td>Green</td>
25272527
<td>42</td>
25282528
<td>London No. 1 Lake Park</td>
2529-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
2529+
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
25302530
<td><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
25312531
</tr>
25322532
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
@@ -2535,7 +2535,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
25352535
<td>Black</td>
25362536
<td>32</td>
25372537
<td>Sidney No. 1 Lake Park</td>
2538-
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
2538+
<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>
25392539
<td><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
25402540
</tr>
25412541
</tbody>

‎components/tag/Tag.jsx

+17-12
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
color: PropTypes.string,
1515
closable: PropTypes.bool,
1616
visible: PropTypes.bool,
17+
afterClose: PropTypes.func,
1718
},
1819
model: {
1920
prop: 'visible',
@@ -46,12 +47,13 @@ export default {
4647
},
4748
updated () {
4849
this.$nextTick(() => {
49-
if (this.pre_visible && !this.$data._visible) {
50+
const preVisible = this.pre_visible
51+
this.pre_visible = this.$data._visible
52+
if (preVisible && !this.$data._visible) {
5053
this.close()
51-
} else if (!this.pre_visible && this.$data._visible) {
54+
} else if (!preVisible && this.$data._visible) {
5255
this.show()
5356
}
54-
this.pre_visible = this.$data._visible
5557
})
5658
},
5759
methods: {
@@ -62,6 +64,7 @@ export default {
6264
return
6365
}
6466
this.setState({ _visible: false })
67+
this.$forceUpdate()
6568
},
6669
close () {
6770
if (this.$data._closing || this.$data._closed) {
@@ -111,7 +114,7 @@ export default {
111114

112115
render () {
113116
const { prefixCls, closable, color } = this.$props
114-
const closeIcon = closable ? <Icon type='cross' onClick={this.handleIconClick} /> : ''
117+
const closeIcon = closable ? <Icon type='close' onClick={this.handleIconClick} /> : ''
115118
const isPresetColor = this.isPresetColor(color)
116119
const cls = {
117120
[`${prefixCls}`]: true,
@@ -123,28 +126,30 @@ export default {
123126
const tagStyle = {
124127
backgroundColor: (color && !isPresetColor) ? color : null,
125128
}
126-
const tag = this.$data._closed ? <span /> : (
129+
const tag =
127130
<div
128131
v-show={!this.$data._closing}
132+
data-show={!this.$data._closing}
129133
{...{ on: omit(this.$listeners, ['close']) }}
130134
class={cls}
131135
style={tagStyle}
132136
>
133137
{this.$slots.default}
134138
{closeIcon}
135139
</div>
136-
)
137-
const transitionProps = this.$data._closed ? {} : getTransitionProps(`${prefixCls}-zoom`, {
140+
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
138141
afterLeave: () => this.animationEnd(undefined, false),
139142
afterEnter: () => this.animationEnd(undefined, true),
140143
})
141144
return (
142145
<Wave>
143-
<transition
144-
{...transitionProps}
145-
>
146-
{tag}
147-
</transition>
146+
{this.$data._closed ? <span/>
147+
: <transition
148+
{...transitionProps}
149+
>
150+
{tag}
151+
</transition>
152+
}
148153
</Wave>
149154
)
150155
},

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

+29-21
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
44
<div>
5-
<div class="ant-tag ant-tag-zoom-enter">Tag 1</div>
6-
<div class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
7-
<div class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-cross"></i></div>
8-
<div class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-cross"></i></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"></i></div>
8+
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-close"></i></div>
99
</div>
1010
`;
1111

@@ -21,40 +21,48 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
2121
<div>
2222
<h4 style="margin-bottom: 16px;">Presets:</h4>
2323
<div>
24-
<div class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
25-
<div class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
26-
<div class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
27-
<div class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
28-
<div class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
29-
<div class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
30-
<div class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</div>
24+
<div data-show="true" class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
25+
<div data-show="true" class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
26+
<div data-show="true" class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
27+
<div data-show="true" class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
28+
<div data-show="true" class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
29+
<div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
30+
<div data-show="true" class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</div>
3131
</div>
3232
<h4>Custom:</h4>
3333
<div>
34-
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
35-
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
36-
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
37-
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</div>
34+
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
35+
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
36+
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
37+
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</div>
3838
</div>
3939
</div>
4040
`;
4141

4242
exports[`renders ./components/tag/demo/control.md correctly 1`] = `
4343
<div>
44-
<div class="ant-tag ant-tag-zoom-enter">
44+
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
4545
Unremovable
4646
</div>
47-
<div class="ant-tag ant-tag-zoom-enter">
47+
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
4848
Tag 2
49-
<i class="anticon anticon-cross"></i></div>
50-
<div class="ant-tag ant-tag-zoom-enter">
49+
<i class="anticon anticon-close"></i></div>
50+
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
5151
Tag 3Tag 3Tag 3Tag 3...
52-
<i class="anticon anticon-cross"></i></div>
53-
<div class="ant-tag ant-tag-zoom-enter" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"></i> New Tag
52+
<i class="anticon anticon-close"></i></div>
53+
<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"></i> New Tag
5454
</div>
5555
</div>
5656
`;
5757

58+
exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
59+
<div>
60+
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
61+
Movies
62+
<i class="anticon anticon-close"></i></div> <br> <button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Toggle</span></button>
63+
</div>
64+
`;
65+
5866
exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
5967
<div><strong>Categories:</strong>
6068
<div class="ant-tag ant-tag-checkable">

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span></span>`;
4+
5+
exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span></span>`;
6+
7+
exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span></span>`;
8+
9+
exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<div data-show="true" class="ant-tag"></div>`;
10+
11+
exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<div data-show="true" class="ant-tag"></div>`;
12+
13+
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div data-show="true" class="ant-tag"></div>`;

0 commit comments

Comments
 (0)