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

Interactive floor plan library for expos and events

import{jsx as s,jsxs as p}from"react/jsx-runtime";import"./Schedule.scss";import"./SessionsList.scss";import{OverlayScrollContext as b,Spinner as k}from"@expofp/ui";import h from"classnames";import m from"dateformat";import{observer as x}from"mobx-react-lite";import{lazy as N,Suspense as L,use as C,useEffect as E,useLayoutEffect as T,useMemo as M,useRef as F,useState as g}from"react";import R,{boothStore as B,uiState as v}from"../store";import{SESSIONS_LIST_TYPE as S}from"../store/types";import{t as G}from"../utils/i18n";import j from"./EventBadgeContainer";const I=()=>import("react-virtuoso").then(t=>({default:t.GroupedVirtuoso})).catch(()=>new Promise(t=>setTimeout(()=>t(I()),3e3))),H=N(I);function _(t){return new Date(t.endDate||t.startDate)}function O(t){const n=new Date,o=t.filter(u=>_(u)>n),r=t.filter(u=>_(u)<=n),e={groups:[],groupCounts:[],rows:[]},c=u=>{const f=new Map;for(const d of u){const[a]=d.startDate.split("T"),l=f.get(a);l?l.push(d):f.set(a,[d])}for(const[d,a]of f)e.groups.push({kind:"day",date:d}),e.groupCounts.push(a.length),a.forEach((l,i)=>e.rows.push({kind:"event",event:l,first:i===0,last:i===a.length-1,only:a.length===1}))};return c(o),r.length>0&&(e.groups.push({kind:"past-title"}),e.groupCounts.push(1),e.rows.push({kind:"past-title"}),c(r)),e}function w(t){const[n,o,r]=t.split("-"),e=new Date(parseInt(n,10),parseInt(o,10)-1,parseInt(r,10));return{day:r,month:m(e,"mmm"),weekday:m(e,"ddd"),full:m(e,"dddd, mmmm d")}}function D(t){const n=R.sessionsFilterStore.state.filters.use24hFormat.value;return m(new Date(t),n?"HH:MM":"h:MMtt")}function V({group:t,index:n,dateRef:o}){if(t.kind!=="day")return s("div",{className:"efp-sessions-list__group",children:s("div",{ref:o,"data-group-index":n})});const r=w(t.date);return s("div",{className:"efp-sessions-list__group",children:p("div",{ref:o,className:h("efp-schedule__date-sticky","efp-sessions-list__date",{"efp-sessions-list__date--first":n===0}),"data-group-index":n,children:[s("div",{children:r.day}),s("div",{children:r.month}),s("div",{children:r.weekday})]})})}const P=x(({row:t,groupIndex:n,selected:o,onClick:r})=>{const{event:e}=t,c=e.boothId?B.boothById.get(Number(e.boothId)):null;return p("div",{className:h("efp-sessions-list__row",{"efp-sessions-list__row--first":t.first&&n>0,"efp-sessions-list__row--last":t.last,"efp-sessions-list__row--only":t.only}),"data-event-id":e.id,children:[t.first&&s("span",{className:"efp-sessions-list__date-label",children:w(e.startDate.split("T")[0]).full}),p("div",{className:h("efp-schedule__event",{ended:e.isEnded||_(e)<new Date,selected:o}),role:"button",tabIndex:0,"aria-current":o||void 0,onClick:()=>r(e),onKeyDown:u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),r(e))},children:[p("span",{children:[D(e.startDate),e.endDate?` - ${D(e.endDate)}`:null]}),p("strong",{children:[e.name,s(j,{event:e})]}),c&&s("div",{className:"efp-schedule__event-booth-and-tracks",children:s("div",{className:"efp-schedule__event-booth",children:s("div",{children:c.name})})}),e.logoFile&&s("div",{className:"efp-schedule__event-logo",children:s("img",{src:e.logoFile,alt:e.name,crossOrigin:"anonymous"})})]})]})});function z({context:t,...n}){return s("div",{...n,role:"list"})}function A({item:t,context:n,...o}){return s("div",{...o,role:"listitem"})}function Y({context:t,...n}){return s("div",{...n,"aria-hidden":"true"})}function $(t){const[n]=g(()=>new Set),o=F(()=>{});E(()=>{if(!t)return;let e=0;const c=()=>{e=0;const f=t.getBoundingClientRect().top,d=[...n].map(i=>({date:i,index:Number(i.dataset.groupIndex),top:i.parentElement.getBoundingClientRect().top-f}));let a=-1,l;for(const i of d)i.top<=1&&(a=Math.max(a,i.index));for(const i of d)i.index>a&&i.top>1&&(!l||i.top<l.top)&&(l=i);for(const i of d){const y=i.index===a&&l?Math.min(0,l.top-i.top-i.date.offsetTop-i.date.offsetHeight):0;i.date.style.transform=y?`translateY(${y}px)`:""}},u=()=>{e||(e=requestAnimationFrame(c))};return o.current=u,t.addEventListener("scroll",u,{passive:!0}),u(),()=>{t.removeEventListener("scroll",u),cancelAnimationFrame(e),o.current=()=>{}}},[t,n]);const[r]=g(()=>e=>{if(e)return n.add(e),()=>{n.delete(e)}});return{dateRef:r,update:()=>o.current()}}const q=x(({events:t,onEventClick:n})=>{const o=C(b),r=M(()=>O(t),[t]),e=$(o),{listScrollItemId:c}=v,u=c===v.getListScrollItemId(S)?c:null,[f]=g(()=>{const d=v.getListScrollItemId(S);if(d==null)return;const a=r.rows.findIndex(l=>l.kind==="event"&&String(l.event.id)===String(d));return a===-1?void 0:a});return T(()=>{f===void 0&&o?.scrollTo({top:0})},[o,f]),o?s("div",{className:"efp-sessions-list",children:s(L,{fallback:s(k,{active:!0,isCenter:!0}),children:s(H,{customScrollParent:o,...f!==void 0&&{initialTopMostItemIndex:{index:f,align:"center"}},groupCounts:r.groupCounts,groupContent:d=>s(V,{group:r.groups[d],index:d,dateRef:e.dateRef}),itemContent:(d,a)=>{const l=r.rows[d];return l.kind==="past-title"?s("div",{className:"efp-sessions-list__past-title",children:G("Past Sessions")}):s(P,{row:l,groupIndex:a,selected:String(l.event.id)===String(u),onClick:n})},components:{List:z,Item:A,Group:Y},increaseViewportBy:400,itemsRendered:e.update})})}):null});export default q;