@bothub-chat/ui/dist/components/image/index.js

Bothub UI Components

import{__rest as t}from"tslib";import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{forwardRef as d,useState as r,useCallback as a}from"react";import{Helmet as h}from"react-helmet";import"../../theme/index.js";import{ImageSkeleton as l,ImageImg as m,ImagePicture as s,ImageSource as p}from"./styled.js";import{useTheme as b}from"../../theme/hook.js";const c=d(((d,c)=>{var{src:n,alt:f,width:g,height:y,preload:k=!1,loading:w="default",fetchPriority:j}=d,x=t(d,["src","alt","width","height","preload","loading","fetchPriority"]);const $=b(),[v,L]=r(!0),P="skeleton"===w&&v,W=a((t=>{var e;L(!1),null===(e=x.onLoad)||void 0===e||e.call(x,t)}),[x.onLoad]);return e(i,{children:[P&&o(l,{$width:g,$height:y,className:x.className,width:g,height:y}),"string"==typeof n&&o(m,Object.assign({ref:c,$hidden:P},x,{src:n,width:g,height:y,alt:f,onLoad:W})),"object"==typeof n&&e(s,Object.assign({$hidden:P},x,{children:[n.mobile&&o(p,{srcSet:"string"==typeof n.mobile?n.mobile:n.mobile.src,width:"object"==typeof n.mobile?n.mobile.width:void 0,height:"object"==typeof n.mobile?n.mobile.height:void 0,media:`(max-width: ${$.mobile.maxWidth})`,onLoad:W}),n.tablet&&o(p,{srcSet:"string"==typeof n.tablet?n.tablet:n.tablet.src,width:"object"==typeof n.tablet?n.tablet.width:void 0,height:"object"==typeof n.tablet?n.tablet.height:void 0,media:`(max-width: ${$.tablet.maxWidth})`,onLoad:W}),n.desktop&&o(m,{$hidden:P,src:"string"==typeof n.desktop?n.desktop:n.desktop.src,width:"object"==typeof n.desktop?n.desktop.width:void 0,height:"object"==typeof n.desktop?n.desktop.height:void 0,alt:f,onLoad:W})]})),k&&e(h,{children:["string"==typeof n&&o("link",{rel:"preload",href:n,as:"image",fetchPriority:j}),"object"==typeof n&&n.mobile&&o("link",{rel:"preload",href:"string"==typeof n.mobile?n.mobile:n.mobile.src,as:"image",media:`(max-width: ${$.mobile.maxWidth})`,fetchPriority:j}),"object"==typeof n&&n.tablet&&o("link",{rel:"preload",fetchPriority:j,href:"string"==typeof n.tablet?n.tablet:n.tablet.src,as:"image",media:`(min-width: ${parseInt($.mobile.maxWidth)+.1}px) and (max-width: ${$.tablet.maxWidth})`}),"object"==typeof n&&n.desktop&&o("link",{rel:"preload",fetchPriority:j,href:"string"==typeof n.desktop?n.desktop:n.desktop.src,as:"image",media:`(min-width: ${parseInt($.tablet.maxWidth)+.1}px)`})]})]})}));export{c as Image,m as ImageImg,s as ImagePicture,l as ImageSkeleton,p as ImageSource};