@expofp/floorplan/dist/esm/components/Ws.js

Interactive floor plan library for expos and events

import{jsx as s}from"react/jsx-runtime";import"./Ws.scss";import p from"classnames";import{reaction as x}from"mobx";import{useLocalStore as w,useObserver as g}from"mobx-react-lite";import b,{createRef as I,useCallback as m}from"react";import{CSSTransition as y,TransitionGroup as S}from"react-transition-group";import T,{exhibitorStore as k,uiState as n}from"../store";import{remsToPixels as v,shuffle as N}from"../utils";import{loadImagesInBatchesById as E}from"../utils/loadImagesInBatches";import{useInit as B}from"../utils/mobx";const h=8e3,L=b.memo(()=>{const e=w(()=>({el:null,all:[],adv:[],keySeq:0,index:0,imgByExhibitorId:new Map,batchSize:100,loading:!1,leftToNextLoad:0,timeoutId:0,get sectionStyle(){const{wsStarted:t,wsPosition:o}=n,a=o==="top",i={right:0,width:"100%",opacity:t?1:0};return a?i.top=0:i.bottom=0,i}})),l=m(()=>{const o=(e.el?.getBoundingClientRect().width??0)-v(.3)*2;let a=0;const i=[];do{const r=e.all[e.index%e.all.length],c=e.imgByExhibitorId.get(r.id);if(!c)break;const f=c.width*n.wsImageHeightPx/c.height+20;if(a+f>o&&i.length)break;a+=f,i.push({key:e.keySeq++,e:r}),e.index=(e.index+1)%e.all.length}while(!0);e.adv=i.map(r=>({...r,nodeRef:I()})),e.leftToNextLoad=Math.max(0,e.leftToNextLoad-i.length)},[e]),d=m(async()=>{e.loading=!0;let t=e.all.slice(e.index,e.index+e.batchSize);t.length<e.batchSize&&(t=t.concat(e.all.slice(0,e.batchSize-t.length)));const o=await E(new Map(t.map(a=>[a.id,{fallback:a.logo}])));return e.leftToNextLoad=o.size,e.loading=!1,o},[e]),u=m(()=>{const t=async()=>{if(e.loading){e.timeoutId=window.setTimeout(t,h);return}e.leftToNextLoad<=e.adv.length&&(e.imgByExhibitorId=await d()),l(),e.timeoutId=window.setTimeout(t,h)};clearTimeout(e.timeoutId),e.timeoutId=window.setTimeout(t,h)},[d,l]);return B(()=>{let t,o=!0;return(async()=>(e.all=N(k.advertised),e.imgByExhibitorId=await d(),o&&(l(),u(),n.wsStarted=!0,t=x(()=>n.screenSize,l))))(),()=>{o=!1,t?.(),clearInterval(e.timeoutId)}}),g(()=>s("section",{className:p("ws",{"efp-semi-transparent":n.setKioskModeEnabled}),ref:t=>e.el=t,onMouseOver:()=>clearInterval(e.timeoutId),onMouseOut:u,style:e.sectionStyle,children:s(S,{component:null,children:e.adv.map(t=>s(y,{timeout:500,nodeRef:t.nodeRef,children:s("a",{ref:t.nodeRef,href:`?${t.e.slug}`,className:"ws__exhibitor",style:{height:`${n.wsImageHeightPx}px`},onClick:o=>{o.preventDefault(),T.clickExhibitor(t.e)},children:s("img",{src:t.e.logo,alt:t.e.name,crossOrigin:"anonymous"})})},t.key))})}))});export default()=>g(()=>n.wsShown?s(L,{}):null);