update wave & tag & tag snapshots

components/_util/wave.jsx

@@ -24,22 +24,18 @@ export default {
       return true
     },
 
-    onClick (node) {
+    onClick (node, waveColor) {
       if (node.className.indexOf('-leave') >= 0) {
         return
       }
       this.removeExtraStyleNode()
       const { insertExtraNode } = this.$props
-      const extraNode = document.createElement('div')
+      this.extraNode = document.createElement('div')
+      const extraNode = this.extraNode
       extraNode.className = 'ant-click-animating-node'
-      const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
+      const attributeName = this.getAttributeName()
       node.removeAttribute(attributeName)
       node.setAttribute(attributeName, 'true')
-      // Get wave color from target
-      const waveColor =
-        getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
-        getComputedStyle(node).getPropertyValue('border-color') ||
-        getComputedStyle(node).getPropertyValue('background-color')
       // Not white or transparnt or grey
       if (waveColor &&
           waveColor !== '#ffffff' &&
@@ -56,19 +52,13 @@ export default {
       if (insertExtraNode) {
         node.appendChild(extraNode)
       }
-      const transitionEnd = () => {
+      TransitionEvents.addEndEventListener(node, this.onTransitionEnd)
-        node.removeAttribute(attributeName)
-        this.removeExtraStyleNode()
-        if (insertExtraNode) {
-          node.removeChild(extraNode)
-        }
-        TransitionEvents.removeEndEventListener(node, transitionEnd)
-      }
-      TransitionEvents.addEndEventListener(node, transitionEnd)
     },
 
     bindAnimationEvent (node) {
-      if (node.getAttribute('disabled') ||
+      if (!node ||
+        !node.getAttribute ||
+        node.getAttribute('disabled') ||
         node.className.indexOf('disabled') >= 0) {
         return
       }
@@ -77,7 +67,13 @@ export default {
         if (e.target.tagName === 'INPUT') {
           return
         }
-        setTimeout(() => this.onClick(node), 0)
+        this.resetEffect(node)
+        // Get wave color from target
+        const waveColor =
+          getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
+          getComputedStyle(node).getPropertyValue('border-color') ||
+          getComputedStyle(node).getPropertyValue('background-color')
+        this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0)
       }
       node.addEventListener('click', onClick, true)
       return {
@@ -86,7 +82,31 @@ export default {
         },
       }
     },
+    getAttributeName () {
+      const { insertExtraNode } = this.$props
+      return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
+    },
 
+    resetEffect (node) {
+      if (!node || node === this.extraNode) {
+        return
+      }
+      const { insertExtraNode } = this.$props
+      const attributeName = this.getAttributeName()
+      node.removeAttribute(attributeName)
+      this.removeExtraStyleNode()
+      if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
+        node.removeChild(this.extraNode)
+      }
+      TransitionEvents.removeEndEventListener(node, this.onTransitionEnd)
+    },
+
+    onTransitionEnd (e) {
+      if (!e || e.animationName !== 'fadeEffect') {
+        return
+      }
+      this.resetEffect(e.target)
+    },
     removeExtraStyleNode () {
       if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
         document.body.removeChild(this.styleForPesudo)

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

@@ -685,7 +685,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
         </div>
         <div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
           <div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
-            <div class="ant-tag ant-tag-blue">My Birthday</div>
+            <div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
           </div>
           <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>
         </div>

components/locale-provider/index.jsx

@@ -66,7 +66,7 @@ export default {
     changeConfirmLocale()
   },
   render () {
-    return this.$slots.default[0]
+    return this.$slots.default ? this.$slots.default[0] : null
   },
 }
 

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

@@ -67,7 +67,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
                     <!----><a href="javascript:;">John Brown</a></td>
                   <td>32</td>
                   <td>New York No. 1 Lake Park</td>
-                  <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>
+                  <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>
                   <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">
       More actions <i class="anticon anticon-down"></i></a></span></td>
                 </tr>
@@ -76,7 +76,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
                     <!----><a href="javascript:;">Jim Green</a></td>
                   <td>42</td>
                   <td>London No. 1 Lake Park</td>
-                  <td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
+                  <td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
                   <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">
       More actions <i class="anticon anticon-down"></i></a></span></td>
                 </tr>
@@ -85,7 +85,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
                     <!----><a href="javascript:;">Joe Black</a></td>
                   <td>32</td>
                   <td>Sidney No. 1 Lake Park</td>
-                  <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>
+                  <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>
                   <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">
       More actions <i class="anticon anticon-down"></i></a></span></td>
                 </tr>
@@ -2517,7 +2517,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
                   <td>Brown</td>
                   <td>32</td>
                   <td>New York No. 1 Lake Park</td>
-                  <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>
+                  <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>
                   <td><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
                 </tr>
                 <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`] = `
                   <td>Green</td>
                   <td>42</td>
                   <td>London No. 1 Lake Park</td>
-                  <td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
+                  <td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
                   <td><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
                 </tr>
                 <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`] = `
                   <td>Black</td>
                   <td>32</td>
                   <td>Sidney No. 1 Lake Park</td>
-                  <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>
+                  <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>
                   <td><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
                 </tr>
               </tbody>

components/tag/Tag.jsx

@@ -14,6 +14,7 @@ export default {
     color: PropTypes.string,
     closable: PropTypes.bool,
     visible: PropTypes.bool,
+    afterClose: PropTypes.func,
   },
   model: {
     prop: 'visible',
@@ -46,12 +47,13 @@ export default {
   },
   updated () {
     this.$nextTick(() => {
-      if (this.pre_visible && !this.$data._visible) {
+      const preVisible = this.pre_visible
+      this.pre_visible = this.$data._visible
+      if (preVisible && !this.$data._visible) {
         this.close()
-      } else if (!this.pre_visible && this.$data._visible) {
+      } else if (!preVisible && this.$data._visible) {
         this.show()
       }
-      this.pre_visible = this.$data._visible
     })
   },
   methods: {
@@ -62,6 +64,7 @@ export default {
         return
       }
       this.setState({ _visible: false })
+      this.$forceUpdate()
     },
     close  () {
       if (this.$data._closing || this.$data._closed) {
@@ -111,7 +114,7 @@ export default {
 
   render () {
     const { prefixCls, closable, color } = this.$props
-    const closeIcon = closable ? <Icon type='cross' onClick={this.handleIconClick} /> : ''
+    const closeIcon = closable ? <Icon type='close' onClick={this.handleIconClick} /> : ''
     const isPresetColor = this.isPresetColor(color)
     const cls = {
       [`${prefixCls}`]: true,
@@ -123,9 +126,10 @@ export default {
     const tagStyle = {
       backgroundColor: (color && !isPresetColor) ? color : null,
     }
-    const tag = this.$data._closed ? <span /> : (
+    const tag =
       <div
         v-show={!this.$data._closing}
+        data-show={!this.$data._closing}
         {...{ on: omit(this.$listeners, ['close']) }}
         class={cls}
         style={tagStyle}
@@ -133,18 +137,19 @@ export default {
         {this.$slots.default}
         {closeIcon}
       </div>
-    )
+    const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
-    const transitionProps = this.$data._closed ? {} : getTransitionProps(`${prefixCls}-zoom`, {
       afterLeave: () => this.animationEnd(undefined, false),
       afterEnter: () => this.animationEnd(undefined, true),
     })
     return (
       <Wave>
-        <transition
+        {this.$data._closed ? <span/>
+          : <transition
             {...transitionProps}
           >
             {tag}
           </transition>
+        }
       </Wave>
     )
   },

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

@@ -2,10 +2,10 @@
 
 exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
 <div>
-  <div class="ant-tag ant-tag-zoom-enter">Tag 1</div>
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 1</div>
-  <div class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
-  <div class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-cross"></i></div>
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-close"></i></div>
-  <div class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-cross"></i></div>
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-close"></i></div>
 </div>
 `;
 
@@ -21,40 +21,48 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
 <div>
   <h4 style="margin-bottom: 16px;">Presets:</h4>
   <div>
-    <div class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
+    <div data-show="true" class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
-    <div class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
+    <div data-show="true" class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
-    <div class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
+    <div data-show="true" class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
-    <div class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
+    <div data-show="true" class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
-    <div class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
+    <div data-show="true" class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
-    <div class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
+    <div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
-    <div class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</div>
+    <div data-show="true" class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</div>
   </div>
   <h4>Custom:</h4>
   <div>
-    <div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
+    <div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
-    <div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
+    <div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
-    <div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
+    <div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
-    <div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</div>
+    <div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</div>
   </div>
 </div>
 `;
 
 exports[`renders ./components/tag/demo/control.md correctly 1`] = `
 <div>
-  <div class="ant-tag ant-tag-zoom-enter">
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">
     Unremovable
   </div>
-  <div class="ant-tag ant-tag-zoom-enter">
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">
     Tag 2
-    <i class="anticon anticon-cross"></i></div>
+    <i class="anticon anticon-close"></i></div>
-  <div class="ant-tag ant-tag-zoom-enter">
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">
     Tag 3Tag 3Tag 3Tag 3...
-    <i class="anticon anticon-cross"></i></div>
+    <i class="anticon anticon-close"></i></div>
-  <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
+  <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
   </div>
 </div>
 `;
 
+exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
+<div>
+  <div data-show="true" class="ant-tag ant-tag-zoom-enter">
+    Movies
+    <i class="anticon anticon-close"></i></div> <br> <button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Toggle</span></button>
+</div>
+`;
+
 exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
 <div><strong>Categories:</strong>
   <div class="ant-tag ant-tag-checkable">

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span></span>`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span></span>`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span></span>`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<div data-show="true" class="ant-tag"></div>`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<div data-show="true" class="ant-tag"></div>`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div data-show="true" class="ant-tag"></div>`;

components/tag/__tests__/index.test.js

@@ -3,30 +3,25 @@ import { asyncExpect } from '@/tests/utils'
 import Tag from '..'
 
 describe('Tag', () => {
-  beforeAll(() => {
+  it('should be closable', async () => {
-    jest.useFakeTimers()
-  })
-
-  afterAll(() => {
-    jest.useRealTimers()
-  })
-
-  it('should be closable', () => {
     const onClose = jest.fn()
     const wrapper = mount({
       render () {
         return <Tag closable onClose={onClose} />
       },
-    })
+    }, { sync: false, attachToDocument: true })
-    expect(wrapper.findAll('.anticon-cross').length).toBe(1)
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.anticon-close').length).toBe(1)
       expect(wrapper.findAll('.ant-tag').length).toBe(1)
-    wrapper.find('.anticon-cross').trigger('click')
+      wrapper.find('.anticon-close').trigger('click')
       expect(onClose).toBeCalled()
-    jest.runAllTimers()
+    })
-    expect(wrapper.findAll('.ant-tag').length).toBe(0)
+    // await asyncExpect(() => {
+    //   expect(wrapper.findAll('.ant-tag').length).toBe(0)
+    // })
   })
 
-  it('should not be closed when prevent default', () => {
+  it('should not be closed when prevent default', async () => {
     const onClose = (e) => {
       e.preventDefault()
     }
@@ -34,11 +29,43 @@ describe('Tag', () => {
       render () {
         return <Tag closable onClose={onClose} />
       },
-    })
+    }, { sync: false })
-    expect(wrapper.findAll('.anticon-cross').length).toBe(1)
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.anticon-close').length).toBe(1)
       expect(wrapper.findAll('.ant-tag').length).toBe(1)
-    wrapper.find('.anticon-cross').trigger('click')
+      wrapper.find('.anticon-close').trigger('click')
-    jest.runAllTimers()
+    })
+    await asyncExpect(() => {
       expect(wrapper.findAll('.ant-tag').length).toBe(1)
+    }, 0)
+  })
+  describe('visibility', () => {
+    it('can be controlled by visible with visible as initial value', async () => {
+      const wrapper = mount(Tag, { propsData: { visible: true }, sync: false })
+      await asyncExpect(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+        wrapper.setProps({ visible: false })
+      })
+      await asyncExpect(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+        wrapper.setProps({ visible: true })
+      })
+      await asyncExpect(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+      })
+    })
+
+    it('can be controlled by visible with hidden as initial value', async () => {
+      const wrapper = mount(Tag, { propsData: { visible: false }, sync: false })
+      await asyncExpect(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+        wrapper.setProps({ visible: true })
+      })
+      await asyncExpect(() => {
+        expect(wrapper.html()).toMatchSnapshot()
+        wrapper.setProps({ visible: false })
+      })
+      await asyncExpect(() => { expect(wrapper.html()).toMatchSnapshot() })
+    })
   })
 })

components/tag/demo/control.md

@@ -14,11 +14,11 @@ It's based on `afterClose` event, which will be triggered while the close animat
   <div>
     <template v-for="(tag, index) in tags">
       <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
-        <a-tag :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
+        <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
           {{`${tag.slice(0, 20)}...`}}
         </a-tag>
       </a-tooltip>
-      <a-tag v-else :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
+      <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
         {{tag}}
       </a-tag>
     </template>

components/tag/demo/controlled.md

@@ -13,7 +13,7 @@ By using the `visible` prop, you can control the close state of Tag.
   <div>
     <a-tag
       closable
-      :visible="visible"
+      v-model="visible"
     >
       Movies
     </a-tag>

components/tag/index.en-US.md

@@ -9,7 +9,7 @@
 | afterClose | Callback executed when close animation is completed | () => void | - |
 | closable | Whether the Tag can be closed | boolean | `false` |
 | color | Color of the Tag | string | - |
-| visible | Whether the Tag is closed or not | boolean | `true` |
+| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
 
 
 ### Tag Events

components/tag/index.zh-CN.md

@@ -9,7 +9,7 @@
 | afterClose | 关闭动画完成后的回调 | () => void | - |
 | closable | 标签是否可以关闭 | boolean | false |
 | color | 标签色 | string | - |
-| visible | 是否显示标签 | boolean | `true` |
+| visible(v-model) | 是否显示标签 | boolean | `true` |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |