spotlight/ Spottable
Adds spottability to components.
import Spottable from '@enact/spotlight/Spottable';
Members
SpottableHigher-Order Component
Constructs a Spotlight 5-way navigation-enabled higher-order component.
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 SpottableComponent = Spottable(Component);
import Spottable from '@enact/spotlight/Spottable';
Configuration
Whether or not the component should emulate mouse events as a response to Spotlight 5-way events.
Default: false
Properties added to wrapped component
Whether or not the component is in a disabled state.
Default: falseThe handler to run when the component is removed while retaining focus.
The handler to run when the 5-way down key is pressed.
The handler to run when the 5-way left key is pressed.
The handler to run when the 5-way right key is pressed.
The handler to run when the 5-way up key is pressed.
An array of numbers representing keyCodes that should trigger mouse event emulation when
emulateMouse
istrue
. If a keyCode equals a directional key, then default 5-way navigation will be prevented when that key is pressed.Default: [13, 16777221]When
true
, the component cannot be navigated using spotlight.Default: falseUsed to identify this component within the Spotlight system
The tabIndex of the component. This value will default to -1 if left unset and the control is spottable.
spottableClassstring
The class name for spottable components. In general, you do not need to directly access this class