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