refactor(Upload): fix comment issues

FairyYang · Jul 5, 2024 · 4ab101e · 4ab101e
1 parent 323a61d
commit 4ab101e
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 91 deletions.
diff --git a/components/upload/__docs__/demo/after-select/index.tsx b/components/upload/__docs__/demo/after-select/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Upload, Button, Dialog } from '@alifd/next';
-import { type UploadProps, type UploadFile } from '@alifd/next/types/upload';
+import { type UploadProps } from '@alifd/next/types/upload';
 
-const afterSelect: UploadProps['afterSelect'] = (file: UploadFile) => {
+const afterSelect: UploadProps['afterSelect'] = file => {
     return new Promise<void>((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => {

diff --git a/components/upload/__docs__/demo/oss/index.tsx b/components/upload/__docs__/demo/oss/index.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Upload } from '@alifd/next';
-import { type UploadProps } from '@alifd/next/types/upload';
+import { type UploadProps, type UploadFile } from '@alifd/next/types/upload';
+
+type ModifiedUploadFile = UploadFile & {
+    tempUrl?: string;
+};
 
 class App extends React.Component {
     beforeUpload: UploadProps['beforeUpload'] = (file, options) => {
@@ -31,7 +35,7 @@ class App extends React.Component {
                 };
 
                 // save url to file object
-                file.tempUrl = `//${domain}/${key}`;
+                (file as ModifiedUploadFile).tempUrl = `//${domain}/${key}`;
 
                 resolve(options);
             }, 300);
@@ -44,7 +48,7 @@ class App extends React.Component {
 
     formatter: UploadProps['formatter'] = (res, file) => ({
         success: true,
-        url: file.tempUrl,
+        url: (file as ModifiedUploadFile).tempUrl,
     });
 
     render() {

diff --git a/components/upload/__tests__/card-spec.tsx b/components/upload/__tests__/card-spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Upload from '../index';
-import { type UploadFile } from '../types';
+import { type ObjectFile } from '../types';
 
 const CardUpload = Upload.Card;
 
@@ -143,7 +143,7 @@ describe('CardUpload', () => {
                                     'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
                                 imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
                             },
-                        ] as UploadFile[]
+                        ] as ObjectFile[]
                     }
                     onChange={onChange}
                     onRemove={onRemove}
@@ -193,7 +193,7 @@ describe('CardUpload', () => {
                                     'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
                                 imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
                             },
-                        ] as UploadFile[]
+                        ] as ObjectFile[]
                     }
                     onChange={onChange}
                     onCancel={onCancel}

diff --git a/components/upload/base.tsx b/components/upload/base.tsx
@@ -21,6 +21,6 @@ export default class Base<P, S> extends Component<P, S> {
     };
 
     isUploading() {
-        return this.uploaderRef.isUploading();
+        return this.uploaderRef.isUploading!();
     }
 }
diff --git a/components/upload/card.tsx b/components/upload/card.tsx
@@ -74,7 +74,7 @@ class Card extends Base<CardProps, CardState> {
     }
 
     static getDerivedStateFromProps(nextProps: CardProps, prevState: CardState) {
-        const isUploading = prevState.uploaderRef && prevState.uploaderRef.isUploading();
+        const isUploading = prevState.uploaderRef && prevState.uploaderRef.isUploading!();
         if ('value' in nextProps && nextProps.value !== prevState.value && !isUploading) {
             return {
                 value: !Array.isArray(nextProps.value)
@@ -168,7 +168,7 @@ class Card extends Base<CardProps, CardState> {
                 listType="card"
                 closable
                 locale={locale}
-                value={this.state.value as UploadFile[]}
+                value={this.state.value}
                 onRemove={onRemoveFunc}
                 onCancel={onCancel}
                 onPreview={onPreview}

diff --git a/components/upload/list.tsx b/components/upload/list.tsx
@@ -11,7 +11,7 @@ import zhCN from '../locale/zh-cn';
 import { previewFile } from './util';
 import transform from './transform';
 import Selecter from './runtime/selecter';
-import type { ListProps, UploadFile, ImageError } from './types';
+import type { ListProps, UploadFile, ImageError, ObjectFile } from './types';
 
 const isIE9 = env.ieVersion === 9;
 
@@ -83,7 +83,7 @@ class List extends Component<ListProps> {
             });
     }
 
-    handleClose = (file: UploadFile) => {
+    handleClose = (file: ObjectFile) => {
         const { onRemove, uploader } = this.props;
 
         const remove = onRemove!(file);
@@ -93,7 +93,7 @@ class List extends Component<ListProps> {
         });
     };
 
-    handleCancel = (file: UploadFile) => {
+    handleCancel = (file: ObjectFile) => {
         const { onCancel, uploader } = this.props;
         const cancel = onCancel!(file);
 
@@ -117,7 +117,7 @@ class List extends Component<ListProps> {
         return onPreview(file, e);
     }
 
-    getInfo(file: UploadFile) {
+    getInfo(file: ObjectFile) {
         const prefixCls = `${this.props.prefix}upload`;
         const downloadURL = file.downloadURL || file.url;
         const imgURL = file.imgURL || file.url;
@@ -153,7 +153,7 @@ class List extends Component<ListProps> {
 
         return `${fileSize}${suffix}`;
     }
-    getTextList(file: UploadFile) {
+    getTextList(file: ObjectFile) {
         const {
             locale,
             extraRender,
@@ -226,7 +226,7 @@ class List extends Component<ListProps> {
         );
     }
 
-    getImageList(file: UploadFile) {
+    getImageList(file: ObjectFile) {
         const { extraRender, actionRender, progressProps, rtl, fileNameRender, previewOnFileName } =
             this.props;
 
@@ -314,7 +314,7 @@ class List extends Component<ListProps> {
         uploader && files.length && uploader.replaceWithNewFile(oldfile, files[0]);
     };
 
-    getPictureCardList(file: UploadFile, isPreview?: boolean) {
+    getPictureCardList(file: ObjectFile, isPreview?: boolean) {
         const { locale, progressProps, fileNameRender, itemRender, showDownload } = this.props;
 
         const { prefixCls, downloadURL, imgURL, itemCls, alt } = this.getInfo(file);

diff --git a/components/upload/runtime/index.tsx b/components/upload/runtime/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Html5Uploader from './html5-uploader';
 import IframeUploader from './iframe-uploader';
-import type { UploadFile } from '../types';
+import type { Html5Props, UploadFile } from '../types';
 
 export default class Uploader extends React.Component<
-    unknown,
+    Html5Props,
     { Component: typeof Html5Uploader | typeof IframeUploader }
 > {
     state = {

diff --git a/components/upload/runtime/request.tsx b/components/upload/runtime/request.tsx
@@ -65,7 +65,8 @@ export default function upload(option: UploadOptions) {
         formData.append(option.filename!, option.file!);
     }
 
-    xhr.onerror = function error(e: ProgressEvent) {
+    xhr.onerror = function error(e) {
+        // @ts-expect-error 这里应该传入 UploadError，但实际传入的是 onerror 的 event
         option.onError!(e);
     };
 

diff --git a/components/upload/runtime/selecter.tsx b/components/upload/runtime/selecter.tsx
@@ -42,7 +42,7 @@ export default class Selecter extends Component<SelecterProps> {
 
     onSelect = (e: ChangeEvent<HTMLInputElement>) => {
         const files = e.target!.files;
-        const filesArr = files!.length ? Array.prototype.slice.call(files) : [files];
+        const filesArr: File[] = files!.length ? Array.prototype.slice.call(files) : [files];
 
         filesArr.forEach((file: UploadFile) => {
             file.uid = uid();