ui/ Changeable
A higher-order component that adds state management for a single prop via a single event handler.
import Changeable from '@enact/ui/Changeable';
Members
ChangeableHigher-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 Changeable from '@enact/ui/Changeable';
Configuration
Configures the prop name to pass the callback to change the value
Default: 'onChange'Configures the prop name to pass the current value
Default: 'value'
Properties added to wrapped component
The value set at construction when the value prop is
undefined
ornull
.This prop is consumed by
Changeable
and not passed onto the wrapped component.Prevents updates to the internal state of
Changeable
.disabled
is forwarded on to the wrapped component.Default: falseCalled to notify
Changeable
that the value has changed.The event object must contain a property with the same name as the configured
prop
.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" andChangeable
will manage the value using callbacks defined by its configuration.