@dotss/tictoccroc 0.0.27 → 0.0.28

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