spotlight/ Spotlight Container Decorator
A component for managing groups of spottable components.
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.
Note: This HoC passes a number of props to the wrapped component that should be passed to the main DOM node.
Example:
const Component = ({myProp, ...rest}) => (
<div {...rest}>{myProp}</div>
);
...
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
When
true
, allows focus to move outside the container to the next spottable element when holding 5 way keys.Default: falseThe selector for the default spottable element within the container. When an array of selectors is provided, the first selector that successfully matches a node is used.
Default: '.spottable-default'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: nullWhether the container will preserve the specified
spotlightId
when it unmounts.Default: falseRestricts 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. Specifying 'none' indicates there should be no restrictions when 5-way navigating the container.Default: 'self-first'
Properties added to wrapped component
When
true
, controls in the container cannot be navigated.Default: falseUsed to identify this component within the Spotlight system.
If the value is
null
, an id will be generated. To keep the container information for restoring focus, it is required to specify a unique identifier.Whether or not the container is in muted mode.
In muted mode,
:focus
CSS styles will not be applied to the Spottable controls giving them the appearance of not having focus while they still have focus.Default: falseRestricts 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. Specifying 'none' indicates there should be no restrictions when 5-way navigating the container.Default: 'self-first'
spotlightDefaultClassstring
The class name to apply to the default component to focus in a container.