@dotss/tictoccroc 0.0.33 → 0.0.35

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.
Files changed (10) hide show
  1. package/dist/shared/components/Image/Image.mjs +124 -123
  2. package/dist/shared/components/Masonry/Masonry.mjs +192 -185
  3. package/dist/shared/components/Masonry/Masonry.utils.d.ts +2 -0
  4. package/dist/shared/components/Masonry/Masonry.utils.mjs +57 -52
  5. package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.d.ts +7 -2
  6. package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.mjs +99 -94
  7. package/dist/shared/components/MediaDialog/MediaDialog.mjs +96 -95
  8. package/dist/shared/hooks/useInView/useInView.mjs +35 -17
  9. package/dist/shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts +2 -2
  10. package/package.json +1 -1
package/dist/shared/components/Image/Image.mjs CHANGED
@@ -1,120 +1,121 @@
1
- import { jsxs as U, jsx as c, Fragment as tt } from "react/jsx-runtime";
2
- import { forwardRef as et, useRef as b, useImperativeHandle as nt, useState as S, useEffect as M } from "react";
3
- import { Flexbox as z, Skeleton as w } from "@dotss/ui";
4
- import ot from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
5
- import R from "../../utils/getImageUrl/getImageUrl.mjs";
6
- import F from "./Image.error.mjs";
7
- const it = 100, dt = et(
1
+ import { jsxs as H, jsx as l, Fragment as nt } from "react/jsx-runtime";
2
+ import { forwardRef as ot, useRef as U, useImperativeHandle as it, useState as S, useEffect as V } from "react";
3
+ import { Flexbox as _, Skeleton as z } from "@dotss/ui";
4
+ import st from "../../hooks/useInView/useInView.mjs";
5
+ import lt from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
6
+ import O from "../../utils/getImageUrl/getImageUrl.mjs";
7
+ import B from "./Image.error.mjs";
8
+ const rt = ot(
8
9
  ({
9
- src: l,
10
+ src: s,
10
11
  width: e,
11
12
  height: o,
12
- fit: r = "cover",
13
- position: y = "center",
14
- alt: V,
15
- scale: W = 2,
16
- onLoad: _,
17
- onLazyLoad: j,
18
- lazy: q = !1,
19
- borderRadius: u,
13
+ fit: y = "cover",
14
+ position: m = "center",
15
+ alt: q,
16
+ scale: T = 2,
17
+ onLoad: A,
18
+ onLazyLoad: $,
19
+ lazy: D = !1,
20
+ borderRadius: c,
20
21
  disabledResizing: L = !1,
21
- withIntrinsicRatio: A = !1,
22
- enableBlurPlaceholder: g = !1,
23
- enableFallback: B = !1,
24
- enableErrorFallback: D = !0,
25
- renderErrorFallback: d,
22
+ withIntrinsicRatio: G = !1,
23
+ enableBlurPlaceholder: r = !1,
24
+ enableFallback: J = !1,
25
+ enableErrorFallback: K = !0,
26
+ renderErrorFallback: u,
26
27
  wrapperProps: n = {},
27
- onError: G,
28
- ...C
29
- }, p) => {
30
- const I = b(null), J = b(!1), i = b(null);
31
- nt(p, () => i.current);
32
- const [v, k] = S(!1), [E, m] = S(!1), [h, f] = S(!1), [x, P] = S(!1), [K, N] = S(
33
- R({
28
+ onError: M,
29
+ ...g
30
+ }, w) => {
31
+ const C = U(null), N = U(!1), I = U(null);
32
+ it(w, () => I.current);
33
+ const { isInView: p } = st(C, {
34
+ threshold: 0.4
35
+ }), [v, F] = S(!1), [h, d] = S(!1), [x, a] = S(!1), [W, k] = S(!1), [Q, R] = S(
36
+ O({
34
37
  mode: "original",
35
- src: l,
38
+ src: s,
36
39
  width: e,
37
40
  height: o,
38
- fit: r,
39
- position: y,
40
- scale: W,
41
+ fit: y,
42
+ position: m,
43
+ scale: T,
41
44
  disabledResizing: L
42
45
  })
43
- ), Q = l == null ? void 0 : l.endsWith(".heic"), T = g ? R({
46
+ ), b = s == null ? void 0 : s.endsWith(".heic"), E = r ? O({
44
47
  mode: "blur",
45
- src: l,
48
+ src: s,
46
49
  width: e,
47
- fit: r,
48
- position: y,
50
+ fit: y,
51
+ position: m,
49
52
  scale: 1 / 3,
50
53
  disabledResizing: L
51
54
  }) : null, X = (t) => {
52
- m(!0), f(!1), typeof _ == "function" && _(t);
55
+ d(!0), a(!1), typeof A == "function" && A(t);
53
56
  }, Y = (t) => {
54
- typeof G == "function" && G(t.nativeEvent), f(!0), m(!1);
55
- }, Z = () => P(!0);
56
- return M(() => {
57
- if (q && I.current) {
58
- const t = I.current, H = () => {
59
- if (!t) return !1;
60
- const a = t.getBoundingClientRect();
61
- return a.bottom >= 0 && a.top <= (window.innerHeight || document.documentElement.clientHeight) + it;
62
- }, s = () => {
63
- H() && k(!0);
64
- }, O = () => {
65
- var a;
66
- (a = window.appScreenContent) == null || a.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
67
- }, $ = () => {
68
- var a;
69
- (a = window.appScreenContent) == null || a.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
57
+ typeof M == "function" && M(t.nativeEvent), a(!0), d(!1);
58
+ }, Z = () => k(!0);
59
+ return V(() => {
60
+ if (D && C.current) {
61
+ const t = () => {
62
+ p && F(!0);
63
+ }, j = () => {
64
+ var f;
65
+ (f = window.appScreenContent) == null || f.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationchange", t);
66
+ }, i = () => {
67
+ var f;
68
+ (f = window.appScreenContent) == null || f.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationchange", t);
70
69
  };
71
- return s(), O(), $;
70
+ return t(), j(), i;
72
71
  }
73
- }), M(() => {
74
- typeof j == "function" && v && !J.current && (J.current = !0, j());
75
- }, [j, v]), ot(() => {
76
- const t = i.current;
77
- return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", m(!0)) : (t.style.opacity = "0", f(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
78
- t.style.opacity = "1", m(!0), t.onload = null;
72
+ }), V(() => {
73
+ typeof $ == "function" && v && !N.current && (N.current = !0, $());
74
+ }, [$, v]), lt(() => {
75
+ const t = I.current, j = (i) => {
76
+ window.fetch(s).then(async (f) => {
77
+ const P = await f.blob(), tt = (await import("heic2any")).default, et = await tt({ blob: P, toType: "image/png" });
78
+ R(URL.createObjectURL(et)), i.onload = () => {
79
+ i.style.opacity = "1", d(!0), a(!1), i.onload = null, i.onerror = null;
80
+ }, i.onerror = () => {
81
+ a(!0), d(!1), i.onload = null, i.onerror = null;
82
+ };
83
+ });
84
+ };
85
+ return t != null && t.complete ? b ? t.src.startsWith("blob:") || (t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t)) : t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", d(!0)) : (t.style.opacity = "0", a(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
86
+ t.style.opacity = "1", d(!0), t.onload = null;
79
87
  }, t.onerror = () => {
80
- if (!Q) {
81
- f(!0), t.onerror = null;
88
+ if (!b) {
89
+ a(!0), t.onerror = null;
82
90
  return;
83
91
  }
84
- f(!1), window.fetch(l).then(async (H) => {
85
- const s = await H.blob(), O = (await import("heic2any")).default, $ = await O({ blob: s, toType: "image/png" });
86
- N(URL.createObjectURL($)), i.current.onload = () => {
87
- t.style.opacity = "1", m(!0), f(!1), i.current.onload = null, i.current.onerror = null;
88
- }, i.current.onerror = () => {
89
- f(!0), m(!1), i.current.onload = null, i.current.onerror = null;
90
- };
91
- });
92
+ a(!1), t.style.transition = "opacity 0.3s", t.style.opacity = "0", j(t);
92
93
  }), () => {
93
94
  t && (t.onload = null, t.onerror = null);
94
95
  };
95
- }, [v, l, Q]), M(() => {
96
- N(
97
- R({
96
+ }, [v, s, b]), V(() => {
97
+ R(
98
+ O({
98
99
  mode: "original",
99
- src: l,
100
+ src: s,
100
101
  width: e,
101
102
  height: o,
102
- fit: r,
103
- position: y,
104
- scale: W,
103
+ fit: y,
104
+ position: m,
105
+ scale: T,
105
106
  disabledResizing: L
106
107
  })
107
108
  );
108
- }, [l, e, o, r, y, W, L]), q ? /* @__PURE__ */ U(
109
- z,
109
+ }, [s, e, o, y, m, T, L]), D ? /* @__PURE__ */ H(
110
+ _,
110
111
  {
111
112
  ...n,
112
- ref: I,
113
- inlineCSS: A ? {
113
+ ref: C,
114
+ inlineCSS: G ? {
114
115
  position: "relative",
115
116
  paddingTop: `calc(100% / ${e} * ${o})`,
116
117
  minWidth: "100%",
117
- borderRadius: u,
118
+ borderRadius: c,
118
119
  overflow: "hidden",
119
120
  ...n == null ? void 0 : n.inlineCSS
120
121
  } : {
@@ -122,30 +123,30 @@ const it = 100, dt = et(
122
123
  width: e,
123
124
  minWidth: e,
124
125
  height: o,
125
- borderRadius: u,
126
+ borderRadius: c,
126
127
  overflow: "hidden",
127
128
  ...n == null ? void 0 : n.inlineCSS
128
129
  },
129
130
  children: [
130
- B && /* @__PURE__ */ c(
131
- w,
131
+ J && /* @__PURE__ */ l(
132
+ z,
132
133
  {
133
134
  width: "100%",
134
135
  height: "100%",
135
- borderRadius: u || 0,
136
+ borderRadius: c || 0,
136
137
  inlineCSS: {
137
138
  position: "absolute",
138
139
  top: 0,
139
140
  left: 0,
140
- opacity: E || g && x ? 0 : 1,
141
+ opacity: h || r && W ? 0 : 1,
141
142
  transition: "opacity 0.3s"
142
143
  }
143
144
  }
144
145
  ),
145
- g && T && v && /* @__PURE__ */ c(
146
+ r && E && v && /* @__PURE__ */ l(
146
147
  "img",
147
148
  {
148
- src: T,
149
+ src: E,
149
150
  alt: "",
150
151
  width: e,
151
152
  height: o,
@@ -158,27 +159,27 @@ const it = 100, dt = et(
158
159
  width: "100%",
159
160
  height: "100%",
160
161
  filter: "blur(5px)",
161
- opacity: x && !E ? 1 : 0,
162
+ opacity: W && !h ? 1 : 0,
162
163
  transition: "opacity 0.3s",
163
- objectFit: r,
164
- objectPosition: y
164
+ objectFit: y,
165
+ objectPosition: m
165
166
  }
166
167
  }
167
168
  ),
168
- v && /* @__PURE__ */ U(tt, { children: [
169
- /* @__PURE__ */ c(
169
+ v && /* @__PURE__ */ H(nt, { children: [
170
+ /* @__PURE__ */ l(
170
171
  "img",
171
172
  {
172
- ref: i,
173
- src: K,
174
- alt: V,
173
+ ref: I,
174
+ src: Q,
175
+ alt: q,
175
176
  width: e,
176
177
  height: o,
177
178
  onLoad: X,
178
179
  onError: Y,
179
- "aria-hidden": h,
180
+ "aria-hidden": x,
180
181
  draggable: !1,
181
- ...C,
182
+ ...g,
182
183
  style: {
183
184
  position: "absolute",
184
185
  top: 0,
@@ -186,25 +187,25 @@ const it = 100, dt = et(
186
187
  width: "100%",
187
188
  height: "100%",
188
189
  transition: "opacity 0.3s",
189
- ...C.style
190
+ ...g.style
190
191
  }
191
192
  }
192
193
  ),
193
- D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
194
+ K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
194
195
  ] })
195
196
  ]
196
197
  }
197
- ) : /* @__PURE__ */ U(
198
- z,
198
+ ) : /* @__PURE__ */ H(
199
+ _,
199
200
  {
200
201
  ...n,
201
- ref: I,
202
- inlineCSS: A ? {
202
+ ref: C,
203
+ inlineCSS: G ? {
203
204
  position: "relative",
204
205
  paddingTop: `calc(100% / ${e} * ${o})`,
205
206
  minWidth: "100%",
206
207
  transition: "padding-top 0.2s",
207
- borderRadius: u,
208
+ borderRadius: c,
208
209
  overflow: "hidden",
209
210
  ...n == null ? void 0 : n.inlineCSS
210
211
  } : {
@@ -212,30 +213,30 @@ const it = 100, dt = et(
212
213
  width: e,
213
214
  minWidth: e,
214
215
  height: o,
215
- borderRadius: u,
216
+ borderRadius: c,
216
217
  overflow: "hidden",
217
218
  ...n == null ? void 0 : n.inlineCSS
218
219
  },
219
220
  children: [
220
- B && /* @__PURE__ */ c(
221
- w,
221
+ J && /* @__PURE__ */ l(
222
+ z,
222
223
  {
223
224
  width: "100%",
224
225
  height: "100%",
225
- borderRadius: u || 0,
226
+ borderRadius: c || 0,
226
227
  inlineCSS: {
227
228
  position: "absolute",
228
229
  top: 0,
229
230
  left: 0,
230
- opacity: E || g && x ? 0 : 1,
231
+ opacity: h || r && W ? 0 : 1,
231
232
  transition: "opacity 0.3s"
232
233
  }
233
234
  }
234
235
  ),
235
- g && T && /* @__PURE__ */ c(
236
+ r && E && /* @__PURE__ */ l(
236
237
  "img",
237
238
  {
238
- src: T,
239
+ src: E,
239
240
  alt: "",
240
241
  width: e,
241
242
  height: o,
@@ -248,24 +249,24 @@ const it = 100, dt = et(
248
249
  width: "100%",
249
250
  height: "100%",
250
251
  filter: "blur(5px)",
251
- opacity: x && !E ? 1 : 0,
252
+ opacity: W && !h ? 1 : 0,
252
253
  transition: "opacity 0.3s"
253
254
  }
254
255
  }
255
256
  ),
256
- /* @__PURE__ */ c(
257
+ /* @__PURE__ */ l(
257
258
  "img",
258
259
  {
259
- ref: i,
260
- src: K,
261
- alt: V,
260
+ ref: I,
261
+ src: Q,
262
+ alt: q,
262
263
  width: e,
263
264
  height: o,
264
265
  onLoad: X,
265
266
  onError: Y,
266
- "aria-hidden": h,
267
+ "aria-hidden": x,
267
268
  draggable: !1,
268
- ...C,
269
+ ...g,
269
270
  style: {
270
271
  position: "absolute",
271
272
  top: 0,
@@ -273,16 +274,16 @@ const it = 100, dt = et(
273
274
  width: "100%",
274
275
  height: "100%",
275
276
  transition: "opacity 0.3s",
276
- ...C.style
277
+ ...g.style
277
278
  }
278
279
  }
279
280
  ),
280
- D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
281
+ K && x && ((u == null ? void 0 : u()) || /* @__PURE__ */ l(B, {}))
281
282
  ]
282
283
  }
283
284
  );
284
285
  }
285
286
  );
286
287
  export {
287
- dt as default
288
+ rt as default
288
289
  };