@sunggang/ui-lib 0.2.2 → 0.2.4

package/index.esm.css

@@ -643,6 +643,12 @@ video {
   top: 0px;
   bottom: 0px;
 }
+.-right-4 {
+  right: -1rem;
+}
+.-top-4 {
+  top: -1rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -756,6 +762,9 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .block {
   display: block;
 }
@@ -825,6 +834,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.h-\[100px\] {
+  height: 100px;
+}
 .h-full {
   height: 100%;
 }
@@ -882,6 +894,12 @@ video {
 .w-\[140px\] {
   width: 140px;
 }
+.w-\[156px\] {
+  width: 156px;
+}
+.w-\[172px\] {
+  width: 172px;
+}
 .w-\[280px\] {
   width: 280px;
 }
@@ -1051,6 +1069,9 @@ video {
 .gap-8 {
   gap: 2rem;
 }
+.gap-9 {
+  gap: 2.25rem;
+}
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1148,6 +1169,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(101 101 101 / var(--tw-border-opacity));
 }
+.border-\[\#B8B8B8\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 184 184 / var(--tw-border-opacity));
+}
 .border-\[\#D9D9D9\] {
   --tw-border-opacity: 1;
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
@@ -1206,6 +1231,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(12 116 137 / var(--tw-bg-opacity));
 }
+.bg-\[\#56CFCF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(86 207 207 / var(--tw-bg-opacity));
+}
 .bg-\[\#F5F5F5\] {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
@@ -1590,6 +1619,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
+.text-\[\#E73700\] {
+  --tw-text-opacity: 1;
+  color: rgb(231 55 0 / var(--tw-text-opacity));
+}
 .text-\[\#fff\] {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1759,6 +1792,11 @@ video {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[2px_6px_8px_0px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
+  --tw-shadow: 2px 6px 8px 0px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 2px 6px 8px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

package/index.esm.js

@@ -3787,7 +3787,7 @@ function _create_class$1(Constructor, protoProps, staticProps) {
     if (staticProps) _defineProperties$2(Constructor, staticProps);
     return Constructor;
 }
-function _define_property$c(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3862,7 +3862,7 @@ function _iterable_to_array_limit$7(arr, i) {
 function _non_iterable_rest$7() {
     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 _object_spread$c(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3872,12 +3872,12 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$c(object, enumerableOnly) {
+function ownKeys$d(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -3890,12 +3890,12 @@ function ownKeys$c(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$9(target, source) {
+function _object_spread_props$a(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$c(Object(source)).forEach(function(key) {
+        ownKeys$d(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -4131,7 +4131,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                             }
                         }
                     }
-                    var updatedConfig = _object_spread_props$9(_object_spread$c({}, _this._config), {
+                    var updatedConfig = _object_spread_props$a(_object_spread$d({}, _this._config), {
                         extraPlugins: _this._config.extraPlugins || [],
                         lazyRoots: lazyRoots,
                         rootsAttributes: rootsAttributes,
@@ -4525,7 +4525,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     var startPosition = writer.createPositionFromPath(root, start.path, start.stickiness);
                     var endPosition = writer.createPositionFromPath(root, end.path, end.stickiness);
                     var range = writer.createRange(startPosition, endPosition);
-                    writer.addMarker(markerName, _object_spread$c({
+                    writer.addMarker(markerName, _object_spread$d({
                         range: range
                     }, options));
                 });
@@ -4547,7 +4547,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                         var commentThread = commentsRepository.getCommentThread(commentThreadData.threadId);
                         commentThread.remove();
                     }
-                    commentsRepository.addCommentThread(_object_spread$c({
+                    commentsRepository.addCommentThread(_object_spread$d({
                         channelId: channelId
                     }, commentThreadData));
                 });
@@ -73245,7 +73245,7 @@ function _iterableToArray$2(iter) {
 function _arrayWithoutHoles$2(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray$2(arr);
 }
-function ownKeys$b(object, enumerableOnly) {
+function ownKeys$c(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -73258,9 +73258,9 @@ function ownKeys$b(object, enumerableOnly) {
 function _objectSpread$1(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$b(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$c(Object(source), !0).forEach(function(key) {
             _defineProperty$3(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -73667,7 +73667,7 @@ function _iterableToArrayLimit$1(arr, i) {
 function _arrayWithHoles$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function ownKeys$a(object, enumerableOnly) {
+function ownKeys$b(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -73680,9 +73680,9 @@ function ownKeys$a(object, enumerableOnly) {
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$a(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$b(Object(source), !0).forEach(function(key) {
             _defineProperty$2(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -74684,7 +74684,7 @@ function _defineProperty$1(e, r, t) {
     }) : e[r] = t, e;
 }
 
-function ownKeys$9(e, r) {
+function ownKeys$a(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
         var o = Object.getOwnPropertySymbols(e);
@@ -74697,9 +74697,9 @@ function ownKeys$9(e, r) {
 function _objectSpread2$7(e) {
     for(var r = 1; r < arguments.length; r++){
         var t = null != arguments[r] ? arguments[r] : {};
-        r % 2 ? ownKeys$9(Object(t), !0).forEach(function(r) {
+        r % 2 ? ownKeys$a(Object(t), !0).forEach(function(r) {
             _defineProperty$1(e, r, t[r]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function(r) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function(r) {
             Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
         });
     }
@@ -84065,7 +84065,7 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
 
-function _define_property$b(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -84078,7 +84078,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$b(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -84088,12 +84088,12 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$8(object, enumerableOnly) {
+function ownKeys$9(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -84106,12 +84106,12 @@ function ownKeys$8(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$8(target, source) {
+function _object_spread_props$9(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$8(Object(source)).forEach(function(key) {
+        ownKeys$9(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -84125,17 +84125,17 @@ var DragDropImages = function(param) {
             droppableId: "droppable-imageUrls",
             direction: "horizontal",
             children: function(provided) {
-                return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
+                return /*#__PURE__*/ jsxs("div", _object_spread_props$9(_object_spread$c({
                     ref: provided.innerRef
                 }, provided.droppableProps), {
-                    className: "flex gap-2 overflow-auto",
+                    className: "flex gap-2",
                     children: [
                         (imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.length) ? imageUrls.map(function(item, index) {
                             return /*#__PURE__*/ jsx(PublicDraggable, {
                                 draggableId: item === null || item === void 0 ? void 0 : item.id,
                                 index: index,
                                 children: function(provided) {
-                                    return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
+                                    return /*#__PURE__*/ jsxs("div", _object_spread_props$9(_object_spread$c({
                                         ref: provided.innerRef
                                     }, provided.draggableProps, provided.dragHandleProps), {
                                         className: "w-24 my-2 rounded-lg bg-gray-200",
@@ -84175,6 +84175,124 @@ var DragDropImages = function(param) {
     });
 };
 
+function _define_property$b(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$b(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$b(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$8(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$8(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$8(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var CustomDragDropImages = function(param) {
+    var imageUrls = param.imageUrls, onDragEnd = param.onDragEnd, handleRemove = param.handleRemove;
+    return /*#__PURE__*/ jsx(DragDropContext, {
+        onDragEnd: onDragEnd,
+        children: /*#__PURE__*/ jsx(ConnectedDroppable, {
+            droppableId: "droppable-imageUrls",
+            direction: "horizontal",
+            children: function(provided) {
+                return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
+                    ref: provided.innerRef
+                }, provided.droppableProps), {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-[#E73700] mt-5 mb-6",
+                            children: "*單次只可上傳10張照片，照片檔案不可超過5MB"
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex gap-9",
+                            children: [
+                                (imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.length) ? imageUrls.map(function(item, index) {
+                                    return /*#__PURE__*/ jsx(PublicDraggable, {
+                                        draggableId: item === null || item === void 0 ? void 0 : item.id,
+                                        index: index,
+                                        children: function(provided) {
+                                            return /*#__PURE__*/ jsxs("div", _object_spread_props$8(_object_spread$b({
+                                                ref: provided.innerRef
+                                            }, provided.draggableProps, provided.dragHandleProps), {
+                                                className: "w-[172px] my-2 rounded-lg relative p-2 bg-white border border-[#B8B8B8] shadow-[2px_6px_8px_0px_rgba(0,0,0,0.12)]",
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Icon, {
+                                                        className: "absolute -right-4 -top-4 bg-white rounded-full z-10",
+                                                        color: "#E73700",
+                                                        icon: "zondicons:close-solid",
+                                                        width: "2.215rem",
+                                                        height: "2.215rem",
+                                                        onClick: function() {
+                                                            return handleRemove(item);
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ jsx("img", {
+                                                        className: "w-[156px] h-[100px] object-cover",
+                                                        src: (item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.preview),
+                                                        alt: ""
+                                                    }),
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "flex gap-2 justify-center items-center p-2",
+                                                        children: /*#__PURE__*/ jsx("div", {
+                                                            className: "bg-[#56CFCF] text-white w-7 h-7 rounded-full flex items-center justify-center",
+                                                            children: index + 1
+                                                        })
+                                                    })
+                                                ]
+                                            }));
+                                        }
+                                    }, item === null || item === void 0 ? void 0 : item.id);
+                                }) : null,
+                                provided.placeholder
+                            ]
+                        })
+                    ]
+                }));
+            }
+        })
+    });
+};
+
 function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -84286,7 +84404,7 @@ function _unsupported_iterable_to_array$8(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(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;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, imageStyleType = param.imageStyleType;
     var _useState = _sliced_to_array$6(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     useEffect(function() {
         setPreviewFiles(imageUrls);
@@ -84383,13 +84501,20 @@ var DropImage = function(param) {
                     })
                 ]
             })),
-            preview && /*#__PURE__*/ jsx("div", {
-                className: "flex pt-2",
-                children: /*#__PURE__*/ jsx(DragDropImages, {
-                    imageUrls: previewFiles,
-                    onDragEnd: onDragEnd,
-                    handleRemove: handleRemove
-                })
+            preview && /*#__PURE__*/ jsxs("div", {
+                className: "flex pt-2 overflow-auto",
+                children: [
+                    imageStyleType === "base" && /*#__PURE__*/ jsx(DragDropImages, {
+                        imageUrls: previewFiles,
+                        onDragEnd: onDragEnd,
+                        handleRemove: handleRemove
+                    }),
+                    imageStyleType === "custom" && /*#__PURE__*/ jsx(CustomDragDropImages, {
+                        imageUrls: previewFiles,
+                        onDragEnd: onDragEnd,
+                        handleRemove: handleRemove
+                    })
+                ]
             })
         ]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "dependencies": {
     "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^3.0.1",

package/src/lib/DragDrop/CustomDragDropImage.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface ImageItem {
+    url?: string;
+    id?: string;
+    preview?: string;
+}
+interface CustomDragDropImagesProps {
+    imageUrls: ImageItem[];
+    onDragEnd: () => void;
+    handleRemove: (item: ImageItem) => void;
+}
+export declare const CustomDragDropImages: React.FC<CustomDragDropImagesProps>;
+export {};

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

@@ -10,7 +10,9 @@ export interface DropImageProps {
     imageUrls?: ImageItem[] | undefined;
     setImageUrls?: any;
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    imageStyleType: 'base' | 'custom';
 }
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
 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>;