mui-image-alter/dist/index.cjs

Fork of mui-image. Display images as per the Material guidelines using Material-UI v5 and above. With component prop support.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),V=require("react"),y=require("@mui/material/styles"),G=require("@mui/material/SvgIcon"),J=require("@mui/material/CircularProgress"),K=require("clsx"),b=t=>t&&t.__esModule?t:{default:t};function Q(t){if(t&&t.__esModule)return t;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const e=Q(V),U=b(G),X=b(J),m=b(K),Y=({observeRef:t})=>{const[i,n]=e.useState(),[s,f]=e.useState(),o=e.useRef(void 0);return e.useEffect(()=>{o.current=new ResizeObserver(r=>{n(r[0].contentRect.height),f(r[0].contentRect.width)})},[]),e.useEffect(()=>(t&&t.current&&o.current&&o.current.observe(t.current),()=>{t&&t.current&&o.current&&o.current.unobserve(t.current)}),[t]),{ref:t,height:i,width:s}},Z=t=>a.jsx(U.default,{...t,children:a.jsx("path",{d:"M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z"})}),p=e.forwardRef(({src:t,alt:i="",position:n="relative",fit:s="cover",style:f,className:o="",showLoading:r=!1,errorIcon:u=!0,shift:c=!1,distance:w=100,shiftDuration:z=void 0,bgColor:M="inherit",wrapperStyle:k,iconWrapperStyle:C,wrapperClassName:O="",iconWrapperClassName:$="",duration:B=3e3,easing:W="cubic-bezier(0.7, 0, 0.6, 1)",onLoad:h,onError:g,sx:q,component:H="img",...l},P)=>{const[d,x]=e.useState(!1),[j,S]=e.useState(!1),{ref:R,width:I,height:_}=Y({observeRef:P}),D=l.height?l.height:"100%",E=l.width?l.width:"100%",F=e.useCallback(()=>{x(!0),S(!1),h&&h()},[h]),N=e.useCallback(()=>{S(!0),x(!1),g&&g()},[g]),A=c!==void 0&&c!==!1&&c!==null?{[c]:d?0:w}:{},T=typeof u!="boolean"&&u||a.jsx(Z,{sx:{fontSize:56,color:"#bdbdbd"}}),L=typeof r!="boolean"&&r||a.jsx(X.default,{size:56,thickness:6});return a.jsxs(et,{className:m.default("MuiImageAlter-wrapper",O),sx:q,style:k,bgColor:M,rootHeight:_||D,rootWidth:I||E,children:[a.jsx(tt,{ref:R,as:H,src:t,alt:i,style:f,className:m.default("MuiImageAlter-img",o),onLoad:F,onError:N,position:n,fit:s,shift:c,shiftDuration:z,shiftStyles:A,duration:B,easing:W,loaded:d,...l}),(!!r||!!u)&&a.jsxs(it,{className:m.default("MuiImageAlter-iconWrapper",$),style:C,loaded:d,children:[!!u&&j&&T,!!r&&!j&&!d&&L]})]})}),v=(t,i)=>!i.includes(t),tt=e.memo(y.styled("img",{shouldForwardProp:t=>v(t.toString(),["position","fit","shift","shiftDuration","shiftStyles","duration","easing","loaded","sx","as"])})(t=>({"@keyframes materialize":{"0%":{filter:"saturate(20%) contrast(50%) brightness(120%)"},"75%":{filter:"saturate(60%) contrast(100%) brightness(100%)"},"100%":{filter:"saturate(100%) contrast(100%) brightness(100%)"}},position:t.position,objectFit:t.fit,transitionProperty:`${t.shift?`${t.shift}, `:""}opacity`,transitionDuration:`${t.shift?`${t.shiftDuration||t.duration*.3}ms, `:""}${t.duration/2}ms`,transitionTimingFunction:t.easing,opacity:t.loaded?1:0,animation:t.loaded?`materialize ${t.duration}ms 1 ${t.easing}`:"",...!!t.shift&&t.shiftStyles}))),et=e.memo(y.styled("div",{shouldForwardProp:t=>v(t.toString(),["bgColor","sx","rootHeight","rootWidth"])})(t=>({display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:t.bgColor,height:`${t.rootHeight}px`,width:`${t.rootWidth}px`}))),it=e.memo(y.styled("div",{shouldForwardProp:t=>t!=="loaded"})(t=>({width:"100%",marginLeft:"-100%",display:"flex",justifyContent:"center",alignItems:"center",opacity:t.loaded?0:1})));exports.Image=p;