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
String

You can use the endHold property to specify the circumstances under which a hold is considered to end. Set endHold to onMove (the default) if you want the hold to end as soon as the user's finger or pointer moves. Set endHold to onLeave if you want the hold to end only when the finger or pointer leaves the element altogether. When specifying onMove, you can also provide a moveTolerance 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
Array

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 a name / time pair. Notes:

  • Times should be specified in milliseconds.

  • Your events array overrides the framework defaults entirely, so if you want the standard hold event to fire at 200 ms (in addition to whatever custom events you define), you'll need to redefine it yourself as part of your events 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
Number

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 for frequency should always be a common factor of the times you set for your custom hold events, to ensure accurate event timing.

Default: 200
moveTolerance
Number

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
Boolean

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 of endHold: onLeave).

Default: false
Properties added to wrapped component
disabled
Boolean

Whether or not the component is in a disabled state.

Default: false
onHold
Function

The event that fires when a hold is detected.

onHoldPulse
Function

The event that regularly fires when a hold persists.

ArrayBooleanFunctionModuleNumberObjectString