ui/Changeable

A higher-order component that adds state management for a single prop via a single event handler.

Import Usage

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

Members

Changeable   Higher-Order Component

A higher-order component that adds state management to a component for a single prop via a single event callback.

Applying Changeable to a component will pass two additional props: the current value from state and an event callback to invoke when the value changes. By default, the value is passed in the value prop and the callback is passed in the onChange callback but both are configurable through the HOC config object.

If value is passed to Changeable, the HOC assumes that the value is managed elsewhere and it will not update its internal state. To set an initial value, use defaultValue instead.

To update the value from the wrapped component, call onChange with an object containing a value member with the new value. Changeable will update its internal state and pass the updated value back down to the wrapped component.

Note: If the prop is overridden, the property names to set the default value and current value change correspondingly.

Import Usage

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

Configuration

change

String

Configures the prop name to pass the callback to change the value

Default: 'onChange'

---

prop

String

Configures the prop name to pass the current value

Default: 'value'

Properties added to wrapped component

onChange

Function

Called to notify Changeable that the value has changed.

The event object must contain a property with the same name as the configured prop.

---

defaultValue

Any

The value set at construction when the value prop is undefined or null.

This prop is consumed by Changeable and not passed onto the wrapped component.

---

prop

Any

The current value.

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 Changeable will manage the value using callbacks defined by its configuration.

---

disabled

Boolean

Prevents updates to the internal state of Changeable.

disabled is forwarded on to the wrapped component.

Default: false