@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 1.91 kB
JavaScript
import{jsx as e,jsxs as i}from"react/jsx-runtime";import"./Modal.scss";import B from"classnames";import{useEffect as I,useRef as O,useState as h}from"react";import{createPortal as P}from"react-dom";import V from"../ui/Button";import{t as $}from"../utils/i18n";import{useRenderTarget as z}from"../utils/useRenderTarget";const L=({open:l,className:v,type:p="default",title:b,badge:M,maxWidth:d,children:N,closeLabel:y,footerLeft:o=[],footerRight:r=[],onClickClose:s})=>{const n=z(),m=O(null),[g,c]=h(l),[x,u]=h(l);if(I(()=>{if(l)u(!0),setTimeout(()=>{c(!0)},10),document.body.style.overflow="hidden",setTimeout(()=>m.current?.focus(),0);else{c(!1);const a=setTimeout(()=>{u(!1)},200);return()=>clearTimeout(a)}const t=a=>{a.key==="Escape"&&s()};return document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t),document.body.style.overflow=""}},[l,s]),!x||!n)return null;const f=y??$("Close"),_=t=>t?.map(({label:a,onClick:w,variant:E="primary",disabled:T,withBadge:j},k)=>e(V,{onClick:w,variant:E,size:"md",inline:!0,disabled:T,withBadge:j,children:a},k));return P(e("div",{className:B("modal",`modal--${p}`,{isOpen:g},v),role:"dialog","aria-modal":"true",ref:m,tabIndex:-1,onClick:s,children:i("div",{className:"modal__box",style:d?{maxWidth:`${d}px`}:void 0,onClick:t=>t.stopPropagation(),children:[i("div",{className:"modal__header",children:[e("div",{className:"modal__title-container",children:e("div",{className:"modal__title",children:b})}),e("button",{type:"button",className:"modal__close",onClick:s,"aria-label":f,title:f,children:e("i",{className:"icon-close","aria-hidden":"true"})})]}),e("div",{className:"modal__body",children:N}),(o.length>0||r.length>0)&&i("div",{className:"modal__footer",children:[e("div",{className:"modal__footer-left",children:o.length>0&&_(o)}),r.length>0&&e("div",{className:"modal__footer-right",children:_(r)})]})]})}),n)};export default L;