@dotss/tictoccroc 0.0.0 → 0.0.2

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

@@ -1,105 +1,105 @@
-import { jsxs as I, jsx as d } from "react/jsx-runtime";
-import { forwardRef as V, useRef as p, useImperativeHandle as _, useState as x, useEffect as T } from "react";
-import W from "@thedotscorp/ui/Flexbox";
-import $ from "@thedotscorp/ui/Skeleton";
-import k from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import q from "../../utils/getImageUrl/getImageUrl.mjs";
-const A = 100, X = V(
+import { jsxs as T, jsx as u } from "react/jsx-runtime";
+import { forwardRef as k, useRef as v, useImperativeHandle as q, useState as W, useEffect as $ } from "react";
+import { Flexbox as H, Skeleton as O } from "@dotss/ui";
+import A from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import D from "../../utils/getImageUrl/getImageUrl.mjs";
+const G = 100, Y = k(
   ({
-    src: H,
-    width: t,
+    src: j,
+    width: n,
     height: o,
-    fit: O = "cover",
-    position: j = "center",
-    alt: y,
-    scale: z = 2,
-    onLoad: v,
+    fit: z = "cover",
+    position: B = "center",
+    alt: r,
+    scale: F = 2,
+    onLoad: S,
     onLazyLoad: m,
-    lazy: S = !1,
-    borderRadius: l,
-    disabledResizing: B = !1,
-    withIntrinsicRatio: L = !1,
-    enableFallback: g = !1,
-    wrapperProps: s = {},
-    ...r
-  }, F) => {
-    const c = p(null), E = p(!1), a = p(null);
-    _(F, () => a.current);
-    const [f, R] = x(!1), [C, u] = x(!1), w = q({ src: H, width: t, height: o, fit: O, position: j, scale: z, disabledResizing: B }), h = (e) => {
-      u(!0), typeof v == "function" && v(e);
+    lazy: L = !1,
+    borderRadius: s,
+    disabledResizing: R = !1,
+    withIntrinsicRatio: g = !1,
+    enableFallback: E = !1,
+    wrapperProps: t = {},
+    ...c
+  }, b) => {
+    const f = v(null), C = v(!1), d = v(null);
+    q(b, () => d.current);
+    const [a, M] = W(!1), [h, y] = W(!1), I = D({ src: j, width: n, height: o, fit: z, position: B, scale: F, disabledResizing: R }), x = (e) => {
+      y(!0), typeof S == "function" && S(e);
     };
-    return T(() => {
-      if (S && c.current) {
-        const e = c.current, b = () => {
+    return $(() => {
+      if (L && f.current) {
+        const e = f.current, U = () => {
           if (!e) return !1;
-          const n = e.getBoundingClientRect();
-          return n.bottom >= 0 && n.top <= (window.innerHeight || document.documentElement.clientHeight) + A;
-        }, i = () => {
-          b() && R(!0);
-        }, M = () => {
-          var n;
-          (n = window.appScreenContent) == null || n.addEventListener("scroll", i), window.addEventListener("resize", i), window.addEventListener("orientationchange", i);
-        }, U = () => {
-          var n;
-          (n = window.appScreenContent) == null || n.removeEventListener("scroll", i), window.removeEventListener("resize", i), window.removeEventListener("orientationchange", i);
+          const i = e.getBoundingClientRect();
+          return i.bottom >= 0 && i.top <= (window.innerHeight || document.documentElement.clientHeight) + G;
+        }, l = () => {
+          U() && M(!0);
+        }, V = () => {
+          var i;
+          (i = window.appScreenContent) == null || i.addEventListener("scroll", l), window.addEventListener("resize", l), window.addEventListener("orientationchange", l);
+        }, _ = () => {
+          var i;
+          (i = window.appScreenContent) == null || i.removeEventListener("scroll", l), window.removeEventListener("resize", l), window.removeEventListener("orientationchange", l);
         };
-        return i(), M(), U;
+        return l(), V(), _;
       }
-    }), T(() => {
-      typeof m == "function" && f && !E.current && (E.current = !0, m());
-    }, [m, f]), k(() => {
-      const e = a.current;
-      return e != null && e.complete ? (e.style.transition = "none", e.style.opacity = "1", u(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
-        e.style.opacity = "1", u(!0), e.onload = null;
+    }), $(() => {
+      typeof m == "function" && a && !C.current && (C.current = !0, m());
+    }, [m, a]), A(() => {
+      const e = d.current;
+      return e != null && e.complete ? (e.style.transition = "none", e.style.opacity = "1", y(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+        e.style.opacity = "1", y(!0), e.onload = null;
       }), () => {
         e && (e.onload = null);
       };
-    }, [f]), S ? /* @__PURE__ */ I(
-      W,
+    }, [a]), L ? /* @__PURE__ */ T(
+      H,
       {
-        ...s,
-        ref: c,
-        inlineCSS: L ? {
+        ...t,
+        ref: f,
+        inlineCSS: g ? {
           position: "relative",
-          paddingTop: `calc(100% / ${t} * ${o})`,
+          paddingTop: `calc(100% / ${n} * ${o})`,
           minWidth: "100%",
-          borderRadius: l,
+          borderRadius: s,
           overflow: "hidden",
-          ...s.inlineCSS
+          ...t == null ? void 0 : t.inlineCSS
         } : {
           position: "relative",
-          width: t,
-          minWidth: t,
+          width: n,
+          minWidth: n,
           height: o,
-          borderRadius: l,
+          borderRadius: s,
           overflow: "hidden",
-          ...s.inlineCSS || {}
+          ...t == null ? void 0 : t.inlineCSS
         },
         children: [
-          g && /* @__PURE__ */ d(
-            $,
+          E && /* @__PURE__ */ u(
+            O,
             {
               width: "100%",
               height: "100%",
+              borderRadius: s || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: C ? 0 : 1,
+                opacity: h ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          f && /* @__PURE__ */ d(
+          a && /* @__PURE__ */ u(
             "img",
             {
-              ref: a,
-              src: w,
-              alt: y,
-              width: t,
+              ref: d,
+              src: I,
+              alt: r,
+              width: n,
               height: o,
-              onLoad: h,
-              ...r,
+              onLoad: x,
+              ...c,
               style: {
                 position: "absolute",
                 top: 0,
@@ -107,59 +107,60 @@ const A = 100, X = V(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...r.style
+                ...c.style
               }
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ I(
-      W,
+    ) : /* @__PURE__ */ T(
+      H,
       {
-        ...s,
-        ref: c,
-        inlineCSS: L ? {
+        ...t,
+        ref: f,
+        inlineCSS: g ? {
           position: "relative",
-          paddingTop: `calc(100% / ${t} * ${o})`,
+          paddingTop: `calc(100% / ${n} * ${o})`,
           minWidth: "100%",
           transition: "padding-top 0.2s",
-          borderRadius: l,
+          borderRadius: s,
           overflow: "hidden",
-          ...s.inlineCSS
+          ...t == null ? void 0 : t.inlineCSS
         } : {
           position: "relative",
-          width: t,
-          minWidth: t,
+          width: n,
+          minWidth: n,
           height: o,
-          borderRadius: l,
+          borderRadius: s,
           overflow: "hidden",
-          ...s.inlineCSS
+          ...t == null ? void 0 : t.inlineCSS
         },
         children: [
-          g && /* @__PURE__ */ d(
-            $,
+          E && /* @__PURE__ */ u(
+            O,
             {
               width: "100%",
               height: "100%",
+              borderRadius: s || 0,
               inlineCSS: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                opacity: C ? 0 : 1,
+                opacity: h ? 0 : 1,
                 transition: "opacity 0.3s"
               }
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ u(
             "img",
             {
-              ref: a,
-              src: w,
-              alt: y,
-              width: t,
+              ref: d,
+              src: I,
+              alt: r,
+              width: n,
               height: o,
-              onLoad: h,
-              ...r,
+              onLoad: x,
+              ...c,
               style: {
                 position: "absolute",
                 top: 0,
@@ -167,7 +168,7 @@ const A = 100, X = V(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...r.style
+                ...c.style
               }
             }
           )
@@ -177,5 +178,5 @@ const A = 100, X = V(
   }
 );
 export {
-  X as default
+  Y as default
 };

package/dist/shared/components/ImageZoomDialog/ImageBlock/ImageBlock.mjs

@@ -1,15 +1,14 @@
-import { jsxs as s, Fragment as n, jsx as a } from "react/jsx-runtime";
-import { useState as l } from "react";
-import d from "@thedotscorp/ui/Flexbox";
-import m from "../../Image/Image.mjs";
-function x({ fallback: t, containerHeight: e, ...o }) {
-  const [r, i] = l(!1);
-  return /* @__PURE__ */ s(n, { children: [
-    /* @__PURE__ */ a(
-      m,
+import { jsxs as s, Fragment as i, jsx as n } from "react/jsx-runtime";
+import { useState as d } from "react";
+import l from "../../Image/Image.mjs";
+function f({ fallback: a, containerHeight: e, ...t }) {
+  const [o, r] = d(!1);
+  return /* @__PURE__ */ s(i, { children: [
+    /* @__PURE__ */ n(
+      l,
       {
-        ...o,
-        onLoad: () => i(!0),
+        ...t,
+        onLoad: () => r(!0),
         disabledResizing: !0,
         draggable: !1,
         wrapperProps: {
@@ -29,22 +28,9 @@ function x({ fallback: t, containerHeight: e, ...o }) {
         }
       }
     ),
-    !r && !!t && /* @__PURE__ */ a(
-      d,
-      {
-        "aria-busy": !0,
-        inlineCSS: {
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          cursor: "wait"
-        },
-        children: t
-      }
-    )
+    !o && a
   ] });
 }
 export {
-  x as default
+  f as default
 };