@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 2.73 kB
JavaScript
import{jsx as e,jsxs as i}from"react/jsx-runtime";import"./MapControls.scss";import c from"classnames";import{useId as S,useLayoutEffect as W,useRef as k,useState as y}from"react";import F from"../shared/hooks/useOnClickOutside";import M from"../shared/hooks/useOnEscape";const A=({className:w,style:C,title:x,findLocationLabel:s,zoomInLabel:o,zoomOutLabel:r,viewModeLabel:p,fitToScreenLabel:d,layersLabel:u,isMap3d:_,showModeSwitch:v,showFindLocation:g,defaultLayersOpen:R=!1,layersList:m,layersActiveItems:j=[],layersWidth:B,onViewModeSwitch:O,onFindLocation:$,onZoomIn:H,onZoomOut:P,onFitToScreen:q,onChangeLayers:E})=>{const t=k(null),h=k(null),f=S(),[n,l]=y(R),[N,b]=y("down");F(t,()=>l(!1),n),M(()=>{l(!1),h.current?.focus()},n),W(()=>{if(n&&t.current){const a=t.current.getBoundingClientRect();window.innerHeight-a.bottom<250?b("up"):b("down")}},[n]);const I=a=>E(a);return i("div",{className:c("efp-map-controls",w),style:C,role:"toolbar","aria-label":x,children:[g&&e("button",{type:"button",className:"efp-map-control","aria-label":s,title:s,onClick:$,children:e("i",{className:"icon-navigation","aria-hidden":"true"})}),m&&i("div",{className:"efp-layers-button",ref:t,children:[e("button",{ref:h,type:"button",className:c("efp-map-control",{"efp-map-control--active":n}),"aria-label":u,title:u,"aria-haspopup":"true","aria-expanded":n,onClick:()=>l(!n),children:e("i",{className:"icon-layers","aria-hidden":"true"})}),n&&e("div",{className:c("efp-checked-panel",{"efp-checked-panel--opens-up":N==="up","efp-checked-panel--opens-down":N==="down"}),style:{minWidth:B},children:e("ul",{className:"efp-checked-panel__list",children:m.map(a=>i("li",{children:[e("input",{type:"checkbox",className:"efp-checked-panel__checkbox",value:a.id,id:`${f}-${a.id}`,checked:j.includes(a.id),onChange:()=>I(a.id)}),e("label",{className:"efp-checked-panel__label",htmlFor:`${f}-${a.id}`,children:e("div",{className:"efp-checked-panel__item-name",children:a.name})})]},a.id))})})]}),v&&e("button",{type:"button",className:"efp-map-control","aria-label":p,title:p,onClick:O,children:e("i",{className:_?"icon-two-dim":"icon-three-dim","aria-hidden":"true"})}),i("div",{className:"efp-map-control-group",children:[e("button",{type:"button",className:"efp-map-control","aria-label":o,title:o,onClick:H,children:e("i",{className:"icon-plus","aria-hidden":"true"})}),e("div",{className:"efp-map-control-divider"}),e("button",{type:"button",className:"efp-map-control","aria-label":r,title:r,onClick:P,children:e("i",{className:"icon-minus","aria-hidden":"true"})})]}),e("button",{type:"button",className:"efp-map-control","aria-label":d,title:d,onClick:q,children:e("i",{className:"icon-maximize","aria-hidden":"true"})})]})};export default A;