@hakit/components/dist/cjs/Shared/PreloadImage/index.js

A series of components to work with @hakit/core

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../../emotion-react-jsx-runtime.browser.esm-CgJouFLh.cjs"),f=require("../../../emotion-styled-base.browser.esm-D0rcP917.cjs"),t=require("react"),D=require("@emotion/react"),V=require("@iconify/react");function b(){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 $=f.createStyled("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:b}),q=f.createStyled("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:b}),z=f.createStyled(V.Icon,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:b}),x=({lazy:y,src:c,className:N,style:E,innerStyle:i,duration:I,ease:g,children:_,onLoad:a,onLoading:u,onError:l,onClick:R,cssStyles:k,...O})=>{const p=t.useRef(null),r=t.useRef(null),e=t.useRef(null),o=t.useRef(null),n=t.useRef(null),m=I??300,s=t.useCallback(()=>{c&&(n.current=new Image,typeof u=="function"&&u(),e.current&&(e.current.style.opacity="0",e.current.style.backgroundImage=`url(${c})`),r.current&&(r.current.style.opacity="1"),n.current.onload=()=>{e.current&&(e.current.style.opacity="1"),r.current&&(r.current.style.opacity="0"),typeof a=="function"&&a()},n.current.onerror=()=>{e.current&&(e.current.style.opacity="1"),r.current&&(r.current.style.opacity="0"),typeof l=="function"&&l()},n.current.src=c)},[c,u,a,l]),v=t.useCallback(()=>{o.current=new IntersectionObserver(j=>{j.forEach(w=>{w.isIntersecting&&(s(),o.current&&o.current.disconnect())})}),p.current&&o.current.observe(p.current)},[s]);t.useEffect(()=>(typeof window<"u"&&y&&"IntersectionObserver"in window?v():s(),()=>{o.current&&o.current.disconnect(),n.current&&(n.current.onload=null)}),[y,o,n,v,s]);const S=i?.backgroundSize||"cover",h=i?.backgroundPosition||"center",P=i?.backgroundRepeat||"no-repeat";return d.jsxs($,{css:D.css(k??"",";"+(process.env.NODE_ENV==="production"?"":";label:PreloadImage;")),className:`preload-image ${N??""}`,style:{...E},ref:p,...O,onClick:R,children:[d.jsx(q,{className:"preloader-background-image",ref:e,style:{backgroundSize:S,backgroundPosition:h,backgroundRepeat:P,transitionProperty:"background-image, opacity",transitionDuration:`${m}ms, ${m}ms`,transitionTimingFunction:`${g??"cubic-bezier(0.215, 0.61, 0.355, 1)"}, ${g??"cubic-bezier(0.215, 0.61, 0.355, 1)"}`}}),d.jsx(z,{ref:r,icon:"eos-icons:three-dots-loading",className:"preloader-loading-icon"}),_]})};exports.PreloadImage=x;
//# sourceMappingURL=index.js.map