update to antd3.8.3 (vueComponent#159)

* refactor: align

* feat:  update align to 2.4.3

* feat: update trigger 2.5.4

* feat: update tooltip 3.7.2

* fix: align

* feat: update vc-calendar to 9.6.2

* feat: update vc-checkbox to 2.1.5

* feat: update vc-dialog to 7.1.8

* feat: update vc-from to 2.2.1

* feat: update vc-notification to 3.1.1

* test: update snapshots

* feat: update vc-tree to 1.12.6

* feat: update vc-table to 6.2.8

* feat: update vc-upload to 2.5.1

* feat: update vc-input-number to 4.0.12

* feat: update vc-tabs to 9.2.6

* refactor: vc-menu

* refactor: update vc-menu to 7.0.5

* style: remove unused

* feat: update pagination to 1.16.5

* feat: add vc-progress 2.2.5 tag

* feat: add vc-rate 2.4.0 tag

* feat: update vc-slider to 8.6.1

* fix: tooltip error

* style: delete conosle

* feat: update vc-steps to 3.1.1

* add vc-switch tag 1.6.0

* feat: update upload to 2.5.1

* fix: update vc-menu

* fix: update store

* fix: add ref dir

* fix: trigger mock shouldComponentUpdate

* fix: update vc-select

* revert: trigger lazyrenderbox

* fix: update vc-select

* fix: update vc-select

* fix: update vc-select

* fix: update vc-menu

* fix: update vc-slick ref

* update style to 3.8.2

* test: update snapshots

* update vc-select

* update util & affix

* feat: add drawer

* fix: support title add slot mode

* test: update affix test

* update alert

* update anchor

* update snapshots

* fix: doc and vc-drawer

* update select & auto-complete

* update back-top & grid

* feractor: avatar

* test: add drawer test

* update badge

* update button

* update card

* update divider

* feat: update vc-tabs to 9.3.6 and tabs

* add afterEnter callback

* update form

* fix: update drawer

* test: update snapshots

* update modal & notification

* test: update snapshots

* update message

* update locale-provider

* update dropdown

* update layout popconfirm popover

* update time-picker

* update menu

* update date-picker

* docs: update input docs

* update input

* update snapshots

* update table

* update test snapshots

* feat: update progress

* update checkbox

* feat: update spin

* update radio

* docs: slider steps timeline

* update list

* update transfer

* update collapse

* update cascader

* update upload

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 **/*.spec.*
+**/style/

components/_util/BaseMixin.js

@@ -1,7 +1,26 @@
+import { getOptionProps } from './props-util'
+
 export default {
+  directives: {
+    ref: {
+      bind: function (el, binding, vnode) {
+        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
+      },
+      update: function (el, binding, vnode) {
+        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
+      },
+      unbind: function (el, binding, vnode) {
+        binding.value(null)
+      },
+    },
+  },
   methods: {
     setState (state, callback) {
-      Object.assign(this.$data, typeof state === 'function' ? state(this.$data) : state)
+      const newState = typeof state === 'function' ? state(this.$data) : state
+      if (this.getDerivedStateFromProps) {
+        Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), this.$data, true) || {})
+      }
+      Object.assign(this.$data, newState)
       this.$nextTick(() => {
         callback && callback()
       })

components/_util/antRefDirective.js

@@ -2,10 +2,10 @@ export default {
   install: (Vue, options) => {
     Vue.directive('ant-ref', {
       bind: function (el, binding, vnode) {
-        binding.value(vnode)
+        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
       },
       update: function (el, binding, vnode) {
-        binding.value(vnode)
+        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
       },
       unbind: function (el, binding, vnode) {
         binding.value(null)

components/_util/getTransitionProps.js

@@ -1,7 +1,7 @@
 import animate from './css-animation'
 const noop = () => {}
 const getTransitionProps = (transitionName, opt = {}) => {
-  const { beforeEnter, enter, leave, afterLeave, appear = true, tag } = opt
+  const { beforeEnter, enter, afterEnter, leave, afterLeave, appear = true, tag } = opt
   const transitionProps = {
     props: {
       appear,
@@ -12,6 +12,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
       enter: enter || ((el, done) => {
         animate(el, `${transitionName}-enter`, done)
       }),
+      afterEnter: afterEnter || noop,
       leave: leave || ((el, done) => {
         animate(el, `${transitionName}-leave`, done)
       }),

components/_util/isNumeric.js

@@ -0,0 +1,4 @@
+const isNumeric = (value) => {
+  return !isNaN(parseFloat(value)) && isFinite(value)
+}
+export default isNumeric

components/_util/openAnimation.js

@@ -1,7 +1,5 @@
 import cssAnimation from './css-animation'
-import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame'
-
-const reqAnimFrame = getRequestAnimationFrame()
+import raf from 'raf'
 
 function animate (node, show, done) {
   let height
@@ -19,16 +17,16 @@ function animate (node, show, done) {
     },
     active () {
       if (requestAnimationFrameId) {
-        cancelRequestAnimationFrame(requestAnimationFrameId)
+        raf.cancel(requestAnimationFrameId)
       }
-      requestAnimationFrameId = reqAnimFrame(() => {
+      requestAnimationFrameId = raf(() => {
         node.style.height = `${show ? height : 0}px`
         node.style.opacity = show ? 1 : 0
       })
     },
     end () {
       if (requestAnimationFrameId) {
-        cancelRequestAnimationFrame(requestAnimationFrameId)
+        raf.cancel(requestAnimationFrameId)
       }
       node.style.height = ''
       node.style.opacity = ''

components/_util/proxyComponent.jsx

@@ -0,0 +1,47 @@
+
+import PropTypes from './vue-types'
+import { getOptionProps } from './props-util'
+
+function getDisplayName (WrappedComponent) {
+  return WrappedComponent.name || 'Component'
+}
+export default function wrapWithConnect (WrappedComponent) {
+  const tempProps = WrappedComponent.props || {}
+  const methods = WrappedComponent.methods || {}
+  const props = {}
+  Object.keys(tempProps).forEach(k => { props[k] = PropTypes.any })
+  WrappedComponent.props.__propsSymbol__ = PropTypes.any
+  WrappedComponent.props.children = PropTypes.array.def([])
+  const ProxyWrappedComponent = {
+    props,
+    model: WrappedComponent.model,
+    name: `Proxy_${getDisplayName(WrappedComponent)}`,
+    methods: {
+      getProxyWrappedInstance () {
+        return this.$refs.wrappedInstance
+      },
+    },
+    render () {
+      const { $listeners, $slots = {}, $attrs } = this
+      const props = getOptionProps(this)
+      const wrapProps = {
+        props: {
+          ...props,
+          __propsSymbol__: Symbol(),
+          children: $slots.default || [],
+        },
+        on: $listeners,
+        attrs: $attrs,
+      }
+      return (
+        <WrappedComponent {...wrapProps} ref='wrappedInstance'/>
+      )
+    },
+  }
+  Object.keys(methods).map(m => {
+    ProxyWrappedComponent.methods[m] = function () {
+      this.getProxyWrappedInstance()[m](...arguments)
+    }
+  })
+  return ProxyWrappedComponent
+}

components/_util/store/Provider.jsx

@@ -7,7 +7,7 @@ export default {
   },
   provide () {
     return {
-      _store: this.$props,
+      storeContext: this.$props,
     }
   },
   render () {

components/_util/store/connect.jsx

@@ -19,13 +19,16 @@ export default function connect (mapStateToProps) {
       name: `Connect_${getDisplayName(WrappedComponent)}`,
       props,
       inject: {
-        _store: { default: {}},
+        storeContext: { default: {}},
       },
       data () {
-        this.store = this._store.store
+        this.store = this.storeContext.store
         return {
           subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
         }
+      },
+      watch: {
+
       },
       mounted () {
         this.trySubscribe()
@@ -41,8 +44,7 @@ export default function connect (mapStateToProps) {
           }
 
           const nextState = finnalMapStateToProps(this.store.getState(), this.$props)
-          if (!shallowEqual(this.nextState, nextState)) {
-            this.nextState = nextState
+          if (!shallowEqual(this.subscribed, nextState)) {
             this.subscribed = nextState
           }
         },
@@ -60,9 +62,12 @@ export default function connect (mapStateToProps) {
             this.unsubscribe = null
           }
         },
+        getWrappedInstance () {
+          return this.$refs.wrappedInstance
+        },
       },
       render () {
-        const { $listeners, $slots, $attrs, $scopedSlots, subscribed, store } = this
+        const { $listeners, $slots = {}, $attrs, $scopedSlots, subscribed, store } = this
         const props = getOptionProps(this)
         const wrapProps = {
           props: {
@@ -72,11 +77,14 @@ export default function connect (mapStateToProps) {
           },
           on: $listeners,
           attrs: $attrs,
-          slots: $slots,
           scopedSlots: $scopedSlots,
         }
         return (
-          <WrappedComponent {...wrapProps}/>
+          <WrappedComponent {...wrapProps} ref='wrappedInstance'>
+            {Object.keys($slots).map(name => {
+              return <template slot={name}>{$slots[name]}</template>
+            })}
+          </WrappedComponent>
         )
       },
     }

components/_util/throttleByAnimationFrame.js

@@ -1,6 +1,4 @@
-import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame'
-
-const reqAnimFrame = getRequestAnimationFrame()
+import raf from 'raf'
 
 export default function throttleByAnimationFrame (fn) {
   let requestId
@@ -12,11 +10,11 @@ export default function throttleByAnimationFrame (fn) {
 
   const throttled = (...args) => {
     if (requestId == null) {
-      requestId = reqAnimFrame(later(args))
+      requestId = raf(later(args))
     }
   }
 
-  throttled.cancel = () => cancelRequestAnimationFrame(requestId)
+  throttled.cancel = () => raf.cancel(requestId)
 
   return throttled
 }

components/_util/wave.jsx

@@ -0,0 +1,101 @@
+
+import TransitionEvents from './css-animation/Event'
+
+export default {
+  name: 'Wave',
+  props: ['insertExtraNode'],
+  mounted () {
+    this.$nextTick(() => {
+      this.instance = this.bindAnimationEvent(this.$el)
+    })
+  },
+
+  beforeDestroy () {
+    if (this.instance) {
+      this.instance.cancel()
+    }
+  },
+  methods: {
+    isNotGrey (color) {
+      const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/)
+      if (match && match[1] && match[2] && match[3]) {
+        return !(match[1] === match[2] && match[2] === match[3])
+      }
+      return true
+    },
+
+    onClick (node) {
+      if (node.className.indexOf('-leave') >= 0) {
+        return
+      }
+      this.removeExtraStyleNode()
+      const { insertExtraNode } = this.$props
+      const extraNode = document.createElement('div')
+      extraNode.className = 'ant-click-animating-node'
+      const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
+      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' &&
+          waveColor !== 'rgb(255, 255, 255)' &&
+          this.isNotGrey(waveColor) &&
+          !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
+          waveColor !== 'transparent') {
+        extraNode.style.borderColor = waveColor
+        this.styleForPesudo = document.createElement('style')
+        this.styleForPesudo.innerHTML =
+          `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`
+        document.body.appendChild(this.styleForPesudo)
+      }
+      if (insertExtraNode) {
+        node.appendChild(extraNode)
+      }
+      const transitionEnd = () => {
+        node.removeAttribute(attributeName)
+        this.removeExtraStyleNode()
+        if (insertExtraNode) {
+          node.removeChild(extraNode)
+        }
+        TransitionEvents.removeEndEventListener(node, transitionEnd)
+      }
+      TransitionEvents.addEndEventListener(node, transitionEnd)
+    },
+
+    bindAnimationEvent (node) {
+      if (node.getAttribute('disabled') ||
+          node.className.indexOf('disabled') >= 0) {
+        return
+      }
+      const onClick = (e) => {
+        // Fix radio button click twice
+        if (e.target.tagName === 'INPUT') {
+          return
+        }
+        setTimeout(() => this.onClick(node), 0)
+      }
+      node.addEventListener('click', onClick, true)
+      return {
+        cancel: () => {
+          node.removeEventListener('click', onClick, true)
+        },
+      }
+    },
+
+    removeExtraStyleNode () {
+      if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
+        document.body.removeChild(this.styleForPesudo)
+        this.styleForPesudo = null
+      }
+    },
+  },
+
+  render () {
+    return this.$slots.default && this.$slots.default[0]
+  },
+}