diff --git a/src/views/pds.tsx b/src/views/pds.tsx index 1869980..b36ff3e 100644 --- a/src/views/pds.tsx +++ b/src/views/pds.tsx @@ -143,6 +143,7 @@ export const PdsView = () => { const [expandedIndex, setExpandedIndex] = createSignal(null); let containerRef: HTMLDivElement | undefined; + const collapsedHeights = new Map(); const virtualizer = createWindowVirtualizer({ get count() { return repos()?.length ?? 0; @@ -154,6 +155,17 @@ export const PdsView = () => { }, }); + const baseMeasure = virtualizer.measureElement.bind(virtualizer); + virtualizer.measureElement = (el: Element | null) => { + if (!el) return; + const indexStr = el.getAttribute("data-index"); + if (indexStr == null) return; + const index = parseInt(indexStr, 10); + if (expandedIndex() === index) return; + collapsedHeights.set(index, (el as HTMLElement).offsetHeight); + baseMeasure(el); + }; + virtualizer.indexFromElement = (node: Element) => { const indexStr = node.getAttribute("data-index"); if (!indexStr) return -1; @@ -196,29 +208,34 @@ export const PdsView = () => { style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }} > - {(virtualItem) => ( -
- { - const isClosing = expandedIndex() === virtualItem.index; - setExpandedIndex(isClosing ? null : virtualItem.index); - if (isClosing) requestAnimationFrame(() => virtualizer.measure()); + {(virtualItem) => { + const isExpanded = () => expandedIndex() === virtualItem.index; + return ( +
-
- )} + style={{ + position: "absolute", + top: `${virtualItem.start - virtualizer.options.scrollMargin}px`, + left: 0, + width: "100%", + overflow: "visible", + }} + > + { + setExpandedIndex(isExpanded() ? null : virtualItem.index); + }} + /> +
+ ); + }}