Actionable

This component makes its child actionable based on the defined properties.

When stacking two or more actionables of the same size and using the same attribute, only the lowest one in the tree will be called.

Examples

Making a text clickable

The actionable component will allow you to set an event listener on many user actions.

You can set the onPressed event using the following example to trigger the listener textPress. props will add more flexibility and allow reusable listeners by passing some more informations to your listeners like the id of the button you pressed.

{
    "type": "actionable",
    "onPressed": {
        "_type": "listener",
        "name": "textPress",
        "props": {
            ...
        }
    },
    "child": {
        "type": "text",
        "value": "This is an actionable text."
    }
}

Handling multiple events.

You can handle multiple events using just one actionable. Just define them in the component declaration like in this example :

{
    "type": "actionable",
    "onPressed": {
        "_type": "listener",
        "name": "pressedOnceAction",
    },
    "onDoublePressed": {
        "_type": "listener",
        "name": "doublePressedAction",
    },
    "onLongPressed": {
        "_type": "listener",
        "name": "longPressedAction",
    },
    "onHovered": {
        "_type": "listener",
        "name": "hoveredAction",
    },
    "child": {
        "type": "text",
        "value": "This is an actionable text."
    }
}

Stacking actionables with same attribute.

You can stack actionable that trigger the same event, but only the deepest actionable will trigger the listener.

Deeper your actionable is, more priority it gets to trigger the event.

{
    "type": "actionable",
    "onPressed": {
        // Will not be called because there is an actionable below that defines the onPressed attribute
        // Note that if this actionable was sized to be bigger than the actionable below, it would be possible to trigger this onPressed
        "_type": "listener",
        "name": "willNotBeCalled",
    },
    "onDoublePressed": {
        // Will be called because there is no actionable below that defines this attribute
        "_type": "listener",
        "name": "willBeCalled",
    },
    "child": {
        "type": "actionable",
        "onPressed": {
            "_type": "listener",
            "name": "willBeCalled",
        },
        "child": {
            "type": "text",
            "value": "This is an actionable text."
        }
    }
}

Properties

Attribute	Description	Type
_type	The identifier of the component	actionable
child	Any component	Component
onDoublePressed	The listener to be called when the actionable is double pressed.	Listener
onHovered	The listener to be called when the actionable is hovered and when the mouse exits the hoverable area.	Listener
onLongPressed	The listener to be called when the actionable is long pressed.	Listener
onPressed	The listener to be called when the actionable is pressed.	Listener
onPressedCancel	The listener to be called when the actionable is pressed inside and released outside of the actionable, causing it to cancel the press action.	Listener
submit	Whether the actionable can submit a form.	boolean