moonstone/VirtualList

Provides Moonstone-themed virtual list components and behaviors.

import VirtualList from '@enact/moonstone/VirtualList';

Members

VirtualListComponent

A Moonstone-styled scrollable and spottable virtual list component.

import VirtualList from '@enact/moonstone/VirtualList';
Properties
itemSize
Number

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.

Usage:

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

VirtualGridListComponent

A Moonstone-styled scrollable and spottable virtual grid list component.

import {VirtualGridList} from '@enact/moonstone/VirtualList';
Properties

Size of an item for the VirtualGridList; valid value is an object that has minWidth and minHeight as properties.

Usage:

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

VirtualListBaseComponent

A Moonstone-styled base component for VirtualList and VirtualGridList.

import {VirtualListBase} from '@enact/moonstone/VirtualList';
Properties
data-webos-voice-focused
Boolean

Activates the component for voice control.

data-webos-voice-group-label
String

The voice control group label.

direction
String

Direction of the list.

Valid values are:

  • 'horizontal', and

  • 'vertical'.

Default: 'vertical'

VirtualListCoreComponent

The base version of VirtualListBase and VirtualListBaseNative.

import {VirtualListCore} from '@enact/moonstone/VirtualList';
Properties
itemRenderer
Function

The render 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.

Usage:

renderItem = ({index, ...rest}) => {
	return (
		<MyComponent index={index} {...rest} />
	);
}
dataSize
Number

Size of the data.

Default: 0
isItemDisabled
Function

The Function that returns true if the item at the index is disabled. It is used to navigate a list properly with 5 way keys, page up key, and page down key. If it is not supplied, it assumes that no items are disabled.

Usage:

isItemDisabled = (index) => (this.items[index].disabled)
render = () => {
	return (
		<VirtualList
			dataSize={this.items.length}
			isItemDisabled={isItemDisabled}
			itemRenderer={this.renderItem}
			itemSize={this.itemSize}
		/>
	);
}
spacing
Number

Spacing between items.

Default: 0
wrap
BooleanString

When it's true and the spotlight focus cannot move to the given direction anymore by 5-way keys, a list is scrolled with an animation to the other side and the spotlight focus moves in wraparound manner.

When it's 'noAnimation', the spotlight focus moves in wraparound manner as same as when it's true except that a list is scrolled without an animation.

Default: false
ArrayBooleanFunctionModuleNumberObjectString