@sunggang/ui-lib 0.1.18 → 0.1.19

package/index.esm.css

@@ -634,6 +634,9 @@ video {
 .relative {
   position: relative;
 }
+.bottom-0 {
+  bottom: 0px;
+}
 .left-0 {
   left: 0px;
 }
@@ -1039,6 +1042,9 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }

package/index.esm2.js

@@ -5824,6 +5824,9 @@ function _array_like_to_array$3(arr, len) {
 function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$3(arr);
+}
 function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -5837,6 +5840,9 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit$3(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -5864,6 +5870,9 @@ function _iterable_to_array_limit$3(arr, i) {
 function _non_iterable_rest$3() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -5906,6 +5915,9 @@ function _object_spread_props$2(target, source) {
 function _sliced_to_array$3(arr, i) {
     return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$3(arr) || _non_iterable_spread();
+}
 function _unsupported_iterable_to_array$3(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array$3(o, minLen);
@@ -5915,7 +5927,7 @@ function _unsupported_iterable_to_array$3(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(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;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls;
     var _useState = _sliced_to_array$3(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     var _useDropzone = useDropzone({
         accept: {
@@ -5942,6 +5954,16 @@ var DropImage = function(param) {
             });
         }
     }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
+    var removePreviewFile = function(file) {
+        var currentItem = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(file);
+        previewFiles.splice(currentItem, 1);
+        setPreviewFiles(_to_consumable_array(previewFiles));
+    };
+    var removeImageUrls = function(item) {
+        var currentItem = imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.indexOf(item);
+        imageUrls.splice(currentItem, 1);
+        setImageUrls(_to_consumable_array(imageUrls));
+    };
     return /*#__PURE__*/ jsxs("section", {
         className: "w-full",
         children: [
@@ -5987,20 +6009,48 @@ var DropImage = function(param) {
             preview && /*#__PURE__*/ jsx("div", {
                 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", {
-                        children: /*#__PURE__*/ jsx("img", {
-                            className: "w-24 h-24 object-cover",
-                            src: item === null || item === void 0 ? void 0 : item.preview,
-                            alt: ""
-                        })
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                className: "absolute bottom-0 right-0 bg-white rounded-full p-1 shadow-md",
+                                onClick: function() {
+                                    return removePreviewFile(item);
+                                },
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    icon: "mingcute:delete-2-line",
+                                    width: "1.5rem",
+                                    height: "1.5rem"
+                                })
+                            }),
+                            /*#__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: ""
-                        })
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                className: "absolute bottom-0 right-0 bg-white rounded-full p-1 shadow-md",
+                                onClick: function() {
+                                    return removeImageUrls(item);
+                                },
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    icon: "mingcute:delete-2-line",
+                                    width: "1.5rem",
+                                    height: "1.5rem"
+                                })
+                            }),
+                            /*#__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
             })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",

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

@@ -1,14 +1,9 @@
 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[];
+    imageUrls?: any;
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setImageUrls?: any;
 }
 export declare const DropImage: React.FC<DropImageProps>;
 export {};