@dotss/tictoccroc 0.0.26 → 0.0.27
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.
|
@@ -1,161 +1,184 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Box as
|
|
1
|
+
import { jsx as x } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useRef as p, Children as H, isValidElement as V, useEffect as d, cloneElement as $ } from "react";
|
|
3
|
+
import { Box as J, Flexbox as ct } from "@dotss/ui";
|
|
4
4
|
import lt from "@dotss/ui/core/useTheme";
|
|
5
|
-
import { findImageInChildren as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
5
|
+
import { findImageInChildren as F, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as A } from "./Masonry.utils.mjs";
|
|
6
|
+
import Q from "./MasonryBlock/MasonryBlock.mjs";
|
|
7
|
+
import Y from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
|
|
8
8
|
function kt({
|
|
9
|
-
children:
|
|
10
|
-
columnCount:
|
|
9
|
+
children: E,
|
|
10
|
+
columnCount: W = 2,
|
|
11
11
|
rowCount: B = 2,
|
|
12
|
-
spacing:
|
|
13
|
-
edgeSpacing:
|
|
14
|
-
direction:
|
|
15
|
-
defaultContainerWidth:
|
|
16
|
-
defaultContainerHeight:
|
|
17
|
-
...
|
|
12
|
+
spacing: c = 2,
|
|
13
|
+
edgeSpacing: b = 0,
|
|
14
|
+
direction: k = "vertical",
|
|
15
|
+
defaultContainerWidth: Z = 360,
|
|
16
|
+
defaultContainerHeight: _ = 0,
|
|
17
|
+
...l
|
|
18
18
|
}) {
|
|
19
|
-
const { spacing:
|
|
20
|
-
|
|
21
|
-
), [
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
return ((
|
|
19
|
+
const { spacing: T } = lt(), [K, O] = m(Z), [tt, et] = m(_), [N, rt] = m(0), M = 4 / 3, h = (K - c) / W, f = k === "horizontal" ? (tt - c) / B : h * M, a = p(null), g = p([]), R = p([]), D = p(!1), L = p(!0), P = p(0), I = p(0), v = p(0), [w, nt] = m(
|
|
20
|
+
H.toArray(E).filter(V).filter((t) => t.type === Q || t.type === Y)
|
|
21
|
+
), [y, ot] = m(
|
|
22
|
+
w.map((t) => {
|
|
23
|
+
var e;
|
|
24
|
+
return ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "";
|
|
25
25
|
})
|
|
26
|
-
), [
|
|
27
|
-
|
|
28
|
-
var
|
|
26
|
+
), [z, U] = m(
|
|
27
|
+
w.map((t) => {
|
|
28
|
+
var e;
|
|
29
29
|
return {
|
|
30
|
-
src: ((
|
|
31
|
-
width:
|
|
32
|
-
height:
|
|
30
|
+
src: ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "",
|
|
31
|
+
width: t.props.width ?? h,
|
|
32
|
+
height: t.props.height ?? f
|
|
33
33
|
};
|
|
34
34
|
})
|
|
35
|
-
),
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
},
|
|
35
|
+
), X = w.length, G = (t) => {
|
|
36
|
+
var e, r;
|
|
37
|
+
D.current = !0, P.current = t.clientX - (((e = a.current) == null ? void 0 : e.offsetLeft) || 0), I.current = ((r = a.current) == null ? void 0 : r.scrollLeft) || 0;
|
|
38
|
+
}, j = (t) => {
|
|
39
|
+
D.current && (t.currentTarget.style.cursor = "grabbing", a.current && (a.current.scrollLeft = I.current - (t.clientX - a.current.offsetLeft - P.current)));
|
|
40
|
+
}, C = (t) => {
|
|
41
41
|
var r;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
})) :
|
|
45
|
-
},
|
|
46
|
-
|
|
42
|
+
D.current = !1, I.current !== ((r = a.current) == null ? void 0 : r.scrollLeft) ? (t.currentTarget.style.cursor = "grab", L.current = !1, v.current && cancelAnimationFrame(v.current), v.current = requestAnimationFrame(() => {
|
|
43
|
+
L.current = !0;
|
|
44
|
+
})) : L.current = !0;
|
|
45
|
+
}, st = (t) => (e) => {
|
|
46
|
+
e.stopPropagation();
|
|
47
47
|
let r = null;
|
|
48
|
-
switch (
|
|
48
|
+
switch (e.key) {
|
|
49
49
|
case "ArrowRight":
|
|
50
|
-
|
|
50
|
+
e.preventDefault(), r = A(e.currentTarget, "right", g.current);
|
|
51
51
|
break;
|
|
52
52
|
case "ArrowLeft":
|
|
53
|
-
|
|
53
|
+
e.preventDefault(), r = A(e.currentTarget, "left", g.current);
|
|
54
54
|
break;
|
|
55
55
|
case "ArrowDown":
|
|
56
|
-
|
|
56
|
+
e.preventDefault(), r = A(e.currentTarget, "down", g.current);
|
|
57
57
|
break;
|
|
58
58
|
case "ArrowUp":
|
|
59
|
-
|
|
59
|
+
e.preventDefault(), r = A(e.currentTarget, "up", g.current);
|
|
60
60
|
break;
|
|
61
61
|
case "Enter":
|
|
62
62
|
case " ": {
|
|
63
|
-
|
|
63
|
+
e.preventDefault(), e.currentTarget.click();
|
|
64
64
|
return;
|
|
65
65
|
}
|
|
66
66
|
default:
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
-
r == null || r.focus(),
|
|
70
|
-
},
|
|
71
|
-
if (
|
|
72
|
-
|
|
69
|
+
r == null || r.focus(), t == null || t(e);
|
|
70
|
+
}, at = (t) => (e) => {
|
|
71
|
+
if (e.stopPropagation(), e.key === "Enter" || e.key === " ") {
|
|
72
|
+
e.preventDefault(), e.currentTarget.click();
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
-
const r = Number(
|
|
76
|
-
if (!["left", "right", "up", "down"].includes(
|
|
77
|
-
|
|
75
|
+
const r = Number(e.currentTarget.getAttribute("aria-posinset")) - 1, o = e.key.replace("Arrow", "").toLowerCase();
|
|
76
|
+
if (!["left", "right", "up", "down"].includes(o)) {
|
|
77
|
+
t == null || t(e);
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
|
-
|
|
81
|
-
const
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
const s = pt(
|
|
82
82
|
R.current,
|
|
83
83
|
r,
|
|
84
|
-
|
|
85
|
-
),
|
|
86
|
-
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
R.current[
|
|
91
|
-
},
|
|
92
|
-
|
|
84
|
+
o
|
|
85
|
+
), i = g.current[s ?? -1];
|
|
86
|
+
i == null || i.focus(), t == null || t(e);
|
|
87
|
+
}, it = (t) => (e) => {
|
|
88
|
+
g.current[t] = e;
|
|
89
|
+
}, ut = (t, e, r) => (o) => {
|
|
90
|
+
R.current[e] || (R.current[e] = []), g.current[t] = o, R.current[e][r] = o;
|
|
91
|
+
}, q = (t) => (e) => {
|
|
92
|
+
rt(Number(e.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(e);
|
|
93
93
|
};
|
|
94
|
-
if (
|
|
95
|
-
const
|
|
96
|
-
|
|
94
|
+
if (d(() => {
|
|
95
|
+
const t = a.current, e = (r) => {
|
|
96
|
+
L.current || r.stopPropagation();
|
|
97
97
|
};
|
|
98
|
-
return
|
|
99
|
-
|
|
98
|
+
return t == null || t.addEventListener("click", e), () => {
|
|
99
|
+
t == null || t.removeEventListener("click", e);
|
|
100
100
|
};
|
|
101
|
-
}, []),
|
|
102
|
-
const
|
|
101
|
+
}, []), d(() => {
|
|
102
|
+
const t = a.current, e = (r) => {
|
|
103
103
|
r.stopPropagation();
|
|
104
104
|
};
|
|
105
|
-
return
|
|
106
|
-
|
|
105
|
+
return t == null || t.addEventListener("touchmove", e), () => {
|
|
106
|
+
t == null || t.removeEventListener("touchmove", e);
|
|
107
107
|
};
|
|
108
|
-
}, []),
|
|
109
|
-
const
|
|
110
|
-
var
|
|
111
|
-
return ((
|
|
108
|
+
}, []), d(() => {
|
|
109
|
+
const t = H.toArray(E).filter(V).filter((r) => r.type === Q || r.type === Y), e = t.map((r) => {
|
|
110
|
+
var o;
|
|
111
|
+
return ((o = F(r.props.children)) == null ? void 0 : o.props.src) ?? "";
|
|
112
112
|
}).filter(Boolean);
|
|
113
|
-
|
|
114
|
-
}, [
|
|
115
|
-
f <= 0 ||
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
t
|
|
113
|
+
nt(t), ot(e);
|
|
114
|
+
}, [E]), d(() => {
|
|
115
|
+
if (f <= 0 || y.length === 0) return;
|
|
116
|
+
const t = {};
|
|
117
|
+
let e = 0;
|
|
118
|
+
const r = y.length;
|
|
119
|
+
y.forEach((o) => {
|
|
120
|
+
const s = new window.Image();
|
|
121
|
+
s.src = o, s.onload = () => {
|
|
122
|
+
t[o] = {
|
|
123
|
+
imgWidth: s.width,
|
|
124
|
+
imgHeight: s.height
|
|
125
|
+
}, e++, e === r && U(
|
|
126
|
+
(i) => i.map((n) => {
|
|
127
|
+
const u = t[n.src];
|
|
128
|
+
return u ? {
|
|
129
|
+
...n,
|
|
130
|
+
width: u.imgWidth / u.imgHeight * (n.height ?? f),
|
|
131
|
+
height: n.height ?? f
|
|
132
|
+
} : n;
|
|
133
|
+
})
|
|
134
|
+
), s.onload = null;
|
|
135
|
+
}, s.onerror = () => {
|
|
136
|
+
e++, e === r && U(
|
|
137
|
+
(i) => i.map((n) => {
|
|
138
|
+
const u = t[n.src];
|
|
139
|
+
return u ? {
|
|
140
|
+
...n,
|
|
141
|
+
width: u.imgWidth / u.imgHeight * (n.height ?? f),
|
|
142
|
+
height: n.height ?? f
|
|
143
|
+
} : n;
|
|
144
|
+
})
|
|
145
|
+
), s.onload = null;
|
|
123
146
|
};
|
|
124
147
|
});
|
|
125
|
-
}, [
|
|
126
|
-
const
|
|
127
|
-
var
|
|
128
|
-
|
|
148
|
+
}, [y, f]), d(() => {
|
|
149
|
+
const t = () => {
|
|
150
|
+
var e, r, o;
|
|
151
|
+
O(((r = (e = a.current) == null ? void 0 : e.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), et(((o = a.current) == null ? void 0 : o.offsetHeight) ?? 0);
|
|
129
152
|
};
|
|
130
|
-
return
|
|
131
|
-
window.removeEventListener("resize",
|
|
153
|
+
return t(), window.addEventListener("resize", t), () => {
|
|
154
|
+
window.removeEventListener("resize", t);
|
|
132
155
|
};
|
|
133
|
-
}, []),
|
|
134
|
-
|
|
135
|
-
}, []),
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
|
|
156
|
+
}, []), d(() => () => {
|
|
157
|
+
v.current && cancelAnimationFrame(v.current);
|
|
158
|
+
}, []), k === "horizontal") {
|
|
159
|
+
const t = ft(
|
|
160
|
+
z,
|
|
161
|
+
w,
|
|
139
162
|
B,
|
|
140
|
-
|
|
163
|
+
h * M / 2
|
|
141
164
|
);
|
|
142
|
-
let
|
|
143
|
-
|
|
165
|
+
let e = h * M / 2;
|
|
166
|
+
e = e <= 0 ? 120 : e;
|
|
144
167
|
let r = 0;
|
|
145
|
-
return /* @__PURE__ */
|
|
146
|
-
|
|
168
|
+
return /* @__PURE__ */ x(
|
|
169
|
+
J,
|
|
147
170
|
{
|
|
148
|
-
ref:
|
|
171
|
+
ref: a,
|
|
149
172
|
role: "list",
|
|
150
173
|
"aria-label": "콘텐츠",
|
|
151
174
|
"aria-orientation": "horizontal",
|
|
152
|
-
onMouseDown:
|
|
153
|
-
onMouseMove:
|
|
154
|
-
onMouseUp:
|
|
155
|
-
onMouseLeave:
|
|
156
|
-
pl:
|
|
157
|
-
pr:
|
|
158
|
-
...
|
|
175
|
+
onMouseDown: G,
|
|
176
|
+
onMouseMove: j,
|
|
177
|
+
onMouseUp: C,
|
|
178
|
+
onMouseLeave: C,
|
|
179
|
+
pl: b,
|
|
180
|
+
pr: b,
|
|
181
|
+
...l,
|
|
159
182
|
inlineCSS: {
|
|
160
183
|
display: "grid",
|
|
161
184
|
position: "relative",
|
|
@@ -168,74 +191,75 @@ function kt({
|
|
|
168
191
|
"&::-webkit-scrollbar": {
|
|
169
192
|
display: "none"
|
|
170
193
|
},
|
|
171
|
-
...
|
|
194
|
+
...l == null ? void 0 : l.inlineCSS
|
|
172
195
|
},
|
|
173
|
-
children:
|
|
174
|
-
const
|
|
175
|
-
return /* @__PURE__ */
|
|
176
|
-
const
|
|
177
|
-
return
|
|
178
|
-
setInnerRef:
|
|
179
|
-
tabIndex:
|
|
196
|
+
children: t.map((o, s) => {
|
|
197
|
+
const i = s === t.length - 1;
|
|
198
|
+
return /* @__PURE__ */ x(ct, { gap: c, children: o.map((n, u) => {
|
|
199
|
+
const S = r++;
|
|
200
|
+
return $(n, {
|
|
201
|
+
setInnerRef: ut(S, s, u),
|
|
202
|
+
tabIndex: S === N ? 0 : -1,
|
|
180
203
|
role: "listitem",
|
|
181
|
-
"aria-posinset":
|
|
182
|
-
"aria-setsize":
|
|
183
|
-
width:
|
|
184
|
-
height:
|
|
185
|
-
direction:
|
|
186
|
-
spacing:
|
|
187
|
-
sourceMetadata:
|
|
188
|
-
onKeyDown:
|
|
189
|
-
onFocus:
|
|
204
|
+
"aria-posinset": S + 1,
|
|
205
|
+
"aria-setsize": X,
|
|
206
|
+
width: n.props.width ?? e,
|
|
207
|
+
height: n.props.height ?? f,
|
|
208
|
+
direction: k,
|
|
209
|
+
spacing: c,
|
|
210
|
+
sourceMetadata: z,
|
|
211
|
+
onKeyDown: at(n.props.onKeyDown),
|
|
212
|
+
onFocus: q(n.props.onFocus),
|
|
190
213
|
style: {
|
|
191
|
-
marginBottom:
|
|
192
|
-
...
|
|
214
|
+
marginBottom: i ? 0 : T.content(c),
|
|
215
|
+
...n.props.style
|
|
193
216
|
},
|
|
194
|
-
...
|
|
217
|
+
...n.props
|
|
195
218
|
});
|
|
196
|
-
}) }, `masonry-row-${
|
|
219
|
+
}) }, `masonry-row-${s}`);
|
|
197
220
|
})
|
|
198
221
|
}
|
|
199
222
|
);
|
|
200
223
|
}
|
|
201
|
-
return /* @__PURE__ */
|
|
202
|
-
|
|
224
|
+
return /* @__PURE__ */ x(
|
|
225
|
+
J,
|
|
203
226
|
{
|
|
204
|
-
ref:
|
|
227
|
+
ref: a,
|
|
205
228
|
role: "list",
|
|
206
229
|
"aria-label": "콘텐츠",
|
|
207
230
|
"aria-orientation": "vertical",
|
|
208
|
-
onMouseDown:
|
|
209
|
-
onMouseMove:
|
|
210
|
-
onMouseUp:
|
|
211
|
-
onMouseLeave:
|
|
212
|
-
pt:
|
|
213
|
-
pb:
|
|
214
|
-
...
|
|
231
|
+
onMouseDown: G,
|
|
232
|
+
onMouseMove: j,
|
|
233
|
+
onMouseUp: C,
|
|
234
|
+
onMouseLeave: C,
|
|
235
|
+
pt: b,
|
|
236
|
+
pb: b,
|
|
237
|
+
...l,
|
|
215
238
|
inlineCSS: {
|
|
216
239
|
width: "100%",
|
|
217
240
|
position: "relative",
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
241
|
+
transform: "translate3d(0, 0, 0)",
|
|
242
|
+
columnCount: W,
|
|
243
|
+
columnGap: T.content(c),
|
|
244
|
+
marginTop: -T.content(c),
|
|
245
|
+
...l == null ? void 0 : l.inlineCSS
|
|
222
246
|
},
|
|
223
|
-
children:
|
|
224
|
-
|
|
225
|
-
(
|
|
226
|
-
setInnerRef:
|
|
247
|
+
children: H.map(
|
|
248
|
+
w,
|
|
249
|
+
(t, e) => $(t, {
|
|
250
|
+
setInnerRef: it(e),
|
|
227
251
|
role: "listitem",
|
|
228
|
-
tabIndex:
|
|
229
|
-
"aria-posinset":
|
|
230
|
-
"aria-setsize":
|
|
231
|
-
width:
|
|
232
|
-
height:
|
|
233
|
-
direction:
|
|
234
|
-
spacing:
|
|
235
|
-
sourceMetadata:
|
|
236
|
-
onKeyDown:
|
|
237
|
-
onFocus:
|
|
238
|
-
...
|
|
252
|
+
tabIndex: e === N ? 0 : -1,
|
|
253
|
+
"aria-posinset": e + 1,
|
|
254
|
+
"aria-setsize": X,
|
|
255
|
+
width: t.props.width ?? h,
|
|
256
|
+
height: t.props.height ?? h * M / 2,
|
|
257
|
+
direction: k,
|
|
258
|
+
spacing: c,
|
|
259
|
+
sourceMetadata: z,
|
|
260
|
+
onKeyDown: st(t.props.onKeyDown),
|
|
261
|
+
onFocus: q(t.props.onFocus),
|
|
262
|
+
...t.props
|
|
239
263
|
})
|
|
240
264
|
)
|
|
241
265
|
}
|
|
@@ -1,84 +1,87 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { Flexbox as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { findImageInChildren as
|
|
7
|
-
const
|
|
1
|
+
import { jsxs as C, jsx as S } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as B, useMemo as x, useState as v, useRef as F, useImperativeHandle as W, useEffect as y, Children as z, isValidElement as N, cloneElement as D } from "react";
|
|
3
|
+
import { Flexbox as l, Skeleton as L } from "@dotss/ui";
|
|
4
|
+
import V from "@dotss/ui/core/useTheme";
|
|
5
|
+
import $ from "../../Image/Image.mjs";
|
|
6
|
+
import { findImageInChildren as q } from "../Masonry.utils.mjs";
|
|
7
|
+
const U = B(
|
|
8
8
|
({
|
|
9
|
-
children:
|
|
9
|
+
children: s,
|
|
10
10
|
width: c = 0,
|
|
11
|
-
height:
|
|
12
|
-
spacing:
|
|
13
|
-
borderRadius:
|
|
14
|
-
direction:
|
|
15
|
-
setInnerRef:
|
|
16
|
-
sourceMetadata:
|
|
11
|
+
height: h = 0,
|
|
12
|
+
spacing: T = 2,
|
|
13
|
+
borderRadius: o = 0,
|
|
14
|
+
direction: b = "vertical",
|
|
15
|
+
setInnerRef: t,
|
|
16
|
+
sourceMetadata: r,
|
|
17
17
|
...e
|
|
18
|
-
},
|
|
18
|
+
}, E) => {
|
|
19
19
|
var k;
|
|
20
|
-
const { spacing:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
const { spacing: j } = V(), f = x(() => q(s), [s]), p = (k = f == null ? void 0 : f.props) == null ? void 0 : k.src, i = x(
|
|
21
|
+
() => r == null ? void 0 : r.find((n) => n.src === p),
|
|
22
|
+
[r, p]
|
|
23
|
+
), [g, H] = v((i == null ? void 0 : i.width) ?? c ?? 0), [d, I] = v((i == null ? void 0 : i.height) ?? h ?? 0), [w, m] = v(!1), u = F(null);
|
|
24
|
+
W(E, () => u.current);
|
|
25
|
+
const A = (n) => {
|
|
26
|
+
n.propertyName !== "padding-top" && n.propertyName !== "padding-left" || m(!0);
|
|
24
27
|
};
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
}, [c,
|
|
28
|
-
if (!
|
|
28
|
+
return y(() => {
|
|
29
|
+
H((i == null ? void 0 : i.width) ?? c ?? 0), I((i == null ? void 0 : i.height) ?? h ?? 0);
|
|
30
|
+
}, [c, h, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
|
|
31
|
+
if (!(i != null && i.width) || !(i != null && i.height)) return;
|
|
29
32
|
const n = setTimeout(() => {
|
|
30
|
-
|
|
33
|
+
m(!0);
|
|
31
34
|
}, 500);
|
|
32
35
|
return () => {
|
|
33
36
|
clearTimeout(n);
|
|
34
37
|
};
|
|
35
|
-
}, [
|
|
36
|
-
|
|
37
|
-
}, [
|
|
38
|
-
|
|
38
|
+
}, [i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
|
|
39
|
+
t == null || t(u.current);
|
|
40
|
+
}, [t]), /* @__PURE__ */ C(
|
|
41
|
+
l,
|
|
39
42
|
{
|
|
40
|
-
ref:
|
|
43
|
+
ref: u,
|
|
41
44
|
flexDirection: "column",
|
|
42
45
|
...e,
|
|
43
46
|
inlineCSS: {
|
|
47
|
+
transform: "translate3d(0, 0, 0)",
|
|
44
48
|
breakInside: "avoid",
|
|
45
49
|
...e == null ? void 0 : e.inlineCSS
|
|
46
50
|
},
|
|
47
51
|
children: [
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
b === "vertical" && /* @__PURE__ */ S(
|
|
53
|
+
l,
|
|
50
54
|
{
|
|
51
55
|
inlineCSS: {
|
|
52
|
-
minHeight:
|
|
56
|
+
minHeight: j.content(T)
|
|
53
57
|
}
|
|
54
58
|
}
|
|
55
59
|
),
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
|
|
60
|
+
/* @__PURE__ */ S(
|
|
61
|
+
l,
|
|
58
62
|
{
|
|
59
|
-
onTransitionEnd:
|
|
63
|
+
onTransitionEnd: A,
|
|
60
64
|
inlineCSS: {
|
|
61
65
|
position: "relative",
|
|
62
66
|
overflow: "hidden",
|
|
63
67
|
scrollbarWidth: "none",
|
|
64
|
-
transform: "translate3d(0, 0, 0)",
|
|
65
68
|
"&::-webkit-scrollbar": {
|
|
66
69
|
display: "none"
|
|
67
70
|
},
|
|
68
71
|
...e == null ? void 0 : e.inlineCSS
|
|
69
72
|
},
|
|
70
|
-
style:
|
|
71
|
-
borderRadius:
|
|
72
|
-
paddingTop: `calc(${
|
|
73
|
+
style: b === "vertical" ? {
|
|
74
|
+
borderRadius: o,
|
|
75
|
+
paddingTop: `calc(${d / g} * 100%)`,
|
|
73
76
|
transition: "padding-top 0.3s 0.1s"
|
|
74
77
|
} : {
|
|
75
|
-
borderRadius:
|
|
76
|
-
paddingLeft:
|
|
77
|
-
paddingTop:
|
|
78
|
+
borderRadius: o,
|
|
79
|
+
paddingLeft: g,
|
|
80
|
+
paddingTop: d,
|
|
78
81
|
transition: "padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
|
|
79
82
|
},
|
|
80
|
-
children: /* @__PURE__ */
|
|
81
|
-
|
|
83
|
+
children: /* @__PURE__ */ C(
|
|
84
|
+
l,
|
|
82
85
|
{
|
|
83
86
|
inlineCSS: {
|
|
84
87
|
position: "absolute",
|
|
@@ -87,32 +90,31 @@ const P = I(
|
|
|
87
90
|
width: "100%",
|
|
88
91
|
height: "100%",
|
|
89
92
|
overflow: "hidden",
|
|
90
|
-
|
|
91
|
-
borderRadius: r,
|
|
93
|
+
borderRadius: o,
|
|
92
94
|
transition: "border-radius 0.3s 0.1s",
|
|
93
95
|
zIndex: 1
|
|
94
96
|
},
|
|
95
97
|
children: [
|
|
96
|
-
/* @__PURE__ */
|
|
97
|
-
|
|
98
|
+
/* @__PURE__ */ S(
|
|
99
|
+
L,
|
|
98
100
|
{
|
|
99
|
-
borderRadius:
|
|
101
|
+
borderRadius: o,
|
|
100
102
|
inlineCSS: {
|
|
101
103
|
position: "absolute",
|
|
102
104
|
top: 0,
|
|
103
105
|
left: 0,
|
|
104
106
|
width: "100%",
|
|
105
107
|
height: "100%",
|
|
106
|
-
opacity: !
|
|
108
|
+
opacity: !p || w ? 0 : 1,
|
|
107
109
|
transition: "opacity 0.3s 0.1s",
|
|
108
|
-
pointerEvents:
|
|
110
|
+
pointerEvents: w ? "none" : void 0,
|
|
109
111
|
zIndex: 2
|
|
110
112
|
}
|
|
111
113
|
}
|
|
112
114
|
),
|
|
113
|
-
|
|
114
|
-
width:
|
|
115
|
-
height:
|
|
115
|
+
z.toArray(s).filter(N).map((n) => n.type === $ || n.type === "img" ? D(n, {
|
|
116
|
+
width: g,
|
|
117
|
+
height: d,
|
|
116
118
|
draggable: !1,
|
|
117
119
|
style: {
|
|
118
120
|
overflow: "hidden",
|
|
@@ -133,5 +135,5 @@ const P = I(
|
|
|
133
135
|
}
|
|
134
136
|
);
|
|
135
137
|
export {
|
|
136
|
-
|
|
138
|
+
U as default
|
|
137
139
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotss/tictoccroc",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.27",
|
|
5
5
|
"description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
7
7
|
"module": "./dist/index.mjs",
|
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
"@vitejs/plugin-react-swc": "^3.10.0",
|
|
96
96
|
"eslint-plugin-storybook": "^9.0.4",
|
|
97
97
|
"glob": "^10.4.2",
|
|
98
|
-
"react": "^
|
|
99
|
-
"react-dom": "^
|
|
98
|
+
"react": "^19.0.0",
|
|
99
|
+
"react-dom": "^19.0.0",
|
|
100
100
|
"storybook": "^9.0.4",
|
|
101
101
|
"vite-plugin-dts": "^4.5.4",
|
|
102
102
|
"vitest": "^1.6.0"
|