chore: use vue-ref

Author: tangjinzhou

components/_util/proxyComponent.jsx

@@ -28,17 +28,21 @@ export default function wrapWithConnect (WrappedComponent) {
         props: {
           ...props,
           __propsSymbol__: Symbol(),
+          componentWillReceiveProps: { ...props },
           children: $slots.default || props.children || [],
         },
         on: $listeners,
         attrs: $attrs,
-        scopedSlots: $scopedSlots,
       }
+      if (Object.keys($scopedSlots).length) {
+        wrapProps.scopedSlots = $scopedSlots
+      }
+      const slotsKey = Object.keys($slots)
       return (
         <WrappedComponent {...wrapProps} ref='wrappedInstance'>
-          {Object.keys($slots).map(name => {
+          {slotsKey.length ? slotsKey.map(name => {
             return <template slot={name}>{$slots[name]}</template>
-          })}
+          }) : null}
         </WrappedComponent>
       )
     },

components/form/index.jsx

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Form from './Form'
-import antRefDirective from '../_util/antRefDirective'
+import ref from 'vue-ref'
 
-Vue.use(antRefDirective)
+Vue.use(ref, { name: 'ant-ref' })
 
 export { FormProps, FormCreateOption, ValidationRule } from './Form'
 export { FormItemProps } from './FormItem'

components/trigger/Trigger.jsx

@@ -1,6 +1,6 @@
 
 import Vue from 'vue'
-import antRefDirective from '../_util/antRefDirective'
+import ref from 'vue-ref'
 import PropTypes from '../_util/vue-types'
 import contains from '../_util/Dom/contains'
 import { hasProp, getComponentFromProp, getEvents, filterEmpty } from '../_util/props-util'
@@ -13,7 +13,7 @@ import BaseMixin from '../_util/BaseMixin'
 import { cloneElement } from '../_util/vnode'
 import ContainerRender from '../_util/ContainerRender'
 
-Vue.use(antRefDirective)
+Vue.use(ref, { name: 'ant-ref' })
 
 function returnEmptyString () {
   return ''

components/vc-drawer/src/Drawer.js

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import Vue from 'vue'
+import ref from 'vue-ref'
 import BaseMixin from '../../_util/BaseMixin'
-import antRefDirective from '../../_util/antRefDirective'
 import { initDefaultProps, getEvents } from '../../_util/props-util'
 import { cloneElement } from '../../_util/vnode'
 import ContainerRender from '../../_util/ContainerRender'
@@ -25,7 +25,8 @@ const windowIsUndefined = !(
   window.document &&
   window.document.createElement
 )
-Vue.use(antRefDirective)
+
+Vue.use(ref, { name: 'ant-ref' })
 const Drawer = {
   mixins: [BaseMixin],
   props: initDefaultProps(drawerProps, {

components/vc-form/src/index.jsx

@@ -3,7 +3,8 @@ import createForm from './createForm'
 import createFormField from './createFormField'
 import formShape from './propTypes'
 import Vue from 'vue'
-import antRefDirective from '../../_util/antRefDirective'
-Vue.use(antRefDirective)
+import ref from 'vue-ref'
+
+Vue.use(ref, { name: 'ant-ref' })
 
 export { createForm, createFormField, formShape }

components/vc-select/Select.jsx

@@ -12,9 +12,9 @@ import getTransitionProps from '../_util/getTransitionProps'
 import { cloneElement } from '../_util/vnode'
 import BaseMixin from '../_util/BaseMixin'
 import proxyComponent from '../_util/proxyComponent'
-import antRefDirective from '../_util/antRefDirective'
+import ref from 'vue-ref'
 
-Vue.use(antRefDirective)
+Vue.use(ref, { name: 'ant-ref' })
 
 import {
   getPropValue,

components/vc-slick/src/inner-slider.js

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce'
 import classnames from 'classnames'
 import Vue from 'vue'
-import antRefDirective from '../../_util/antRefDirective'
+import ref from 'vue-ref'
 import { getStyle } from '../../_util/props-util'
 import BaseMixin from '../../_util/BaseMixin'
 import defaultProps from './default-props'
@@ -28,7 +28,7 @@ import Dots from './dots'
 import { PrevArrow, NextArrow } from './arrows'
 import ResizeObserver from 'resize-observer-polyfill'
 
-Vue.use(antRefDirective)
+Vue.use(ref, { name: 'ant-ref' })
 
 function noop () {}
 

components/vc-slick/src/slider.js

@@ -1,6 +1,6 @@
 import json2mq from 'json2mq'
 import Vue from 'vue'
-import antRefDirective from '../../_util/antRefDirective'
+import ref from 'vue-ref'
 import BaseMixin from '../../_util/BaseMixin'
 import { cloneElement } from '../../_util/vnode'
 import { getStyle } from '../../_util/props-util'
@@ -9,7 +9,8 @@ import defaultProps from './default-props'
 import { canUseDOM } from './utils/innerSliderUtils'
 const enquire = canUseDOM() && require('enquire.js')
 
-Vue.use(antRefDirective)
+Vue.use(ref, { name: 'ant-ref' })
+
 export default {
   props: {
     ...defaultProps,

package.json

@@ -177,6 +177,7 @@
         "resize-observer-polyfill": "^1.5.0",
         "shallow-equal": "^1.0.0",
         "shallowequal": "^1.0.2",
+        "vue-ref": "^1.0.1",
         "warning": "^3.0.0"
     }
 }