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

Interactive floor plan library for expos and events

import{jsx as _,jsxs as Q}from"react/jsx-runtime";import"./Overlay.scss";import fe from"classnames";import{createContext as de,useCallback as m,useEffect as x,useMemo as X,useRef as v,useState as u}from"react";import{MOBILE_BREAKPOINT as Y}from"../constants";import{useDragGesture as me}from"../hooks/useDragGesture";import{useWindowSize as ge}from"../hooks/useWindowSize";import he from"../tools/debounce";import{t as ve}from"../utils/i18n";import we from"./OverlayParticles";export const OverlayScrollContext=de(null);const Z=70,pe="0.3s",ye=10,D=()=>window!==window.top&&(document.documentElement.clientHeight||document.body.clientHeight)||window.innerHeight,$=(a=D(),r,s,I)=>({small:a/r,medium:a/s,full:a-I}),He=({children:a,open:r,size:s="medium",particles:I=!1,className:V,onChangeSize:U,onScrollStateChange:w,smallSizeMultiplier:O=12.6,mediumSizeMultiplier:A=2.6,fullSizeOffset:S=0,scrollThreshold:C=ye,disableDrag:G=!1,forceFull:N=!1,scrollResetKey:z})=>{const{width:M,height:ee}=ge(),[t,te]=u(()=>$(D(),O,A,S)),[l,oe]=u(()=>M<=Y),[p,W]=u(!1),[i,ne]=u(()=>t[s]),[g,b]=u(()=>t[s]),[h,y]=u(!1),[re,K]=u(r),[L,P]=u(!1),j=v(),k=v(),q=v(null),F=v(null),f=v(null),c=m(e=>{const o=t[e];ne(o),b(o),U?.(e)},[t,U]),se=X(()=>l?N&&r?{height:D()}:{height:r||h?g:0}:{height:r?"auto":void 0},[l,r,g,p,s,h,N]),J=m(e=>{const o=[t.small,t.medium,t.full].sort();if(e>=t.full){c("full");return}if(e<=t.small){c("small");return}const n=i||t.medium,d=e>n?o.find(E=>E+Z>=e)||t.full:o.reverse().find(E=>E-Z<=e)||t.small;d===t.full?c("full"):d===t.medium?c("medium"):c("small")},[t,i,c]),le=m(e=>{W(!0),j.current=e},[]),ie=m(e=>{const o=j.current;if(o===void 0)return;const n=f.current;if(n?.scrollTop>0&&i===t.full)return;const d=o-e;let R=(i||t.medium)+d;n&&i===t.full&&R<i&&(n.style.overflow="hidden"),R=Math.min(Math.max(R,t.small),t.full),k.current=d,b(R)},[i,t]),ce=m(()=>{W(!1),j.current=void 0;const e=f.current;e&&e.style.removeProperty("overflow");const o=k.current;k.current=void 0,o!==void 0&&g!==void 0&&J(g)},[g,J]),B=m(e=>{if(p)return;c(s==="small"?"medium":s==="medium"?"full":"small")},[p,s,c]),{touchHandlers:H,mouseHandlers:T}=me({onDragStart:le,onDragMove:ie,onDragEnd:ce}),ue=m(()=>{const e=f.current;if(!e)return;const n=e.scrollTop>=C;L!==n&&(P(n),w?.(n))},[C,L,w]),ae=X(()=>he(()=>{window.__resett?.()},250),[]);return x(()=>{if(!l||G)return;const e=q.current,o=F.current,n=f.current;e&&(e.ontouchstart=H.onTouchStart,e.ontouchend=H.onTouchEnd,window.ontouchmove=H.onTouchMove,e.onmousedown=T.onMouseDown,e.onmouseup=T.onMouseUp,window.onmousemove=T.onMouseMove),o&&o.addEventListener("mouseup",B);const d=()=>{i&&i<t.full&&n&&(n.style.overflow="hidden")};return n&&(n.ontouchstart=d),()=>{e&&(window.ontouchmove=null,window.onmousemove=null),o&&o.removeEventListener("mouseup",B)}},[l,H,T,B,i,t]),x(()=>{oe(M<=Y);const e=D();te($(e,O,A,S))},[M,ee,O,A,S]),x(()=>{if(r){K(!0),y(!0);const e=setTimeout(()=>{c(s),y(!1)},10);return()=>clearTimeout(e)}else{y(!0),l&&b(0);const e=setTimeout(()=>{K(!1),y(!1),P(!1)},parseFloat(pe)*1e3);return()=>clearTimeout(e)}},[r,s,c,l]),x(()=>{r&&!h&&(f.current?.scrollTo({top:0}),P(!1),w?.(!1))},[r,h,w,z]),re?_(OverlayScrollContext.Provider,{value:f.current,children:Q("div",{className:fe("efp-overlay",{"is-open":r,"is-draggable":p,"is-small":s==="small","is-medium":s==="medium","is-full":s==="full","is-mobile":l,"is-desktop":!l,"is-hidden":!l&&!r,"is-animating":h,"is-scrolled":L,"is-forced-full":N&&l},V),style:se,ref:q,children:[!G&&_("div",{className:"efp-overlay__draghandle",ref:F}),Q("div",{className:"efp-overlay__scroll",ref:f,onScroll:e=>{ue(),ae()},children:[I?_(we,{}):null,_("div",{className:"efp-overlay__content",children:a||ve("No content")})]})]})}):null};export default He;