Virtual list
Ten thousand rows that scroll as thirty, since only the rows in view are drawn.
forSlots(VirtualListSlots)(Recipes.VirtualList({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const VirtualListStyle = forSlots(VirtualListSlots)(Recipes.VirtualList({}))
/** Ten thousand files, made once: only the rows in view are drawn. */
export const FILES: ReadonlyArray<string> = Array.from(
{ length: 10_000 },
(_, index) => `report-${String(index + 1).padStart(5, '0')}.pdf`,
)
/** The list's Model is upstream's, kept by the application and folded with its `update`. */
export const virtualList = <Message>(
style: NamedStyle<typeof VirtualListSlots>,
model: UiVirtualList.Model,
onMessage: (message: UiVirtualList.Message) => Message,
h: HtmlBuilder<Message>,
): Html =>
VirtualList.view(
{
model,
items: FILES,
itemToKey: file => file,
itemToView: file => h.span([], [file]),
onMessage,
style,
},
h,
)