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

Bothub UI Components

import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as l,useCallback as t,useEffect as o}from"react";import{Portal as i}from"../portal/index.js";import{ImageFullScreenStyled as n,ImageFullScreenBackdrop as d,ImageFullScreenContainer as a,ImageFullScreenContent as c,ImageFullScreenTopBlock as u,ImageFullScreenTopBlockContent as m,ImageFullScreenMain as s,ImageFullScreenCarousel as h,ImageFullScreenCarouselContainer as p,ImageFullScreenSlide as g,ImageFullScreenImage as v,ImageFullScreenCarouselButtons as w,ImageFullScreenCarouselPrevButton as f,ImageFullScreenCarouselNextButton as x,ImageFullScreenPreview as S,ImageFullScreenPreviewImages as b,ImageFullScreenPreviewImage as j}from"./styled.js";export{ImageFullScreenAuthor,ImageFullScreenAuthorAvatar,ImageFullScreenAuthorName,ImageFullScreenAuthorTag,ImageFullScreenToolbar}from"./styled.js";import{ImageFullScreenProvider as k}from"./context.js";export{ImageFullScreenContext,useImageFullScreen}from"./context.js";import{useCarousel as C}from"../../utils/useCarousel.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";import"tslib";const I=({open:I,data:A,item:F,author:y,toolbar:P,onChange:E,onClose:L})=>{var N;const[T,U]=l(!1),W=t(e=>{null==E||E(A[e])},[E,A]),{activeSlideIndex:Z,isPrevAllowed:$,isNextAllowed:G,goPrev:H,goNext:O,goToSlide:R,carouselProps:q}=C({slidesCount:A.length,onSlideChange:W,enableSwipes:!T,defaultIndex:()=>{var e;return F&&null!==(e=A.findIndex(({id:e})=>e===("object"==typeof F?F.id:F)))&&void 0!==e?e:0}}),z=null!==(N=A[Z])&&void 0!==N?N:null;return o(()=>{if(I){const e=e=>{switch(e.code){case"ArrowLeft":H();break;case"ArrowRight":O()}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}},[I,H,O]),e(k,{data:A,activeItem:z,children:I&&e(i,{children:r(n,{children:[e(d,{open:I,onClick:L}),e(a,{children:r(c,{children:[(y||P)&&e(u,{children:r(m,{children:[y,P]})}),r(s,{children:[r(h,{children:[e(p,Object.assign({},q,{children:A.map(r=>{var l;return e(g,{children:e(v,{imageProps:{src:r.url,alt:r.name,width:r.width,height:r.height,loading:"skeleton"},onZoomStart:U.bind(null,!0),onZoomEnd:U.bind(null,!1)})},null!==(l=r.id)&&void 0!==l?l:r.url)})})),A.length>1&&!T&&r(w,{$imageWidth:z.width,children:[e(f,{disabled:!$,onClick:H}),e(x,{disabled:!G,onClick:O})]})]}),A.length>1&&e(S,{children:e(b,{children:A.map((r,l)=>{var t,o,i,n,d;return e(j,{$active:r===z,src:null!==(t=r.previewUrl)&&void 0!==t?t:r.url,width:null!==(o=r.previewWidth)&&void 0!==o?o:r.width,height:null!==(i=r.previewHeight)&&void 0!==i?i:r.height,alt:r.name,onClick:R.bind(null,l)},null!==(d=null!==(n=r.id)&&void 0!==n?n:r.previewUrl)&&void 0!==d?d:r.url)})})})]})]})})]})})})};export{I as ImageFullScreen,d as ImageFullScreenBackdrop,h as ImageFullScreenCarousel,w as ImageFullScreenCarouselButtons,p as ImageFullScreenCarouselContainer,x as ImageFullScreenCarouselNextButton,f as ImageFullScreenCarouselPrevButton,a as ImageFullScreenContainer,c as ImageFullScreenContent,v as ImageFullScreenImage,s as ImageFullScreenMain,S as ImageFullScreenPreview,j as ImageFullScreenPreviewImage,b as ImageFullScreenPreviewImages,k as ImageFullScreenProvider,g as ImageFullScreenSlide,n as ImageFullScreenStyled,u as ImageFullScreenTopBlock,m as ImageFullScreenTopBlockContent};