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
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 toggledprop
value. Usetoggle
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>
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 toggledprop
value. Usetoggle
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>
Configures additional props to attach to the event that is sent when toggled.
Default: []Configures the property that is passed to the wrapped component when toggled.
Default: 'selected'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'Allows you to remap the incoming
toggle
callback to an event name of your choosing.For example, run
onToggle
when the wrapped component has anonClick
property and you've specifiedonClick
here.Default: null
Properties added to wrapped component
Default toggled state applied at construction when the toggled prop is
undefined
ornull
.Default: falseWhether or not the component is in a disabled state.
Event callback to notify that state should be toggled.
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.