Componentes customizados

Nesta seção, você encontra como customizar componentes no framework do Beagle para Web.

Criar um componente customizado

O primeiro passo que você deve fazer é criar um componente comum. Para isso, crie um novo componente em seu projeto.

Neste exemplo, o componente será criado com o nome customText. Basta utilizar o comando abaixo no seu terminal:

ng generate component components/customText --skip-import

Neste exemplo, será criado um componente chamado CustomTextComponent para renderizar um texto. Basta criar um novo arquivo chamado CustomTextComponent.tsx dentro da pasta components (se esta pasta não existir basta criá-la dentro da pasta src).

No arquivo criado coloque o seguinte código:

import React from 'react'

function CustomTextComponent() {
  return (
    <p>Beagle Web React</p>
  )
}

export default CustomTextComponent;

Feito isso, adicione no arquivo de associações da biblioteca Beagle do seu projeto como indicado nos exemplos a seguir.

Abra o arquivo beagle-components.module.ts e adicione o novo CustomTextComponent gerado na lista, como no exemplo abaixo:

...
import { CustomTextComponent } from './components/custom-text/custom-text.component'
// import all the components you're going to use with beagle

const components = [
  CustomTextComponent
]

@NgModule({
  declarations: components,
  entryComponents: components,
  exports: components,
  imports: [
    // everything your components depend on
  ],
})
export class BeagleComponentsModule {}

No arquivo beagle.module.ts adicione seu novo componente na lista de associações

import { BeagleModule } from '@zup-it/beagle-angular'
import { CustomTextComponent } from './components/custom-text/custom-text.component'
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://localhost:4200/assets',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    // Associate every beagle component to your angular component.
    "custom:text": CustomTextComponent
  },
})
export class Beagle {}

Abra o arquivo de configuração da biblioteca Beagle em seu projeto (se você seguiu o tutorial é o arquivo beagle-service.ts) e adicione o seu componente a lista de associações.

Caso você não tenha este arquivo em seu projeto, veja como configurar a biblioteca Beagle Web para o React.

import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomTextComponent from '../components/CustomTextComponent'

export default createBeagleUIService<any>({
  baseUrl: '',
  components: {
    'custom:text': CustomTextComponent
  }
})

Observe que, no passo acima, a palavra custom foi adicionada para identificar os componentes. Isto fará com que a biblioteca Beagle entenda que este componente não faz parte da lista de componentes pré-definidos.

Adicionando propriedades ao componente

Para adicionar propriedades ao componente criado, siga os seguintes passos:

Abra o arquivo custom-text.component.ts e adicione um @Input, como no código abaixo:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-custom-text',
  templateUrl: './custom-text.component.html',
  styleUrls: ['./custom-text.component.less']
})
export class CustomTextComponent implements OnInit {
  @Input() myCustomText: string

  constructor() { }

  ngOnInit(): void {
  }

}

Feito isso, adicione a referência ao arquivo custom-text.component.html

<div>
    <h1>{{myCustomText}}</h1>
</div>

No React, todos os atributos definidos no JSON podem ser acessados através de props, veja o exemplo

import React from 'react'

interface CustomText {
  myCustomText: string
}


function CustomTextComponent(props: CustomText) {
  return (
    <p>{props.myCustomText}</p>
  )
}

export default CustomTextComponent;

Criando o JSON

Podemos agora adicionar o nosso componente ao arquivo JSON. Se você seguiu o tutorial, abra o arquivo payload.json e o substitua com o conteúdo abaixo, caso contrário, apenas substitua a fonte de onde o seu JSON foi guardado ou gerado.

{
  "_beagleComponent_": "beagle:container",
  "children": [
    {
      "_beagleComponent_": "custom:text",
      "myCustomText": "Beagle Web is Awesome"
    }
  ]
}

Última modificação 11/02/2021: create content (#298) (43225e15)