Feature upload max (#150)

* Version Packages * chore: disable surge teardown * fix: upload component max prop not work when init * chore: changelog lost --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
NeteaseYanxuan · Jun 4, 2024 · 5017317 · 5017317
1 parent 7b8c92b
commit 5017317
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git a/.changeset/serious-hats-explode.md b/.changeset/serious-hats-explode.md
@@ -0,0 +1,7 @@
+---
+"ossa-demo": patch
+"ossaui": patch
+"ossa-doc": patch
+---
+
+upload component max prop not work when init
diff --git a/packages/ossa-demo/src/components/upload/demo/index.tsx b/packages/ossa-demo/src/components/upload/demo/index.tsx
@@ -21,6 +21,9 @@ const initialListApi = {
   title: "API",
   head: ["参数", "说明", "类型", "默认值"],
   data: [
+    {
+      list: ["files", "初始图片列表，可选", "ImageFile[]", ""],
+    },
     {
       list: ["max", "最大数量，可选", "number", "99"],
     },
@@ -59,6 +62,21 @@ const initialListEvent = {
   ],
 };
 
+const listFile = {
+  title: "API-ImageFile",
+  head: ["参数", "说明", "类型", "默认值"],
+  data: [
+    {
+      list: [
+        "path",
+        "资源路径，可选",
+        "string",
+        ""
+      ],
+    }
+  ],
+}
+
 function onChange(file, operationType, index) {
   console.log("图片文件:");
   console.log(file);
@@ -130,6 +148,10 @@ export default function Index(_props: Props) {
         <DemoTable list={listApi}></DemoTable>
       </DemoBlock>
 
+      <DemoBlock>
+        <DemoTable list={listFile}></DemoTable>
+      </DemoBlock>
+
       <DemoBlock>
         <DemoTable list={listEvent}></DemoTable>
       </DemoBlock>

diff --git a/packages/ossa-doc/docs/组件/upload.md b/packages/ossa-doc/docs/组件/upload.md
@@ -28,6 +28,7 @@ demo_url: "https://neteaseyanxuan.github.io/OSSA/#/components/upload/demo/index"
 
 | 参数        | 说明               | 类型    | 默认值   |
 | ----------- | ------------------ | ------- | -------- |
+| files       | 初始图片列表，可选    | ImageFile[]  |    |
 | max         | 最大数量，可选     | number  | 99 |
 | multiple    | 开始多张传输，可选，`multiple`属性在未来版本中将被删除，请使用`max`代替 | boolean | true     |
 | customStyle | 自定义样式，可选   | CSSProperties  | -        |

diff --git a/packages/ossa/src/components/upload/index.tsx b/packages/ossa/src/components/upload/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from "react";
+import React, { CSSProperties, useEffect, useState } from "react";
 import Taro from "@tarojs/taro";
 import { View, Image } from "@tarojs/components";
 import classNames from "classnames";
@@ -25,19 +25,12 @@ function onRemoveImg(
   index: number,
   files: ImageFile[],
   setFiles: Function,
-  setUpload: Function
 ) {
-  const { max = 99 } = props;
   if (ENV === Taro.ENV_TYPE.WEB) {
     window.URL.revokeObjectURL(files[index].path);
   }
   const newFiles = files.filter((file, i) => i !== index);
   setFiles(newFiles);
-  if (newFiles.length >= max) {
-    setUpload(false);
-  } else {
-    setUpload(true);
-  }
   props.onChange?.(newFiles, "remove", index);
 }
 
@@ -47,7 +40,6 @@ function onClick(
   props: OsUploadProps,
   files: ImageFile[],
   setFiles: Function,
-  setUpload: Function
 ) {
   const { multiple, max = 99 } = props;
 
@@ -65,7 +57,7 @@ function onClick(
     .then((res) => {
       const targetFiles = res.tempFiles
 
-      setNewFiles(props, files, max, targetFiles, setFiles, setUpload);
+      setNewFiles(props, files, max, targetFiles, setFiles);
     })
     .catch(props.onFail);
 }
@@ -76,13 +68,9 @@ function setNewFiles(
   max: number,
   targetFiles: ImageFile[],
   setFiles: Function,
-  setUpload: Function
 ) {
   const newFiles = [...files, ...targetFiles];
   setFiles(newFiles);
-  if (newFiles.length >= max) {
-    setUpload(false);
-  }
   props.onChange?.(newFiles.slice(0, max), "add", 0);
 }
 
@@ -91,11 +79,17 @@ function onImageClick(props: OsUploadProps, index: number, file: ImageFile) {
 }
 
 export default function Upload(props: OsUploadProps) {
+  const { max = 99 } = props;
   const rootClassName = "ossa-upload"; //组件
   const classObject = getClassObject(props); //组件修饰
   const styleObject = Object.assign(getStyleObj(props), props.customStyle);
   const [upload, setUpload] = useState(initialUploads);
   const [files = [], setFiles] = useState(props.files);
+
+  useEffect(() => {
+    setUpload(files.length < max);
+  }, [files, max])
+
   const _deleteIconStyle: CSSProperties = {
     position: "absolute",
     right: Taro.pxTransform(-18),
@@ -119,7 +113,7 @@ export default function Upload(props: OsUploadProps) {
                 type='upload-delete'
                 customStyle={_deleteIconStyle}
                 onClick={() =>
-                  onRemoveImg(props, index, files, setFiles, setUpload)
+                  onRemoveImg(props, index, files, setFiles)
                 }
               ></OsIcon>
             </View>
@@ -128,7 +122,7 @@ export default function Upload(props: OsUploadProps) {
           <View
             className='ossa-upload__btn'
             onClick={() => {
-              onClick(props, files, setFiles, setUpload);
+              onClick(props, files, setFiles);
             }}
           >
             <OsIcon