enact logoEnact
Edit on GitHub

ui/Toggleable

A higher-order component at handles toggle state.

import Toggleable from '@enact/ui/Toggleable';

Members

ToggleableHigher-Order Component

A higher-order component that applies a 'toggleable' behavior to its wrapped component.

Its default event and property can be configured when applied to a component.

Note: This HoC passes a number of props to the wrapped component that should be passed to the main DOM node or consumed by the wrapped component.

Example:

const Item = ({selected, ...rest}) => (<div {...rest}>{selected}</div>);
...
const ToggleItem = Toggleable({toggleProp: 'onClick'}, Item);
import Toggleable from '@enact/ui/Toggleable';
Configuration
activate
String

Configures the event name that activates the component.

Note: When using activate/deactivate, the event payload will only forward the original event and not include toggled prop value. Use toggle to receive toggled value from the event payload.

Example:

const ToggleItem = Toggleable({activate: 'onFocus', deactivate: 'onBlur'}, Item);

handleEvent = (ev) => {
	// do something with `ev.selected` here
}

<ToggleItem onToggle={handleEvent}>This is a toggle item</Item>
deactivate
String

Configures the event name that deactivates the component.

Note: When using activate/deactivate, the event payload will only forward the original event and not include toggled prop value. Use toggle to receive toggled value from the event payload.

Example:

const ToggleItem = Toggleable({activate: 'onFocus', deactivate: 'onBlur'}, Item);

handleEvent = (ev) => {
	// do something with `ev.selected` here
}

<ToggleItem onToggle={handleEvent}>This is a toggle item</Item>
eventProps
ArrayString

Configures additional props to attach to the event that is sent when toggled.

Default: []
prop
String

Configures the property that is passed to the wrapped component when toggled.

Default: 'selected'
toggle
String

Configures the event name that toggles the component.

The payload includes a toggled Boolean value of prop.

Note: The payload will override the original event. If a native event is set, then the native event payload will be lost.

Default: 'onToggle'
toggleProp
String

Allows you to remap the incoming toggle callback to an event name of your choosing.

For example, run onToggle when the wrapped component has an onClick property and you've specified onClick here.

Default: null
Properties added to wrapped component
defaultSelected
Boolean

Default toggled state applied at construction when the toggled prop is undefined or null.

Default: false
disabled
Boolean

Whether or not the component is in a disabled state.

onToggle
Function

Event callback to notify that state should be toggled.

selected
Boolean

Current toggled state.

When set at construction, the component is considered 'controlled' and will only update its internal value when updated by new props. If undefined, the component is 'uncontrolled' and Toggleable will manage the toggled state using callbacks defined by its configuration.

ArrayBooleanFunctionModuleNumberObjectString