ui/VirtualList

Size of an item for the VirtualList.

Valid value is a number. If the direction for the list is vertical, itemSize means the height of an item. For horizontal, it means the width of an item.

Example:

<VirtualList itemSize={ri.scale(72)} />

Size of an item for the VirtualGridList.

• Valid value is an object that has minWidth and minHeight as properties.

Example:

<VirtualGridList
	itemSize={{
		minWidth: ri.scale(180),
		minHeight: ri.scale(270)
	}}
/>

The rendering function called for each item in the list.

Note: The list does not always render a component whenever its render function is called due to performance optimization.

Example:

renderItem = ({index, ...rest}) => {
	delete rest.data;

	return (
		<MyComponent index={index} {...rest} />
	);
}

A callback function that receives a reference to the scrollTo feature.

Once received, the scrollTo method can be called as an imperative interface.

The scrollTo function accepts the following parameters:

• {position: {x, y}} - Pixel value for x and/or y position

• {align} - Where the scroll area should be aligned. Values are: 'left', 'right', 'top', 'bottom', 'topleft', 'topright', 'bottomleft', and 'bottomright'.

• {index} - Index of specific item. (0 or positive integer) This option is available for only VirtualList kind.

• {node} - Node to scroll into view

• {animate} - When true, scroll occurs with animation. When false, no animation occurs.

• {focus} - When true, attempts to focus item after scroll. Only valid when scrolling by index or node.

  Note: Only specify one of: position, align, index or node

Example:

// If you set cbScrollTo prop like below;
cbScrollTo: (fn) => {this.scrollTo = fn;}
// You can simply call like below;
this.scrollTo({align: 'top'}); // scroll to the top

Additional props included in the object passed to the itemsRenderer callback.

Client size of the list; valid values are an object that has clientWidth and clientHeight.

Activates the component for voice control.

The voice control group label.

The number of items of data the list contains.

The layout direction of the list.

Valid values are:

• 'horizontal', and

• 'vertical'.

Specifies how to show horizontal scrollbar.

Valid values are:

• 'auto',

• 'visible', and

• 'hidden'.

Prevents scroll by wheeling on the list.

Called when scrolling.

Passes scrollLeft, scrollTop, and moreInfo. It is not recommended to set this prop since it can cause performance degradation. Use onScrollStart or onScrollStop instead.

Called when scroll starts.

Passes scrollLeft, scrollTop, and moreInfo. You can get firstVisibleIndex and lastVisibleIndex from VirtualList with moreInfo.

Example:

onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualList
        ...
        onScrollStart={this.onScrollStart}
        ...
    />
)

Called when scroll stops.

Passes scrollLeft, scrollTop, and moreInfo. You can get firstVisibleIndex and lastVisibleIndex from VirtualList with moreInfo.

Example:

onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualList
        ...
        onScrollStop={this.onScrollStop}
        ...
    />
)

The spacing between items.

Specifies how to show vertical scrollbar.

Valid values are:

• 'auto',

• 'visible', and

• 'hidden'.