spotlight/ Spotlight Container Decorator
Exports the spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
Higher-order Component and spotlight/SpotlightContainerDecorator.spotlightDefaultClass
className
. The default export is
spotlight/SpotlightContainerDecorator.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
When
true
, allows focus to move outside the container to the next spottable element when holding 5 way keys.Default: false- defaultElement
The selector for the default spottable element within the container.
Default: '.spottable-default'- enterTo
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. Ifnull
, the default 5-way behavior will be applied.Default: null- preserveId
Whether the container will preserve the id when it unmounts.
Default: false
Properties added to wrapped component
- containerId
Specifies the container id. If the value is
null
, an id will be generated.- spotlightDisabled
When
true
, controls in the container cannot be navigated.Default: false- spotlightMuted
Whether or not the container is in muted mode.
Default: false- spotlightRestrict
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.