taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/Upload/Upload.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { chooseImage } from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import { Button } from '../../basic/Button';
 import { Text } from '../../basic/Text';
@@ -40,7 +41,6 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
   } = props;
 
   const containerRef = useRef(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
   const [internalFileList, setInternalFileList] = useState<UploadFile[]>(defaultFileList);
   const [uploading, setUploading] = useState(false);
   const [internalDisabled, setInternalDisabled] = useState(disabled);
@@ -68,67 +68,76 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
 
   // 验证文件
   const validateFile = useCallback(
-    (file: File): { valid: boolean; error?: string } => {
-      if (accept && !file.type.match(accept.replace('*', '.*'))) {
-        return { valid: false, error: `File type ${file.type} is not supported` };
+    (file: any): { valid: boolean; error?: string } => {
+      const filename = file.name || file.path.split('/').pop() || '';
+      const fileSize = file.size || 0;
+
+      if (accept) {
+        const ext = filename.split('.').pop()?.toLowerCase();
+        if (ext) {
+          const allowedExts = accept
+            .replace(/\*\/\*|\*/g, '')
+            .split(',')
+            .map((e) => e.trim().replace('.', ''));
+          if (allowedExts.length > 0 && !allowedExts.includes(ext)) {
+            return { valid: false, error: `File type .${ext} is not supported` };
+          }
+        }
       }
-      
-      if (maxSize && file.size > maxSize) {
-        return { valid: false, error: `File size ${file.size} exceeds maximum size ${maxSize}` };
+
+      if (maxSize && fileSize > maxSize) {
+        return { valid: false, error: `File size ${fileSize} exceeds maximum size ${maxSize}` };
       }
-      
+
       return { valid: true };
     },
     [accept, maxSize],
   );
 
-  // 处理文件选择
-  const handleFileSelect = useCallback(
-    (files: FileList | null) => {
-      if (!files || internalDisabled) return;
-
-      const fileArray = Array.from(files);
-      const validFiles = fileArray.filter(file => {
-        const validation = validateFile(file);
-        if (!validation.valid) {
-          onError?.(new Error(validation.error!), file);
-        }
-        return validation.valid;
-      });
+  // 移除文件
+  const handleRemove = useCallback(
+    (file: UploadFile) => {
+      const newFileList = fileList.filter((f) => f.uid !== file.uid);
+      handleFileChange(newFileList);
+      onRemove?.(file);
+    },
+    [fileList, handleFileChange, onRemove],
+  );
 
-      const limitedFiles = maxCount ? validFiles.slice(0, maxCount - fileList.length) : validFiles;
-      
-      limitedFiles.forEach(file => {
-        uploadFile(file);
-      });
+  // 预览文件
+  const handlePreview = useCallback(
+    (file: UploadFile) => {
+      onPreview?.(file);
     },
-    [internalDisabled, validateFile, maxCount, fileList.length, onError],
+    [onPreview],
   );
 
   // 上传文件
   const uploadFile = useCallback(
-    async (file: File) => {
+    async (file: any, tempFilePath: string) => {
       if (internalDisabled) return;
 
       try {
         // 上传前验证
         if (beforeUpload) {
-          const result = await beforeUpload(file);
+          // 由于 Taro 没有原生 File 对象，这里模拟一个类似的对象
+          const mockFile = {
+            ...file,
+            type: `image/${file.path.split('.').pop()}`,
+          };
+          const result = await beforeUpload(mockFile as any);
           if (result === false) return;
-          if (result instanceof File) {
-            file = result;
-          }
         }
 
         const uidString = String(Date.now() + Math.random());
         const newFile: UploadFile = {
           uid: uidString,
-          name: file.name,
+          name: file.path.split('/').pop() || 'unknown_file',
           size: file.size,
-          type: file.type,
+          type: `image/${file.path.split('.').pop()}`,
           status: 'uploading',
           percent: 0,
-          originFileObj: file,
+          url: tempFilePath,
         };
 
         const newFileList = [...fileList, newFile];
@@ -137,100 +146,161 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
 
         // 上传逻辑
         if (customRequest) {
+          // 自定义上传，提供模拟的 File 对象
+          const mockFile = {
+            ...file,
+            type: `image/${file.path.split('.').pop()}`,
+          };
           await customRequest({
-            file,
-            filename: file.name,
+            file: mockFile as any,
+            filename: mockFile.name,
             data: {},
             headers,
             withCredentials,
             action: action || '',
             onProgress: (percent: number) => {
-              const updatedFileList: UploadFile[] = fileList.map(f =>
-                f.uid === uidString ? { ...f, percent, status: 'uploading' as const } : f
+              const updatedFileList: UploadFile[] = fileList.map((f) =>
+                f.uid === uidString ? { ...f, percent, status: 'uploading' as const } : f,
               );
               handleFileChange(updatedFileList);
-              onProgress?.(percent, file);
+              onProgress?.(percent, mockFile as any);
             },
             onSuccess: (response: any) => {
-              const updatedFileList: UploadFile[] = fileList.map(f =>
-                f.uid === uidString ? { ...f, status: 'done' as const, response } : f
+              const updatedFileList: UploadFile[] = fileList.map((f) =>
+                f.uid === uidString ? { ...f, status: 'done' as const, response } : f,
               );
               handleFileChange(updatedFileList);
-              onSuccess?.(response, file);
+              onSuccess?.(response, mockFile as any);
               setUploading(false);
             },
             onError: (error: Error) => {
-              const updatedFileList: UploadFile[] = fileList.map(f =>
-                f.uid === uidString ? { ...f, status: 'error' as const, error } : f
+              const updatedFileList: UploadFile[] = fileList.map((f) =>
+                f.uid === uidString ? { ...f, status: 'error' as const, error } : f,
               );
               handleFileChange(updatedFileList);
-              onError?.(error, file);
+              onError?.(error, mockFile as any);
               setUploading(false);
             },
           });
+        } else if (action) {
+          // 使用 Taro API 上传文件
+          import('@tarojs/taro').then(({ uploadFile: taroUploadFile }) => {
+            taroUploadFile({
+              url: action,
+              filePath: tempFilePath,
+              name: 'file',
+              header: headers,
+              formData: {},
+              success: (res: any) => {
+                const response = res.data;
+                const updatedFileList: UploadFile[] = fileList.map((f) =>
+                  f.uid === uidString ? { ...f, status: 'done' as const, response } : f,
+                );
+                handleFileChange(updatedFileList);
+                onSuccess?.(response, file as any);
+                setUploading(false);
+              },
+              fail: (err: any) => {
+                const error = new Error(err.errMsg);
+                const updatedFileList: UploadFile[] = fileList.map((f) =>
+                  f.uid === uidString ? { ...f, status: 'error' as const, error } : f,
+                );
+                handleFileChange(updatedFileList);
+                onError?.(error, file as any);
+                setUploading(false);
+              },
+            });
+          });
         } else {
-          // 模拟上传
+          // 模拟上传（用于演示）
           for (let percent = 0; percent <= 100; percent += 10) {
-            const updatedFileList: UploadFile[] = fileList.map(f =>
-              f.uid === uidString ? { ...f, percent, status: 'uploading' as const } : f
+            const updatedFileList: UploadFile[] = fileList.map((f) =>
+              f.uid === uidString ? { ...f, percent, status: 'uploading' as const } : f,
             );
             handleFileChange(updatedFileList);
-            onProgress?.(percent, file);
-            await new Promise(resolve => setTimeout(resolve, 100));
+            onProgress?.(percent, file as any);
+            await new Promise((resolve) => setTimeout(resolve, 100));
           }
 
-          const updatedFileList: UploadFile[] = fileList.map(f =>
-            f.uid === uidString ? { ...f, status: 'done' as const, response: { success: true } } : f
+          const updatedFileList: UploadFile[] = fileList.map((f) =>
+            f.uid === uidString ? { ...f, status: 'done' as const, response: { success: true } } : f,
           );
           handleFileChange(updatedFileList);
-          onSuccess?.({ success: true }, file);
+          onSuccess?.({ success: true }, file as any);
           setUploading(false);
         }
       } catch (error) {
         // Find the uploading file (the most recent one) and mark it as error
-        const uploadingFile = fileList.find(f => f.status === 'uploading');
+        const uploadingFile = fileList.find((f) => f.status === 'uploading');
         if (uploadingFile) {
           const errorObj = error instanceof Error ? error : new Error(String(error));
-          const updatedFileList: UploadFile[] = fileList.map(f =>
-            f.uid === uploadingFile.uid ? { ...f, status: 'error' as const, error: errorObj } : f
+          const updatedFileList: UploadFile[] = fileList.map((f) =>
+            f.uid === uploadingFile.uid ? { ...f, status: 'error' as const, error: errorObj } : f,
           );
           handleFileChange(updatedFileList);
         }
-        onError?.(error as Error, file);
+        onError?.(error as Error, file as any);
         setUploading(false);
       }
     },
-    [internalDisabled, beforeUpload, customRequest, action, headers, withCredentials, fileList, handleFileChange, onProgress, onSuccess, onError],
+    [
+      internalDisabled,
+      beforeUpload,
+      customRequest,
+      action,
+      headers,
+      withCredentials,
+      fileList,
+      handleFileChange,
+      onProgress,
+      onSuccess,
+      onError,
+    ],
   );
 
-  // 移除文件
-  const handleRemove = useCallback(
-    (file: UploadFile) => {
-      const newFileList = fileList.filter(f => f.uid !== file.uid);
-      handleFileChange(newFileList);
-      onRemove?.(file);
-    },
-    [fileList, handleFileChange, onRemove],
-  );
+  // 处理文件选择
+  const handleFileSelect = useCallback(async () => {
+    if (internalDisabled) return;
+
+    try {
+      // 使用 Taro API 选择图片
+      const { tempFilePaths, tempFiles } = await chooseImage({
+        count: maxCount ? Math.max(0, maxCount - fileList.length) : 9,
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album', 'camera'],
+      });
 
-  // 预览文件
-  const handlePreview = useCallback(
-    (file: UploadFile) => {
-      onPreview?.(file);
-    },
-    [onPreview],
-  );
+      // 过滤有效的文件
+      const validFiles = tempFiles.filter((file) => {
+        const validation = validateFile(file);
+        if (!validation.valid) {
+          onError?.(new Error(validation.error!), file as any);
+        }
+        return validation.valid;
+      });
+
+      // 上传有效文件
+      for (const file of validFiles) {
+        const index = validFiles.indexOf(file);
+        if (tempFilePaths[index]) {
+          await uploadFile(file, tempFilePaths[index]);
+        }
+      }
+    } catch (error) {
+      // 处理取消选择等情况
+      if ((error as any).errMsg !== 'chooseImage:fail cancel') {
+        onError?.(error as Error, {} as any);
+      }
+    }
+  }, [internalDisabled, validateFile, maxCount, fileList.length, onError, uploadFile, fileList]);
 
-  
   // 处理点击事件
   const handleClick = useCallback(
     (_event: ITouchEvent) => {
       if (internalDisabled) return;
-      if (fileInputRef.current) {
-        fileInputRef.current.click();
-      }
+      handleFileSelect();
     },
-    [internalDisabled],
+    [internalDisabled, handleFileSelect],
   );
 
   // 暴露给外部的引用方法
@@ -242,12 +312,17 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
       clearFileList: () => {
         handleFileChange([]);
       },
-      upload: (file: File) => {
-        uploadFile(file);
+      upload: (file: any, tempFilePath?: string) => {
+        if (tempFilePath) {
+          uploadFile(file, tempFilePath);
+        } else {
+          // 如果只提供了文件路径，直接上传
+          uploadFile({ path: file, size: 0 }, file);
+        }
       },
       abort: (file: UploadFile) => {
-        const newFileList: UploadFile[] = fileList.map(f =>
-          f.uid === file.uid ? { ...f, status: 'error' as const, error: new Error('Upload aborted') } : f
+        const newFileList: UploadFile[] = fileList.map((f) =>
+          f.uid === file.uid ? { ...f, status: 'error' as const, error: new Error('Upload aborted') } : f,
         );
         handleFileChange(newFileList);
       },
@@ -293,7 +368,7 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
   // 生成文件项样式
   const fileItemStyle = {
     display: 'flex',
-    justifyContent: 'space-between',
+    justifyContent: 'space-between' as const,
     alignItems: 'center',
     padding: '12px',
     borderBottom: '1px solid #e5e7eb',
@@ -324,10 +399,11 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
 
   // 无障碍状态
   const finalAccessibilityState = {
-    disabled: internalDisabled,    busy: uploading,    ...accessibilityState,
+    disabled: internalDisabled,
+    busy: uploading,
+    ...accessibilityState,
   };
 
-
   // 渲染上传按钮
   const renderUploadButton = useCallback(() => {
     if (children) {
@@ -337,14 +413,12 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
     return (
       <Button
         type="primary"
-        size="small"
-        disabled={internalDisabled || !!maxCount && fileList.length >= maxCount}
+        size="sm"
+        disabled={internalDisabled || (!!maxCount && fileList.length >= maxCount)}
         loading={uploading}
         style={buttonStyle}
       >
-        <Text style={{ color: '#ffffff', fontSize: 12 }}>
-          {multiple ? '选择文件' : '上传文件'}
-        </Text>
+        <Text style={{ color: '#ffffff', fontSize: 12 }}>{multiple ? '选择文件' : '上传文件'}</Text>
       </Button>
     );
   }, [children, internalDisabled, maxCount, fileList.length, uploading, multiple, buttonStyle]);
@@ -355,41 +429,21 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
 
     return (
       <View style={fileListStyle}>
-        {fileList.map(file => (
+        {fileList.map((file) => (
           <View key={file.uid} style={fileItemStyle}>
             <View style={fileInfoStyle}>
-              <Text style={{ fontSize: 14, color: '#374151', fontWeight: 500 }}>
-                {file.name}
-              </Text>
-              <Text style={{ fontSize: 12, color: '#6b7280' }}>
-                {(file.size / 1024).toFixed(2)} KB
-              </Text>
-              {file.status === 'uploading' && (
-                <Text style={{ fontSize: 12, color: '#3b82f6' }}>
-                  {file.percent}%
-                </Text>
-              )}
-              {file.status === 'error' && (
-                <Text style={{ fontSize: 12, color: '#ef4444' }}>
-                  上传失败
-                </Text>
-              )}
+              <Text style={{ fontSize: 14, color: '#374151', fontWeight: 500 }}>{file.name}</Text>
+              <Text style={{ fontSize: 12, color: '#6b7280' }}>{(file.size / 1024).toFixed(2)} KB</Text>
+              {file.status === 'uploading' && <Text style={{ fontSize: 12, color: '#3b82f6' }}>{file.percent}%</Text>}
+              {file.status === 'error' && <Text style={{ fontSize: 12, color: '#ef4444' }}>上传失败</Text>}
             </View>
             <View style={fileActionsStyle}>
               {file.status === 'done' && onPreview && (
-                <Button
-                  size="small"
-                  onClick={() => handlePreview(file)}
-                  style={{ ...buttonStyle, color: '#3b82f6' }}
-                >
+                <Button size="sm" onClick={() => handlePreview(file)} style={{ ...buttonStyle, color: '#3b82f6' }}>
                   <Text style={{ fontSize: 12 }}>预览</Text>
                 </Button>
               )}
-              <Button
-                size="small"
-                onClick={() => handleRemove(file)}
-                style={{ ...buttonStyle, color: '#ef4444' }}
-              >
+              <Button size="sm" onClick={() => handleRemove(file)} style={{ ...buttonStyle, color: '#ef4444' }}>
                 <Text style={{ fontSize: 12 }}>删除</Text>
               </Button>
             </View>
@@ -397,7 +451,16 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
         ))}
       </View>
     );
-  }, [showUploadList, fileList, handlePreview, handleRemove, fileItemStyle, fileInfoStyle, fileActionsStyle, buttonStyle]);
+  }, [
+    showUploadList,
+    fileList,
+    handlePreview,
+    handleRemove,
+    fileItemStyle,
+    fileInfoStyle,
+    fileActionsStyle,
+    buttonStyle,
+  ]);
 
   return (
     <View
@@ -410,34 +473,18 @@ export const UploadComponent = forwardRef<UploadRef, UploadProps>((props, ref) =
       {...restProps}
     >
       {drag ? (
-        <View
-          style={dragAreaStyle}
-        >
+        <View style={dragAreaStyle}>
           <View style={{ marginBottom: '12px' }}>
-            <Text style={{ fontSize: 14, color: '#6b7280', marginBottom: '8px' }}>
-              拖拽文件到此处或
-            </Text>
-            {renderUploadButton()}
+            <Text style={{ fontSize: 14, color: '#6b7280', marginBottom: '8px' }}>拖拽文件到此处或</Text>
+            <View onClick={handleClick}>{renderUploadButton()}</View>
           </View>
         </View>
       ) : (
         <View style={{ marginBottom: '16px' }}>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept={accept}
-            multiple={multiple}
-            disabled={Boolean(internalDisabled || Boolean(maxCount && fileList.length >= maxCount))}
-            onChange={(e) => handleFileSelect(e.target.files)}
-            style={{ display: 'none' }}
-            id="upload-input"
-          />
-          <View onClick={handleClick}>
-            {renderUploadButton()}
-          </View>
+          <View onClick={handleClick}>{renderUploadButton()}</View>
         </View>
       )}
-      
+
       {renderFileList()}
     </View>
   );
@@ -448,4 +495,4 @@ UploadComponent.displayName = 'Upload';
 
 /** 导出上传组件 */
 export const Upload = UploadComponent;
-export default Upload;
+export default Upload;

package/src/components/form/Upload/Upload.types.ts

@@ -47,7 +47,7 @@ export interface UploadProps {
   /** 是否携带cookie */
   withCredentials?: boolean;
   /** 上传前的钩子 */
-  beforeUpload?: (_file: File) => Promise<boolean | File> | boolean | File;
+  beforeUpload?: (_file: any) => Promise<boolean | any> | boolean | any;
   /** 自定义上传方法 */
   customRequest?: (_options: UploadRequestOptions) => Promise<void>;
   /** 文件状态改变的回调 */
@@ -57,11 +57,11 @@ export interface UploadProps {
   /** 预览文件的回调 */
   onPreview?: (_file: UploadFile) => void;
   /** 上传成功的回调 */
-  onSuccess?: (_response: any, _file: File) => void;
+  onSuccess?: (_response: any, _file: any) => void;
   /** 上传失败的回调 */
-  onError?: (_error: Error, _file: File) => void;
+  onError?: (_error: Error, _file: any) => void;
   /** 上传进度的回调 */
-  onProgress?: (_percent: number, _file: File) => void;
+  onProgress?: (_percent: number, _file: any) => void;
   /** 是否显示文件列表 */
   showUploadList?: boolean;
   /** 列表样式 */
@@ -91,7 +91,7 @@ export interface UploadProps {
 
 export interface UploadRequestOptions {
   /** 文件对象 */
-  file: File;
+  file: any;
   /** 文件名 */
   filename: string;
   /** 附加数据 */
@@ -116,7 +116,7 @@ export interface UploadRef {
   /** 清空文件列表 */
   clearFileList: () => void;
   /** 上传文件 */
-  upload: (file: File) => void;
+  upload: (file: any, tempFilePath?: string) => void;
   /** 中止上传 */
   abort: (file: UploadFile) => void;
 }
@@ -136,20 +136,20 @@ export interface UploadLocale {
   maxCountError: string;
 }
 
-export interface UploadUtils {
+export interface UploadUtilsType {
   /** 格式化文件大小 */
   formatFileSize: (bytes: number) => string;
   /** 获取文件扩展名 */
   getFileExtension: (filename: string) => string;
   /** 检查文件类型 */
-  checkFileType: (file: File, accept: string) => boolean;
+  checkFileType: (file: any, accept: string) => boolean;
   /** 检查文件大小 */
-  checkFileSize: (file: File, maxSize: number) => boolean;
+  checkFileSize: (file: any, maxSize: number) => boolean;
   /** 生成文件预览URL */
-  generatePreviewUrl: (file: File) => Promise<string>;
+  generatePreviewUrl: (file: any) => Promise<string>;
 }
 
-export const UploadUtils: UploadUtils = {
+export const UploadUtils: UploadUtilsType = {
   formatFileSize: (bytes: number) => {
     if (bytes === 0) return '0 Bytes';
 
@@ -161,40 +161,40 @@ export const UploadUtils: UploadUtils = {
   },
 
   getFileExtension: (filename: string) => {
-    return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2);
+    return filename.slice(((filename.lastIndexOf('.') - 1) >>> 0) + 2);
   },
 
-  checkFileType: (file: File, accept: string) => {
-    const acceptTypes = accept.split(',').map(type => type.trim());
-    return acceptTypes.some(type => {
+  checkFileType: (file: any, accept: string) => {
+    const acceptTypes = accept.split(',').map((type) => type.trim());
+    const filename = file.name || file.path.split('/').pop() || '';
+    const fileType = file.type || `image/${filename.split('.').pop()}`;
+
+    return acceptTypes.some((type) => {
       if (type.startsWith('.')) {
-        return file.name.toLowerCase().endsWith(type.toLowerCase());
+        return filename.toLowerCase().endsWith(type.toLowerCase());
       }
       if (type.includes('/*')) {
         const mainType = type.split('/')[0];
-        return file.type.startsWith(mainType || '');
+        return fileType.startsWith(mainType || '');
       }
-      return file.type === type;
+      return fileType === type;
     });
   },
 
-  checkFileSize: (file: File, maxSize: number) => {
+  checkFileSize: (file: any, maxSize: number) => {
     return file.size <= maxSize;
   },
 
-  generatePreviewUrl: (file: File) => {
+  generatePreviewUrl: (file: any) => {
+    // 在 Taro 环境中，直接使用临时文件路径作为预览 URL
     return new Promise((resolve, reject) => {
-      if (!file.type.startsWith('image/')) {
-        reject(new Error('File is not an image'));
-        return;
+      if (file.tempFilePath) {
+        resolve(file.tempFilePath);
+      } else if (file.path) {
+        resolve(file.path);
+      } else {
+        reject(new Error('Cannot generate preview URL'));
       }
-
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        resolve(e.target?.result as string);
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
     });
   },
-};
+};

package/src/components/form/Upload/index.tsx

@@ -9,4 +9,4 @@ export type {
   UploadLocale,
   UploadUtils,
 } from './Upload.types';
-export { uploadStyles } from './Upload.styles';
+export { uploadStyles } from './Upload.styles';