@hakit/components
Version:
A series of components to work with @hakit/core
97 lines (96 loc) • 4.1 kB
JavaScript
import { a as V, j as v } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { c as d } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { useRef as n, useCallback as N, useEffect as $ } from "react";
import { css as z } from "@emotion/react";
import { Icon as x } from "@iconify/react";
function f() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const T = /* @__PURE__ */ d("div", process.env.NODE_ENV === "production" ? {
target: "e3cnprl2"
} : {
target: "e3cnprl2",
label: "Preloader"
})(process.env.NODE_ENV === "production" ? {
name: "bjn8wh",
styles: "position:relative"
} : {
name: "bjn8wh",
styles: "position:relative",
toString: f
}), B = /* @__PURE__ */ d("div", process.env.NODE_ENV === "production" ? {
target: "e3cnprl1"
} : {
target: "e3cnprl1",
label: "PreloaderBackground"
})(process.env.NODE_ENV === "production" ? {
name: "1vojj8m",
styles: "position:absolute;top:0;right:0;bottom:0;left:0;transition-property:background-image,opacity;opacity:0"
} : {
name: "1vojj8m",
styles: "position:absolute;top:0;right:0;bottom:0;left:0;transition-property:background-image,opacity;opacity:0",
toString: f
}), C = /* @__PURE__ */ d(x, process.env.NODE_ENV === "production" ? {
target: "e3cnprl0"
} : {
target: "e3cnprl0",
label: "StyledIcon"
})(process.env.NODE_ENV === "production" ? {
name: "2bb5y2",
styles: "opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:2rem"
} : {
name: "2bb5y2",
styles: "opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:2rem",
toString: f
}), A = ({
lazy: m,
src: c,
className: E,
style: I,
innerStyle: s,
duration: k,
ease: b,
children: O,
onLoad: a,
onLoading: u,
onError: l,
onClick: _,
cssStyles: h,
...j
}) => {
const p = n(null), t = n(null), e = n(null), r = n(null), o = n(null), g = k ?? 300, i = N(() => {
c && (o.current = new Image(), typeof u == "function" && u(), e.current && (e.current.style.opacity = "0", e.current.style.backgroundImage = `url(${c})`), t.current && (t.current.style.opacity = "1"), o.current.onload = () => {
e.current && (e.current.style.opacity = "1"), t.current && (t.current.style.opacity = "0"), typeof a == "function" && a();
}, o.current.onerror = () => {
e.current && (e.current.style.opacity = "1"), t.current && (t.current.style.opacity = "0"), typeof l == "function" && l();
}, o.current.src = c);
}, [c, u, a, l]), y = N(() => {
r.current = new IntersectionObserver((S) => {
S.forEach((w) => {
w.isIntersecting && (i(), r.current && r.current.disconnect());
});
}), p.current && r.current.observe(p.current);
}, [i]);
$(() => (typeof window < "u" && m && "IntersectionObserver" in window ? y() : i(), () => {
r.current && r.current.disconnect(), o.current && (o.current.onload = null);
}), [m, r, o, y, i]);
const D = s?.backgroundSize || "cover", P = s?.backgroundPosition || "center", R = s?.backgroundRepeat || "no-repeat";
return /* @__PURE__ */ V(T, { css: /* @__PURE__ */ z(h ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:PreloadImage;")), className: `preload-image ${E ?? ""}`, style: {
...I
}, ref: p, ...j, onClick: _, children: [
/* @__PURE__ */ v(B, { className: "preloader-background-image", ref: e, style: {
backgroundSize: D,
backgroundPosition: P,
backgroundRepeat: R,
transitionProperty: "background-image, opacity",
transitionDuration: `${g}ms, ${g}ms`,
transitionTimingFunction: `${b ?? "cubic-bezier(0.215, 0.61, 0.355, 1)"}, ${b ?? "cubic-bezier(0.215, 0.61, 0.355, 1)"}`
} }),
/* @__PURE__ */ v(C, { ref: t, icon: "eos-icons:three-dots-loading", className: "preloader-loading-icon" }),
O
] });
};
export {
A as PreloadImage
};
//# sourceMappingURL=index.js.map