@dotss/tictoccroc 0.0.33 → 0.0.34

package/dist/shared/components/Image/Image.mjs

@@ -1,116 +1,115 @@
-import { jsxs as U, jsx as c, Fragment as tt } from "react/jsx-runtime";
-import { forwardRef as et, useRef as b, useImperativeHandle as nt, useState as S, useEffect as M } from "react";
-import { Flexbox as z, Skeleton as w } from "@dotss/ui";
-import ot from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import R from "../../utils/getImageUrl/getImageUrl.mjs";
-import F from "./Image.error.mjs";
-const it = 100, dt = et(
+import { jsxs as T, jsx as s, Fragment as tt } from "react/jsx-runtime";
+import { forwardRef as et, useRef as U, useImperativeHandle as nt, useState as g, useEffect as V } from "react";
+import { Flexbox as _, Skeleton as z } from "@dotss/ui";
+import ot from "../../hooks/useInView/useInView.mjs";
+import it from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import O from "../../utils/getImageUrl/getImageUrl.mjs";
+import B from "./Image.error.mjs";
+const mt = et(
   ({
     src: l,
     width: e,
     height: o,
-    fit: r = "cover",
+    fit: m = "cover",
     position: y = "center",
-    alt: V,
+    alt: b,
     scale: W = 2,
-    onLoad: _,
+    onLoad: q,
     onLazyLoad: j,
-    lazy: q = !1,
+    lazy: A = !1,
     borderRadius: u,
-    disabledResizing: L = !1,
-    withIntrinsicRatio: A = !1,
-    enableBlurPlaceholder: g = !1,
-    enableFallback: B = !1,
-    enableErrorFallback: D = !0,
-    renderErrorFallback: d,
+    disabledResizing: S = !1,
+    withIntrinsicRatio: D = !1,
+    enableBlurPlaceholder: r = !1,
+    enableFallback: G = !1,
+    enableErrorFallback: J = !0,
+    renderErrorFallback: c,
     wrapperProps: n = {},
-    onError: G,
-    ...C
-  }, p) => {
-    const I = b(null), J = b(!1), i = b(null);
-    nt(p, () => i.current);
-    const [v, k] = S(!1), [E, m] = S(!1), [h, f] = S(!1), [x, P] = S(!1), [K, N] = S(
-      R({
+    onError: K,
+    ...L
+  }, w) => {
+    const C = U(null), M = U(!1), i = U(null);
+    nt(w, () => i.current);
+    const { isInView: F } = ot(C, {
+      threshold: 0.4
+    }), [v, k] = g(!1), [I, d] = g(!1), [h, a] = g(!1), [x, p] = g(!1), [N, Q] = g(
+      O({
         mode: "original",
         src: l,
         width: e,
         height: o,
-        fit: r,
+        fit: m,
         position: y,
         scale: W,
-        disabledResizing: L
+        disabledResizing: S
       })
-    ), Q = l == null ? void 0 : l.endsWith(".heic"), T = g ? R({
+    ), R = l == null ? void 0 : l.endsWith(".heic"), E = r ? O({
       mode: "blur",
       src: l,
       width: e,
-      fit: r,
+      fit: m,
       position: y,
       scale: 1 / 3,
-      disabledResizing: L
+      disabledResizing: S
     }) : null, X = (t) => {
-      m(!0), f(!1), typeof _ == "function" && _(t);
+      d(!0), a(!1), typeof q == "function" && q(t);
     }, Y = (t) => {
-      typeof G == "function" && G(t.nativeEvent), f(!0), m(!1);
-    }, Z = () => P(!0);
-    return M(() => {
-      if (q && I.current) {
-        const t = I.current, H = () => {
-          if (!t) return !1;
-          const a = t.getBoundingClientRect();
-          return a.bottom >= 0 && a.top <= (window.innerHeight || document.documentElement.clientHeight) + it;
-        }, s = () => {
-          H() && k(!0);
-        }, O = () => {
-          var a;
-          (a = window.appScreenContent) == null || a.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
+      typeof K == "function" && K(t.nativeEvent), a(!0), d(!1);
+    }, Z = () => p(!0);
+    return V(() => {
+      if (A && C.current) {
+        const t = () => {
+          F && k(!0);
         }, $ = () => {
-          var a;
-          (a = window.appScreenContent) == null || a.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
+          var f;
+          (f = window.appScreenContent) == null || f.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationchange", t);
+        }, H = () => {
+          var f;
+          (f = window.appScreenContent) == null || f.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationchange", t);
         };
-        return s(), O(), $;
+        return t(), $(), H;
       }
-    }), M(() => {
-      typeof j == "function" && v && !J.current && (J.current = !0, j());
-    }, [j, v]), ot(() => {
+    }), V(() => {
+      typeof j == "function" && v && !M.current && (M.current = !0, j());
+    }, [j, v]), it(() => {
       const t = i.current;
-      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 = () => {
-        t.style.opacity = "1", m(!0), t.onload = null;
+      return t != null && t.complete ? 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 = () => {
+        t.style.opacity = "1", d(!0), t.onload = null;
       }, t.onerror = () => {
-        if (!Q) {
-          f(!0), t.onerror = null;
+        if (!R) {
+          a(!0), t.onerror = null;
           return;
         }
-        f(!1), window.fetch(l).then(async (H) => {
-          const s = await H.blob(), O = (await import("heic2any")).default, $ = await O({ blob: s, toType: "image/png" });
-          N(URL.createObjectURL($)), i.current.onload = () => {
-            t.style.opacity = "1", m(!0), f(!1), i.current.onload = null, i.current.onerror = null;
+        a(!1), window.fetch(l).then(async ($) => {
+          const H = await $.blob(), f = (await import("heic2any")).default, P = await f({ blob: H, toType: "image/png" });
+          Q(URL.createObjectURL(P)), i.current.onload = () => {
+            t.style.opacity = "1", d(!0), a(!1), i.current.onload = null, i.current.onerror = null;
           }, i.current.onerror = () => {
-            f(!0), m(!1), i.current.onload = null, i.current.onerror = null;
+            a(!0), d(!1), i.current.onload = null, i.current.onerror = null;
           };
         });
       }), () => {
         t && (t.onload = null, t.onerror = null);
       };
-    }, [v, l, Q]), M(() => {
-      N(
-        R({
+    }, [v, l, R]), V(() => {
+      Q(
+        O({
           mode: "original",
           src: l,
           width: e,
           height: o,
-          fit: r,
+          fit: m,
           position: y,
           scale: W,
-          disabledResizing: L
+          disabledResizing: S
         })
       );
-    }, [l, e, o, r, y, W, L]), q ? /* @__PURE__ */ U(
-      z,
+    }, [l, e, o, m, y, W, S]), A ? /* @__PURE__ */ T(
+      _,
       {
         ...n,
-        ref: I,
-        inlineCSS: A ? {
+        ref: C,
+        inlineCSS: D ? {
           position: "relative",
           paddingTop: `calc(100% / ${e} * ${o})`,
           minWidth: "100%",
@@ -127,8 +126,8 @@ const it = 100, dt = et(
           ...n == null ? void 0 : n.inlineCSS
         },
         children: [
-          B && /* @__PURE__ */ c(
-            w,
+          G && /* @__PURE__ */ s(
+            z,
             {
               width: "100%",
               height: "100%",
@@ -137,15 +136,15 @@ const it = 100, dt = et(
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: E || g && x ? 0 : 1,
+                opacity: I || r && x ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          g && T && v && /* @__PURE__ */ c(
+          r && E && v && /* @__PURE__ */ s(
             "img",
             {
-              src: T,
+              src: E,
               alt: "",
               width: e,
               height: o,
@@ -158,27 +157,27 @@ const it = 100, dt = et(
                 width: "100%",
                 height: "100%",
                 filter: "blur(5px)",
-                opacity: x && !E ? 1 : 0,
+                opacity: x && !I ? 1 : 0,
                 transition: "opacity 0.3s",
-                objectFit: r,
+                objectFit: m,
                 objectPosition: y
               }
             }
           ),
-          v && /* @__PURE__ */ U(tt, { children: [
-            /* @__PURE__ */ c(
+          v && /* @__PURE__ */ T(tt, { children: [
+            /* @__PURE__ */ s(
               "img",
               {
                 ref: i,
-                src: K,
-                alt: V,
+                src: N,
+                alt: b,
                 width: e,
                 height: o,
                 onLoad: X,
                 onError: Y,
                 "aria-hidden": h,
                 draggable: !1,
-                ...C,
+                ...L,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -186,20 +185,20 @@ const it = 100, dt = et(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...C.style
+                  ...L.style
                 }
               }
             ),
-            D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
+            J && h && ((c == null ? void 0 : c()) || /* @__PURE__ */ s(B, {}))
           ] })
         ]
       }
-    ) : /* @__PURE__ */ U(
-      z,
+    ) : /* @__PURE__ */ T(
+      _,
       {
         ...n,
-        ref: I,
-        inlineCSS: A ? {
+        ref: C,
+        inlineCSS: D ? {
           position: "relative",
           paddingTop: `calc(100% / ${e} * ${o})`,
           minWidth: "100%",
@@ -217,8 +216,8 @@ const it = 100, dt = et(
           ...n == null ? void 0 : n.inlineCSS
         },
         children: [
-          B && /* @__PURE__ */ c(
-            w,
+          G && /* @__PURE__ */ s(
+            z,
             {
               width: "100%",
               height: "100%",
@@ -227,15 +226,15 @@ const it = 100, dt = et(
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: E || g && x ? 0 : 1,
+                opacity: I || r && x ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          g && T && /* @__PURE__ */ c(
+          r && E && /* @__PURE__ */ s(
             "img",
             {
-              src: T,
+              src: E,
               alt: "",
               width: e,
               height: o,
@@ -248,24 +247,24 @@ const it = 100, dt = et(
                 width: "100%",
                 height: "100%",
                 filter: "blur(5px)",
-                opacity: x && !E ? 1 : 0,
+                opacity: x && !I ? 1 : 0,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ s(
             "img",
             {
               ref: i,
-              src: K,
-              alt: V,
+              src: N,
+              alt: b,
               width: e,
               height: o,
               onLoad: X,
               onError: Y,
               "aria-hidden": h,
               draggable: !1,
-              ...C,
+              ...L,
               style: {
                 position: "absolute",
                 top: 0,
@@ -273,16 +272,16 @@ const it = 100, dt = et(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...C.style
+                ...L.style
               }
             }
           ),
-          D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
+          J && h && ((c == null ? void 0 : c()) || /* @__PURE__ */ s(B, {}))
         ]
       }
     );
   }
 );
 export {
-  dt as default
+  mt as default
 };