@momo-webplatform/mobase 0.0.42 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
     "dev": "rm -rf .next && next dev",

package/publish/cjs/components/LightboxGallery/LightboxGallery.js

@@ -32,9 +32,6 @@ const react_1 = require("swiper/react");
 const swiper_1 = require("swiper");
 const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
 const react_2 = __importStar(require("react"));
-require("swiper/css");
-require("swiper/css/navigation");
-require("swiper/css/pagination");
 const IconButton_1 = require("../IconButton");
 const utils_1 = require("../../helpers/utils");
 const lucide_react_1 = require("lucide-react");
@@ -42,7 +39,7 @@ const outline_1 = require("@heroicons/react/24/outline");
 const lodash_1 = __importDefault(require("lodash"));
 exports.LightboxGalleryDialog = DialogPrimitive.Root;
 const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0  bg-black/80 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const CloseDialog = ({ clearActiveIndex }) => {
     return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { onClick: () => clearActiveIndex?.(), className: "flex transition-all z-10 text-sm items-center space-x-1 absolute left-3 top-6 md:left-6 hover:bg-white/20 text-white rounded-md px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4 mt-0.5" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: "\u0110\u00F3ng c\u1EEDa s\u1ED5" })] }));
@@ -54,7 +51,7 @@ const LightboxThumbnail = ({ children, src, alt, className, classNameImage, onCl
     return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Trigger, { className: (0, utils_1.cn)("aspect-[2/3] relative overflow-hidden rounded-lg", className), onClick: handleOnClickThumbnail, children: [children, (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: (0, utils_1.cn)("w-full h-full object-cover rounded-lg", classNameImage) })] }));
 };
 exports.LightboxThumbnail = LightboxThumbnail;
-exports.DialogContent = react_2.default.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { className: "bg-black" }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("h-full min-w-full border-none rounded-none fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(CloseDialog, {})] })] })));
+exports.DialogContent = react_2.default.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { className: "bg-black" }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("h-full min-w-full border-none rounded-none z-[999] fixed bg-black left-[50%] top-[50%]  grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(CloseDialog, {})] })] })));
 exports.DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";
@@ -64,7 +61,7 @@ const DialogTitle = react_2.default.forwardRef(({ className, ...props }, ref) =>
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSideBar, classNameSubHtmSideBar, className, }) => {
+const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSideBar, classNameSubHtmSideBar, className, isPagination = false, }) => {
     const [activeSlide, setActiveSlide] = (0, react_2.useState)(activeSlideIndex);
     const [titleImage, setTitleImg] = (0, react_2.useState)("");
     const onGetTitleImage = () => {
@@ -91,6 +88,9 @@ const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSid
       `;
         },
     };
+    const arrayModule = isPagination
+        ? [swiper_1.Navigation, swiper_1.Lazy, swiper_1.Pagination]
+        : [swiper_1.Navigation, swiper_1.Lazy];
     return ((0, jsx_runtime_1.jsxs)(exports.DialogContent, { className: (0, utils_1.cn)("flex py-0", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "lightbox flex-1 py-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-end md:justify-center mt-2 w-full", children: (0, jsx_runtime_1.jsxs)("div", { children: [activeSlide ? activeSlide + 1 : 1, " / ", images?.length] }) }), (0, jsx_runtime_1.jsxs)(react_1.Swiper, { initialSlide: activeSlideIndex, onSlideChange: ({ realIndex }) => {
                             setActiveSlide(realIndex);
                             onGetTitleImage();
@@ -107,7 +107,7 @@ const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSid
                         }, slidesPerView: "auto", className: "swiper lightboxSwiper", navigation: {
                             nextEl: ".lightbox .next-lightbox",
                             prevEl: ".lightbox .prev-lightbox",
-                        }, pagination: pagination, modules: [swiper_1.Navigation, swiper_1.Lazy, swiper_1.Pagination], lazy: {
+                        }, pagination: pagination, modules: arrayModule, lazy: {
                             loadPrevNext: true,
                         }, children: [images.map((img, index) => ((0, jsx_runtime_1.jsxs)(react_1.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-28 bottom-28 left-0 right-0 min-h-0 sm:left-20 sm:right-20", children: (0, jsx_runtime_1.jsx)("img", { src: img.url, alt: "", className: "absolute h-full w-full object-contain", loading: "lazy" }) }), (0, jsx_runtime_1.jsx)("div", { className: "swiper-lazy-preloader swiper-lazy-preloader-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm px-20 text-center text-white/80 absolute bottom-10 my-4 flex items-center justify-center w-full z-[999]", children: titleImage })] }, index))), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 prev-lightbox button-swiper translate swiper-cate-merchant absolute inset-y-1/2 left-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-200 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronLeftIcon, { className: "w-7 text-slate-900" }) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 next-lightbox translate swiper-cate-merchant button-swiper absolute inset-y-1/2 right-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-300 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronRightIcon, { className: "w-7 text-slate-900" }) })] }), (0, jsx_runtime_1.jsx)("style", { children: `
           .lightbox {
@@ -139,7 +139,7 @@ const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSid
           }
           .lightboxSwiper {
             width: 100%;
-            height: 95%;
+            height: 100%;
             padding: 0;
           }
 
@@ -165,7 +165,7 @@ const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSid
             height: 100%;
           }
           .swiper-wrapper{
-            bottom: 90px;
+            bottom: 0px;
           }
           .swiper-pagination{
             max-width: 100%;