spotlight/Spottable

Adds spottability to components.

Interactive Demo

Import Usage

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

Members

Spottable   Higher-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);

When a component receives spotlight focus, the data-spotlight-focused attribute is automatically applied to its DOM node and removed on blur. This provides a stable CSS hook for styling focused components without any additional configuration:

[data-spotlight-focused] {
    outline: 3px solid var(--my-focus-color);
}

Or within a CSS Modules component stylesheet:

.button {
    &[data-spotlight-focused] {
        .bg {
            background-color: var(--my-focus-bg-color);
        }
    }
}

For an app-wide focus class, see spotlight/SpotlightRootDecoratorspotlight/SpotlightRootDecorator.SpotlightRootDecorator and its focusEffectClass config option.

Import Usage

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

Configuration

emulateMouse

Boolean

Whether or not the component should emulate mouse events as a response to Spotlight 5-way events.

Default: true

Properties added to wrapped component

disabled

Boolean

Whether or not the component is in a disabled state.

Default: false

---

handleForceUpdate

Function

The handler to force update the component.

---

onSpotlightDisappear

Function

The handler to run when the component is removed while retaining focus.

---

onSpotlightDown

Function

The handler to run when the 5-way down key is pressed.

---

onSpotlightLeft

Function

The handler to run when the 5-way left key is pressed.

---

onSpotlightRight

Function

The handler to run when the 5-way right key is pressed.

---

onSpotlightUp

Function

The handler to run when the 5-way up key is pressed.

---

selectionKeys

Array(Number)

An array of numbers representing keyCodes that should trigger mouse event emulation when emulateMouse is true. If a keyCode equals a directional key, then default 5-way navigation will be prevented when that key is pressed.

Default: [13, 16777221]

---

spotlightDisabled

Boolean

When true, the component cannot be navigated using spotlight.

Default: false

---

spotlightId

String

Used to identify this component within the Spotlight system

---

tabIndex

Number

The tabIndex of the component. This value will default to -1 if left unset and the control is spottable.

spottableClass   string

The class name for spottable components. In general, you do not need to directly access this class