@sunggang/ui-lib 0.0.2 → 0.0.4

package/index.esm.js

@@ -3389,7 +3389,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
 var DropImage = function(param) {
-    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls;
     var _useState = _sliced_to_array$2(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     var _useDropzone = useDropzone({
         accept: {
@@ -3429,9 +3429,9 @@ var DropImage = function(param) {
                         children: /*#__PURE__*/ jsx("div", {
                             className: "w-full bg-gray-light rounded-lg",
                             children: /*#__PURE__*/ jsx("div", {
-                                className: "border-2 border-dashed border-2 border-gray-400 rounded-lg bg-gray-100",
+                                className: "border-2 border-dashed border-gray-400 rounded-lg bg-gray-100",
                                 children: /*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center flex-col p-20",
+                                    className: "flex items-center flex-col h-48 justify-center",
                                     children: [
                                         /*#__PURE__*/ jsx("p", {
                                             className: "font-normal text-sm text-gray-400 py-4",
@@ -3439,7 +3439,7 @@ var DropImage = function(param) {
                                         }),
                                         /*#__PURE__*/ jsx("h5", {
                                             className: "mb-2 text-xl font-bold tracking-tight text-gray-700",
-                                            children: "上傳圖片"
+                                            children: "拖曳圖片至此"
                                         })
                                     ]
                                 })
@@ -3450,16 +3450,23 @@ var DropImage = function(param) {
             })),
             preview && /*#__PURE__*/ jsx("div", {
                 className: "flex pt-2 gap-2",
-                children: previewFiles && previewFiles.length > 0 && previewFiles.map(function(item) {
+                children: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) ? previewFiles.length > 0 ? previewFiles.map(function(item) {
                     return /*#__PURE__*/ jsx("div", {
-                        className: "",
                         children: /*#__PURE__*/ jsx("img", {
                             className: "w-24 h-24 object-cover",
                             src: item === null || item === void 0 ? void 0 : item.preview,
                             alt: ""
                         })
                     }, item === null || item === void 0 ? void 0 : item.uuid);
-                })
+                }) : null : imageUrls && imageUrls.length ? imageUrls.map(function(item) {
+                    return /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx("img", {
+                            className: "w-24 h-24 object-cover",
+                            src: item === null || item === void 0 ? void 0 : item.url,
+                            alt: ""
+                        })
+                    }, item === null || item === void 0 ? void 0 : item.url);
+                }) : null
             })
         ]
     });
@@ -5593,7 +5600,7 @@ var BaseTemplate = function(param) {
         children: /*#__PURE__*/ jsx("div", {
             className: "px-4 py-6 w-72 h-56",
             children: tempImage || imageUrl ? /*#__PURE__*/ jsx("img", {
-                className: "w-full h-full object-cover border-dashed border-2 border-gray-400",
+                className: "w-full h-full object-contain border-dashed border-2 border-gray-400 p-6 rounded-lg",
                 src: tempImage || imageUrl,
                 alt: ""
             }) : /*#__PURE__*/ jsx("div", {
@@ -5684,7 +5691,6 @@ var CustomUpload = function(param) {
     var handleImageChange = function(event) {
         var _event_target_files, _currentFile_type;
         var currentFile = (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0];
-        console.log(currentFile);
         if (!currentFile) {
             setFile(null);
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js"

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

@@ -1,6 +1,13 @@
 import React from 'react';
+interface ImageItem {
+    map?: any;
+    length?: ImageItem | undefined;
+    url: string;
+    book_items_category_id: string | null;
+}
 interface DropImageProps {
     preview?: boolean;
+    imageUrls?: ImageItem[];
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
 }
 export declare const DropImage: React.FC<DropImageProps>;