Mixins / foldkit-mixins-ui

VirtualList

namespace · packages/mixins-ui/src/virtualList.ts:1

export * as VirtualList from './virtualList.js'

In the guides

Members

VirtualList.view

function · packages/mixins-ui/src/virtualList.ts:40

function view<Item, Message>(
  options: VirtualListView<Item, Message>,
  h: HtmlBuilder<Message>,
): Html

VirtualList.VirtualListSlots

const · packages/mixins-ui/src/virtualList.ts:18

const VirtualListSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly row: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

@foldkit/ui's virtual list, which draws only the rows in view and spacers for the rest, so a list of thousands scrolls as one of thirty. The list's Model is upstream's, which the application keeps and folds with VirtualList.update from @foldkit/ui/virtualList, as it does a Menu's.

Upstream draws its own scrolling ul and rows, and takes no toView, so the slots are around and inside them: root is the box the list scrolls within, which gives it its height, and row is each row's content. A row is drawn inside the list's submodel, so its mixins may style it but not handle its events: a handler there would speak the list's Messages.

VirtualList.VirtualListView

type · packages/mixins-ui/src/virtualList.ts:23

type VirtualListView<Item, Message> = Readonly<{
  model: UiVirtualList.Model
  items: ReadonlyArray<Item>
  itemToKey: (item: Item, index: number) => string
  itemToView: (item: Item, index: number) => Html
  onMessage: (message: UiVirtualList.Message) => NoInfer<Message>
  overscan?: number | undefined
  style?: NamedStyle<typeof VirtualListSlots> | undefined
  mixins?: MixinList<Message> | undefined
}> &
  UiVirtualList.RowHeightInputs<Item>