@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 3.3 kB
JavaScript
import{jsx as i,jsxs as m}from"react/jsx-runtime";import"./LevelSelector.scss";import s from"classnames";import{useCallback as v,useLayoutEffect as j,useRef as h,useState as y}from"react";import A from"../shared/hooks/useOnClickOutside";import O from"../shared/hooks/useOnEscape";export default function E({floors:n,layout:D,onSelect:f,floorSelectionLabel:g,currentFloorLabel:w,floorLabel:x}){const N=h(null),l=h(null),c=h(new Map),[a,o]=y(!1),[k,R]=y("down"),I=v(()=>{o(!1),l.current?.focus()},[]);A([N,l],()=>o(!1),a),O(I,a),j(()=>{if(a&&l.current){const e=l.current.getBoundingClientRect(),d=window.innerHeight-e.bottom;R(d<200?"up":"down")}},[a]);const u=v(e=>{e.disabled||(f(e.id),o(!1),l.current?.focus())},[f]),b=v((e,t)=>{if(e.key!=="ArrowDown"&&e.key!=="ArrowUp")return;e.preventDefault();const d=n.findIndex($=>$.id===t.id),_=e.key==="ArrowDown"?1:-1;let p=d+_;for(;p>=0&&p<n.length;){if(!n[p].disabled){c.current.get(n[p].id)?.focus();return}p+=_}},[n]),C=v((e,t)=>{if(e.key==="Enter"||e.key===" "){if(t.disabled)return;e.preventDefault(),u(t);return}b(e,t)},[b,u]);if(n.length===0)return null;const r=n.find(e=>e.active);if(D==="compact-list"){const e=r&&!r.disabled?r:n.find(t=>!t.disabled);return i("div",{className:s("efp-level-selector","efp-level-selector--compact-list"),role:"radiogroup","aria-label":g,children:n.map(t=>i("button",{ref:d=>{d?c.current.set(t.id,d):c.current.delete(t.id)},type:"button",className:s("efp-level-selector__item",{"efp-level-selector__item--active":t.active,"efp-level-selector__item--disabled":t.disabled}),role:"radio",title:`${t.active?w:x} ${t.label}`,"aria-label":`${t.active?w:x} ${t.label}`,"aria-checked":t.active,"aria-disabled":t.disabled,tabIndex:t.id===e?.id?0:-1,onClick:()=>u(t),onKeyDown:d=>b(d,t),children:i("span",{dir:"auto",children:t.label})},t.id))})}return m("div",{className:s("efp-level-selector","efp-level-selector--dropdown"),children:[m("button",{ref:l,type:"button",className:s("efp-level-selector__trigger",{"efp-level-selector__trigger--open":a}),onClick:()=>o(!a),"aria-haspopup":"listbox","aria-expanded":a,"aria-label":`${w}: ${r?.label??""}`,children:[m("div",{className:"efp-level-selector__trigger-text",children:[i("i",{className:"icon-layers","aria-hidden":"true"}),i("span",{dir:"auto",children:r?.label??""})]}),i("div",{className:"efp-level-selector__trigger-chevron",children:i("i",{className:"icon-chevron-down","aria-hidden":"true"})})]}),a&&i("div",{ref:N,className:s("efp-level-selector__dropdown","efp-level-selector__dropdown--full",{"efp-level-selector__dropdown--opens-up":k==="up","efp-level-selector__dropdown--opens-down":k==="down"}),role:"listbox","aria-label":g,children:n.map(e=>m("div",{ref:t=>{t?c.current.set(e.id,t):c.current.delete(e.id)},className:s("efp-level-selector__dropdown-item",{"efp-level-selector__dropdown-item--active":e.active,"efp-level-selector__dropdown-item--disabled":e.disabled}),role:"option","aria-selected":e.active,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,onClick:()=>u(e),onKeyDown:t=>C(t,e),children:[i("span",{className:"efp-level-selector__dropdown-item-icon",children:e.active&&i("i",{className:"icon-checkmark-solid","aria-hidden":"true"})}),i("span",{className:"efp-level-selector__dropdown-item-name",dir:"auto",children:e.label})]},e.id))})]})}