@sunggang/ui-lib 0.3.63 → 0.3.64

package/index.esm2.js

@@ -18057,8 +18057,6 @@ var DropImage = function(param) {
     var currentImageCount = (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) || 0;
     var remainingSlots = maxTotalImages - currentImageCount;
     var canUploadMore = remainingSlots > 0;
-    // 動態調整 maxFiles，不能超過剩餘空間
-    var dynamicMaxFiles = Math.min(maxFiles, remainingSlots);
     var _useDropzone = useDropzone({
         accept: {
             "image/png": [
@@ -18069,30 +18067,13 @@ var DropImage = function(param) {
                 ".jpeg"
             ]
         },
-        maxFiles: dynamicMaxFiles,
+        maxFiles: maxFiles,
         maxSize: DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES,
         disabled: !canUploadMore,
         onDrop: function(dropFiles) {
-            if (!canUploadMore) {
-                setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
-                    setModal: function() {
-                        return setUploadError(null);
-                    },
-                    errmsg: /*#__PURE__*/ jsxs("div", {
-                        className: "text-center text-lg text-gray-500",
-                        children: [
-                            "已達到最大圖片數量限制：",
-                            maxTotalImages,
-                            " 張"
-                        ]
-                    })
-                }));
-                return;
-            }
             // 檢查是否會超過總數限制
             var totalAfterUpload = currentImageCount + dropFiles.length;
             if (totalAfterUpload > maxTotalImages) {
-                var allowedFiles = dropFiles.slice(0, remainingSlots);
                 setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
                     setModal: function() {
                         return setUploadError(null);
@@ -18100,35 +18081,33 @@ var DropImage = function(param) {
                     errmsg: /*#__PURE__*/ jsxs("div", {
                         className: "text-center text-lg text-gray-500",
                         children: [
-                            "最多只能上傳 ",
-                            remainingSlots,
-                            " 張圖片，已自動限制為前",
-                            " ",
-                            allowedFiles.length,
-                            " 張"
+                            "已超過最大上傳限制",
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "text-sm text-gray-400 mt-2",
+                                children: [
+                                    "目前已有 ",
+                                    currentImageCount,
+                                    " 張，最多可上傳 ",
+                                    maxTotalImages,
+                                    " ",
+                                    "張"
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "text-sm text-gray-400",
+                                children: [
+                                    "還可上傳 ",
+                                    remainingSlots,
+                                    " 張圖片"
+                                ]
+                            })
                         ]
                     })
                 }));
-                // 只處理允許的檔案數量
-                var newFiles = [];
-                setFiles(function(prevFiles) {
-                    return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(allowedFiles));
-                });
-                allowedFiles.forEach(function(dropFile, index) {
-                    Object.assign(dropFile, {
-                        preview: URL.createObjectURL(dropFile),
-                        id: v4(),
-                        index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
-                    });
-                    newFiles.push(dropFile);
-                });
-                setPreviewFiles(function(prev) {
-                    return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
-                });
                 return;
             }
-            // 正常處理
-            var newFiles1 = [];
+            // 正常處理檔案上傳
+            var newFiles = [];
             setFiles(function(prevFiles) {
                 return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(dropFiles));
             });
@@ -18138,17 +18117,38 @@ var DropImage = function(param) {
                     id: v4(),
                     index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
                 });
-                newFiles1.push(dropFile);
+                newFiles.push(dropFile);
             });
             setPreviewFiles(function(prev) {
-                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles1));
+                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
             });
         },
         onDropRejected: function(rejectedFiles) {
-            var errorItems = rejectedFiles.map(function(param) {
-                var file = param.file; param.errors;
-                return /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsxs("div", {
+            var errorMessage;
+            // 分析錯誤類型並顯示對應訊息
+            var fileSizeErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "file-too-large";
+                });
+            });
+            var fileTypeErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "file-invalid-type";
+                });
+            });
+            var tooManyFilesErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "too-many-files";
+                });
+            });
+            // 優先處理檔案大小錯誤
+            if (fileSizeErrors.length > 0) {
+                var sizeErrorItems = fileSizeErrors.map(function(param) {
+                    var file = param.file;
+                    return /*#__PURE__*/ jsxs("div", {
                         className: "text-center text-lg text-gray-500",
                         children: [
                             "檔案太大: ",
@@ -18157,27 +18157,65 @@ var DropImage = function(param) {
                             (file.size / 1024 / 1024).toFixed(2),
                             " MB"
                         ]
-                    })
-                }, file.path);
-            });
-            setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
-                setModal: function() {
-                    return setUploadError(null);
-                },
-                errmsg: /*#__PURE__*/ jsxs(Fragment$1, {
+                    }, file.path);
+                });
+                errorMessage = /*#__PURE__*/ jsxs(Fragment$1, {
                     children: [
-                        errorItems,
+                        sizeErrorItems,
                         /*#__PURE__*/ jsxs("div", {
-                            className: "pt-4",
+                            className: "pt-4 text-center",
                             children: [
-                                "上限：",
+                                "檔案大小上限：",
                                 (DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES / 1024 / 1024).toFixed(2),
-                                " ",
-                                "MB"
+                                " MB"
                             ]
                         })
                     ]
-                })
+                });
+            } else if (fileTypeErrors.length > 0) {
+                var typeErrorItems = fileTypeErrors.map(function(param) {
+                    var file = param.file;
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "text-center text-lg text-gray-500",
+                        children: [
+                            "不支援的檔案格式: ",
+                            file.path
+                        ]
+                    }, file.path);
+                });
+                errorMessage = /*#__PURE__*/ jsxs(Fragment$1, {
+                    children: [
+                        typeErrorItems,
+                        /*#__PURE__*/ jsx("div", {
+                            className: "pt-4 text-center text-sm text-gray-400",
+                            children: "僅支援 PNG、JPG、JPEG 格式"
+                        })
+                    ]
+                });
+            } else if (tooManyFilesErrors.length > 0) {
+                errorMessage = /*#__PURE__*/ jsxs("div", {
+                    className: "text-center text-lg text-gray-500",
+                    children: [
+                        "一次最多只能上傳 ",
+                        maxFiles,
+                        " 張圖片",
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-sm text-gray-400 mt-2",
+                            children: "請減少選擇的檔案數量"
+                        })
+                    ]
+                });
+            } else {
+                errorMessage = /*#__PURE__*/ jsx("div", {
+                    className: "text-center text-lg text-gray-500",
+                    children: "檔案上傳失敗，請重試"
+                });
+            }
+            setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
+                setModal: function() {
+                    return setUploadError(null);
+                },
+                errmsg: errorMessage
             }));
         }
     }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
@@ -18195,9 +18233,33 @@ var DropImage = function(param) {
         setPreviewFiles(reSortItem);
     };
     var handleRemove = function(item) {
-        var currentItem = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(item);
-        previewFiles.splice(currentItem, 1);
-        setImageUrls(_to_consumable_array$8(previewFiles));
+        var currentItemIndex = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(item);
+        if (currentItemIndex !== -1) {
+            // 創建新的 previewFiles 陣列（移除指定項目）
+            var newPreviewFiles = _to_consumable_array$8(previewFiles);
+            newPreviewFiles.splice(currentItemIndex, 1);
+            // 更新預覽檔案狀態
+            setPreviewFiles(newPreviewFiles);
+            setImageUrls(newPreviewFiles);
+            // 同時更新實際檔案狀態
+            setFiles(function(prevFiles) {
+                // 如果被移除的項目有 id 且在當前上傳的檔案中
+                if (item.id) {
+                    // 透過 id 來找到對應的檔案並移除
+                    return prevFiles.filter(function(file) {
+                        var shouldRemove = file.id === item.id;
+                        if (shouldRemove && item.preview) {
+                            // 釋放 URL 記憶體
+                            URL.revokeObjectURL(item.preview);
+                        }
+                        return !shouldRemove;
+                    });
+                } else {
+                    // 如果沒有 id，可能是舊有的圖片，保持原本的 files
+                    return prevFiles;
+                }
+            });
+        }
     };
     return /*#__PURE__*/ jsxs("section", {
         className: "w-full",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.3.63",
+  "version": "0.3.64",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",