@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 2.38 kB
JavaScript
import{jsx as _}from"react/jsx-runtime";import"./HeaderLogos.scss";import{logoRowGap as W,LogoStrip as k,logoTileSize as M}from"@expofp/ui";import $ from"classnames";import{runInAction as C}from"mobx";import{observer as I}from"mobx-react-lite";import{useEffect as d,useMemo as b,useRef as w,useState as L}from"react";import{MOBILE_BREAKPOINT as v}from"../../constants.js";import N,{exhibitorStore as B,uiState as a}from"../../store/index.js";import{trackWsExhibitorClick as D}from"../../tools/gtag.js";import{shuffle as K}from"../../utils/index.js";import{MAX_GAP_FACTOR as z,PRELOAD_BATCH_SIZE as F,RELAYOUT_DEBOUNCE_MS as j,ROTATION_DELAY_MS as G,tileOptions as H}from"./header-logos-config.js";import{needsMoreLogos as U}from"./logo-page.js";import{useLogoPreload as Y}from"./use-logo-preload.js";import{useLogoRotation as q}from"./use-logo-rotation.js";function X(o){if(!o)return 0;const c=getComputedStyle(o);return o.clientWidth-(parseFloat(c.paddingLeft)||0)-(parseFloat(c.paddingRight)||0)}function O(){a.wsStarted||C(()=>a.wsStarted=!0)}const Z=I(()=>{const[o]=L(()=>K([...B.advertised])),c=w(null),[A,f]=L(!1),{loaded:l,attempted:n,loadMore:u}=Y(o,F),P=b(()=>o.slice(0,n),[o,n]),g=a.screenWidth,{uiScale:h}=a,x=g<=v,s=b(()=>H(x,t=>a.scaledRemsToPixels(t)),[x,h]),R=t=>{const i=l.get(t);return i&&M(i.aspectRatio,s)},{page:e,pass:m}=q({items:P,ready:n>0,widthOf:t=>R(t.id)?.width,measureWidth:()=>X(c.current),spacing:s.spacing,layoutKey:`${g}:${h}:${n}`,paused:A,delayMs:G,debounceMs:j}),S=w(0);d(()=>{!e||S.current===m||(S.current=m,U(e,n,o.length)&&u())},[e,m,n,o.length,u]),d(()=>{e&&O()},[e]),d(()=>O,[]);const p=[],y=new Map;for(const t of e?.items??[]){const i=l.get(t.id);let r=R(t.id);if(!i||!r)continue;r.width+s.spacing>e.maxWidth&&(r=M(i.aspectRatio,{...s,maxWidth:Math.max(0,e.maxWidth-s.spacing)}));const E=`${e.seq}:${t.id}`;y.set(E,t),p.push({key:E,src:i.src,alt:t.name,href:`?${t.slug}`,...r})}const T=e?W(p.map(t=>t.width),e.maxWidth,s.spacing,z*s.spacing):s.spacing;return _(k,{ref:c,items:p,spacing:T,className:$("efp-header-logos",`efp-header-logos--${a.wsPosition}`,{"efp-semi-transparent":a.setKioskModeEnabled}),style:{opacity:a.wsStarted?1:0},onPointerEnter:t=>t.pointerType==="mouse"&&f(!0),onPointerLeave:t=>t.pointerType==="mouse"&&f(!1),onItemClick:(t,i)=>{i.preventDefault();const r=y.get(t);r&&(D(r),N.clickExhibitor(r))}})});export default Z;