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

Interactive floor plan library for expos and events

import{jsx as s,jsxs as v}from"react/jsx-runtime";import"./LevelSelector.scss";import m from"classnames";import{useObserver as F}from"mobx-react-lite";import{useCallback as b,useEffect as E,useLayoutEffect as I,useRef as h,useState as O}from"react";import D from"../core/Rect";import L from"../data";import i,{uiState as g}from"../store";import{LayersMode as S}from"../store/LayerStore";import R from"../tools/settings";import{t as p}from"../utils/i18n";import T from"../utils/useOnClickOutside";const V=["money2020usa","rodion2","possible2025","2025virtuosotravelweek","zscalerskofy26","gamescom2025"],P=["ice-gaming2026"];function B(l){return P.includes(R.EXPO)?{layout:"compact-list",useShortNames:l}:{layout:l?"compact-list":"dropdown",useShortNames:l}}export default function X(){const l=h(null),_=h(null),d=h(null),[c,y]=O(!1),[x,C]=O("down");T([_,d],()=>y(!1)),E(()=>()=>{l.current&&clearTimeout(l.current)},[]),E(()=>{if(!c)return;const t=r=>{r.key==="Escape"&&(y(!1),d.current?.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[c]),I(()=>{if(c&&d.current){const t=d.current.getBoundingClientRect(),n=window.innerHeight-t.bottom;C(n<200?"up":"down")}},[c]);const k=b(t=>{if(l.current)return;l.current=setTimeout(()=>l.current=null,500);const r=i.layerStore.layers.find(u=>u.description===t.description);if(i.layerStore.mode===S.Radio){if(i.layerStore.updateVisibility(r,!0),i.maplibreStore.showMaplibre)return;if(!!window.__fpSettings?.fpVer||V.includes(R.EXPO)){const o=r.viewbox??r.rect;g.moveToRect=D.fromX1y1x2y2(o.x1,o.y1,o.x2,o.y2)}else{const o=i.layerStore.layers.indexOf(i.layerStore.layers.filter(e=>!e.frozen&&e.visible)[0]),a=i.layerStore.layers.indexOf(r);if(o===a)return;a<o?g.zoomBy=.95:g.zoomBy=1.05}}else i.layerStore.updateVisibility(r,!r.visible);const n=i.toursStore.getTourLayerInfo(r.name)||i.toursStore.getTourLayerInfo(r.description);if(n){i.layerStore.showPathWay(n.id);return}i.toursStore.stopTour()},[]),f=b(t=>{t.disabled||(k(t.layer),y(!1),d.current?.focus())},[k]),N=b((t,r,n)=>{if(t.key==="Enter"||t.key===" "){if(r.disabled)return;t.preventDefault(),f(r);return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault();const u=n.findIndex(e=>e.layer.description===r.layer.description),o=t.key==="ArrowDown"?1:-1;let a=u+o;for(;a>=0&&a<n.length;){if(!n[a].disabled){t.currentTarget.parentElement?.children?.[a]?.focus();return}a+=o}}t.key==="Escape"&&(y(!1),d.current?.focus())},[f]);return F(()=>{const t=i.layerStore.floors;if(!(i.layerStore.mode===S.Radio||i.layerStore.mode===S.CheckBox)||t.length===0)return null;const{layout:n,useShortNames:u}=B(L.shortLevelName),o=t.find(e=>e.active),a=e=>u?e.shortName:e.description;return n==="compact-list"?s("div",{className:m("efp-level-selector","efp-level-selector--compact-list",{"is-ready":t.length}),role:"radiogroup","aria-label":p("Floor selection"),children:t.map(e=>s("div",{className:m("efp-level-selector__item",{"is-active":e.active,"is-disabled":e.disabled}),role:"radio",title:`${e.active?p("Current Floor"):p("Floor")} ${e.layer.description}`,"aria-label":`${e.active?p("Current Floor"):p("Floor")} ${e.layer.description}`,"aria-checked":e.active,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,onClick:()=>!e.disabled&&f(e),onKeyDown:w=>N(w,e,t),dir:"auto",children:s("span",{children:a(e)})},e.layer.description))}):v("div",{className:m("efp-level-selector","efp-level-selector--dropdown",{"is-ready":t.length}),children:[v("button",{ref:d,type:"button",className:m("efp-level-selector__trigger",{"is-open":c}),onClick:()=>y(!c),"aria-haspopup":"listbox","aria-expanded":c,"aria-label":`${p("Current Floor")}: ${o?.description??""}`,children:[v("div",{className:"efp-level-selector__trigger-text",children:[s("i",{className:"icon-layers","aria-hidden":"true"}),s("span",{children:o?.description??""})]}),s("div",{className:"efp-level-selector__trigger-chevron",children:s("i",{className:"icon-chevron-down","aria-hidden":"true"})})]}),c&&s("div",{ref:_,className:m("efp-level-selector__dropdown","efp-level-selector__dropdown--full",{"is-opens-up":x==="up","is-opens-down":x==="down"}),role:"listbox","aria-label":p("Floor selection"),children:t.map(e=>v("div",{className:m("efp-level-selector__dropdown-item",{"is-active":e.active,"is-disabled":e.disabled}),role:"option","aria-selected":e.active,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,onClick:()=>f(e),onKeyDown:w=>N(w,e,t),children:[s("span",{className:"efp-level-selector__dropdown-item-icon",children:e.active&&s("i",{className:"icon-checkmark-solid","aria-hidden":"true"})}),s("span",{className:"efp-level-selector__dropdown-item-name",children:e.description})]},e.layer.description))})]})})}