feat: update upload (#2494)

* feat: update upload * chore: cache babel * chore: make run dev faster
2020-06-25 21:23:39 +08:00 · 2020-06-25 21:23:39 +08:00 · a325bf2319
parent 23358dba44
commit a325bf2319
9 changed files with 88 additions and 184 deletions
--- a/components/upload/Upload.jsx
+++ b/components/upload/Upload.jsx
@ -1,10 +1,9 @@
 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';
@ -12,6 +11,7 @@ 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, {
--- a/components/upload/UploadList.jsx
+++ b/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>
    );
  },
 };
--- a/components/vc-progress/src/Circle.js
+++ b/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} />;
      });
    },
  },
--- a/components/vc-progress/src/Line.js
+++ b/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>
    );
--- a/components/vc-upload/src/AjaxUploader.jsx
+++ b/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>
    );
  },
--- a/components/vc-upload/src/IframeUploader.jsx
+++ b/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>
    );
  },
--- a/components/vc-upload/src/Upload.jsx
+++ b/components/vc-upload/src/Upload.jsx
@ -1,5 +1,5 @@
 import PropTypes from '../../_util/vue-types';
-import { initDefaultProps, getListeners } from '../../_util/props-util';
+import { initDefaultProps, getSlot } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import AjaxUpload from './AjaxUploader';
 import IframeUpload from './IframeUploader';
@ -13,10 +13,10 @@ const uploadProps = {
  name: PropTypes.string,
  multipart: PropTypes.bool,
  directory: PropTypes.bool,
-  // onError: PropTypes.func,
-  // onSuccess: PropTypes.func,
-  // onProgress: PropTypes.func,
-  // onStart: PropTypes.func,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func,
+  onProgress: PropTypes.func,
+  onStart: PropTypes.func,
  data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
  headers: PropTypes.object,
  accept: PropTypes.string,
@ -24,7 +24,7 @@ const uploadProps = {
  disabled: PropTypes.bool,
  beforeUpload: PropTypes.func,
  customRequest: PropTypes.func,
-  // onReady: PropTypes.func,
+  onReady: PropTypes.func,
  withCredentials: PropTypes.bool,
  supportServerRender: PropTypes.bool,
  openFileDialogOnClick: PropTypes.bool,
@ -40,10 +40,10 @@ export default {
    headers: {},
    name: 'file',
    multipart: false,
-    // onReady: empty,
-    // onStart: empty,
-    // onError: empty,
-    // onSuccess: empty,
+    onReady: empty,
+    onStart: empty,
+    onError: empty,
+    onSuccess: empty,
    supportServerRender: false,
    multiple: false,
    beforeUpload: empty,
@ -80,21 +80,18 @@ export default {

  render() {
    const componentProps = {
-      props: {
-        ...this.$props,
-      },
-      on: getListeners(this),
+      ...this.$props,
      ref: 'uploaderRef',
-      attrs: this.$attrs,
+      ...this.$attrs,
    };
    if (this.supportServerRender) {
      const ComponentUploader = this.Component;
      if (ComponentUploader) {
-        return <ComponentUploader {...componentProps}>{this.$slots.default}</ComponentUploader>;
+        return <ComponentUploader {...componentProps}>{getSlot(this)}</ComponentUploader>;
      }
      return null;
    }
    const ComponentUploader = this.getComponent();
-    return <ComponentUploader {...componentProps}>{this.$slots.default}</ComponentUploader>;
+    return <ComponentUploader {...componentProps}>{getSlot(this)}</ComponentUploader>;
  },
 };
--- a/examples/index.js
+++ b/examples/index.js
@ -1,44 +1,7 @@
 import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
-import Avatar from 'ant-design-vue/avatar';
-import Breadcrumb from 'ant-design-vue/breadcrumb';
-import Button from 'ant-design-vue/button';
-import Comment from 'ant-design-vue/comment';
-import Drawer from 'ant-design-vue/drawer';
-import Affix from 'ant-design-vue/affix';
-import Alert from 'ant-design-vue/alert';
-import Divider from 'ant-design-vue/divider';
-import Anchor from 'ant-design-vue/anchor';
-import Radio from 'ant-design-vue/radio';
-import ConfigProvider from 'ant-design-vue/config-provider';
-import Result from 'ant-design-vue/result';
-import Spin from 'ant-design-vue/spin';
-import PageHeader from 'ant-design-vue/page-header';
-import Skeleton from 'ant-design-vue/skeleton';
-import Empty from 'ant-design-vue/empty';
-import Timeline from 'ant-design-vue/timeline';
-import Statistic from 'ant-design-vue/statistic';
-import Checkbox from 'ant-design-vue/checkbox';
-import Col from 'ant-design-vue/col';
-import Row from 'ant-design-vue/row';
-import Tooltip from 'ant-design-vue/tooltip';
-import Descriptions from 'ant-design-vue/descriptions';
-import BackTop from 'ant-design-vue/back-top';
-import Tag from 'ant-design-vue/tag';
-import Popconfirm from 'ant-design-vue/popconfirm';
-import Popover from 'ant-design-vue/popover';
-import notification from 'ant-design-vue/notification';
-import message from 'ant-design-vue/message';
-import Modal from 'ant-design-vue/modal';
-import Menu from 'ant-design-vue/menu';
-import Mentions from 'ant-design-vue/mentions';
-import Dropdown from 'ant-design-vue/dropdown';
-import Steps from 'ant-design-vue/steps';
-import Switch from 'ant-design-vue/switch';
-import Layout from 'ant-design-vue/layout';
-import Tabs from 'ant-design-vue/tabs';
-import Card from 'ant-design-vue/card';
+import { Button, Upload, Icon, notification, message } from 'ant-design-vue';
 import 'ant-design-vue/style.js';

 const basic = {
@ -55,40 +18,7 @@ app
  .component('api', { ...basic })
  .component('CN', { ...basic })
  .component('US', { ...basic })
-  .use(Avatar)
-  .use(Breadcrumb)
+  .use(Upload)
  .use(Button)
-  .use(Comment)
-  .use(ConfigProvider)
-  .use(Drawer)
-  .use(Affix)
-  .use(Alert)
-  .use(Radio)
-  .use(Divider)
-  .use(Result)
-  .use(PageHeader)
-  .use(Anchor)
-  .use(Skeleton)
-  .use(Spin)
-  .use(Empty)
-  .use(Checkbox)
-  .use(Timeline)
-  .use(Statistic)
-  .use(Col)
-  .use(Row)
-  .use(Tooltip)
-  .use(Descriptions)
-  .use(BackTop)
-  .use(Tag)
-  .use(Popconfirm)
-  .use(Popover)
-  .use(Modal)
-  .use(Menu)
-  .use(Mentions)
-  .use(Dropdown)
-  .use(Steps)
-  .use(Switch)
-  .use(Layout)
-  .use(Tabs)
-  .use(Card)
+  .use(Icon)
  .mount('#app');
--- a/webpack.config.js
+++ b/webpack.config.js
@ -19,6 +19,7 @@ module.exports = {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
+          cacheDirectory: true,
          presets: [
            [
              '@babel/preset-env',
@ -37,6 +38,14 @@ module.exports = {
            ],
          ],
          plugins: [
+            [
+              'babel-plugin-import',
+              {
+                libraryName: 'ant-design-vue',
+                libraryDirectory: '', // default: lib
+                style: true,
+              },
+            ],
            ['@ant-design-vue/babel-plugin-jsx', { transformOn: true }],
            '@babel/plugin-proposal-optional-chaining',
            '@babel/plugin-transform-object-assign',