@zenpatient-org/healthspan-marketing-ui 0.2.69 → 0.2.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ImageGallery/ImageGallery.cjs.js +1 -1
- package/dist/components/ImageGallery/ImageGallery.d.ts +2 -1
- package/dist/components/ImageGallery/ImageGallery.es.js +54 -54
- package/dist/components/ImageGallery/components/ImageGalleryPagination/imageGalleryPagination.module.css +33 -28
- package/dist/components/ImageGallery/imageGallery.module.css +1 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),w=require("swiper/modules"),h=require("swiper/react"),P=require("../../utils/useSwiper/useSwiper.cjs.js"),N=require("../../utils/cn/cn.cjs.js");;/* empty css */;/* empty css */;/* empty css */const n=require("../../src/components/ImageGallery/imageGallery.module.css"),m=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),g=require("../GalleryPagination/GalleryPagination.cjs.js"),b=require("../Label/Label.cjs.js"),v=[w.Navigation],G=({images:r,label:o,className:S,type:s="primary",paginationType:t})=>{const{activeIndex:i,handleSlideTo:d,handleSlideChange:p,onSwiperInit:j,handleSwiperResize:x,handleUserInteraction:a}=P.useSwiperWithAutoPlay(3e3),l=u.useCallback(c=>{a(),d(c)},[a,d]),y=u.useMemo(()=>t?t==="thumbnail"?e.jsx(m.ImageGalleryPagination,{images:r,activeIndex:i,onSelect:l}):e.jsx(g.GalleryPagination,{count:r.length,activeIndex:i,onSelect:l}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:n.hideOnMobile,children:e.jsx(m.ImageGalleryPagination,{images:r,activeIndex:i,onSelect:l})}),e.jsx("div",{className:n.hideOnDesktop,children:e.jsx(g.GalleryPagination,{count:r.length,activeIndex:i,onSelect:l})})]}),[r.length,i,l,t]);return e.jsxs("div",{className:N.cn(n.root,S,{[n.primary]:s==="primary",[n.secondary]:s==="secondary"}),children:[o&&e.jsx("div",{className:n.labelWrap,children:e.jsx(b.Label,{color:"black",size:"sm",children:o})}),e.jsx(h.Swiper,{onSwiper:j,onResize:x,onSlideChange:p,onTouchStart:a,onTouchEnd:a,modules:v,spaceBetween:0,slidesPerView:1,className:n.swiper,children:r.map((c,q)=>e.jsx(h.SwiperSlide,{children:e.jsx("div",{className:n.imageContainer,children:e.jsx("div",{className:n.imageWrapper,children:e.jsx("img",{src:c,alt:"product image",width:s==="primary"?600:492,height:s==="primary"?600:389,className:n.image,onClick:a})})})},q))}),y]})};exports.ImageGallery=G;
|
|
@@ -4,5 +4,6 @@ export type ImageGalleryProps = {
|
|
|
4
4
|
label?: string;
|
|
5
5
|
className?: string;
|
|
6
6
|
type?: 'primary' | 'secondary';
|
|
7
|
+
paginationType?: 'thumbnail' | 'bullet';
|
|
7
8
|
};
|
|
8
|
-
export declare const ImageGallery: ({ images, label, className, type }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const ImageGallery: ({ images, label, className, type, paginationType }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { useCallback as
|
|
4
|
-
import { Navigation as
|
|
5
|
-
import { Swiper as
|
|
6
|
-
import { useSwiperWithAutoPlay as
|
|
7
|
-
import { cn as
|
|
2
|
+
import { jsxs as d, Fragment as v, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as y, useMemo as I } from "react";
|
|
4
|
+
import { Navigation as P } from "swiper/modules";
|
|
5
|
+
import { Swiper as b, SwiperSlide as C } from "swiper/react";
|
|
6
|
+
import { useSwiperWithAutoPlay as k } from "../../utils/useSwiper/useSwiper.es.js";
|
|
7
|
+
import { cn as x } from "../../utils/cn/cn.es.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
|
-
import
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
const
|
|
16
|
-
const { activeIndex: n, handleSlideTo:
|
|
17
|
-
(
|
|
18
|
-
|
|
11
|
+
import r from "../../components/ImageGallery/imageGallery.module.css";
|
|
12
|
+
import { ImageGalleryPagination as h } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
|
|
13
|
+
import { GalleryPagination as p } from "../GalleryPagination/GalleryPagination.es.js";
|
|
14
|
+
import { Label as W } from "../Label/Label.es.js";
|
|
15
|
+
const z = [P], V = ({ images: i, label: m, className: S, type: l = "primary", paginationType: t }) => {
|
|
16
|
+
const { activeIndex: n, handleSlideTo: s, handleSlideChange: u, onSwiperInit: f, handleSwiperResize: g, handleUserInteraction: o } = k(3e3), a = y(
|
|
17
|
+
(c) => {
|
|
18
|
+
o(), s(c);
|
|
19
19
|
},
|
|
20
|
-
[
|
|
21
|
-
)
|
|
22
|
-
|
|
20
|
+
[o, s]
|
|
21
|
+
), w = I(() => t ? t === "thumbnail" ? /* @__PURE__ */ e(h, { images: i, activeIndex: n, onSelect: a }) : /* @__PURE__ */ e(p, { count: i.length, activeIndex: n, onSelect: a }) : /* @__PURE__ */ d(v, { children: [
|
|
22
|
+
/* @__PURE__ */ e("div", { className: r.hideOnMobile, children: /* @__PURE__ */ e(
|
|
23
|
+
h,
|
|
24
|
+
{
|
|
25
|
+
images: i,
|
|
26
|
+
activeIndex: n,
|
|
27
|
+
onSelect: a
|
|
28
|
+
}
|
|
29
|
+
) }),
|
|
30
|
+
/* @__PURE__ */ e("div", { className: r.hideOnDesktop, children: /* @__PURE__ */ e(
|
|
31
|
+
p,
|
|
32
|
+
{
|
|
33
|
+
count: i.length,
|
|
34
|
+
activeIndex: n,
|
|
35
|
+
onSelect: a
|
|
36
|
+
}
|
|
37
|
+
) })
|
|
38
|
+
] }), [i.length, n, a, t]);
|
|
39
|
+
return /* @__PURE__ */ d(
|
|
23
40
|
"div",
|
|
24
41
|
{
|
|
25
|
-
className:
|
|
26
|
-
[
|
|
27
|
-
[
|
|
42
|
+
className: x(r.root, S, {
|
|
43
|
+
[r.primary]: l === "primary",
|
|
44
|
+
[r.secondary]: l === "secondary"
|
|
28
45
|
}),
|
|
29
46
|
children: [
|
|
30
|
-
m && /* @__PURE__ */ e("div", { className:
|
|
47
|
+
m && /* @__PURE__ */ e("div", { className: r.labelWrap, children: /* @__PURE__ */ e(W, { color: "black", size: "sm", children: m }) }),
|
|
31
48
|
/* @__PURE__ */ e(
|
|
32
|
-
|
|
49
|
+
b,
|
|
33
50
|
{
|
|
34
|
-
onSwiper:
|
|
51
|
+
onSwiper: f,
|
|
35
52
|
onResize: g,
|
|
36
|
-
onSlideChange:
|
|
37
|
-
onTouchStart:
|
|
38
|
-
onTouchEnd:
|
|
39
|
-
modules:
|
|
53
|
+
onSlideChange: u,
|
|
54
|
+
onTouchStart: o,
|
|
55
|
+
onTouchEnd: o,
|
|
56
|
+
modules: z,
|
|
40
57
|
spaceBetween: 0,
|
|
41
58
|
slidesPerView: 1,
|
|
42
|
-
className:
|
|
43
|
-
children:
|
|
59
|
+
className: r.swiper,
|
|
60
|
+
children: i.map((c, N) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: r.imageContainer, children: /* @__PURE__ */ e("div", { className: r.imageWrapper, children: /* @__PURE__ */ e(
|
|
44
61
|
"img",
|
|
45
62
|
{
|
|
46
|
-
src:
|
|
63
|
+
src: c,
|
|
47
64
|
alt: "product image",
|
|
48
|
-
width:
|
|
49
|
-
height:
|
|
50
|
-
className:
|
|
51
|
-
onClick:
|
|
65
|
+
width: l === "primary" ? 600 : 492,
|
|
66
|
+
height: l === "primary" ? 600 : 389,
|
|
67
|
+
className: r.image,
|
|
68
|
+
onClick: o
|
|
52
69
|
}
|
|
53
|
-
) }) }) },
|
|
70
|
+
) }) }) }, N))
|
|
54
71
|
}
|
|
55
72
|
),
|
|
56
|
-
|
|
57
|
-
/* @__PURE__ */ e("div", { className: i.hideOnMobile, children: /* @__PURE__ */ e(
|
|
58
|
-
b,
|
|
59
|
-
{
|
|
60
|
-
images: o,
|
|
61
|
-
activeIndex: n,
|
|
62
|
-
onSelect: l
|
|
63
|
-
}
|
|
64
|
-
) }),
|
|
65
|
-
/* @__PURE__ */ e("div", { className: i.hideOnDesktop, children: /* @__PURE__ */ e(
|
|
66
|
-
d,
|
|
67
|
-
{
|
|
68
|
-
count: o.length,
|
|
69
|
-
activeIndex: n,
|
|
70
|
-
onSelect: l
|
|
71
|
-
}
|
|
72
|
-
) })
|
|
73
|
-
] }) : /* @__PURE__ */ e(d, { count: o.length, activeIndex: n, onSelect: l })
|
|
73
|
+
w
|
|
74
74
|
]
|
|
75
75
|
}
|
|
76
76
|
);
|
|
77
77
|
};
|
|
78
78
|
export {
|
|
79
|
-
|
|
79
|
+
V as ImageGallery
|
|
80
80
|
};
|
|
@@ -1,32 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
1
|
+
.root {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
gap: 12px;
|
|
5
|
+
padding: 0 24px;
|
|
6
|
+
}
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
.thumbnailButton {
|
|
9
|
+
width: 64px;
|
|
10
|
+
height: 64px;
|
|
11
|
+
padding: 0;
|
|
12
|
+
border: 1px solid var(--color-neutral-200);
|
|
13
|
+
border-radius: var(--border-radius-xs);
|
|
14
|
+
background: none;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
opacity: 0.5;
|
|
17
|
+
transition: opacity 0.3s ease;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
.thumbnailButton.active {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
border-color: var(--color-neutral-200);
|
|
24
|
+
}
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
26
|
+
.thumbnailImage {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
object-fit: cover;
|
|
32
30
|
}
|
|
31
|
+
|
|
32
|
+
@media (width <= 768px) {
|
|
33
|
+
.thumbnailButton {
|
|
34
|
+
width: 48px;
|
|
35
|
+
height: 48px;
|
|
36
|
+
}
|
|
37
|
+
}
|