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

Interactive floor plan library for expos and events

import{jsx as e,jsxs as c}from"react/jsx-runtime";import"./MapControls.scss";import l from"classnames";import{useEffect as _,useLayoutEffect as H,useMemo as I,useRef as r,useState as f}from"react";import{uiState as L}from"../store";import P from"../utils/useOnClickOutside";const q=({className:h,style:b,title:y,titles:o,viewMode:N,viewModeSwitch:w,findLocation:C,layersOpen:k=!1,layersList:d,layersActiveItems:g=[],layersWidth:v,onViewModeSwitch:x,onClickFindLocation:R,onClickZoomIn:O,onClickZoomOut:z,onClickByWidth:j,onChangeLayers:B})=>{const a=r(null),M=r(null),s=r(null),[t,p]=f(k),[u,m]=f("down");P(a,()=>p(!1));const i=I(()=>({find:o[0],zoomIn:o[1],zoomOut:o[2],mode:o[3],width:o[4],layers:o[5]}),[o]);_(()=>{s.current&&(L.mapControlsDOMRect=s.current.getBoundingClientRect())}),H(()=>{if(t&&a.current){const n=a.current.getBoundingClientRect();window.innerHeight-n.bottom<250?m("up"):m("down")}},[t]);const S=n=>B(n);return c("div",{ref:s,className:l("efp-map-controls",h),style:b,role:"toolbar","aria-label":y,children:[C&&e("button",{type:"button",className:"efp-map-control",title:i.find,onClick:R,children:e("i",{className:"icon-navigation","aria-hidden":"true"})}),d&&c("div",{className:"efp-layers-button",ref:a,children:[e("button",{type:"button",className:l("efp-map-control",{isActive:t}),title:i.layers,"aria-haspopup":"true","aria-expanded":t,onClick:()=>p(!t),children:e("i",{className:"icon-layers","aria-hidden":"true"})}),t&&e("div",{ref:M,className:l("efp-checked-panel",{"is-opens-up":u==="up","is-opens-down":u==="down"}),style:{minWidth:v},children:e("ul",{children:d.map(n=>c("li",{children:[e("input",{type:"checkbox",value:n.id,id:`layer-${n.id}`,checked:g.includes(n.id),onChange:()=>S(n.id)}),e("label",{htmlFor:`layer-${n.id}`,children:e("div",{className:"efp-checked-panel__item-name",children:n.name})})]},n.id))})})]}),w&&e("button",{type:"button",className:"efp-map-control",title:i.mode,onClick:x,children:e("i",{className:N?"icon-two-dim":"icon-three-dim","aria-hidden":"true"})}),c("div",{className:"efp-map-control-group",children:[e("button",{type:"button",className:"efp-map-control",title:i.zoomIn,onClick:O,children:e("i",{className:"icon-plus","aria-hidden":"true"})}),e("div",{className:"efp-map-control-divider"}),e("button",{type:"button",className:"efp-map-control",title:i.zoomOut,onClick:z,children:e("i",{className:"icon-minus","aria-hidden":"true"})})]}),e("button",{type:"button",className:"efp-map-control",title:i.width,onClick:j,children:e("i",{className:"icon-maximize","aria-hidden":"true"})})]})};export default q;