Feature upload callback (#105)

* feat(uplaod): add onImageClick * fix: import path * docs: onFail type definition * fix: cnpm package install failed * refactor: update typescript version * chore: lock @swc/core to 1.3.6
NeteaseYanxuan · Dec 7, 2022 · 56c33bd · 56c33bd · vercel · Dec 7, 2022
1 parent ca7417e
commit 56c33bd
Show file tree

Hide file tree

Showing 8 changed files with 16,518 additions and 18,644 deletions.
diff --git a/.changeset/large-cameras-tell.md b/.changeset/large-cameras-tell.md
@@ -0,0 +1,7 @@
+---
+"ossaui": patch
+"ossa-demo": patch
+"ossa-doc": patch
+---
+
+add onImageClick for upload
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "overrides": {
       "@types/react": "^17.0.0",
       "@types/react-dom": "^17.0.0",
-      "typescript": "^3.9.5"
+      "@swc/core": "1.3.6"
     }
   }
 }
diff --git a/packages/ossa-demo/src/components/upload/demo/index.tsx b/packages/ossa-demo/src/components/upload/demo/index.tsx
@@ -43,11 +43,18 @@ const initialListEvent = {
       list: [
         "onChange",
         "上传成功回调(此时可自行将图片上传至服务器)",
-        "(files: Array, operationType: string, index: number) => void(注：1.index在operationType为remove时有效；2.严选安卓APP此处生成的图片链接为base64）",
+        "(files: Array, operationType: string, index: number) => void(注：1.index在operationType为remove时有效；)",
       ],
     },
     {
-      list: ["onFail", "上传失败触发", "(data: object) => void"],
+      list: [
+        "onImageClick",
+        "图片列表点击回调",
+        "(index: number, file: ImageFile) => void",
+      ],
+    },
+    {
+      list: ["onFail", "上传失败触发", "(err: TaroGeneral.CallbackResult) => void"],
     },
   ],
 };
@@ -62,6 +69,13 @@ function onChange(file, operationType, index) {
 function onFail(data) {
   console.log("上传失败，失败信息：" + JSON.stringify(data));
 }
+
+function onClick(index, file) {
+  console.log("图片文件:");
+  console.log(file);
+  console.log("图片索引:" + index);
+}
+
 const demoTitle = "Upload 图片上传";
 export default function Index(props: Props) {
   const [listApi] = useState(initialListApi);
@@ -83,6 +97,7 @@ export default function Index(props: Props) {
             onChange={(file, operationType, index) =>
               onChange(file, operationType, index)
             }
+            onImageClick={(index, file) => onClick(index, file)}
             onFail={(data) => onFail(data)}
           ></OsUpload>
         </View>

diff --git a/packages/ossa-doc/docs/组件/upload.md b/packages/ossa-doc/docs/组件/upload.md
@@ -1,37 +1,51 @@
 ---
 sidebar_position: 32
-demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/upload/demo/index'
+demo_url: "https://neteaseyanxuan.github.io/OSSA/#/components/upload/demo/index"
 ---
 
 # Upload 图片上传
 
 ## 介绍
+
 图片上传组件，用于选择图片
 
 ## 用法
+
 ### 普通
+
 ```jsx
 <OsUpload
-  onChange={(file, operationType, index) => onChange(file,operationType, index)}
+  onChange={(file, operationType, index) =>
+    onChange(file, operationType, index)
+  }
   onFail={(data) => onFail(data)}
 ></OsUpload>
 ```
 
-
-
 ## API
+
 ### 属性
-|参数|说明|类型|默认值|
-|------|------|------|------|
-|max|最大数量，可选|number|infinity|
-|multiple|开始多张传输，可选|boolean|true|
-|customStyle|自定义样式，可选|object|-|
-|className|自定义类名，可选|string|-|
 
+| 参数        | 说明               | 类型    | 默认值   |
+| ----------- | ------------------ | ------- | -------- |
+| max         | 最大数量，可选     | number  | infinity |
+| multiple    | 开始多张传输，可选 | boolean | true     |
+| customStyle | 自定义样式，可选   | CSSProperties  | -        |
+| className   | 自定义类名，可选   | string  | -        |
 
 ### 方法
-|函数名|说明|参数|
-|------|------|------|
-|onChange|上传成功回调\(此时可自行将图片上传至服务器\)|\(files: Array, operationType: string, index: number\) =\> void\(注：index在operationType为remove时有效|
-|onFail|上传失败触发|\(data: object\) =\> void|
 
+| 函数名       | 说明                                         | 参数                                                                                                               |
+| ------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| onChange     | 上传成功回调\(此时可自行将图片上传至服务器\) | \(files: ImageFile[], operationType: string, index: number\) =\> void\(注：index 在 operationType 为 remove 时有效 |
+| onImageClick | 图片列表点击回调                             | (index: number, file: ImageFile) => void                                                                           |
+| onFail       | 上传失败触发                                 | \(err: TaroGeneral.CallbackResult\) =\> void                                                                                          |
+
+#### ImageFile
+
+| 参数            | 类型   | 必填 | 说明                                   |
+| --------------- | ------ | ---- | -------------------------------------- |
+| path            | string | 是   | 本地临时文件路径                       |
+| size            | number | 是   | 本地临时文件大小，单位 B               |
+| type            | string | 否   | 文件的 MIME 类型, API 支持度: h5       |
+| originalFileObj | File   | 否   | 原始的浏览器 File 对象, API 支持度: h5 |
diff --git a/packages/ossa/package.json b/packages/ossa/package.json
@@ -63,7 +63,7 @@
     "stylelint-scss": "3.17.2",
     "ts-jest": "26",
     "tslib": "^2.4.0",
-    "typescript": "^3.9.5"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.4.12",

diff --git a/packages/ossa/src/components/upload/index.tsx b/packages/ossa/src/components/upload/index.tsx
@@ -5,6 +5,7 @@ import classNames from "classnames";
 import OsIcon from "../icon";
 //引入组件对应的 类型文件 .d.ts
 import { OsUploadProps } from "../../../types/index";
+import { ImageFile } from "../../../types/upload";
 
 function getStyleObj(props: OsUploadProps) {
   const _styleObj = {};
@@ -21,13 +22,13 @@ const ENV = Taro.getEnv();
 function onRemoveImg(
   props: OsUploadProps,
   index: number,
-  files: any,
+  files: ImageFile[],
   setFiles: Function,
   setUpload: Function
 ) {
   const { max = 99 } = props;
   if (ENV === Taro.ENV_TYPE.WEB) {
-    window.URL.revokeObjectURL(files[index].url);
+    window.URL.revokeObjectURL(files[index].path);
   }
   const newFiles = files.filter((file, i) => i !== index);
   setFiles(newFiles);
@@ -48,7 +49,6 @@ function onClick(
   setUpload: Function
 ) {
   const { multiple, max = 99 } = props;
-  const filePathName = "tempFiles";
   const params = {};
 
   if (multiple) {
@@ -60,10 +60,7 @@ function onClick(
 
   Taro.chooseImage(params)
     .then((res) => {
-      const targetFiles = res.tempFilePaths.map((path, i) => ({
-        url: path,
-        file: res[filePathName][i],
-      }));
+      const targetFiles = res.tempFiles
 
       setNewFiles(props, files, max, targetFiles, setFiles, setUpload);
     })
@@ -78,14 +75,18 @@ function setNewFiles(
   setFiles: Function,
   setUpload: Function
 ) {
-  const newFiles = files.concat(targetFiles);
+  const newFiles = [...files, ...targetFiles];
   setFiles(newFiles);
   if (newFiles.length >= max) {
     setUpload(false);
   }
   props.onChange?.(newFiles, "add", 0);
 }
 
+function onImageClick(props: OsUploadProps, index: number, file: ImageFile) {
+  props.onImageClick?.(index, file)
+}
+
 export default function Upload(props: OsUploadProps) {
   const rootClassName = "ossa-upload"; //组件
   const classObject = getClassObject(props); //组件修饰
@@ -107,9 +108,9 @@ export default function Upload(props: OsUploadProps) {
       <View className='ossa-upload__list'>
         {files &&
           files.length > 0 &&
-          files.map((item: any, index: number) => (
-            <View className='ossa-upload__item' key={item.url}>
-              <Image className='ossa-upload__item__img' src={item.url}></Image>
+          files.map((item: ImageFile, index: number) => (
+            <View className='ossa-upload__item' key={item.path}>
+              <Image className='ossa-upload__item__img' src={item.path} onClick={() => onImageClick(props, index, item)}></Image>
               <OsIcon
                 size={36}
                 type='upload-delete'

diff --git a/packages/ossa/types/upload.d.ts b/packages/ossa/types/upload.d.ts
@@ -2,21 +2,36 @@ import { ComponentClass, ReactChild } from "react";
 import { CommonEventFunction } from "@tarojs/components/types/common";
 import OsComponent from "./base";
 
+interface ImageFile {
+  /** 本地临时文件路径 */
+  path: string
+  /** 本地临时文件大小，单位 B */
+  size: number
+  /** 文件的 MIME 类型
+   * @supported h5
+   */
+  type?: string
+  /** 原始的浏览器 File 对象
+   * @supported h5
+   */
+  originalFileObj?: File
+}
+
 interface UploadProps extends OsComponent {
   max?: number;
   multiple?: boolean;
   files?: any;
-  customStyle?: object;
+  customStyle?: CSSProperties;
   classNames?: string;
   onChange?: (
-    files: Array<Object>,
+    files: Array<ImageFile>,
     operationType: string,
     index: number
   ) => void;
-  onImageClick?: (index: number, file: Object) => void;
-  onFail?: (message: string) => void;
+  onImageClick?: (index: number, file: ImageFile) => void;
+  onFail?: (err: TaroGeneral.CallbackResult) => void;
 }
 
 declare const Upload: ComponentClass<UploadProps>;
 
-export { Upload, UploadProps };
+export { Upload, UploadProps, ImageFile };