atmosphere explorer
pds.ls
tool
typescript
atproto
fix virtual item rendering in pds view
+39
-22
+39
-22
src/views/pds.tsx
+39
-22
src/views/pds.tsx
···
143
143
const [expandedIndex, setExpandedIndex] = createSignal<number | null>(null);
144
144
145
145
let containerRef: HTMLDivElement | undefined;
146
+
const collapsedHeights = new Map<number, number>();
146
147
const virtualizer = createWindowVirtualizer({
147
148
get count() {
148
149
return repos()?.length ?? 0;
···
153
154
return containerRef?.offsetTop ?? 0;
154
155
},
155
156
});
157
+
158
+
const baseMeasure = virtualizer.measureElement.bind(virtualizer);
159
+
virtualizer.measureElement = (el: Element | null) => {
160
+
if (!el) return;
161
+
const indexStr = el.getAttribute("data-index");
162
+
if (indexStr == null) return;
163
+
const index = parseInt(indexStr, 10);
164
+
if (expandedIndex() === index) return;
165
+
collapsedHeights.set(index, (el as HTMLElement).offsetHeight);
166
+
baseMeasure(el);
167
+
};
156
168
157
169
virtualizer.indexFromElement = (node: Element) => {
158
170
const indexStr = node.getAttribute("data-index");
···
196
208
style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
197
209
>
198
210
<For each={virtualizer.getVirtualItems()}>
199
-
{(virtualItem) => (
200
-
<div
201
-
data-index={virtualItem.index}
202
-
ref={virtualizer.measureElement}
203
-
classList={{ "z-10": expandedIndex() === virtualItem.index }}
204
-
style={{
205
-
position: "absolute",
206
-
top: `${virtualItem.start - virtualizer.options.scrollMargin}px`,
207
-
left: 0,
208
-
width: "100%",
209
-
}}
210
-
>
211
-
<RepoCard
212
-
repo={repos()![virtualItem.index]}
213
-
expanded={expandedIndex() === virtualItem.index}
214
-
onToggle={() => {
215
-
const isClosing = expandedIndex() === virtualItem.index;
216
-
setExpandedIndex(isClosing ? null : virtualItem.index);
217
-
if (isClosing) requestAnimationFrame(() => virtualizer.measure());
211
+
{(virtualItem) => {
212
+
const isExpanded = () => expandedIndex() === virtualItem.index;
213
+
return (
214
+
<div
215
+
data-index={virtualItem.index}
216
+
ref={virtualizer.measureElement}
217
+
classList={{
218
+
"z-10": isExpanded(),
219
+
"z-0": !isExpanded(),
220
+
}}
221
+
style={{
222
+
position: "absolute",
223
+
top: `${virtualItem.start - virtualizer.options.scrollMargin}px`,
224
+
left: 0,
225
+
width: "100%",
226
+
overflow: "visible",
218
227
}}
219
-
/>
220
-
</div>
221
-
)}
228
+
>
229
+
<RepoCard
230
+
repo={repos()![virtualItem.index]}
231
+
expanded={isExpanded()}
232
+
onToggle={() => {
233
+
setExpandedIndex(isExpanded() ? null : virtualItem.index);
234
+
}}
235
+
/>
236
+
</div>
237
+
);
238
+
}}
222
239
</For>
223
240
</div>
224
241
</Show>