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

Interactive floor plan library for expos and events

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