Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    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

    AttributeDescriptionType
    _typeThe identifier of the component
    • actionable
    childAny componentComponent
    onDoublePressedThe listener to be called when the actionable is double pressed.Listener
    onHoveredThe listener to be called when the actionable is hovered and when the mouse exits the hoverable area.Listener
    onLongPressedThe listener to be called when the actionable is long pressed.Listener
    onPressedThe listener to be called when the actionable is pressed.Listener
    onPressedCancelThe listener to be called when the actionable is pressed inside and released outside of the actionable, causing it to cancel the press action.Listener
    submitWhether the actionable can submit a form.boolean