@dotss/tictoccroc 0.11.1 → 0.12.0

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

@@ -2,53 +2,54 @@ import e from "../../hooks/useInView/index.mjs";
 import t from "../../hooks/useIsomorphicLayoutEffect/index.mjs";
 import n from "../../utils/getImageUrl/index.mjs";
 import r from "./Image.error.mjs";
-import { convertHeicToPng as ee, isHeicSource as i } from "./Image.utils.mjs";
-import { forwardRef as a, useEffect as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
-import { Flexbox as u, Skeleton as d } from "@dotss/ui";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { convertHeicToPng as ee, isHeicSource as te } from "./Image.utils.mjs";
+import { forwardRef as i, useEffect as a, useImperativeHandle as ne, useRef as o, useState as s } from "react";
+import { Flexbox as c, Skeleton as l } from "@dotss/ui";
+import u from "@dotss/ui/hooks/useCheckHoverPossible/useCheckHoverPossible";
+import { Fragment as re, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region shared/components/Image/Image.tsx
-var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "center", alt: y, scale: b = 2, onLoad: x, onLazyLoad: S, lazy: C = !1, borderRadius: w, disabledResizing: T = !1, withIntrinsicRatio: E = !1, enableBlurPlaceholder: D = !1, enableFallback: O = !1, enableErrorFallback: k = !0, renderErrorFallback: A, wrapperProps: j = {}, inViewOptions: te = {}, onError: M, ...N }, P) => {
-	let F = c(null), I = c(!1), L = c(null), R = c(M);
-	R.current = M, s(P, () => L.current);
+var p = i(({ src: i, width: p, height: m, fit: h = "cover", position: g = "center", alt: _, scale: v = 2, onLoad: y, onLazyLoad: b, lazy: x = !1, borderRadius: S, disabledResizing: C = !1, withIntrinsicRatio: w = !1, enableBlurPlaceholder: T = !1, enableFallback: E = !1, enableErrorFallback: D = !0, renderErrorFallback: O, enableHoverScale: k = !1, wrapperProps: A = {}, inViewOptions: j = {}, onError: M, ...N }, P) => {
+	let F = o(null), I = o(!1), L = o(null), R = o(M);
+	R.current = M, ne(P, () => L.current);
 	let { isInView: z } = e(F, {
 		threshold: .4,
-		...te
-	}), [B, V] = l(!1), [H, U] = l(!1), [W, G] = l(!1), [K, ne] = l(!1), [q, J] = l(n({
+		...j
+	}), { isHoverPossible: B } = u(), [V, ie] = s(!1), [H, U] = s(!1), [W, G] = s(!1), [K, ae] = s(!1), [q, J] = s(n({
 		mode: "original",
-		src: a,
-		width: h,
-		height: g,
-		fit: _,
-		position: v,
-		scale: b,
-		disabledResizing: T
-	})), Y = i(a), X = D ? n({
+		src: i,
+		width: p,
+		height: m,
+		fit: h,
+		position: g,
+		scale: v,
+		disabledResizing: C
+	})), Y = te(i), X = T ? n({
 		mode: "blur",
-		src: a,
-		width: h,
-		fit: _,
-		position: v,
+		src: i,
+		width: p,
+		fit: h,
+		position: g,
 		scale: 1 / 3,
-		disabledResizing: T
+		disabledResizing: C
 	}) : null, Z = (e) => {
-		U(!0), G(!1), typeof x == "function" && x(e);
+		U(!0), G(!1), typeof y == "function" && y(e);
 	}, Q = (e) => {
 		Y && !q.startsWith("blob:") || (typeof M == "function" && M(e.nativeEvent), G(!0), U(!1));
-	}, $ = () => ne(!0);
-	return o(() => {
-		if (C && F.current) {
+	}, $ = () => ae(!0);
+	return a(() => {
+		if (x && F.current) {
 			let e = () => {
-				z && V(!0);
+				z && ie(!0);
 			};
 			return e(), window.appScreenContent?.addEventListener("scroll", e), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
 				window.appScreenContent?.removeEventListener("scroll", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
 			};
 		}
-	}), o(() => {
-		typeof S == "function" && B && !I.current && (I.current = !0, S());
-	}, [S, B]), t(() => {
+	}), a(() => {
+		typeof b == "function" && V && !I.current && (I.current = !0, b());
+	}, [b, V]), t(() => {
 		let e = L.current, t = !1, n = (e) => {
-			ee(a).then((n) => {
+			ee(i).then((n) => {
 				t || (J(URL.createObjectURL(n)), e.onload = () => {
 					e.style.opacity = "1", U(!0), G(!1), e.onload = null, e.onerror = null;
 				}, e.onerror = () => {
@@ -61,77 +62,79 @@ var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "cente
 				})));
 			});
 		};
-		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", U(!0)) : (e.style.opacity = "0", G(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s, transform 0.3s", e.style.opacity = "0", n(e)) : e.naturalWidth > 0 ? (e.style.transition = "transform 0.3s", e.style.opacity = "1", U(!0)) : (e.style.opacity = "0", G(!0)) : e && (e.style.transition = "opacity 0.3s, transform 0.3s", e.style.opacity = "0", e.onload = () => {
 			e.style.opacity = "1", U(!0), e.onload = null;
 		}, e.onerror = () => {
 			if (!Y) {
 				G(!0), e.onerror = null;
 				return;
 			}
-			G(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e);
+			G(!1), e.style.transition = "opacity 0.3s, transform 0.3s", e.style.opacity = "0", n(e);
 		}), () => {
 			t = !0, e && (e.onload = null, e.onerror = null);
 		};
 	}, [
-		B,
-		a,
+		V,
+		i,
 		Y
-	]), o(() => {
+	]), a(() => {
 		J(n({
 			mode: "original",
-			src: a,
-			width: h,
-			height: g,
-			fit: _,
-			position: v,
-			scale: b,
-			disabledResizing: T
+			src: i,
+			width: p,
+			height: m,
+			fit: h,
+			position: g,
+			scale: v,
+			disabledResizing: C
 		}));
 	}, [
-		a,
+		i,
+		p,
+		m,
 		h,
 		g,
-		_,
 		v,
-		b,
-		T
-	]), C ? /* @__PURE__ */ m(u, {
-		...j,
+		C
+	]), x ? /* @__PURE__ */ f(c, {
+		...A,
 		ref: F,
-		inlineCSS: E ? {
+		inlineCSS: w ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${h} * ${g})`,
+			paddingTop: `calc(100% / ${p} * ${m})`,
 			minWidth: "100%",
-			borderRadius: w,
+			borderRadius: S,
 			overflow: "hidden",
-			...j?.inlineCSS
+			...k && B && { "&:hover img": { transform: "scale(1.03)" } },
+			...A?.inlineCSS
 		} : {
 			position: "relative",
-			width: h,
-			minWidth: h,
-			height: g,
-			borderRadius: w,
+			width: p,
+			minWidth: p,
+			height: m,
+			borderRadius: S,
 			overflow: "hidden",
-			...j?.inlineCSS
+			...k && B && { "&:hover img": { transform: "scale(1.03)" } },
+			...A?.inlineCSS
 		},
 		children: [
-			O && /* @__PURE__ */ p(d, {
+			E && /* @__PURE__ */ d(l, {
 				width: "100%",
 				height: "100%",
-				borderRadius: w || 0,
+				borderRadius: S || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: H || D && K ? 0 : 1,
+					opacity: H || T && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			D && X && B && /* @__PURE__ */ p("img", {
+			T && X && V && /* @__PURE__ */ d("img", {
 				src: X,
 				alt: "",
-				width: h,
-				height: g,
+				width: p,
+				height: m,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -142,17 +145,17 @@ var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "cente
 					height: "100%",
 					filter: "blur(5px)",
 					opacity: K && !H ? 1 : 0,
-					transition: "opacity 0.3s",
-					objectFit: _,
-					objectPosition: v
+					transition: "opacity 0.3s, transform 0.3s",
+					objectFit: h,
+					objectPosition: g
 				}
 			}),
-			B && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("img", {
+			V && /* @__PURE__ */ f(re, { children: [/* @__PURE__ */ d("img", {
 				ref: L,
 				src: q,
-				alt: y,
-				width: h,
-				height: g,
+				alt: _,
+				width: p,
+				height: m,
 				onLoad: Z,
 				onError: Q,
 				"aria-hidden": W,
@@ -164,49 +167,51 @@ var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "cente
 					left: 0,
 					width: "100%",
 					height: "100%",
-					transition: "opacity 0.3s",
+					transition: "opacity 0.3s, transform 0.3s",
 					...N.style
 				}
-			}), k && W && (A?.() || /* @__PURE__ */ p(r, {}))] })
+			}), D && W && (O?.() || /* @__PURE__ */ d(r, {}))] })
 		]
-	}) : /* @__PURE__ */ m(u, {
-		...j,
+	}) : /* @__PURE__ */ f(c, {
+		...A,
 		ref: F,
-		inlineCSS: E ? {
+		inlineCSS: w ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${h} * ${g})`,
+			paddingTop: `calc(100% / ${p} * ${m})`,
 			minWidth: "100%",
 			transition: "padding-top 0.2s",
-			borderRadius: w,
+			borderRadius: S,
 			overflow: "hidden",
-			...j?.inlineCSS
+			...k && B && { "&:hover img": { transform: "scale(1.03)" } },
+			...A?.inlineCSS
 		} : {
 			position: "relative",
-			width: h,
-			minWidth: h,
-			height: g,
-			borderRadius: w,
+			width: p,
+			minWidth: p,
+			height: m,
+			borderRadius: S,
 			overflow: "hidden",
-			...j?.inlineCSS
+			...k && B && { "&:hover img": { transform: "scale(1.03)" } },
+			...A?.inlineCSS
 		},
 		children: [
-			O && /* @__PURE__ */ p(d, {
+			E && /* @__PURE__ */ d(l, {
 				width: "100%",
 				height: "100%",
-				borderRadius: w || 0,
+				borderRadius: S || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: H || D && K ? 0 : 1,
+					opacity: H || T && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			D && X && /* @__PURE__ */ p("img", {
+			T && X && /* @__PURE__ */ d("img", {
 				src: X,
 				alt: "",
-				width: h,
-				height: g,
+				width: p,
+				height: m,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -220,12 +225,12 @@ var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "cente
 					transition: "opacity 0.3s"
 				}
 			}),
-			/* @__PURE__ */ p("img", {
+			/* @__PURE__ */ d("img", {
 				ref: L,
 				src: q,
-				alt: y,
-				width: h,
-				height: g,
+				alt: _,
+				width: p,
+				height: m,
 				onLoad: Z,
 				onError: Q,
 				"aria-hidden": W,
@@ -237,13 +242,13 @@ var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "cente
 					left: 0,
 					width: "100%",
 					height: "100%",
-					transition: "opacity 0.3s",
+					transition: "opacity 0.3s, transform 0.3s",
 					...N.style
 				}
 			}),
-			k && W && (A?.() || /* @__PURE__ */ p(r, {}))
+			D && W && (O?.() || /* @__PURE__ */ d(r, {}))
 		]
 	});
 });
 //#endregion
-export { h as default };
+export { p as default };