@sunggang/ui-lib 0.0.1 → 0.0.3

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: {
@@ -3401,7 +3401,7 @@ var DropImage = function(param) {
                 ".jpeg"
             ]
         },
-        maxFiles: 15,
+        maxFiles: 10,
         maxSize: 5000000,
         onDrop: function(dropFiles) {
             var newFiles = [];
@@ -3415,7 +3415,7 @@ var DropImage = function(param) {
                 setPreviewFiles(newFiles);
             });
         }
-    }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps, isDragActive = _useDropzone.isDragActive, isDragAccept = _useDropzone.isDragAccept, isDragReject = _useDropzone.isDragReject;
+    }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
     return /*#__PURE__*/ jsxs("section", {
         className: "w-full",
         children: [
@@ -3429,28 +3429,17 @@ 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-gray-c_979 rounded-lg",
+                                className: "border-2 border-dashed border-gray-400 rounded-lg bg-gray-100",
                                 children: /*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center flex-col p-32",
+                                    className: "flex items-center flex-col p-16",
                                     children: [
-                                        "上傳圖片",
-                                        /*#__PURE__*/ jsxs("div", {
-                                            className: "text-gray-c_ccc m-4 text-xl",
-                                            children: [
-                                                isDragAccept && /*#__PURE__*/ jsx("p", {
-                                                    children: "All files will be accepted"
-                                                }),
-                                                isDragReject && /*#__PURE__*/ jsx("p", {
-                                                    children: "Some files will be rejected"
-                                                }),
-                                                !isDragActive && /*#__PURE__*/ jsx("p", {
-                                                    children: "Drop files here to upload"
-                                                })
-                                            ]
+                                        /*#__PURE__*/ jsx("p", {
+                                            className: "font-normal text-sm text-gray-400 py-4",
+                                            children: "圖片僅支援 png、jpg、jpeg"
                                         }),
-                                        /*#__PURE__*/ jsx("button", {
-                                            type: "button",
-                                            children: "瀏覽檔案"
+                                        /*#__PURE__*/ jsx("h5", {
+                                            className: "mb-2 text-xl font-bold tracking-tight text-gray-700",
+                                            children: "拖曳圖片至此"
                                         })
                                     ]
                                 })
@@ -3460,15 +3449,23 @@ var DropImage = function(param) {
                 ]
             })),
             preview && /*#__PURE__*/ jsx("div", {
-                className: "flex gap-2",
-                children: previewFiles && previewFiles.length > 0 && previewFiles.map(function(item) {
+                className: "flex pt-2 gap-2",
+                children: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) ? previewFiles.length > 0 && previewFiles.map(function(item) {
                     return /*#__PURE__*/ jsx("div", {
-                        className: "w-24 h-24 object-cover",
                         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);
+                }) : imageUrls && imageUrls.length && imageUrls.map(function(item) {
+                    return /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx("img", {
+                            className: "w-24 h-24 object-cover",
+                            src: item,
+                            alt: ""
+                        })
+                    }, item);
                 })
             })
         ]
@@ -5573,7 +5570,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 var BaseTemplate = function(param) {
-    var file = param.file;
+    var file = param.file, imageUrl = param.imageUrl;
     var _useState = _sliced_to_array$1(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
     useEffect(function() {
         var fileReader;
@@ -5602,9 +5599,9 @@ var BaseTemplate = function(param) {
         className: "max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden items-center",
         children: /*#__PURE__*/ jsx("div", {
             className: "px-4 py-6 w-72 h-56",
-            children: tempImage ? /*#__PURE__*/ jsx("img", {
-                className: "w-full h-full object-cover",
-                src: tempImage,
+            children: tempImage || imageUrl ? /*#__PURE__*/ jsx("img", {
+                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", {
                 id: "image-preview",
@@ -5682,20 +5679,18 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var CustomUpload = function(param) {
-    var className = param.className, children = param.children, file = param.file, setFile = param.setFile;
+    var className = param.className, children = param.children, file = param.file, setFile = param.setFile, imageUrl = param.imageUrl;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000; // 5000 KB
     var _useState = _sliced_to_array(useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = useRef(null);
     var handleImageClick = function() {
         var _hiddenFileInput_current;
-        console.log(hiddenFileInput);
         (_hiddenFileInput_current = hiddenFileInput.current) === null || _hiddenFileInput_current === void 0 ? void 0 : _hiddenFileInput_current.click();
     };
     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;
@@ -5737,7 +5732,8 @@ var CustomUpload = function(param) {
                 onClick: handleImageClick,
                 children: [
                     children || /*#__PURE__*/ jsx(BaseTemplate, {
-                        file: file
+                        file: file,
+                        imageUrl: imageUrl
                     }),
                     /*#__PURE__*/ jsx("input", {
                         type: "file",

package/package.json

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface DropImageProps {
     preview?: boolean;
+    imageUrls?: string[];
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
 }
 export declare const DropImage: React.FC<DropImageProps>;

package/src/lib/UploadImage/BaseTemplate.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 interface BaseTemplateProps {
     file?: File | null;
+    imageUrl?: string;
 }
 declare const BaseTemplate: FC<BaseTemplateProps>;
 export default BaseTemplate;

package/src/lib/UploadImage/CustomUpload.d.ts

@@ -3,7 +3,8 @@ interface CustomUploadProps {
     className?: string;
     children?: React.ReactNode;
     file?: File | null;
-    setFile: any;
+    setFile?: any;
+    imageUrl?: string;
 }
 export declare const CustomUpload: React.FC<CustomUploadProps>;
 export default CustomUpload;