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

The project of React.js Image library.

var b=this&&this.__assign||function(){return(b=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var l in t=arguments[r])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e}).apply(this,arguments)},g=this&&this.__rest||function(e,t){var r={};for(l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var n=0,l=Object.getOwnPropertySymbols(e);n<l.length;n++)t.indexOf(l[n])<0&&Object.prototype.propertyIsEnumerable.call(e,l[n])&&(r[l[n]]=e[l[n]]);return r},e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}},v=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.LazyImage=void 0,require("react/jsx-runtime")),m=require("react"),x=e(require("classnames")),O=require("./IntersectObserverContext"),j=require("./hooks");exports.LazyImage=function(r){var e,t=null!=(t=r.style)?t:{},n=t.borderRadius,t=g(t,["borderRadius"]),l=(0,m.useContext)(O.IntersectObserverContext),o=(0,j.useLazyImage)(b(b({},r),{url:r.url.replace(/^http:/,"https:")})),a=(0,m.useRef)(null),i=(0,m.useRef)(null),u=(0,m.useRef)(null),s=(0,m.useRef)(!1),c=(0,m.useMemo)(function(){return!!r.onClick},[r.onClick]),d=(0,m.useMemo)(function(){var e;return null!=(e=r.title)?e:o.url},[r,o]),f=(0,j.usePrev)(o),h=(0,m.useCallback)(function(){var e;i.current&&(i.current.style.opacity="1"),u.current&&(u.current.style.display="none"),null!=(e=r.onLoaded)&&e.call(r,o)},[r,o]),p=(0,m.useCallback)(function(e){var t;e.preventDefault(),null!=(t=r.onClick)&&t.call(r,e)},[r]),y=(0,m.useCallback)(function(){var e;return(0,v.jsx)("img",{ref:i,src:o.url,alt:d,width:o.width,height:o.height,className:"lazy-image-payload",style:{width:null!=(e=r.width)?e:"100%",height:null!=(e=r.height)?e:"auto",borderRadius:n,objectFit:null!=(e=r.fit)?e:"initial",opacity:0,pointerEvents:c?void 0:"none",cursor:c?"pointer":void 0},onLoad:h})},[o.url,o.width,o.height,d,n,r.width,r.height,r.fit,c,h]);return(0,m.useEffect)(function(){var e=a.current;if(e)return s.current||(s.current=!0,l.subscribe(e,function(){return o.loadImage()})),function(){s.current&&"loaded"===o.loadState&&l.unsubscribe(e)}},[l,o]),(0,m.useEffect)(function(){var e;o.loadState!==(null==f?void 0:f.loadState)&&("loaded"===o.loadState?(u.current&&(u.current.style.display="none"),null!=(e=r.onLoaded)&&e.call(r,o)):"error"===o.loadState&&null!=(e=r.onError)&&e.call(r,r.url))},[r,o,f]),(0,v.jsx)("span",{ref:a,title:c?d:void 0,tabIndex:null!=(e=r.tabIndex)?e:0,className:(0,x.default)("lazy-image",o.loadState,r.className),style:b(b({display:"flex",justifyContent:"center",flexBasis:"fit-content",position:"relative",width:"100%",height:"auto",minHeight:"1px"},t),{border:"0 !important"}),onMouseOver:r.onMouseOver,onMouseLeave:r.onMouseLeave,onFocus:r.onFocus,onBlur:r.onBlur,children:(0,v.jsxs)("span",{className:"lazy-image-inner",style:{display:"inline-flex",alignItems:"center",position:"relative",width:"100%",height:"100%",borderRadius:n},children:[(0,v.jsx)("span",{ref:u,className:(0,x.default)("lazy-image-loading",{error:"error"===o.loadState}),style:{position:"absolute",top:0,left:0,right:0,bottom:0},children:"error"===o.loadState?r.error:null!=(e=r.loading)?e:r.beforeLoad}),"loaded"===o.loadState&&(0,v.jsx)(v.Fragment,{children:c?(0,v.jsx)("button",{type:"button","aria-label":d,style:{width:"100%",fontSize:0},onClick:p,children:y()}):y()})]})})};