lu-lowcode-package-form 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@testing-library/jest-dom": "^5.17.0",

package/src/components/field/upload/upload-image.jsx

@@ -2,7 +2,7 @@ import { Upload as OriginalUpload, Button, Image, Spin } from "antd";
 
 import { BaseWrapper } from "../base.jsx"
 import { DeleteOutlined, EyeOutlined, PlusOutlined } from "@ant-design/icons";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState, version } from "react";
 
 const UploadImage = ({ maxCount, value, onChange, ...props }) => {
     useEffect(() => {
@@ -17,8 +17,19 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
                 }
             }
 
-            if ((!fileList || fileList.length == 0 ) && Array.isArray(value))
-                setFileList(value)
+            let _fileList = []
+            if (Array.isArray(value)) 
+                for (let i = 0; i < value.length; i++) {
+                    let file = value[i]
+                    var oldfile = fileMap.current.find((item) => item.uid === file.uid)
+                    console.log("set file", file)
+                    console.log("set oldfile", oldfile)
+                    if (!oldfile ||( (oldfile.version||0) < (file.version||0 )))
+                        _fileList.push(file)
+                    else _fileList.push(oldfile)
+                }
+            
+            setFileList(_fileList)
         }
     }, [value]);
     maxCount = maxCount || 9;
@@ -26,6 +37,7 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
     const [previewImage, setPreviewImage] = useState('');
     const [previewImageIndex, setPreviewImageIndex] = useState(0);
     const [previewOpen, setPreviewOpen] = useState(false);
+    const fileMap = useRef([]);
 
     const getBase64 = (file) =>
         new Promise((resolve, reject) => {
@@ -59,26 +71,40 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
 
     );
     const handleChange = async ({ fileList: newFileList }) => {
+
+        let handleFileList = []
+
         for (let i = 0; i < newFileList.length; i++) {
             var file = newFileList[i];
-            if (file.status == "done" && file.response) {
-                file.url = file.response;
+            file.version = new Date().getTime()
+            var oldfile = fileMap.current.find((item) => item.uid === file.uid)
+            if (oldfile && oldfile.status != "uploading") {
+                handleFileList.push(oldfile)
+            }
+            else {
+                if (file.status == "done" && file.response) {
+                    file.url = file.response;
+                }
+                if (!file.url && file.originFileObj)
+                    file.base64 = await getBase64(file.originFileObj)
+                newFileList[i] = file
+                handleFileList.push(file)
             }
-            if (!file.url && file.originFileObj)
-                file.base64 = await getBase64(file.originFileObj)
-            newFileList[i] = file
         }
         console.log("newFileList", JSON.parse(JSON.stringify(newFileList)))
-        onChange(newFileList.map((file) => {
+        console.log("handleFileList", JSON.parse(JSON.stringify(handleFileList)))
+        fileMap.current = handleFileList
+        setFileList(handleFileList);
+        onChange(handleFileList.map((file) => {
             return {
                 uid: file.uid,
                 name: file.name,
                 status: file.status,
                 url: file.url || file.response || "",
                 error: file.error,
+                version: file.version || 0
             }
         }))
-        setFileList(newFileList);
     }
     return (
         <BaseWrapper {...props}>
@@ -105,13 +131,13 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
                             let index = fileList.findIndex((item) => item.uid === file.uid)
                             return (
                                 <>
-                                    <div key={`file-${file.uid}`} className={"fgroup fw-full fh-full fbg-transparent fborder frounded fflex fitems-center fjustify-center foverflow-hidden fcursor-pointer frelative" + (file.status == "error" ?" fborder-red-500":"")}>
+                                    <div key={`file-${file.uid}`} className={"fgroup fw-full fh-full fbg-transparent fborder frounded fflex fitems-center fjustify-center foverflow-hidden fcursor-pointer frelative" + (file.status == "error" ? " fborder-red-500" : "")}>
                                         <div className=" fhidden fabsolute fw-full fh-full fbg-gray-900 fbg-opacity-50  fitems-center fjustify-center fz-10 group-hover:fflex  ftext-white ftext-lg fgap-2">
-                                           {file.status == "done" && <EyeOutlined onClick={() => { handlePreview(file, index) }} className="hover:ftext-gray-200" />}
+                                            {file.status == "done" && <EyeOutlined onClick={() => { handlePreview(file, index) }} className="hover:ftext-gray-200" />}
                                             <DeleteOutlined onClick={() => { handleDelete(file, index) }} className="hover:ftext-gray-200" />
-                                            
+
                                         </div>
-                                        {file.status == "uploading" &&  <div className=" fw-full fh-full fflex fitems-center fjustify-center fabsolute ftop-0 fleft-0 "><Spin></Spin></div>}
+                                        {file.status == "uploading" && <div className=" fw-full fh-full fflex fitems-center fjustify-center fabsolute ftop-0 fleft-0 "><Spin></Spin></div>}
                                         <img src={file.url || file.base64} alt="Example Image" class="fmax-w-full fmax-h-full fobject-contain " />
                                     </div>
                                 </>