feat: update vc-table vc-upload

Author: tangjinzhou

components/_util/Dom/addEventListener.js

@@ -1,5 +1,5 @@
 import addDOMEventListener from 'add-dom-event-listener'
 
-export default function addEventListenerWrap (target, eventType, cb) {
-  return addDOMEventListener(target, eventType, cb)
+export default function addEventListenerWrap (target, eventType, cb, option) {
+  return addDOMEventListener(target, eventType, cb, option)
 }

components/upload/Upload.jsx

@@ -14,6 +14,7 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
 export { UploadProps }
 
 export default {
+  inheritAttrs: false,
   name: 'AUpload',
   Dragger: Dragger,
   mixins: [BaseMixin],
@@ -231,6 +232,7 @@ export default {
       },
       ref: 'uploadRef',
       class: `${prefixCls}-btn`,
+      attrs: this.$attrs,
     }
 
     const uploadList = showUploadList ? (

components/vc-table/index.js

@@ -1,4 +1,4 @@
-// base rc-table 6.4.0
+// base rc-table 6.4.2
 import T from './src/Table'
 import Column from './src/Column'
 import ColumnGroup from './src/ColumnGroup'

components/vc-table/src/ExpandableTable.jsx

@@ -1,6 +1,7 @@
 import PropTypes from '../../_util/vue-types'
 import BaseMixin from '../../_util/BaseMixin'
 import { connect } from '../../_util/store'
+import shallowEqual from 'shallowequal'
 import TableRow from './TableRow'
 import { remove } from './utils'
 import { initDefaultProps, getOptionProps } from '../../_util/props-util'
@@ -71,6 +72,12 @@ const ExpandableTable = {
     })
     return {}
   },
+  mounted () {
+    this.handleUpdated()
+  },
+  updated () {
+    this.handleUpdated()
+  },
   watch: {
     expandedRowKeys (val) {
       this.$nextTick(() => {
@@ -81,6 +88,10 @@ const ExpandableTable = {
     },
   },
   methods: {
+    handleUpdated () {
+      // We should record latest expanded rows to avoid multiple rows remove cause `onExpandedRowsChange` trigger many times
+      this.latestExpandedRows = null
+    },
     handleExpandChange (expanded, record, event, rowKey, destroy = false) {
       if (event) {
         event.preventDefault()
@@ -103,7 +114,12 @@ const ExpandableTable = {
       if (!this.expandedRowKeys) {
         this.store.setState({ expandedRowKeys })
       }
-      this.__emit('expandedRowsChange', expandedRowKeys)
+      // De-dup of repeat call
+      if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
+        this.latestExpandedRows = expandedRowKeys
+        this.__emit('expandedRowsChange', expandedRowKeys)
+      }
+
       if (!destroy) {
         this.__emit('expand', expanded, record)
       }

components/vc-table/src/utils.js

@@ -1,6 +1,7 @@
 import warning from 'warning'
 
-let scrollbarSize
+let scrollbarVerticalSize
+let scrollbarHorizontalSize
 
 // Measure scrollbar width for padding body during modal show/hide
 const scrollbarMeasure = {
@@ -15,24 +16,34 @@ export function measureScrollbar (direction = 'vertical') {
   if (typeof document === 'undefined' || typeof window === 'undefined') {
     return 0
   }
-  if (scrollbarSize) {
-    return scrollbarSize
+  const isVertical = direction === 'vertical'
+  if (isVertical && scrollbarVerticalSize) {
+    return scrollbarVerticalSize
+  } else if (!isVertical && scrollbarHorizontalSize) {
+    return scrollbarHorizontalSize
   }
   const scrollDiv = document.createElement('div')
   Object.keys(scrollbarMeasure).forEach(scrollProp => {
     scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]
   })
+  // Append related overflow style
+  if (isVertical) {
+    scrollDiv.style.overflowY = 'scroll'
+  } else {
+    scrollDiv.style.overflowX = 'scroll'
+  }
   document.body.appendChild(scrollDiv)
   let size = 0
-  if (direction === 'vertical') {
+  if (isVertical) {
     size = scrollDiv.offsetWidth - scrollDiv.clientWidth
-  } else if (direction === 'horizontal') {
+    scrollbarVerticalSize = size
+  } else if (!isVertical) {
     size = scrollDiv.offsetHeight - scrollDiv.clientHeight
+    scrollbarHorizontalSize = size
   }
 
   document.body.removeChild(scrollDiv)
-  scrollbarSize = size
-  return scrollbarSize
+  return size
 }
 
 export function debounce (func, wait, immediate) {

components/vc-upload/src/AjaxUploader.jsx

@@ -35,6 +35,7 @@ const upLoadPropTypes = {
 }
 
 const AjaxUploader = {
+  inheritAttrs: false,
   name: 'ajaxUploader',
   mixins: [BaseMixin],
   props: upLoadPropTypes,
@@ -184,9 +185,11 @@ const AjaxUploader = {
     this.abort()
   },
   render () {
+    const { $props, $attrs } = this
     const {
-      componentTag: Tag, prefixCls, disabled, multiple, accept, directory, openFileDialogOnClick,
-    } = this.$props
+      componentTag: Tag, prefixCls, disabled,
+      multiple, accept, directory, openFileDialogOnClick,
+    } = $props
     const cls = classNames({
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
@@ -213,6 +216,7 @@ const AjaxUploader = {
         {...tagProps}
       >
         <input
+          id={$attrs.id}
           type='file'
           ref='fileInputRef'
           key={this.uid}

components/vc-upload/src/Upload.jsx

@@ -37,6 +37,7 @@ const uploadProps = {
   openFileDialogOnClick: PropTypes.bool,
 }
 export default {
+  inheritAttrs: false,
   name: 'Upload',
   mixins: [BaseMixin],
   props: initDefaultProps(uploadProps, {
@@ -89,6 +90,7 @@ export default {
       },
       on: this.$listeners,
       ref: 'uploaderRef',
+      attrs: this.$attrs,
     }
     if (this.supportServerRender) {
       const ComponentUploader = this.Component