From a325bf23192585fcdf3072a5f22ce72b4c1cca68 Mon Sep 17 00:00:00 2001 From: Amour1688 <31695475+Amour1688@users.noreply.github.com> Date: Thu, 25 Jun 2020 21:23:39 +0800 Subject: [PATCH] feat: update upload (#2494) * feat: update upload * chore: cache babel * chore: make run dev faster --- components/upload/Upload.jsx | 60 ++++++++-------- components/upload/UploadList.jsx | 26 ++++--- components/vc-progress/src/Circle.js | 28 +++----- components/vc-progress/src/Line.js | 16 +---- components/vc-upload/src/AjaxUploader.jsx | 23 +++---- components/vc-upload/src/IframeUploader.jsx | 3 +- components/vc-upload/src/Upload.jsx | 31 ++++----- examples/index.js | 76 +-------------------- webpack.config.js | 9 +++ 9 files changed, 88 insertions(+), 184 deletions(-) diff --git a/components/upload/Upload.jsx b/components/upload/Upload.jsx index 50e6905f3..5f66b24cf 100644 --- 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; 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 ; }, @@ -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 ? ( ) : null; - const children = this.$slots.default; + const children = getSlot(this); if (type === 'drag') { const dragCls = classNames(prefixCls, { diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx index 034e830b1..0674f8596 100644 --- 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 ? : null; @@ -160,10 +161,7 @@ export default { ) : null; const downloadIcon = showDownloadIcon && file.status === 'done' ? ( - this.handleDownload(file)} - /> + this.handleDownload(file)} /> ) : null; const downloadOrDelete = listType !== 'picture-card' && (
{iconAndPreview}
{actions} - {progress} + {progress} ); const listContainerNameClass = classNames({ @@ -269,9 +267,9 @@ export default { const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate'; const transitionGroupProps = getTransitionProps(`${prefixCls}-${animationDirection}`); return ( - + {list} - + ); }, }; diff --git a/components/vc-progress/src/Circle.js b/components/vc-progress/src/Circle.js index 241e6902e..122e386fc 100644 --- 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 ; + return (this.paths[index] = c)} {...pathProps} />; }); }, }, diff --git a/components/vc-progress/src/Line.js b/components/vc-progress/src/Line.js index 30f0e2f2e..1b186b2fb 100644 --- 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 ; + return (this.paths[index] = c)} {...pathProps} />; })} ); diff --git a/components/vc-upload/src/AjaxUploader.jsx b/components/vc-upload/src/AjaxUploader.jsx index 9b551d02c..19e614c58 100644 --- 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)} ); }, diff --git a/components/vc-upload/src/IframeUploader.jsx b/components/vc-upload/src/IframeUploader.jsx index 431af946e..ac4c5548d 100644 --- 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 (