@sunggang/ui-lib 0.3.58 → 0.3.59

package/index.esm.css

@@ -1587,6 +1587,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
@@ -1717,6 +1721,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-8 {
+  padding: 2rem;
+}
 .p-\[30px\] {
   padding: 30px;
 }
@@ -1997,6 +2004,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 119 119 / var(--tw-text-opacity, 1));
 }
+.text-\[\#999999\] {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
+}
 .text-\[\#B0B0B0\] {
   --tw-text-opacity: 1;
   color: rgb(176 176 176 / var(--tw-text-opacity, 1));

package/index.esm2.js

@@ -18033,7 +18033,7 @@ function _unsupported_iterable_to_array$o(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$o(o, minLen);
 }
 var DropImage = function(param) {
-    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType, _param_limitSize = param.limitSize, limitSize = _param_limitSize === void 0 ? 0 : _param_limitSize;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType, _param_limitSize = param.limitSize, limitSize = _param_limitSize === void 0 ? 0 : _param_limitSize, _param_maxFiles = param.maxFiles, maxFiles = _param_maxFiles === void 0 ? 10 : _param_maxFiles, _param_maxTotalImages = param.maxTotalImages, maxTotalImages = _param_maxTotalImages === void 0 ? 10 : _param_maxTotalImages;
     var _useState = _sliced_to_array$l(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     var _useState1 = _sliced_to_array$l(useState(null), 2), uploadError = _useState1[0], setUploadError = _useState1[1];
     useEffect(function() {
@@ -18043,6 +18043,12 @@ var DropImage = function(param) {
     ]);
     var MAX_SIZE_5MB = 5 * 1024 * 1024;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = limitSize || MAX_SIZE_5MB;
+    // 計算目前還能上傳多少張圖片
+    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": [
@@ -18053,10 +18059,66 @@ var DropImage = function(param) {
                 ".jpeg"
             ]
         },
-        maxFiles: 10,
+        maxFiles: dynamicMaxFiles,
         maxSize: DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES,
+        disabled: !canUploadMore,
         onDrop: function(dropFiles) {
-            var newFiles = [];
+            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);
+                    },
+                    errmsg: /*#__PURE__*/ jsxs("div", {
+                        className: "text-center text-lg text-gray-500",
+                        children: [
+                            "最多只能上傳 ",
+                            remainingSlots,
+                            " 張圖片，已自動限制為前",
+                            " ",
+                            allowedFiles.length,
+                            " 張"
+                        ]
+                    })
+                }));
+                // 只處理允許的檔案數量
+                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 = [];
             setFiles(function(prevFiles) {
                 return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(dropFiles));
             });
@@ -18066,10 +18128,10 @@ var DropImage = function(param) {
                     id: v4(),
                     index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
                 });
-                newFiles.push(dropFile);
+                newFiles1.push(dropFile);
             });
             setPreviewFiles(function(prev) {
-                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
+                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles1));
             });
         },
         onDropRejected: function(rejectedFiles) {
@@ -18133,7 +18195,32 @@ var DropImage = function(param) {
             /*#__PURE__*/ jsxs(DragDropContext, {
                 onDragEnd: onDragEnd,
                 children: [
-                    /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
+                    !canUploadMore ? /*#__PURE__*/ jsx("div", {
+                        className: "w-full mb-4",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 p-8 text-center",
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    icon: "material-symbols:block",
+                                    width: "2.5rem",
+                                    height: "2.5rem",
+                                    className: "mx-auto mb-2 text-gray-400"
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: "text-gray-500",
+                                    children: [
+                                        "已達到最大圖片數量限制：",
+                                        maxTotalImages,
+                                        " 張"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "text-sm text-gray-400",
+                                    children: "請刪除部分圖片後再上傳新的圖片"
+                                })
+                            ]
+                        })
+                    }) : /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
                         className: "dropzone"
                     })), {
                         children: [
@@ -18188,6 +18275,17 @@ var DropImage = function(param) {
                                                     /*#__PURE__*/ jsx("h5", {
                                                         className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
                                                         children: "拖曳圖片至此"
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("p", {
+                                                        className: "font-normal text-xs text-[#999999] pb-4",
+                                                        children: [
+                                                            "還可上傳 ",
+                                                            remainingSlots,
+                                                            " 張圖片 (總限制:",
+                                                            " ",
+                                                            maxTotalImages,
+                                                            " 張)"
+                                                        ]
                                                     })
                                                 ]
                                             })
@@ -50195,11 +50293,11 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
                 className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
                 children: /*#__PURE__*/ jsx("span", {
                     className: "w-5 h-5 text-[#B4B4B4]",
-                    children: typeof item.icon === "string" ? /*#__PURE__*/ jsx("img", {
-                        src: "/assets/images/".concat(item.icon),
-                        alt: "",
-                        className: "w-full h-full"
-                    }) : item.icon
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        icon: item.icon || "solar:calendar-linear",
+                        width: "1.5rem",
+                        height: "1.5rem"
+                    })
                 })
             })
         ]

package/package.json

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

package/src/lib/DropImage/index.stories.d.ts

@@ -8,6 +8,8 @@ export interface ImageItem {
 export interface DropImageProps {
     preview: boolean;
     limitSize?: number;
+    maxFiles?: number;
+    maxTotalImages?: number;
     imageUrls?: ImageItem[] | undefined;
     setImageUrls?: any;
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
@@ -18,3 +20,4 @@ export default _default;
 export declare const Base: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
 export declare const Custom: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
 export declare const Primary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
+export declare const SingleImageOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;

package/src/lib/Form/demo.d.ts

@@ -16,6 +16,7 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     validateOption: {
         required: string;
     };
+    icon: string;
     flatpickrOptions: {
         mode: string;
         time_24hr: boolean;
@@ -44,6 +45,7 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
         hoverClass: string;
         selectedClass: string;
     };
+    icon?: undefined;
     flatpickrOptions?: undefined;
 })[] | {
     type: string;

package/src/lib/Form/types.d.ts

@@ -30,6 +30,37 @@ interface Checkbox {
         color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
     };
 }
+interface FlatpickrOptions {
+    mode?: 'single' | 'multiple' | 'range';
+    enableTime?: boolean;
+    time_24hr?: boolean;
+    dateFormat?: string;
+    defaultDate?: Date | Date[] | string;
+    inline?: boolean;
+    noCalendar?: boolean;
+    allowInput?: boolean;
+    clickOpens?: boolean;
+    weekNumbers?: boolean;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    disable?: Array<Date | string | {
+        from: Date | string;
+        to: Date | string;
+    }>;
+    enable?: Array<Date | string | {
+        from: Date | string;
+        to: Date | string;
+    }>;
+    locale?: string;
+    position?: 'auto' | 'above' | 'below';
+    static?: boolean;
+    monthSelectorType?: 'dropdown' | 'static';
+    onChange?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onClose?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onOpen?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onReady?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    [key: string]: any;
+}
 export interface FormItem {
     type: string;
     name: string;
@@ -91,6 +122,7 @@ export interface FormItem {
         hoverClass?: string;
         selectedClass?: string;
     };
+    flatpickrOptions?: FlatpickrOptions;
 }
 export interface FormType {
     item: FormItem;