Ações customizadas

É possível criar ações customizadas para o seus components com o Beagle.

Criar um ActionHandler

Passo 1: Crie um interface com a propriedade obrigatória _beagleAction_ e outra com os outros valores necessários, como no exemplo abaixo onde dois parâmetros foram criados: A e B.

O nome da ação customizada _beagleAction_

interface CustomAction {
  _beagleAction_: 'custom:myCustomAction',
  parameterA: string,
  parameterB: number
}

Passo 2: Crie a função ActionHandler com a seguinte interface:

import { ActionHandler } from '@zup-it/beagle-web'


export const customAction: ActionHandler<CustomAction> = ({ action }) => {

}

Passo 3: Adicione o nome da ação no arquivo de associação do seu framework.

• Angular
• React

@BeagleModule({
  ...
  customActions:{
    "custom:myCustomAction": customAction //nome do action handler
  }
})
export class Beagle {}

export default createBeagleUIService<any>({
    ...
    customActions:{
        "custom:myCustomAction": customAction //nome do action handler
      }
})

Adicione ações ao JSON

Adicione a ação customizada ao JSON e adicione os parâmetros definidos na inteface do ActionHandler.

Veja abaixo um exemplo com button:

{
    "_beagleComponent_": "beagle:button",
    "text": "Clique para ação customizada",
    "onPress": {
        "_beagleAction_": "custom:myCustomAction",
        "parameterA": "Beagle Web",
        "parameterB": 10
  }
}

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.