Enact

moonstone/VirtualList

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

Members

VirtualListComponent

moonstone/VirtualList.VirtualList is a VirtualList with Moonstone styling.

import VirtualList from '@enact/moonstone/VirtualList';
Properties
component •
Function

The render function for an item of the list receives the following parameters:

  • data is for accessing the supplied data property of the list.

    NOTE: In most cases, it is recommended to use data from redux store instead of using this parameter due to performance optimizations

  • data-index is required for Spotlight 5-way navigation. Pass to the root element in the component.

  • index is the index number of the component to render

  • key MUST be passed as a prop to the root element in the component for DOM recycling.

Data manipulation can be done in this function.

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

Usage:

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

	return (
		<MyComponent index={index} {...rest} />
	);
}
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)}/>
cbScrollTo
Function

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 paramaters:

  • {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)

  • {node} - Node to scroll into view

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

  • {indexToFocus} - Deprecated: Use focus instead.

  • {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
data
Any

Data for passing through to the component prop. NOTICE: For performance reason, changing this prop does NOT always cause the list to redraw its items.

Default: []
dataSize
Number

Size of the data.

Default: 0
direction
String

Direction of the list; valid values are 'horizontal' and 'vertical'.

Default: 'vertical'
focusableScrollbar
Boolean

When true, allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.

horizontalScrollbar
String

Specifies how to show horizontal scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'
onScroll
Function

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.

onScrollStart
Function

Called when scroll starts Passes scrollLeft, scrollTop, and moreInfo moreInfo has firstVisibleIndex and lastVisibleIndex

onScrollStop
Function

Called when scroll stops Passes scrollLeft, scrollTop, and moreInfo moreInfo has firstVisibleIndex and lastVisibleIndex

spacing
Number

Spacing between items.

Default: 0
verticalScrollbar
String

Specifies how to show vertical scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'

GridListImageItemComponent❌

since 1.14.0. Replaced by moonstone/GridListImageItem.GridListImageItem

moonstone/VirtualList.GridListImageItem is a GridListImageItem with Moonstone styling, Spottable applied.

Usage:

<GridListImageItem source="http://placehold.it/300x300/9037ab/ffffff&text=Image0" caption="image0" subCaption="sub-image0" />
See: moonstone/VirtualList.GridListImageItemBase
import {GridListImageItem} from '@enact/moonstone/VirtualList';

GridListImageItemBaseComponent❌

since 1.14.0. Replaced by moonstone/GridListImageItem.GridListImageItemBase

moonstone/VirtualList.GridListImageItemBase is a stateless GridListImageItem with Moonstone styling applied.

import {GridListImageItemBase} from '@enact/moonstone/VirtualList';
Properties
source •
String

The absolute URL path to the image.

caption
String

The primary caption to be displayed with the image.

placeholder
String

Placeholder image used while source is loaded.

Default: An image
selected
Boolean

When true, applies a selected visual effect to the image, but only if selectionOverlayShowing is also true.

Default: false
selectionOverlay
Function

The custom selection overlay component to render. A component can be a stateless functional component, kind() or React component. The following is an example with custom selection overlay kind.

Example Usage:

const SelectionOverlay = kind({
	render: () => <div>custom overlay</div>
});

<GridListImageItemBase selectionOverlay={SelectionOverlay} />
selectionOverlayShowing
Boolean

When true, a selection overlay with a centered icon is shown. When selected is true, a check mark is shown.

Default: false
subCaption
String

The second caption line to be displayed with the image.

VirtualGridListComponent

moonstone/VirtualList.VirtualGridList is a VirtualGridList with Moonstone styling.

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

The render function for an item of the list receives the following parameters:

  • data is for accessing the supplied data property of the list.

    NOTE: In most cases, it is recommended to use data from redux store instead of using this parameter due to performance optimizations

  • data-index is required for Spotlight 5-way navigation. Pass to the root element in the component.

  • index is the index number of the component to render

  • key MUST be passed as a prop to the root element in the component for DOM recycling.

Data manipulation can be done in this function.

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

Usage:

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

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

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)}}/>
cbScrollTo
Function

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 paramaters:

  • {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)

  • {node} - Node to scroll into view

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

  • {indexToFocus} - Deprecated: Use focus instead.

  • {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
data
Any

Data for passing through to the component prop. NOTICE: For performance reason, changing this prop does NOT always cause the list to redraw its items.

Default: []
dataSize
Number

Size of the data.

Default: 0
direction
String

Direction of the list; valid values are 'horizontal' and 'vertical'.

Default: 'vertical'
focusableScrollbar
Boolean

When true, allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.

horizontalScrollbar
String

Specifies how to show horizontal scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'
onScroll
Function

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.

onScrollStart
Function

Called when scroll starts Passes scrollLeft, scrollTop, and moreInfo moreInfo has firstVisibleIndex and lastVisibleIndex

onScrollStop
Function

Called when scroll stops Passes scrollLeft, scrollTop, and moreInfo moreInfo has firstVisibleIndex and lastVisibleIndex

spacing
Number

Spacing between items.

Default: 0
verticalScrollbar
String

Specifies how to show vertical scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'

gridListItemSizeShapeObject

The shape for the grid list item size in a list for moonstone/VirtualList.listItemSizeShape.

minWidth
Number

The minimum width of the grid list item.

minHeight
Number

The minimum height of the grid list item.

ArrayBooleanFunctionModuleNumberObjectString