ui/ Holdable
Exports the ui/Holdable.Holdable Higher-order Component (HOC).
import Holdable from '@enact/ui/Holdable';
Members
HoldableHigher-Order Component❌
since 1.14.0. Will be replaced by ui/Touchable
in 2.0.0
ui/Holdable.Holdable is a Higher-order Component that applies a 'Holdable' behavior to its wrapped component, providing methods that fire when a hold behavior is detected.
import Holdable from '@enact/ui/Holdable';
Configuration
- endHold
You can use the
endHold
property to specify the circumstances under which a hold is considered to end. SetendHold
toonMove
(the default) if you want the hold to end as soon as the user's finger or pointer moves. SetendHold
toonLeave
if you want the hold to end only when the finger or pointer leaves the element altogether. When specifyingonMove
, you can also provide amoveTolerance
value (default:16
) that determines how tolerant you want to be of small movements when deciding whether a hold has ended. The higher the value, the further a user's finger or pointer may move without causing the hold to end.Default: 'onMove'- events
You can specify a set of custom hold events by setting the
events
property to an array containing one or more objects. Each object specifies a custom hold event, in the form of aname
/time
pair. Notes:Times should be specified in milliseconds.
Your
events
array overrides the framework defaults entirely, so if you want the standardhold
event to fire at 200 ms (in addition to whatever custom events you define), you'll need to redefine it yourself as part of yourevents
array.
Regardless of how many custom hold events you define,
onholdpulse
events will start firing after the first custom hold event fires, and continue until the user stops holding.Default: [{name: 'hold', time: 200}]- frequency
Determines not only how often
holdpulse
events are sent, but the frequency with which the hold duration is measured. This means that the value you set forfrequency
should always be a common factor of the times you set for your custom hold events, to ensure accurate event timing.Default: 200- moveTolerance
Determines how tolerant you want to be of small movements when deciding whether a hold has ended (in the case of
endHold: onMove
). The higher the value, the further a user's finger or pointer may move without causing the hold to end.Default: 16- resume
Specifies whether a hold that has ended due to finger / pointer movement should be resumed if the user's finger or pointer moves back inside the tolerance threshold (in the case of
endHold: onMove
) or back over the element (in the case ofendHold: onLeave
).Default: false
Properties added to wrapped component
- disabled
Whether or not the component is in a disabled state.
Default: false- onHold
The event that fires when a hold is detected.
- onHoldPulse
The event that regularly fires when a hold persists.