On this pageFunctions
Ui/VirtualList
/**
* Notifies VirtualList that its parent-owned items changed. The next view
* resolves the stored stable-key anchor against the new items, and the
* Command restores that anchor after the DOM patch.
*/
(
model: VirtualList.Model,
itemKeys: readonly Array<string>
): ScrollReturn/**
* Creates an initial virtual list model from a config. The container starts
* in `Unmeasured` state until its Mount reports the first measurement.
*/
(config: InitConfig): VirtualList.Model/** Programmatically scrolls to a logical target. */
(
model: VirtualList.Model,
target: {
_tag: "Key"
key: string
} | {
_tag: "Offset"
offset: number
} | {
_tag: "End"
} | {
_tag: "Index"
index: number
},
options: ScrollToOptions
): ScrollReturn/**
* Programmatically scrolls the container so the row at `index` is visible.
* The next view resolves the logical index with its current sizing mode, and
* the Command aligns the live rendered row.
*/
(
model: VirtualList.Model,
index: number,
options: ScrollToOptions
): ScrollReturn/**
* Programmatically scrolls to the row whose `itemToKey` result matches
* `key`. The next view resolves the key against its current items.
*/
(
model: VirtualList.Model,
key: string,
options: ScrollToOptions
): ScrollReturn/**
* Programmatically scrolls to an exact pixel offset from the start of the
* list. Negative offsets clamp to zero.
*/
(
model: VirtualList.Model,
offset: number
): ScrollReturn/** Configuration for creating a virtual list model with `init`. */
type InitConfig = Readonly<{
followEnd: Readonly<{
thresholdPx: number
}>
id: string
initialScroll: Readonly<{
alignment: ScrollAlignment
target: ScrollTarget
}>
initialScrollTop: number
rowHeightPx: number
}>/**
* Mutually exclusive configuration for fixed, exact variable, or measured
* dynamic row heights.
*/
type RowHeightInputs = Readonly<{
dynamicRowHeights: undefined
itemToEstimatedRowHeightPx: never
itemToRowHeightPx: undefined
}> | Readonly<{
dynamicRowHeights: true
itemToEstimatedRowHeightPx: (item: Item, index: number) => number
itemToRowHeightPx: never
}> | Readonly<{
dynamicRowHeights: never
itemToEstimatedRowHeightPx: never
itemToRowHeightPx: (item: Item, index: number) => number
}>/** Options shared by row-targeted programmatic scrolling helpers. */
type ScrollToOptions = Readonly<{
alignment: ScrollAlignment
}>/** Alignment of content when its total height is shorter than the viewport. */
const ContentAlignment: Literals<readonly ["Start", "End"]>/** Union of all messages the virtual list component can produce. */
const Message: MessageUnion<{
CompletedApplyScroll: {
outcome: TaggedUnion<{
Applied: {
anchor: TaggedUnion<{
None: {}
Row: {
index: Number
key: String
viewportOffset: Number
}
}>
containerHeight: Number
scrollHeight: Number
scrollTop: Number
}
Skipped: {}
}>
version: Number
}
MeasuredRows: {
measurements: $Array<Struct<{
height: Number
key: String
layoutVersion: Number
}>>
}
ObservedContainerScroll: {
anchor: TaggedUnion<{
None: {}
Row: {
index: Number
key: String
viewportOffset: Number
}
}>
containerHeight: Number
scrollHeight: Number
scrollTop: Number
}
ResizedContainer: {
containerHeight: Number
containerWidth: Number
}
}>/**
* Schema for the virtual list's state. Tracks scroll position, container
* measurement, and any in-flight programmatic scroll.
*/
const Model: Struct<{
endBehavior: TaggedUnion<{
Follow: {
thresholdPx: Number
}
PreserveAnchor: {}
}>
id: String
initialScroll: TaggedUnion<{
Applied: {}
Pending: {
alignment: Literals<readonly ["Start", "Center", "End", "Nearest"]>
target: TaggedUnion<{
End: {}
Index: {
index: Number
}
Key: {
key: String
}
Offset: {
offset: Number
}
}>
}
}>
layoutVersion: Number
measuredRowHeights: $Record<String, Number>
measurement: TaggedUnion<{
Measured: {
containerHeight: Number
containerWidth: Number
}
Unmeasured: {}
}>
pendingScroll: TaggedUnion<{
Idle: {}
Pending: {
request: TaggedUnion<{
Anchor: {
anchor: TaggedUnion<{
End: {}
Offset: {
scrollTop: unknown
}
Row: {
index: unknown
key: unknown
viewportOffset: unknown
}
}>
}
Target: {
alignment: Literals<readonly ["Start", "Center", "End", "Nearest"]>
target: TaggedUnion<{
End: {}
Index: {
index: unknown
}
Key: {
key: unknown
}
Offset: {
offset: unknown
}
}>
}
}>
version: Number
}
}>
pendingScrollVersion: Number
rowHeightPx: Number
scrollTop: Number
viewportAnchor: TaggedUnion<{
End: {}
Offset: {
scrollTop: Number
}
Row: {
index: Number
key: String
viewportOffset: Number
}
}>
}>/** Alignment of a row within the viewport after a programmatic scroll. */
const ScrollAlignment: Literals<readonly ["Start", "Center", "End", "Nearest"]>