fix(upload): fileListDisplay and remove params (#1362)

Tencent · Aug 24, 2022 · 195df43 · 195df43
1 parent a211567
commit 195df43
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 53 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/upload/dragger.tsx b/src/upload/dragger.tsx
@@ -36,9 +36,10 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     },
     cancel: Function as PropType<(e: MouseEvent) => void>,
     trigger: Function as PropType<(e: MouseEvent) => void>,
-    remove: Function as PropType<(e: MouseEvent) => void>,
+    remove: Function as PropType<({ e, file }: { e: MouseEvent; file: UploadFile }) => void>,
     upload: Function as PropType<(file: UploadFile, e: MouseEvent) => void>,
     autoUpload: Boolean,
+    locale: props.locale,
   },
 
   data() {
@@ -106,11 +107,13 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     renderDefaultDragElement(): VNode {
       const unActiveElement = (
         <div>
-          <span class={`${this.componentName}--highlight`}>{this.global.triggerUploadText.normal}</span>
-          <span>&nbsp;&nbsp;/&nbsp;&nbsp;{this.global.dragger.draggingText}</span>
+          <span class={`${this.componentName}--highlight`}>
+            {this.locale?.triggerUploadText?.normal || this.global.triggerUploadText.normal}
+          </span>
+          <span>&nbsp;&nbsp;/&nbsp;&nbsp;{this.locale?.dragger?.draggingText || this.global.dragger.draggingText}</span>
         </div>
       );
-      const activeElement = <div>{this.global.dragger.dragDropText}</div>;
+      const activeElement = <div>{this.locale?.dragger?.dragDropText || this.global.dragger.dragDropText}</div>;
       return this.dragActive ? activeElement : unActiveElement;
     },
 
@@ -140,7 +143,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     },
 
     reUpload(e: MouseEvent) {
-      this.remove(e);
+      this.remove({ e, file: this.file });
       this.trigger(e);
     },
 
@@ -159,10 +162,10 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
               {!this.loadingFile && !!this.file && <CheckCircleFilledIcon />}
             </div>
             <small class={`${this.classPrefix}-size-s`}>
-              {this.global.file.fileSizeText}：{returnFileSize(this.size)}
+              {this.locale?.file?.fileSizeText || this.global.file.fileSizeText}：{returnFileSize(this.size)}
             </small>
             <small class={`${this.classPrefix}-size-s`}>
-              {this.global.file.fileOperationDateText}：{getCurrentDate()}
+              {this.locale?.file?.fileOperationDateText || this.global.file.fileOperationDateText}：{getCurrentDate()}
             </small>
             <div class={`${this.componentName}__dragger-btns`}>
               {['progress', 'waiting'].includes(this.loadingFile?.status) && (
@@ -172,7 +175,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
                   class={`${this.componentName}__dragger-progress-cancel`}
                   onClick={this.cancel}
                 >
-                  {this.global.cancelUploadText}
+                  {this.locale?.cancelUploadText || this.global.cancelUploadText}
                 </TButton>
               )}
               {!this.autoUpload && this.loadingFile?.status === 'waiting' && (
@@ -181,7 +184,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
                   variant="text"
                   onClick={(e: MouseEvent) => this.upload({ ...this.loadingFile }, e)}
                 >
-                  {this.global.triggerUploadText.normal}
+                  {this.locale?.triggerUploadText?.normal || this.global.triggerUploadText.normal}
                 </TButton>
               )}
             </div>
@@ -193,10 +196,10 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
                   class={`${this.componentName}__dragger-progress-cancel`}
                   onClick={this.reUpload}
                 >
-                  {this.global.triggerUploadText.reupload}
+                  {this.locale?.triggerUploadText?.reupload || this.global.triggerUploadText.reupload}
                 </TButton>
                 <TButton theme="primary" variant="text" onClick={this.remove}>
-                  {this.global.triggerUploadText.delete}
+                  {this.locale?.triggerUploadText?.delete || this.global.triggerUploadText.delete}
                 </TButton>
               </div>
             )}

diff --git a/src/upload/flow-list.tsx b/src/upload/flow-list.tsx
@@ -45,6 +45,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
         return ['file-flow', 'image-flow'].includes(val);
       },
     },
+    locale: props.locale,
   },
 
   data() {
@@ -92,10 +93,12 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
       return Boolean(this.waitingUploadFiles && this.waitingUploadFiles.length) && !this.isUploading;
     },
     uploadText(): string {
-      if (this.isUploading) return `${this.global.progress.uploadingText}...`;
-      return this.failedList && this.failedList.length
-        ? this.global.triggerUploadText.reupload
-        : this.global.triggerUploadText.normal;
+      const uploadingText = this.locale?.progress?.uploadingText || this.global.progress.uploadingText;
+      const reuploadText = this.locale?.triggerUploadText?.reupload || this.global.triggerUploadText.reupload;
+      const normalText = this.locale?.triggerUploadText?.normal || this.global.triggerUploadText.normal;
+
+      if (this.isUploading) return `${uploadingText}...`;
+      return this.failedList && this.failedList.length ? reuploadText : normalText;
     },
     batchRemoveRow(): boolean {
       return this.batchUpload && this.files.length > 0;
@@ -114,15 +117,15 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
           status = (
             <div class={`${this.componentName}__flow-status`}>
               <CheckCircleFilledIcon />
-              <span>{this.global.progress.successText}</span>
+              <span>{this.locale?.progress?.successText || this.global.progress.successText}</span>
             </div>
           );
           break;
         case 'fail':
           status = (
             <div class={`${this.componentName}__flow-status`}>
               <ErrorCircleFilledIcon />
-              <span>{this.global.progress.failText}</span>
+              <span>{this.locale?.progress?.failText || this.global.progress.failText}</span>
             </div>
           );
           break;
@@ -131,15 +134,18 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
             && (status = (
               <div class={`${this.componentName}__flow-status`}>
                 <TLoading />
-                <span>{`${this.global.progress.uploadingText} ${Math.min(file.percent, 99)}%`}</span>
+                <span>{`${this.locale?.progress?.uploadingText || this.global.progress.uploadingText} ${Math.min(
+                  file.percent,
+                  99,
+                )}%`}</span>
               </div>
             ));
           break;
         case 'waiting':
           status = (
             <div class={`${this.componentName}__flow-status`}>
               <TimeFilledIcon />
-              <span>{this.global.progress.waitingText}</span>
+              <span>{this.locale?.progress?.waitingText || this.global.progress.waitingText}</span>
             </div>
           );
           break;
@@ -176,6 +182,9 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     },
 
     renderDragger() {
+      const dragDropText = this.locale?.dragger?.dragDropText || this.global.dragger.dragDropText;
+      const clickAndDragText = this.locale?.dragger?.clickAndDragText || this.global.dragger.clickAndDragText;
+
       return (
         <div
           class={`${this.componentName}__flow-empty`}
@@ -184,7 +193,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
           onDragover={this.handleDragover}
           onDragleave={this.handleDragleave}
         >
-          {this.dragActive ? this.global.dragger.dragDropText : this.global.dragger.clickAndDragText}
+          {this.dragActive ? dragDropText : clickAndDragText}
         </div>
       );
     },
@@ -193,10 +202,10 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
       return (
         <table class={`${this.componentName}__flow-table`}>
           <tr>
-            <th>{this.global.file.fileNameText}</th>
-            <th>{this.global.file.fileSizeText}</th>
-            <th>{this.global.file.fileStatusText}</th>
-            <th>{this.global.file.fileOperationText}</th>
+            <th>{this.locale?.file?.fileNameText || this.global.file.fileNameText}</th>
+            <th>{this.locale?.file?.fileSizeText || this.global.file.fileSizeText}</th>
+            <th>{this.locale?.file?.fileStatusText || this.global.file.fileStatusText}</th>
+            <th>{this.locale?.file?.fileOperationText || this.global.file.fileOperationText}</th>
           </tr>
           {this.showInitial && (
             <tr>
@@ -231,7 +240,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
             })
             }
           >
-            {this.global.triggerUploadText.delete}
+            {this.locale?.triggerUploadText?.delete || this.global.triggerUploadText.delete}
           </span>
         </td>
       );
@@ -251,7 +260,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
             })
             }
           >
-            {this.global.triggerUploadText.delete}
+            {this.locale?.triggerUploadText?.delete || this.global.triggerUploadText.delete}
           </span>
         </td>
       ) : (
@@ -281,14 +290,15 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
                     {file.status === 'fail' && (
                       <div class={`${this.componentName}__card-status-wrap`}>
                         <ErrorCircleFilledIcon />
-                        <p>{this.global.progress.failText}</p>
+                        <p>{this.locale?.progress?.failText || this.global.progress.failText}</p>
                       </div>
                     )}
                     {file.status === 'progress' && (
                       <div class={`${this.componentName}__card-status-wrap`}>
                         <TLoading />
                         <p>
-                          {this.global.progress.uploadingText} {Math.min(file.percent, 99)}
+                          {this.locale?.progress?.uploadingText || this.global.progress.uploadingText}{' '}
+                          {Math.min(file.percent, 99)}
                         </p>
                       </div>
                     )}
@@ -336,7 +346,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
         {this.display === 'image-flow' && this.renderImgList()}
         <div class={`${this.componentName}__flow-bottom`}>
           <TButton theme="default" onClick={this.cancel}>
-            {this.global.cancelUploadText}
+            {this.locale?.cancelUploadText || this.global.cancelUploadText}
           </TButton>
           <TButton
             disabled={!this.allowUpload}

diff --git a/src/upload/image.tsx b/src/upload/image.tsx
@@ -101,7 +101,8 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
               <div class={`${this.componentName}__card-container ${this.componentName}__card-box`}>
                 <TLoading />
                 <p>
-                  {this.global.progress.uploadingText} {Math.min(this.loadingFile.percent, 99)}%
+                  {this.locale?.progress?.uploadingText || this.global.progress.uploadingText}{' '}
+                  {Math.min(this.loadingFile.percent, 99)}%
                 </p>
               </div>
             ) : (

diff --git a/src/upload/single-file.tsx b/src/upload/single-file.tsx
@@ -1,5 +1,4 @@
 import { PropType } from 'vue';
-import { ScopedSlotReturnValue } from 'vue/types/vnode';
 import {
   CloseCircleFilledIcon as TdCloseCircleFilledIcon,
   ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
@@ -9,7 +8,6 @@ import Loading from '../loading';
 import { UploadFile } from './type';
 import { ClassName } from '../common';
 import { abridgeName } from '../_common/js/upload/utils';
-import { renderTNodeJSX } from '../utils/render-tnode';
 import props from './props';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { UploadConfig, getGlobalIconMixins } from '../config-provider/config-receiver';
@@ -29,14 +27,18 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     showUploadProgress: props.showUploadProgress,
     file: Object as PropType<UploadFile>,
     loadingFile: Object as PropType<UploadFile>,
-    remove: Function as PropType<(e: MouseEvent) => void>,
+    remove: Function as PropType<({ e, file }: { e: MouseEvent; file: UploadFile }) => void>,
     placeholder: String,
     display: {
       type: String as PropType<'file' | 'file-input'>,
       validator(val: string) {
         return ['file', 'file-input'].includes(val);
       },
     },
+    fileListDisplay: {
+      type: Function,
+    },
+    locale: props.locale,
   },
 
   computed: {
@@ -110,19 +112,18 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
     // 文本型预览
     renderFilePreviewAsText() {
       if (!this.inputName) return;
-      const fileListDisplay: ScopedSlotReturnValue = renderTNodeJSX(this, 'fileListDisplay');
       const { CloseCircleFilledIcon } = this.useGlobalIcon({
         CloseCircleFilledIcon: TdCloseCircleFilledIcon,
       });
       return (
         <div class={[`${this.componentName}__single-display-text`, `${this.componentName}__display-text--margin`]}>
-          {fileListDisplay || <span class={`${this.componentName}__single-name`}>{this.inputName}</span>}
+          {this.fileListDisplay() || <span class={`${this.componentName}__single-name`}>{this.inputName}</span>}
           {this.showProgress ? (
             this.renderProgress()
           ) : (
             <CloseCircleFilledIcon
               class={`${this.componentName}__icon-delete`}
-              nativeOnClick={(e: MouseEvent) => this.remove(e)}
+              nativeOnClick={(e: MouseEvent) => this.remove({ e, file: this.file })}
             />
           )}
         </div>
@@ -149,8 +150,11 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload'), getG
         {this.$scopedSlots.default && this.$scopedSlots.default(null)}
         {this.showTextPreview && this.renderFilePreviewAsText()}
         {this.showInput && this.showDelete && (
-          <span class={`${this.componentName}__single-input-delete`} onClick={(e: MouseEvent) => this.remove(e)}>
-            删除
+          <span
+            class={`${this.componentName}__single-input-delete`}
+            onClick={(e: MouseEvent) => this.remove({ e, file: this.file })}
+          >
+            {this.locale?.triggerUploadText?.delete || this.t(this.global.triggerUploadText.delete)}
           </span>
         )}
       </div>
+1 −16		docs/web/api/form.md
+4 −0		style/web/components/space/_index.less