spotlight/SpotlightContainerDecorator

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>
	}
});