@mornya/react-image-libs/dist/LazyBackground.js

The project of React.js Image library.

var d=this&&this.__assign||function(){return(d=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)},e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}},f=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.LazyBackground=void 0,require("react/jsx-runtime")),p=require("react"),v=e(require("classnames")),b=require("./IntersectObserverContext"),g=require("./hooks");exports.LazyBackground=function(t){var e=t.backgroundSize,e=void 0===e?"contain":e,r=(0,p.useContext)(b.IntersectObserverContext),n=(0,g.useLazyImage)(d(d({},t),{url:t.url.replace(/^http:/,"https:")})),o=(0,p.useRef)(null),a=(0,p.useRef)(null),l=(0,p.useRef)(!1),u=(0,p.useMemo)(function(){return!!t.onClick},[t.onClick]),s=(0,p.useMemo)(function(){var e;return null!=(e=t.title)?e:n.url},[t,n]),i=(0,g.usePrev)(n),c=(0,p.useCallback)(function(e){var r;e.preventDefault(),null!=(r=t.onClick)&&r.call(t,e)},[t]);return(0,p.useEffect)(function(){var e=o.current;if(e)return l.current||(l.current=!0,r.subscribe(e,function(){return n.loadImage()})),function(){l.current&&"loaded"===n.loadState&&r.unsubscribe(e)}},[r,n]),(0,p.useEffect)(function(){var e;n.loadState!==(null==i?void 0:i.loadState)&&("loaded"===n.loadState?(a.current&&(a.current.style.display="none"),null!=(e=t.onLoaded)&&e.call(t,n)):"error"===n.loadState&&null!=(e=t.onError)&&e.call(t,t.url))},[t,n,i]),(0,f.jsxs)("span",{ref:o,title:u?s:void 0,tabIndex:null!=(s=t.tabIndex)?s:0,className:(0,v.default)("lazy-background",n.loadState,t.className),style:d({display:"inline-flex",position:"relative",width:"100%",aspectRatio:1},t.style),onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onFocus:t.onFocus,onBlur:t.onBlur,children:[(0,f.jsx)("span",{ref:a,className:(0,v.default)("lazy-background-loading",{error:"error"===n.loadState}),style:{position:"absolute",top:0,left:0,right:0,bottom:0},children:"error"===n.loadState?t.error:null!=(s=t.loading)?s:t.beforeLoad}),"loaded"===n.loadState&&(0,f.jsx)("span",{className:"lazy-background-payload",style:{display:"inline-flex",alignItems:"center",position:"relative",width:"100%",height:"100%",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundImage:'url("'.concat(n.url,'")'),backgroundSize:e,pointerEvents:u?void 0:"none",cursor:u?"pointer":void 0},onClick:c,children:t.children})]})};