@smwb/ui-react 2.0.1 → 2.1.0
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/README.md +5 -5
- package/dist/assets/styles/less/components/carousel/carousel.entry.css +1 -1
- package/dist/components/dataDisplay/carousel/carousel.d.ts +10 -0
- package/dist/components/dataDisplay/carousel/carousel.js +249 -131
- package/dist/components/dataDisplay/carousel/carousel.js.map +1 -1
- package/dist/components/dataDisplay/carousel/utils.d.ts +5 -0
- package/dist/components/dataDisplay/carousel/utils.js +32 -18
- package/dist/components/dataDisplay/carousel/utils.js.map +1 -1
- package/dist/components/inputs/selectField/selectField.js +85 -84
- package/dist/components/inputs/selectField/selectField.js.map +1 -1
- package/dist/components/layout/screenDivider/screenDivider.js +47 -56
- package/dist/components/layout/screenDivider/screenDivider.js.map +1 -1
- package/dist/headless/components/dataDisplay/carousel/carousel.js +249 -131
- package/dist/headless/components/dataDisplay/carousel/carousel.js.map +1 -1
- package/dist/headless/components/dataDisplay/carousel/utils.js +32 -18
- package/dist/headless/components/dataDisplay/carousel/utils.js.map +1 -1
- package/dist/headless/components/inputs/selectField/selectField.js +102 -101
- package/dist/headless/components/inputs/selectField/selectField.js.map +1 -1
- package/dist/headless/components/layout/screenDivider/screenDivider.js +47 -56
- package/dist/headless/components/layout/screenDivider/screenDivider.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,11 +9,11 @@ runtime light/dark theming and LESS-based customization. Part of the `@smwb` des
|
|
|
9
9
|
|
|
10
10
|
| Package | What it is |
|
|
11
11
|
| --- | --- |
|
|
12
|
-
| **`@smwb/ui-react`** | This package — React components. |
|
|
13
|
-
| `@smwb/ui-solid` | SolidJS port, same design system and class names. |
|
|
14
|
-
| `@smwb/ui-styles` | Framework-agnostic **LESS source** + design tokens (`smwb-*`). |
|
|
15
|
-
| `@smwb/ui-css` | **Prebuilt aggregate stylesheet** (`import "@smwb/ui-css"`). |
|
|
16
|
-
| `@smwb/ui-mcp-react` | MCP server exposing this catalog to AI tools. |
|
|
12
|
+
| [**`@smwb/ui-react`**](https://www.npmjs.com/package/@smwb/ui-react) | This package — React components. |
|
|
13
|
+
| [`@smwb/ui-solid`](https://www.npmjs.com/package/@smwb/ui-solid) | SolidJS port, same design system and class names. |
|
|
14
|
+
| [`@smwb/ui-styles`](https://www.npmjs.com/package/@smwb/ui-styles) | Framework-agnostic **LESS source** + design tokens (`smwb-*`). |
|
|
15
|
+
| [`@smwb/ui-css`](https://www.npmjs.com/package/@smwb/ui-css) | **Prebuilt aggregate stylesheet** (`import "@smwb/ui-css"`). |
|
|
16
|
+
| [`@smwb/ui-mcp-react`](https://www.npmjs.com/package/@smwb/ui-mcp-react) | MCP server exposing this catalog to AI tools. |
|
|
17
17
|
|
|
18
18
|
## Component catalog
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-carousel{max-width:412px}.smwb-carousel__inner{position:relative}.smwb-carousel__track{text-align:center;overflow:hidden;cursor:pointer;margin-left
|
|
1
|
+
.smwb-carousel{max-width:var(--smwb-carousel-max-width, 412px)}.smwb-carousel__inner{position:relative}.smwb-carousel__track{text-align:center;overflow:hidden;cursor:pointer;margin-left:calc(-1 * var(--smwb-carousel-gap, 4px));margin-right:calc(-1 * var(--smwb-carousel-gap, 4px));touch-action:pan-y}.smwb-carousel__layer{width:100%;height:100%;display:flex;will-change:transform}.smwb-carousel__slide{flex-shrink:0;padding-left:var(--smwb-carousel-gap, 4px);padding-right:var(--smwb-carousel-gap, 4px)}.smwb-carousel__slide-inner{border-radius:28px;overflow:hidden;will-change:width}.smwb-carousel__slide-inner_clickable{cursor:zoom-in}.smwb-carousel__slide-inner img{height:var(--smwb-carousel-cell-height, 205px);aspect-ratio:var(--smwb-carousel-aspect-ratio, .9);object-fit:cover;width:100%;user-select:none;-webkit-user-drag:none}.smwb-carousel__navigation{display:flex;justify-content:center}.smwb-carousel__navigation .current{background-color:var(--smui-onPrimaryContainerActive)}.smwb-carousel__navigation__dot{margin:3px;width:10px;height:10px;border-radius:50%;border:1px solid var(--smui-onPrimaryContainer)}.smwb-carousel__arrow{cursor:pointer;position:absolute;background:var(--smui-onPrimaryContainerActive);color:var(--smui-onPrimaryContainer);border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.smwb-carousel__fullscreen-stage{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}.smwb-carousel__fullscreen-stage img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}.smwb-carousel__fullscreen-arrow,.smwb-carousel__fullscreen-close{position:absolute;z-index:1;cursor:pointer;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.smwb-carousel__fullscreen-arrow{top:50%;transform:translateY(-50%)}.smwb-carousel__fullscreen-arrow_prev{left:16px}.smwb-carousel__fullscreen-arrow_next{right:16px}.smwb-carousel__fullscreen-close{top:16px;right:16px}
|
|
@@ -17,6 +17,16 @@ export interface CarouselProps extends React.PropsWithChildren {
|
|
|
17
17
|
autoplayInterval?: number;
|
|
18
18
|
/** Pause autoplay while the pointer is over the carousel. */
|
|
19
19
|
pauseOnHover?: boolean;
|
|
20
|
+
/** Height of each cell/photo. Number is treated as px. Overrides the default 205px. */
|
|
21
|
+
cellHeight?: number | string;
|
|
22
|
+
/** Aspect ratio of each cell/photo (e.g. 0.9 or "16 / 9"). Overrides the default 0.9. */
|
|
23
|
+
aspectRatio?: number | string;
|
|
24
|
+
/** Per-side spacing around each slide. Number is treated as px (default 4). */
|
|
25
|
+
gap?: number | string;
|
|
26
|
+
/** Max width of the carousel. Number is treated as px (default 412). */
|
|
27
|
+
maxWidth?: number | string;
|
|
28
|
+
/** Open the clicked slide in a fullscreen lightbox (arrows / swipe / Esc to navigate & close). */
|
|
29
|
+
enableFullscreen?: boolean;
|
|
20
30
|
}
|
|
21
31
|
export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
32
|
export default Carousel;
|
|
@@ -1,179 +1,297 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a, Fragment as ie, jsxs as j } from "react/jsx-runtime";
|
|
2
2
|
import '../../../assets/styles/less/components/carousel/carousel.entry.css';/* empty css */
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { useForkRef as
|
|
6
|
-
import { dragPrevent as
|
|
7
|
-
import { useSafeLayoutEffect as
|
|
8
|
-
import { useEventCallback as
|
|
9
|
-
import { Icon as
|
|
10
|
-
|
|
3
|
+
import O, { forwardRef as Oe, useState as x, useRef as T, useId as ze, useEffect as ue } from "react";
|
|
4
|
+
import m from "clsx";
|
|
5
|
+
import { useForkRef as Be } from "../../../hooks/useForkRef.js";
|
|
6
|
+
import { dragPrevent as de, getStartSlide as He, getSlidesToShow as Ke, isMouseEvent as fe, coordX as z, coordY as me, getSlideStyle as Ge, isTouchEvent as qe, getSlideWidth as Je, clamp as Qe, toCssLength as B, toCssNumber as Ue, getSlideIndexForMultipleParts as he } from "./utils.js";
|
|
7
|
+
import { useSafeLayoutEffect as _e } from "../../../hooks/useSafeLayoutEffect.js";
|
|
8
|
+
import { useEventCallback as H } from "../../../hooks/useEventCallback.js";
|
|
9
|
+
import { Icon as E } from "../../base/icon/icon.js";
|
|
10
|
+
import { Modal as Ze } from "../../feedBack/modal/modal.js";
|
|
11
|
+
const et = {
|
|
11
12
|
isPressed: !1,
|
|
12
13
|
startX: 0,
|
|
13
|
-
startY: 0
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
14
|
+
startY: 0,
|
|
15
|
+
lastX: 0,
|
|
16
|
+
lastT: 0,
|
|
17
|
+
axis: null,
|
|
18
|
+
dragged: !1
|
|
19
|
+
}, we = 8, tt = 0.4, ht = Oe(function({
|
|
20
|
+
slidesToShow: ve = 3,
|
|
21
|
+
startSlide: ge = 0,
|
|
22
|
+
children: w,
|
|
23
|
+
className: be,
|
|
24
|
+
showNavigation: xe = !0,
|
|
25
|
+
showArrows: pe,
|
|
26
|
+
arrowsSize: v = 30,
|
|
27
|
+
navigationClassName: Se,
|
|
28
|
+
onSlideChange: g,
|
|
29
|
+
navigationDotRenderer: K,
|
|
30
|
+
"aria-label": Ie = "Carousel",
|
|
31
|
+
autoplay: G = !1,
|
|
32
|
+
autoplayInterval: q = 4e3,
|
|
33
|
+
pauseOnHover: M = !0,
|
|
34
|
+
cellHeight: ye,
|
|
35
|
+
aspectRatio: Ne,
|
|
36
|
+
gap: Te,
|
|
37
|
+
maxWidth: Ee,
|
|
38
|
+
enableFullscreen: k = !1
|
|
39
|
+
}, Me) {
|
|
40
|
+
const s = O.Children.count(w), n = Ke(ve, s), L = He(ge, s), J = pe && s > 1, X = Math.max(0, s - n), [l, Q] = x(L), [Y, $] = x({
|
|
31
41
|
animation: void 0
|
|
32
|
-
}),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
...
|
|
42
|
+
}), [ke, U] = x(0), [Le, Z] = x(!1), [h, A] = x(null), P = T(null), Xe = T(null), Ae = Be(Me, Xe), f = T(null), [ee, te] = x(!1), i = T({ ...et });
|
|
43
|
+
_e(() => {
|
|
44
|
+
$((e) => ({
|
|
45
|
+
...e,
|
|
36
46
|
animation: !1
|
|
37
47
|
}));
|
|
38
|
-
}, [
|
|
39
|
-
|
|
40
|
-
...
|
|
48
|
+
}, [n]), _e(() => {
|
|
49
|
+
Q(L), g == null || g(L), Y.animation !== void 0 && $((e) => ({
|
|
50
|
+
...e,
|
|
41
51
|
animation: !0
|
|
42
52
|
}));
|
|
43
|
-
}, [
|
|
44
|
-
const
|
|
45
|
-
Object.assign(
|
|
46
|
-
},
|
|
47
|
-
|
|
53
|
+
}, [L]);
|
|
54
|
+
const F = (e) => {
|
|
55
|
+
Object.assign(i.current, e);
|
|
56
|
+
}, V = () => typeof performance != "undefined" ? performance.now() : Date.now(), se = (e) => {
|
|
57
|
+
const t = Qe(e, 0, X);
|
|
58
|
+
Q(t), $((r) => ({ ...r, animation: !0 })), g == null || g(t);
|
|
59
|
+
}, p = (e) => {
|
|
60
|
+
A((t) => t === null ? t : (t + e + s) % s);
|
|
61
|
+
}, S = T(null), Pe = (e) => {
|
|
62
|
+
f.current && (f.current.removeEventListener(e ? "mousemove" : "touchmove", ne), f.current.removeEventListener(e ? "mouseup" : "touchend", b), e && f.current.removeEventListener("mouseleave", b));
|
|
63
|
+
}, re = H((e) => {
|
|
64
|
+
if (!f.current)
|
|
48
65
|
return;
|
|
49
|
-
const
|
|
50
|
-
if (
|
|
66
|
+
const t = fe(e);
|
|
67
|
+
if (t && e.button !== 0)
|
|
51
68
|
return;
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
|
|
69
|
+
e.stopPropagation();
|
|
70
|
+
const r = z(e), o = me(e);
|
|
71
|
+
F({
|
|
55
72
|
isPressed: !0,
|
|
56
|
-
startX:
|
|
57
|
-
startY:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
73
|
+
startX: r,
|
|
74
|
+
startY: o,
|
|
75
|
+
lastX: r,
|
|
76
|
+
lastT: V(),
|
|
77
|
+
axis: null,
|
|
78
|
+
dragged: !1
|
|
79
|
+
}), f.current.addEventListener(t ? "mousemove" : "touchmove", ne, { passive: !1 }), f.current.addEventListener(t ? "mouseup" : "touchend", b), t && f.current.addEventListener("mouseleave", b);
|
|
80
|
+
}), ne = H((e) => {
|
|
81
|
+
if (!P.current || !i.current.isPressed)
|
|
61
82
|
return;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
if (
|
|
66
|
-
|
|
67
|
-
const o = V(t), m = Z(t), d = o - l, M = m - u, w = Math.abs(d), N = Math.abs(M);
|
|
68
|
-
if (w < N)
|
|
69
|
-
return;
|
|
70
|
-
const S = g.current.offsetWidth / s, ht = s === 1 ? 1.95 : 1.4;
|
|
71
|
-
if (w % S > S / ht) {
|
|
72
|
-
const _t = d < 0 ? 1 : -1, wt = r - s, E = c + _t;
|
|
73
|
-
if (E < 0 || E > wt)
|
|
83
|
+
if (qe(e) && e.touches.length > 1)
|
|
84
|
+
return b(e);
|
|
85
|
+
const t = z(e), r = me(e), o = t - i.current.startX, c = r - i.current.startY;
|
|
86
|
+
if (i.current.axis === null) {
|
|
87
|
+
if (Math.abs(o) < we && Math.abs(c) < we)
|
|
74
88
|
return;
|
|
75
|
-
|
|
89
|
+
const u = Math.abs(o) >= Math.abs(c) ? "x" : "y";
|
|
90
|
+
if (F({ axis: u, dragged: !0 }), u === "y")
|
|
91
|
+
return b(e);
|
|
92
|
+
s > 1 && Z(!0);
|
|
76
93
|
}
|
|
77
|
-
|
|
78
|
-
|
|
94
|
+
if (i.current.axis === "x") {
|
|
95
|
+
if (e.preventDefault(), e.stopPropagation(), s > 1) {
|
|
96
|
+
const u = l <= 0, d = l >= X, _ = u && o > 0 || d && o < 0 ? o * 0.35 : o;
|
|
97
|
+
U(_);
|
|
98
|
+
}
|
|
99
|
+
i.current.lastX = t, i.current.lastT = V();
|
|
100
|
+
}
|
|
101
|
+
}), b = H((e) => {
|
|
102
|
+
if (!i.current.isPressed)
|
|
79
103
|
return;
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
104
|
+
const t = fe(e);
|
|
105
|
+
Pe(t);
|
|
106
|
+
const { axis: r, dragged: o, startX: c, lastX: u, lastT: d } = i.current;
|
|
107
|
+
if (F({ isPressed: !1 }), Z(!1), r === "x" && o && s > 1 && P.current) {
|
|
108
|
+
const _ = z(e), D = _ - c, y = P.current.offsetWidth / n, R = d ? (_ - u) / Math.max(1, V() - d) : 0;
|
|
109
|
+
let N = y > 0 ? Math.round(-D / y) : 0;
|
|
110
|
+
N === 0 && Math.abs(R) > tt && (N = R < 0 ? 1 : -1), se(l + N);
|
|
111
|
+
}
|
|
112
|
+
U(0);
|
|
113
|
+
}), Ce = (e) => () => {
|
|
114
|
+
i.current.dragged || k && A(e);
|
|
115
|
+
}, C = (e) => () => se(e), W = (e) => {
|
|
116
|
+
const t = n === 1, r = t ? s : Math.ceil(s / n), o = l + n, c = s - n <= l, d = (he(o, n, s, c) + e + r) % r;
|
|
117
|
+
return t ? d : d * n;
|
|
118
|
+
}, De = () => {
|
|
119
|
+
if (!xe)
|
|
120
|
+
return /* @__PURE__ */ a(ie, {});
|
|
121
|
+
const e = s - n <= l, t = n === 1, r = t ? s : Math.ceil(s / n), o = [];
|
|
122
|
+
for (let c = 0; c < r; c++) {
|
|
123
|
+
let u = c, d = l;
|
|
124
|
+
if (!t) {
|
|
125
|
+
const R = c === r - 1, N = l + n;
|
|
126
|
+
u = R ? s - n : c * n, d = he(N, n, s, e);
|
|
97
127
|
}
|
|
98
|
-
const
|
|
99
|
-
let
|
|
100
|
-
|
|
128
|
+
const _ = d === c, D = C(u);
|
|
129
|
+
let y = /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation__dot", _ && "current"), onClick: D }, c);
|
|
130
|
+
K && (y = K(c, _, D)), o.push(y);
|
|
101
131
|
}
|
|
102
|
-
return /* @__PURE__ */
|
|
103
|
-
},
|
|
104
|
-
const
|
|
105
|
-
return
|
|
106
|
-
},
|
|
107
|
-
transform: `translateX(-${
|
|
108
|
-
transition:
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
Array.isArray(
|
|
112
|
-
}, [
|
|
113
|
-
if (!
|
|
132
|
+
return /* @__PURE__ */ a("div", { className: m("smwb-carousel__navigation", Se), children: o });
|
|
133
|
+
}, Re = () => {
|
|
134
|
+
const e = l > X ? X : l;
|
|
135
|
+
return Je(n) * e;
|
|
136
|
+
}, Ye = ze(), $e = Ge(n), Fe = {
|
|
137
|
+
transform: `translateX(calc(-${Re()}% + ${ke}px))`,
|
|
138
|
+
transition: Le || Y.animation === void 0 ? "none" : Y.animation ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none"
|
|
139
|
+
}, I = {}, oe = B(ye), ce = Ue(Ne), ae = B(Te), le = B(Ee);
|
|
140
|
+
if (oe && (I["--smwb-carousel-cell-height"] = oe), ce && (I["--smwb-carousel-aspect-ratio"] = ce), ae && (I["--smwb-carousel-gap"] = ae), le && (I["--smwb-carousel-max-width"] = le), O.useEffect(() => {
|
|
141
|
+
Array.isArray(w) || console.error("SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.");
|
|
142
|
+
}, [w]), ue(() => {
|
|
143
|
+
if (!G || s <= 1 || M && ee || h !== null)
|
|
144
|
+
return;
|
|
145
|
+
const e = window.setInterval(() => {
|
|
146
|
+
C(W(1))();
|
|
147
|
+
}, q);
|
|
148
|
+
return () => window.clearInterval(e);
|
|
149
|
+
}, [
|
|
150
|
+
G,
|
|
151
|
+
q,
|
|
152
|
+
M,
|
|
153
|
+
ee,
|
|
154
|
+
s,
|
|
155
|
+
l,
|
|
156
|
+
n,
|
|
157
|
+
h
|
|
158
|
+
]), ue(() => {
|
|
159
|
+
if (h === null || s <= 1)
|
|
114
160
|
return;
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
return () =>
|
|
119
|
-
}, [
|
|
161
|
+
const e = (t) => {
|
|
162
|
+
t.key === "ArrowLeft" ? p(-1) : t.key === "ArrowRight" && p(1);
|
|
163
|
+
};
|
|
164
|
+
return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
|
|
165
|
+
}, [h, s]), !Array.isArray(w))
|
|
166
|
+
return /* @__PURE__ */ a(ie, {});
|
|
167
|
+
const Ve = w, We = (e) => {
|
|
168
|
+
var t, r;
|
|
169
|
+
S.current = (r = (t = e.touches[0]) == null ? void 0 : t.clientX) != null ? r : null;
|
|
170
|
+
}, je = (e) => {
|
|
171
|
+
var r, o;
|
|
172
|
+
if (S.current === null || s <= 1)
|
|
173
|
+
return;
|
|
174
|
+
const t = ((o = (r = e.changedTouches[0]) == null ? void 0 : r.clientX) != null ? o : S.current) - S.current;
|
|
175
|
+
S.current = null, Math.abs(t) > 40 && p(t < 0 ? 1 : -1);
|
|
176
|
+
};
|
|
177
|
+
return /* @__PURE__ */ j(
|
|
120
178
|
"div",
|
|
121
179
|
{
|
|
122
|
-
className:
|
|
180
|
+
className: m("smwb-carousel", be),
|
|
123
181
|
"data-testid": "carousel",
|
|
124
|
-
ref:
|
|
182
|
+
ref: Ae,
|
|
125
183
|
role: "region",
|
|
126
184
|
"aria-roledescription": "carousel",
|
|
127
|
-
"aria-label":
|
|
128
|
-
|
|
129
|
-
|
|
185
|
+
"aria-label": Ie,
|
|
186
|
+
style: I,
|
|
187
|
+
onMouseEnter: M ? () => te(!0) : void 0,
|
|
188
|
+
onMouseLeave: M ? () => te(!1) : void 0,
|
|
130
189
|
children: [
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
-
|
|
133
|
-
|
|
190
|
+
/* @__PURE__ */ j("div", { className: m("smwb-carousel__inner"), ref: P, children: [
|
|
191
|
+
J && /* @__PURE__ */ a(
|
|
192
|
+
E,
|
|
134
193
|
{
|
|
135
194
|
name: "chevron_left",
|
|
136
|
-
size:
|
|
137
|
-
className:
|
|
195
|
+
size: v,
|
|
196
|
+
className: m("smwb-carousel__arrow", "smwb-carousel__arrow_prev"),
|
|
138
197
|
style: {
|
|
139
|
-
top: `calc(50% - ${
|
|
140
|
-
left: -
|
|
198
|
+
top: `calc(50% - ${v / 2}px)`,
|
|
199
|
+
left: -v / 2
|
|
141
200
|
},
|
|
142
|
-
onClick: () =>
|
|
201
|
+
onClick: () => C(W(-1))()
|
|
143
202
|
}
|
|
144
203
|
),
|
|
145
|
-
/* @__PURE__ */
|
|
204
|
+
/* @__PURE__ */ a(
|
|
146
205
|
"div",
|
|
147
206
|
{
|
|
148
|
-
ref:
|
|
207
|
+
ref: f,
|
|
149
208
|
className: "smwb-carousel__track",
|
|
150
|
-
onMouseDown:
|
|
151
|
-
onTouchStart:
|
|
152
|
-
onDragStart:
|
|
153
|
-
onDragEnd:
|
|
154
|
-
children: /* @__PURE__ */
|
|
209
|
+
onMouseDown: re,
|
|
210
|
+
onTouchStart: re,
|
|
211
|
+
onDragStart: de,
|
|
212
|
+
onDragEnd: de,
|
|
213
|
+
children: /* @__PURE__ */ a("div", { className: "smwb-carousel__layer", style: Fe, children: O.Children.map(w, (e, t) => /* @__PURE__ */ a("div", { id: `${Ye}${t}`, className: "smwb-carousel__slide", style: $e, children: /* @__PURE__ */ a(
|
|
214
|
+
"div",
|
|
215
|
+
{
|
|
216
|
+
className: m(
|
|
217
|
+
"smwb-carousel__slide-inner",
|
|
218
|
+
k && "smwb-carousel__slide-inner_clickable"
|
|
219
|
+
),
|
|
220
|
+
onClick: k ? Ce(t) : void 0,
|
|
221
|
+
children: e
|
|
222
|
+
}
|
|
223
|
+
) }, t)) })
|
|
155
224
|
}
|
|
156
225
|
),
|
|
157
|
-
|
|
158
|
-
|
|
226
|
+
J && /* @__PURE__ */ a(
|
|
227
|
+
E,
|
|
159
228
|
{
|
|
160
229
|
name: "chevron_right",
|
|
161
|
-
size:
|
|
162
|
-
className:
|
|
230
|
+
size: v,
|
|
231
|
+
className: m("smwb-carousel__arrow", "smwb-carousel__arrow_next"),
|
|
163
232
|
style: {
|
|
164
|
-
top: `calc(50% - ${
|
|
165
|
-
right: -
|
|
233
|
+
top: `calc(50% - ${v / 2}px)`,
|
|
234
|
+
right: -v / 2
|
|
166
235
|
},
|
|
167
|
-
onClick: () =>
|
|
236
|
+
onClick: () => C(W(1))()
|
|
168
237
|
}
|
|
169
238
|
)
|
|
170
239
|
] }),
|
|
171
|
-
|
|
240
|
+
De(),
|
|
241
|
+
k && /* @__PURE__ */ a(
|
|
242
|
+
Ze,
|
|
243
|
+
{
|
|
244
|
+
open: h !== null,
|
|
245
|
+
size: "fullscreen",
|
|
246
|
+
backdrop: "darkBlured",
|
|
247
|
+
className: "smwb-carousel__fullscreen",
|
|
248
|
+
onClose: () => A(null),
|
|
249
|
+
"aria-label": "Image viewer",
|
|
250
|
+
children: h !== null && /* @__PURE__ */ j("div", { className: "smwb-carousel__fullscreen-content", children: [
|
|
251
|
+
s > 1 && /* @__PURE__ */ a(
|
|
252
|
+
E,
|
|
253
|
+
{
|
|
254
|
+
name: "chevron_left",
|
|
255
|
+
size: 40,
|
|
256
|
+
className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev"),
|
|
257
|
+
onClick: () => p(-1)
|
|
258
|
+
}
|
|
259
|
+
),
|
|
260
|
+
/* @__PURE__ */ a(
|
|
261
|
+
"div",
|
|
262
|
+
{
|
|
263
|
+
className: "smwb-carousel__fullscreen-stage",
|
|
264
|
+
onTouchStart: We,
|
|
265
|
+
onTouchEnd: je,
|
|
266
|
+
children: Ve[h]
|
|
267
|
+
}
|
|
268
|
+
),
|
|
269
|
+
s > 1 && /* @__PURE__ */ a(
|
|
270
|
+
E,
|
|
271
|
+
{
|
|
272
|
+
name: "chevron_right",
|
|
273
|
+
size: 40,
|
|
274
|
+
className: m("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next"),
|
|
275
|
+
onClick: () => p(1)
|
|
276
|
+
}
|
|
277
|
+
),
|
|
278
|
+
/* @__PURE__ */ a(
|
|
279
|
+
E,
|
|
280
|
+
{
|
|
281
|
+
name: "close",
|
|
282
|
+
size: 32,
|
|
283
|
+
className: "smwb-carousel__fullscreen-close",
|
|
284
|
+
onClick: () => A(null)
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] })
|
|
288
|
+
}
|
|
289
|
+
)
|
|
172
290
|
]
|
|
173
291
|
}
|
|
174
|
-
)
|
|
292
|
+
);
|
|
175
293
|
});
|
|
176
294
|
export {
|
|
177
|
-
|
|
295
|
+
ht as Carousel
|
|
178
296
|
};
|
|
179
297
|
//# sourceMappingURL=carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.js","sources":["../../../../src/components/dataDisplay/carousel/carousel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useId, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport {\n coordX,\n coordY,\n dragPrevent,\n getSlideIndexForMultipleParts,\n getSlidesToShow,\n getSlideStyle,\n getSlideWidth,\n getStartSlide,\n isMouseEvent,\n isTouchEvent,\n} from \"./utils\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\n\nexport interface CarouselProps extends React.PropsWithChildren {\n slidesToShow?: number;\n startSlide?: number;\n className?: string;\n showNavigation?: boolean;\n showArrows?: boolean;\n arrowsSize?: number;\n navigationClassName?: string;\n onSlideChange?: (slideIndex: number) => void;\n navigationDotRenderer?: (index: number, isActive: boolean, onClick: (index: number) => void) => ReactNode;\n /** Accessible label for the carousel region. */\n \"aria-label\"?: string;\n /** Advance slides automatically. */\n autoplay?: boolean;\n /** Autoplay interval in ms. */\n autoplayInterval?: number;\n /** Pause autoplay while the pointer is over the carousel. */\n pauseOnHover?: boolean;\n}\n\ninterface ShiftState {\n animation: boolean | undefined;\n}\n\ninterface Motion {\n isPressed: boolean;\n startX: number;\n startY: number;\n}\n\nconst MOTION_INITIAL_STATE: Motion = {\n isPressed: false,\n startX: 0,\n startY: 0,\n};\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(\n {\n slidesToShow: slidesToShowProp = 3,\n startSlide: startSlideProp = 0,\n children,\n className,\n showNavigation = true,\n showArrows: showArrowsProp,\n arrowsSize = 30,\n navigationClassName,\n onSlideChange,\n navigationDotRenderer,\n \"aria-label\": ariaLabel = \"Carousel\",\n autoplay = false,\n autoplayInterval = 4000,\n pauseOnHover = true,\n },\n ref\n) {\n const slidesCount = React.Children.count(children);\n const slidesToShow = getSlidesToShow(slidesToShowProp, slidesCount);\n const startSlide = getStartSlide(startSlideProp, slidesCount);\n const showArrows = showArrowsProp && slidesCount > 1;\n\n const [activeSlideIndex, setActiveSlideIndex] = useState<number>(startSlide);\n const [shiftState, setShiftState] = useState<ShiftState>({\n animation: undefined,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const outerRef = useRef<HTMLDivElement>(null);\n const forkedOuterRef = useForkRef<HTMLDivElement>(ref, outerRef);\n const trackRef = useRef<HTMLDivElement>(null);\n const [isHovered, setIsHovered] = useState<boolean>(false);\n\n const motion = useRef<Motion>(MOTION_INITIAL_STATE);\n\n useSafeLayoutEffect(() => {\n setShiftState((prevState) => ({\n ...prevState,\n animation: false,\n }));\n }, [slidesToShow]);\n\n useSafeLayoutEffect(() => {\n setActiveSlideIndex(startSlide);\n onSlideChange?.(startSlide);\n\n if (shiftState.animation !== undefined) {\n setShiftState((prevState) => ({\n ...prevState,\n animation: true,\n }));\n }\n }, [startSlide]);\n\n const setMotion = (value: Partial<Motion>) => {\n Object.assign<Motion, Partial<Motion>>(motion.current, value);\n };\n\n const onStart = useEventCallback((event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n if (slidesCount <= 1) {\n return;\n }\n\n if (!trackRef.current) {\n return;\n }\n\n const isMouse = isMouseEvent(event);\n\n if (isMouse && event.button !== 0) {\n return;\n }\n\n event.stopPropagation();\n\n const clientX = coordX(event);\n const clientY = coordY(event);\n\n setMotion({\n isPressed: true,\n startX: clientX,\n startY: clientY,\n });\n\n trackRef.current.addEventListener(isMouse ? \"mousemove\" : \"touchmove\", onMove);\n trackRef.current.addEventListener(isMouse ? \"mouseup\" : \"touchend\", onEnd);\n\n if (isMouse) {\n trackRef.current.addEventListener(\"mouseleave\", onEnd);\n }\n });\n\n const onMove = useEventCallback((event: MouseEvent | TouchEvent) => {\n if (!rootRef.current) {\n return;\n }\n\n const { isPressed, startX, startY } = motion.current;\n\n if (!isPressed) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (isTouchEvent(event) && event.touches.length > 1) {\n return onEnd(event);\n }\n\n const clientX = coordX(event);\n const clientY = coordY(event);\n const shiftX = clientX - startX;\n const shiftY = clientY - startY;\n const shiftXAbs = Math.abs(shiftX);\n const shiftYAbs = Math.abs(shiftY);\n\n if (shiftXAbs < shiftYAbs) {\n return;\n }\n\n const viewWidth = rootRef.current.offsetWidth;\n const widthPerSlide = viewWidth / slidesToShow;\n const threshold = slidesToShow === 1 ? 1.95 : 1.4;\n\n if (shiftXAbs % widthPerSlide > widthPerSlide / threshold) {\n const direction = shiftX < 0 ? 1 : -1;\n const shiftSlidesMax = slidesCount - slidesToShow;\n const targetIndex = activeSlideIndex + direction;\n\n if (targetIndex < 0 || targetIndex > shiftSlidesMax) {\n return;\n }\n\n setActiveSlideIndex(targetIndex);\n setShiftState((prevState) => ({ ...prevState, animation: true }));\n setMotion({ startX: clientX, startY: clientY });\n onSlideChange?.(targetIndex);\n }\n });\n\n const onEnd = useEventCallback((event: MouseEvent | TouchEvent) => {\n if (!trackRef.current) {\n return;\n }\n\n if (!motion.current.isPressed) {\n return;\n }\n\n setMotion({ isPressed: false });\n\n const isMouse = isMouseEvent(event);\n\n trackRef.current.removeEventListener(isMouse ? \"mousemove\" : \"touchmove\", onMove);\n trackRef.current.removeEventListener(isMouse ? \"mouseup\" : \"touchend\", onEnd);\n\n if (isMouse) {\n trackRef.current.removeEventListener(\"mouseleave\", onEnd);\n }\n });\n\n const onNavigationItemClick = (index: number) => () => {\n setActiveSlideIndex(index);\n setShiftState((prevState) => ({ ...prevState, animation: true }));\n onSlideChange?.(index);\n };\n\n const getNextIndex = (direction: 1 | -1) => {\n const isSingleSlide = slidesToShow === 1;\n const totalGroups = isSingleSlide ? slidesCount : Math.ceil(slidesCount / slidesToShow);\n const activeIndex = activeSlideIndex + slidesToShow;\n const isNextSlideDisabled = slidesCount - slidesToShow <= activeSlideIndex;\n\n const currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow, slidesCount, isNextSlideDisabled);\n const nextIndex = (currentIndex + direction + totalGroups) % totalGroups;\n\n return isSingleSlide ? nextIndex : nextIndex * slidesToShow;\n };\n\n const getNavigation = () => {\n if (!showNavigation) {\n return <></>;\n }\n\n const isNextSlideDisabled = slidesCount - slidesToShow <= activeSlideIndex;\n const isSinglePartSlide = slidesToShow === 1;\n const count = isSinglePartSlide ? slidesCount : Math.ceil(slidesCount / slidesToShow);\n const indicators: React.ReactNode[] = [];\n\n for (let index = 0; index < count; index++) {\n let nextIndex = index;\n let currentIndex = activeSlideIndex;\n\n if (!isSinglePartSlide) {\n const isLast = index === count - 1;\n const activeIndex = activeSlideIndex + slidesToShow;\n\n nextIndex = isLast ? slidesCount - slidesToShow : index * slidesToShow;\n currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow, slidesCount, isNextSlideDisabled);\n }\n\n const isActive = currentIndex === index;\n const onClick = onNavigationItemClick(nextIndex);\n\n let indicator: ReactNode = (\n <div key={index} className={cn(\"smwb-carousel__navigation__dot\", isActive && \"current\")} onClick={onClick} />\n );\n\n if (navigationDotRenderer) {\n indicator = navigationDotRenderer(index, isActive, onClick);\n }\n\n indicators.push(indicator);\n }\n\n return <div className={cn(\"smwb-carousel__navigation\", navigationClassName)}>{indicators}</div>;\n };\n\n const getIndent = () => {\n const shiftSlidesMax = slidesCount - slidesToShow;\n const shiftSlides = activeSlideIndex > shiftSlidesMax ? shiftSlidesMax : activeSlideIndex;\n\n return getSlideWidth(slidesToShow) * shiftSlides;\n };\n\n const slideId = useId();\n const slideStyle = getSlideStyle(slidesToShow);\n\n const indent = getIndent();\n\n const layerStyle = {\n transform: `translateX(-${indent}%)`,\n transition: shiftState.animation ? `transform 500ms cubic-bezier(.1, 0, .25, 1)` : \"none\",\n };\n\n React.useEffect(() => {\n if (!Array.isArray(children)) {\n console.error(\"SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.\");\n }\n }, [children]);\n\n useEffect(() => {\n if (!autoplay || slidesCount <= 1 || (pauseOnHover && isHovered)) {\n return;\n }\n const timer = window.setInterval(() => {\n onNavigationItemClick(getNextIndex(1))();\n }, autoplayInterval);\n\n return () => window.clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoplay, autoplayInterval, pauseOnHover, isHovered, slidesCount, activeSlideIndex, slidesToShow]);\n\n if (!Array.isArray(children)) {\n return <></>;\n }\n\n return (\n <div\n className={cn(\"smwb-carousel\", className)}\n data-testid=\"carousel\"\n ref={forkedOuterRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={ariaLabel}\n onMouseEnter={pauseOnHover ? () => setIsHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setIsHovered(false) : undefined}\n >\n <div className={cn(\"smwb-carousel__inner\")} ref={rootRef}>\n {showArrows && (\n <Icon\n name=\"chevron_left\"\n size={arrowsSize}\n className={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_prev\")}\n style={{\n top: `calc(50% - ${arrowsSize / 2}px)`,\n left: -arrowsSize / 2,\n }}\n onClick={() => onNavigationItemClick(getNextIndex(-1))()}\n />\n )}\n <div\n ref={trackRef}\n className=\"smwb-carousel__track\"\n onMouseDown={onStart}\n onTouchStart={onStart}\n onDragStart={dragPrevent}\n onDragEnd={dragPrevent}\n >\n <div className=\"smwb-carousel__layer\" style={layerStyle}>\n {React.Children.map(children, (child, index) => (\n <div key={index} id={`${slideId}${index}`} className=\"smwb-carousel__slide\" style={slideStyle}>\n <div className=\"smwb-carousel__slide-inner\">{child}</div>\n </div>\n ))}\n </div>\n </div>\n {showArrows && (\n <Icon\n name=\"chevron_right\"\n size={arrowsSize}\n className={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_next\")}\n style={{\n top: `calc(50% - ${arrowsSize / 2}px)`,\n right: -arrowsSize / 2,\n }}\n onClick={() => onNavigationItemClick(getNextIndex(1))()}\n />\n )}\n </div>\n {getNavigation()}\n </div>\n );\n});\n\nexport default Carousel;\n"],"names":["MOTION_INITIAL_STATE","Carousel","forwardRef","slidesToShowProp","startSlideProp","children","className","showNavigation","showArrowsProp","arrowsSize","navigationClassName","onSlideChange","navigationDotRenderer","ariaLabel","autoplay","autoplayInterval","pauseOnHover","ref","slidesCount","React","slidesToShow","getSlidesToShow","startSlide","getStartSlide","showArrows","activeSlideIndex","setActiveSlideIndex","useState","shiftState","setShiftState","rootRef","useRef","outerRef","forkedOuterRef","useForkRef","trackRef","isHovered","setIsHovered","motion","useSafeLayoutEffect","prevState","setMotion","value","onStart","useEventCallback","event","isMouse","isMouseEvent","clientX","coordX","clientY","coordY","onMove","onEnd","isPressed","startX","startY","isTouchEvent","shiftX","shiftY","shiftXAbs","shiftYAbs","widthPerSlide","threshold","direction","shiftSlidesMax","targetIndex","onNavigationItemClick","index","getNextIndex","isSingleSlide","totalGroups","activeIndex","isNextSlideDisabled","nextIndex","getSlideIndexForMultipleParts","getNavigation","jsx","Fragment","isSinglePartSlide","count","indicators","currentIndex","isLast","isActive","onClick","indicator","cn","getIndent","shiftSlides","getSlideWidth","slideId","useId","slideStyle","getSlideStyle","layerStyle","useEffect","timer","jsxs","Icon","dragPrevent","child"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"carousel.js","sources":["../../../../src/components/dataDisplay/carousel/carousel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useId, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Modal } from \"../../feedBack/modal\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport {\n clamp,\n coordX,\n coordY,\n dragPrevent,\n getSlideIndexForMultipleParts,\n getSlidesToShow,\n getSlideStyle,\n getSlideWidth,\n getStartSlide,\n isMouseEvent,\n isTouchEvent,\n toCssLength,\n toCssNumber,\n} from \"./utils\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\n\nexport interface CarouselProps extends React.PropsWithChildren {\n slidesToShow?: number;\n startSlide?: number;\n className?: string;\n showNavigation?: boolean;\n showArrows?: boolean;\n arrowsSize?: number;\n navigationClassName?: string;\n onSlideChange?: (slideIndex: number) => void;\n navigationDotRenderer?: (index: number, isActive: boolean, onClick: (index: number) => void) => ReactNode;\n /** Accessible label for the carousel region. */\n \"aria-label\"?: string;\n /** Advance slides automatically. */\n autoplay?: boolean;\n /** Autoplay interval in ms. */\n autoplayInterval?: number;\n /** Pause autoplay while the pointer is over the carousel. */\n pauseOnHover?: boolean;\n /** Height of each cell/photo. Number is treated as px. Overrides the default 205px. */\n cellHeight?: number | string;\n /** Aspect ratio of each cell/photo (e.g. 0.9 or \"16 / 9\"). Overrides the default 0.9. */\n aspectRatio?: number | string;\n /** Per-side spacing around each slide. Number is treated as px (default 4). */\n gap?: number | string;\n /** Max width of the carousel. Number is treated as px (default 412). */\n maxWidth?: number | string;\n /** Open the clicked slide in a fullscreen lightbox (arrows / swipe / Esc to navigate & close). */\n enableFullscreen?: boolean;\n}\n\ninterface ShiftState {\n animation: boolean | undefined;\n}\n\ntype Axis = \"x\" | \"y\" | null;\n\ninterface Motion {\n isPressed: boolean;\n startX: number;\n startY: number;\n lastX: number;\n lastT: number;\n axis: Axis;\n dragged: boolean;\n}\n\nconst MOTION_INITIAL_STATE: Motion = {\n isPressed: false,\n startX: 0,\n startY: 0,\n lastX: 0,\n lastT: 0,\n axis: null,\n dragged: false,\n};\n\n// Movement (px) below which a pointer interaction is treated as a tap, not a drag.\nconst TAP_THRESHOLD = 8;\n// Flick velocity (px/ms) above which we advance a slide even on a short drag.\nconst FLICK_VELOCITY = 0.4;\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel(\n {\n slidesToShow: slidesToShowProp = 3,\n startSlide: startSlideProp = 0,\n children,\n className,\n showNavigation = true,\n showArrows: showArrowsProp,\n arrowsSize = 30,\n navigationClassName,\n onSlideChange,\n navigationDotRenderer,\n \"aria-label\": ariaLabel = \"Carousel\",\n autoplay = false,\n autoplayInterval = 4000,\n pauseOnHover = true,\n cellHeight,\n aspectRatio,\n gap,\n maxWidth,\n enableFullscreen = false,\n },\n ref\n) {\n const slidesCount = React.Children.count(children);\n const slidesToShow = getSlidesToShow(slidesToShowProp, slidesCount);\n const startSlide = getStartSlide(startSlideProp, slidesCount);\n const showArrows = showArrowsProp && slidesCount > 1;\n const maxShift = Math.max(0, slidesCount - slidesToShow);\n\n const [activeSlideIndex, setActiveSlideIndex] = useState<number>(startSlide);\n const [shiftState, setShiftState] = useState<ShiftState>({\n animation: undefined,\n });\n // Live pointer-follow offset (px) applied on top of the resting %-based indent.\n const [dragPx, setDragPx] = useState<number>(0);\n const [isDragging, setIsDragging] = useState<boolean>(false);\n const [fullscreenIndex, setFullscreenIndex] = useState<number | null>(null);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const outerRef = useRef<HTMLDivElement>(null);\n const forkedOuterRef = useForkRef<HTMLDivElement>(ref, outerRef);\n const trackRef = useRef<HTMLDivElement>(null);\n const [isHovered, setIsHovered] = useState<boolean>(false);\n\n const motion = useRef<Motion>({ ...MOTION_INITIAL_STATE });\n\n useSafeLayoutEffect(() => {\n setShiftState((prevState) => ({\n ...prevState,\n animation: false,\n }));\n }, [slidesToShow]);\n\n useSafeLayoutEffect(() => {\n setActiveSlideIndex(startSlide);\n onSlideChange?.(startSlide);\n\n if (shiftState.animation !== undefined) {\n setShiftState((prevState) => ({\n ...prevState,\n animation: true,\n }));\n }\n }, [startSlide]);\n\n const setMotion = (value: Partial<Motion>) => {\n Object.assign<Motion, Partial<Motion>>(motion.current, value);\n };\n\n const now = () => (typeof performance !== \"undefined\" ? performance.now() : Date.now());\n\n const goToSlide = (index: number) => {\n const target = clamp(index, 0, maxShift);\n\n setActiveSlideIndex(target);\n setShiftState((prevState) => ({ ...prevState, animation: true }));\n onSlideChange?.(target);\n };\n\n const moveFullscreen = (direction: 1 | -1) => {\n setFullscreenIndex((prev) => (prev === null ? prev : (prev + direction + slidesCount) % slidesCount));\n };\n\n const fullscreenTouchX = useRef<number | null>(null);\n\n const detachListeners = (isMouse: boolean) => {\n if (!trackRef.current) {\n return;\n }\n\n trackRef.current.removeEventListener(isMouse ? \"mousemove\" : \"touchmove\", onMove);\n trackRef.current.removeEventListener(isMouse ? \"mouseup\" : \"touchend\", onEnd);\n\n if (isMouse) {\n trackRef.current.removeEventListener(\"mouseleave\", onEnd);\n }\n };\n\n const onStart = useEventCallback((event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n if (!trackRef.current) {\n return;\n }\n\n const isMouse = isMouseEvent(event);\n\n if (isMouse && event.button !== 0) {\n return;\n }\n\n event.stopPropagation();\n\n const clientX = coordX(event);\n const clientY = coordY(event);\n\n setMotion({\n isPressed: true,\n startX: clientX,\n startY: clientY,\n lastX: clientX,\n lastT: now(),\n axis: null,\n dragged: false,\n });\n\n trackRef.current.addEventListener(isMouse ? \"mousemove\" : \"touchmove\", onMove, { passive: false });\n trackRef.current.addEventListener(isMouse ? \"mouseup\" : \"touchend\", onEnd);\n\n if (isMouse) {\n trackRef.current.addEventListener(\"mouseleave\", onEnd);\n }\n });\n\n const onMove = useEventCallback((event: MouseEvent | TouchEvent) => {\n if (!rootRef.current || !motion.current.isPressed) {\n return;\n }\n\n if (isTouchEvent(event) && event.touches.length > 1) {\n return onEnd(event);\n }\n\n const clientX = coordX(event);\n const clientY = coordY(event);\n const shiftX = clientX - motion.current.startX;\n const shiftY = clientY - motion.current.startY;\n\n // Lock the gesture axis once the pointer has moved past the tap threshold.\n if (motion.current.axis === null) {\n if (Math.abs(shiftX) < TAP_THRESHOLD && Math.abs(shiftY) < TAP_THRESHOLD) {\n return;\n }\n\n const axis: Axis = Math.abs(shiftX) >= Math.abs(shiftY) ? \"x\" : \"y\";\n setMotion({ axis, dragged: true });\n\n // Vertical intent → release so the page can scroll.\n if (axis === \"y\") {\n return onEnd(event);\n }\n\n if (slidesCount > 1) {\n setIsDragging(true);\n }\n }\n\n if (motion.current.axis !== \"x\") {\n return;\n }\n\n // Horizontal drag: keep the gesture and follow the finger.\n event.preventDefault();\n event.stopPropagation();\n\n if (slidesCount > 1) {\n const atStart = activeSlideIndex <= 0;\n const atEnd = activeSlideIndex >= maxShift;\n // Add resistance when dragging beyond the first / last slide.\n const offset = (atStart && shiftX > 0) || (atEnd && shiftX < 0) ? shiftX * 0.35 : shiftX;\n setDragPx(offset);\n }\n\n motion.current.lastX = clientX;\n motion.current.lastT = now();\n });\n\n const onEnd = useEventCallback((event: MouseEvent | TouchEvent) => {\n if (!motion.current.isPressed) {\n return;\n }\n\n const isMouse = isMouseEvent(event);\n detachListeners(isMouse);\n\n const { axis, dragged, startX, lastX, lastT } = motion.current;\n setMotion({ isPressed: false });\n setIsDragging(false);\n\n if (axis === \"x\" && dragged && slidesCount > 1 && rootRef.current) {\n const clientX = coordX(event);\n const totalShift = clientX - startX;\n const widthPerSlide = rootRef.current.offsetWidth / slidesToShow;\n const velocity = lastT ? (clientX - lastX) / Math.max(1, now() - lastT) : 0;\n\n let movedSlides = widthPerSlide > 0 ? Math.round(-totalShift / widthPerSlide) : 0;\n\n if (movedSlides === 0 && Math.abs(velocity) > FLICK_VELOCITY) {\n movedSlides = velocity < 0 ? 1 : -1;\n }\n\n goToSlide(activeSlideIndex + movedSlides);\n }\n\n // Animate back to the resting position (snap / snap-back).\n setDragPx(0);\n });\n\n const onSlideClick = (index: number) => () => {\n // Suppress the click that fires at the end of a drag.\n if (motion.current.dragged) {\n return;\n }\n\n if (enableFullscreen) {\n setFullscreenIndex(index);\n }\n };\n\n const onNavigationItemClick = (index: number) => () => goToSlide(index);\n\n const getNextIndex = (direction: 1 | -1) => {\n const isSingleSlide = slidesToShow === 1;\n const totalGroups = isSingleSlide ? slidesCount : Math.ceil(slidesCount / slidesToShow);\n const activeIndex = activeSlideIndex + slidesToShow;\n const isNextSlideDisabled = slidesCount - slidesToShow <= activeSlideIndex;\n\n const currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow, slidesCount, isNextSlideDisabled);\n const nextIndex = (currentIndex + direction + totalGroups) % totalGroups;\n\n return isSingleSlide ? nextIndex : nextIndex * slidesToShow;\n };\n\n const getNavigation = () => {\n if (!showNavigation) {\n return <></>;\n }\n\n const isNextSlideDisabled = slidesCount - slidesToShow <= activeSlideIndex;\n const isSinglePartSlide = slidesToShow === 1;\n const count = isSinglePartSlide ? slidesCount : Math.ceil(slidesCount / slidesToShow);\n const indicators: React.ReactNode[] = [];\n\n for (let index = 0; index < count; index++) {\n let nextIndex = index;\n let currentIndex = activeSlideIndex;\n\n if (!isSinglePartSlide) {\n const isLast = index === count - 1;\n const activeIndex = activeSlideIndex + slidesToShow;\n\n nextIndex = isLast ? slidesCount - slidesToShow : index * slidesToShow;\n currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow, slidesCount, isNextSlideDisabled);\n }\n\n const isActive = currentIndex === index;\n const onClick = onNavigationItemClick(nextIndex);\n\n let indicator: ReactNode = (\n <div key={index} className={cn(\"smwb-carousel__navigation__dot\", isActive && \"current\")} onClick={onClick} />\n );\n\n if (navigationDotRenderer) {\n indicator = navigationDotRenderer(index, isActive, onClick);\n }\n\n indicators.push(indicator);\n }\n\n return <div className={cn(\"smwb-carousel__navigation\", navigationClassName)}>{indicators}</div>;\n };\n\n const getIndent = () => {\n const shiftSlides = activeSlideIndex > maxShift ? maxShift : activeSlideIndex;\n\n return getSlideWidth(slidesToShow) * shiftSlides;\n };\n\n const slideId = useId();\n const slideStyle = getSlideStyle(slidesToShow);\n\n const indent = getIndent();\n\n const layerStyle: React.CSSProperties = {\n transform: `translateX(calc(-${indent}% + ${dragPx}px))`,\n transition:\n isDragging || shiftState.animation === undefined\n ? \"none\"\n : shiftState.animation\n ? \"transform 500ms cubic-bezier(.1, 0, .25, 1)\"\n : \"none\",\n };\n\n const rootStyle: React.CSSProperties = {};\n const cellHeightValue = toCssLength(cellHeight);\n const aspectRatioValue = toCssNumber(aspectRatio);\n const gapValue = toCssLength(gap);\n const maxWidthValue = toCssLength(maxWidth);\n if (cellHeightValue) (rootStyle as Record<string, string>)[\"--smwb-carousel-cell-height\"] = cellHeightValue;\n if (aspectRatioValue) (rootStyle as Record<string, string>)[\"--smwb-carousel-aspect-ratio\"] = aspectRatioValue;\n if (gapValue) (rootStyle as Record<string, string>)[\"--smwb-carousel-gap\"] = gapValue;\n if (maxWidthValue) (rootStyle as Record<string, string>)[\"--smwb-carousel-max-width\"] = maxWidthValue;\n\n React.useEffect(() => {\n if (!Array.isArray(children)) {\n console.error(\"SMWB Material: The `children` prop was passed invalidly. It should contain an array of elements.\");\n }\n }, [children]);\n\n useEffect(() => {\n if (!autoplay || slidesCount <= 1 || (pauseOnHover && isHovered) || fullscreenIndex !== null) {\n return;\n }\n const timer = window.setInterval(() => {\n onNavigationItemClick(getNextIndex(1))();\n }, autoplayInterval);\n\n return () => window.clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n autoplay,\n autoplayInterval,\n pauseOnHover,\n isHovered,\n slidesCount,\n activeSlideIndex,\n slidesToShow,\n fullscreenIndex,\n ]);\n\n useEffect(() => {\n if (fullscreenIndex === null || slidesCount <= 1) {\n return;\n }\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n moveFullscreen(-1);\n } else if (event.key === \"ArrowRight\") {\n moveFullscreen(1);\n }\n };\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [fullscreenIndex, slidesCount]);\n\n if (!Array.isArray(children)) {\n return <></>;\n }\n\n const childrenArray = children as ReactNode[];\n\n const onFullscreenTouchStart = (event: React.TouchEvent) => {\n fullscreenTouchX.current = event.touches[0]?.clientX ?? null;\n };\n\n const onFullscreenTouchEnd = (event: React.TouchEvent) => {\n if (fullscreenTouchX.current === null || slidesCount <= 1) {\n return;\n }\n const delta = (event.changedTouches[0]?.clientX ?? fullscreenTouchX.current) - fullscreenTouchX.current;\n fullscreenTouchX.current = null;\n if (Math.abs(delta) > 40) {\n moveFullscreen(delta < 0 ? 1 : -1);\n }\n };\n\n return (\n <div\n className={cn(\"smwb-carousel\", className)}\n data-testid=\"carousel\"\n ref={forkedOuterRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label={ariaLabel}\n style={rootStyle}\n onMouseEnter={pauseOnHover ? () => setIsHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setIsHovered(false) : undefined}\n >\n <div className={cn(\"smwb-carousel__inner\")} ref={rootRef}>\n {showArrows && (\n <Icon\n name=\"chevron_left\"\n size={arrowsSize}\n className={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_prev\")}\n style={{\n top: `calc(50% - ${arrowsSize / 2}px)`,\n left: -arrowsSize / 2,\n }}\n onClick={() => onNavigationItemClick(getNextIndex(-1))()}\n />\n )}\n <div\n ref={trackRef}\n className=\"smwb-carousel__track\"\n onMouseDown={onStart}\n onTouchStart={onStart}\n onDragStart={dragPrevent}\n onDragEnd={dragPrevent}\n >\n <div className=\"smwb-carousel__layer\" style={layerStyle}>\n {React.Children.map(children, (child, index) => (\n <div key={index} id={`${slideId}${index}`} className=\"smwb-carousel__slide\" style={slideStyle}>\n <div\n className={cn(\n \"smwb-carousel__slide-inner\",\n enableFullscreen && \"smwb-carousel__slide-inner_clickable\"\n )}\n onClick={enableFullscreen ? onSlideClick(index) : undefined}\n >\n {child}\n </div>\n </div>\n ))}\n </div>\n </div>\n {showArrows && (\n <Icon\n name=\"chevron_right\"\n size={arrowsSize}\n className={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_next\")}\n style={{\n top: `calc(50% - ${arrowsSize / 2}px)`,\n right: -arrowsSize / 2,\n }}\n onClick={() => onNavigationItemClick(getNextIndex(1))()}\n />\n )}\n </div>\n {getNavigation()}\n {enableFullscreen && (\n <Modal\n open={fullscreenIndex !== null}\n size=\"fullscreen\"\n backdrop=\"darkBlured\"\n className=\"smwb-carousel__fullscreen\"\n onClose={() => setFullscreenIndex(null)}\n aria-label=\"Image viewer\"\n >\n {fullscreenIndex !== null && (\n <div className=\"smwb-carousel__fullscreen-content\">\n {slidesCount > 1 && (\n <Icon\n name=\"chevron_left\"\n size={40}\n className={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_prev\")}\n onClick={() => moveFullscreen(-1)}\n />\n )}\n <div\n className=\"smwb-carousel__fullscreen-stage\"\n onTouchStart={onFullscreenTouchStart}\n onTouchEnd={onFullscreenTouchEnd}\n >\n {childrenArray[fullscreenIndex]}\n </div>\n {slidesCount > 1 && (\n <Icon\n name=\"chevron_right\"\n size={40}\n className={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_next\")}\n onClick={() => moveFullscreen(1)}\n />\n )}\n <Icon\n name=\"close\"\n size={32}\n className=\"smwb-carousel__fullscreen-close\"\n onClick={() => setFullscreenIndex(null)}\n />\n </div>\n )}\n </Modal>\n )}\n </div>\n );\n});\n\nexport default Carousel;\n"],"names":["MOTION_INITIAL_STATE","TAP_THRESHOLD","FLICK_VELOCITY","Carousel","forwardRef","slidesToShowProp","startSlideProp","children","className","showNavigation","showArrowsProp","arrowsSize","navigationClassName","onSlideChange","navigationDotRenderer","ariaLabel","autoplay","autoplayInterval","pauseOnHover","cellHeight","aspectRatio","gap","maxWidth","enableFullscreen","ref","slidesCount","React","slidesToShow","getSlidesToShow","startSlide","getStartSlide","showArrows","maxShift","activeSlideIndex","setActiveSlideIndex","useState","shiftState","setShiftState","dragPx","setDragPx","isDragging","setIsDragging","fullscreenIndex","setFullscreenIndex","rootRef","useRef","outerRef","forkedOuterRef","useForkRef","trackRef","isHovered","setIsHovered","motion","useSafeLayoutEffect","prevState","setMotion","value","now","goToSlide","index","target","clamp","moveFullscreen","direction","prev","fullscreenTouchX","detachListeners","isMouse","onMove","onEnd","onStart","useEventCallback","event","isMouseEvent","clientX","coordX","clientY","coordY","isTouchEvent","shiftX","shiftY","axis","atStart","atEnd","offset","dragged","startX","lastX","lastT","totalShift","widthPerSlide","velocity","movedSlides","onSlideClick","onNavigationItemClick","getNextIndex","isSingleSlide","totalGroups","activeIndex","isNextSlideDisabled","nextIndex","getSlideIndexForMultipleParts","getNavigation","jsx","Fragment","isSinglePartSlide","count","indicators","currentIndex","isLast","isActive","onClick","indicator","cn","getIndent","shiftSlides","getSlideWidth","slideId","useId","slideStyle","getSlideStyle","layerStyle","rootStyle","cellHeightValue","toCssLength","aspectRatioValue","toCssNumber","gapValue","maxWidthValue","useEffect","timer","onKeyDown","childrenArray","onFullscreenTouchStart","_b","_a","onFullscreenTouchEnd","delta","jsxs","Icon","dragPrevent","child","Modal"],"mappings":"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"}
|
|
@@ -10,4 +10,9 @@ export declare function dragPrevent(event: React.SyntheticEvent): void;
|
|
|
10
10
|
export declare function getSlideStyle(slidesToShow: number): React.CSSProperties;
|
|
11
11
|
export declare function getSlideWidth(slidesToShow: number): number;
|
|
12
12
|
export declare function getSlidesToShow(slidesToShow: number, slidesCount: number): number;
|
|
13
|
+
export declare function clamp(value: number, min: number, max: number): number;
|
|
14
|
+
/** Number -> "<n>px", string -> as-is, nullish -> undefined. */
|
|
15
|
+
export declare function toCssLength(value?: number | string): string | undefined;
|
|
16
|
+
/** Number/string -> string, nullish -> undefined (for unit-less CSS values like aspect-ratio). */
|
|
17
|
+
export declare function toCssNumber(value?: number | string): string | undefined;
|
|
13
18
|
export declare function getStartSlide(startSlide: number, slidesCount: number): number;
|