Enact

spotlight/SpotlightContainerDecorator

import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';

Members

SpotlightContainerDecoratorHigher-Order Component

Constructs a Higher-order Component that allows Spotlight focus to be passed to its own configurable hierarchy of spottable child controls.

Example:

const DefaultContainer = SpotlightContainerDecorator(Component);
const FocusDefaultContainer = SpotlightContainerDecorator({enterTo: 'default-element'}, Component);

To specify a default element to spot in a container, utilize the spotlightDefaultClass.

Example:

import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
const ContainerComponent = SpotlightContainerDecorator(Component);
const View = kind({
	render: () => {
		<ContainerComponent>
			<SpottableComponent>foo</SpottableComponent>
			<SpottableComponent className={spotlightDefaultClass}>spot me first</SpottableComponent>
		</ContainerComponent>
	}
});
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
Configuration
continue5WayHold
Boolean

When true, allows focus to move outside the container to the next spottable element when holding 5 way keys.

Default: false
defaultElement
String

The selector for the default spottable element within the container.

Default: '.spottable-default'
enterTo
String

Directs which element receives focus when gaining focus from another container. If 'default-element', the default focused item will be selected. If 'last-focused', the container will focus the last focused item; if the container has never had focus, the default element will receive focus. If null, the default 5-way behavior will be applied.

Default: null
preserveId
Boolean

Whether the container will preserve the id when it unmounts.

Default: false
Properties added to wrapped component
containerId
String

Specifies the container id. If the value is null, an id will be generated.

spotlightDisabled
Boolean

When true, controls in the container cannot be navigated.

Default: false
spotlightMuted
Boolean

Whether or not the container is in muted mode.

Default: false
spotlightRestrict
String

Restricts or prioritizes navigation when focus attempts to leave the container. It can be either 'none', 'self-first', or 'self-only'. Specifying 'self-first' indicates that elements within the container will have a higher likelihood to be chosen as the next navigable element. Specifying 'self-only' indicates that elements in other containers cannot be navigated to by using 5-way navigation - however, elements in other containers can still receive focus by calling Spotlight.focus(elem) explicitly. Specying 'none' indicates there should be no restrictions when 5-way navigating the container.

spotlightDefaultClassstring

The class name to apply to the default component to focus in a container.

ArrayBooleanFunctionModuleNumberObjectString