UNPKG

xtreme-ui

Version:

Collection of reusable components that can be used in web projects

2 lines (1 loc) 3.27 kB
import{r as c,j as p,$ as S}from"./iframe-5Rr_RUeM.js";import{c as j}from"./clsx-B-dksMZM.js";const y={happy:["f118","e392","f580","f5b8","e409","e3a4","e39d","f5c2","e398","e396","f4da","e391","e390","e38f","e38d","e389","e383","f59c","f59b","f59a","f599","f598","e37d","f597","f596","e379","f58c","f581","f58b","f58a","f589","f588","f587","f586","f585","f584","f583","f582","e377","f579","e2fe","e372","e36e","e47c","e36b","e368","f2fe"]},M=async a=>new Promise((t,s)=>{fetch(a).then(e=>(e.ok||s(e.status),e.blob())).then(e=>t(URL.createObjectURL(e)))}),V=async a=>new Promise((t,s)=>{const e=new FileReader;e.onloadend=()=>{const r=e?.result?.toString();r?t(r):s()},e.onerror=s,e.readAsDataURL(a)}),x=a=>new Promise((t,s)=>{const e=new Image;e.addEventListener("load",()=>t(e)),e.addEventListener("error",r=>s(r)),e.src=a}),A=a=>a*Math.PI/180,k=async a=>new Promise(t=>{x(a).then(s=>{t({width:s.width,height:s.height})})}),z=async(a,t,s=0)=>{if(!a||!t)return null;const e=await x(a);return new Promise(r=>{const o=document.createElement("canvas"),i=o.getContext("2d");if(!i)return null;const n=2*(Math.max(e.width,e.height)/2*Math.sqrt(2));o.width=n,o.height=n,i.translate(n/2,n/2),i.rotate(A(s)),i.translate(-n/2,-n/2),i.drawImage(e,n/2-e.width*.5,n/2-e.height*.5);const u=i.getImageData(0,0,n,n);o.width=t.width,o.height=t.height,i.putImageData(u,Math.round(0-n/2+e.width*.5-t.x),Math.round(0-n/2+e.height*.5-t.y)),o.toBlob(m=>r({blob:m??void 0,base64:o.toDataURL("image/jpeg")}),"image/jpeg")})};var v=(a=>(a[a.mini=64]="mini",a[a.default=96]="default",a[a.large=128]="large",a))(v||{});const I=c.forwardRef((a,t)=>{const{className:s,src:e,file:r,alt:o,placeholderIcon:i,size:f="default",onClick:n}=a,[u,m]=c.useState(),[N,L]=c.useState(y.happy[0]),[R,d]=c.useState(!!e||!!r),[w,h]=c.useState(!1),b=typeof f=="number"?f:v[f],_={"--iconSize":`${8+b/4}px`},q=j("xtrAvatar",s,R&&"loading",w&&"error"),g=l=>{l&&setTimeout(()=>m(l),300),setTimeout(()=>d(!1),1e3)};return c.useEffect(()=>{L(y.happy[Math.floor(Math.random()*y.happy.length)]);try{r?(d(!0),h(!1),V(r).then(l=>g(l)).catch(l=>{console.log(l),d(!1),h(!0)})):e?(d(!0),h(!1),M(e).then(l=>g(l)).catch(l=>{console.log(l,e),d(!1),h(!0)})):(m(void 0),g())}catch{g()}},[e,r]),p.jsx("div",{ref:t,className:q,style:{"--avatarSize":`${b}px`},onClick:n,role:"img",children:u?p.jsx("img",{className:"image",src:u,alt:o}):p.jsx(S,{className:"placeholder",type:"solid",style:_,code:w?"e1b7":i??N})})});I.displayName="Avatar";try{I.displayName="Avatar",I.__docgenInfo={description:"",displayName:"Avatar",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},file:{defaultValue:null,description:"",name:"file",required:!1,type:{name:"Blob"}},alt:{defaultValue:null,description:"",name:"alt",required:!1,type:{name:"string"}},placeholderIcon:{defaultValue:null,description:"",name:"placeholderIcon",required:!1,type:{name:"string"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'number | "mini" | "default" | "large"'}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"(() => void)"}}}}}catch{}export{I as A,z as a,k as g,V as r};