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

Interactive floor plan library for expos and events

import{jsx as s}from"react/jsx-runtime";import"./List.scss";import{useObserver as h}from"mobx-react-lite";import{lazy as T,Suspense as g,useCallback as y,useEffect as c,useRef as I,useState as v}from"react";import{LANGUAGE_TYPE as L}from"../constants";import{uiState as t}from"../store";import S from"../ui/Spinner";import{getLocale as x}from"../utils/i18n";import b from"./LanguageRow";const m=()=>import("react-virtuoso").then(r=>({default:r.Virtuoso})).catch(()=>new Promise(r=>setTimeout(()=>r(m()),3e3))),C=T(m);export default function R({updatedScrollableRef:r,updateScroll:l}){const[i,a]=v(null),n=I(null);c(()=>{a(r??null)},[r]),c(()=>{const o=t.getListScrollTop(t.list.type);if(o>0){const e=setTimeout(()=>{n.current&&n.current.scrollTo({top:o,behavior:"auto"})},100);return()=>clearTimeout(e)}},[t.list.type]);const u=y(()=>{n.current?n.current.getState(o=>{const e=o?.scrollTop||0;t.setListScrollTop(t.list?.type,e)}):i?.current&&t.setListScrollTop(t.list?.type,i.current.scrollTop||0)},[i]);c(()=>()=>{u()},[]);const p=({index:o})=>{const e=t.listItems[o];return e.entity.type===L?s(b,{item:e},e.id):(console.error("Invalid item type"),null)},f=()=>{l&&setTimeout(l)},d=()=>{l&&l()};return h(()=>{const o=t.listItems.findIndex(e=>e.id===x());return s("div",{style:{height:"100%",cursor:"pointer",resize:"both",minHeight:100},children:i&&s(g,{fallback:s(S,{active:!0,isCenter:!0}),children:s(C,{ref:n,className:"list-virtual",style:{minHeight:t.listItems.length?"1px":0},data:t.listItems,itemContent:e=>p({index:e}),itemsRendered:f,totalListHeightChanged:d,customScrollParent:i.current,totalCount:t.listItems.length,overscan:20,increaseViewportBy:200,initialTopMostItemIndex:o!==-1?o:0,components:{EmptyPlaceholder:()=>s("div",{className:"list-empty",children:"No items to show"})}})})})})}