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

Interactive floor plan library for expos and events

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