feat: update upload (#2494)

* feat: update upload

* chore: cache babel

* chore: make run dev faster

Author: Amour1688

components/upload/Upload.jsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames';
 import uniqBy from 'lodash/uniqBy';
 import findIndex from 'lodash/findIndex';
-import pick from 'lodash/pick';
 import VcUpload from '../vc-upload';
 import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps, initDefaultProps, hasProp, getListeners } from '../_util/props-util';
+import { getOptionProps, initDefaultProps, hasProp, getSlot } from '../_util/props-util';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import { ConfigConsumerProps } from '../config-provider';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
 import { UploadProps } from './interface';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
+import { inject } from 'vue';
 
 export { UploadProps };
 
@@ -32,8 +32,10 @@ export default {
     disabled: false,
     supportServerRender: true,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   // recentUploadStatus: boolean | PromiseLike<any>;
   data() {
@@ -217,20 +219,18 @@ export default {
       } = getOptionProps(this);
       const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList;
       const { sFileList: fileList } = this.$data;
+      const { onDownload, onPreview } = this.$attrs;
       const uploadListProps = {
-        props: {
-          listType,
-          items: fileList,
-          previewFile,
-          showRemoveIcon: !disabled && showRemoveIcon,
-          showPreviewIcon,
-          showDownloadIcon,
-          locale: { ...locale, ...propLocale },
-        },
-        on: {
-          remove: this.handleManualRemove,
-          ...pick(getListeners(this), ['download', 'preview']), // 如果没有配置该事件，不要传递， uploadlist 会有相应逻辑
-        },
+        listType,
+        items: fileList,
+        previewFile,
+        showRemoveIcon: !disabled && showRemoveIcon,
+        showPreviewIcon,
+        showDownloadIcon,
+        locale: { ...locale, ...propLocale },
+        onRemove: this.handleManualRemove,
+        onDownload,
+        onPreview,
       };
       return <UploadList {...uploadListProps} />;
     },
@@ -248,31 +248,27 @@ export default {
     const prefixCls = getPrefixCls('upload', customizePrefixCls);
 
     const vcUploadProps = {
-      props: {
-        ...this.$props,
-        prefixCls,
-        beforeUpload: this.reBeforeUpload,
-      },
-      on: {
-        start: this.onStart,
-        error: this.onError,
-        progress: this.onProgress,
-        success: this.onSuccess,
-        reject: this.onReject,
-      },
+      ...this.$props,
+      prefixCls,
+      beforeUpload: this.reBeforeUpload,
+      onStart: this.onStart,
+      onError: this.onError,
+      onProgress: this.onProgress,
+      onSuccess: this.onSuccess,
+      onReject: this.onReject,
       ref: 'uploadRef',
-      attrs: this.$attrs,
+      ...this.$attrs,
     };
 
     const uploadList = showUploadList ? (
       <LocaleReceiver
         componentName="Upload"
         defaultLocale={defaultLocale.Upload}
-        scopedSlots={{ default: this.renderUploadList }}
+        children={this.renderUploadList}
       />
     ) : null;
 
-    const children = this.$slots.default;
+    const children = getSlot(this);
 
     if (type === 'drag') {
       const dragCls = classNames(prefixCls, {

components/upload/UploadList.jsx

@@ -1,3 +1,4 @@
+import { inject, TransitionGroup } from 'vue';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
@@ -29,8 +30,10 @@ export default {
     showPreviewIcon: true,
     previewFile: previewImage,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   updated() {
     this.$nextTick(() => {
@@ -132,11 +135,9 @@ export default {
 
       if (file.status === 'uploading') {
         const progressProps = {
-          props: {
-            ...progressAttr,
-            type: 'line',
-            percent: file.percent,
-          },
+          ...progressAttr,
+          type: 'line',
+          percent: file.percent,
         };
         // show loading icon if upload progress listener is disabled
         const loadingProgress = 'percent' in file ? <Progress {...progressProps} /> : null;
@@ -160,10 +161,7 @@ export default {
       ) : null;
       const downloadIcon =
         showDownloadIcon && file.status === 'done' ? (
-          <DownloadOutlined
-            title={locale.downloadFile}
-            onClick={() => this.handleDownload(file)}
-          />
+          <DownloadOutlined title={locale.downloadFile} onClick={() => this.handleDownload(file)} />
         ) : null;
       const downloadOrDelete = listType !== 'picture-card' && (
         <span
@@ -250,7 +248,7 @@ export default {
         <div class={infoUploadingClass} key={file.uid}>
           <div class={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
           {actions}
-          <transition {...transitionProps}>{progress}</transition>
+          <Transition {...transitionProps}>{progress}</Transition>
         </div>
       );
       const listContainerNameClass = classNames({
@@ -269,9 +267,9 @@ export default {
     const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
     const transitionGroupProps = getTransitionProps(`${prefixCls}-${animationDirection}`);
     return (
-      <transition-group {...transitionGroupProps} tag="div" class={listClassNames}>
+      <TransitionGroup {...transitionGroupProps} tag="div" class={listClassNames}>
         {list}
-      </transition-group>
+      </TransitionGroup>
     );
   },
 };

components/vc-progress/src/Circle.js

@@ -1,6 +1,5 @@
-import Vue from 'vue';
-import ref from 'vue-ref';
 import PropTypes from '../../_util/vue-types';
+import antRef from '../../_util/ant-ref';
 import { initDefaultProps } from '../../_util/props-util';
 import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';
@@ -16,8 +15,6 @@ const circleDefaultProps = {
   gapPosition: 'top',
 };
 
-Vue.use(ref, { name: 'ant-ref' });
-
 let gradientSeed = 0;
 
 function stripPercentToNumber(percent) {
@@ -74,6 +71,7 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
 
 const Circle = {
   props: initDefaultProps(circlePropTypes, circleDefaultProps),
+  directives: { antRef },
   created() {
     this.paths = {};
     this.gradientId = gradientSeed;
@@ -113,25 +111,15 @@ const Circle = {
 
         const pathProps = {
           key: index,
-          attrs: {
-            d: pathString,
-            stroke,
-            'stroke-linecap': strokeLinecap,
-            'stroke-width': ptg === 0 ? 0 : strokeWidth,
-            'fill-opacity': '0',
-          },
+          d: pathString,
+          stroke,
+          'stroke-linecap': strokeLinecap,
+          'stroke-width': ptg === 0 ? 0 : strokeWidth,
+          'fill-opacity': '0',
           class: `${prefixCls}-circle-path`,
           style: pathStyle,
-          directives: [
-            {
-              name: 'ant-ref',
-              value: c => {
-                this.paths[index] = c;
-              },
-            },
-          ],
         };
-        return <path {...pathProps} />;
+        return <path v-antRef={c => (this.paths[index] = c)} {...pathProps} />;
       });
     },
   },

components/vc-progress/src/Line.js

@@ -1,13 +1,11 @@
-import Vue from 'vue';
-import ref from 'vue-ref';
 import { initDefaultProps } from '../../_util/props-util';
+import antRef from '../../_util/ant-ref';
 import enhancer from './enhancer';
 import { propTypes, defaultProps } from './types';
 
-Vue.use(ref, { name: 'ant-ref' });
-
 const Line = {
   props: initDefaultProps(propTypes, defaultProps),
+  directives: { antRef },
   created() {
     this.paths = {};
   },
@@ -78,17 +76,9 @@ const Line = {
             },
             class: `${prefixCls}-line-path`,
             style: pathStyle,
-            directives: [
-              {
-                name: 'ant-ref',
-                value: c => {
-                  this.paths[index] = c;
-                },
-              },
-            ],
           };
 
-          return <path {...pathProps} />;
+          return <path v-antRef={c => (this.paths[index] = c)} {...pathProps} />;
         })}
       </svg>
     );

components/vc-upload/src/AjaxUploader.jsx

@@ -6,7 +6,7 @@ import defaultRequest from './request';
 import getUid from './uid';
 import attrAccept from './attr-accept';
 import traverseFileTree from './traverseFileTree';
-import { getListeners } from '../../_util/props-util';
+import { getListeners, getSlot } from '../../_util/props-util';
 
 const upLoadPropTypes = {
   componentTag: PropTypes.string,
@@ -223,20 +223,15 @@ const AjaxUploader = {
     const events = disabled
       ? {}
       : {
-          click: openFileDialogOnClick ? this.onClick : () => {},
-          keydown: openFileDialogOnClick ? this.onKeyDown : () => {},
-          drop: this.onFileDrop,
-          dragover: this.onFileDrop,
+          onClick: openFileDialogOnClick ? this.onClick : () => {},
+          onKeydown: openFileDialogOnClick ? this.onKeyDown : () => {},
+          onDrop: this.onFileDrop,
+          onDragover: this.onFileDrop,
         };
     const tagProps = {
-      on: {
-        ...getListeners(this),
-        ...events,
-      },
-      attrs: {
-        role: 'button',
-        tabIndex: disabled ? null : '0',
-      },
+      ...events,
+      role: 'button',
+      tabIndex: disabled ? null : '0',
       class: cls,
     };
     return (
@@ -254,7 +249,7 @@ const AjaxUploader = {
           multiple={multiple}
           onChange={this.onChange}
         />
-        {this.$slots.default}
+        {getSlot(this)}
       </Tag>
     );
   },

components/vc-upload/src/IframeUploader.jsx

@@ -3,6 +3,7 @@ import BaseMixin from '../../_util/BaseMixin';
 import classNames from 'classnames';
 import getUid from './uid';
 import warning from '../../_util/warning';
+import { getSlot } from '../../_util/props-util';
 
 const IFRAME_STYLE = {
   position: 'absolute',
@@ -268,7 +269,7 @@ const IframeUploader = {
     return (
       <Tag className={cls} style={{ position: 'relative', zIndex: 0 }}>
         <iframe ref="iframeRef" onLoad={this.onLoad} style={iframeStyle} />
-        {this.$slots.default}
+        {getSlot(this)}
       </Tag>
     );
   },